@portabletext/editor 1.50.3 → 1.50.4

package/lib/plugins/index.d.cts

@@ -2950,6 +2950,7 @@ declare interface PortableTextSlateEditor extends ReactEditor {
   isTextBlock: (value: unknown) => value is PortableTextTextBlock
   isTextSpan: (value: unknown) => value is PortableTextSpan
   isListBlock: (value: unknown) => value is PortableTextListBlock
+  value: Array<PortableTextBlock>
   /**
    * Use hotkeys
    */

package/lib/plugins/index.d.ts

@@ -2950,6 +2950,7 @@ declare interface PortableTextSlateEditor extends ReactEditor {
   isTextBlock: (value: unknown) => value is PortableTextTextBlock
   isTextSpan: (value: unknown) => value is PortableTextSpan
   isListBlock: (value: unknown) => value is PortableTextListBlock
+  value: Array<PortableTextBlock>
   /**
    * Use hotkeys
    */

package/lib/selectors/index.d.cts

@@ -3049,6 +3049,7 @@ declare interface PortableTextSlateEditor extends ReactEditor {
   isTextBlock: (value: unknown) => value is PortableTextTextBlock
   isTextSpan: (value: unknown) => value is PortableTextSpan
   isListBlock: (value: unknown) => value is PortableTextListBlock
+  value: Array<PortableTextBlock>
   /**
    * Use hotkeys
    */

package/lib/selectors/index.d.ts

@@ -3049,6 +3049,7 @@ declare interface PortableTextSlateEditor extends ReactEditor {
   isTextBlock: (value: unknown) => value is PortableTextTextBlock
   isTextSpan: (value: unknown) => value is PortableTextSpan
   isListBlock: (value: unknown) => value is PortableTextListBlock
+  value: Array<PortableTextBlock>
   /**
    * Use hotkeys
    */

package/lib/utils/index.d.cts

@@ -2810,6 +2810,7 @@ declare interface PortableTextSlateEditor extends ReactEditor {
   isTextBlock: (value: unknown) => value is PortableTextTextBlock
   isTextSpan: (value: unknown) => value is PortableTextSpan
   isListBlock: (value: unknown) => value is PortableTextListBlock
+  value: Array<PortableTextBlock>
   /**
    * Use hotkeys
    */

package/lib/utils/index.d.ts

@@ -2810,6 +2810,7 @@ declare interface PortableTextSlateEditor extends ReactEditor {
   isTextBlock: (value: unknown) => value is PortableTextTextBlock
   isTextSpan: (value: unknown) => value is PortableTextSpan
   isListBlock: (value: unknown) => value is PortableTextListBlock
+  value: Array<PortableTextBlock>
   /**
    * Use hotkeys
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.50.3",
+  "version": "1.50.4",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -71,6 +71,7 @@
     "@xstate/react": "^5.0.4",
     "debug": "^4.4.1",
     "get-random-values-esm": "^1.0.2",
+    "immer": "^10.1.1",
     "lodash": "^4.17.21",
     "lodash.startcase": "^4.4.0",
     "react-compiler-runtime": "19.1.0-rc.1",

package/src/editor/PortableTextEditor.tsx

@@ -138,6 +138,7 @@ export class PortableTextEditor extends Component<
     syncActor: SyncActor
   }
 
+  private subscriptions: Array<() => () => void> = []
   private unsubscribers: Array<() => void> = []
 
   constructor(props: PortableTextEditorProps) {
@@ -160,28 +161,7 @@ export class PortableTextEditor extends Component<
         schema: props.schemaType,
       })
 
-      this.unsubscribers.push(
-        (() => {
-          const subscription = actors.relayActor.on('*', (event) => {
-            const change = eventToChange(event)
-
-            if (change) {
-              props.onChange(change)
-
-              this.change$.next(change)
-            }
-          })
-
-          return () => {
-            subscription.unsubscribe()
-          }
-        })(),
-      )
-
-      for (const subscription of subscriptions) {
-        this.unsubscribers.push(subscription())
-      }
-
+      this.subscriptions = subscriptions
       this.actors = actors
 
       this.editor = editor
@@ -198,6 +178,26 @@ export class PortableTextEditor extends Component<
       return
     }
 
+    for (const subscription of this.subscriptions) {
+      this.unsubscribers.push(subscription())
+    }
+
+    const relayActorSubscription = this.actors.relayActor.on('*', (event) => {
+      const change = eventToChange(event)
+
+      if (!change) {
+        return
+      }
+
+      if (!this.props.editor) {
+        this.props.onChange(change)
+      }
+
+      this.change$.next(change)
+    })
+
+    this.unsubscribers.push(relayActorSubscription.unsubscribe)
+
     this.actors.editorActor.start()
     this.actors.mutationActor.start()
     this.actors.relayActor.start()

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

@@ -1,6 +1,8 @@
 import {createEditor, type Descendant} from 'slate'
 import {withReact} from 'slate-react'
+import {createPlaceholderBlock} from '../internal-utils/create-placeholder-block'
 import {debugWithName} from '../internal-utils/debug'
+import {toSlateValue} from '../internal-utils/values'
 import {
   KEY_TO_SLATE_ELEMENT,
   KEY_TO_VALUE_ELEMENT,
@@ -35,7 +37,13 @@ export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
   KEY_TO_VALUE_ELEMENT.set(instance, {})
   KEY_TO_SLATE_ELEMENT.set(instance, {})
 
-  const initialValue = [instance.pteCreateTextBlock({decorators: []})]
+  instance.value = [
+    createPlaceholderBlock(config.editorActor.getSnapshot().context),
+  ]
+
+  const initialValue = toSlateValue(instance.value, {
+    schemaTypes: config.editorActor.getSnapshot().context.schema,
+  })
 
   const slateEditor: SlateEditor = {
     instance,

package/src/editor/editor-selector.ts

@@ -1,6 +1,5 @@
 import {useSelector} from '@xstate/react'
 import type {Editor} from '../editor'
-import {slateChildrenToBlocks} from '../internal-utils/slate-children-to-blocks'
 import type {PortableTextSlateEditor} from '../types/editor'
 import type {InternalEditor} from './create-editor'
 import type {EditorActor} from './editor-machine'
@@ -78,10 +77,7 @@ export function getEditorSnapshot({
       readOnly: editorActorSnapshot.matches({'edit mode': 'read only'}),
       schema: editorActorSnapshot.context.schema,
       selection: editorActorSnapshot.context.selection,
-      value: slateChildrenToBlocks(
-        editorActorSnapshot.context.schema,
-        slateEditorInstance.children,
-      ),
+      value: slateEditorInstance.value,
     },
     beta: {
       hasTag: (tag) => editorActorSnapshot.hasTag(tag),

package/src/editor/editor-snapshot.ts

@@ -1,7 +1,6 @@
 import type {PortableTextBlock} from '@sanity/types'
 import type {Converter} from '../converters/converter.types'
 import type {EventPosition} from '../internal-utils/event-position'
-import {slateChildrenToBlocks} from '../internal-utils/slate-children-to-blocks'
 import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import type {EditorSelection, PortableTextSlateEditor} from '../types/editor'
 import type {HasTag} from './editor-machine'
@@ -61,7 +60,6 @@ export function createEditorSnapshot({
       }
     | undefined
 }) {
-  const value = slateChildrenToBlocks(schema, editor.children)
   const selection = editor.selection
     ? slateRangeToSelection({
         schema,
@@ -80,7 +78,7 @@ export function createEditorSnapshot({
     readOnly,
     schema,
     selection,
-    value,
+    value: editor.value,
   } satisfies EditorContext
 
   return {

package/src/editor/plugins/slate-plugin.update-value.ts

@@ -0,0 +1,30 @@
+import {applyOperationToPortableText} from '../../internal-utils/apply-operation-to-portable-text'
+import type {PortableTextSlateEditor} from '../../types/editor'
+import type {EditorContext} from '../editor-snapshot'
+
+export function pluginUpdateValue(
+  context: Pick<EditorContext, 'keyGenerator' | 'schema'>,
+  editor: PortableTextSlateEditor,
+) {
+  const {apply} = editor
+
+  editor.apply = (operation) => {
+    if (operation.type === 'set_selection') {
+      apply(operation)
+      return
+    }
+
+    editor.value = applyOperationToPortableText(
+      {
+        keyGenerator: context.keyGenerator,
+        schema: context.schema,
+      },
+      editor.value,
+      operation,
+    )
+
+    apply(operation)
+  }
+
+  return editor
+}

package/src/editor/plugins/with-plugins.ts

@@ -13,6 +13,7 @@ import {createWithPortableTextSelections} from './createWithPortableTextSelectio
 import {createWithSchemaTypes} from './createWithSchemaTypes'
 import {createWithUndoRedo} from './createWithUndoRedo'
 import {createWithUtils} from './createWithUtils'
+import {pluginUpdateValue} from './slate-plugin.update-value'
 
 export interface OriginalEditorFunctions {
   apply: (operation: BaseOperation) => void
@@ -68,7 +69,13 @@ export const withPlugins = <T extends Editor>(
             withPlaceholderBlock(
               withUtils(
                 withMaxBlocks(
-                  withUndoRedo(withPatches(withPortableTextSelections(e))),
+                  withUndoRedo(
+                    withPatches(
+                      withPortableTextSelections(
+                        pluginUpdateValue(editorActor.getSnapshot().context, e),
+                      ),
+                    ),
+                  ),
                 ),
               ),
             ),

package/src/internal-utils/apply-operation-to-portable-text.test.ts

@@ -0,0 +1,175 @@
+import {describe, expect, test} from 'vitest'
+import {compileSchemaDefinition, defineSchema} from '../editor/editor-schema'
+import {applyOperationToPortableText} from './apply-operation-to-portable-text'
+import {createTestKeyGenerator} from './test-key-generator'
+
+function createContext() {
+  const keyGenerator = createTestKeyGenerator()
+  const schema = compileSchemaDefinition(defineSchema({}))
+
+  return {
+    keyGenerator,
+    schema,
+  }
+}
+
+describe(applyOperationToPortableText.name, () => {
+  test('setting block object properties', () => {
+    expect(
+      applyOperationToPortableText(
+        createContext(),
+        [
+          {
+            _type: 'image',
+            _key: 'k0',
+          },
+        ],
+        {
+          type: 'set_node',
+          path: [0],
+          properties: {},
+          newProperties: {
+            value: {src: 'https://example.com/image.jpg'},
+          },
+        },
+      ),
+    ).toEqual([
+      {
+        _type: 'image',
+        _key: 'k0',
+        src: 'https://example.com/image.jpg',
+      },
+    ])
+  })
+
+  test('updating block object properties', () => {
+    expect(
+      applyOperationToPortableText(
+        createContext(),
+        [
+          {
+            _type: 'image',
+            _key: 'k0',
+            src: 'https://example.com/image.jpg',
+          },
+        ],
+        {
+          type: 'set_node',
+          path: [0],
+          properties: {
+            value: {src: 'https://example.com/image.jpg'},
+          },
+          newProperties: {
+            value: {
+              src: 'https://example.com/image.jpg',
+              alt: 'An image',
+            },
+          },
+        },
+      ),
+    ).toEqual([
+      {
+        _type: 'image',
+        _key: 'k0',
+        src: 'https://example.com/image.jpg',
+        alt: 'An image',
+      },
+    ])
+  })
+
+  test('removing block object properties', () => {
+    expect(
+      applyOperationToPortableText(
+        createContext(),
+        [{_type: 'image', _key: 'k0', alt: 'An image'}],
+        {
+          type: 'set_node',
+          path: [0],
+          properties: {
+            value: {
+              alt: 'An image',
+            },
+          },
+          newProperties: {value: {}},
+        },
+      ),
+    ).toEqual([{_type: 'image', _key: 'k0'}])
+  })
+
+  test('updating block object _key', () => {
+    expect(
+      applyOperationToPortableText(
+        createContext(),
+        [
+          {
+            _type: 'image',
+            _key: 'k0',
+            src: 'https://example.com/image.jpg',
+          },
+        ],
+        {
+          type: 'set_node',
+          path: [0],
+          properties: {_key: 'k0'},
+          newProperties: {_key: 'k1'},
+        },
+      ),
+    ).toEqual([
+      {
+        _type: 'image',
+        _key: 'k1',
+        src: 'https://example.com/image.jpg',
+      },
+    ])
+  })
+
+  test('updating inline object properties', () => {
+    expect(
+      applyOperationToPortableText(
+        createContext(),
+        [
+          {
+            _key: 'k0',
+            _type: 'block',
+            children: [
+              {
+                _key: 'k1',
+                _type: 'span',
+                text: '',
+              },
+              {
+                _key: 'k2',
+                _type: 'stock ticker',
+              },
+              {
+                _key: 'k3',
+                _type: 'span',
+                text: '',
+              },
+            ],
+          },
+        ],
+        {
+          type: 'set_node',
+          path: [0, 1],
+          properties: {},
+          newProperties: {
+            value: {
+              symbol: 'AAPL',
+            },
+          },
+        },
+      ),
+    ).toEqual([
+      {
+        _type: 'block',
+        _key: 'k0',
+        children: [
+          {_type: 'span', _key: 'k1', text: ''},
+          {_type: 'stock ticker', _key: 'k2', symbol: 'AAPL'},
+          {_type: 'span', _key: 'k3', text: ''},
+        ],
+      },
+    ])
+  })
+})