@portabletext/editor 1.3.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -67,7 +67,7 @@
     "@sanity/ui": "^2.8.17",
     "@sanity/util": "^3.62.3",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/debug": "^4.1.5",

package/src/editor/PortableTextEditor.tsx

@@ -9,7 +9,12 @@ import type {
   PortableTextObject,
   SpanSchemaType,
 } from '@sanity/types'
-import {Component, type MutableRefObject, type PropsWithChildren} from 'react'
+import {
+  Component,
+  useEffect,
+  type MutableRefObject,
+  type PropsWithChildren,
+} from 'react'
 import {Subject} from 'rxjs'
 import {createActor} from 'xstate'
 import type {
@@ -181,38 +186,45 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
     const readOnly = Boolean(this.props.readOnly)
 
     return (
-      <EditorActorContext.Provider value={this.editorActor}>
-        <SlateContainer
-          editorActor={this.editorActor}
-          maxBlocks={maxBlocks}
-          patches$={_patches$}
-          portableTextEditor={this}
-          readOnly={readOnly}
-        >
-          <PortableTextEditorContext.Provider value={this}>
-            <PortableTextEditorReadOnlyContext.Provider value={readOnly}>
-              <PortableTextEditorSelectionProvider
-                editorActor={this.editorActor}
-              >
-                <Synchronizer
+      <>
+        {_patches$ ? (
+          <RoutePatchesObservableToEditorActor
+            editorActor={this.editorActor}
+            patches$={_patches$}
+          />
+        ) : null}
+        <EditorActorContext.Provider value={this.editorActor}>
+          <SlateContainer
+            editorActor={this.editorActor}
+            maxBlocks={maxBlocks}
+            portableTextEditor={this}
+            readOnly={readOnly}
+          >
+            <PortableTextEditorContext.Provider value={this}>
+              <PortableTextEditorReadOnlyContext.Provider value={readOnly}>
+                <PortableTextEditorSelectionProvider
                   editorActor={this.editorActor}
-                  getValue={this.getValue}
-                  onChange={(change) => {
-                    this.props.onChange(change)
-                    /**
-                     * For backwards compatibility, we relay all changes to the
-                     * `change$` Subject as well.
-                     */
-                    this.change$.next(change)
-                  }}
-                  value={value}
-                />
-                {children}
-              </PortableTextEditorSelectionProvider>
-            </PortableTextEditorReadOnlyContext.Provider>
-          </PortableTextEditorContext.Provider>
-        </SlateContainer>
-      </EditorActorContext.Provider>
+                >
+                  <Synchronizer
+                    editorActor={this.editorActor}
+                    getValue={this.getValue}
+                    onChange={(change) => {
+                      this.props.onChange(change)
+                      /**
+                       * For backwards compatibility, we relay all changes to the
+                       * `change$` Subject as well.
+                       */
+                      this.change$.next(change)
+                    }}
+                    value={value}
+                  />
+                  {children}
+                </PortableTextEditorSelectionProvider>
+              </PortableTextEditorReadOnlyContext.Provider>
+            </PortableTextEditorContext.Provider>
+          </SlateContainer>
+        </EditorActorContext.Provider>
+      </>
     )
   }
 
@@ -378,3 +390,23 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
     return editor.editable?.isSelectionsOverlapping(selectionA, selectionB)
   }
 }
+
+function RoutePatchesObservableToEditorActor(props: {
+  editorActor: EditorActor
+  patches$: PatchObservable
+}) {
+  useEffect(() => {
+    const subscription = props.patches$.subscribe((payload) => {
+      props.editorActor.send({
+        type: 'patches',
+        ...payload,
+      })
+    })
+
+    return () => {
+      subscription.unsubscribe()
+    }
+  }, [props.editorActor, props.patches$])
+
+  return null
+}

package/src/editor/components/SlateContainer.tsx

@@ -1,7 +1,6 @@
 import {useEffect, useMemo, useState, type PropsWithChildren} from 'react'
 import {createEditor} from 'slate'
 import {Slate, withReact} from 'slate-react'
-import type {PatchObservable} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {KEY_TO_SLATE_ELEMENT, KEY_TO_VALUE_ELEMENT} from '../../utils/weakMaps'
 import type {EditorActor} from '../editor-machine'
@@ -16,7 +15,6 @@ const debug = debugWithName('component:PortableTextEditor:SlateContainer')
 export interface SlateContainerProps extends PropsWithChildren {
   editorActor: EditorActor
   maxBlocks: number | undefined
-  patches$?: PatchObservable
   portableTextEditor: PortableTextEditor
   readOnly: boolean
 }
@@ -26,7 +24,7 @@ export interface SlateContainerProps extends PropsWithChildren {
  * @internal
  */
 export function SlateContainer(props: SlateContainerProps) {
-  const {editorActor, patches$, portableTextEditor, readOnly, maxBlocks} = props
+  const {editorActor, portableTextEditor, readOnly, maxBlocks} = props
 
   // Create the slate instance, using `useState` ensures setup is only run once, initially
   const [[slateEditor, subscribe]] = useState(() => {
@@ -34,7 +32,6 @@ export function SlateContainer(props: SlateContainerProps) {
     const {editor, subscribe: _sub} = withPlugins(withReact(createEditor()), {
       editorActor,
       maxBlocks,
-      patches$,
       portableTextEditor,
       readOnly,
     })
@@ -56,18 +53,10 @@ export function SlateContainer(props: SlateContainerProps) {
     withPlugins(slateEditor, {
       editorActor,
       maxBlocks,
-      patches$,
       portableTextEditor,
       readOnly,
     })
-  }, [
-    editorActor,
-    portableTextEditor,
-    maxBlocks,
-    readOnly,
-    patches$,
-    slateEditor,
-  ])
+  }, [editorActor, portableTextEditor, maxBlocks, readOnly, slateEditor])
 
   const initialValue = useMemo(() => {
     return [slateEditor.pteCreateTextBlock({decorators: []})]

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

@@ -56,6 +56,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
  */
@@ -87,6 +96,7 @@ type EditorEvent =
 type EditorEmittedEvent =
   | {type: 'ready'}
   | PatchEvent
+  | PatchesEvent
   | MutationEvent
   | {
       type: 'unset'
@@ -274,6 +284,7 @@ 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 schema': {actions: 'assign schema'},
     'behavior event': {actions: 'handle behavior event'},

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/index.ts

@@ -15,6 +15,7 @@ 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'

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