@portabletext/editor 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -61,7 +61,6 @@
     "@sanity/diff-match-patch": "^3.1.1",
     "@sanity/pkg-utils": "^6.11.2",
     "@sanity/schema": "^3.55.0",
-    "@sanity/test": "0.0.1-alpha.1",
     "@sanity/types": "^3.55.0",
     "@sanity/ui": "^2.8.9",
     "@sanity/util": "^3.55.0",

package/src/editor/Editable.tsx

@@ -36,7 +36,6 @@ import {
   type RenderLeafProps,
 } from 'slate-react'
 import type {
-  EditorChange,
   EditorSelection,
   OnCopyFn,
   OnPasteFn,
@@ -603,7 +602,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
         // Set the correct range
         domSelection.addRange(newDOMRange)
       }
-    } catch (error) {
+    } catch {
       debug(`Could not resolve selection, selecting top document`)
       // Deselect the editor
       Transforms.deselect(slateEditor)
@@ -656,7 +655,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
       return noop
     }
     // Translate PortableTextEditor prop fn to Slate plugin fn
-    return (editor: ReactEditor, domRange: Range) => {
+    return (_editor: ReactEditor, domRange: Range) => {
       scrollSelectionIntoView(portableTextEditor, domRange)
     }
   }, [portableTextEditor, scrollSelectionIntoView])

package/src/editor/PortableTextEditor.tsx

@@ -11,14 +11,13 @@ import type {
 } from '@sanity/types'
 import {Component, type MutableRefObject, type PropsWithChildren} from 'react'
 import {Subject} from 'rxjs'
-import {createActor, type Subscription} from 'xstate'
+import {createActor} from 'xstate'
 import type {
   EditableAPI,
   EditableAPIDeleteOptions,
   EditorChange,
   EditorChanges,
   EditorSelection,
-  MutationChange,
   PatchObservable,
   PortableTextMemberSchemaTypes,
 } from '../types/editor'
@@ -315,7 +314,7 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
   ) => {
     return editor.editable?.isVoid(element)
   }
-  static isObjectPath = (editor: PortableTextEditor, path: Path): boolean => {
+  static isObjectPath = (_editor: PortableTextEditor, path: Path): boolean => {
     if (!path || !Array.isArray(path)) return false
     const isChildObjectEditPath = path.length > 3 && path[1] === 'children'
     const isBlockObjectEditPath = path.length > 1 && path[1] !== 'children'

package/src/editor/hooks/usePortableTextEditorSelection.tsx

@@ -5,7 +5,7 @@ import {
   useEffect,
   useState,
 } from 'react'
-import type {EditorChanges, EditorSelection} from '../../types/editor'
+import type {EditorSelection} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import type {EditorActor} from '../editor-machine'
 

package/src/editor/plugins/createWithEditableAPI.ts

@@ -271,18 +271,16 @@ export function createWithEditableAPI(
       hasBlockStyle: (style: string): boolean => {
         try {
           return editor.pteHasBlockStyle(style)
-        } catch (err) {
+        } catch {
           // This is fine.
-          // debug(err)
           return false
         }
       },
       hasListStyle: (listStyle: string): boolean => {
         try {
           return editor.pteHasListStyle(listStyle)
-        } catch (err) {
+        } catch {
           // This is fine.
-          // debug(err)
           return false
         }
       },
@@ -341,7 +339,7 @@ export function createWithEditableAPI(
             }) || [],
           )[0] || [undefined]
           node = ReactEditor.toDOMNode(editor, item)
-        } catch (err) {
+        } catch {
           // Nothing
         }
         return node
@@ -376,7 +374,7 @@ export function createWithEditableAPI(
             }
           }
           return activeAnnotations
-        } catch (err) {
+        } catch {
           return []
         }
       },
@@ -427,7 +425,7 @@ export function createWithEditableAPI(
 
             return spanMarkDefs?.includes(annotationType)
           })
-        } catch (err) {
+        } catch {
           return false
         }
       },

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/createWithInsertData.ts

