@portabletext/editor 1.1.4 → 1.1.6

package/src/editor/editor-machine.ts

@@ -10,7 +10,21 @@ import {
   setup,
   type ActorRefFrom,
 } from 'xstate'
-import type {EditorSelection, InvalidValueResolution} from '../types/editor'
+import type {
+  EditorSelection,
+  InvalidValueResolution,
+  PortableTextMemberSchemaTypes,
+} from '../types/editor'
+import {toPortableTextRange} from '../utils/ranges'
+import {fromSlateValue} from '../utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../utils/weakMaps'
+import {inserText, inserTextBlock} from './behavior/behavior.actions'
+import type {
+  Behavior,
+  BehaviorAction,
+  BehaviorContext,
+  BehaviorEvent,
+} from './behavior/behavior.types'
 
 /**
  * @internal
@@ -51,6 +65,12 @@ export type MutationEvent = {
 type EditorEvent =
   | {type: 'normalizing'}
   | {type: 'done normalizing'}
+  | BehaviorEvent
+  | BehaviorAction
+  | {
+      type: 'update schema'
+      schema: PortableTextMemberSchemaTypes
+    }
   | EditorEmittedEvent
 
 type EditorEmittedEvent =
@@ -90,12 +110,34 @@ type EditorEmittedEvent =
 export const editorMachine = setup({
   types: {
     context: {} as {
+      behaviors: Array<Behavior>
+      keyGenerator: () => string
       pendingEvents: Array<PatchEvent | MutationEvent>
+      schema: PortableTextMemberSchemaTypes
     },
     events: {} as EditorEvent,
     emitted: {} as EditorEmittedEvent,
+    input: {} as {
+      behaviors: Array<Behavior>
+      keyGenerator: () => string
+      schema: PortableTextMemberSchemaTypes
+    },
   },
   actions: {
+    'apply:insert text': ({context, event}) => {
+      assertEvent(event, 'insert text')
+      inserText({context, event})
+    },
+    'apply:insert text block': ({context, event}) => {
+      assertEvent(event, 'insert text block')
+      inserTextBlock({context, event})
+    },
+    'assign schema': assign({
+      schema: ({event}) => {
+        assertEvent(event, 'update schema')
+        return event.schema
+      },
+    }),
     'emit patch event': emit(({event}) => {
       assertEvent(event, 'patch')
       return event
@@ -118,15 +160,80 @@ export const editorMachine = setup({
     'clear pending events': assign({
       pendingEvents: [],
     }),
+    'handle behavior event': enqueueActions(({context, event, enqueue}) => {
+      assertEvent(event, ['key down'])
+
+      const eventBehaviors = context.behaviors.filter(
+        (behavior) => behavior.on === event.type,
+      )
+
+      if (eventBehaviors.length === 0) {
+        return
+      }
+
+      const value = fromSlateValue(
+        event.editor.children,
+        context.schema.block.name,
+        KEY_TO_VALUE_ELEMENT.get(event.editor),
+      )
+      const selection = toPortableTextRange(
+        value,
+        event.editor.selection,
+        context.schema,
+      )
+
+      if (!selection) {
+        console.warn(
+          `Unable to handle event ${event.type} due to missing selection`,
+        )
+        return
+      }
+
+      const behaviorContext = {
+        schema: context.schema,
+        value,
+        selection,
+      } satisfies BehaviorContext
+
+      for (const eventBehavior of eventBehaviors) {
+        const shouldRun =
+          eventBehavior.guard?.({
+            context: behaviorContext,
+            event,
+          }) ?? true
+
+        if (!shouldRun) {
+          continue
+        }
+
+        const actions = eventBehavior.actions.map((action) =>
+          action({context: behaviorContext, event}, shouldRun),
+        )
+
+        for (const action of actions) {
+          if (typeof action !== 'object') {
+            continue
+          }
+
+          enqueue.raise({
+            ...action,
+            editor: event.editor,
+          })
+        }
+      }
+    }),
   },
   actors: {
     networkLogic,
   },
 }).createMachine({
   id: 'editor',
-  context: {
+  context: ({input}) => ({
+    behaviors: input.behaviors,
+    keyGenerator: input.keyGenerator,
     pendingEvents: [],
-  },
+    schema: input.schema,
+  }),
   invoke: {
     id: 'networkLogic',
     src: 'networkLogic',
@@ -144,6 +251,16 @@ export const editorMachine = setup({
     'offline': {actions: emit({type: 'offline'})},
     'loading': {actions: emit({type: 'loading'})},
     'done loading': {actions: emit({type: 'done loading'})},
+    'update schema': {actions: 'assign schema'},
+    'key down': {
+      actions: ['handle behavior event'],
+    },
+    'insert text': {
+      actions: ['apply:insert text'],
+    },
+    'insert text block': {
+      actions: ['apply:insert text block'],
+    },
   },
   initial: 'pristine',
   states: {

package/src/editor/hooks/useSyncValue.ts

@@ -24,7 +24,6 @@ const debug = debugWithName('hook:useSyncValue')
  */
 export interface UseSyncValueProps {
   editorActor: EditorActor
-  keyGenerator: () => string
   portableTextEditor: PortableTextEditor
   readOnly: boolean
 }
