@portabletext/editor 1.1.12 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.1.12",
+  "version": "1.2.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -60,10 +60,10 @@
     "@portabletext/toolkit": "^2.0.15",
     "@sanity/block-tools": "^3.62.3",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/pkg-utils": "^6.11.7",
+    "@sanity/pkg-utils": "^6.11.8",
     "@sanity/schema": "^3.62.3",
     "@sanity/types": "^3.62.3",
-    "@sanity/ui": "^2.8.13",
+    "@sanity/ui": "^2.8.17",
     "@sanity/util": "^3.62.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.2",

package/src/editor/behavior/behavior.core.block-objects.ts

@@ -0,0 +1,106 @@
+import {isPortableTextTextBlock} from '@sanity/types'
+import {defineBehavior} from './behavior.types'
+import {
+  getFocusBlockObject,
+  getFocusTextBlock,
+  getNextBlock,
+  getPreviousBlock,
+  isEmptyTextBlock,
+  selectionIsCollapsed,
+} from './behavior.utils'
+
+const breakingVoidBlock = defineBehavior({
+  on: 'insert break',
+  guard: ({context}) => {
+    const focusBlockObject = getFocusBlockObject(context)
+
+    return !!focusBlockObject
+  },
+  actions: [() => [{type: 'insert text block', decorators: []}]],
+})
+
+const deletingEmptyTextBlockAfterBlockObject = defineBehavior({
+  on: 'delete backward',
+  guard: ({context}) => {
+    const focusTextBlock = getFocusTextBlock(context)
+    const selectionCollapsed = selectionIsCollapsed(context)
+    const previousBlock = getPreviousBlock(context)
+
+    if (!focusTextBlock || !selectionCollapsed || !previousBlock) {
+      return false
+    }
+
+    if (
+      isEmptyTextBlock(focusTextBlock.node) &&
+      !isPortableTextTextBlock(previousBlock.node)
+    ) {
+      return {focusTextBlock, previousBlock}
+    }
+
+    return false
+  },
+  actions: [
+    (_, {focusTextBlock, previousBlock}) => [
+      {
+        type: 'delete',
+        selection: {
+          anchor: {path: focusTextBlock.path, offset: 0},
+          focus: {path: focusTextBlock.path, offset: 0},
+        },
+      },
+      {
+        type: 'select',
+        selection: {
+          anchor: {path: previousBlock.path, offset: 0},
+          focus: {path: previousBlock.path, offset: 0},
+        },
+      },
+    ],
+  ],
+})
+
+const deletingEmptyTextBlockBeforeBlockObject = defineBehavior({
+  on: 'delete forward',
+  guard: ({context}) => {
+    const focusTextBlock = getFocusTextBlock(context)
+    const selectionCollapsed = selectionIsCollapsed(context)
+    const nextBlock = getNextBlock(context)
+
+    if (!focusTextBlock || !selectionCollapsed || !nextBlock) {
+      return false
+    }
+
+    if (
+      isEmptyTextBlock(focusTextBlock.node) &&
+      !isPortableTextTextBlock(nextBlock.node)
+    ) {
+      return {focusTextBlock, nextBlock}
+    }
+
+    return false
+  },
+  actions: [
+    (_, {focusTextBlock, nextBlock}) => [
+      {
+        type: 'delete',
+        selection: {
+          anchor: {path: focusTextBlock.path, offset: 0},
+          focus: {path: focusTextBlock.path, offset: 0},
+        },
+      },
+      {
+        type: 'select',
+        selection: {
+          anchor: {path: nextBlock.path, offset: 0},
+          focus: {path: nextBlock.path, offset: 0},
+        },
+      },
+    ],
+  ],
+})
+
+export const coreBlockObjectBehaviors = [
+  breakingVoidBlock,
+  deletingEmptyTextBlockAfterBlockObject,
+  deletingEmptyTextBlockBeforeBlockObject,
+]

package/src/editor/behavior/behavior.core.lists.ts

