fix(markdown behavior): ignore spans in auto blockquote/heading/llist…

… behaviors
portabletext · Nov 25, 2024 · a1cd1ee · a1cd1ee
1 parent 29a2c95
commit a1cd1ee
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 7 deletions.
diff --git a/packages/editor/src/editor/behavior/behavior.markdown.ts b/packages/editor/src/editor/behavior/behavior.markdown.ts
@@ -6,8 +6,10 @@ import {
   getFocusBlock,
   getFocusSpan,
   getFocusTextBlock,
+  getTextBlockText,
   selectionIsCollapsed,
 } from './behavior.utils'
+import {spanSelectionPointToBlockOffset} from './behavior.utils.block-offset'
 
 /**
  * @alpha
@@ -55,8 +57,25 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const caretAtTheEndOfQuote = context.selection.focus.offset === 1
-      const looksLikeMarkdownQuote = /^>/.test(focusSpan.node.text)
+      const blockOffset = spanSelectionPointToBlockOffset({
+        value: context.value,
+        selectionPoint: {
+          path: [
+            {_key: focusTextBlock.node._key},
+            'children',
+            {_key: focusSpan.node._key},
+          ],
+          offset: context.selection.focus.offset,
+        },
+      })
+
+      if (!blockOffset) {
+        return false
+      }
+
+      const blockText = getTextBlockText(focusTextBlock.node)
+      const caretAtTheEndOfQuote = blockOffset.offset === 1
+      const looksLikeMarkdownQuote = /^>/.test(blockText)
       const blockquoteStyle = config.blockquoteStyle?.({schema: context.schema})
 
       if (
@@ -227,11 +246,28 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const markdownHeadingSearch = /^#+/.exec(focusSpan.node.text)
+      const blockOffset = spanSelectionPointToBlockOffset({
+        value: context.value,
+        selectionPoint: {
+          path: [
+            {_key: focusTextBlock.node._key},
+            'children',
+            {_key: focusSpan.node._key},
+          ],
+          offset: context.selection.focus.offset,
+        },
+      })
+
+      if (!blockOffset) {
+        return false
+      }
+
+      const blockText = getTextBlockText(focusTextBlock.node)
+      const markdownHeadingSearch = /^#+/.exec(blockText)
       const level = markdownHeadingSearch
         ? markdownHeadingSearch[0].length
         : undefined
-      const caretAtTheEndOfHeading = context.selection.focus.offset === level
+      const caretAtTheEndOfHeading = blockOffset.offset === level
 
       if (!caretAtTheEndOfHeading) {
         return false
@@ -338,12 +374,29 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
+      const blockOffset = spanSelectionPointToBlockOffset({
+        value: context.value,
+        selectionPoint: {
+          path: [
+            {_key: focusTextBlock.node._key},
+            'children',
+            {_key: focusSpan.node._key},
+          ],
+          offset: context.selection.focus.offset,
+        },
+      })
+
+      if (!blockOffset) {
+        return false
+      }
+
+      const blockText = getTextBlockText(focusTextBlock.node)
       const defaultStyle = config.defaultStyle?.({schema: context.schema})
-      const looksLikeUnorderedList = /^(-|\*)/.test(focusSpan.node.text)
+      const looksLikeUnorderedList = /^(-|\*)/.test(blockText)
       const unorderedListStyle = config.unorderedListStyle?.({
         schema: context.schema,
       })
-      const caretAtTheEndOfUnorderedList = context.selection.focus.offset === 1
+      const caretAtTheEndOfUnorderedList = blockOffset.offset === 1
 
       if (
         defaultStyle &&

diff --git a/packages/editor/src/editor/behavior/behavior.utils.block-offset.ts b/packages/editor/src/editor/behavior/behavior.utils.block-offset.ts
@@ -61,3 +61,41 @@ export function blockOffsetToSpanSelectionPoint({
 
   return selectionPoint
 }
+
+export function spanSelectionPointToBlockOffset({
+  value,
+  selectionPoint,
+}: {
+  value: Array<PortableTextBlock>
+  selectionPoint: {
+    path: [KeyedSegment, 'children', KeyedSegment]
+    offset: number
+  }
+}): BlockOffset | undefined {
+  let offset = 0
+
+  for (const block of value) {
+    if (block._key !== selectionPoint.path[0]._key) {
+      continue
+    }
+
+    if (!isPortableTextTextBlock(block)) {
+      continue
+    }
+
+    for (const child of block.children) {
+      if (!isPortableTextSpan(child)) {
+        continue
+      }
+
+      if (child._key === selectionPoint.path[2]._key) {
+        return {
+          path: [{_key: block._key}],
+          offset: offset + selectionPoint.offset,
+        }
+      }
+
+      offset += child.text.length
+    }
+  }
+}
diff --git a/packages/editor/src/editor/behavior/behavior.utils.ts b/packages/editor/src/editor/behavior/behavior.utils.ts
@@ -208,7 +208,11 @@ export function isEmptyTextBlock(block: PortableTextBlock) {
   }
 
   const onlyText = block.children.every(isPortableTextSpan)
-  const blockText = block.children.map((child) => child.text ?? '').join('')
+  const blockText = getTextBlockText(block)
 
   return onlyText && blockText === ''
 }
+
+export function getTextBlockText(block: PortableTextTextBlock) {
+  return block.children.map((child) => child.text ?? '').join('')
+}