@portabletext/editor 1.1.3 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

package/src/editor/plugins/createWithInsertBreak.ts

@@ -21,6 +21,24 @@ export function createWithInsertBreak(
         return
       }
 
+      const [focusSpan] = Array.from(
+        Editor.nodes(editor, {
+          mode: 'lowest',
+          at: editor.selection.focus,
+          match: (n) => editor.isTextSpan(n),
+          voids: false,
+        }),
+      )[0] ?? [undefined]
+      const focusDecorators =
+        focusSpan.marks?.filter((mark) =>
+          types.decorators.some((decorator) => decorator.value === mark),
+        ) ?? []
+      const focusAnnotations =
+        focusSpan.marks?.filter(
+          (mark) =>
+            !types.decorators.some((decorator) => decorator.value === mark),
+        ) ?? []
+
       const focusBlockPath = editor.selection.focus.path.slice(0, 1)
       const focusBlock = Node.descendant(editor, focusBlockPath) as
         | SlateTextBlock
@@ -34,15 +52,11 @@ export function createWithInsertBreak(
         })
 
         if (isEndAtStartOfBlock && Range.isCollapsed(editor.selection)) {
-          const focusDecorators = editor.isTextSpan(focusBlock.children[0])
-            ? (focusBlock.children[0].marks ?? []).filter((mark) =>
-                types.decorators.some((decorator) => decorator.value === mark),
-              )
-            : []
-
           Editor.insertNode(
             editor,
-            editor.pteCreateTextBlock({decorators: focusDecorators}),
+            editor.pteCreateTextBlock({
+              decorators: focusAnnotations.length === 0 ? focusDecorators : [],
+            }),
           )
 
           const [nextBlockPath] = Path.next(focusBlockPath)
@@ -64,6 +78,36 @@ export function createWithInsertBreak(
             ? lastFocusBlockChild.text.length
             : 0,
         })
+
+        if (
+          isStartAtEndOfBlock &&
+          Range.isCollapsed(editor.selection) &&
+          focusDecorators.length > 0 &&
+          focusAnnotations.length > 0
+        ) {
+          Editor.withoutNormalizing(editor, () => {
+            if (!editor.selection) {
+              return
+            }
+
+            Editor.insertNode(
+              editor,
+              editor.pteCreateTextBlock({
+                decorators: [],
+              }),
+            )
+
+            const [nextBlockPath] = Path.next(focusBlockPath)
+
+            Transforms.setSelection(editor, {
+              anchor: {path: [nextBlockPath, 0], offset: 0},
+              focus: {path: [nextBlockPath, 0], offset: 0},
+            })
+          })
+          editor.onChange()
+          return
+        }
+
         const isInTheMiddleOfNode = !isEndAtStartOfBlock && !isStartAtEndOfBlock
 
         if (isInTheMiddleOfNode) {

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -5,7 +5,7 @@
  */
 
 import {isPortableTextBlock, isPortableTextSpan} from '@portabletext/toolkit'
-import type {PortableTextObject} from '@sanity/types'
+import type {PortableTextObject, PortableTextSpan} from '@sanity/types'
 import {isEqual, uniq} from 'lodash'
 import {Editor, Element, Node, Path, Range, Text, Transforms} from 'slate'
 import type {
@@ -288,14 +288,20 @@ export function createWithPortableTextMarkModel(
           : false
 
         if (selection && collapsedSelection) {
-          const [span] = Array.from(
-            Editor.nodes(editor, {
-              mode: 'lowest',
-              at: selection.focus,
-              match: (n) => editor.isTextSpan(n),
-              voids: false,
-            }),
-          )[0]
+          const [_block, blockPath] = Editor.node(editor, selection, {
+            depth: 1,
+          })
+
+          const [span, spanPath] =
+            Array.from(
+              Editor.nodes(editor, {
+                mode: 'lowest',
+                at: selection.focus,
+                match: (n) => editor.isTextSpan(n),
+                voids: false,
+              }),
+            )[0] ?? ([undefined, undefined] as const)
+
           const marks = span.marks ?? []
           const marksWithoutAnnotations = marks.filter((mark) =>
             decorators.includes(mark),
@@ -303,19 +309,97 @@ export function createWithPortableTextMarkModel(
           const spanHasAnnotations =
             marks.length > marksWithoutAnnotations.length
 
-          if (
-            spanHasAnnotations &&
-            (selection.anchor.offset === 0 ||
-              span.text.length === selection.focus.offset)
-          ) {
-            Transforms.insertNodes(editor, {
-              _type: 'span',
-              _key: keyGenerator(),
-              text: op.text,
-              marks: marksWithoutAnnotations,
-            })
-            debug('Inserting text at end of annotation')
-            return
+          const spanIsEmpty = span.text.length === 0
+
+          const atTheBeginningOfSpan = selection.anchor.offset === 0
+          const atTheEndOfSpan = selection.anchor.offset === span.text.length
+
+          let previousSpan: PortableTextSpan | undefined
+          let nextSpan: PortableTextSpan | undefined
+
+          for (const [child, childPath] of Node.children(editor, blockPath, {
+            reverse: true,
+          })) {
+            if (!editor.isTextSpan(child)) {
+              continue
+            }
+
+            if (Path.isBefore(childPath, spanPath)) {
+              previousSpan = child
+              break
+            }
+          }
+
+          for (const [child, childPath] of Node.children(editor, blockPath)) {
+            if (!editor.isTextSpan(child)) {
+              continue
+            }
+
+            if (Path.isAfter(childPath, spanPath)) {
+              nextSpan = child
+              break
+            }
+          }
+
+          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
+          const nextSpanHasSameAnnotation = nextSpan
+            ? nextSpan.marks?.some(
+                (mark) => !decorators.includes(mark) && marks.includes(mark),
+              )
+            : false
+          const nextSpanHasSameMarks = nextSpan
+            ? nextSpan.marks?.every((mark) => marks.includes(mark))
+            : false
+
+          if (spanHasAnnotations && !spanIsEmpty) {
+            if (atTheBeginningOfSpan) {
+              if (previousSpanHasSameMarks) {
+                Transforms.insertNodes(editor, {
+                  _type: 'span',
+                  _key: keyGenerator(),
+                  text: op.text,
+                  marks: previousSpan?.marks ?? [],
+                })
+              } else if (previousSpanHasSameAnnotation) {
+                apply(op)
+              } else {
+                Transforms.insertNodes(editor, {
+                  _type: 'span',
+                  _key: keyGenerator(),
+                  text: op.text,
+                  marks: [],
+                })
+              }
+              return
+            }
+
+            if (atTheEndOfSpan) {
+              if (nextSpanHasSameMarks) {
+                Transforms.insertNodes(editor, {
+                  _type: 'span',
+                  _key: keyGenerator(),
+                  text: op.text,
+                  marks: nextSpan?.marks ?? [],
+                })
+              } else if (nextSpanHasSameAnnotation) {
+                apply(op)
+              } else {
+                Transforms.insertNodes(editor, {
+                  _type: 'span',
+                  _key: keyGenerator(),
+                  text: op.text,
+                  marks: [],
+                })
+              }
+              return
+            }
           }
         }
       }