@portabletext/editor 1.10.0 → 1.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

package/src/editor/PortableTextEditor.tsx

@@ -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({

package/src/editor/editor-machine.ts

@@ -46,12 +46,16 @@ const networkLogic = fromCallback(({sendBack}) => {
     sendBack({type: 'offline'})
   }
 
-  window.addEventListener('online', onlineHandler)
-  window.addEventListener('offline', offlineHandler)
+  if (window) {
+    window.addEventListener('online', onlineHandler)
+    window.addEventListener('offline', offlineHandler)
+  }
 
   return () => {
-    window.removeEventListener('online', onlineHandler)
-    window.removeEventListener('offline', offlineHandler)
+    if (window) {
+      window.removeEventListener('online', onlineHandler)
+      window.removeEventListener('offline', offlineHandler)
+    }
   }
 })
 
@@ -102,6 +106,10 @@ export type InternalEditorEvent =
       type: 'update behaviors'
       behaviors: Array<Behavior>
     }
+  | {
+      type: 'update value'
+      value: Array<PortableTextBlock> | undefined
+    }
   | {
       type: 'toggle readOnly'
     }
@@ -163,6 +171,7 @@ export const editorMachine = setup({
       schema: PortableTextMemberSchemaTypes
       readOnly: boolean
       maxBlocks: number | undefined
+      value: Array<PortableTextBlock> | undefined
     },
     events: {} as InternalEditorEvent,
     emitted: {} as InternalEditorEmittedEvent,
@@ -170,6 +179,7 @@ export const editorMachine = setup({
       behaviors?: Array<Behavior>
       keyGenerator: () => string
       schema: PortableTextMemberSchemaTypes
+      value?: Array<PortableTextBlock>
     },
   },
   actions: {
@@ -315,6 +325,7 @@ export const editorMachine = setup({
     schema: input.schema,
     readOnly: false,
     maxBlocks: undefined,
+    value: input.value,
   }),
   invoke: {
     id: 'networkLogic',
@@ -352,6 +363,7 @@ export const editorMachine = setup({
     '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})