@portabletext/editor 1.0.12 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -47,22 +47,22 @@
     "is-hotkey-esm": "^1.0.0",
     "lodash": "^4.17.21",
     "slate": "0.103.0",
-    "slate-react": "0.107.1"
+    "slate-react": "0.108.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@playwright/test": "1.46.0",
     "@portabletext/toolkit": "^2.0.15",
-    "@sanity/block-tools": "^3.53.0",
+    "@sanity/block-tools": "^3.54.0",
     "@sanity/diff-match-patch": "^3.1.1",
     "@sanity/eslint-config-i18n": "^1.1.0",
     "@sanity/eslint-config-studio": "^4.0.0",
     "@sanity/pkg-utils": "^6.10.9",
-    "@sanity/schema": "^3.53.0",
+    "@sanity/schema": "^3.54.0",
     "@sanity/test": "0.0.1-alpha.1",
-    "@sanity/types": "^3.53.0",
+    "@sanity/types": "^3.54.0",
     "@sanity/ui": "^2.8.8",
-    "@sanity/util": "^3.53.0",
+    "@sanity/util": "^3.54.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.0",
     "@types/debug": "^4.1.5",
@@ -74,8 +74,8 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/ws": "~8.5.12",
-    "@typescript-eslint/eslint-plugin": "^8.0.1",
-    "@typescript-eslint/parser": "^8.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.1.0",
+    "@typescript-eslint/parser": "^8.1.0",
     "@vitejs/plugin-react": "^4.3.1",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
@@ -84,10 +84,10 @@
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-d0e920e-20240815",
     "eslint-plugin-tsdoc": "^0.3.0",
     "eslint-plugin-unicorn": "^55.0.0",
-    "eslint-plugin-unused-imports": "^4.0.1",
+    "eslint-plugin-unused-imports": "^4.1.3",
     "express": "^4.19.2",
     "express-ws": "^5.0.2",
     "jest": "^29.7.0",
@@ -99,9 +99,9 @@
     "react-dom": "^18.3.1",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.12",
-    "tsx": "^4.16.5",
+    "tsx": "^4.17.0",
     "typescript": "5.5.4",
