@portabletext/editor 1.3.0 → 1.4.0

package/src/editor/components/Synchronizer.tsx

@@ -1,7 +1,7 @@
 import type {Patch} from '@portabletext/patches'
 import type {PortableTextBlock} from '@sanity/types'
 import {throttle} from 'lodash'
-import {useCallback, useEffect, useMemo, useRef} from 'react'
+import {useCallback, useEffect, useRef} from 'react'
 import {Editor} from 'slate'
 import {useSlate} from 'slate-react'
 import {useEffectEvent} from 'use-effect-event'
@@ -69,26 +69,6 @@ export function Synchronizer(props: SynchronizerProps) {
     IS_PROCESSING_LOCAL_CHANGES.set(slateEditor, false)
   }, [editorActor, slateEditor, getValue])
 
-  const onFlushPendingPatchesThrottled = useMemo(() => {
-    return throttle(
-      () => {
-        // If the editor is normalizing (each operation) it means that it's not in the middle of a bigger transform,
-        // and we can flush these changes immediately.
-        if (Editor.isNormalizing(slateEditor)) {
-          onFlushPendingPatches()
-          return
-        }
-        // If it's in the middle of something, try again.
-        onFlushPendingPatchesThrottled()
-      },
-      FLUSH_PATCHES_THROTTLED_MS,
-      {
-        leading: false,
-        trailing: true,
-      },
-    )
-  }, [onFlushPendingPatches, slateEditor])
-
   // Flush pending patches immediately on unmount
   useEffect(() => {
     return () => {
@@ -106,6 +86,24 @@ export function Synchronizer(props: SynchronizerProps) {
 
   // Subscribe to, and handle changes from the editor
   useEffect(() => {
+    const onFlushPendingPatchesThrottled = throttle(
+      () => {
+        // If the editor is normalizing (each operation) it means that it's not in the middle of a bigger transform,
+        // and we can flush these changes immediately.
+        if (Editor.isNormalizing(slateEditor)) {
+          onFlushPendingPatches()
+          return
+        }
+        // If it's in the middle of something, try again.
+        onFlushPendingPatchesThrottled()
+      },
+      FLUSH_PATCHES_THROTTLED_MS,
+      {
+        leading: false,
+        trailing: true,
+      },
+    )
+
     debug('Subscribing to editor changes')
     const sub = editorActor.on('*', (event) => {
       switch (event.type) {
@@ -150,6 +148,9 @@ export function Synchronizer(props: SynchronizerProps) {
           })
           break
         }
+        case 'patches': {
+          break
+        }
         default:
           handleChange(event)
       }
@@ -158,7 +159,7 @@ export function Synchronizer(props: SynchronizerProps) {
       debug('Unsubscribing to changes')
       sub.unsubscribe()
     }
-  }, [handleChange, editorActor, onFlushPendingPatchesThrottled, slateEditor])
+  }, [editorActor, handleChange, onFlushPendingPatches, slateEditor])
 
   // Sync the value when going online
   const handleOnline = useCallback(() => {
@@ -168,16 +169,12 @@ export function Synchronizer(props: SynchronizerProps) {
 
   // Notify about window online and offline status changes
   useEffect(() => {
-    const subscription = editorActor.on('online', () => {
-      if (portableTextEditor.props.patches$) {
-        handleOnline()
-      }
-    })
+    const subscription = editorActor.on('online', handleOnline)
 
     return () => {
       subscription.unsubscribe()
     }
-  }, [handleOnline, editorActor, portableTextEditor.props.patches$])
+  }, [handleOnline, editorActor])
 
   // This hook must be set up after setting up the subscription above, or it will not pick up validation errors from the useSyncValue hook.
   // This will cause the editor to not be able to signal a validation error and offer invalid value resolution of the initial value.

package/src/editor/editor-machine.ts

@@ -21,6 +21,7 @@ import {toPortableTextRange} from '../utils/ranges'
 import {fromSlateValue} from '../utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../utils/weakMaps'
 import {performAction, performDefaultAction} from './behavior/behavior.actions'
+import {coreBehaviors} from './behavior/behavior.core'
 import type {
   Behavior,
   BehaviorAction,
@@ -56,6 +57,15 @@ const networkLogic = fromCallback(({sendBack}) => {
  */
 export type PatchEvent = {type: 'patch'; patch: Patch}
 
+/**
+ * @internal
+ */
+export type PatchesEvent = {
+  type: 'patches'
+  patches: Array<Patch>
+  snapshot: Array<PortableTextBlock> | undefined
+}
+
 /**
  * @internal
  */
@@ -82,11 +92,16 @@ type EditorEvent =
       type: 'update schema'
       schema: PortableTextMemberSchemaTypes
     }
+  | {
+      type: 'update behaviors'
+      behaviors: Array<Behavior>
+    }
   | EditorEmittedEvent
 
 type EditorEmittedEvent =
   | {type: 'ready'}
   | PatchEvent
+  | PatchesEvent
   | MutationEvent
   | {
       type: 'unset'
@@ -129,12 +144,18 @@ export const editorMachine = setup({
     events: {} as EditorEvent,
     emitted: {} as EditorEmittedEvent,
     input: {} as {
-      behaviors: Array<Behavior>
+      behaviors?: Array<Behavior>
       keyGenerator: () => string
       schema: PortableTextMemberSchemaTypes
     },
   },
   actions: {
+    'assign behaviors': assign({
+      behaviors: ({event}) => {
+        assertEvent(event, 'update behaviors')
+        return [...coreBehaviors, ...event.behaviors]
+      },
+    }),
     'assign schema': assign({
       schema: ({event}) => {
         assertEvent(event, 'update schema')
@@ -253,7 +274,9 @@ export const editorMachine = setup({
 }).createMachine({
   id: 'editor',
   context: ({input}) => ({
-    behaviors: input.behaviors,
+    behaviors: input.behaviors
+      ? [...coreBehaviors, ...input.behaviors]
+      : coreBehaviors,
     keyGenerator: input.keyGenerator,
     pendingEvents: [],
     schema: input.schema,
@@ -274,7 +297,9 @@ export const editorMachine = setup({
     'online': {actions: emit({type: 'online'})},
     'offline': {actions: emit({type: 'offline'})},
     'loading': {actions: emit({type: 'loading'})},
+    'patches': {actions: emit(({event}) => event)},
     'done loading': {actions: emit({type: 'done loading'})},
+    'update behaviors': {actions: 'assign behaviors'},
     'update schema': {actions: 'assign schema'},
     'behavior event': {actions: 'handle behavior event'},
     'behavior action intends': {

package/src/editor/plugins/createWithPatches.ts

@@ -13,7 +13,6 @@ import {
   type SplitNodeOperation,
 } from 'slate'
 import type {
-  PatchObservable,
   PortableTextMemberSchemaTypes,
   PortableTextSlateEditor,
 } from '../../types/editor'
@@ -81,7 +80,6 @@ export interface PatchFunctions {
 
 interface Options {
   editorActor: EditorActor
-  patches$?: PatchObservable
   patchFunctions: PatchFunctions
   readOnly: boolean
   schemaTypes: PortableTextMemberSchemaTypes
@@ -89,7 +87,6 @@ interface Options {
 
 export function createWithPatches({
   editorActor,
-  patches$,
   patchFunctions,
   readOnly,
   schemaTypes,
@@ -143,16 +140,14 @@ export function createWithPatches({
       handleBufferedRemotePatches()
     }
 
-    if (patches$) {
-      editor.subscriptions.push(() => {
-        debug('Subscribing to patches$')
-        const sub = patches$.subscribe(handlePatches)
-        return () => {
-          debug('Unsubscribing to patches$')
-          sub.unsubscribe()
-        }
-      })
-    }
+    editor.subscriptions.push(() => {
+      debug('Subscribing to remote patches')
+      const sub = editorActor.on('patches', handlePatches)
+      return () => {
+        debug('Unsubscribing to remote patches')
+        sub.unsubscribe()
+      }
+    })
 
     editor.apply = (operation: Operation): void | Editor => {
       if (readOnly) {

package/src/editor/plugins/createWithUndoRedo.ts

@@ -20,7 +20,7 @@ import {
   type Descendant,
   type SelectionOperation,
 } from 'slate'
-import type {PatchObservable, PortableTextSlateEditor} from '../../types/editor'
+import type {PortableTextSlateEditor} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {fromSlateValue} from '../../utils/values'
 import {
@@ -29,6 +29,7 @@ import {
   withRedoing,
   withUndoing,
 } from '../../utils/withUndoRedo'
+import type {EditorActor} from '../editor-machine'
 
 const debug = debugWithName('plugin:withUndoRedo')
 const debugVerbose = debug.enabled && false
@@ -51,7 +52,7 @@ const isSaving = (editor: Editor): boolean | undefined => {
 }
 
 export interface Options {
-  patches$?: PatchObservable
+  editorActor: EditorActor
   readOnly: boolean
   blockSchemaType: ObjectSchemaType
 }
@@ -66,7 +67,7 @@ const getRemotePatches = (editor: Editor) => {
 export function createWithUndoRedo(
   options: Options,
 ): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
-  const {readOnly, patches$, blockSchemaType} = options
+  const {editorActor, readOnly, blockSchemaType} = options
 
   return (editor: PortableTextSlateEditor) => {
     let previousSnapshot: PortableTextBlock[] | undefined = fromSlateValue(
@@ -74,39 +75,39 @@ export function createWithUndoRedo(
       blockSchemaType.name,
     )
     const remotePatches = getRemotePatches(editor)
-    if (patches$) {
-      editor.subscriptions.push(() => {
-        debug('Subscribing to patches')
-        const sub = patches$.subscribe(({patches, snapshot}) => {
-          let reset = false
-          patches.forEach((patch) => {
-            if (!reset && patch.origin !== 'local' && remotePatches) {
-              if (patch.type === 'unset' && patch.path.length === 0) {
-                debug(
-                  'Someone else cleared the content, resetting undo/redo history',
-                )
-                editor.history = {undos: [], redos: []}
-                remotePatches.splice(0, remotePatches.length)
-                SAVING.set(editor, true)
-                reset = true
-                return
-              }
-              remotePatches.push({
-                patch,
-                time: new Date(),
-                snapshot,
-                previousSnapshot,
-              })
+
+    editor.subscriptions.push(() => {
+      debug('Subscribing to patches')
+      const sub = editorActor.on('patches', ({patches, snapshot}) => {
+        let reset = false
+        patches.forEach((patch) => {
+          if (!reset && patch.origin !== 'local' && remotePatches) {
+            if (patch.type === 'unset' && patch.path.length === 0) {
+              debug(
+                'Someone else cleared the content, resetting undo/redo history',
+              )
+              editor.history = {undos: [], redos: []}
+              remotePatches.splice(0, remotePatches.length)
+              SAVING.set(editor, true)
+              reset = true
+              return
             }
-          })
-          previousSnapshot = snapshot
+            remotePatches.push({
+              patch,
+              time: new Date(),
+              snapshot,
+              previousSnapshot,
+            })
+          }
         })
-        return () => {
-          debug('Unsubscribing to patches')
-          sub.unsubscribe()
-        }
+        previousSnapshot = snapshot
       })
-    }
+      return () => {
+        debug('Unsubscribing to patches')
+        sub.unsubscribe()
+      }
+    })
+
     editor.history = {undos: [], redos: []}
     const {apply} = editor
     editor.apply = (op: Operation) => {

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 {editorActor, portableTextEditor, patches$, readOnly, maxBlocks} =
-    options
+  const {editorActor, portableTextEditor, readOnly, maxBlocks} = options
   const {schemaTypes} = portableTextEditor
   e.subscriptions = []
   if (e.destroy) {
@@ -75,7 +74,6 @@ export const withPlugins = <T extends Editor>(
   )
   const withPatches = createWithPatches({
     editorActor,
-    patches$,
     patchFunctions: operationToPatches,
     readOnly,
     schemaTypes,
@@ -83,8 +81,8 @@ export const withPlugins = <T extends Editor>(
   const withMaxBlocks = createWithMaxBlocks(maxBlocks || -1)
   const withPortableTextLists = createWithPortableTextLists(schemaTypes)
   const withUndoRedo = createWithUndoRedo({
+    editorActor,
     readOnly,
-    patches$,
     blockSchemaType: schemaTypes.block,
   })
   const withPortableTextMarkModel = createWithPortableTextMarkModel(

package/src/editor/use-editor.ts

@@ -0,0 +1,45 @@
+import type {
+  ArrayDefinition,
+  ArraySchemaType,
+  PortableTextBlock,
+} from '@sanity/types'
+import {useActorRef} from '@xstate/react'
+import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
+import {compileType} from '../utils/schema'
+import type {Behavior} from './behavior/behavior.types'
+import {editorMachine} from './editor-machine'
+import {defaultKeyGenerator} from './key-generator'
+
+/**
+ * @alpha
+ */
+export type EditorConfig = {
+  behaviors?: Array<Behavior>
+  keyGenerator?: () => string
+  schema: ArraySchemaType<PortableTextBlock> | ArrayDefinition
+}
+
+/**
+ * @alpha
+ */
+export type Editor = ReturnType<typeof useEditor>
+
+/**
+ * @alpha
+ */
+export function useEditor(config: EditorConfig) {
+  const schema = getPortableTextMemberSchemaTypes(
+    config.schema.hasOwnProperty('jsonType')
+      ? config.schema
+      : compileType(config.schema),
+  )
+  const editorActor = useActorRef(editorMachine, {
+    input: {
+      behaviors: config.behaviors,
+      keyGenerator: config.keyGenerator ?? defaultKeyGenerator,
+      schema,
+    },
+  })
+
+  return editorActor
+}

package/src/index.ts

@@ -1,13 +1,18 @@
 export type {Patch} from '@portabletext/patches'
-export type {
-  Behavior,
-  BehaviorActionIntend,
-  BehaviorContext,
-  BehaviorEvent,
-  BehaviorGuard,
-  PickFromUnion,
-  BehaviorActionIntendSet,
+export {
+  type Behavior,
+  type BehaviorActionIntend,
+  type BehaviorContext,
+  type BehaviorEvent,
+  type BehaviorGuard,
+  type PickFromUnion,
+  type BehaviorActionIntendSet,
+  defineBehavior,
 } from './editor/behavior/behavior.types'
+export {
+  createMarkdownBehaviors,
+  type MarkdownBehaviorsConfig,
+} from './editor/behavior/behavior.markdown'
 export {PortableTextEditable} from './editor/Editable'
 export type {PortableTextEditableProps} from './editor/Editable'
 export {
@@ -15,11 +20,13 @@ export {
   type EditorActor,
   type MutationEvent,
   type PatchEvent,
+  type PatchesEvent,
 } from './editor/editor-machine'
 export {usePortableTextEditor} from './editor/hooks/usePortableTextEditor'
 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 {useEditor, type Editor, type EditorConfig} from './editor/use-editor'
 export * from './types/editor'
 export * from './types/options'

package/src/types/options.ts

@@ -1,14 +1,12 @@
 import type {BaseSyntheticEvent} from 'react'
 import type {EditorActor} from '../editor/editor-machine'
 import type {PortableTextEditor} from '../editor/PortableTextEditor'
-import type {PatchObservable} from './editor'
 
 /**
  * @internal
  */
 export type createEditorOptions = {
   editorActor: EditorActor
-  patches$?: PatchObservable
   portableTextEditor: PortableTextEditor
   readOnly: boolean
   maxBlocks?: number