fix: link dialog button in FF

Fixes #135
mdx-editor · Oct 23, 2023 · 47f3027 · 47f3027
1 parent 8d8de50
commit 47f3027
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 33 deletions.
diff --git a/src/plugins/link-dialog/LinkDialog.tsx b/src/plugins/link-dialog/LinkDialog.tsx
@@ -132,10 +132,10 @@ export const LinkDialog: React.FC = () => {
         data-visible={linkDialogState.type === 'edit'}
         className={styles.linkDialogAnchor}
         style={{
-          top: theRect?.top,
-          left: theRect?.left,
-          width: theRect?.width,
-          height: theRect?.height
+          top: `${theRect?.top ?? 0}px`,
+          left: `${theRect?.left ?? 0}px`,
+          width: `${theRect?.width ?? 0}px`,
+          height: `${theRect?.height ?? 0}px`
         }}
       />
 

diff --git a/src/plugins/link-dialog/index.ts b/src/plugins/link-dialog/index.ts
@@ -79,30 +79,32 @@ const linkDialogSystem = system(
         r.o.filter(([, selection]) => $isRangeSelection(selection))
       ),
       ([, selection, editor]) => {
-        editor?.getEditorState().read(() => {
-          const node = getLinkNodeInSelection(selection)
-          const rectangle = getSelectionRectangle(editor)!
-          if (node) {
-            r.pub(linkDialogState, {
-              type: 'edit',
-              initialUrl: node.getURL(),
-              initialTitle: node.getTitle() || '',
-              url: node.getURL(),
-              title: node.getTitle() || '',
-              linkNodeKey: node.getKey(),
-              rectangle
-            })
-          } else {
-            r.pub(linkDialogState, {
-              type: 'edit',
-              initialUrl: '',
-              initialTitle: '',
-              title: '',
-              url: '',
-              linkNodeKey: '',
-              rectangle
-            })
-          }
+        editor?.focus(() => {
+          editor?.getEditorState().read(() => {
+            const node = getLinkNodeInSelection(selection)
+            const rectangle = getSelectionRectangle(editor)!
+            if (node) {
+              r.pub(linkDialogState, {
+                type: 'edit',
+                initialUrl: node.getURL(),
+                initialTitle: node.getTitle() || '',
+                url: node.getURL(),
+                title: node.getTitle() || '',
+                linkNodeKey: node.getKey(),
+                rectangle
+              })
+            } else {
+              r.pub(linkDialogState, {
+                type: 'edit',
+                initialUrl: '',
+                initialTitle: '',
+                title: '',
+                url: '',
+                linkNodeKey: '',
+                rectangle
+              })
+            }
+          })
         })
       }
     )
@@ -137,6 +139,7 @@ const linkDialogSystem = system(
             if ($isRangeSelection(selection) && (getLinkNodeInSelection(selection) || !selection.isCollapsed())) {
               r.pub(openLinkEditDialog, true)
               event.stopPropagation()
+              event.preventDefault()
               return true
             } else {
               return false

diff --git a/src/plugins/toolbar/components/CreateLink.tsx b/src/plugins/toolbar/components/CreateLink.tsx
@@ -10,7 +10,12 @@ import { linkDialogPluginHooks } from '../../link-dialog'
 export const CreateLink = () => {
   const openLinkDialog = linkDialogPluginHooks.usePublisher('openLinkEditDialog')
   return (
-    <ButtonWithTooltip title="Create link" onClick={(_) => openLinkDialog(true)}>
+    <ButtonWithTooltip
+      title="Create link"
+      onClick={(_) => {
+        openLinkDialog(true)
+      }}
+    >
       <LinkIcon />
     </ButtonWithTooltip>
   )

diff --git a/src/utils/lexicalHelpers.ts b/src/utils/lexicalHelpers.ts
@@ -58,10 +58,10 @@ export function getSelectionRectangle(editor: LexicalEditor) {
     }
 
     return {
-      top: rect.top,
-      left: rect.left,
-      width: rect.width,
-      height: rect.height
+      top: Math.round(rect.top),
+      left: Math.round(rect.left),
+      width: Math.round(rect.width),
+      height: Math.round(rect.height)
     }
   } else if (!activeElement || activeElement.className !== 'link-input') {
     return null