@portabletext/editor 1.50.3 → 1.50.5

package/lib/plugins/index.d.cts

@@ -599,7 +599,6 @@ declare type EditorActor = ActorRefFrom<typeof editorMachine>
  * @public
  */
 declare type EditorContext = {
-  activeDecorators: Array<string>
   converters: Array<Converter>
   keyGenerator: () => string
   readOnly: boolean
@@ -2520,6 +2519,8 @@ declare type EditorSnapshot = {
    * Do not rely on this externally
    */
   beta: {
+    activeAnnotations: Array<string>
+    activeDecorators: Array<string>
     hasTag: HasTag
     internalDrag:
       | {
@@ -2811,6 +2812,11 @@ export declare type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
   }) => string | undefined
 }
 
+declare type MarkState = {
+  state: 'changed' | 'unchanged'
+  marks: Array<string>
+}
+
 declare type MIMEType = `${string}/${string}`
 
 declare type MouseBehaviorEvent = {
@@ -2950,6 +2956,9 @@ 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>
+  decoratorState: Record<string, boolean | undefined>
+  markState: MarkState | undefined
   /**
    * Use hotkeys
    */

package/lib/plugins/index.d.ts

@@ -599,7 +599,6 @@ declare type EditorActor = ActorRefFrom<typeof editorMachine>
  * @public
  */
 declare type EditorContext = {
-  activeDecorators: Array<string>
   converters: Array<Converter>
   keyGenerator: () => string
   readOnly: boolean
@@ -2520,6 +2519,8 @@ declare type EditorSnapshot = {
    * Do not rely on this externally
    */
   beta: {
+    activeAnnotations: Array<string>
+    activeDecorators: Array<string>
     hasTag: HasTag
     internalDrag:
       | {
@@ -2811,6 +2812,11 @@ export declare type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
   }) => string | undefined
 }
 
+declare type MarkState = {
+  state: 'changed' | 'unchanged'
+  marks: Array<string>
+}
+
 declare type MIMEType = `${string}/${string}`
 
 declare type MouseBehaviorEvent = {
@@ -2950,6 +2956,9 @@ 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>
+  decoratorState: Record<string, boolean | undefined>
+  markState: MarkState | undefined
   /**
    * Use hotkeys
    */

package/lib/selectors/index.d.cts

@@ -570,7 +570,6 @@ declare type EditorActor = ActorRefFrom<typeof editorMachine>
  * @public
  */
 declare type EditorContext = {
-  activeDecorators: Array<string>
   converters: Array<Converter>
   keyGenerator: () => string
   readOnly: boolean
@@ -2428,6 +2427,8 @@ declare type EditorSnapshot = {
    * Do not rely on this externally
    */
   beta: {
+    activeAnnotations: Array<string>
+    activeDecorators: Array<string>
     hasTag: HasTag
     internalDrag:
       | {
@@ -2922,6 +2923,11 @@ declare type ListState = {
   index: number
 }
 
+declare type MarkState = {
+  state: 'changed' | 'unchanged'
+  marks: Array<string>
+}
+
 declare type MIMEType = `${string}/${string}`
 
 declare type MouseBehaviorEvent = {
@@ -3049,6 +3055,9 @@ 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>
+  decoratorState: Record<string, boolean | undefined>
+  markState: MarkState | undefined
   /**
    * Use hotkeys
    */

package/lib/selectors/index.d.ts

@@ -570,7 +570,6 @@ declare type EditorActor = ActorRefFrom<typeof editorMachine>
  * @public
  */
 declare type EditorContext = {
-  activeDecorators: Array<string>
   converters: Array<Converter>
   keyGenerator: () => string
   readOnly: boolean
@@ -2428,6 +2427,8 @@ declare type EditorSnapshot = {
    * Do not rely on this externally
    */
   beta: {
+    activeAnnotations: Array<string>
+    activeDecorators: Array<string>
     hasTag: HasTag
     internalDrag:
       | {
@@ -2922,6 +2923,11 @@ declare type ListState = {
   index: number
 }
 
+declare type MarkState = {
+  state: 'changed' | 'unchanged'
+  marks: Array<string>
+}
+
 declare type MIMEType = `${string}/${string}`
 
 declare type MouseBehaviorEvent = {
@@ -3049,6 +3055,9 @@ 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>
+  decoratorState: Record<string, boolean | undefined>
+  markState: MarkState | undefined
   /**
    * Use hotkeys
    */

package/lib/utils/index.d.cts

@@ -634,7 +634,6 @@ declare type EditorActor = ActorRefFrom<typeof editorMachine>
  * @public
  */
 declare type EditorContext = {
-  activeDecorators: Array<string>
   converters: Array<Converter>
   keyGenerator: () => string
   readOnly: boolean
@@ -2487,6 +2486,8 @@ declare type EditorSnapshot = {
    * Do not rely on this externally
    */
   beta: {
+    activeAnnotations: Array<string>
+    activeDecorators: Array<string>
     hasTag: HasTag
     internalDrag:
       | {
@@ -2670,6 +2671,11 @@ declare type KeyboardBehaviorEvent =
       >
     }
 
+declare type MarkState = {
+  state: 'changed' | 'unchanged'
+  marks: Array<string>
+}
+
 /**
  * @beta
  */
@@ -2810,6 +2816,9 @@ 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>
+  decoratorState: Record<string, boolean | undefined>
+  markState: MarkState | undefined
   /**
    * Use hotkeys
    */

package/lib/utils/index.d.ts

@@ -634,7 +634,6 @@ declare type EditorActor = ActorRefFrom<typeof editorMachine>
  * @public
  */
 declare type EditorContext = {
-  activeDecorators: Array<string>
   converters: Array<Converter>
   keyGenerator: () => string
   readOnly: boolean
@@ -2487,6 +2486,8 @@ declare type EditorSnapshot = {
    * Do not rely on this externally
    */
   beta: {
+    activeAnnotations: Array<string>
+    activeDecorators: Array<string>
     hasTag: HasTag
     internalDrag:
       | {
@@ -2670,6 +2671,11 @@ declare type KeyboardBehaviorEvent =
       >
     }
 
+declare type MarkState = {
+  state: 'changed' | 'unchanged'
+  marks: Array<string>
+}
+
 /**
  * @beta
  */
@@ -2810,6 +2816,9 @@ 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>
+  decoratorState: Record<string, boolean | undefined>
+  markState: MarkState | undefined
   /**
    * Use hotkeys
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.50.3",
+  "version": "1.50.5",
   "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",
@@ -79,8 +80,8 @@
     "slate-react": "0.114.2",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.19.3",
-    "@portabletext/patches": "1.1.3",
-    "@portabletext/block-tools": "1.1.27"
+    "@portabletext/block-tools": "1.1.27",
+    "@portabletext/patches": "1.1.3"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",

package/src/behaviors/behavior.abstract.delete.ts

@@ -17,12 +17,16 @@ export const abstractDeleteBehaviors = [
       }
 
       const trimmedSelection = selectors.getTrimmedSelection({
-        beta: {hasTag: () => false, internalDrag: undefined},
+        beta: {
+          activeAnnotations: [],
+          activeDecorators: [],
+          hasTag: () => false,
+          internalDrag: undefined,
+        },
         context: {
           converters: [],
           schema: snapshot.context.schema,
           keyGenerator: snapshot.context.keyGenerator,
-          activeDecorators: [],
           readOnly: false,
           value: snapshot.context.value,
           selection,

package/src/behaviors/behavior.abstract.ts

@@ -327,7 +327,7 @@ export const abstractBehaviors = [
         event.mimeType === 'text/plain' &&
         event.originEvent.type === 'clipboard.paste'
       ) {
-        const activeDecorators = snapshot.context.activeDecorators
+        const activeDecorators = snapshot.beta.activeDecorators
         const activeAnnotations = selectors.getActiveAnnotations(snapshot)
 
         return {

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,15 @@ export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
   KEY_TO_VALUE_ELEMENT.set(instance, {})
   KEY_TO_SLATE_ELEMENT.set(instance, {})
 
-  const initialValue = [instance.pteCreateTextBlock({decorators: []})]
+  instance.decoratorState = {}
+  instance.markState = undefined
+  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,10 +1,10 @@
 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'
 import type {EditorSnapshot} from './editor-snapshot'
+import {getActiveAnnotations} from './get-active-annotations'
 import {getActiveDecorators} from './get-active-decorators'
 
 function defaultCompare<T>(a: T, b: T) {
@@ -70,20 +70,22 @@ export function getEditorSnapshot({
   return {
     context: {
       converters: [...editorActorSnapshot.context.converters],
-      activeDecorators: getActiveDecorators({
-        schema: editorActorSnapshot.context.schema,
-        slateEditorInstance,
-      }),
       keyGenerator: editorActorSnapshot.context.keyGenerator,
       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: {
+      activeAnnotations: getActiveAnnotations({
+        markState: slateEditorInstance.markState,
+        schema: editorActorSnapshot.context.schema,
+      }),
+      activeDecorators: getActiveDecorators({
+        decoratorState: slateEditorInstance.decoratorState,
+        markState: slateEditorInstance.markState,
+        schema: editorActorSnapshot.context.schema,
+      }),
       hasTag: (tag) => editorActorSnapshot.hasTag(tag),
       internalDrag: editorActorSnapshot.context.internalDrag,
     },

package/src/editor/editor-snapshot.ts

@@ -1,18 +1,17 @@
 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'
 import type {EditorSchema} from './editor-schema'
+import {getActiveAnnotations} from './get-active-annotations'
 import {getActiveDecorators} from './get-active-decorators'
 
 /**
  * @public
  */
 export type EditorContext = {
-  activeDecorators: Array<string>
   converters: Array<Converter>
   keyGenerator: () => string
   readOnly: boolean
@@ -31,6 +30,8 @@ export type EditorSnapshot = {
    * Do not rely on this externally
    */
   beta: {
+    activeAnnotations: Array<string>
+    activeDecorators: Array<string>
     hasTag: HasTag
     internalDrag:
       | {
@@ -61,7 +62,6 @@ export function createEditorSnapshot({
       }
     | undefined
 }) {
-  const value = slateChildrenToBlocks(schema, editor.children)
   const selection = editor.selection
     ? slateRangeToSelection({
         schema,
@@ -71,21 +71,26 @@ export function createEditorSnapshot({
     : null
 
   const context = {
-    activeDecorators: getActiveDecorators({
-      schema,
-      slateEditorInstance: editor,
-    }),
     converters,
     keyGenerator,
     readOnly,
     schema,
     selection,
-    value,
+    value: editor.value,
   } satisfies EditorContext
 
   return {
     context,
     beta: {
+      activeAnnotations: getActiveAnnotations({
+        markState: editor.markState,
+        schema,
+      }),
+      activeDecorators: getActiveDecorators({
+        decoratorState: editor.decoratorState,
+        markState: editor.markState,
+        schema,
+      }),
       hasTag,
       internalDrag,
     },

package/src/editor/get-active-annotations.ts

@@ -0,0 +1,15 @@
+import type {MarkState} from '../internal-utils/mark-state'
+import type {EditorSchema} from './editor-schema'
+
+export function getActiveAnnotations({
+  markState,
+  schema,
+}: {
+  markState: MarkState | undefined
+  schema: EditorSchema
+}) {
+  return (markState?.marks ?? []).filter(
+    (mark) =>
+      !schema.decorators.map((decorator) => decorator.name).includes(mark),
+  )
+}

package/src/editor/get-active-decorators.ts

@@ -1,20 +1,34 @@
-import {Editor} from 'slate'
-import type {PortableTextSlateEditor} from '../types/editor'
+import type {MarkState} from '../internal-utils/mark-state'
 import type {EditorSchema} from './editor-schema'
 
 export function getActiveDecorators({
+  decoratorState,
+  markState,
   schema,
-  slateEditorInstance,
 }: {
+  decoratorState: Record<string, boolean | undefined>
+  markState: MarkState | undefined
   schema: EditorSchema
-  slateEditorInstance: PortableTextSlateEditor
 }) {
   const decorators = schema.decorators.map((decorator) => decorator.name)
 
-  const marks =
-    {
-      ...(Editor.marks(slateEditorInstance) ?? {}),
-    }.marks ?? []
+  const markStateDecorators = (markState?.marks ?? []).filter((mark) =>
+    decorators.includes(mark),
+  )
 
-  return marks.filter((mark) => decorators.includes(mark))
+  let activeDecorators: Array<string> = markStateDecorators
+
+  for (const decorator in decoratorState) {
+    if (decoratorState[decorator] === false) {
+      activeDecorators = activeDecorators.filter(
+        (activeDecorator) => activeDecorator !== decorator,
+      )
+    } else if (decoratorState[decorator] === true) {
+      if (!activeDecorators.includes(decorator)) {
+        activeDecorators.push(decorator)
+      }
+    }
+  }
+
+  return activeDecorators
 }

package/src/editor/plugins/create-with-event-listeners.ts

@@ -11,7 +11,7 @@ export function createWithEventListeners(editorActor: EditorActor) {
       return editor
     }
 
-    const {insertText, select} = editor
+    const {select} = editor
 
     editor.deleteBackward = (unit) => {
       if (isApplyingBehaviorOperations(editor)) {
@@ -103,9 +103,15 @@ export function createWithEventListeners(editorActor: EditorActor) {
       return
     }
 
-    editor.insertText = (text, options) => {
+    editor.insertText = (text) => {
       if (isApplyingBehaviorOperations(editor)) {
-        insertText(text, options)
+        insertTextOperationImplementation({
+          context: {
+            keyGenerator: editorActor.getSnapshot().context.keyGenerator,
+            schema: editorActor.getSnapshot().context.schema,
+          },
+          operation: {type: 'insert.text', text, editor},
+        })
         return
       }
 

package/src/editor/plugins/createWithEditableAPI.ts

@@ -36,7 +36,7 @@ import type {
   PortableTextSlateEditor,
 } from '../../types/editor'
 import type {EditorActor} from '../editor-machine'
-import {isDecoratorActive} from './createWithPortableTextMarkModel'
+import {getEditorSnapshot} from '../editor-selector'
 
 const debug = debugWithName('API:editable')
 
@@ -90,21 +90,23 @@ export function createEditableAPI(
       })
     },
     isMarkActive: (mark: string): boolean => {
-      // Try/catch this, as Slate may error because the selection is currently wrong
-      // TODO: catch only relevant error from Slate
-      try {
-        return isDecoratorActive({editor, decorator: mark})
-      } catch (err) {
-        console.warn(err)
-        return false
-      }
+      const snapshot = getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: editor,
+      })
+
+      return snapshot.beta.activeDecorators.includes(mark)
     },
     marks: (): string[] => {
-      return (
-        {
-          ...(Editor.marks(editor) || {}),
-        }.marks || []
-      )
+      const snapshot = getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: editor,
+      })
+
+      return [
+        ...snapshot.beta.activeAnnotations,
+        ...snapshot.beta.activeDecorators,
+      ]
     },
     undo: (): void => {
       editorActor.send({