@portabletext/editor 1.10.0 → 1.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -49,7 +49,7 @@
     "is-hotkey-esm": "^1.0.0",
     "lodash": "^4.17.21",
     "lodash.startcase": "^4.4.0",
-    "react-compiler-runtime": "19.0.0-beta-a7bf2bd-20241110",
+    "react-compiler-runtime": "19.0.0-beta-0dec889-20241115",
     "slate": "0.110.2",
     "slate-dom": "^0.111.0",
     "slate-react": "0.111.0",
@@ -74,9 +74,9 @@
     "@typescript-eslint/parser": "^8.14.0",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/browser": "^2.1.5",
-    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
+    "babel-plugin-react-compiler": "19.0.0-beta-0dec889-20241115",
     "eslint": "8.57.1",
-    "eslint-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
+    "eslint-plugin-react-compiler": "19.0.0-beta-0dec889-20241115",
     "eslint-plugin-react-hooks": "^5.0.0",
     "jsdom": "^25.0.1",
     "react": "^18.3.1",

package/src/editor/PortableTextEditor.tsx

@@ -50,7 +50,7 @@ const debug = debugWithName('component:PortableTextEditor')
 export type PortableTextEditorProps<
   TEditor extends Editor | undefined = undefined,
 > = PropsWithChildren<
-  (TEditor extends Editor
+  TEditor extends Editor
     ? {
         /**
          * @alpha
@@ -94,17 +94,17 @@ export type PortableTextEditorProps<
          * Whether or not the editor should be in read-only mode
          */
         readOnly?: boolean
-      }) & {
-    /**
-     * The current value of the portable text field
-     */
-    value?: PortableTextBlock[]
-
-    /**
-     * A ref to the editor instance
-     */
-    editorRef?: MutableRefObject<PortableTextEditor | null>
-  }
+
+        /**
+         * The current value of the portable text field
+         */
+        value?: PortableTextBlock[]
+
+        /**
+         * A ref to the editor instance
+         */
+        editorRef?: MutableRefObject<PortableTextEditor | null>
+      }
 >
 
 /**
@@ -160,6 +160,7 @@ export class PortableTextEditor extends Component<
         input: {
           keyGenerator: props.keyGenerator || defaultKeyGenerator,
           schema: this.schemaTypes,
+          value: props.value,
         },
       })
       this.editorActor.start()
@@ -225,10 +226,20 @@ export class PortableTextEditor extends Component<
               : Number.parseInt(this.props.maxBlocks.toString(), 10),
         })
       }
-    }
 
-    if (this.props.editorRef !== prevProps.editorRef && this.props.editorRef) {
-      this.props.editorRef.current = this
+      if (this.props.value !== prevProps.value) {
+        this.editorActor.send({
+          type: 'update value',
+          value: this.props.value,
+        })
+      }
+
+      if (
+        this.props.editorRef !== prevProps.editorRef &&
+        this.props.editorRef
+      ) {
+        this.props.editorRef.current = this
+      }
     }
   }
 
@@ -279,7 +290,6 @@ export class PortableTextEditor extends Component<
                      */
                     this.change$.next(change)
                   }}
-                  value={this.props.value}
                 />
                 {this.props.children}
               </PortableTextEditorSelectionProvider>

package/src/editor/components/Synchronizer.tsx

@@ -27,7 +27,6 @@ export interface SynchronizerProps {
   editorActor: EditorActor
   getValue: () => Array<PortableTextBlock> | undefined
   onChange: (change: EditorChange) => void
-  value: Array<PortableTextBlock> | undefined
 }
 
 /**
@@ -37,7 +36,8 @@ export interface SynchronizerProps {
 export function Synchronizer(props: SynchronizerProps) {
   const portableTextEditor = usePortableTextEditor()
   const readOnly = useSelector(props.editorActor, (s) => s.context.readOnly)
-  const {editorActor, getValue, onChange, value} = props
+  const value = useSelector(props.editorActor, (s) => s.context.value)
+  const {editorActor, getValue, onChange} = props
   const pendingPatches = useRef<Patch[]>([])
 
   const syncValue = useSyncValue({
@@ -125,14 +125,6 @@ export function Synchronizer(props: SynchronizerProps) {
           handleChange({type: 'focus', event: event.event})
           break
         }
-        case 'offline': {
-          handleChange({type: 'connection', value: 'offline'})
-          break
-        }
-        case 'online': {
-          handleChange({type: 'connection', value: 'online'})
-          break
-        }
         case 'value changed': {
           handleChange({type: 'value', value: event.value})
           break
@@ -168,21 +160,6 @@ export function Synchronizer(props: SynchronizerProps) {
     }
   }, [editorActor, handleChange, onFlushPendingPatches, slateEditor])
 
-  // Sync the value when going online
-  const handleOnline = useCallback(() => {
-    debug('Editor is online, syncing from props.value')
-    syncValue(value)
-  }, [syncValue, value])
-
-  // Notify about window online and offline status changes
-  useEffect(() => {
-    const subscription = editorActor.on('online', handleOnline)
-
-    return () => {
-      subscription.unsubscribe()
-    }
-  }, [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.
   const isInitialValueFromProps = useRef(true)

package/src/editor/editor-machine.ts

@@ -7,7 +7,6 @@ import {
   assign,
   emit,
   enqueueActions,
-  fromCallback,
   setup,
   type ActorRefFrom,
 } from 'xstate'
@@ -38,23 +37,6 @@ export * from 'xstate/guards'
  */
 export type EditorActor = ActorRefFrom<typeof editorMachine>
 