@@ -52,7 +51,7 @@ export function useSyncValue(
   value: PortableTextBlock[] | undefined,
   userCallbackFn?: () => void,
 ) => void {
-  const {editorActor, portableTextEditor, readOnly, keyGenerator} = props
+  const {editorActor, portableTextEditor, readOnly} = props
   const {schemaTypes} = portableTextEditor
   const previousValue = useRef<PortableTextBlock[] | undefined>()
   const slateEditor = useSlate()
@@ -162,7 +161,7 @@ export function useSyncValue(
                       const validation = validateValue(
                         validationValue,
                         schemaTypes,
-                        keyGenerator,
+                        editorActor.getSnapshot().context.keyGenerator,
                       )
                       // Resolve validations that can be resolved automatically, without involving the user (but only if the value was changed)
                       if (
@@ -222,7 +221,7 @@ export function useSyncValue(
                       const validation = validateValue(
                         validationValue,
                         schemaTypes,
-                        keyGenerator,
+                        editorActor.getSnapshot().context.keyGenerator,
                       )
                       if (debug.enabled)
                         debug(
@@ -288,7 +287,6 @@ export function useSyncValue(
     return updateFunction
   }, [
     editorActor,
-    keyGenerator,
     portableTextEditor,
     readOnly,
     schemaTypes,

package/src/editor/key-generator.ts

@@ -0,0 +1,6 @@
+import {randomKey} from '@sanity/util/content'
+
+/**
+ * @public
+ */
+export const defaultKeyGenerator = (): string => randomKey(12)

package/src/editor/plugins/createWithEditableAPI.ts

@@ -38,14 +38,15 @@ import {
   KEY_TO_VALUE_ELEMENT,
   SLATE_TO_PORTABLE_TEXT_RANGE,
 } from '../../utils/weakMaps'
+import type {EditorActor} from '../editor-machine'
 import type {PortableTextEditor} from '../PortableTextEditor'
 
 const debug = debugWithName('API:editable')
 
 export function createWithEditableAPI(
+  editorActor: EditorActor,
   portableTextEditor: PortableTextEditor,
   types: PortableTextMemberSchemaTypes,
-  keyGenerator: () => string,
 ) {
   return function withEditableAPI(
     editor: PortableTextSlateEditor,
@@ -151,11 +152,11 @@ export function createWithEditableAPI(
         const block = toSlateValue(
           [
             {
-              _key: keyGenerator(),
+              _key: editorActor.getSnapshot().context.keyGenerator(),
               _type: types.block.name,
               children: [
                 {
-                  _key: keyGenerator(),
+                  _key: editorActor.getSnapshot().context.keyGenerator(),
                   _type: type.name,
                   ...(value ? value : {}),
                 },
@@ -199,7 +200,7 @@ export function createWithEditableAPI(
         const block = toSlateValue(
           [
             {
-              _key: keyGenerator(),
+              _key: editorActor.getSnapshot().context.keyGenerator(),
               _type: type.name,
               ...(value ? value : {}),
             },
@@ -469,7 +470,9 @@ export function createWithEditableAPI(
                   continue
                 }
 
-                const annotationKey = keyGenerator()
+                const annotationKey = editorActor
+                  .getSnapshot()
+                  .context.keyGenerator()
                 const markDefs = block.markDefs ?? []
                 const existingMarkDef = markDefs.find(
                   (markDef) =>

package/src/editor/plugins/createWithHotKeys.ts

@@ -96,6 +96,7 @@ export function createWithHotkeys(
                 at: nextPath,
               },
             )
+            Transforms.select(editor, {path: [...nextPath, 0], offset: 0})
             editor.onChange()
             return
           }
@@ -185,38 +186,6 @@ export function createWithHotkeys(
             return
           }
         }
-        // Block object enter key
-        if (focusBlock && Editor.isVoid(editor, focusBlock)) {
-          Editor.insertNode(editor, editor.pteCreateTextBlock({decorators: []}))
-          event.preventDefault()
-          editor.onChange()
-          return
-        }
-        // Default enter key behavior
-        event.preventDefault()
-        editor.insertBreak()
-        editor.onChange()
-      }
-
-      // Soft line breaks
-      if (isShiftEnter) {
-        event.preventDefault()
-        editor.insertText('\n')
-        return
-      }
-
-      // Undo/redo
-      if (isHotkey('mod+z', event.nativeEvent)) {
-        event.preventDefault()
-        editor.undo()
-        return
-      }
-      if (
-        isHotkey('mod+y', event.nativeEvent) ||
-        isHotkey('mod+shift+z', event.nativeEvent)
-      ) {
-        event.preventDefault()
-        editor.redo()
       }
     }
     return editor

package/src/editor/plugins/createWithInsertBreak.ts

@@ -5,10 +5,11 @@ import type {
   PortableTextSlateEditor,
 } from '../../types/editor'
 import type {SlateTextBlock, VoidElement} from '../../types/slate'
+import type {EditorActor} from '../editor-machine'
 
 export function createWithInsertBreak(
+  editorActor: EditorActor,
   types: PortableTextMemberSchemaTypes,
-  keyGenerator: () => string,
 ): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
   return function withInsertBreak(
     editor: PortableTextSlateEditor,
@@ -175,7 +176,10 @@ export function createWithInsertBreak(
                   ) {
                     // This annotation is both present in the previous block
                     // and this block, so let's assign a new key to it
-                    newMarkDefKeys.set(mark, keyGenerator())
+                    newMarkDefKeys.set(
+                      mark,
+                      editorActor.getSnapshot().context.keyGenerator(),
+                    )
                   }
                 }
 

package/src/editor/plugins/createWithInsertData.ts

@@ -25,7 +25,6 @@ const debug = debugWithName('plugin:withInsertData')
 export function createWithInsertData(
   editorActor: EditorActor,
   schemaTypes: PortableTextMemberSchemaTypes,
-  keyGenerator: () => string,
 ) {
   return function withInsertData(
     editor: PortableTextSlateEditor,
@@ -149,12 +148,16 @@ export function createWithInsertData(
           const slateValue = _regenerateKeys(
             editor,
             toSlateValue(parsed, {schemaTypes}),
-            keyGenerator,
+            editorActor.getSnapshot().context.keyGenerator,
             spanTypeName,
             schemaTypes,
           )
           // Validate the result
-          const validation = validateValue(parsed, schemaTypes, keyGenerator)
+          const validation = validateValue(
+            parsed,
+            schemaTypes,
+            editorActor.getSnapshot().context.keyGenerator,
+          )
           // Bail out if it's not valid
           if (!validation.valid && !validation.resolution?.autoResolve) {
             const errorDescription = `${validation.resolution?.description}`
@@ -224,7 +227,7 @@ export function createWithInsertData(
         const validation = validateValue(
           portableText,
           schemaTypes,
-          keyGenerator,
+          editorActor.getSnapshot().context.keyGenerator,
         )
 
         // Bail out if it's not valid

package/src/editor/plugins/createWithObjectKeys.ts

@@ -14,7 +14,6 @@ import type {EditorActor} from '../editor-machine'
 export function createWithObjectKeys(
   editorActor: EditorActor,
   schemaTypes: PortableTextMemberSchemaTypes,
-  keyGenerator: () => string,
 ) {
   return function withKeys(
     editor: PortableTextSlateEditor,
@@ -48,7 +47,7 @@ export function createWithObjectKeys(
           ...operation,
           properties: {
             ...operation.properties,
-            _key: keyGenerator(),
+            _key: editorActor.getSnapshot().context.keyGenerator(),
           },
         })
 
@@ -61,7 +60,7 @@ export function createWithObjectKeys(
             ...operation,
             node: {
               ...operation.node,
-              _key: keyGenerator(),
+              _key: editorActor.getSnapshot().context.keyGenerator(),
             },
           })
 
@@ -78,7 +77,11 @@ export function createWithObjectKeys(
         // Set key on block itself
         if (!node._key) {
           editorActor.send({type: 'normalizing'})
-          Transforms.setNodes(editor, {_key: keyGenerator()}, {at: path})
+          Transforms.setNodes(
+            editor,
+            {_key: editorActor.getSnapshot().context.keyGenerator()},
+            {at: path},
+          )
           editorActor.send({type: 'done normalizing'})
           return
         }
@@ -86,7 +89,11 @@ export function createWithObjectKeys(
         for (const [child, childPath] of Node.children(editor, path)) {
           if (!child._key) {
             editorActor.send({type: 'normalizing'})
-            Transforms.setNodes(editor, {_key: keyGenerator()}, {at: childPath})
+            Transforms.setNodes(
+              editor,
+              {_key: editorActor.getSnapshot().context.keyGenerator()},
+              {at: childPath},
+            )
             editorActor.send({type: 'done normalizing'})
             return
           }

package/src/editor/plugins/createWithPatches.ts

@@ -81,7 +81,6 @@ export interface PatchFunctions {
 
 interface Options {
   editorActor: EditorActor
-  keyGenerator: () => string
   patches$?: PatchObservable
   patchFunctions: PatchFunctions
   readOnly: boolean