#Support links inside rich text editor
1 messages · Page 1 of 1 (latest)
Hey @near ivy! The link extension comes enabled by default, but we don't provide a UI for it since it can be pretty invasive and each app has its own requirements.
You should be able to configure it using the options attribute. Are you currently doing that and hitting issues?
Do you have any examples? I’m confused. I would assume a button on RTE for selecting text and adding a link
@near ivy
Since the link feature is not part of the default menu (as mentioned by @honest sinew), i assume a custom menu is necessary in order to use links inside a richtext field.
But i could not get them to work. It looks like a Link control is not available or at least it is not called <RichTextMenu.Link /> and it is not documented under https://puckeditor.com/docs/api-reference/components/rich-text-menu#included-controls.
I also tried enabling links in the options like this:
options: {
link: true,
},
But this does not seem to be valid.
@honest sinew
Might this be a bug?
There is also a bug in the docs:
Every instance of <RichTextMenu> currently links to:
https://puckeditor.com/docs/api-reference/components-rich-text-menu
but should be:
https://puckeditor.com/docs/api-reference/components/rich-text-menu
Yes, I’ve been facing the exact same. When I implement a custom link menu in tiptap it fails to work
Hello @near ivy and @tribal kayak!
Exactly, as @tribal kayak pointed out, we don't provide a UI for it, we do have an issue tracking either adding a UI for it, or not here (please provide any feedback on this there as well as it would help a lot).
Te reason behind it @near ivy is that link UI/UX is not 100 clear all of the time and different people use it for so many different things, that we felt it was better to provide the RTE, get feedback, and then make a decision on the Link UI.
@tribal kayak! Regarding RichTexMenu.Link, this is not working because we don't have a UI for it, instead you're encouraged to provide your own UI/UX using tiptap's Link APIs.
For example, here I added a button to the sidebar menu, that, when you click on it, it adds/removes a link from the selected text:
HeadingBlock: {
fields: {
title: {
type: "richtext",
renderMenu: ({ children, editor }) => {
return (
<RichTextMenu>
{children} // Render the rest of the options
<RichTextMenu.Group>
<button
onClick={() =>
editor
.chain()
.focus()
// Add/remove a `example.com` link to the selected text
.toggleLink({ href: "https://example.com" })
.run()
}
>
Add link
</button>
</RichTextMenu.Group>
</RichTextMenu>
);
},
},
},
defaultProps: {
title: "Heading",
},
render: ({ title }) => (
<div style={{ padding: 64 }}>
{title}
</div>
),
},
You can also configure tiptap extension's "settings", with options. For example, to disable the autolink setting:
type: "richtext",
options: {
link: {
autolink: true,
},
},