@portabletext/editor 1.11.2 → 1.12.0

package/src/editor/behavior/behavior.markdown.ts

@@ -1,11 +1,15 @@
 import {isPortableTextSpan} from '@portabletext/toolkit'
+import {isPortableTextTextBlock} from '@sanity/types'
 import type {PortableTextMemberSchemaTypes} from '../../types/editor'
 import {defineBehavior} from './behavior.types'
 import {
+  getFocusBlock,
   getFocusSpan,
   getFocusTextBlock,
+  getTextBlockText,
   selectionIsCollapsed,
 } from './behavior.utils'
+import {spanSelectionPointToBlockOffset} from './behavior.utils.block-offset'
 
 /**
  * @alpha
@@ -53,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 (
@@ -62,7 +83,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         looksLikeMarkdownQuote &&
         blockquoteStyle !== undefined
       ) {
-        return {focusTextBlock, focusSpan, style: blockquoteStyle}
+        return {focusTextBlock, style: blockquoteStyle}
       }
 
       return false
@@ -74,7 +95,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           text: ' ',
         },
       ],
-      (_, {focusTextBlock, focusSpan, style}) => [
+      (_, {focusTextBlock, style}) => [
         {
           type: 'unset block',
           props: ['listItem', 'level'],
@@ -86,22 +107,20 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           paths: [focusTextBlock.path],
         },
         {
-          type: 'delete',
-          selection: {
-            anchor: {
-              path: focusSpan.path,
-              offset: 0,
-            },
-            focus: {
-              path: focusSpan.path,
-              offset: 2,
-            },
+          type: 'delete text',
+          anchor: {
+            path: focusTextBlock.path,
+            offset: 0,
+          },
+          focus: {
+            path: focusTextBlock.path,
+            offset: 2,
           },
         },
       ],
     ],
   })
-  const automaticBreak = defineBehavior({
+  const automaticHr = defineBehavior({
     on: 'insert text',
     guard: ({context, event}) => {
       const hrCharacter =
@@ -117,13 +136,13 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const breakObject = config.horizontalRuleObject?.({
+      const hrObject = config.horizontalRuleObject?.({
         schema: context.schema,
       })
       const focusBlock = getFocusTextBlock(context)
       const selectionCollapsed = selectionIsCollapsed(context)
 
-      if (!breakObject || !focusBlock || !selectionCollapsed) {
+      if (!hrObject || !focusBlock || !selectionCollapsed) {
         return false
       }
 
@@ -133,7 +152,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         .join('')
 
       if (onlyText && blockText === `${hrCharacter}${hrCharacter}`) {
-        return {breakObject, focusBlock, hrCharacter}
+        return {hrObject, focusBlock, hrCharacter}
       }
 
       return false
@@ -145,31 +164,71 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           text: hrCharacter,
         },
       ],
-      (_, {breakObject, focusBlock}) => [
+      (_, {hrObject, focusBlock}) => [
         {
           type: 'insert block object',
-          ...breakObject,
+          placement: 'after',
+          blockObject: hrObject,
         },
         {
-          type: 'delete',
-          selection: {
-            anchor: {
-              path: focusBlock.path,
-              offset: 0,
-            },
-            focus: {
-              path: focusBlock.path,
-              offset: 0,
-            },
-          },
+          type: 'delete block',
+          blockPath: focusBlock.path,
         },
         {
           type: 'insert text block',
-          decorators: [],
+          placement: 'after',
         },
       ],
     ],
   })
+  const automaticHrOnPaste = defineBehavior({
+    on: 'paste',
+    guard: ({context, event}) => {
+      const text = event.clipboardData.getData('text/plain')
+      const hrRegExp = /^(---)$|(___)$|(\*\*\*)$/gm
+      const hrCharacters = text.match(hrRegExp)?.[0]
+      const hrObject = config.horizontalRuleObject?.({
+        schema: context.schema,
+      })
+      const focusBlock = getFocusBlock(context)
+
+      if (!hrCharacters || !hrObject || !focusBlock) {
+        return false
+      }
+
+      return {hrCharacters, hrObject, focusBlock}
+    },
+    actions: [
+      (_, {hrCharacters}) => [
+        {
+          type: 'insert text',
+          text: hrCharacters,
+        },
+      ],
+      (_, {hrObject, focusBlock}) =>
+        isPortableTextTextBlock(focusBlock.node)
+          ? [
+              {
+                type: 'insert text block',
+                textBlock: {children: focusBlock.node.children},
+                placement: 'after',
+              },
+              {
+                type: 'insert block object',
+                blockObject: hrObject,
+                placement: 'after',
+              },
+              {type: 'delete block', blockPath: focusBlock.path},
+            ]
+          : [
+              {
+                type: 'insert block object',
+                blockObject: hrObject,
+                placement: 'after',
+              },
+            ],
+    ],
+  })
   const automaticHeadingOnSpace = defineBehavior({
     on: 'insert text',
     guard: ({context, event}) => {
@@ -187,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
@@ -205,7 +281,6 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       if (level !== undefined && style !== undefined) {
         return {
           focusTextBlock,
-          focusSpan,
           style: style,
           level,
         }
@@ -220,7 +295,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           text: ' ',
         },
       ],
-      (_, {focusTextBlock, focusSpan, style, level}) => [
+      (_, {focusTextBlock, style, level}) => [
         {
           type: 'unset block',
           props: ['listItem', 'level'],
@@ -232,16 +307,14 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           paths: [focusTextBlock.path],
         },
         {
-          type: 'delete',
-          selection: {
-            anchor: {
-              path: focusSpan.path,
-              offset: 0,
-            },
-            focus: {
-              path: focusSpan.path,
-              offset: level + 1,
-            },
+          type: 'delete text',
+          anchor: {
+            path: focusTextBlock.path,
+            offset: 0,
+          },
+          focus: {
+            path: focusTextBlock.path,
+            offset: level + 1,
           },
         },
       ],
@@ -301,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 &&
@@ -316,7 +406,6 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       ) {
         return {
           focusTextBlock,
-          focusSpan,
           listItem: unorderedListStyle,
           listItemLength: 1,
           style: defaultStyle,
@@ -337,7 +426,6 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       ) {
         return {
           focusTextBlock,
-          focusSpan,
           listItem: orderedListStyle,
           listItemLength: 2,
           style: defaultStyle,
@@ -353,7 +441,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           text: ' ',
         },
       ],
-      (_, {focusTextBlock, focusSpan, style, listItem, listItemLength}) => [
+      (_, {focusTextBlock, style, listItem, listItemLength}) => [
         {
           type: 'set block',
           listItem,
@@ -362,16 +450,14 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           paths: [focusTextBlock.path],
         },
         {
-          type: 'delete',
-          selection: {
-            anchor: {
-              path: focusSpan.path,
-              offset: 0,
-            },
-            focus: {
-              path: focusSpan.path,
-              offset: listItemLength + 1,
-            },
+          type: 'delete text',
+          anchor: {
+            path: focusTextBlock.path,
+            offset: 0,
+          },
+          focus: {
+            path: focusTextBlock.path,
+            offset: listItemLength + 1,
           },
         },
       ],
@@ -380,8 +466,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
 
   const markdownBehaviors = [
     automaticBlockquoteOnSpace,
-    automaticBreak,
     automaticHeadingOnSpace,
+    automaticHr,
+    automaticHrOnPaste,
     clearStyleOnBackspace,
     automaticListOnSpace,
   ]

package/src/editor/behavior/behavior.types.ts

@@ -1,4 +1,8 @@
-import type {KeyedSegment, PortableTextBlock} from '@sanity/types'
+import type {
+  KeyedSegment,
+  PortableTextBlock,
+  PortableTextTextBlock,
+} from '@sanity/types'
 import type {TextUnit} from 'slate'
 import type {TextInsertTextOptions} from 'slate/dist/interfaces/transforms/text'
 import type {
@@ -6,6 +10,7 @@ import type {
   PortableTextMemberSchemaTypes,
   PortableTextSlateEditor,
 } from '../../types/editor'
+import type {BlockOffset} from './behavior.utils.block-offset'
 
 /**
  * @alpha
@@ -100,8 +105,11 @@ export type BehaviorActionIntend =
   | BehaviorEvent
   | {
       type: 'insert block object'
-      name: string
-      value?: {[prop: string]: unknown}
+      placement: 'auto' | 'after'
+      blockObject: {
+        name: string
+        value?: {[prop: string]: unknown}
+      }
     }
   | {
       type: 'insert span'
@@ -114,7 +122,10 @@ export type BehaviorActionIntend =
     }
   | {
       type: 'insert text block'
-      decorators: Array<string>
+      placement: 'auto' | 'after'
+      textBlock?: {
+        children?: PortableTextTextBlock['children']
+      }
     }
   | {
       type: 'set block'
@@ -129,8 +140,13 @@ export type BehaviorActionIntend =
       props: Array<'style' | 'listItem' | 'level'>
     }
   | {
-      type: 'delete'
-      selection: NonNullable<EditorSelection>
+      type: 'delete block'
+      blockPath: [KeyedSegment]
+    }
+  | {
+      type: 'delete text'
+      anchor: BlockOffset
+      focus: BlockOffset
     }
   | {
       type: 'effect'

package/src/editor/behavior/behavior.utils.block-offset.test.ts

@@ -0,0 +1,143 @@
+import type {PortableTextBlock} from '@sanity/types'
+import {expect, test} from 'vitest'
+import {blockOffsetToSpanSelectionPoint} from './behavior.utils.block-offset'
+
+test(blockOffsetToSpanSelectionPoint.name, () => {
+  const value: Array<PortableTextBlock> = [
+    {
+      _key: 'b1',
+      _type: 'image',
+    },
+    {
+      _key: 'b2',
+      _type: 'block',
+      children: [
+        {
+          _key: 's1',
+          _type: 'span',
+          text: 'Hello, ',
+        },
+        {
+          _key: 's2',
+          _type: 'span',
+          text: 'world!',
+          marks: ['strong'],
+        },
+      ],
+    },
+    {
+      _key: 'b3',
+      _type: 'block',
+      children: [
+        {
+          _key: 's3',
+          _type: 'span',
+          text: 'Here is a ',
+        },
+        {
+          _key: 's4',
+          _type: 'stock-ticker',
+        },
+        {
+          _key: 's5',
+          _type: 'span',
+          text: '.',
+        },
+      ],
+    },
+    {
+      _key: 'b4',
+      _type: 'block',
+      children: [
+        {
+          _key: 's6',
+          _type: 'stock-ticker',
+        },
+        {
+          _key: 's7',
+          _type: 'stock-ticker',
+        },
+        {
+          _key: 's8',
+          _type: 'stock-ticker',
+        },
+      ],
+    },
+  ]
+
+  expect(
+    blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: {
+        path: [{_key: 'b1'}],
+        offset: 0,
+      },
+    }),
+  ).toBeUndefined()
+  expect(
+    blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: {
+        path: [{_key: 'b2'}],
+        offset: 9,
+      },
+    }),
+  ).toEqual({
+    path: [{_key: 'b2'}, 'children', {_key: 's2'}],
+    offset: 2,
+  })
+  expect(
+    blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: {
+        path: [{_key: 'b3'}],
+        offset: 9,
+      },
+    }),
+  ).toEqual({
+    path: [{_key: 'b3'}, 'children', {_key: 's3'}],
+    offset: 9,
+  })
+  expect(
+    blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: {
+        path: [{_key: 'b3'}],
+        offset: 10,
+      },
+    }),
+  ).toEqual({
+    path: [{_key: 'b3'}, 'children', {_key: 's3'}],
+    offset: 10,
+  })
+  expect(
+    blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: {
+        path: [{_key: 'b3'}],
+        offset: 11,
+      },
+    }),
+  ).toEqual({
+    path: [{_key: 'b3'}, 'children', {_key: 's5'}],
+    offset: 1,
+  })
+  expect(
+    blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: {
+        path: [{_key: 'b4'}],
+        offset: 0,
+      },
+    }),
+  ).toBeUndefined()
+  expect(
+    blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: {
+        path: [{_key: 'b4'}],
+        offset: 1,
+      },
+    }),
+  ).toBeUndefined()
+})

package/src/editor/behavior/behavior.utils.block-offset.ts

@@ -0,0 +1,101 @@
+import {
+  isPortableTextSpan,
+  isPortableTextTextBlock,
+  type KeyedSegment,
+  type PortableTextBlock,
+} from '@sanity/types'
+
+/**
+ * @alpha
+ */
+export type BlockOffset = {
+  path: [KeyedSegment]
+  offset: number
+}
+
+export function blockOffsetToSpanSelectionPoint({
+  value,
+  blockOffset,
+}: {
+  value: Array<PortableTextBlock>
+  blockOffset: BlockOffset
+}) {
+  let offsetLeft = blockOffset.offset
+  let selectionPoint:
+    | {path: [KeyedSegment, 'children', KeyedSegment]; offset: number}
+    | undefined
+
+  for (const block of value) {
+    if (block._key !== blockOffset.path[0]._key) {
+      continue
+    }
+
+    if (!isPortableTextTextBlock(block)) {
+      continue
+    }
+
+    for (const child of block.children) {
+      if (!isPortableTextSpan(child)) {
+        continue
+      }
+
+      if (offsetLeft === 0) {
+        selectionPoint = {
+          path: [...blockOffset.path, 'children', {_key: child._key}],
+          offset: 0,
+        }
+        break
+      }
+
+      if (offsetLeft <= child.text.length) {
+        selectionPoint = {
+          path: [...blockOffset.path, 'children', {_key: child._key}],
+          offset: offsetLeft,
+        }
+        break
+      }
+
+      offsetLeft -= child.text.length
+    }
+  }
+
+  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
+    }
+  }
+}

package/src/editor/behavior/behavior.utils.ts

@@ -202,6 +202,17 @@ export function getNextBlock(
   return undefined
 }
 
-export function isEmptyTextBlock(block: PortableTextTextBlock) {
-  return block.children.length === 1 && block.children[0].text === ''
+export function isEmptyTextBlock(block: PortableTextBlock) {
+  if (!isPortableTextTextBlock(block)) {
+    return false
+  }
+
+  const onlyText = block.children.every(isPortableTextSpan)
+  const blockText = getTextBlockText(block)
+
+  return onlyText && blockText === ''
+}
+
+export function getTextBlockText(block: PortableTextTextBlock) {
+  return block.children.map((child) => child.text ?? '').join('')
 }