Fix reporting of marks on a markableVoid (ianstormtaylor#5186)

Add a few unit tests for Editor.marks(), including one for markable void that fails
donaldxdonald · Nov 17, 2022 · e416d00 · e416d00
1 parent fbc9838
commit e416d00
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 7 deletions.
diff --git a/.changeset/sixty-ghosts-invent.md b/.changeset/sixty-ghosts-invent.md
@@ -0,0 +1,5 @@
+---
+'slate': patch
+---
+
+Report marks applied to a markableVoid if selection is collapsed
diff --git a/packages/slate/src/interfaces/editor.ts b/packages/slate/src/interfaces/editor.ts
@@ -816,16 +816,21 @@ export const Editor: EditorInterface = {
 
     if (anchor.offset === 0) {
       const prev = Editor.previous(editor, { at: path, match: Text.isText })
-      const block = Editor.above(editor, {
-        match: n => Editor.isBlock(editor, n),
+      const markedVoid = Editor.above(editor, {
+        match: n => Editor.isVoid(editor, n) && editor.markableVoid(n),
       })
+      if (!markedVoid) {
+        const block = Editor.above(editor, {
+          match: n => Editor.isBlock(editor, n),
+        })
 
-      if (prev && block) {
-        const [prevNode, prevPath] = prev
-        const [, blockPath] = block
+        if (prev && block) {
+          const [prevNode, prevPath] = prev
+          const [, blockPath] = block
 
-        if (Path.isAncestor(blockPath, prevPath)) {
-          node = prevNode as Text
+          if (Path.isAncestor(blockPath, prevPath)) {
+            node = prevNode as Text
+          }
         }
       }
     }

diff --git a/packages/slate/test/interfaces/Editor/marks/markable-void-collapsed.tsx b/packages/slate/test/interfaces/Editor/marks/markable-void-collapsed.tsx
@@ -0,0 +1,21 @@
+/** @jsx jsx */
+import { Editor } from 'slate'
+import { jsx } from '../../..'
+
+export const input = (
+  <editor>
+    <block>
+      <text>word</text>
+      <inline void markable>
+        <text bold />
+        <cursor />
+      </inline>
+      <text />
+    </block>
+  </editor>
+)
+export const test = editor => {
+  editor.markableVoid = node => node.markable
+  return Editor.marks(editor)
+}
+export const output = { bold: true }
diff --git a/packages/slate/test/interfaces/Editor/marks/markable-voids-mixed.tsx b/packages/slate/test/interfaces/Editor/marks/markable-voids-mixed.tsx
@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import { Editor } from 'slate'
+import { jsx } from '../../..'
+
+export const input = (
+  <editor>
+    <block>
+      <text>word</text>
+      <inline void markable>
+        <anchor />
+        <text bold />
+      </inline>
+      <text bold>
+        <anchor />
+        bold
+      </text>
+      <inline void markable>
+        <text bold italic />
+      </inline>
+      <text bold italic>
+        bold italic
+        <focus />
+      </text>
+      <text />
+    </block>
+  </editor>
+)
+export const test = editor => {
+  editor.markableVoid = node => node.markable
+  return Editor.marks(editor)
+}
+export const output = { bold: true }
diff --git a/packages/slate/test/interfaces/Editor/marks/mixed-text.tsx b/packages/slate/test/interfaces/Editor/marks/mixed-text.tsx
@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { Editor } from 'slate'
+import { jsx } from '../../..'
+
+export const input = (
+  <editor>
+    <block>
+      plain
+      <text bold>
+        <anchor />
+        bold
+      </text>
+      <text bold italic>
+        bold italic
+        <focus />
+      </text>
+    </block>
+    <block>block two</block>
+  </editor>
+)
+export const test = editor => {
+  return Editor.marks(editor)
+}
+export const output = { bold: true }
diff --git a/packages/slate/test/interfaces/Editor/marks/text-collapsed.tsx b/packages/slate/test/interfaces/Editor/marks/text-collapsed.tsx
@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { Editor } from 'slate'
+import { jsx } from '../../..'
+
+export const input = (
+  <editor>
+    <block>
+      plain
+      <text bold>
+        text that is
+        <cursor />
+        bold
+      </text>
+      <text bold italic>
+        bold italic
+      </text>
+    </block>
+    <block>block two</block>
+  </editor>
+)
+export const test = editor => {
+  return Editor.marks(editor)
+}
+export const output = { bold: true }