@portabletext/editor 1.1.3 → 1.1.5

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 {
@@ -23,7 +23,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
@@ -288,14 +287,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 +308,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: editorActor.getSnapshot().context.keyGenerator(),
+                  text: op.text,
+                  marks: previousSpan?.marks ?? [],
+                })
+              } else if (previousSpanHasSameAnnotation) {
+                apply(op)
+              } else {
+                Transforms.insertNodes(editor, {
+                  _type: 'span',
+                  _key: editorActor.getSnapshot().context.keyGenerator(),
+                  text: op.text,
+                  marks: [],
+                })
+              }
+              return
+            }
+
+            if (atTheEndOfSpan) {
+              if (nextSpanHasSameMarks) {
+                Transforms.insertNodes(editor, {
+                  _type: 'span',
+                  _key: editorActor.getSnapshot().context.keyGenerator(),
+                  text: op.text,
+                  marks: nextSpan?.marks ?? [],
+                })
+              } else if (nextSpanHasSameAnnotation) {
+                apply(op)
+              } else {
+                Transforms.insertNodes(editor, {
+                  _type: 'span',
+                  _key: editorActor.getSnapshot().context.keyGenerator(),
+                  text: op.text,
+                  marks: [],
+                })
+              }
+              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,4 @@
-export {type Patch} from '@portabletext/patches'
+export type {Patch} from '@portabletext/patches'
 export {PortableTextEditable} from './editor/Editable'
 export type {PortableTextEditableProps} from './editor/Editable'
 export {
@@ -8,7 +8,7 @@ export {
   type PatchEvent,
 } from './editor/editor-machine'
 export {usePortableTextEditor} from './editor/hooks/usePortableTextEditor'
-export {defaultKeyGenerator as keyGenerator} from './editor/hooks/usePortableTextEditorKeyGenerator'
+export {defaultKeyGenerator as keyGenerator} from './editor/key-generator'
 export {usePortableTextEditorSelection} from './editor/hooks/usePortableTextEditorSelection'
 export {PortableTextEditor} from './editor/PortableTextEditor'
 export type {PortableTextEditorProps} from './editor/PortableTextEditor'

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/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
-}