@portabletext/editor 1.6.0 → 1.7.0

package/src/editor/plugins/createWithMaxBlocks.ts

@@ -1,17 +1,22 @@
 import type {PortableTextSlateEditor} from '../../types/editor'
 import {isChangingRemotely} from '../../utils/withChanges'
 import {isRedoing, isUndoing} from '../../utils/withUndoRedo'
+import type {EditorActor} from '../editor-machine'
 
 /**
  * This plugin makes sure that the PTE maxBlocks prop is respected
  *
  */
-export function createWithMaxBlocks(maxBlocks: number) {
+export function createWithMaxBlocks(editorActor: EditorActor) {
   return function withMaxBlocks(
     editor: PortableTextSlateEditor,
   ): PortableTextSlateEditor {
     const {apply} = editor
     editor.apply = (operation) => {
+      if (editorActor.getSnapshot().context.readOnly) {
+        return
+      }
+
       /**
        * We don't want to run any side effects when the editor is processing
        * remote changes.
@@ -30,7 +35,7 @@ export function createWithMaxBlocks(maxBlocks: number) {
         return
       }
 
-      const rows = maxBlocks
+      const rows = editorActor.getSnapshot().context.maxBlocks ?? -1
       if (rows > 0 && editor.children.length >= rows) {
         if (
           (operation.type === 'insert_node' ||

package/src/editor/plugins/createWithPatches.ts

@@ -81,15 +81,15 @@ export interface PatchFunctions {
 interface Options {
   editorActor: EditorActor
   patchFunctions: PatchFunctions
-  readOnly: boolean
   schemaTypes: PortableTextMemberSchemaTypes
+  subscriptions: Array<() => () => void>
 }
 
 export function createWithPatches({
   editorActor,
   patchFunctions,
-  readOnly,
   schemaTypes,
+  subscriptions,
 }: Options): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
   // The previous editor children are needed to figure out the _key of deleted nodes
   // The editor.children would no longer contain that information if the node is already deleted.
@@ -140,7 +140,7 @@ export function createWithPatches({
       handleBufferedRemotePatches()
     }
 
-    editor.subscriptions.push(() => {
+    subscriptions.push(() => {
       debug('Subscribing to remote patches')
       const sub = editorActor.on('patches', handlePatches)
       return () => {
@@ -150,7 +150,7 @@ export function createWithPatches({
     })
 
     editor.apply = (operation: Operation): void | Editor => {
-      if (readOnly) {
+      if (editorActor.getSnapshot().context.readOnly) {
         apply(operation)
         return editor
       }

package/src/editor/plugins/createWithPlaceholderBlock.ts

@@ -4,6 +4,7 @@ import type {SlateTextBlock, VoidElement} from '../../types/slate'
 import {debugWithName} from '../../utils/debug'
 import {isChangingRemotely} from '../../utils/withChanges'
 import {isRedoing, isUndoing} from '../../utils/withUndoRedo'
+import type {EditorActor} from '../editor-machine'
 
 const debug = debugWithName('plugin:withPlaceholderBlock')
 
@@ -11,15 +12,19 @@ const debug = debugWithName('plugin:withPlaceholderBlock')
  * Keep a "placeholder" block present when the editor is empty
  *
  */
-export function createWithPlaceholderBlock(): (
-  editor: PortableTextSlateEditor,
-) => PortableTextSlateEditor {
+export function createWithPlaceholderBlock(
+  editorActor: EditorActor,
+): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
   return function withPlaceholderBlock(
     editor: PortableTextSlateEditor,
   ): PortableTextSlateEditor {
     const {apply} = editor
 
     editor.apply = (op) => {
+      if (editorActor.getSnapshot().context.readOnly) {
+        return
+      }
+
       /**
        * We don't want to run any side effects when the editor is processing
        * remote changes.

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -17,7 +17,6 @@ import {getNextSpan, getPreviousSpan} from '../../utils/sibling-utils'
 import {isChangingRemotely} from '../../utils/withChanges'
 import {isRedoing, isUndoing} from '../../utils/withUndoRedo'
 import type {BehaviourActionImplementation} from '../behavior/behavior.actions'
-import type {BehaviorAction, PickFromUnion} from '../behavior/behavior.types'
 import type {EditorActor} from '../editor-machine'
 
 const debug = debugWithName('plugin:withPortableTextMarkModel')
@@ -656,7 +655,7 @@ export function createWithPortableTextMarkModel(
 }
 
 export const addDecoratorActionImplementation: BehaviourActionImplementation<
-  PickFromUnion<BehaviorAction, 'type', 'decorator.add'>
+  'decorator.add'
 > = ({action}) => {
   const editor = action.editor
   const mark = action.decorator
@@ -747,7 +746,7 @@ export const addDecoratorActionImplementation: BehaviourActionImplementation<
 }
 
 export const removeDecoratorActionImplementation: BehaviourActionImplementation<
-  PickFromUnion<BehaviorAction, 'type', 'decorator.remove'>
+  'decorator.remove'
 > = ({action}) => {
   const editor = action.editor
   const mark = action.decorator
@@ -858,7 +857,7 @@ export function isDecoratorActive({
 }
 
 export const toggleDecoratorActionImplementation: BehaviourActionImplementation<
-  PickFromUnion<BehaviorAction, 'type', 'decorator.toggle'>
+  'decorator.toggle'
 > = ({context, action}) => {
   const isActive = isDecoratorActive({
     editor: action.editor,

package/src/editor/plugins/createWithUndoRedo.ts

@@ -56,8 +56,8 @@ const isSaving = (editor: Editor): boolean | undefined => {
 
 export interface Options {
   editorActor: EditorActor
-  readOnly: boolean
   blockSchemaType: ObjectSchemaType
+  subscriptions: Array<() => () => void>
 }
 
 const getRemotePatches = (editor: Editor) => {
@@ -70,7 +70,7 @@ const getRemotePatches = (editor: Editor) => {
 export function createWithUndoRedo(
   options: Options,
 ): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
-  const {editorActor, readOnly, blockSchemaType} = options
+  const {editorActor, blockSchemaType} = options
 
   return (editor: PortableTextSlateEditor) => {
     let previousSnapshot: PortableTextBlock[] | undefined = fromSlateValue(
@@ -79,7 +79,7 @@ export function createWithUndoRedo(
     )
     const remotePatches = getRemotePatches(editor)
 
-    editor.subscriptions.push(() => {
+    options.subscriptions.push(() => {
       debug('Subscribing to patches')
       const sub = editorActor.on('patches', ({patches, snapshot}) => {
         let reset = false
@@ -114,8 +114,7 @@ export function createWithUndoRedo(
     editor.history = {undos: [], redos: []}
     const {apply} = editor
     editor.apply = (op: Operation) => {
-      if (readOnly) {
-        apply(op)
+      if (editorActor.getSnapshot().context.readOnly) {
         return
       }
 
@@ -181,7 +180,7 @@ export function createWithUndoRedo(
     }
 
     editor.undo = () => {
-      if (readOnly) {
+      if (editorActor.getSnapshot().context.readOnly) {
         return
       }
       const {undos} = editor.history
@@ -239,7 +238,7 @@ export function createWithUndoRedo(
     }
 
     editor.redo = () => {
-      if (readOnly) {
+      if (editorActor.getSnapshot().context.readOnly) {
         return
       }
       const {redos} = editor.history

package/src/editor/plugins/createWithUtils.ts

@@ -6,24 +6,18 @@ import type {
 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
-  portableTextEditor: PortableTextEditor
 }
 /**
  * This plugin makes various util commands available in the editor
  *
  */
-export function createWithUtils({
-  editorActor,
-  schemaTypes,
-  portableTextEditor,
-}: Options) {
+export function createWithUtils({editorActor, schemaTypes}: Options) {
   return function withUtils(
     editor: PortableTextSlateEditor,
   ): PortableTextSlateEditor {
@@ -101,7 +95,7 @@ export function createWithUtils({
             ],
           },
         ],
-        portableTextEditor,
+        {schemaTypes},
       )[0]
       return block
     }

package/src/editor/plugins/{index.ts → with-plugins.ts}

@@ -1,10 +1,8 @@
-import {noop} from 'lodash'
 import type {BaseOperation, Editor, Node, NodeEntry} from 'slate'
 import type {PortableTextSlateEditor} from '../../types/editor'
 import type {createEditorOptions} from '../../types/options'
 import {createOperationToPatches} from '../../utils/operationToPatches'
 import {createWithEventListeners} from './create-with-event-listeners'
-import {createWithEditableAPI} from './createWithEditableAPI'
 import {createWithMaxBlocks} from './createWithMaxBlocks'
 import {createWithObjectKeys} from './createWithObjectKeys'
 import {createWithPatches} from './createWithPatches'
@@ -17,20 +15,6 @@ import {createWithSchemaTypes} from './createWithSchemaTypes'
 import {createWithUndoRedo} from './createWithUndoRedo'
 import {createWithUtils} from './createWithUtils'
 
-export {createWithEditableAPI} from './createWithEditableAPI'
-export {createWithHotkeys} from './createWithHotKeys'
-export {createWithInsertData} from './createWithInsertData'
-export {createWithMaxBlocks} from './createWithMaxBlocks'
-export {createWithObjectKeys} from './createWithObjectKeys'
-export {createWithPatches} from './createWithPatches'
-export {createWithPortableTextBlockStyle} from './createWithPortableTextBlockStyle'
-export {createWithPortableTextLists} from './createWithPortableTextLists'
-export {createWithPortableTextMarkModel} from './createWithPortableTextMarkModel'
-export {createWithPortableTextSelections} from './createWithPortableTextSelections'
-export {createWithSchemaTypes} from './createWithSchemaTypes'
-export {createWithUndoRedo} from './createWithUndoRedo'
-export {createWithUtils} from './createWithUtils'
-
 export interface OriginalEditorFunctions {
   apply: (operation: BaseOperation) => void
   onChange: () => void
@@ -45,11 +29,10 @@ const originalFnMap = new WeakMap<
 export const withPlugins = <T extends Editor>(
   editor: T,
   options: createEditorOptions,
-): {editor: PortableTextSlateEditor; subscribe: () => () => void} => {
+): PortableTextSlateEditor => {
   const e = editor as T & PortableTextSlateEditor
-  const {editorActor, portableTextEditor, readOnly, maxBlocks} = options
-  const {schemaTypes} = portableTextEditor
-  e.subscriptions = []
+  const {editorActor} = options
+  const schemaTypes = editorActor.getSnapshot().context.schema
   if (e.destroy) {
     e.destroy()
   } else {
@@ -67,23 +50,18 @@ export const withPlugins = <T extends Editor>(
     editorActor,
     schemaTypes,
   })
-  const withEditableAPI = createWithEditableAPI(
-    editorActor,
-    portableTextEditor,
-    schemaTypes,
-  )
   const withPatches = createWithPatches({
     editorActor,
     patchFunctions: operationToPatches,
-    readOnly,
     schemaTypes,
+    subscriptions: options.subscriptions,
   })
-  const withMaxBlocks = createWithMaxBlocks(maxBlocks || -1)
+  const withMaxBlocks = createWithMaxBlocks(editorActor)
   const withPortableTextLists = createWithPortableTextLists(schemaTypes)
   const withUndoRedo = createWithUndoRedo({
     editorActor,
-    readOnly,
     blockSchemaType: schemaTypes.block,
+    subscriptions: options.subscriptions,
   })
   const withPortableTextMarkModel = createWithPortableTextMarkModel(
     editorActor,
@@ -94,18 +72,20 @@ export const withPlugins = <T extends Editor>(
     schemaTypes,
   )
 
-  const withPlaceholderBlock = createWithPlaceholderBlock()
+  const withPlaceholderBlock = createWithPlaceholderBlock(editorActor)
 
   const withUtils = createWithUtils({
     editorActor,
     schemaTypes,
-    portableTextEditor,
   })
   const withPortableTextSelections = createWithPortableTextSelections(
     editorActor,
     schemaTypes,
   )
-  const withEventListeners = createWithEventListeners(editorActor)
+  const withEventListeners = createWithEventListeners(
+    editorActor,
+    options.subscriptions,
+  )
 
   e.destroy = () => {
     const originalFunctions = originalFnMap.get(e)
@@ -117,44 +97,18 @@ export const withPlugins = <T extends Editor>(
     e.normalizeNode = originalFunctions.normalizeNode
     e.onChange = originalFunctions.onChange
   }
-  if (readOnly) {
-    return {
-      editor: withSchemaTypes(
-        withObjectKeys(
-          withPortableTextMarkModel(
-            withPortableTextBlockStyle(
-              withUtils(
-                withPlaceholderBlock(
-                  withPortableTextLists(
-                    withPortableTextSelections(withEditableAPI(e)),
-                  ),
-                ),
-              ),
-            ),
-          ),
-        ),
-      ),
-      subscribe: () => noop,
-    }
-  }
 
   // Ordering is important here, selection dealing last, data manipulation in the middle and core model stuff first.
-  return {
-    editor: withEventListeners(
-      withSchemaTypes(
-        withObjectKeys(
-          withPortableTextMarkModel(
-            withPortableTextBlockStyle(
-              withPortableTextLists(
-                withPlaceholderBlock(
-                  withUtils(
-                    withMaxBlocks(
-                      withUndoRedo(
-                        withPatches(
-                          withPortableTextSelections(withEditableAPI(e)),
-                        ),
-                      ),
-                    ),
+  return withEventListeners(
+    withSchemaTypes(
+      withObjectKeys(
+        withPortableTextMarkModel(
+          withPortableTextBlockStyle(
+            withPortableTextLists(
+              withPlaceholderBlock(
+                withUtils(
+                  withMaxBlocks(
+                    withUndoRedo(withPatches(withPortableTextSelections(e))),
                   ),
                 ),
               ),
@@ -163,16 +117,5 @@ export const withPlugins = <T extends Editor>(
         ),
       ),
     ),
-    subscribe: () => {
-      const unsubscribes: (() => void)[] = []
-      editor.subscriptions.forEach((subscribeFn) => {
-        unsubscribes.push(subscribeFn())
-      })
-      return () => {
-        unsubscribes.forEach((unsubscribeFn) => {
-          unsubscribeFn()
-        })
-      }
-    },
-  }
+  )
 }

package/src/editor/use-editor.ts

@@ -3,12 +3,16 @@ import type {
   ArraySchemaType,
   PortableTextBlock,
 } from '@sanity/types'
-import {useActorRef} from '@xstate/react'
+import {useActorRef, useSelector} from '@xstate/react'
 import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
 import {compileType} from '../utils/schema'
-import type {Behavior} from './behavior/behavior.types'
+import type {Behavior, PickFromUnion} from './behavior/behavior.types'
 import {compileSchemaDefinition, type SchemaDefinition} from './define-schema'
-import {editorMachine} from './editor-machine'
+import {
+  editorMachine,
+  type EditorActor,
+  type InternalEditorEvent,
+} from './editor-machine'
 import {defaultKeyGenerator} from './key-generator'
 
 /**
@@ -31,27 +35,55 @@ export type EditorConfig = {
 /**
  * @alpha
  */
-export type Editor = ReturnType<typeof useEditor>
+export type EditorEvent = PickFromUnion<
+  InternalEditorEvent,
+  'type',
+  | 'annotation.toggle'
+  | 'focus'
+  | 'patches'
+  | 'toggle readOnly'
+  | 'update behaviors'
+>
 
 /**
  * @alpha
  */
-export function useEditor(config: EditorConfig) {
-  const schema = config.schemaDefinition
-    ? compileSchemaDefinition(config.schemaDefinition)
-    : getPortableTextMemberSchemaTypes(
-        config.schema.hasOwnProperty('jsonType')
-          ? config.schema
-          : compileType(config.schema),
-      )
+export type Editor = {
+  send: (event: EditorEvent) => void
+  on: EditorActor['on']
+  readOnly: boolean
+  _internal: {
+    editorActor: EditorActor
+  }
+}
 
+/**
+ * @alpha
+ */
+export function useEditor(config: EditorConfig): Editor {
   const editorActor = useActorRef(editorMachine, {
     input: {
       behaviors: config.behaviors,
       keyGenerator: config.keyGenerator ?? defaultKeyGenerator,
-      schema,
+      schema: config.schemaDefinition
+        ? compileSchemaDefinition(config.schemaDefinition)
+        : getPortableTextMemberSchemaTypes(
+            config.schema.hasOwnProperty('jsonType')
+              ? config.schema
+              : compileType(config.schema),
+          ),
     },
   })
+  const readOnly = useSelector(editorActor, (s) => s.context.readOnly)
 
-  return editorActor
+  return {
+    send: (event) => {
+      editorActor.send(event)
+    },
+    on: (event, listener) => editorActor.on(event, listener),
+    readOnly,
+    _internal: {
+      editorActor,
+    },
+  }
 }

package/src/editor/withSyncRangeDecorations.ts

@@ -0,0 +1,20 @@
+import type {BaseEditor, Operation} from 'slate'
+import type {ReactEditor} from 'slate-react'
+import type {PortableTextSlateEditor} from '../types/editor'
+
+// React Compiler considers `slateEditor` as immutable, and opts-out if we do this inline in a useEffect, doing it in a function moves it out of the scope, and opts-in again for the rest of the component.
+export function withSyncRangeDecorations(
+  slateEditor: BaseEditor & ReactEditor & PortableTextSlateEditor,
+  syncRangeDecorations: (operation?: Operation) => void,
+) {
+  const originalApply = slateEditor.apply
+  slateEditor.apply = (op: Operation) => {
+    originalApply(op)
+    if (op.type !== 'set_selection') {
+      syncRangeDecorations(op)
+    }
+  }
+  return () => {
+    slateEditor.apply = originalApply
+  }
+}

package/src/index.ts

@@ -25,6 +25,8 @@ export type {PortableTextEditableProps} from './editor/Editable'
 export {
   editorMachine,
   type EditorActor,
+  type InternalEditorEmittedEvent,
+  type InternalEditorEvent,
   type MutationEvent,
   type PatchEvent,
   type PatchesEvent,
@@ -32,8 +34,14 @@ export {
 export {usePortableTextEditor} from './editor/hooks/usePortableTextEditor'
 export {usePortableTextEditorSelection} from './editor/hooks/usePortableTextEditorSelection'
 export {defaultKeyGenerator as keyGenerator} from './editor/key-generator'
+export type {AddedAnnotationPaths} from './editor/plugins/createWithEditableAPI'
 export {PortableTextEditor} from './editor/PortableTextEditor'
 export type {PortableTextEditorProps} from './editor/PortableTextEditor'
-export {useEditor, type Editor, type EditorConfig} from './editor/use-editor'
+export {
+  useEditor,
+  type Editor,
+  type EditorConfig,
+  type EditorEvent,
+} from './editor/use-editor'
 export * from './types/editor'
 export * from './types/options'

package/src/types/editor.ts

@@ -133,7 +133,6 @@ export interface PortableTextSlateEditor extends ReactEditor {
   isTextBlock: (value: unknown) => value is PortableTextTextBlock
   isTextSpan: (value: unknown) => value is PortableTextSpan
   isListBlock: (value: unknown) => value is PortableTextListBlock
-  subscriptions: (() => () => void)[]
 
   /**
    * Increments selected list items levels, or decrements them if `reverse` is true.

package/src/types/options.ts

@@ -7,9 +7,7 @@ import type {PortableTextEditor} from '../editor/PortableTextEditor'
  */
 export type createEditorOptions = {
   editorActor: EditorActor
-  portableTextEditor: PortableTextEditor
-  readOnly: boolean
-  maxBlocks?: number
+  subscriptions: Array<() => () => void>
 }
 
 /**

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

@@ -2,34 +2,27 @@ import type {PortableTextTextBlock} from '@sanity/types'
 import {createEditor, type Descendant} from 'slate'
 import {beforeEach, describe, expect, it} from 'vitest'
 import {createActor} from 'xstate'
-import {
-  editorMachine,
-  PortableTextEditor,
-  type PortableTextEditorProps,
-} from '../..'
+import {editorMachine} from '../..'
 import {schemaType} from '../../editor/__tests__/PortableTextEditorTester'
 import {coreBehaviors} from '../../editor/behavior/behavior.core'
 import {defaultKeyGenerator} from '../../editor/key-generator'
-import {withPlugins} from '../../editor/plugins'
+import {withPlugins} from '../../editor/plugins/with-plugins'
 import {getPortableTextMemberSchemaTypes} from '../getPortableTextMemberSchemaTypes'
 import {createOperationToPatches} from '../operationToPatches'
 
-const portableTextFeatures = getPortableTextMemberSchemaTypes(schemaType)
+const schemaTypes = getPortableTextMemberSchemaTypes(schemaType)
 
-const operationToPatches = createOperationToPatches(portableTextFeatures)
+const operationToPatches = createOperationToPatches(schemaTypes)
 
-const {editor} = withPlugins(createEditor(), {
+const editor = withPlugins(createEditor(), {
   editorActor: createActor(editorMachine, {
     input: {
       behaviors: coreBehaviors,
-      schema: schemaType,
+      schema: schemaTypes,
       keyGenerator: defaultKeyGenerator,
     },
   }),
-  portableTextEditor: new PortableTextEditor({
-    schemaType,
-  } as PortableTextEditorProps),
-  readOnly: false,
+  subscriptions: [],
 })
 
 const createDefaultValue = () =>

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

@@ -1,13 +1,12 @@
 import type {Patch} from '@portabletext/patches'
-import {noop} from 'lodash'
 import {createEditor, type Descendant} from 'slate'
 import {beforeEach, describe, expect, it} from 'vitest'
 import {createActor} from 'xstate'
-import {editorMachine, PortableTextEditor} from '../..'
+import {editorMachine} from '../..'
 import {schemaType} from '../../editor/__tests__/PortableTextEditorTester'
 import {coreBehaviors} from '../../editor/behavior/behavior.core'
 import {defaultKeyGenerator} from '../../editor/key-generator'
-import {withPlugins} from '../../editor/plugins'
+import {withPlugins} from '../../editor/plugins/with-plugins'
 import {createApplyPatch} from '../applyPatch'
 import {getPortableTextMemberSchemaTypes} from '../getPortableTextMemberSchemaTypes'
 import {VOID_CHILD_KEY} from '../values'
@@ -15,9 +14,8 @@ import {VOID_CHILD_KEY} from '../values'
 const schemaTypes = getPortableTextMemberSchemaTypes(schemaType)
 
 const patchToOperations = createApplyPatch(schemaTypes)
-const portableTextEditor = new PortableTextEditor({schemaType, onChange: noop})
 
-const {editor} = withPlugins(createEditor(), {
+const editor = withPlugins(createEditor(), {
   editorActor: createActor(editorMachine, {
     input: {
       behaviors: coreBehaviors,
@@ -25,8 +23,7 @@ const {editor} = withPlugins(createEditor(), {
       keyGenerator: defaultKeyGenerator,
     },
   }),
-  portableTextEditor,
-  readOnly: false,
+  subscriptions: [],
 })
 
 const createDefaultValue = (): Descendant[] => [