@portabletext/editor 1.48.15 → 1.49.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.48.15",
+  "version": "1.49.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -79,15 +79,15 @@
     "slate-react": "0.114.2",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.19.2",
-    "@portabletext/block-tools": "1.1.23",
-    "@portabletext/patches": "1.1.3"
+    "@portabletext/patches": "1.1.3",
+    "@portabletext/block-tools": "1.1.24"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",
     "@sanity/diff-match-patch": "^3.2.0",
     "@sanity/pkg-utils": "^7.2.2",
-    "@sanity/schema": "^3.87.1",
-    "@sanity/types": "^3.87.1",
+    "@sanity/schema": "^3.88.0",
+    "@sanity/types": "^3.88.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/debug": "^4.1.12",
@@ -114,8 +114,8 @@
     "racejar": "1.2.4"
   },
   "peerDependencies": {
-    "@sanity/schema": "^3.87.1",
-    "@sanity/types": "^3.87.1",
+    "@sanity/schema": "^3.88.0",
+    "@sanity/types": "^3.88.0",
     "react": "^16.9 || ^17 || ^18 || ^19",
     "rxjs": "^7.8.2"
   },

package/src/behaviors/behavior.core.block-element.ts

@@ -0,0 +1,108 @@
+import type {EventPositionBlock} from '../internal-utils/event-position'
+import {corePriority} from '../priority/priority.core'
+import {createEditorPriority} from '../priority/priority.types'
+import * as selectors from '../selectors'
+import {forward} from './behavior.types.action'
+import {defineBehavior} from './behavior.types.behavior'
+
+export function createCoreBlockElementBehaviorsConfig({
+  key,
+  onSetDragPositionBlock,
+}: {
+  key: string
+  onSetDragPositionBlock: (
+    eventPositionBlock: EventPositionBlock | undefined,
+  ) => void
+}) {
+  return [
+    {
+      behavior: defineBehavior({
+        on: 'drag.dragover',
+        guard: ({snapshot, event}) => {
+          const dropFocusBlock = selectors.getFocusBlock({
+            ...snapshot,
+            context: {
+              ...snapshot.context,
+              selection: event.position.selection,
+            },
+          })
+
+          if (!dropFocusBlock || dropFocusBlock.node._key !== key) {
+            return false
+          }
+
+          const dragOrigin = snapshot.beta.internalDrag?.origin
+
+          if (!dragOrigin) {
+            return false
+          }
+
+          const draggedBlocks = selectors.getSelectedBlocks({
+            ...snapshot,
+            context: {
+              ...snapshot.context,
+              selection: dragOrigin.selection,
+            },
+          })
+
+          if (
+            draggedBlocks.some((draggedBlock) => draggedBlock.node._key === key)
+          ) {
+            return false
+          }
+
+          const draggingEntireBlocks = selectors.isSelectingEntireBlocks({
+            ...snapshot,
+            context: {
+              ...snapshot.context,
+              selection: dragOrigin.selection,
+            },
+          })
+
+          return draggingEntireBlocks
+        },
+        actions: [
+          ({event}) => [
+            {
+              type: 'effect',
+              effect: () => {
+                onSetDragPositionBlock(event.position.block)
+              },
+            },
+          ],
+        ],
+      }),
+      priority: createEditorPriority({
+        reference: {
+          priority: corePriority,
+          importance: 'lower',
+        },
+      }),
+    },
+    {
+      behavior: defineBehavior({
+        on: 'drag.*',
+        guard: ({event}) => {
+          return event.type !== 'drag.dragover'
+        },
+        actions: [
+          ({event}) => [
+            {
+              type: 'effect',
+              effect: () => {
+                onSetDragPositionBlock(undefined)
+              },
+            },
+            forward(event),
+          ],
+        ],
+      }),
+      priority: createEditorPriority({
+        reference: {
+          priority: corePriority,
+          importance: 'lower',
+        },
+      }),
+    },
+  ]
+}

package/src/converters/converter.portable-text.ts

