search

sjdemartini / mui-tiptap

A Material UI (MUI) styled WYSIWYG rich text editor, using Tiptap
MIT License
319 stars 43 forks source link

Allow to add internal links using EditLinkMenuContent #275

Closed kdichev closed 2 weeks ago

kdichev commented 1 month ago

Context: I am currently building a blog website using Next.js, where I will frequently add internal links to connect relevant blog posts. Next.js provides a powerful internal linking system via the component, but I am encountering a limitation when trying to fully utilize this feature.

Current Issue: At present, I am unable to use protocol-less URLs (e.g., /link/to-blog-1) because the system adds to URLs the http protocol. For internal navigation within the site, Next.js encourages the use of URLs without the protocol to leverage client-side navigation, optimizing performance and user experience.

Request: I would like to request the option to allow protocol-less URLs for internal links, such as /link/to-blog-1, which are essential for proper routing and navigation in Next.js. This would allow seamless usage of Next.js’s linking features, enabling faster internal navigation without the need to modify the current behavior that enforces protocol-included URLs.

https://github.com/sjdemartini/mui-tiptap/blob/5495076960f5717f99f820f7ae0f0019896dd5ad/src/LinkBubbleMenu/EditLinkMenuContent.tsx#L119

sjdemartini commented 1 month ago

Makes sense! I think it would be nice for mui-tiptap to provide a way to override the default behavior when a user has typed in a link. For instance, a formatHref prop which contains whatever logic you prefer, and which is used instead of the logic within this function (so mui-tiptap would call that user-provided function instead of the rest of that function body, and pass its result to setHrefValue at the end there) https://github.com/sjdemartini/mui-tiptap/blob/5495076960f5717f99f820f7ae0f0019896dd5ad/src/LinkBubbleMenu/EditLinkMenuContent.tsx#L96-L127

I'd definitely welcome a PR for this sort of thing!

sjdemartini commented 1 month ago

This would also handle/resolve https://github.com/sjdemartini/mui-tiptap/issues/182 (which had a very similar request)

semanticist21 commented 1 month ago

If this is going to support local urls, Its input type would be "text" rather than "url". In my knowledge, this means that the component will not be able to utilise the built-in url scheme validation.

Is that right?

sjdemartini commented 2 weeks ago

This is now possible as of https://github.com/sjdemartini/mui-tiptap/releases/tag/v1.13.0.

If you'd like to customize the functionality further (e.g. it's still too restrictive of the types of URLs you want to allow users to type in, or you want to prevent non-relative URLs, or whatever), you can use the formatHref prop for LinkBubbleMenu.