@portabletext/editor 1.50.4 → 1.50.6

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -15,6 +15,7 @@ import {isRedoing, isUndoing} from '../../internal-utils/withUndoRedo'
 import type {BehaviorOperationImplementation} from '../../operations/behavior.operations'
 import type {PortableTextSlateEditor} from '../../types/editor'
 import type {EditorActor} from '../editor-machine'
+import {getEditorSnapshot} from '../editor-selector'
 
 const debug = debugWithName('plugin:withPortableTextMarkModel')
 
@@ -262,10 +263,7 @@ export function createWithPortableTextMarkModel(
       }
 
       if (op.type === 'set_selection') {
-        const marks = Editor.marks(editor)
-
         if (
-          marks &&
           op.properties &&
           op.newProperties &&
           op.properties.anchor &&
@@ -316,12 +314,10 @@ export function createWithPortableTextMarkModel(
               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
+            // We only want to clear the decorator state if the caret is visually
+            // moving
+            if (!movedToNextSpan && !movedToPreviousSpan) {
+              editor.decoratorState = {}
             }
           }
         }
@@ -416,141 +412,24 @@ export function createWithPortableTextMarkModel(
       }
 
       if (op.type === 'insert_text') {
-        const {selection} = editor
-        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 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
-
-          const previousSpan = getPreviousSpan({editor, blockPath, spanPath})
-          const nextSpan = getNextSpan({editor, blockPath, spanPath})
-          const nextSpanAnnotations =
-            nextSpan?.marks?.filter((mark) => !decorators.includes(mark)) ?? []
-          const spanAnnotations = marks.filter(
-            (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
-          const nextSpanSharesSomeAnnotations = spanAnnotations.some((mark) =>
-            nextSpanAnnotations?.includes(mark),
-          )
+        if (!editor.markState) {
+          apply(op)
+          return
+        }
 
-          if (spanHasAnnotations && !spanIsEmpty) {
-            if (atTheBeginningOfSpan) {
-              if (previousSpanHasSameMarks) {
-                Transforms.insertNodes(editor, {
-                  _type: 'span',
-                  _key: editorActor.getSnapshot().context.keyGenerator(),
-                  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)
-                return
-              } else if (!previousSpan) {
-                Transforms.insertNodes(editor, {
-                  _type: 'span',
-                  _key: editorActor.getSnapshot().context.keyGenerator(),
-                  text: op.text,
-                  marks: [],
-                })
-                return
-              }
-            }
+        if (editor.markState.state === 'unchanged') {
+          apply(op)
+          return
+        }
 
-            if (atTheEndOfSpan) {
-              if (
-                (nextSpan &&
-                  nextSpanSharesSomeAnnotations &&
-                  nextSpanAnnotations.length < spanAnnotations.length) ||
-                !nextSpanSharesSomeAnnotations
-              ) {
-                Transforms.insertNodes(editor, {
-                  _type: 'span',
-                  _key: editorActor.getSnapshot().context.keyGenerator(),
-                  text: op.text,
-                  marks: nextSpan?.marks ?? [],
-                })
-                return
-              }
-
-              if (!nextSpan) {
-                Transforms.insertNodes(editor, {
-                  _type: 'span',
-                  _key: editorActor.getSnapshot().context.keyGenerator(),
-                  text: op.text,
-                  marks: [],
-                })
-                return
-              }
-            }
-          }
+        Transforms.insertNodes(editor, {
+          _type: 'span',
+          _key: editorActor.getSnapshot().context.keyGenerator(),
+          text: op.text,
+          marks: editor.markState.marks,
+        })
 
-          if (atTheBeginningOfSpan && !spanIsEmpty && !!previousSpan) {
-            Transforms.insertNodes(editor, {
-              _type: 'span',
-              _key: editorActor.getSnapshot().context.keyGenerator(),
-              text: op.text,
-              marks: previousSpanHasAnnotations
-                ? []
-                : (previousSpan.marks ?? []).filter((mark) =>
-                    decorators.includes(mark),
-                  ),
-            })
-            return
-          }
-        }
+        return
       }
 
       if (op.type === 'remove_text') {
@@ -600,17 +479,16 @@ export function createWithPortableTextMarkModel(
               !previousSpanHasSameAnnotation &&
               !nextSpanHasSameAnnotation
             ) {
-              const marksWithoutAnnotationMarks: string[] = (
-                {
-                  ...(Editor.marks(editor) || {}),
-                }.marks || []
-              ).filter((mark) => decorators.includes(mark))
+              const snapshot = getEditorSnapshot({
+                editorActorSnapshot: editorActor.getSnapshot(),
+                slateEditorInstance: editor,
+              })
 
               Editor.withoutNormalizing(editor, () => {
                 apply(op)
                 Transforms.setNodes(
                   editor,
-                  {marks: marksWithoutAnnotationMarks},
+                  {marks: snapshot.beta.activeDecorators},
                   {at: op.path},
                 )
               })
@@ -727,15 +605,7 @@ export const removeDecoratorOperationImplementation: BehaviorOperationImplementa
           },
         )
       } else {
-        const existingMarks: string[] =
-          {
-            ...(Editor.marks(editor) || {}),
-          }.marks || []
-        const marks = {
-          ...(Editor.marks(editor) || {}),
-          marks: existingMarks.filter((eMark) => eMark !== mark),
-        } as Text
-        editor.marks = {marks: marks.marks, _type: 'span'} as Text
+        editor.decoratorState[mark] = false
       }
     }
 
@@ -746,37 +616,3 @@ export const removeDecoratorOperationImplementation: BehaviorOperationImplementa
     }
   }
 }
