fix(useEditor): allow configure of initial readOnly and remove Editor…

….readOnly

apps/playground/src/editor.tsx

@@ -55,6 +55,7 @@ export function Editor(props: {editorRef: EditorActorRef}) {
     props.editorRef,
     (s) => s.context.keyGenerator,
   )
+  const [readOnly, setReadOnly] = useState(false)
   const editor = useEditor({
     behaviors: [
       ...coreBehaviors,
@@ -85,6 +86,7 @@ export function Editor(props: {editorRef: EditorActorRef}) {
       }),
     ],
     keyGenerator,
+    readOnly,
     schemaDefinition,
   })
   const patchesReceived = useSelector(props.editorRef, (s) =>
@@ -114,6 +116,9 @@ export function Editor(props: {editorRef: EditorActorRef}) {
       if (event.type === 'done loading') {
         setLoading(false)
       }
+      if (event.type === 'readOnly toggled') {
+        setReadOnly(event.readOnly)
+      }
     })
 
     return () => {
@@ -197,7 +202,7 @@ export function Editor(props: {editorRef: EditorActorRef}) {
                 <Tooltip>Remove editor</Tooltip>
               </TooltipTrigger>
               <Switch
-                isSelected={editor.readOnly}
+                isSelected={readOnly}
                 onChange={() => {
                   editor.send({type: 'toggle readOnly'})
                 }}

packages/editor/src/editor/PortableTextEditor.tsx

@@ -523,6 +523,7 @@ export function RouteEventsToChanges(props: {
         case 'annotation.toggle':
         case 'focus':
         case 'patches':
+        case 'readOnly toggled':
           break
         default:
           handleChange(event)

packages/editor/src/editor/behavior/behavior.types.ts

@@ -212,3 +212,12 @@ export type PickFromUnion<
   TTagKey extends keyof TUnion,
   TPickedTags extends TUnion[TTagKey],
 > = TUnion extends Record<TTagKey, TPickedTags> ? TUnion : never
+
+/**
+ * @alpha
+ */
+export type OmitFromUnion<
+  TUnion,
+  TTagKey extends keyof TUnion,
+  TOmittedTags extends TUnion[TTagKey],
+> = TUnion extends Record<TTagKey, TOmittedTags> ? never : TUnion

packages/editor/src/editor/editor-machine.ts

@@ -27,6 +27,7 @@ import type {
   BehaviorActionIntend,
   BehaviorContext,
   BehaviorEvent,
+  OmitFromUnion,
   PickFromUnion,
 } from './behavior/behavior.types'
 
@@ -95,7 +96,7 @@ export type InternalEditorEvent =
       type: 'update maxBlocks'
       maxBlocks: number | undefined
     }
-  | InternalEditorEmittedEvent
+  | OmitFromUnion<InternalEditorEmittedEvent, 'type', 'readOnly toggled'>
 
 /**
  * @internal
@@ -129,6 +130,7 @@ export type InternalEditorEmittedEvent =
   | {type: 'focused'; event: FocusEvent<HTMLDivElement, Element>}
   | {type: 'loading'}
   | {type: 'done loading'}
+  | {type: 'readOnly toggled'; readOnly: boolean}
   | PickFromUnion<
       BehaviorEvent,
       'type',
@@ -154,6 +156,7 @@ export const editorMachine = setup({
     input: {} as {
       behaviors?: Array<Behavior>
       keyGenerator: () => string
+      readOnly?: boolean
       schema: PortableTextMemberSchemaTypes
       value?: Array<PortableTextBlock>
     },
@@ -296,7 +299,7 @@ export const editorMachine = setup({
     keyGenerator: input.keyGenerator,
     pendingEvents: [],
     schema: input.schema,
-    readOnly: false,
+    readOnly: input.readOnly ?? false,
     maxBlocks: undefined,
     value: input.value,
   }),
@@ -332,7 +335,13 @@ export const editorMachine = setup({
     'update schema': {actions: 'assign schema'},
     'update value': {actions: assign({value: ({event}) => event.value})},
     'toggle readOnly': {
-      actions: assign({readOnly: ({context}) => !context.readOnly}),
+      actions: [
+        assign({readOnly: ({context}) => !context.readOnly}),
+        emit(({context}) => ({
+          type: 'readOnly toggled',
+          readOnly: context.readOnly,
+        })),
+      ],
     },
     'update maxBlocks': {
       actions: assign({maxBlocks: ({event}) => event.maxBlocks}),

packages/editor/src/editor/use-editor.ts

@@ -3,7 +3,7 @@ import type {
   ArraySchemaType,
   PortableTextBlock,
 } from '@sanity/types'
-import {useActorRef, useSelector} from '@xstate/react'
+import {useActorRef} from '@xstate/react'
 import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
 import {compileType} from '../utils/schema'
 import type {Behavior, PickFromUnion} from './behavior/behavior.types'
@@ -22,6 +22,7 @@ import {defaultKeyGenerator} from './key-generator'
 export type EditorConfig = {
   behaviors?: Array<Behavior>
   keyGenerator?: () => string
+  readOnly?: boolean
   initialValue?: Array<PortableTextBlock>
 } & (
   | {
@@ -54,7 +55,6 @@ export type EditorEvent = PickFromUnion<
 export type Editor = {
   send: (event: EditorEvent) => void
   on: EditorActor['on']
-  readOnly: boolean
   _internal: {
     editorActor: EditorActor
     slateEditor: SlateEditor
@@ -69,6 +69,7 @@ export function useEditor(config: EditorConfig): Editor {
     input: {
       behaviors: config.behaviors,
       keyGenerator: config.keyGenerator ?? defaultKeyGenerator,
+      readOnly: config.readOnly,
       schema: config.schemaDefinition
         ? compileSchemaDefinition(config.schemaDefinition)
         : getPortableTextMemberSchemaTypes(
@@ -80,14 +81,12 @@ export function useEditor(config: EditorConfig): Editor {
     },
   })
   const slateEditor = createSlateEditor({editorActor})
-  const readOnly = useSelector(editorActor, (s) => s.context.readOnly)
 
   return {
     send: (event) => {
       editorActor.send(event)
     },
     on: (event, listener) => editorActor.on(event, listener),
-    readOnly,
     _internal: {
       editorActor,
       slateEditor,

packages/editor/src/index.ts

@@ -17,6 +17,7 @@ export {
   type BehaviorContext,
   type BehaviorEvent,
   type BehaviorGuard,
+  type OmitFromUnion,
   type PickFromUnion,
 } from './editor/behavior/behavior.types'
 export type {SlateEditor} from './editor/create-slate-editor'