@@ -18,7 +18,10 @@ export const converterPortableText = defineConverter({
     }
 
     const blocks = sliceBlocks({
-      context: snapshot.context,
+      context: {
+        selection,
+        schema: snapshot.context.schema,
+      },
       blocks: snapshot.context.value,
     })
 

package/src/converters/converter.text-html.ts

@@ -26,7 +26,10 @@ export function createConverterTextHtml(
       }
 
       const blocks = sliceBlocks({
-        context: snapshot.context,
+        context: {
+          selection,
+          schema: snapshot.context.schema,
+        },
         blocks: snapshot.context.value,
       })
 

package/src/converters/converter.text-plain.ts

@@ -25,7 +25,10 @@ export function createConverterTextPlain(
       }
 
       const blocks = sliceBlocks({
-        context: snapshot.context,
+        context: {
+          selection,
+          schema: snapshot.context.schema,
+        },
         blocks: snapshot.context.value,
       })
 

package/src/editor/Editable.tsx

@@ -10,7 +10,6 @@ import {
   useRef,
   useState,
   type ClipboardEvent,
-  type CSSProperties,
   type FocusEventHandler,
   type KeyboardEvent,
   type MutableRefObject,
@@ -53,8 +52,9 @@ import type {
 import type {HotkeyOptions} from '../types/options'
 import {isSelectionCollapsed} from '../utils'
 import {getSelectionEndPoint} from '../utils/util.get-selection-end-point'
-import {Element} from './components/Element'
-import {Leaf} from './components/Leaf'
+import {RenderElement} from './components/render-element'
+import {RenderLeaf} from './components/render-leaf'
+import {RenderText, type RenderTextProps} from './components/render-text'
 import {EditorActorContext} from './editor-actor-context'
 import {getEditorSnapshot} from './editor-selector'
 import {usePortableTextEditor} from './hooks/usePortableTextEditor'
@@ -67,14 +67,6 @@ import {
 
 const debug = debugWithName('component:Editable')
 
-const PLACEHOLDER_STYLE: CSSProperties = {
-  position: 'absolute',
-  userSelect: 'none',
-  pointerEvents: 'none',
-  left: 0,
-  right: 0,
-}
-
 /**
  * @public
  */
@@ -223,19 +215,17 @@ export const PortableTextEditable = forwardRef<
 
   const renderElement = useCallback(
     (eProps: RenderElementProps) => (
-      <Element
+      <RenderElement
         {...eProps}
         readOnly={readOnly}
         renderBlock={renderBlock}
         renderChild={renderChild}
         renderListItem={renderListItem}
         renderStyle={renderStyle}
-        schemaTypes={portableTextEditor.schemaTypes}
         spellCheck={spellCheck}
       />
     ),
     [
-      portableTextEditor,
       spellCheck,
       readOnly,
       renderBlock,
@@ -247,47 +237,20 @@ export const PortableTextEditable = forwardRef<
 
   const renderLeaf = useCallback(
     (
-      lProps: RenderLeafProps & {
+      leafProps: RenderLeafProps & {
         leaf: Text & {placeholder?: boolean; rangeDecoration?: RangeDecoration}
       },
-    ) => {
-      if (lProps.leaf._type === 'span') {
-        let rendered = (
-          <Leaf
-            {...lProps}
-            editorActor={editorActor}
-            schemaTypes={portableTextEditor.schemaTypes}
-            renderAnnotation={renderAnnotation}
-            renderChild={renderChild}
-            renderDecorator={renderDecorator}
-            readOnly={readOnly}
-          />
-        )
-        if (
-          renderPlaceholder &&
-          lProps.leaf.placeholder &&
-          lProps.text.text === ''
-        ) {
-          return (
-            <>
-              <span style={PLACEHOLDER_STYLE} contentEditable={false}>
-                {renderPlaceholder()}
-              </span>
-              {rendered}
-            </>
-          )
-        }
-        const decoration = lProps.leaf.rangeDecoration
-        if (decoration) {
-          rendered = decoration.component({children: rendered})
-        }
-        return rendered
-      }
-      return lProps.children
-    },
+    ) => (
+      <RenderLeaf
+        {...leafProps}
+        readOnly={readOnly}
+        renderAnnotation={renderAnnotation}
+        renderChild={renderChild}
+        renderDecorator={renderDecorator}
+        renderPlaceholder={renderPlaceholder}
+      />
+    ),
     [
-      editorActor,
-      portableTextEditor,
       readOnly,
       renderAnnotation,
       renderChild,
@@ -296,6 +259,11 @@ export const PortableTextEditable = forwardRef<
     ],
   )
 
+  const renderText = useCallback(
+    (props: RenderTextProps) => <RenderText {...props} />,
+    [],
+  )
+
   const restoreSelectionFromProps = useCallback(() => {
     if (propsSelection) {
       debug(`Selection from props ${JSON.stringify(propsSelection)}`)
@@ -1227,6 +1195,7 @@ export const PortableTextEditable = forwardRef<
       renderPlaceholder={undefined}
       renderElement={renderElement}
       renderLeaf={renderLeaf}
+      renderText={renderText}
       scrollSelectionIntoView={scrollSelectionIntoViewToSlate}
     />
   )

package/src/editor/__tests__/PortableTextEditor.test.tsx

@@ -52,10 +52,16 @@ describe('initialization', () => {
   >
     <div
       class="pt-block pt-text-block pt-text-block-style-normal"
+      data-block-key="k0"
+      data-block-name="myTestBlockType"
+      data-block-type="text"
       data-slate-node="element"
     >
       <div>
         <span
+          data-child-key="k1"
+          data-child-name="span"
+          data-child-type="span"
           data-slate-node="text"
         >
           <span

package/src/editor/__tests__/RangeDecorations.test.tsx

@@ -125,7 +125,7 @@ describe('RangeDecorations', () => {
     )
     await waitFor(() => {
       expect([rangeDecorationIteration, 'updated-with-different']).toEqual([
-        3,
+        2,
         'updated-with-different',
       ])
     })
@@ -152,7 +152,7 @@ describe('RangeDecorations', () => {
     )
     await waitFor(() => {
       expect([rangeDecorationIteration, 'updated-with-different']).toEqual([
-        4,
+        3,
         'updated-with-different',
       ])
     })

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

@@ -0,0 +1,89 @@
+import type {PortableTextObject} from '@sanity/types'
+import {useSelector} from '@xstate/react'
+import {useContext, useRef, useState, type ReactElement} from 'react'
+import {Range, type Element as SlateElement} from 'slate'
+import {useSelected, useSlateStatic, 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 {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
+  readOnly: boolean
+  renderBlock?: RenderBlockFunction
+}) {
+  const [dragPositionBlock, setDragPositionBlock] =
+    useState<EventPositionBlock>()
+  const blockObjectRef = useRef<HTMLDivElement>(null)
+
+  const slateEditor = useSlateStatic()
+  const selected = useSelected()
+
+  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,
+      ),
+  )
+
+  if (!legacySchemaType) {
+    console.error(
+      `Block object type ${props.element._type} not found in Schema`,
+    )
+  }
+
+  const focused =
+    selected &&
+    slateEditor.selection !== null &&
+    Range.isCollapsed(slateEditor.selection)
+
+  return (
+    <div
+      {...props.attributes}
+      className="pt-block pt-object-block"
+      data-block-key={props.element._key}
+      data-block-name={props.element._type}
+      data-block-type="object"
+    >
+      {dragPositionBlock === 'start' ? <DropIndicator /> : null}
+      {props.children}
+      <div
+        ref={blockObjectRef}
+        contentEditable={false}
+        draggable={!props.readOnly}
+      >
+        {props.renderBlock && legacySchemaType ? (
+          props.renderBlock({
+            children: (
+              <RenderDefaultBlockObject blockObject={props.blockObject} />
+            ),
+            editorElementRef: blockObjectRef,
+            focused,
+            path: [{_key: props.element._key}],
+            schemaType: legacySchemaType,
+            selected,
+            type: legacySchemaType,
+            value: props.blockObject,
+          })
+        ) : (
+          <RenderDefaultBlockObject blockObject={props.blockObject} />
+        )}
+      </div>
+      {dragPositionBlock === 'end' ? <DropIndicator /> : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,21 @@
+import type {PortableTextChild, PortableTextObject} from '@sanity/types'
+
+export function RenderDefaultBlockObject(props: {
+  blockObject: PortableTextObject
+}) {
+  return (
+    <div style={{userSelect: 'none'}}>
+      [{props.blockObject._type}: {props.blockObject._key}]
+    </div>
+  )
+}
+
+export function RenderDefaultInlineObject(props: {
+  inlineObject: PortableTextObject | PortableTextChild
+}) {
+  return (
+    <span style={{userSelect: 'none'}}>
+      [{props.inlineObject._type}: {props.inlineObject._key}]
+    </span>
+  )
+}

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

@@ -0,0 +1,140 @@
+import {useSelector} from '@xstate/react'
+import {useContext, type ReactElement} from 'react'
+import type {Element as SlateElement} from 'slate'
+import type {RenderElementProps} from 'slate-react'
+import {
+  parseBlockObject,
+  parseInlineObject,
+  parseTextBlock,
+} from '../../internal-utils/parse-blocks'
+import type {
+  RenderBlockFunction,
+  RenderChildFunction,
+  RenderListItemFunction,
+  RenderStyleFunction,
+} from '../../types/editor'
+import {EditorActorContext} from '../editor-actor-context'
+import {RenderBlockObject} from './render-block-object'
+import {RenderInlineObject} from './render-inline-object'
+import {RenderTextBlock} from './render-text-block'
+
+export function RenderElement(props: {
+  attributes: RenderElementProps['attributes']
+  children: ReactElement
+  element: SlateElement
+  readOnly: boolean
+  renderBlock?: RenderBlockFunction
+  renderChild?: RenderChildFunction
+  renderListItem?: RenderListItemFunction
+  renderStyle?: RenderStyleFunction
+  spellCheck?: boolean
+}) {
+  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 = parseInlineObject({
+      context: {
+        keyGenerator: () => '',
+        schema,
+      },
+      options: {refreshKeys: false},
+      inlineObject: {
+        _key: props.element._key,
+        _type: props.element._type,
+        ...('value' in props.element && typeof props.element.value === 'object'
+          ? props.element.value
+          : {}),
+      },
+    })
+
+    if (!inlineObject) {
+      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 textBlock = parseTextBlock({
+    context: {
+      keyGenerator: () => '',
+      schema,
+    },
+    options: {refreshKeys: false},
+    block: props.element,
+  })
+
+  if (textBlock) {
+    return (
+      <RenderTextBlock
+        attributes={props.attributes}
+        element={props.element}
+        readOnly={props.readOnly}
+        renderBlock={props.renderBlock}
+        renderListItem={props.renderListItem}
+        renderStyle={props.renderStyle}
+        spellCheck={props.spellCheck}
+        textBlock={textBlock}
+      >
+        {props.children}
+      </RenderTextBlock>
+    )
+  }
+
+  const blockObject = parseBlockObject({
+    context: {
+      keyGenerator: () => '',
+      schema,
+    },
+    options: {refreshKeys: false},
+    blockObject: {
+      _key: props.element._key,
+      _type: props.element._type,
+      ...('value' in props.element && typeof props.element.value === 'object'
+        ? props.element.value
+        : {}),
+    },
+  })
+
+  if (!blockObject) {
+    console.error(
+      `Unable to find Block Object "${props.element._type}" in Schema`,
+    )
+  }
+
+  return (
+    <RenderBlockObject
+      attributes={props.attributes}
+      blockObject={
+        blockObject ?? {
+          _key: props.element._key,
+          _type: props.element._type,
+        }
+      }
+      element={props.element}
+      readOnly={props.readOnly}
+      renderBlock={props.renderBlock}
+    >
+      {props.children}
+    </RenderBlockObject>
+  )
+}

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

@@ -0,0 +1,90 @@
+import type {PortableTextObject} from '@sanity/types'
+import {useSelector} from '@xstate/react'
+import {useContext, 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 {getPointBlock} from '../../internal-utils/slate-utils'
+import type {RenderChildFunction} from '../../types/editor'
+import {EditorActorContext} from '../editor-actor-context'
+import {RenderDefaultInlineObject} from './render-default-object'
+
+export function RenderInlineObject(props: {
+  attributes: RenderElementProps['attributes']
+  children: ReactElement
+  element: SlateElement
+  inlineObject: PortableTextObject
+  readOnly: boolean
+  renderChild?: RenderChildFunction
+}) {
+  const inlineObjectRef = useRef<HTMLElement>(null)
+
+  const slateEditor = useSlateStatic()
+  const selected = useSelected()
+
+  const editorActor = useContext(EditorActorContext)
+  const legacySchemaType = useSelector(editorActor, (s) =>
+    s.context
+      .getLegacySchema()
+      .inlineObjects.find(
+        (inlineObject) => inlineObject.name === props.element._type,
+      ),
+  )
+
+  if (!legacySchemaType) {
+    console.error(
+      `Inline object type ${props.element._type} not found in Schema`,
+    )
+  }
+
+  const focused =
+    selected &&
+    slateEditor.selection !== null &&
+    Range.isCollapsed(slateEditor.selection)
+  const path = DOMEditor.findPath(slateEditor, props.element)
+  const [block] = getPointBlock({
+    editor: slateEditor,
+    point: {
+      path,
+      offset: 0,
+    },
+  })
+
+  if (!block) {
+    console.error(
+      `Unable to find parent block of inline object ${props.element._key}`,
+    )
+  }
+
+  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-type="object"
+    >
+      {props.children}
+      <span ref={inlineObjectRef} style={{display: 'inline-block'}}>
+        {props.renderChild && block && legacySchemaType ? (
+          props.renderChild({
+            annotations: [],
+            children: (
+              <RenderDefaultInlineObject inlineObject={props.inlineObject} />
+            ),
+            editorElementRef: inlineObjectRef,
+            selected,
+            focused,
+            path: [{_key: block._key}, 'children', {_key: props.element._key}],
+            schemaType: legacySchemaType,
+            value: props.inlineObject,
+            type: legacySchemaType,
+          })
+        ) : (
+          <RenderDefaultInlineObject inlineObject={props.inlineObject} />
+        )}
+      </span>
+    </span>
+  )
+}