-
-export function isDecoratorActive({
-  editor,
-  decorator,
-}: {
-  editor: PortableTextSlateEditor
-  decorator: string
-}) {
-  if (!editor.selection) {
-    return false
-  }
-
-  const selectedTextNodes = Array.from(
-    Editor.nodes(editor, {match: Text.isText, at: editor.selection}),
-  )
-
-  if (selectedTextNodes.length === 0) {
-    return false
-  }
-
-  if (Range.isExpanded(editor.selection)) {
-    return selectedTextNodes.every((n) => {
-      const [node] = n
-
-      return node.marks?.includes(decorator)
-    })
-  }
-
-  return (
-    {
-      ...(Editor.marks(editor) || {}),
-    }.marks || []
-  ).includes(decorator)
-}

package/src/editor/plugins/slate-plugin.update-mark-state.ts

@@ -0,0 +1,21 @@
+import {getMarkState} from '../../internal-utils/mark-state'
+import type {PortableTextSlateEditor} from '../../types/editor'
+import type {EditorContext} from '../editor-snapshot'
+
+export function pluginUpdateMarkState(
+  context: Pick<EditorContext, 'schema'>,
+  editor: PortableTextSlateEditor,
+) {
+  const {apply} = editor
+
+  editor.apply = (operation) => {
+    apply(operation)
+
+    editor.markState = getMarkState({
+      editor,
+      schema: context.schema,
+    })
+  }
+
+  return editor
+}

package/src/editor/plugins/slate-plugin.update-value.ts

@@ -15,10 +15,7 @@ export function pluginUpdateValue(
     }
 
     editor.value = applyOperationToPortableText(
-      {
-        keyGenerator: context.keyGenerator,
-        schema: context.schema,
-      },
+      context,
       editor.value,
       operation,
     )

package/src/editor/plugins/with-plugins.ts

@@ -13,6 +13,7 @@ import {createWithPortableTextSelections} from './createWithPortableTextSelectio
 import {createWithSchemaTypes} from './createWithSchemaTypes'
 import {createWithUndoRedo} from './createWithUndoRedo'
 import {createWithUtils} from './createWithUtils'