@@ -0,0 +1,76 @@
+import {defineBehavior} from './behavior.types'
+import {
+  getFocusSpan,
+  getFocusTextBlock,
+  selectionIsCollapsed,
+} from './behavior.utils'
+
+const clearListOnBackspace = defineBehavior({
+  on: 'delete backward',
+  guard: ({context}) => {
+    const selectionCollapsed = selectionIsCollapsed(context)
+    const focusTextBlock = getFocusTextBlock(context)
+    const focusSpan = getFocusSpan(context)
+
+    if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
+      return false
+    }
+
+    const atTheBeginningOfBLock =
+      focusTextBlock.node.children[0]._key === focusSpan.node._key &&
+      context.selection.focus.offset === 0
+
+    if (atTheBeginningOfBLock && focusTextBlock.node.level === 1) {
+      return {focusTextBlock}
+    }
+
+    return false
+  },
+  actions: [
+    (_, {focusTextBlock}) => [
+      {
+        type: 'unset block',
+        props: ['listItem', 'level'],
+        paths: [focusTextBlock.path],
+      },
+    ],
+  ],
+})
+
+const unindentListOnBackspace = defineBehavior({
+  on: 'delete backward',
+  guard: ({context}) => {
+    const selectionCollapsed = selectionIsCollapsed(context)
+    const focusTextBlock = getFocusTextBlock(context)
+    const focusSpan = getFocusSpan(context)
+
+    if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
+      return false
+    }
+
+    const atTheBeginningOfBLock =
+      focusTextBlock.node.children[0]._key === focusSpan.node._key &&
+      context.selection.focus.offset === 0
+
+    if (
+      atTheBeginningOfBLock &&
+      focusTextBlock.node.level !== undefined &&
+      focusTextBlock.node.level > 1
+    ) {
+      return {focusTextBlock, level: focusTextBlock.node.level - 1}
+    }
+
+    return false
+  },
+  actions: [
+    (_, {focusTextBlock, level}) => [
+      {
+        type: 'set block',
+        level,
+        paths: [focusTextBlock.path],
+      },
+    ],
+  ],
+})
+
+export const coreListBehaviors = [clearListOnBackspace, unindentListOnBackspace]

package/src/editor/behavior/behavior.core.ts

@@ -1,112 +1,14 @@
-import {isPortableTextTextBlock} from '@sanity/types'
+import {coreBlockObjectBehaviors} from './behavior.core.block-objects'
+import {coreListBehaviors} from './behavior.core.lists'
 import {defineBehavior} from './behavior.types'
-import {
-  getFocusBlockObject,
-  getFocusTextBlock,
-  getNextBlock,
-  getPreviousBlock,
-  isEmptyTextBlock,
-  selectionIsCollapsed,
-} from './behavior.utils'
 
 const softReturn = defineBehavior({
   on: 'insert soft break',
   actions: [() => [{type: 'insert text', text: '\n'}]],
 })
 
-const breakingVoidBlock = defineBehavior({
-  on: 'insert break',
-  guard: ({context}) => {
-    const focusBlockObject = getFocusBlockObject(context)
-
-    return !!focusBlockObject
-  },
-  actions: [() => [{type: 'insert text block', decorators: []}]],
-})
-
-const deletingEmptyTextBlockAfterBlockObject = defineBehavior({
-  on: 'delete backward',
-  guard: ({context}) => {
-    const focusTextBlock = getFocusTextBlock(context)
-    const selectionCollapsed = selectionIsCollapsed(context)
-    const previousBlock = getPreviousBlock(context)
-
-    if (!focusTextBlock || !selectionCollapsed || !previousBlock) {
-      return false
-    }
-
-    if (
-      isEmptyTextBlock(focusTextBlock.node) &&
-      !isPortableTextTextBlock(previousBlock.node)
-    ) {
-      return {focusTextBlock, previousBlock}
-    }
-
-    return false
-  },
-  actions: [
-    (_, {focusTextBlock, previousBlock}) => [
-      {
-        type: 'delete',
-        selection: {
-          anchor: {path: focusTextBlock.path, offset: 0},
-          focus: {path: focusTextBlock.path, offset: 0},
-        },
-      },
-      {
-        type: 'select',
-        selection: {
-          anchor: {path: previousBlock.path, offset: 0},
-          focus: {path: previousBlock.path, offset: 0},
-        },
-      },
-    ],
-  ],
-})
-
-const deletingEmptyTextBlockBeforeBlockObject = defineBehavior({
-  on: 'delete forward',
-  guard: ({context}) => {
-    const focusTextBlock = getFocusTextBlock(context)
-    const selectionCollapsed = selectionIsCollapsed(context)
-    const nextBlock = getNextBlock(context)
-
-    if (!focusTextBlock || !selectionCollapsed || !nextBlock) {
-      return false
-    }
-
-    if (
-      isEmptyTextBlock(focusTextBlock.node) &&
-      !isPortableTextTextBlock(nextBlock.node)
-    ) {
-      return {focusTextBlock, nextBlock}
-    }
-
-    return false
-  },
-  actions: [
-    (_, {focusTextBlock, nextBlock}) => [
-      {
-        type: 'delete',
-        selection: {
-          anchor: {path: focusTextBlock.path, offset: 0},
-          focus: {path: focusTextBlock.path, offset: 0},
-        },
-      },
-      {
-        type: 'select',
-        selection: {
-          anchor: {path: nextBlock.path, offset: 0},
-          focus: {path: nextBlock.path, offset: 0},
-        },
-      },
-    ],
-  ],
-})
-
 export const coreBehaviors = [
   softReturn,
-  breakingVoidBlock,
-  deletingEmptyTextBlockAfterBlockObject,
-  deletingEmptyTextBlockBeforeBlockObject,
+  ...coreBlockObjectBehaviors,
+  ...coreListBehaviors,
 ]

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -4,8 +4,8 @@
  *
  */
 