@@ -4,7 +4,6 @@ import {isEqual, uniq} from 'lodash'
 import {Editor, Range, Transforms, type Descendant, type Node} from 'slate'
 import {ReactEditor} from 'slate-react'
 import type {
-  EditorChanges,
   PortableTextMemberSchemaTypes,
   PortableTextSlateEditor,
 } from '../../types/editor'

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -5,18 +5,9 @@
  */
 
 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,
-  type Descendant,
-} from 'slate'
+import {Editor, Element, Node, Path, Range, Text, Transforms} from 'slate'
 import type {
   PortableTextMemberSchemaTypes,
   PortableTextSlateEditor,
@@ -290,44 +281,125 @@ export function createWithPortableTextMarkModel(
         return
       }
 
-      // Special hook before inserting text at the end of an annotation.
       if (op.type === 'insert_text') {
         const {selection} = editor
-        if (
-          selection &&
-          Range.isCollapsed(selection) &&
-          Editor.marks(editor)?.marks?.some(
-            (mark) => !decorators.includes(mark),
+        const collapsedSelection = selection
+          ? Range.isCollapsed(selection)
+          : false
+
+        if (selection && collapsedSelection) {
+          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),
           )
-        ) {
-          const [node] = Array.from(
-            Editor.nodes(editor, {
-              mode: 'lowest',
-              at: selection.focus,
-              match: (n) =>
-                (n as unknown as Descendant)._type === types.span.name,
-              voids: false,
-            }),
-          )[0] || [undefined]
-          if (
-            Text.isText(node) &&
-            node.text.length === selection.focus.offset &&
-            Array.isArray(node.marks) &&
-            node.marks.length > 0
-          ) {
-            const marksWithoutAnnotationMarks: string[] = (
-              {
-                ...(Editor.marks(editor) || {}),
-              }.marks || []
-            ).filter((mark) => decorators.includes(mark))
-            Transforms.insertNodes(editor, {
-              _type: 'span',
-              _key: keyGenerator(),
-              text: op.text,
-              marks: marksWithoutAnnotationMarks,
-            })
-            debug('Inserting text at end of annotation')
-            return
+          const spanHasAnnotations =
+            marks.length > marksWithoutAnnotations.length
+
+          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
+            }
           }
         }
       }

package/src/utils/__tests__/valueNormalization.test.tsx

@@ -1,6 +1,5 @@
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
-import * as React from 'react'
 import {describe, expect, it, vi} from 'vitest'
 import {
   PortableTextEditorTester,

package/src/utils/applyPatch.ts

@@ -47,8 +47,6 @@ const debugVerbose = debug.enabled && true
 export function createApplyPatch(
   schemaTypes: PortableTextMemberSchemaTypes,
 ): (editor: PortableTextSlateEditor, patch: Patch) => boolean {
-  let previousPatch: Patch | undefined
-
   return (editor: PortableTextSlateEditor, patch: Patch): boolean => {
     let changed = false
 
@@ -66,7 +64,7 @@ export function createApplyPatch(
           changed = insertPatch(editor, patch, schemaTypes)
           break
         case 'unset':
-          changed = unsetPatch(editor, patch, previousPatch)
+          changed = unsetPatch(editor, patch)
           break
         case 'set':
           changed = setPatch(editor, patch)
@@ -80,7 +78,7 @@ export function createApplyPatch(
     } catch (err) {
       console.error(err)
     }
-    previousPatch = patch
+
     return changed
   }
 }
@@ -308,18 +306,14 @@ function setPatch(editor: PortableTextSlateEditor, patch: SetPatch) {
   return true
 }
 
-function unsetPatch(
-  editor: PortableTextSlateEditor,
-  patch: UnsetPatch,
-  previousPatch?: Patch,
-) {
+function unsetPatch(editor: PortableTextSlateEditor, patch: UnsetPatch) {
   // Value
   if (patch.path.length === 0) {
     debug('Removing everything')
     debugState(editor, 'before')
     const previousSelection = editor.selection
     Transforms.deselect(editor)
-    editor.children.forEach((c, i) => {
+    editor.children.forEach((_child, i) => {
       Transforms.removeNodes(editor, {at: [i]})
     })
     Transforms.insertNodes(editor, editor.pteCreateTextBlock({decorators: []}))