@portabletext/editor 1.48.14 → 1.49.0

package/package.json

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

package/src/behaviors/behavior.config.ts

@@ -0,0 +1,7 @@
+import type {EditorPriority} from '../priority/priority.types'
+import type {Behavior} from './behavior.types.behavior'
+
+export type BehaviorConfig = {
+  behavior: Behavior
+  priority: EditorPriority
+}

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/behaviors/behavior.core.ts

@@ -1,3 +1,4 @@
+import {corePriority} from '../priority/priority.core'
 import {coreAnnotationBehaviors} from './behavior.core.annotations'
 import {coreBlockObjectBehaviors} from './behavior.core.block-objects'
 import {coreDecoratorBehaviors} from './behavior.core.decorators'
@@ -5,7 +6,7 @@ import {coreDndBehaviors} from './behavior.core.dnd'
 import {coreInsertBreakBehaviors} from './behavior.core.insert-break'
 import {coreListBehaviors} from './behavior.core.lists'
 
-export const coreBehaviors = [
+export const coreBehaviorsConfig = [
   coreAnnotationBehaviors.addAnnotationOnCollapsedSelection,
   coreDecoratorBehaviors.strongShortcut,
   coreDecoratorBehaviors.emShortcut,
@@ -28,4 +29,7 @@ export const coreBehaviors = [
   coreInsertBreakBehaviors.breakingAtTheStartOfTextBlock,
   coreInsertBreakBehaviors.breakingEntireDocument,
   coreInsertBreakBehaviors.breakingEntireBlocks,
-]
+].map((behavior) => ({
+  behavior,
+  priority: corePriority,
+}))

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

@@ -53,8 +53,8 @@ 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 {EditorActorContext} from './editor-actor-context'
 import {getEditorSnapshot} from './editor-selector'
 import {usePortableTextEditor} from './hooks/usePortableTextEditor'
@@ -223,19 +223,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,

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

@@ -52,6 +52,9 @@ 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>
@@ -65,6 +68,9 @@ describe('initialization', () => {
             Jot something down here
           </span>
           <span
+            data-child-key="k1"
+            data-child-name="span"
+            data-child-type="span"
             data-slate-leaf="true"
           >
             <span

package/src/editor/components/Leaf.tsx

@@ -318,7 +318,14 @@ export const Leaf = (props: LeafProps) => {
   ])
   return useMemo(
     () => (
-      <span key={leaf._key} {...attributes} ref={spanRef}>
+      <span
+        key={leaf._key}
+        {...attributes}
+        ref={spanRef}
+        data-child-key={leaf._key}
+        data-child-name={leaf._type}
+        data-child-type="span"
+      >
         {content}
       </span>
     ),

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

@@ -0,0 +1,90 @@
+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
+      key={props.element._key}
+      {...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,93 @@
+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}>
+      {props.children}
+      <span
+        draggable={!props.readOnly}
+        className="pt-inline-object"
+        data-testid="pt-inline-object"
+        ref={inlineObjectRef}
+        key={props.element._key}
+        style={{display: 'inline-block'}}
+        data-child-key={props.inlineObject._key}
+        data-child-name={props.inlineObject._type}
+        data-child-type="object"
+      >
+        {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>
+  )
+}