marks on double click selection using firefox fix (#5580)

* fixed: marks on double click selection using firefox * adding changeset * minor -> patch * removing useless platform check * yarn fix * Add test --------- Co-authored-by: Joe Anderson <[email protected]>
ianstormtaylor · Dec 13, 2023 · a374895 · a374895
1 parent bf5a4ab
commit a374895
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 2 deletions.
diff --git a/.changeset/blue-flies-decide.md b/.changeset/blue-flies-decide.md
@@ -0,0 +1,5 @@
+---
+'slate': patch
+---
+
+Fix firefox double-click marks issue
diff --git a/packages/slate/src/editor/marks.ts b/packages/slate/src/editor/marks.ts
@@ -4,20 +4,40 @@ import { Range } from '../interfaces/range'
 import { Path } from '../interfaces/path'
 import { Text } from '../interfaces/text'
 import { Element } from '../interfaces/element'
+import { Point } from '../interfaces'
 
 export const marks: EditorInterface['marks'] = (editor, options = {}) => {
   const { marks, selection } = editor
 
   if (!selection) {
     return null
   }
+  let { anchor, focus } = selection
 
   if (marks) {
     return marks
   }
 
   if (Range.isExpanded(selection)) {
-    const [match] = Editor.nodes(editor, { match: Text.isText })
+    /**
+     * COMPAT: Make sure hanging ranges (caused by double clicking in Firefox)
+     * do not adversely affect the returned marks.
+     */
+    const isEnd = Editor.isEnd(editor, anchor, anchor.path)
+    if (isEnd) {
+      const after = Editor.after(editor, anchor as Point)
+      if (after) {
+        anchor = after
+      }
+    }
+
+    const [match] = Editor.nodes(editor, {
+      match: Text.isText,
+      at: {
+        anchor,
+        focus,
+      },
+    })
 
     if (match) {
       const [node] = match as NodeEntry<Text>
@@ -28,8 +48,8 @@ export const marks: EditorInterface['marks'] = (editor, options = {}) => {
     }
   }
 
-  const { anchor } = selection
   const { path } = anchor
+
   let [node] = Editor.leaf(editor, path)
 
   if (anchor.offset === 0) {

diff --git a/packages/slate/test/interfaces/Editor/marks/firefox-double-click.tsx b/packages/slate/test/interfaces/Editor/marks/firefox-double-click.tsx
@@ -0,0 +1,28 @@
+/** @jsx jsx */
+import { Editor } from 'slate'
+import { jsx } from '../../..'
+
+/**
+ * This test verifies that when double clicking a marked word in Firefox,
+ * Editor.marks for the resulting selection includes the marked word. Double
+ * clicking a marked word in Firefox results in a selection that starts at the
+ * end of the previous text node and ends at the end of the marked text node.
+ */
+
+export const input = (
+  <editor>
+    <block>
+      plain <anchor />
+      <text bold>
+        bold
+        <focus />
+      </text>
+      <text> plain</text>
+    </block>
+    <block>block two</block>
+  </editor>
+)
+export const test = editor => {
+  return Editor.marks(editor)
+}
+export const output = { bold: true }