Refactor ClickableLinkPlugin (#5800)

facebook · Apr 3, 2024 · a08fed7 · a08fed7
1 parent 4f5fb58
commit a08fed7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/lexical-playground/src/Editor.tsx b/packages/lexical-playground/src/Editor.tsx
@@ -191,7 +191,7 @@ export default function Editor(): JSX.Element {
             <TwitterPlugin />
             <YouTubePlugin />
             <FigmaPlugin />
-            {!isEditable && <LexicalClickableLinkPlugin />}
+            <LexicalClickableLinkPlugin disabled={isEditable} />
             <HorizontalRulePlugin />
             <EquationsPlugin />
             <ExcalidrawPlugin />

diff --git a/packages/lexical-react/src/LexicalClickableLinkPlugin.tsx b/packages/lexical-react/src/LexicalClickableLinkPlugin.tsx
@@ -34,13 +34,20 @@ function findMatchingDOM<T extends Node>(
 
 export default function LexicalClickableLinkPlugin({
   newTab = true,
+  disabled = false,
 }: {
   newTab?: boolean;
+  disabled?: boolean;
 }): null {
   const [editor] = useLexicalComposerContext();
 
   useEffect(() => {
     const onClick = (event: MouseEvent) => {
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+
       const target = event.target;
       if (!(target instanceof Node)) {
         return;
@@ -99,7 +106,7 @@ export default function LexicalClickableLinkPlugin({
     };
 
     const onMouseUp = (event: MouseEvent) => {
-      if (event.button === 1 && editor.isEditable()) {
+      if (!disabled && event.button === 1) {
         onClick(event);
       }
     };
@@ -114,7 +121,7 @@ export default function LexicalClickableLinkPlugin({
         rootElement.addEventListener('mouseup', onMouseUp);
       }
     });
-  }, [editor, newTab]);
+  }, [editor, newTab, disabled]);
 
   return null;
 }