@portabletext/editor 1.55.7 → 1.55.9

package/package.json

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

package/src/editor/components/render-block-object.tsx

@@ -1,6 +1,4 @@
-import type {PortableTextObject} from '@sanity/types'
-import {useSelector} from '@xstate/react'
-import {useContext, useRef, useState, type ReactElement} from 'react'
+import {useRef, useState, type ReactElement} from 'react'
 import {Range, type Element as SlateElement} from 'slate'
 import {
   useSelected,
@@ -8,24 +6,27 @@ import {
   type RenderElementProps,
 } from 'slate-react'
 import type {EventPositionBlock} from '../../internal-utils/event-position'
-import type {RenderBlockFunction} from '../../types/editor'
-import {EditorActorContext} from '../editor-actor-context'
+import type {
+  PortableTextMemberSchemaTypes,
+  RenderBlockFunction,
+} from '../../types/editor'
+import type {EditorSchema} from '../editor-schema'
 import {DropIndicator} from './drop-indicator'
 import {RenderDefaultBlockObject} from './render-default-object'
 import {useCoreBlockElementBehaviors} from './use-core-block-element-behaviors'
 
 export function RenderBlockObject(props: {
   attributes: RenderElementProps['attributes']
-  blockObject: PortableTextObject
   children: ReactElement
   element: SlateElement
+  legacySchema: PortableTextMemberSchemaTypes
   readOnly: boolean
   renderBlock?: RenderBlockFunction
+  schema: EditorSchema
 }) {
   const [dragPositionBlock, setDragPositionBlock] =
     useState<EventPositionBlock>()
   const blockObjectRef = useRef<HTMLDivElement>(null)
-
   const selected = useSelected()
   const focused = useSlateSelector(
     (editor) =>
@@ -34,27 +35,29 @@ export function RenderBlockObject(props: {
       Range.isCollapsed(editor.selection),
   )
 
-  const editorActor = useContext(EditorActorContext)
-
   useCoreBlockElementBehaviors({
     key: props.element._key,
     onSetDragPositionBlock: setDragPositionBlock,
   })
 
-  const legacySchemaType = useSelector(editorActor, (s) =>
-    s.context
-      .getLegacySchema()
-      .blockObjects.find(
-        (blockObject) => blockObject.name === props.element._type,
-      ),
+  const legacySchemaType = props.legacySchema.blockObjects.find(
+    (blockObject) => blockObject.name === props.element._type,
   )
 
   if (!legacySchemaType) {
     console.error(
-      `Block object type ${props.element._type} not found in Schema`,
+      `Unable to find Block Object "${props.element._type}" in Schema`,
     )
   }
 
+  const blockObject = {
+    _key: props.element._key,
+    _type: props.element._type,
+    ...('value' in props.element && typeof props.element.value === 'object'
+      ? props.element.value
+      : {}),
+  }
+
   return (
     <div
       {...props.attributes}
@@ -72,19 +75,17 @@ export function RenderBlockObject(props: {
       >
         {props.renderBlock && legacySchemaType ? (
           props.renderBlock({
-            children: (
-              <RenderDefaultBlockObject blockObject={props.blockObject} />
-            ),
+            children: <RenderDefaultBlockObject blockObject={blockObject} />,
             editorElementRef: blockObjectRef,
             focused,
             path: [{_key: props.element._key}],
             schemaType: legacySchemaType,
             selected,
             type: legacySchemaType,
-            value: props.blockObject,
+            value: blockObject,
           })
         ) : (
-          <RenderDefaultBlockObject blockObject={props.blockObject} />
+          <RenderDefaultBlockObject blockObject={blockObject} />
         )}
       </div>
       {dragPositionBlock === 'end' ? <DropIndicator /> : null}

package/src/editor/components/render-element.tsx

@@ -10,8 +10,7 @@ import type {
   RenderStyleFunction,
 } from '../../types/editor'
 import {EditorActorContext} from '../editor-actor-context'
-import {RenderBlockObject} from './render-block-object'
-import {RenderInlineObject} from './render-inline-object'
+import {RenderObject} from './render-object'
 import {RenderTextBlock} from './render-text-block'
 
 export function RenderElement(props: {
@@ -27,51 +26,16 @@ export function RenderElement(props: {
 }) {
   const editorActor = useContext(EditorActorContext)
   const schema = useSelector(editorActor, (s) => s.context.schema)
-  const isInline =
-    '__inline' in props.element && props.element.__inline === true
-
-  if (isInline) {
-    const inlineObject = {
-      _key: props.element._key,
-      _type: props.element._type,
-      ...('value' in props.element && typeof props.element.value === 'object'
-        ? props.element.value
-        : {}),
-    }
-
-    if (
-      !schema.inlineObjects.find(
-        (inlineObject) => inlineObject.name === props.element._type,
-      )
-    ) {
-      console.error(
-        `Unable to find Inline Object "${props.element._type}" in Schema`,
-      )
-    }
-
-    return (
-      <RenderInlineObject
-        attributes={props.attributes}
-        element={props.element}
-        inlineObject={
-          inlineObject ?? {
-            _key: props.element._key,
-            _type: props.element._type,
-          }
-        }
-        readOnly={props.readOnly}
-        renderChild={props.renderChild}
-      >
-        {props.children}
-      </RenderInlineObject>
-    )
-  }
+  const legacySchema = useSelector(editorActor, (s) =>
+    s.context.getLegacySchema(),
+  )
 
   if (isTextBlock({schema}, props.element)) {
     return (
       <RenderTextBlock
         attributes={props.attributes}
         element={props.element}
+        legacySchema={legacySchema}
         readOnly={props.readOnly}
         renderBlock={props.renderBlock}
         renderListItem={props.renderListItem}
@@ -84,38 +48,17 @@ export function RenderElement(props: {
     )
   }
 
-  const blockObject = {
-    _key: props.element._key,
-    _type: props.element._type,
-    ...('value' in props.element && typeof props.element.value === 'object'
-      ? props.element.value
-      : {}),
-  }
-
-  if (
-    !schema.blockObjects.find(
-      (blockObject) => blockObject.name === props.element._type,
-    )
-  ) {
-    console.error(
-      `Unable to find Block Object "${props.element._type}" in Schema`,
-    )
-  }
-
   return (
-    <RenderBlockObject
+    <RenderObject
       attributes={props.attributes}
-      blockObject={
-        blockObject ?? {
-          _key: props.element._key,
-          _type: props.element._type,
-        }
-      }
       element={props.element}
+      legacySchema={legacySchema}
       readOnly={props.readOnly}
       renderBlock={props.renderBlock}
+      renderChild={props.renderChild}
+      schema={schema}
     >
       {props.children}
-    </RenderBlockObject>
+    </RenderObject>
   )
 }

package/src/editor/components/render-inline-object.tsx

@@ -1,46 +1,49 @@
-import type {PortableTextObject} from '@sanity/types'
-import {useSelector} from '@xstate/react'
-import {useContext, useRef, type ReactElement} from 'react'
+import {useRef, type ReactElement} from 'react'
 import {Range, type Element as SlateElement} from 'slate'
 import {DOMEditor} from 'slate-dom'
-import {useSelected, useSlateStatic, type RenderElementProps} from 'slate-react'
+import {
+  useSelected,
+  useSlateSelector,
+  useSlateStatic,
+  type RenderElementProps,
+} from 'slate-react'
 import {getPointBlock} from '../../internal-utils/slate-utils'
-import type {RenderChildFunction} from '../../types/editor'
-import {EditorActorContext} from '../editor-actor-context'
+import type {
+  PortableTextMemberSchemaTypes,
+  RenderChildFunction,
+} from '../../types/editor'
+import type {EditorSchema} from '../editor-schema'
 import {RenderDefaultInlineObject} from './render-default-object'
 
 export function RenderInlineObject(props: {
   attributes: RenderElementProps['attributes']
   children: ReactElement
   element: SlateElement
-  inlineObject: PortableTextObject
+  legacySchema: PortableTextMemberSchemaTypes
   readOnly: boolean
   renderChild?: RenderChildFunction
+  schema: EditorSchema
 }) {
   const inlineObjectRef = useRef<HTMLElement>(null)
-
   const slateEditor = useSlateStatic()
   const selected = useSelected()
+  const focused = useSlateSelector(
+    (editor) =>
+      selected &&
+      editor.selection !== null &&
+      Range.isCollapsed(editor.selection),
+  )
 
-  const editorActor = useContext(EditorActorContext)
-  const legacySchemaType = useSelector(editorActor, (s) =>
-    s.context
-      .getLegacySchema()
-      .inlineObjects.find(
-        (inlineObject) => inlineObject.name === props.element._type,
-      ),
+  const legacySchemaType = props.legacySchema.inlineObjects.find(
+    (inlineObject) => inlineObject.name === props.element._type,
   )
 
   if (!legacySchemaType) {
     console.error(
-      `Inline object type ${props.element._type} not found in Schema`,
+      `Unable to find Inline Object "${props.element._type}" in Schema`,
     )
   }
 
-  const focused =
-    selected &&
-    slateEditor.selection !== null &&
-    Range.isCollapsed(slateEditor.selection)
   const path = DOMEditor.findPath(slateEditor, props.element)
   const [block] = getPointBlock({
     editor: slateEditor,
@@ -56,13 +59,21 @@ export function RenderInlineObject(props: {
     )
   }
 
+  const inlineObject = {
+    _key: props.element._key,
+    _type: props.element._type,
+    ...('value' in props.element && typeof props.element.value === 'object'
+      ? props.element.value
+      : {}),
+  }
+
   return (
     <span
       {...props.attributes}
       draggable={!props.readOnly}
       className="pt-inline-object"
-      data-child-key={props.inlineObject._key}
-      data-child-name={props.inlineObject._type}
+      data-child-key={inlineObject._key}
+      data-child-name={inlineObject._type}
       data-child-type="object"
     >
       {props.children}
@@ -70,19 +81,17 @@ export function RenderInlineObject(props: {
         {props.renderChild && block && legacySchemaType ? (
           props.renderChild({
             annotations: [],
-            children: (
-              <RenderDefaultInlineObject inlineObject={props.inlineObject} />
-            ),
+            children: <RenderDefaultInlineObject inlineObject={inlineObject} />,
             editorElementRef: inlineObjectRef,
             selected,
             focused,
             path: [{_key: block._key}, 'children', {_key: props.element._key}],
             schemaType: legacySchemaType,
-            value: props.inlineObject,
+            value: inlineObject,
             type: legacySchemaType,
           })
         ) : (
-          <RenderDefaultInlineObject inlineObject={props.inlineObject} />
+          <RenderDefaultInlineObject inlineObject={inlineObject} />
         )}
       </span>
     </span>

package/src/editor/components/render-object.tsx

@@ -0,0 +1,53 @@
+import type {ReactElement} from 'react'
+import type {Element as SlateElement} from 'slate'
+import type {RenderElementProps} from 'slate-react'
+import type {
+  PortableTextMemberSchemaTypes,
+  RenderBlockFunction,
+  RenderChildFunction,
+} from '../../types/editor'
+import type {EditorSchema} from '../editor-schema'
+import {RenderBlockObject} from './render-block-object'
+import {RenderInlineObject} from './render-inline-object'
+
+export function RenderObject(props: {
+  attributes: RenderElementProps['attributes']
+  children: ReactElement
+  element: SlateElement
+  legacySchema: PortableTextMemberSchemaTypes
+  readOnly: boolean
+  renderBlock?: RenderBlockFunction
+  renderChild?: RenderChildFunction
+  schema: EditorSchema
+}) {
+  const isInline =
+    '__inline' in props.element && props.element.__inline === true
+
+  if (isInline) {
+    return (
+      <RenderInlineObject
+        attributes={props.attributes}
+        element={props.element}
+        legacySchema={props.legacySchema}
+        readOnly={props.readOnly}
+        renderChild={props.renderChild}
+        schema={props.schema}
+      >
+        {props.children}
+      </RenderInlineObject>
+    )
+  }
+
+  return (
+    <RenderBlockObject
+      attributes={props.attributes}
+      element={props.element}
+      legacySchema={props.legacySchema}
+      readOnly={props.readOnly}
+      renderBlock={props.renderBlock}
+      schema={props.schema}
+    >
+      {props.children}
+    </RenderBlockObject>
+  )
+}

package/src/editor/components/render-text-block.tsx

@@ -1,6 +1,5 @@
 import type {PortableTextTextBlock} from '@sanity/types'
-import {useSelector} from '@xstate/react'
-import {useContext, useRef, useState, type ReactElement} from 'react'
+import {useRef, useState, type ReactElement} from 'react'
 import {Range, type Element as SlateElement} from 'slate'
 import {
   useSelected,
@@ -9,11 +8,11 @@ import {
 } from 'slate-react'
 import type {EventPositionBlock} from '../../internal-utils/event-position'
 import type {
+  PortableTextMemberSchemaTypes,
   RenderBlockFunction,
   RenderListItemFunction,
   RenderStyleFunction,
 } from '../../types/editor'
-import {EditorActorContext} from '../editor-actor-context'
 import {DropIndicator} from './drop-indicator'
 import {useCoreBlockElementBehaviors} from './use-core-block-element-behaviors'
 
@@ -21,6 +20,7 @@ export function RenderTextBlock(props: {
   attributes: RenderElementProps['attributes']
   children: ReactElement
   element: SlateElement
+  legacySchema: PortableTextMemberSchemaTypes
   readOnly: boolean
   renderBlock?: RenderBlockFunction
   renderListItem?: RenderListItemFunction
@@ -40,29 +40,21 @@ export function RenderTextBlock(props: {
       Range.isCollapsed(editor.selection),
   )
 
-  const editorActor = useContext(EditorActorContext)
-
   useCoreBlockElementBehaviors({
     key: props.element._key,
     onSetDragPositionBlock: setDragPositionBlock,
   })
 
-  const legacySchema = useSelector(editorActor, (s) =>
-    s.context.getLegacySchema(),
-  )
-
   const listIndex = useSlateSelector((editor) =>
     editor.listIndexMap.get(props.textBlock._key),
   )
 
   let children = props.children
 
-  const legacyBlockSchemaType = legacySchema.block
-
   if (props.renderStyle && props.textBlock.style) {
     const legacyStyleSchemaType =
       props.textBlock.style !== undefined
-        ? legacySchema.styles.find(
+        ? props.legacySchema.styles.find(
             (style) => style.value === props.textBlock.style,
           )
         : undefined
@@ -86,7 +78,7 @@ export function RenderTextBlock(props: {
   }
 
   if (props.renderListItem && props.textBlock.listItem) {
-    const legacyListItemSchemaType = legacySchema.lists.find(
+    const legacyListItemSchemaType = props.legacySchema.lists.find(
       (list) => list.value === props.textBlock.listItem,
     )
 
@@ -162,9 +154,9 @@ export function RenderTextBlock(props: {
               listItem: props.textBlock.listItem,
               path: [{_key: props.textBlock._key}],
               selected,
-              schemaType: legacyBlockSchemaType,
+              schemaType: props.legacySchema.block,
               style: props.textBlock.style,
-              type: legacyBlockSchemaType,
+              type: props.legacySchema.block,
               value: props.textBlock,
             })
           : children}

package/src/editor/editor-machine.ts

@@ -141,6 +141,7 @@ export const editorMachine = setup({
   types: {
     context: {} as {
       behaviors: Set<BehaviorConfig>
+      behaviorsSorted: boolean
       converters: Set<Converter>
       getLegacySchema: () => PortableTextMemberSchemaTypes
       keyGenerator: () => string
@@ -177,6 +178,7 @@ export const editorMachine = setup({
 
         return new Set([...context.behaviors, event.behaviorConfig])
       },
+      behaviorsSorted: false,
     }),
     'remove behavior from context': assign({
       behaviors: ({context, event}) => {
@@ -257,10 +259,9 @@ export const editorMachine = setup({
       assertEvent(event, ['behavior event'])
 
       try {
-        const behaviors = sortByPriority([
-          ...context.behaviors.values(),
-          ...coreBehaviorsConfig,
-        ]).map((config) => config.behavior)
+        const behaviors = [...context.behaviors.values()].map(
+          (config) => config.behavior,
+        )
 
         performEvent({
           mode: 'raise',
@@ -289,6 +290,13 @@ export const editorMachine = setup({
         )
       }
     },
+    'sort behaviors': assign({
+      behaviors: ({context}) =>
+        !context.behaviorsSorted
+          ? new Set(sortByPriority([...context.behaviors.values()]))
+          : context.behaviors,
+      behaviorsSorted: true,
+    }),
   },
   guards: {
     'slate is busy': ({context}) => {
@@ -302,7 +310,8 @@ export const editorMachine = setup({
 }).createMachine({
   id: 'editor',
   context: ({input}) => ({
-    behaviors: new Set([]),
+    behaviors: new Set(coreBehaviorsConfig),
+    behaviorsSorted: false,
     converters: new Set(input.converters ?? []),
     getLegacySchema: input.getLegacySchema,
     keyGenerator: input.keyGenerator,
@@ -339,7 +348,7 @@ export const editorMachine = setup({
           initial: 'determine initial edit mode',
           on: {
             'behavior event': {
-              actions: 'handle behavior event',
+              actions: ['sort behaviors', 'handle behavior event'],
               guard: ({event}) =>
                 event.behaviorEvent.type === 'clipboard.copy' ||
                 event.behaviorEvent.type === 'mouse.click' ||
@@ -406,7 +415,7 @@ export const editorMachine = setup({
               actions: ['emit read only'],
             },
             'behavior event': {
-              actions: 'handle behavior event',
+              actions: ['sort behaviors', 'handle behavior event'],
             },
             'blur': {
               actions: 'handle blur',

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

@@ -21,6 +21,13 @@ export function pluginUpdateValue(
       operation,
     )
 
+    if (operation.type === 'insert_text' || operation.type === 'remove_text') {
+      // Inserting and removing text has no effect on index maps so there is
+      // no need to rebuild those.
+      apply(operation)
+      return
+    }
+
     buildIndexMaps(
       {
         schema: context.schema,