@portabletext/editor 1.48.15 → 1.49.0

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

@@ -0,0 +1,148 @@
+import type {PortableTextTextBlock} 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,
+  RenderListItemFunction,
+  RenderStyleFunction,
+} from '../../types/editor'
+import {EditorActorContext} from '../editor-actor-context'
+import {DropIndicator} from './drop-indicator'
+import {useCoreBlockElementBehaviors} from './use-core-block-element-behaviors'
+
+export function RenderTextBlock(props: {
+  attributes: RenderElementProps['attributes']
+  children: ReactElement
+  element: SlateElement
+  readOnly: boolean
+  renderBlock?: RenderBlockFunction
+  renderListItem?: RenderListItemFunction
+  renderStyle?: RenderStyleFunction
+  spellCheck?: boolean
+  textBlock: PortableTextTextBlock
+}) {
+  const [dragPositionBlock, setDragPositionBlock] =
+    useState<EventPositionBlock>()
+  const blockRef = useRef<HTMLDivElement>(null)
+
+  const slateEditor = useSlateStatic()
+  const selected = useSelected()
+
+  const editorActor = useContext(EditorActorContext)
+
+  useCoreBlockElementBehaviors({
+    key: props.element._key,
+    onSetDragPositionBlock: setDragPositionBlock,
+  })
+
+  const legacySchema = useSelector(editorActor, (s) =>
+    s.context.getLegacySchema(),
+  )
+
+  const focused =
+    selected &&
+    slateEditor.selection !== null &&
+    Range.isCollapsed(slateEditor.selection)
+
+  let children = props.children
+
+  const legacyBlockSchemaType = legacySchema.block
+
+  if (props.renderStyle && props.textBlock.style) {
+    const legacyStyleSchemaType =
+      props.textBlock.style !== undefined
+        ? legacySchema.styles.find(
+            (style) => style.value === props.textBlock.style,
+          )
+        : undefined
+
+    if (legacyStyleSchemaType) {
+      children = props.renderStyle({
+        block: props.textBlock,
+        children,
+        editorElementRef: blockRef,
+        focused,
+        path: [{_key: props.textBlock._key}],
+        schemaType: legacyStyleSchemaType,
+        selected,
+        value: props.textBlock.style,
+      })
+    } else {
+      console.error(
+        `Unable to find Schema type for text block style ${props.textBlock.style}`,
+      )
+    }
+  }
+
+  if (props.renderListItem && props.textBlock.listItem) {
+    const legacyListItemSchemaType = legacySchema.lists.find(
+      (list) => list.value === props.textBlock.listItem,
+    )
+
+    if (legacyListItemSchemaType) {
+      children = props.renderListItem({
+        block: props.textBlock,
+        children,
+        editorElementRef: blockRef,
+        focused,
+        level: props.textBlock.level ?? 1,
+        path: [{_key: props.textBlock._key}],
+        selected,
+        value: props.textBlock.listItem,
+        schemaType: legacyListItemSchemaType,
+      })
+    } else {
+      console.error(
+        `Unable to find Schema type for text block list item ${props.textBlock.listItem}`,
+      )
+    }
+  }
+
+  return (
+    <div
+      key={props.element._key}
+      {...props.attributes}
+      className={[
+        'pt-block',
+        'pt-text-block',
+        ...(props.textBlock.style
+          ? [`pt-text-block-style-${props.textBlock.style}`]
+          : []),
+        ...(props.textBlock.listItem
+          ? [
+              'pt-list-item',
+              `pt-list-item-${props.textBlock.listItem}`,
+              `pt-list-item-level-${props.textBlock.level ?? 1}`,
+            ]
+          : []),
+      ].join(' ')}
+      spellCheck={props.spellCheck}
+      data-block-key={props.textBlock._key}
+      data-block-name={props.textBlock._type}
+      data-block-type="text"
+    >
+      {dragPositionBlock === 'start' ? <DropIndicator /> : null}
+      <div ref={blockRef}>
+        {props.renderBlock
+          ? props.renderBlock({
+              children,
+              editorElementRef: blockRef,
+              focused,
+              level: props.textBlock.level,
+              listItem: props.textBlock.listItem,
+              path: [{_key: props.textBlock._key}],
+              selected,
+              schemaType: legacyBlockSchemaType,
+              style: props.textBlock.style,
+              type: legacyBlockSchemaType,
+              value: props.textBlock,
+            })
+          : props.children}
+      </div>
+      {dragPositionBlock === 'end' ? <DropIndicator /> : null}
+    </div>
+  )
+}

package/src/editor/components/use-core-block-element-behaviors.ts