-import {isPortableTextBlock} from '@portabletext/toolkit'
-import type {PortableTextObject} from '@sanity/types'
+import {isPortableTextBlock, isPortableTextSpan} from '@portabletext/toolkit'
+import type {PortableTextObject, PortableTextSpan} from '@sanity/types'
 import {isEqual, uniq} from 'lodash'
 import {Editor, Element, Node, Path, Range, Text, Transforms} from 'slate'
 import type {
@@ -281,6 +281,139 @@ export function createWithPortableTextMarkModel(
         return
       }
 
+      if (op.type === 'set_selection') {
+        const marks = Editor.marks(editor)
+
+        if (
+          marks &&
+          op.properties &&
+          op.newProperties &&
+          op.properties.anchor &&
+          op.properties.focus &&
+          op.newProperties.anchor &&
+          op.newProperties.focus
+        ) {
+          const previousSelectionIsCollapsed = Range.isCollapsed({
+            anchor: op.properties.anchor,
+            focus: op.properties.focus,
+          })
+          const newSelectionIsCollapsed = Range.isCollapsed({
+            anchor: op.newProperties.anchor,
+            focus: op.newProperties.focus,
+          })
+
+          if (previousSelectionIsCollapsed && newSelectionIsCollapsed) {
+            const focusSpan: PortableTextSpan | undefined = Array.from(
+              Editor.nodes(editor, {
+                mode: 'lowest',
+                at: op.properties.focus,
+                match: (n) => editor.isTextSpan(n),
+                voids: false,
+              }),
+            )[0]?.[0]
+            const newFocusSpan: PortableTextSpan | undefined = Array.from(
+              Editor.nodes(editor, {
+                mode: 'lowest',
+                at: op.newProperties.focus,
+                match: (n) => editor.isTextSpan(n),
+                voids: false,
+              }),
+            )[0]?.[0]
+            const movedToNextSpan =
+              focusSpan &&
+              newFocusSpan &&
+              op.newProperties.focus.path[0] === op.properties.focus.path[0] &&
+              op.newProperties.focus.path[1] ===
+                op.properties.focus.path[1] + 1 &&
+              focusSpan.text.length === op.properties.focus.offset &&
+              op.newProperties.focus.offset === 0
+            const movedToPreviousSpan =
+              focusSpan &&
+              newFocusSpan &&
+              op.newProperties.focus.path[0] === op.properties.focus.path[0] &&
+              op.newProperties.focus.path[1] ===
+                op.properties.focus.path[1] - 1 &&
+              op.properties.focus.offset === 0 &&
+              newFocusSpan.text.length === op.newProperties.focus.offset
+
+            // If the editor has marks and we are not visually moving the
+            // selection then we just abort. Otherwise the marks would be
+            // cleared and we can't use them for the possible subsequent insert
+            // operation.
+            if (movedToNextSpan || movedToPreviousSpan) {
+              return
+            }
+          }
+        }
+      }
+
+      if (op.type === 'insert_node') {
+        const {selection} = editor
+
+        if (selection) {
+          const [_block, blockPath] = Editor.node(editor, selection, {depth: 1})
+          const previousSpan = getPreviousSpan({
+            editor,
+            blockPath,
+            spanPath: op.path,
+          })
+          const previousSpanAnnotations = previousSpan
+            ? previousSpan.marks?.filter((mark) => !decorators.includes(mark))
+            : []
+
+          const nextSpan = getNextSpan({
+            editor,
+            blockPath,
+            spanPath: [op.path[0], op.path[1] - 1],
+          })
+          const nextSpanAnnotations = nextSpan
+            ? nextSpan.marks?.filter((mark) => !decorators.includes(mark))
+            : []
+
+          const annotationsEnding =
+            previousSpanAnnotations?.filter(
+              (annotation) => !nextSpanAnnotations?.includes(annotation),
+            ) ?? []
+          const atTheEndOfAnnotation = annotationsEnding.length > 0
+
+          if (
+            atTheEndOfAnnotation &&
+            isPortableTextSpan(op.node) &&
+            op.node.marks?.some((mark) => annotationsEnding.includes(mark))
+          ) {
+            Transforms.insertNodes(editor, {
+              ...op.node,
+              marks:
+                op.node.marks?.filter(
+                  (mark) => !annotationsEnding.includes(mark),
+                ) ?? [],
+            })
+            return
+          }
+
+          const annotationsStarting =
+            nextSpanAnnotations?.filter(
+              (annotation) => !previousSpanAnnotations?.includes(annotation),
+            ) ?? []
+          const atTheStartOfAnnotation = annotationsStarting.length > 0
+
+          if (
+            atTheStartOfAnnotation &&
+            isPortableTextSpan(op.node) &&
+            op.node.marks?.some((mark) => annotationsStarting.includes(mark))
+          ) {
+            Transforms.insertNodes(editor, {
+              ...op.node,
+              marks:
+                op.node.marks?.filter(
+                  (mark) => !annotationsStarting.includes(mark),
+                ) ?? [],
+            })
+            return
+          }
+        }
+      }
+
       if (op.type === 'insert_text') {
         const {selection} = editor
         const collapsedSelection = selection
@@ -322,11 +455,20 @@ export function createWithPortableTextMarkModel(
             (mark) => !decorators.includes(mark),
           )
 
+          const previousSpanHasAnnotations = previousSpan
+            ? previousSpan.marks?.some((mark) => !decorators.includes(mark))
+            : false
+          const previousSpanHasSameAnnotations = previousSpan
+            ? previousSpan.marks
+                ?.filter((mark) => !decorators.includes(mark))
+                .every((mark) => marks.includes(mark))
+            : false
           const previousSpanHasSameAnnotation = previousSpan
             ? previousSpan.marks?.some(
                 (mark) => !decorators.includes(mark) && marks.includes(mark),
               )
             : false
+
           const previousSpanHasSameMarks = previousSpan
             ? previousSpan.marks?.every((mark) => marks.includes(mark))
             : false
@@ -343,17 +485,27 @@ export function createWithPortableTextMarkModel(
                   text: op.text,
                   marks: previousSpan?.marks ?? [],
                 })
+                return
+              } else if (previousSpanHasSameAnnotations) {
+                Transforms.insertNodes(editor, {
+                  _type: 'span',
+                  _key: editorActor.getSnapshot().context.keyGenerator(),
+                  text: op.text,
+                  marks: previousSpan?.marks ?? [],
+                })
+                return
               } else if (previousSpanHasSameAnnotation) {
                 apply(op)
-              } else {
+                return
+              } else if (!previousSpan) {
                 Transforms.insertNodes(editor, {
                   _type: 'span',
                   _key: editorActor.getSnapshot().context.keyGenerator(),
                   text: op.text,
                   marks: [],
                 })
+                return
               }
-              return
             }
 
             if (atTheEndOfSpan) {
@@ -389,9 +541,11 @@ export function createWithPortableTextMarkModel(
               _type: 'span',
               _key: editorActor.getSnapshot().context.keyGenerator(),
               text: op.text,
-              marks: (previousSpan.marks ?? []).filter((mark) =>
-                decorators.includes(mark),
-              ),
+              marks: previousSpanHasAnnotations
+                ? []
+                : (previousSpan.marks ?? []).filter((mark) =>
+                    decorators.includes(mark),
+                  ),
             })
             return
           }