-const networkLogic = fromCallback(({sendBack}) => {
-  const onlineHandler = () => {
-    sendBack({type: 'online'})
-  }
-  const offlineHandler = () => {
-    sendBack({type: 'offline'})
-  }
-
-  window.addEventListener('online', onlineHandler)
-  window.addEventListener('offline', offlineHandler)
-
-  return () => {
-    window.removeEventListener('online', onlineHandler)
-    window.removeEventListener('offline', offlineHandler)
-  }
-})
-
 /**
  * @internal
  */
@@ -102,6 +84,10 @@ export type InternalEditorEvent =
       type: 'update behaviors'
       behaviors: Array<Behavior>
     }
+  | {
+      type: 'update value'
+      value: Array<PortableTextBlock> | undefined
+    }
   | {
       type: 'toggle readOnly'
     }
@@ -141,8 +127,6 @@ export type InternalEditorEmittedEvent =
   | {type: 'selection'; selection: EditorSelection}
   | {type: 'blur'; event: FocusEvent<HTMLDivElement, Element>}
   | {type: 'focused'; event: FocusEvent<HTMLDivElement, Element>}
-  | {type: 'online'}
-  | {type: 'offline'}
   | {type: 'loading'}
   | {type: 'done loading'}
   | PickFromUnion<
@@ -163,6 +147,7 @@ export const editorMachine = setup({
       schema: PortableTextMemberSchemaTypes
       readOnly: boolean
       maxBlocks: number | undefined
+      value: Array<PortableTextBlock> | undefined
     },
     events: {} as InternalEditorEvent,
     emitted: {} as InternalEditorEmittedEvent,
@@ -170,6 +155,7 @@ export const editorMachine = setup({
       behaviors?: Array<Behavior>
       keyGenerator: () => string
       schema: PortableTextMemberSchemaTypes
+      value?: Array<PortableTextBlock>
     },
   },
   actions: {
@@ -303,9 +289,6 @@ export const editorMachine = setup({
       }
     }),
   },
-  actors: {
-    networkLogic,
-  },
 }).createMachine({
   id: 'editor',
   context: ({input}) => ({
@@ -315,11 +298,8 @@ export const editorMachine = setup({
     schema: input.schema,
     readOnly: false,
     maxBlocks: undefined,
+    value: input.value,
   }),
-  invoke: {
-    id: 'networkLogic',
-    src: 'networkLogic',
-  },
   on: {
     'annotation.add': {
       actions: emit(({event}) => event),
@@ -345,13 +325,12 @@ export const editorMachine = setup({
     'selection': {actions: emit(({event}) => event)},
     'blur': {actions: emit(({event}) => event)},
     'focused': {actions: emit(({event}) => event)},
-    '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'},
+    'update value': {actions: assign({value: ({event}) => event.value})},
     'toggle readOnly': {
       actions: assign({readOnly: ({context}) => !context.readOnly}),
     },

package/src/editor/use-editor.ts

@@ -22,6 +22,7 @@ import {defaultKeyGenerator} from './key-generator'
 export type EditorConfig = {
   behaviors?: Array<Behavior>
   keyGenerator?: () => string
+  initialValue?: Array<PortableTextBlock>
 } & (
   | {
       schemaDefinition: SchemaDefinition
@@ -44,6 +45,7 @@ export type EditorEvent = PickFromUnion<
   | 'patches'
   | 'toggle readOnly'
   | 'update behaviors'
+  | 'update value'
 >
 
 /**
@@ -74,6 +76,7 @@ export function useEditor(config: EditorConfig): Editor {
               ? config.schema
               : compileType(config.schema),
           ),
+      value: config.initialValue,
     },
   })
   const slateEditor = createSlateEditor({editorActor})