+import {pluginUpdateMarkState} from './slate-plugin.update-mark-state'
 import {pluginUpdateValue} from './slate-plugin.update-value'
 
 export interface OriginalEditorFunctions {
@@ -72,7 +73,13 @@ export const withPlugins = <T extends Editor>(
                   withUndoRedo(
                     withPatches(
                       withPortableTextSelections(
-                        pluginUpdateValue(editorActor.getSnapshot().context, e),
+                        pluginUpdateValue(
+                          editorActor.getSnapshot().context,
+                          pluginUpdateMarkState(
+                            editorActor.getSnapshot().context,
+                            e,
+                          ),
+                        ),
                       ),
                     ),
                   ),

package/src/internal-utils/create-test-snapshot.ts

@@ -12,12 +12,13 @@ export function createTestSnapshot(snapshot: {
       schema:
         snapshot.context?.schema ?? compileSchemaDefinition(defineSchema({})),
       keyGenerator: snapshot.context?.keyGenerator ?? createTestKeyGenerator(),
-      activeDecorators: snapshot.context?.activeDecorators ?? [],
       readOnly: snapshot.context?.readOnly ?? false,
       value: snapshot.context?.value ?? [],
       selection: snapshot.context?.selection ?? null,
     },
     beta: {
+      activeAnnotations: snapshot.beta?.activeAnnotations ?? [],
+      activeDecorators: snapshot.beta?.activeDecorators ?? [],
       hasTag: snapshot.beta?.hasTag ?? (() => false),
       internalDrag: undefined,
     },

package/src/internal-utils/mark-state.ts

@@ -0,0 +1,172 @@
+import {Range} from 'slate'
+import type {EditorSchema} from '../editor/editor-schema'
+import type {PortableTextSlateEditor} from '../types/editor'
+import {getNextSpan, getPreviousSpan} from './sibling-utils'
+import {getFocusBlock, getFocusSpan, getSelectedSpans} from './slate-utils'
+
+export type MarkState = {
+  state: 'changed' | 'unchanged'
+  marks: Array<string>
+}
+
+/**
+ * Given that text is inserted at the current position, what marks should
+ * be applied?
+ */
+export function getMarkState({
+  schema,
+  editor,
+}: {
+  schema: EditorSchema
+  editor: PortableTextSlateEditor
+}): MarkState | undefined {
+  if (!editor.selection) {
+    return undefined
+  }
+
+  const [block, blockPath] = getFocusBlock({
+    editor,
+  })
+  const [span, spanPath] = getFocusSpan({
+    editor,
+  })
+
+  if (!block || !editor.isTextBlock(block) || !span) {
+    return undefined
+  }
+
+  if (Range.isExpanded(editor.selection)) {
+    const selectedSpans = getSelectedSpans({editor})
+
+    let index = 0
+    let marks: Array<string> = []
+
+    for (const [span] of selectedSpans) {
+      if (index === 0) {
+        marks = span.marks ?? []
+      } else {
+        if (
+          span.marks?.length === 0 ||
+          (span.marks ?? [])?.some((mark) => !marks.includes(mark))
+        ) {
+          marks = []
+        }
+      }
+
+      index++
+    }
+
+    return {
+      state: 'unchanged',
+      marks,
+    }
+  }
+
+  const decorators = schema.decorators.map((decorator) => decorator.name)
+  const marks = span.marks ?? []
+  const marksWithoutAnnotations = marks.filter((mark) =>
+    decorators.includes(mark),
+  )
+
+  const spanHasAnnotations = marks.length > marksWithoutAnnotations.length
+
+  const spanIsEmpty = span.text.length === 0
+
+  const atTheBeginningOfSpan = editor.selection.anchor.offset === 0
+  const atTheEndOfSpan = editor.selection.anchor.offset === span.text.length
+
+  const previousSpan = getPreviousSpan({editor, blockPath, spanPath})
+  const nextSpan = getNextSpan({editor, blockPath, spanPath})
+  const nextSpanAnnotations =
+    nextSpan?.marks?.filter((mark) => !decorators.includes(mark)) ?? []
+  const spanAnnotations = marks.filter((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
+  const nextSpanSharesSomeAnnotations = spanAnnotations.some((mark) =>
+    nextSpanAnnotations?.includes(mark),
+  )
+
+  if (spanHasAnnotations && !spanIsEmpty) {
+    if (atTheBeginningOfSpan) {
+      if (previousSpanHasSameMarks) {
+        return {
+          state: 'changed',
+          marks: previousSpan?.marks ?? [],
+        }
+      } else if (previousSpanHasSameAnnotations) {
+        return {
+          state: 'changed',
+          marks: previousSpan?.marks ?? [],
+        }
+      } else if (previousSpanHasSameAnnotation) {
+        return {
+          state: 'unchanged',
+          marks: span.marks ?? [],
+        }
+      } else if (!previousSpan) {
+        return {
+          state: 'changed',
+          marks: [],
+        }
+      }
+    }
+
+    if (atTheEndOfSpan) {
+      if (
+        (nextSpan &&
+          nextSpanSharesSomeAnnotations &&
+          nextSpanAnnotations.length < spanAnnotations.length) ||
+        !nextSpanSharesSomeAnnotations
+      ) {
+        return {
+          state: 'changed',
+          marks: nextSpan?.marks ?? [],
+        }
+      }
+
+      if (!nextSpan) {
+        return {
+          state: 'changed',
+          marks: [],
+        }
+      }
+    }
+  }
+
+  if (atTheBeginningOfSpan && !spanIsEmpty && !!previousSpan) {
+    if (previousSpanHasAnnotations) {
+      return {
+        state: 'changed',
+        marks: [],
+      }
+    } else {
+      return {
+        state: 'changed',
+        marks: (previousSpan?.marks ?? []).filter((mark) =>
+          decorators.includes(mark),
+        ),
+      }
+    }
+  }
+
+  return {
+    state: 'unchanged',
+    marks: span.marks ?? [],
+  }
+}

package/src/internal-utils/slate-utils.ts

@@ -1,3 +1,4 @@
+import type {PortableTextSpan} from '@sanity/types'
 import {Editor, Element, Node, Range, type Path, type Point} from 'slate'
 import type {EditorSchema} from '../editor/editor-schema'
 import type {EditorSelection, PortableTextSlateEditor} from '../types/editor'
@@ -45,6 +46,49 @@ export function getFocusBlock({
   }
 }
 
+export function getFocusSpan({
+  editor,
+}: {
+  editor: PortableTextSlateEditor
+}): [node: PortableTextSpan, path: Path] | [undefined, undefined] {
+  if (!editor.selection) {
+    return [undefined, undefined]
+  }
+
+  try {
+    const [node, path] = Editor.node(editor, editor.selection.focus.path)
+
+    if (editor.isTextSpan(node)) {
+      return [node, path]
+    }
+  } catch {
+    return [undefined, undefined]
+  }
+
+  return [undefined, undefined]
+}
+
+export function getSelectedSpans({
+  editor,
+}: {
+  editor: PortableTextSlateEditor
+}): Array<[node: PortableTextSpan, path: Path]> {
+  if (!editor.selection) {
+    return []
+  }
+
+  try {
+    return Array.from(
+      Editor.nodes(editor, {
+        at: editor.selection,
+        match: (node) => editor.isTextSpan(node),
+      }),
+    )
+  } catch {
+    return []
+  }
+}
+
 export function getSelectionStartBlock({
   editor,
 }: {
@@ -144,6 +188,10 @@ export function getFirstBlock({
 }: {
   editor: PortableTextSlateEditor
 }): [node: Node, path: Path] | [undefined, undefined] {
+  if (editor.children.length === 0) {
+    return [undefined, undefined]
+  }
+
   const firstPoint = Editor.start(editor, [])
   const firstBlockPath = firstPoint.path.at(0)
 
@@ -161,6 +209,10 @@ export function getLastBlock({
 }: {
   editor: PortableTextSlateEditor
 }): [node: Node, path: Path] | [undefined, undefined] {
+  if (editor.children.length === 0) {
+    return [undefined, undefined]
+  }
+
   const lastPoint = Editor.end(editor, [])
   const lastBlockPath = lastPoint.path.at(0)
 

package/src/operations/behavior.operation.decorator.add.ts

@@ -108,9 +108,13 @@ export const decoratorAddOperationImplementation: BehaviorOperationImplementatio
     })
 
     const trimmedSelection = selectors.getTrimmedSelection({
-      beta: {hasTag: () => false, internalDrag: undefined},
-      context: {
+      beta: {
+        activeAnnotations: [],
         activeDecorators: [],
+        hasTag: () => false,
+        internalDrag: undefined,
+      },
+      context: {
         converters: [],
         keyGenerator: context.keyGenerator,
         readOnly: false,
@@ -196,15 +200,7 @@ export const decoratorAddOperationImplementation: BehaviorOperationImplementatio
         },
       )
     } else {
-      const existingMarks: string[] =
-        {
-          ...(Editor.marks(editor) || {}),
-        }.marks || []
-      const marks = {
-        ...(Editor.marks(editor) || {}),
-        marks: [...existingMarks, mark],
-      }
-      editor.marks = marks as Text
+      editor.decoratorState[mark] = true
     }
   }
 

package/src/operations/behavior.operation.insert.text.ts

@@ -1,17 +1,57 @@
 import {Transforms} from 'slate'
+import {getActiveAnnotations} from '../editor/get-active-annotations'
+import {getActiveDecorators} from '../editor/get-active-decorators'
+import {getFocusSpan} from '../internal-utils/slate-utils'
 import type {BehaviorOperationImplementation} from './behavior.operations'
 
 export const insertTextOperationImplementation: BehaviorOperationImplementation<
   'insert.text'
-> = ({operation}) => {
-  if (operation.editor.marks) {
-    Transforms.insertNodes(operation.editor, {
-      text: operation.text,
-      ...operation.editor.marks,
-    })
-  } else {
+> = ({context, operation}) => {
+  const activeDecorators = getActiveDecorators({
+    decoratorState: operation.editor.decoratorState,
+    markState: operation.editor.markState,
+    schema: context.schema,
+  })
+  const activeAnnotations = getActiveAnnotations({
+    markState: operation.editor.markState,
+    schema: context.schema,
+  })
+
+  const [focusSpan] = getFocusSpan({
+    editor: operation.editor,
+  })
+
+  if (!focusSpan) {
     Transforms.insertText(operation.editor, operation.text)
+    return
+  }
+
+  if (
+    operation.editor.markState &&
+    operation.editor.markState.state === 'unchanged'
+  ) {
+    const markStateDecorators = (operation.editor.markState.marks ?? []).filter(
+      (mark) =>
+        context.schema.decorators
+          .map((decorator) => decorator.name)
+          .includes(mark),
+    )
+
+    if (
+      markStateDecorators.length === activeDecorators.length &&
+      markStateDecorators.every((mark) => activeDecorators.includes(mark))
+    ) {
+      Transforms.insertText(operation.editor, operation.text)
+      return
+    }
   }
 
-  operation.editor.marks = null
+  Transforms.insertNodes(operation.editor, {
+    _type: focusSpan._type,
+    _key: context.keyGenerator(),
+    text: operation.text,
+    marks: [...activeDecorators, ...activeAnnotations],
+  })
+
+  operation.editor.decoratorState = {}
 }