modifications to rich-input link component

This commit is contained in:
Amruth Pillai
2024-03-10 10:12:09 +01:00
parent a92528cdb7
commit df99470df8

View File

@ -113,29 +113,25 @@ const InsertImageForm = ({ onInsert }: InsertImageProps) => {
); );
}; };
const setLinkGlobal = (editor: Editor) => {
const previousUrl = editor.getAttributes("link").href;
const url = window.prompt("URL", previousUrl);
// cancelled
if (url === null) {
return;
}
// empty
if (url === "") {
editor.chain().focus().extendMarkRange("link").unsetLink().run();
return;
}
// update link
editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
};
const Toolbar = ({ editor }: { editor: Editor }) => { const Toolbar = ({ editor }: { editor: Editor }) => {
const setLink = useCallback(() => { const setLink = useCallback(() => {
setLinkGlobal(editor); const previousUrl = editor.getAttributes("link").href;
const url = window.prompt("URL", previousUrl);
// cancelled
if (url === null) {
return;
}
// empty
if (url === "") {
editor.chain().focus().extendMarkRange("link").unsetLink().run();
return;
}
// update link
editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
}, [editor]); }, [editor]);
return ( return (
@ -446,14 +442,9 @@ export const RichInput = forwardRef<Editor, RichInputProps>(
Highlight, Highlight,
Link.extend({ Link.extend({
inclusive: false, inclusive: false,
addKeyboardShortcuts() { addKeyboardShortcuts: () => ({
return { "Mod-k": () => setLink(),
"Mod-k": () => { }),
setLinkGlobal(this.editor as Editor);
return true;
},
};
},
}).configure({ openOnClick: false }), }).configure({ openOnClick: false }),
TextAlign.configure({ types: ["heading", "paragraph"] }), TextAlign.configure({ types: ["heading", "paragraph"] }),
], ],
@ -470,6 +461,24 @@ export const RichInput = forwardRef<Editor, RichInputProps>(
onUpdate: ({ editor }) => onChange?.(editor.getHTML()), onUpdate: ({ editor }) => onChange?.(editor.getHTML()),
}); });
const setLink = useCallback(() => {
if (!editor) return false;
const previousUrl = editor.getAttributes("link").href;
const url = window.prompt("URL", previousUrl);
// cancelled
if (url === null) return false;
// empty
if (url === "") {
return editor.chain().focus().extendMarkRange("link").unsetLink().run();
}
// update link
return editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
}, [editor]);
if (!editor) { if (!editor) {
return ( return (
<div className="space-y-2"> <div className="space-y-2">