@portabletext/editor 1.7.0 → 1.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -43,7 +43,7 @@
   ],
   "dependencies": {
     "@portabletext/patches": "1.1.0",
-    "@xstate/react": "^4.1.3",
+    "@xstate/react": "^5.0.0",
     "debug": "^4.3.4",
     "get-random-values-esm": "^1.0.2",
     "is-hotkey-esm": "^1.0.0",
@@ -54,15 +54,15 @@
     "slate-dom": "^0.111.0",
     "slate-react": "0.111.0",
     "use-effect-event": "^1.0.2",
-    "xstate": "^5.18.2"
+    "xstate": "^5.19.0"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.16",
-    "@sanity/block-tools": "^3.63.0",
+    "@sanity/block-tools": "^3.64.0",
     "@sanity/diff-match-patch": "^3.1.1",
     "@sanity/pkg-utils": "^6.11.10",
-    "@sanity/schema": "^3.63.0",
-    "@sanity/types": "^3.63.0",
+    "@sanity/schema": "^3.64.0",
+    "@sanity/types": "^3.64.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/debug": "^4.1.5",
@@ -90,9 +90,9 @@
     "@sanity/gherkin-driver": "^0.0.1"
   },
   "peerDependencies": {
-    "@sanity/block-tools": "^3.63.0",
-    "@sanity/schema": "^3.63.0",
-    "@sanity/types": "^3.63.0",
+    "@sanity/block-tools": "^3.64.0",
+    "@sanity/schema": "^3.64.0",
+    "@sanity/types": "^3.64.0",
     "react": "^16.9 || ^17 || ^18",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.13"

package/src/editor/PortableTextEditor.tsx

@@ -136,6 +136,7 @@ export class PortableTextEditor extends Component<
     if (props.editor) {
       const editor = props.editor as Editor
       this.editorActor = editor._internal.editorActor
+      this.slateEditor = editor._internal.slateEditor
       this.editorActor.start()
       this.schemaTypes = this.editorActor.getSnapshot().context.schema
     } else {
@@ -163,6 +164,10 @@ export class PortableTextEditor extends Component<
       })
       this.editorActor.start()
 
+      this.slateEditor = createSlateEditor({
+        editorActor: this.editorActor,
+      })
+
       if (props.readOnly) {
         this.editorActor.send({
           type: 'toggle readOnly',
@@ -179,9 +184,6 @@ export class PortableTextEditor extends Component<
         })
       }
     }
-    this.slateEditor = createSlateEditor({
-      editorActor: this.editorActor,
-    })
     this.editable = createEditableAPI(
       this.slateEditor.instance,
       this.editorActor,
@@ -230,10 +232,6 @@ export class PortableTextEditor extends Component<
     }
   }
 
-  componentWillUnmount(): void {
-    this.slateEditor.destroy()
-  }
-
   public setEditable = (editable: EditableAPI) => {
     this.editable = {...this.editable, ...editable}
   }

package/src/editor/create-slate-editor.tsx

@@ -12,10 +12,12 @@ type SlateEditorConfig = {
   editorActor: EditorActor
 }
 
+/**
+ * @internal
+ */
 export type SlateEditor = {
   instance: PortableTextSlateEditor
   initialValue: Array<Descendant>
-  destroy: () => void
 }
 
 const slateEditors = new WeakMap<EditorActor, SlateEditor>()
@@ -45,12 +47,8 @@ export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
     unsubscriptions.push(subscription())
   }
 
-  const initialValue = [instance.pteCreateTextBlock({decorators: []})]
-
-  const slateEditor: SlateEditor = {
-    instance,
-    initialValue,
-    destroy: () => {
+  config.editorActor.subscribe((snapshot) => {
+    if (snapshot.status !== 'active') {
       debug('Destroying Slate editor')
       instance.destroy()
       for (const unsubscribe of unsubscriptions) {
@@ -58,7 +56,14 @@ export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
       }
       subscriptions = []
       unsubscriptions = []
-    },
+    }
+  })
+
+  const initialValue = [instance.pteCreateTextBlock({decorators: []})]
+
+  const slateEditor: SlateEditor = {
+    instance,
+    initialValue,
   }
 
   slateEditors.set(config.editorActor, slateEditor)

package/src/editor/use-editor.ts

@@ -7,6 +7,7 @@ import {useActorRef, useSelector} from '@xstate/react'
 import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
 import {compileType} from '../utils/schema'
 import type {Behavior, PickFromUnion} from './behavior/behavior.types'
+import {createSlateEditor, type SlateEditor} from './create-slate-editor'
 import {compileSchemaDefinition, type SchemaDefinition} from './define-schema'
 import {
   editorMachine,
@@ -54,6 +55,7 @@ export type Editor = {
   readOnly: boolean
   _internal: {
     editorActor: EditorActor
+    slateEditor: SlateEditor
   }
 }
 
@@ -74,6 +76,7 @@ export function useEditor(config: EditorConfig): Editor {
           ),
     },
   })
+  const slateEditor = createSlateEditor({editorActor})
   const readOnly = useSelector(editorActor, (s) => s.context.readOnly)
 
   return {
@@ -84,6 +87,7 @@ export function useEditor(config: EditorConfig): Editor {
     readOnly,
     _internal: {
       editorActor,
+      slateEditor,
     },
   }
 }

package/src/index.ts

@@ -15,6 +15,7 @@ export {
   type BehaviorGuard,
   type PickFromUnion,
 } from './editor/behavior/behavior.types'
+export type {SlateEditor} from './editor/create-slate-editor'
 export {
   defineSchema,
   type BaseDefinition,