@portabletext/editor 1.1.4 → 1.1.6

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -4,8 +4,8 @@
  *
  */
 
-import {isPortableTextBlock, isPortableTextSpan} from '@portabletext/toolkit'
-import type {PortableTextObject, PortableTextSpan} from '@sanity/types'
+import {isPortableTextBlock} from '@portabletext/toolkit'
+import type {PortableTextObject} from '@sanity/types'
 import {isEqual, uniq} from 'lodash'
 import {Editor, Element, Node, Path, Range, Text, Transforms} from 'slate'
 import type {
@@ -14,6 +14,7 @@ import type {
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {toPortableTextRange} from '../../utils/ranges'
+import {getNextSpan, getPreviousSpan} from '../../utils/sibling-utils'
 import {isChangingRemotely} from '../../utils/withChanges'
 import {isRedoing, isUndoing} from '../../utils/withUndoRedo'
 import type {EditorActor} from '../editor-machine'
@@ -23,7 +24,6 @@ const debug = debugWithName('plugin:withPortableTextMarkModel')
 export function createWithPortableTextMarkModel(
   editorActor: EditorActor,
   types: PortableTextMemberSchemaTypes,
-  keyGenerator: () => string,
 ): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
   return function withPortableTextMarkModel(editor: PortableTextSlateEditor) {
     const {apply, normalizeNode} = editor
@@ -314,32 +314,13 @@ export function createWithPortableTextMarkModel(
           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 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 previousSpanHasSameAnnotation = previousSpan
             ? previousSpan.marks?.some(
@@ -349,21 +330,16 @@ export function createWithPortableTextMarkModel(
           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
+          const nextSpanSharesSomeAnnotations = spanAnnotations.some((mark) =>
+            nextSpanAnnotations?.includes(mark),
+          )
 
           if (spanHasAnnotations && !spanIsEmpty) {
             if (atTheBeginningOfSpan) {
               if (previousSpanHasSameMarks) {
                 Transforms.insertNodes(editor, {
                   _type: 'span',
-                  _key: keyGenerator(),
+                  _key: editorActor.getSnapshot().context.keyGenerator(),
                   text: op.text,
                   marks: previousSpan?.marks ?? [],
                 })
@@ -372,7 +348,7 @@ export function createWithPortableTextMarkModel(
               } else {
                 Transforms.insertNodes(editor, {
                   _type: 'span',
-                  _key: keyGenerator(),
+                  _key: editorActor.getSnapshot().context.keyGenerator(),
                   text: op.text,
                   marks: [],
                 })
@@ -381,105 +357,100 @@ export function createWithPortableTextMarkModel(
             }
 
             if (atTheEndOfSpan) {
-              if (nextSpanHasSameMarks) {
+              if (
+                (nextSpan &&
+                  nextSpanSharesSomeAnnotations &&
+                  nextSpanAnnotations.length < spanAnnotations.length) ||
+                !nextSpanSharesSomeAnnotations
+              ) {
                 Transforms.insertNodes(editor, {
                   _type: 'span',
-                  _key: keyGenerator(),
+                  _key: editorActor.getSnapshot().context.keyGenerator(),
                   text: op.text,
                   marks: nextSpan?.marks ?? [],
                 })
-              } else if (nextSpanHasSameAnnotation) {
-                apply(op)
-              } else {
+                return
+              }
+
+              if (!nextSpan) {
                 Transforms.insertNodes(editor, {
                   _type: 'span',
-                  _key: keyGenerator(),
+                  _key: editorActor.getSnapshot().context.keyGenerator(),
                   text: op.text,
                   marks: [],
                 })
+                return
               }
-              return
             }
           }
         }
       }
 
       if (op.type === 'remove_text') {
-        const nodeEntry = Array.from(
-          Editor.nodes(editor, {
-            mode: 'lowest',
-            at: {path: op.path, offset: op.offset},
-            match: (n) => n._type === types.span.name,
-            voids: false,
-          }),
-        )[0]
-        const node = nodeEntry[0]
-        const blockEntry = Editor.node(editor, Path.parent(op.path))
-        const block = blockEntry[0]
-
-        if (
-          node &&
-          isPortableTextSpan(node) &&
-          block &&
-          isPortableTextBlock(block)
-        ) {
-          const markDefs = block.markDefs ?? []
-          const nodeHasAnnotations = (node.marks ?? []).some((mark) =>
-            markDefs.find((markDef) => markDef._key === mark),
-          )
-          const deletingPartOfTheNode = op.offset !== 0
-          const deletingFromTheEnd =
-            op.offset + op.text.length === node.text.length
+        const {selection} = editor
 
-          if (
-            nodeHasAnnotations &&
-            deletingPartOfTheNode &&
-            deletingFromTheEnd
-          ) {
-            Editor.withoutNormalizing(editor, () => {
-              Transforms.splitNodes(editor, {
-                match: Text.isText,
+        if (selection && Range.isExpanded(selection)) {
+          const [block, blockPath] = Editor.node(editor, selection, {
+            depth: 1,
+          })
+          const [span, spanPath] =
+            Array.from(
+              Editor.nodes(editor, {
+                mode: 'lowest',
                 at: {path: op.path, offset: op.offset},
-              })
-              Transforms.removeNodes(editor, {at: Path.next(op.path)})
-            })
-
-            editor.onChange()
-            return
-          }
-
-          const deletingAllText = op.offset === 0 && deletingFromTheEnd
-
-          if (nodeHasAnnotations && deletingAllText) {
-            const marksWithoutAnnotationMarks: string[] = (
-              {
-                ...(Editor.marks(editor) || {}),
-              }.marks || []
-            ).filter((mark) => decorators.includes(mark))
+                match: (n) => editor.isTextSpan(n),
+                voids: false,
+              }),
+            )[0] ?? ([undefined, undefined] as const)
 
-            Editor.withoutNormalizing(editor, () => {
-              apply(op)
-              Transforms.setNodes(
-                editor,
-                {marks: marksWithoutAnnotationMarks},
-                {at: op.path},
-              )
-            })
+          if (span && block && isPortableTextBlock(block)) {
+            const markDefs = block.markDefs ?? []
+            const marks = span.marks ?? []
+            const spanHasAnnotations = marks.some((mark) =>
+              markDefs.find((markDef) => markDef._key === mark),
+            )
+            const deletingFromTheEnd =
+              op.offset + op.text.length === span.text.length
+            const deletingAllText = op.offset === 0 && deletingFromTheEnd
 
-            editor.onChange()
-            return
-          }
+            const previousSpan = getPreviousSpan({editor, blockPath, spanPath})
+            const nextSpan = getNextSpan({editor, blockPath, spanPath})
 
-          const nodeHasMarks = node.marks !== undefined && node.marks.length > 0
+            const previousSpanHasSameAnnotation = previousSpan
+              ? previousSpan.marks?.some(
+                  (mark) => !decorators.includes(mark) && marks.includes(mark),
+                )
+              : false
+            const nextSpanHasSameAnnotation = nextSpan
+              ? nextSpan.marks?.some(
+                  (mark) => !decorators.includes(mark) && marks.includes(mark),
+                )
+              : false
+
+            if (
+              spanHasAnnotations &&
+              deletingAllText &&
+              !previousSpanHasSameAnnotation &&
+              !nextSpanHasSameAnnotation
+            ) {
+              const marksWithoutAnnotationMarks: string[] = (
+                {
+                  ...(Editor.marks(editor) || {}),
+                }.marks || []
+              ).filter((mark) => decorators.includes(mark))
 
-          if (nodeHasMarks && deletingAllText) {
-            Editor.withoutNormalizing(editor, () => {
-              apply(op)
-              Transforms.setNodes(editor, {marks: []}, {at: op.path})
-            })
+              Editor.withoutNormalizing(editor, () => {
+                apply(op)
+                Transforms.setNodes(
+                  editor,
+                  {marks: marksWithoutAnnotationMarks},
+                  {at: op.path},
+                )
+              })
 
-            editor.onChange()
-            return
+              editor.onChange()
+              return
+            }
           }
         }
       }

package/src/editor/plugins/createWithSchemaTypes.ts

@@ -22,11 +22,9 @@ const debug = debugWithName('plugin:withSchemaTypes')
 export function createWithSchemaTypes({
   editorActor,
   schemaTypes,
-  keyGenerator,
 }: {
   editorActor: EditorActor
   schemaTypes: PortableTextMemberSchemaTypes
-  keyGenerator: () => string
 }) {
   return function withSchemaTypes(
     editor: PortableTextSlateEditor,
@@ -73,7 +71,8 @@ export function createWithSchemaTypes({
       if (node._type === undefined && path.length === 2) {
         debug('Setting span type on text node without a type')
         const span = node as PortableTextSpan
-        const key = span._key || keyGenerator()
+        const key =
+          span._key || editorActor.getSnapshot().context.keyGenerator()
         editorActor.send({type: 'normalizing'})
         Transforms.setNodes(
           editor,
@@ -87,7 +86,7 @@ export function createWithSchemaTypes({
       // catches cases when the children are missing keys but excludes it when the normalize is running the node as the editor object
       if (node._key === undefined && (path.length === 1 || path.length === 2)) {
         debug('Setting missing key on child node without a key')
-        const key = keyGenerator()
+        const key = editorActor.getSnapshot().context.keyGenerator()
         editorActor.send({type: 'normalizing'})
         Transforms.setNodes(editor, {_key: key}, {at: path})
         editorActor.send({type: 'done normalizing'})

package/src/editor/plugins/createWithUtils.ts

@@ -5,13 +5,14 @@ import type {
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {toSlateValue} from '../../utils/values'
+import type {EditorActor} from '../editor-machine'
 import type {PortableTextEditor} from '../PortableTextEditor'
 
 const debug = debugWithName('plugin:withUtils')
 
 interface Options {
+  editorActor: EditorActor
   schemaTypes: PortableTextMemberSchemaTypes
-  keyGenerator: () => string
   portableTextEditor: PortableTextEditor
 }
 /**
@@ -19,8 +20,8 @@ interface Options {
  *
  */
 export function createWithUtils({
+  editorActor,
   schemaTypes,
-  keyGenerator,
   portableTextEditor,
 }: Options) {
   return function withUtils(
@@ -79,13 +80,13 @@ export function createWithUtils({
         [
           {
             _type: schemaTypes.block.name,
-            _key: keyGenerator(),
+            _key: editorActor.getSnapshot().context.keyGenerator(),
             style: schemaTypes.styles[0].value || 'normal',
             markDefs: [],
             children: [
               {
                 _type: 'span',
-                _key: keyGenerator(),
+                _key: editorActor.getSnapshot().context.keyGenerator(),
                 text: '',
                 marks: options.decorators.filter((decorator) =>
                   schemaTypes.decorators.find(({value}) => value === decorator),

package/src/editor/plugins/index.ts

@@ -47,8 +47,7 @@ export const withPlugins = <T extends Editor>(
   options: createEditorOptions,
 ): {editor: PortableTextSlateEditor; subscribe: () => () => void} => {
   const e = editor as T & PortableTextSlateEditor
-  const {keyGenerator, portableTextEditor, patches$, readOnly, maxBlocks} =
-    options
+  const {portableTextEditor, patches$, readOnly, maxBlocks} = options
   const {editorActor, schemaTypes} = portableTextEditor
   e.subscriptions = []
   if (e.destroy) {
@@ -63,24 +62,18 @@ export const withPlugins = <T extends Editor>(
     })
   }
   const operationToPatches = createOperationToPatches(schemaTypes)
-  const withObjectKeys = createWithObjectKeys(
-    editorActor,
-    schemaTypes,
-    keyGenerator,
-  )
+  const withObjectKeys = createWithObjectKeys(editorActor, schemaTypes)
   const withSchemaTypes = createWithSchemaTypes({
     editorActor,
     schemaTypes,
-    keyGenerator,
   })
   const withEditableAPI = createWithEditableAPI(
+    editorActor,
     portableTextEditor,
     schemaTypes,
-    keyGenerator,
   )
   const withPatches = createWithPatches({
     editorActor,
-    keyGenerator,
     patches$,
     patchFunctions: operationToPatches,
     readOnly,
@@ -96,7 +89,6 @@ export const withPlugins = <T extends Editor>(
   const withPortableTextMarkModel = createWithPortableTextMarkModel(
     editorActor,
     schemaTypes,
-    keyGenerator,
   )
   const withPortableTextBlockStyle = createWithPortableTextBlockStyle(
     editorActor,
@@ -105,10 +97,10 @@ export const withPlugins = <T extends Editor>(
 
   const withPlaceholderBlock = createWithPlaceholderBlock()
 
-  const withInsertBreak = createWithInsertBreak(schemaTypes, keyGenerator)
+  const withInsertBreak = createWithInsertBreak(editorActor, schemaTypes)
 
   const withUtils = createWithUtils({
-    keyGenerator,
+    editorActor,
     schemaTypes,
     portableTextEditor,
   })

package/src/index.ts

@@ -1,4 +1,13 @@
-export {type Patch} from '@portabletext/patches'
+export type {Patch} from '@portabletext/patches'
+export type {
+  Behavior,
+  BehaviorActionIntend,
+  BehaviorContext,
+  BehaviorEvent,
+  BehaviorGuard,
+  RaiseBehaviorActionIntend,
+  PickFromUnion,
+} from './editor/behavior/behavior.types'
 export {PortableTextEditable} from './editor/Editable'
 export type {PortableTextEditableProps} from './editor/Editable'
 export {
@@ -8,8 +17,8 @@ export {
   type PatchEvent,
 } from './editor/editor-machine'
 export {usePortableTextEditor} from './editor/hooks/usePortableTextEditor'
-export {defaultKeyGenerator as keyGenerator} from './editor/hooks/usePortableTextEditorKeyGenerator'
 export {usePortableTextEditorSelection} from './editor/hooks/usePortableTextEditorSelection'
+export {defaultKeyGenerator as keyGenerator} from './editor/key-generator'
 export {PortableTextEditor} from './editor/PortableTextEditor'
 export type {PortableTextEditorProps} from './editor/PortableTextEditor'
 export * from './types/editor'

package/src/types/options.ts

@@ -6,7 +6,6 @@ import type {PatchObservable} from './editor'
  * @internal
  */
 export type createEditorOptions = {
-  keyGenerator: () => string
   patches$?: PatchObservable
   portableTextEditor: PortableTextEditor
   readOnly: boolean

package/src/utils/__tests__/operationToPatches.test.ts

@@ -3,7 +3,6 @@ import {createEditor, type Descendant} from 'slate'
 import {beforeEach, describe, expect, it} from 'vitest'
 import {PortableTextEditor, type PortableTextEditorProps} from '../..'
 import {schemaType} from '../../editor/__tests__/PortableTextEditorTester'
-import {defaultKeyGenerator} from '../../editor/hooks/usePortableTextEditorKeyGenerator'
 import {withPlugins} from '../../editor/plugins'
 import {getPortableTextMemberSchemaTypes} from '../getPortableTextMemberSchemaTypes'
 import {createOperationToPatches} from '../operationToPatches'
@@ -16,7 +15,6 @@ const {editor} = withPlugins(createEditor(), {
   portableTextEditor: new PortableTextEditor({
     schemaType,
   } as PortableTextEditorProps),
-  keyGenerator: defaultKeyGenerator,
   readOnly: false,
 })
 

package/src/utils/__tests__/patchToOperations.test.ts

@@ -2,7 +2,7 @@ import type {Patch} from '@portabletext/patches'
 import {noop} from 'lodash'
 import {createEditor, type Descendant} from 'slate'
 import {beforeEach, describe, expect, it} from 'vitest'
-import {keyGenerator, PortableTextEditor} from '../..'
+import {PortableTextEditor} from '../..'
 import {schemaType} from '../../editor/__tests__/PortableTextEditorTester'
 import {withPlugins} from '../../editor/plugins'
 import {createApplyPatch} from '../applyPatch'
@@ -16,7 +16,6 @@ const portableTextEditor = new PortableTextEditor({schemaType, onChange: noop})
 
 const {editor} = withPlugins(createEditor(), {
   portableTextEditor,
-  keyGenerator,
   readOnly: false,
 })
 

package/src/utils/sibling-utils.ts

@@ -0,0 +1,55 @@
+import type {PortableTextSpan} from '@sanity/types'
+import {Node, Path} from 'slate'
+import type {PortableTextSlateEditor} from '../types/editor'
+
+export function getPreviousSpan({
+  editor,
+  blockPath,
+  spanPath,
+}: {
+  editor: PortableTextSlateEditor
+  blockPath: Path
+  spanPath: Path
+}): PortableTextSpan | undefined {
+  let previousSpan: 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
+    }
+  }
+
+  return previousSpan
+}
+
+export function getNextSpan({
+  editor,
+  blockPath,
+  spanPath,
+}: {
+  editor: PortableTextSlateEditor
+  blockPath: Path
+  spanPath: Path
+}): PortableTextSpan | undefined {
+  let nextSpan: PortableTextSpan | undefined
+
+  for (const [child, childPath] of Node.children(editor, blockPath)) {
+    if (!editor.isTextSpan(child)) {
+      continue
+    }
+
+    if (Path.isAfter(childPath, spanPath)) {
+      nextSpan = child
+      break
+    }
+  }
+
+  return nextSpan
+}

package/src/editor/hooks/usePortableTextEditorKeyGenerator.ts

@@ -1,27 +0,0 @@
-import {randomKey} from '@sanity/util/content'
-import {createContext, useContext} from 'react'
-
-/**
- * @public
- */
-export const defaultKeyGenerator = (): string => randomKey(12)
-
-/**
- * A React context for sharing the editor's keyGenerator.
- */
-export const PortableTextEditorKeyGeneratorContext =
-  createContext<() => string>(defaultKeyGenerator)
-
-/**
- * Get the current editor selection from the React context.
- */
-export const usePortableTextEditorKeyGenerator = (): (() => string) => {
-  const keyGenerator = useContext(PortableTextEditorKeyGeneratorContext)
-
-  if (keyGenerator === undefined) {
-    throw new Error(
-      `The \`usePortableTextEditorKeyGenerator\` hook must be used inside the <PortableTextEditor> component's context.`,
-    )
-  }
-  return keyGenerator
-}