@@ -0,0 +1,39 @@
+import {useContext, useEffect} from 'react'
+import {createCoreBlockElementBehaviorsConfig} from '../../behaviors/behavior.core.block-element'
+import type {EventPositionBlock} from '../../internal-utils/event-position'
+import {EditorActorContext} from '../editor-actor-context'
+
+export function useCoreBlockElementBehaviors({
+  key,
+  onSetDragPositionBlock,
+}: {
+  key: string
+  onSetDragPositionBlock: (
+    eventPositionBlock: EventPositionBlock | undefined,
+  ) => void
+}) {
+  const editorActor = useContext(EditorActorContext)
+
+  useEffect(() => {
+    const behaviorConfigs = createCoreBlockElementBehaviorsConfig({
+      key,
+      onSetDragPositionBlock,
+    })
+
+    for (const behaviorConfig of behaviorConfigs) {
+      editorActor.send({
+        type: 'add behavior',
+        behaviorConfig,
+      })
+    }
+
+    return () => {
+      for (const behaviorConfig of behaviorConfigs) {
+        editorActor.send({
+          type: 'remove behavior',
+          behaviorConfig,
+        })
+      }
+    }
+  }, [editorActor, key, onSetDragPositionBlock])
+}

package/src/internal-utils/parse-blocks.ts

@@ -49,7 +49,7 @@ export function parseBlock({
   )
 }
 