-    "vite": "^5.3.5"
+    "vite": "^5.4.1"
   },
   "peerDependencies": {
     "@sanity/block-tools": "^3.47.1",

package/src/editor/hooks/useSyncValue.ts

@@ -11,7 +11,6 @@ import {validateValue} from '../../utils/validateValue'
 import {toSlateValue, VOID_CHILD_KEY} from '../../utils/values'
 import {isChangingLocally, isChangingRemotely, withRemoteChanges} from '../../utils/withChanges'
 import {withoutPatching} from '../../utils/withoutPatching'
-import {withPreserveKeys} from '../../utils/withPreserveKeys'
 import {withoutSaving} from '../plugins/createWithUndoRedo'
 import {type PortableTextEditor} from '../PortableTextEditor'
 
@@ -184,10 +183,8 @@ export function useSyncValue(
                         currentBlock,
                       )
                     if (validation.valid || validation.resolution?.autoResolve) {
-                      withPreserveKeys(slateEditor, () => {
-                        Transforms.insertNodes(slateEditor, currentBlock, {
-                          at: [currentBlockIndex],
-                        })
+                      Transforms.insertNodes(slateEditor, currentBlock, {
+                        at: [currentBlockIndex],
                       })
                     } else {
                       debug('Invalid', validation)
@@ -267,9 +264,7 @@ function _replaceBlock(
     Transforms.deselect(slateEditor)
   }
   Transforms.removeNodes(slateEditor, {at: [currentBlockIndex]})
-  withPreserveKeys(slateEditor, () => {
-    Transforms.insertNodes(slateEditor, currentBlock, {at: [currentBlockIndex]})
-  })
+  Transforms.insertNodes(slateEditor, currentBlock, {at: [currentBlockIndex]})
   slateEditor.onChange()
   if (selectionFocusOnBlock) {
     Transforms.select(slateEditor, currentSelection)
@@ -350,21 +345,17 @@ function _updateBlock(
           Transforms.removeNodes(slateEditor, {
             at: [currentBlockIndex, currentBlockChildIndex],
           })
-          withPreserveKeys(slateEditor, () => {
-            Transforms.insertNodes(slateEditor, currentBlockChild as Node, {
-              at: [currentBlockIndex, currentBlockChildIndex],
-            })
+          Transforms.insertNodes(slateEditor, currentBlockChild as Node, {
+            at: [currentBlockIndex, currentBlockChildIndex],
           })
           slateEditor.onChange()
           // Insert it if it didn't exist before
         } else if (!oldBlockChild) {
           debug('Inserting new child', currentBlockChild)
-          withPreserveKeys(slateEditor, () => {
-            Transforms.insertNodes(slateEditor, currentBlockChild as Node, {
-              at: [currentBlockIndex, currentBlockChildIndex],
-            })
-            slateEditor.onChange()
+          Transforms.insertNodes(slateEditor, currentBlockChild as Node, {
+            at: [currentBlockIndex, currentBlockChildIndex],
           })
+          slateEditor.onChange()
         }
       }
     })

package/src/editor/plugins/createWithMaxBlocks.ts

@@ -1,4 +1,6 @@
 import {type PortableTextSlateEditor} from '../../types/editor'
+import {isChangingRemotely} from '../../utils/withChanges'
+import {isRedoing, isUndoing} from '../../utils/withUndoRedo'
 
 /**
  * This plugin makes sure that the PTE maxBlocks prop is respected
@@ -8,6 +10,24 @@ export function createWithMaxBlocks(maxBlocks: number) {
   return function withMaxBlocks(editor: PortableTextSlateEditor): PortableTextSlateEditor {
     const {apply} = editor
     editor.apply = (operation) => {
+      /**
+       * We don't want to run any side effects when the editor is processing
+       * remote changes.
+       */
+      if (isChangingRemotely(editor)) {
+        apply(operation)
+        return
+      }
+
+      /**
+       * We don't want to run any side effects when the editor is undoing or
+       * redoing operations.
+       */
+      if (isUndoing(editor) || isRedoing(editor)) {
+        apply(operation)
+        return
+      }
+
       const rows = maxBlocks
       if (rows > 0 && editor.children.length >= rows) {
         if (

package/src/editor/plugins/createWithObjectKeys.ts

@@ -1,7 +1,8 @@
 import {Editor, Element, Node, Transforms} from 'slate'
 
 import {type PortableTextMemberSchemaTypes, type PortableTextSlateEditor} from '../../types/editor'
-import {isPreservingKeys, PRESERVE_KEYS} from '../../utils/withPreserveKeys'
+import {isChangingRemotely} from '../../utils/withChanges'
+import {isRedoing, isUndoing} from '../../utils/withUndoRedo'
 
 /**
  * This plugin makes sure that every new node in the editor get a new _key prop when created
@@ -12,23 +13,36 @@ export function createWithObjectKeys(
   keyGenerator: () => string,
 ) {
   return function withKeys(editor: PortableTextSlateEditor): PortableTextSlateEditor {
-    PRESERVE_KEYS.set(editor, false)
     const {apply, normalizeNode} = editor
 
-    // The apply function can be called with a scope (withPreserveKeys) that will
-    // preserve keys for the produced nodes if they have a _key property set already.
     // The default behavior is to always generate a new key here.
     // For example, when undoing and redoing we want to retain the keys, but
     // when we create a new bold span by splitting a non-bold-span we want the produced node to get a new key.
     editor.apply = (operation) => {
-      if (operation.type === 'split_node') {
-        const withNewKey = !isPreservingKeys(editor) || !('_key' in operation.properties)
+      /**
+       * We don't want to run any side effects when the editor is processing
+       * remote changes.
+       */
+      if (isChangingRemotely(editor)) {
+        apply(operation)
+        return
+      }
+
+      /**
+       * We don't want to run any side effects when the editor is undoing or
+       * redoing operations.
+       */
+      if (isUndoing(editor) || isRedoing(editor)) {
+        apply(operation)
+        return
+      }
 
+      if (operation.type === 'split_node') {
         apply({
           ...operation,
           properties: {
             ...operation.properties,
-            ...(withNewKey ? {_key: keyGenerator()} : {}),
+            _key: keyGenerator(),
           },
         })
 
@@ -36,15 +50,12 @@ export function createWithObjectKeys(
       }
 
       if (operation.type === 'insert_node') {
-        // Must be given a new key or adding/removing marks while typing gets in trouble (duped keys)!
-        const withNewKey = !isPreservingKeys(editor) || !('_key' in operation.node)
-
         if (!Editor.isEditor(operation.node)) {
           apply({
             ...operation,
             node: {
               ...operation.node,
-              ...(withNewKey ? {_key: keyGenerator()} : {}),
+              _key: keyGenerator(),
             },
           })
 

package/src/editor/plugins/createWithPatches.ts

@@ -27,7 +27,6 @@ import {fromSlateValue, isEqualToEmptyEditor} from '../../utils/values'
 import {IS_PROCESSING_REMOTE_CHANGES, KEY_TO_VALUE_ELEMENT} from '../../utils/weakMaps'
 import {withRemoteChanges} from '../../utils/withChanges'
 import {isPatching, PATCHING, withoutPatching} from '../../utils/withoutPatching'
-import {withPreserveKeys} from '../../utils/withPreserveKeys'
 import {withoutSaving} from './createWithUndoRedo'
 
 const debug = debugWithName('plugin:withPatches')
@@ -117,11 +116,9 @@ export function createWithPatches({
         Editor.withoutNormalizing(editor, () => {
           withoutPatching(editor, () => {
             withoutSaving(editor, () => {
-              withPreserveKeys(editor, () => {
-                patches.forEach((patch) => {
-                  if (debug.enabled) debug(`Handling remote patch ${JSON.stringify(patch)}`)
-                  changed = applyPatch(editor, patch)
-                })
+              patches.forEach((patch) => {
+                if (debug.enabled) debug(`Handling remote patch ${JSON.stringify(patch)}`)
+                changed = applyPatch(editor, patch)
               })
             })
           })

package/src/editor/plugins/createWithPlaceholderBlock.ts

@@ -3,6 +3,8 @@ import {Editor, Path} from 'slate'
 import {type PortableTextSlateEditor} from '../../types/editor'
 import {type SlateTextBlock, type VoidElement} from '../../types/slate'
 import {debugWithName} from '../../utils/debug'
+import {isChangingRemotely} from '../../utils/withChanges'
+import {isRedoing, isUndoing} from '../../utils/withUndoRedo'
 
 const debug = debugWithName('plugin:withPlaceholderBlock')
 
@@ -17,6 +19,24 @@ export function createWithPlaceholderBlock(): (
     const {apply} = editor
 
     editor.apply = (op) => {
+      /**
+       * We don't want to run any side effects when the editor is processing
+       * remote changes.
+       */
+      if (isChangingRemotely(editor)) {
+        apply(op)
+        return
+      }
+
+      /**
+       * We don't want to run any side effects when the editor is undoing or
+       * redoing operations.
+       */
+      if (isUndoing(editor) || isRedoing(editor)) {
+        apply(op)
+        return
+      }
+
       if (op.type === 'remove_node') {
         const node = op.node as SlateTextBlock | VoidElement
         if (op.path[0] === 0 && Editor.isVoid(editor, node)) {

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -19,13 +19,15 @@ import {
 import {debugWithName} from '../../utils/debug'
 import {toPortableTextRange} from '../../utils/ranges'
 import {EMPTY_MARKS} from '../../utils/values'
-import {withoutPreserveKeys} from '../../utils/withPreserveKeys'
+import {isChangingRemotely} from '../../utils/withChanges'
+import {isRedoing, isUndoing} from '../../utils/withUndoRedo'
 
 const debug = debugWithName('plugin:withPortableTextMarkModel')
 
 export function createWithPortableTextMarkModel(
   types: PortableTextMemberSchemaTypes,
   change$: Subject<EditorChange>,
+  keyGenerator: () => string,
 ): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
   return function withPortableTextMarkModel(editor: PortableTextSlateEditor) {
     const {apply, normalizeNode} = editor
@@ -233,6 +235,24 @@ export function createWithPortableTextMarkModel(
     }
 
     editor.apply = (op) => {
+      /**
+       * We don't want to run any side effects when the editor is processing
+       * remote changes.
+       */
+      if (isChangingRemotely(editor)) {
+        apply(op)
+        return
+      }
+
+      /**
+       * We don't want to run any side effects when the editor is undoing or
+       * redoing operations.
+       */
+      if (isUndoing(editor) || isRedoing(editor)) {
+        apply(op)
+        return
+      }
+
       // Special hook before inserting text at the end of an annotation.
       if (op.type === 'insert_text') {
         const {selection} = editor
@@ -255,21 +275,17 @@ export function createWithPortableTextMarkModel(
             Array.isArray(node.marks) &&
             node.marks.length > 0
           ) {
-            apply(op)
-            Transforms.splitNodes(editor, {
-              match: Text.isText,
-              at: {...selection.focus, offset: selection.focus.offset},
-            })
             const marksWithoutAnnotationMarks: string[] = (
               {
                 ...(Editor.marks(editor) || {}),
               }.marks || []
             ).filter((mark) => decorators.includes(mark))
-            Transforms.setNodes(
-              editor,
-              {marks: marksWithoutAnnotationMarks},
-              {at: Path.next(selection.focus.path)},
-            )
+            Transforms.insertNodes(editor, {
+              _type: 'span',
+              _key: keyGenerator(),
+              text: op.text,
+              marks: marksWithoutAnnotationMarks,
+            })
             debug('Inserting text at end of annotation')
             return
           }
@@ -298,21 +314,10 @@ export function createWithPortableTextMarkModel(
           const deletingFromTheEnd = op.offset + op.text.length === node.text.length
 
           if (nodeHasAnnotations && deletingPartOfTheNode && deletingFromTheEnd) {
-            /**
-             * If all of these conditions match then override the ordinary
-             * `remove_text` operation and turn it into `split_nodes` followed
-             * by `remove_nodes`. This is so if the operation can be properly
-             * undone. Undoing a `remove_text` results in an `insert_text` and
-             * we want to bail out of that in this exact scenario to make sure
-             * the inserted text is annotated. (See custom logic regarding
-             * `insert_text`)
-             */
             Editor.withoutNormalizing(editor, () => {
-              withoutPreserveKeys(editor, () => {
-                Transforms.splitNodes(editor, {
-                  match: Text.isText,
-                  at: {path: op.path, offset: op.offset},
-                })
+              Transforms.splitNodes(editor, {
+                match: Text.isText,
+                at: {path: op.path, offset: op.offset},
               })
               Transforms.removeNodes(editor, {at: Path.next(op.path)})
             })
@@ -320,6 +325,24 @@ export function createWithPortableTextMarkModel(
             editor.onChange()
             return
           }
+
+          const deletingAllText = op.offset === 0 && deletingFromTheEnd
+
+          if (nodeHasAnnotations && deletingAllText) {
+            const marksWithoutAnnotationMarks: string[] = (
+              {
+                ...(Editor.marks(editor) || {}),
+              }.marks || []
+            ).filter((mark) => decorators.includes(mark))
+
+            Editor.withoutNormalizing(editor, () => {
+              apply(op)
+              Transforms.setNodes(editor, {marks: marksWithoutAnnotationMarks}, {at: op.path})
+            })
+
+            editor.onChange()
+            return
+          }
         }
       }
 
@@ -469,17 +492,24 @@ export function createWithPortableTextMarkModel(
    */
   function mergeSpans(editor: PortableTextSlateEditor) {
     const {selection} = editor
+
     if (selection) {
-      for (const [node, path] of Array.from(
+      const textNodesInSelection = Array.from(
         Editor.nodes(editor, {
           at: Editor.range(editor, [selection.anchor.path[0]], [selection.focus.path[0]]),
+          match: Text.isText,
+          reverse: true,
         }),
-      ).reverse()) {
+      )
+
+      for (const [node, path] of textNodesInSelection) {
         const [parent] = path.length > 1 ? Editor.node(editor, Path.parent(path)) : [undefined]
         const nextPath = [path[0], path[1] + 1]
+
         if (editor.isTextBlock(parent)) {
           const nextNode = parent.children[nextPath[1]]
-          if (Text.isText(node) && Text.isText(nextNode) && isEqual(nextNode.marks, node.marks)) {
+
+          if (Text.isText(nextNode) && isEqual(nextNode.marks, node.marks)) {
             debug('Merging spans')
             Transforms.mergeNodes(editor, {at: nextPath, voids: true})
             editor.onChange()

package/src/editor/plugins/createWithUndoRedo.ts

@@ -12,7 +12,7 @@ import {type Descendant, Editor, Operation, Path, type SelectionOperation, Trans
 import {type PatchObservable, type PortableTextSlateEditor} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {fromSlateValue} from '../../utils/values'
-import {withPreserveKeys} from '../../utils/withPreserveKeys'
+import {setIsRedoing, setIsUndoing, withRedoing, withUndoing} from '../../utils/withUndoRedo'
 
 const debug = debugWithName('plugin:withUndoRedo')
 const debugVerbose = debug.enabled && false
@@ -150,7 +150,7 @@ export function createWithUndoRedo(
 
           try {
             Editor.withoutNormalizing(editor, () => {
-              withPreserveKeys(editor, () => {
+              withUndoing(editor, () => {
                 withoutSaving(editor, () => {
                   reversedOperations.forEach((op) => {
                     editor.apply(op)
@@ -166,6 +166,7 @@ export function createWithUndoRedo(
             Transforms.deselect(editor)
             editor.history = {undos: [], redos: []}
             SAVING.set(editor, true)
+            setIsUndoing(editor, false)
             editor.onChange()
             return
           }
@@ -195,7 +196,7 @@ export function createWithUndoRedo(
           })
           try {
             Editor.withoutNormalizing(editor, () => {
-              withPreserveKeys(editor, () => {
+              withRedoing(editor, () => {
                 withoutSaving(editor, () => {
                   // eslint-disable-next-line max-nested-callbacks
                   transformedOperations.forEach((op) => {
@@ -212,6 +213,7 @@ export function createWithUndoRedo(
             Transforms.deselect(editor)
             editor.history = {undos: [], redos: []}
             SAVING.set(editor, true)
+            setIsRedoing(editor, false)
             editor.onChange()
             return
           }

package/src/editor/plugins/index.ts

@@ -78,7 +78,11 @@ export const withPlugins = <T extends Editor>(
     patches$,
     blockSchemaType: schemaTypes.block,
   })
-  const withPortableTextMarkModel = createWithPortableTextMarkModel(schemaTypes, change$)
+  const withPortableTextMarkModel = createWithPortableTextMarkModel(
+    schemaTypes,
+    change$,
+    keyGenerator,
+  )
   const withPortableTextBlockStyle = createWithPortableTextBlockStyle(schemaTypes)
 
   const withPlaceholderBlock = createWithPlaceholderBlock()

package/src/utils/operationToPatches.ts

@@ -28,7 +28,6 @@ import {debugWithName} from './debug'
 import {fromSlateValue} from './values'
 
 const debug = debugWithName('operationToPatches')
-debug.enabled = false
 
 export function createOperationToPatches(types: PortableTextMemberSchemaTypes): PatchFunctions {
   const textBlockName = types.block.name

package/src/utils/withUndoRedo.ts

@@ -0,0 +1,34 @@
+import {type Editor} from 'slate'
+
+const IS_UDOING: WeakMap<Editor, boolean | undefined> = new WeakMap()
+const IS_REDOING: WeakMap<Editor, boolean | undefined> = new WeakMap()
+
+export function withUndoing(editor: Editor, fn: () => void) {
+  const prev = isUndoing(editor)
+  IS_UDOING.set(editor, true)
+  fn()
+  IS_UDOING.set(editor, prev)
+}
+
+export function isUndoing(editor: Editor) {
+  return IS_UDOING.get(editor) ?? false
+}
+
+export function setIsUndoing(editor: Editor, isUndoing: boolean) {
+  IS_UDOING.set(editor, isUndoing)
+}
+
+export function withRedoing(editor: Editor, fn: () => void) {
+  const prev = isRedoing(editor)
+  IS_REDOING.set(editor, true)
+  fn()
+  IS_REDOING.set(editor, prev)
+}
+
+export function isRedoing(editor: Editor) {
+  return IS_REDOING.get(editor) ?? false
+}
+
+export function setIsRedoing(editor: Editor, isRedoing: boolean) {
+  IS_REDOING.set(editor, isRedoing)
+}

package/src/utils/withPreserveKeys.ts

@@ -1,21 +0,0 @@
-import {type Editor} from 'slate'
-
-export const PRESERVE_KEYS: WeakMap<Editor, boolean | undefined> = new WeakMap()
-
-export function withPreserveKeys(editor: Editor, fn: () => void): void {
-  const prev = isPreservingKeys(editor)
-  PRESERVE_KEYS.set(editor, true)
-  fn()
-  PRESERVE_KEYS.set(editor, prev)
-}
-
-export function withoutPreserveKeys(editor: Editor, fn: () => void): void {
-  const prev = isPreservingKeys(editor)
-  PRESERVE_KEYS.set(editor, false)
-  fn()
-  PRESERVE_KEYS.set(editor, prev)
-}
-
-export function isPreservingKeys(editor: Editor): boolean | undefined {
-  return PRESERVE_KEYS.get(editor)
-}