-function parseBlockObject({
+export function parseBlockObject({
   blockObject,
   context,
   options,
@@ -104,7 +104,7 @@ export function isTextBlock(
   )
 }
 
-function parseTextBlock({
+export function parseTextBlock({
   block,
   context,
   options,

package/src/internal-utils/slate-utils.ts

@@ -73,7 +73,7 @@ export function getSelectionEndBlock({
   return getPointBlock({editor, point: selectionEndPoint})
 }
 
-function getPointBlock({
+export function getPointBlock({
   editor,
   point,
 }: {

package/src/editor/components/DefaultObject.tsx

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

package/src/editor/components/Element.tsx

@@ -1,461 +0,0 @@
-import type {
-  Path,
-  PortableTextChild,
-  PortableTextObject,
-  PortableTextTextBlock,
-} from '@sanity/types'
-import {
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type FunctionComponent,
-  type JSX,
-  type ReactElement,
-} from 'react'
-import {Editor, Range, Element as SlateElement} from 'slate'
-import {
-  ReactEditor,
-  useSelected,
-  useSlateStatic,
-  type RenderElementProps,
-} from 'slate-react'
-import {defineBehavior, forward} from '../../behaviors'
-import {debugWithName} from '../../internal-utils/debug'
-import type {EventPositionBlock} from '../../internal-utils/event-position'
-import {fromSlateValue} from '../../internal-utils/values'
-import {KEY_TO_VALUE_ELEMENT} from '../../internal-utils/weakMaps'
-import {corePriority} from '../../priority/priority.core'
-import {createEditorPriority} from '../../priority/priority.types'
-import * as selectors from '../../selectors'
-import type {
-  BlockRenderProps,
-  PortableTextMemberSchemaTypes,
-  RenderBlockFunction,
-  RenderChildFunction,
-  RenderListItemFunction,
-  RenderStyleFunction,
-} from '../../types/editor'
-import {EditorActorContext} from '../editor-actor-context'
-import {DefaultBlockObject, DefaultInlineObject} from './DefaultObject'
-import {DropIndicator} from './drop-indicator'
-
-const debug = debugWithName('components:Element')
-const debugRenders = false
-const EMPTY_ANNOTATIONS: PortableTextObject[] = []
-
-/**
- * @internal
- */
-export interface ElementProps {
-  attributes: RenderElementProps['attributes']
-  children: ReactElement<any>
-  element: SlateElement
-  schemaTypes: PortableTextMemberSchemaTypes
-  readOnly: boolean
-  renderBlock?: RenderBlockFunction
-  renderChild?: RenderChildFunction
-  renderListItem?: RenderListItemFunction
-  renderStyle?: RenderStyleFunction
-  spellCheck?: boolean
-}
-
-const inlineBlockStyle = {display: 'inline-block'}
-
-/**
- * Renders Portable Text block and inline object nodes in Slate
- * @internal
- */
-export const Element: FunctionComponent<ElementProps> = ({
-  attributes,
-  children,
-  element,
-  schemaTypes,
-  readOnly,
-  renderBlock,
-  renderChild,
-  renderListItem,
-  renderStyle,
-  spellCheck,
-}) => {
-  const editorActor = useContext(EditorActorContext)
-  const slateEditor = useSlateStatic()
-  const selected = useSelected()
-  const blockRef = useRef<HTMLDivElement | null>(null)
-  const inlineBlockObjectRef = useRef(null)
-  const focused =
-    (selected &&
-      slateEditor.selection &&
-      Range.isCollapsed(slateEditor.selection)) ||
-    false
-  const [dragPositionBlock, setDragPositionBlock] =
-    useState<EventPositionBlock>()
-
-  useEffect(() => {
-    const 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 !== element._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 === element._key,
-          )
-        ) {
-          return false
-        }
-
-        const draggingEntireBlocks = selectors.isSelectingEntireBlocks({
-          ...snapshot,
-          context: {
-            ...snapshot.context,
-            selection: dragOrigin.selection,
-          },
-        })
-
-        return draggingEntireBlocks
-      },
-      actions: [
-        ({event}) => [
-          {
-            type: 'effect',
-            effect: () => {
-              setDragPositionBlock(event.position.block)
-            },
-          },
-        ],
-      ],
-    })
-
-    const priority = createEditorPriority({
-      reference: {
-        priority: corePriority,
-        importance: 'lower',
-      },
-    })
-
-    const behaviorConfig = {
-      behavior,
-      priority,
-    }
-
-    editorActor.send({
-      type: 'add behavior',
-      behaviorConfig,
-    })
-
-    return () => {
-      editorActor.send({
-        type: 'remove behavior',
-        behaviorConfig,
-      })
-    }
-  }, [editorActor, element._key])
-
-  useEffect(() => {
-    const behavior = defineBehavior({
-      on: 'drag.*',
-      guard: ({event}) => {
-        return event.type !== 'drag.dragover'
-      },
-      actions: [
-        ({event}) => [
-          {
-            type: 'effect',
-            effect: () => {
-              setDragPositionBlock(undefined)
-            },
-          },
-          forward(event),
-        ],
-      ],
-    })
-
-    const priority = createEditorPriority({
-      reference: {
-        priority: corePriority,
-        importance: 'lower',
-      },
-    })
-
-    const behaviorConfig = {
-      behavior,
-      priority,
-    }
-
-    editorActor.send({
-      type: 'add behavior',
-      behaviorConfig,
-    })
-
-    return () => {
-      editorActor.send({
-        type: 'remove behavior',
-        behaviorConfig,
-      })
-    }
-  }, [editorActor])
-
-  const value = useMemo(
-    () =>
-      fromSlateValue(
-        [element],
-        schemaTypes.block.name,
-        KEY_TO_VALUE_ELEMENT.get(slateEditor),
-      )[0],
-    [slateEditor, element, schemaTypes.block.name],
-  )
-
-  let renderedBlock = children
-
-  let className: string | undefined
-
-  const blockPath: Path = useMemo(() => [{_key: element._key}], [element])
-
-  if (typeof element._type !== 'string') {
-    throw new Error(`Expected element to have a _type property`)
-  }
-
-  if (typeof element._key !== 'string') {
-    throw new Error(`Expected element to have a _key property`)
-  }
-
-  // Test for inline objects first
-  if (slateEditor.isInline(element)) {
-    const path = ReactEditor.findPath(slateEditor, element)
-    const [block] = Editor.node(slateEditor, path, {depth: 1})
-    const schemaType = schemaTypes.inlineObjects.find(
-      (_type) => _type.name === element._type,
-    )
-    if (!schemaType) {
-      throw new Error('Could not find type for inline block element')
-    }
-    if (SlateElement.isElement(block)) {
-      const elmPath: Path = [
-        {_key: block._key},
-        'children',
-        {_key: element._key},
-      ]
-      if (debugRenders) {
-        debug(`Render ${element._key} (inline object)`)
-      }
-      return (
-        <span {...attributes}>
-          {/* Note that children must follow immediately or cut and selections will not work properly in Chrome. */}
-          {children}
-          <span
-            draggable={!readOnly}
-            className="pt-inline-object"
-            data-testid="pt-inline-object"
-            ref={inlineBlockObjectRef}
-            key={element._key}
-            style={inlineBlockStyle}
-            contentEditable={false}
-          >
-            {renderChild &&
-              renderChild({
-                annotations: EMPTY_ANNOTATIONS, // These inline objects currently doesn't support annotations. This is a limitation of the current PT spec/model.
-                children: <DefaultInlineObject value={value} />,
-                editorElementRef: inlineBlockObjectRef,
-                focused,
-                path: elmPath,
-                schemaType,
-                selected,
-                type: schemaType,
-                value: value as PortableTextChild,
-              })}
-            {!renderChild && <DefaultInlineObject value={value} />}
-          </span>
-        </span>
-      )
-    }
-    throw new Error('Block not found!')
-  }
-
-  // If not inline, it's either a block (text) or a block object (non-text)
-  // NOTE: text blocks aren't draggable with DraggableBlock (yet?)
-  if (element._type === schemaTypes.block.name) {
-    className = `pt-block pt-text-block`
-    const isListItem = 'listItem' in element
-    if (debugRenders) {
-      debug(`Render ${element._key} (text block)`)
-    }
-    const style = ('style' in element && element.style) || 'normal'
-    className = `pt-block pt-text-block pt-text-block-style-${style}`
-    const blockStyleType = schemaTypes.styles.find(
-      (item) => item.value === style,
-    )
-    if (renderStyle && blockStyleType) {
-      renderedBlock = renderStyle({
-        block: element as PortableTextTextBlock,
-        children,
-        focused,
-        selected,
-        value: style,
-        path: blockPath,
-        schemaType: blockStyleType,
-        editorElementRef: blockRef,
-      })
-    }
-    let level: number | undefined
-
-    if (isListItem) {
-      if (typeof element.level === 'number') {
-        level = element.level
-      }
-      className += ` pt-list-item pt-list-item-${element.listItem} pt-list-item-level-${level || 1}`
-    }
-
-    if (slateEditor.isListBlock(value) && isListItem && element.listItem) {
-      const listType = schemaTypes.lists.find(
-        (item) => item.value === element.listItem,
-      )
-      if (renderListItem && listType) {
-        renderedBlock = renderListItem({
-          block: value,
-          children: renderedBlock,
-          focused,
-          selected,
-          value: element.listItem,
-          path: blockPath,
-          schemaType: listType,
-          level: value.level || 1,
-          editorElementRef: blockRef,
-        })
-      }
-    }
-
-    const renderProps: Omit<BlockRenderProps, 'type'> = Object.defineProperty(
-      {
-        children: renderedBlock,
-        editorElementRef: blockRef,
-        focused,
-        level,
-        listItem: isListItem ? element.listItem : undefined,
-        path: blockPath,
-        selected,
-        style,
-        schemaType: schemaTypes.block,
-        value,
-      },
-      'type',
-      {
-        enumerable: false,
-        get() {
-          console.warn(
-            "Property 'type' is deprecated, use 'schemaType' instead.",
-          )
-          return schemaTypes.block
-        },
-      },
-    )
-
-    const propsOrDefaultRendered = renderBlock
-      ? renderBlock(renderProps as BlockRenderProps)
-      : children
-
-    return (
-      <div
-        key={element._key}
-        {...attributes}
-        className={className}
-        spellCheck={spellCheck}
-      >
-        {dragPositionBlock === 'start' ? <DropIndicator /> : null}
-        <div ref={blockRef}>{propsOrDefaultRendered}</div>
-        {dragPositionBlock === 'end' ? <DropIndicator /> : null}
-      </div>
-    )
-  }
-
-  const schemaType = schemaTypes.blockObjects.find(
-    (_type) => _type.name === element._type,
-  )
-
-  if (!schemaType) {
-    throw new Error(
-      `Could not find schema type for block element of _type ${element._type}`,
-    )
-  }
-
-  if (debugRenders) {
-    debug(`Render ${element._key} (object block)`)
-  }
-
-  className = 'pt-block pt-object-block'
-
-  const block = fromSlateValue(
-    [element],
-    schemaTypes.block.name,
-    KEY_TO_VALUE_ELEMENT.get(slateEditor),
-  )[0]
-
-  let renderedBlockFromProps: JSX.Element | undefined
-
-  if (renderBlock) {
-    const _props: Omit<BlockRenderProps, 'type'> = Object.defineProperty(
-      {
-        children: <DefaultBlockObject value={value} />,
-        editorElementRef: blockRef,
-        focused,
-        path: blockPath,
-        schemaType,
-        selected,
-        value: block,
-      },
-      'type',
-      {
-        enumerable: false,
-        get() {
-          console.warn(
-            "Property 'type' is deprecated, use 'schemaType' instead.",
-          )
-          return schemaType
-        },
-      },
-    )
-    renderedBlockFromProps = renderBlock(_props as BlockRenderProps)
-  }
-
-  return (
-    <div key={element._key} {...attributes} className={className}>
-      {dragPositionBlock === 'start' ? <DropIndicator /> : null}
-      {children}
-      <div ref={blockRef} contentEditable={false} draggable={!readOnly}>
-        {renderedBlockFromProps ? (
-          renderedBlockFromProps
-        ) : (
-          <DefaultBlockObject value={value} />
-        )}
-      </div>
-      {dragPositionBlock === 'end' ? <DropIndicator /> : null}
-    </div>
-  )
-}
-
-Element.displayName = 'Element'