@portabletext/editor 3.3.2 → 3.3.4

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

@@ -1,303 +0,0 @@
-import {isTextBlock} from '@portabletext/schema'
-import {useSelector} from '@xstate/react'
-import {uniq} from 'lodash'
-import {useContext, useMemo, useRef, type ReactElement} from 'react'
-import {useSlateStatic, type RenderLeafProps} from 'slate-react'
-import {getFocusSpan} from '../../selectors/selector.get-focus-span'
-import {isOverlappingSelection} from '../../selectors/selector.is-overlapping-selection'
-import {isSelectionCollapsed} from '../../selectors/selector.is-selection-collapsed'
-import type {
-  BlockAnnotationRenderProps,
-  BlockChildRenderProps,
-  BlockDecoratorRenderProps,
-  EditorSelection,
-  RenderAnnotationFunction,
-  RenderChildFunction,
-  RenderDecoratorFunction,
-} from '../../types/editor'
-import {EditorActorContext} from '../editor-actor-context'
-import {getEditorSnapshot} from '../editor-selector'
-
-export interface RenderSpanProps extends RenderLeafProps {
-  children: ReactElement<any>
-  renderAnnotation?: RenderAnnotationFunction
-  renderChild?: RenderChildFunction
-  renderDecorator?: RenderDecoratorFunction
-  readOnly: boolean
-}
-
-export function RenderSpan(props: RenderSpanProps) {
-  const slateEditor = useSlateStatic()
-  const editorActor = useContext(EditorActorContext)
-  const legacySchema = useSelector(editorActor, (s) =>
-    s.context.getLegacySchema(),
-  )
-  const spanRef = useRef<HTMLElement>(null)
-
-  /**
-   * A span is considered focused if the selection is collapsed and the caret
-   * is inside the span.
-   */
-  const focused = useSelector(editorActor, (editorActorSnapshot) => {
-    const snapshot = getEditorSnapshot({
-      editorActorSnapshot,
-      slateEditorInstance: slateEditor,
-    })
-
-    if (!snapshot.context.selection) {
-      return false
-    }
-
-    if (!isSelectionCollapsed(snapshot)) {
-      return false
-    }
-
-    const focusedSpan = getFocusSpan(snapshot)
-
-    if (!focusedSpan) {
-      return false
-    }
-
-    return focusedSpan.node._key === props.leaf._key
-  })
-
-  /**
-   * A span is considered selected if editor selection is overlapping with the
-   * span selection points.
-   */
-  const selected = useSelector(editorActor, (editorActorSnapshot) => {
-    const snapshot = getEditorSnapshot({
-      editorActorSnapshot,
-      slateEditorInstance: slateEditor,
-    })
-
-    if (!snapshot.context.selection) {
-      return false
-    }
-
-    const parent = props.children.props.parent
-    const block =
-      parent && isTextBlock(snapshot.context, parent) ? parent : undefined
-    const spanSelection: EditorSelection = block
-      ? {
-          anchor: {
-            path: [{_key: block._key}, 'children', {_key: props.leaf._key}],
-            offset: 0,
-          },
-          focus: {
-            path: [{_key: block._key}, 'children', {_key: props.leaf._key}],
-            offset: props.leaf.text.length,
-          },
-        }
-      : null
-
-    return isOverlappingSelection(spanSelection)(snapshot)
-  })
-
-  const parent = props.children.props.parent
-  const block = parent && slateEditor.isTextBlock(parent) ? parent : undefined
-
-  const path = useMemo(
-    () =>
-      block
-        ? [{_key: block._key}, 'children', {_key: props.leaf._key}]
-        : undefined,
-    [block, props.leaf._key],
-  )
-
-  const decoratorSchemaTypes = editorActor
-    .getSnapshot()
-    .context.schema.decorators.map((decorator) => decorator.name)
-
-  const decorators = uniq(
-    (props.leaf.marks ?? []).filter((mark) =>
-      decoratorSchemaTypes.includes(mark),
-    ),
-  )
-
-  const annotationMarkDefs = (props.leaf.marks ?? []).flatMap((mark) => {
-    if (decoratorSchemaTypes.includes(mark)) {
-      return []
-    }
-
-    const markDef = block?.markDefs?.find((markDef) => markDef._key === mark)
-
-    if (markDef) {
-      return [markDef]
-    }
-
-    return []
-  })
-
-  let children = props.children
-
-  /**
-   * Support `renderDecorator` render function for each Decorator
-   */
-  for (const mark of decorators) {
-    const legacyDecoratorSchemaType = legacySchema.decorators.find(
-      (dec) => dec.value === mark,
-    )
-
-    if (path && legacyDecoratorSchemaType && props.renderDecorator) {
-      children = (
-        <RenderDecorator
-          renderDecorator={props.renderDecorator}
-          editorElementRef={spanRef}
-          focused={focused}
-          path={path}
-          selected={selected}
-          schemaType={legacyDecoratorSchemaType}
-          value={mark}
-          type={legacyDecoratorSchemaType}
-        >
-          {children}
-        </RenderDecorator>
-      )
-    }
-  }
-
-  /**
-   * Support `renderAnnotation` render function for each Annotation
-   */
-  for (const annotationMarkDef of annotationMarkDefs) {
-    const legacyAnnotationSchemaType = legacySchema.annotations.find(
-      (t) => t.name === annotationMarkDef._type,
-    )
-    if (legacyAnnotationSchemaType) {
-      if (block && path && props.renderAnnotation) {
-        children = (
-          <span ref={spanRef}>
-            <RenderAnnotation
-              renderAnnotation={props.renderAnnotation}
-              block={block}
-              editorElementRef={spanRef}
-              focused={focused}
-              path={path}
-              selected={selected}
-              schemaType={legacyAnnotationSchemaType}
-              value={annotationMarkDef}
-              type={legacyAnnotationSchemaType}
-            >
-              {children}
-            </RenderAnnotation>
-          </span>
-        )
-      } else {
-        children = <span ref={spanRef}>{children}</span>
-      }
-    }
-  }
-
-  /**
-   * Support `renderChild` render function for the Span itself
-   */
-  if (block && path && props.renderChild) {
-    const child = block.children.find(
-      (_child) => _child._key === props.leaf._key,
-    ) // Ensure object equality
-
-    if (child) {
-      children = (
-        <RenderChild
-          renderChild={props.renderChild}
-          annotations={annotationMarkDefs}
-          editorElementRef={spanRef}
-          focused={focused}
-          path={path}
-          schemaType={legacySchema.span}
-          selected={selected}
-          value={child}
-          type={legacySchema.span}
-        >
-          {children}
-        </RenderChild>
-      )
-    }
-  }
-
-  return (
-    <span {...props.attributes} ref={spanRef}>
-      {children}
-    </span>
-  )
-}
-
-function RenderAnnotation({
-  renderAnnotation,
-  block,
-  children,
-  editorElementRef,
-  focused,
-  path,
-  schemaType,
-  selected,
-  value,
-  type,
-}: {
-  renderAnnotation: RenderAnnotationFunction
-} & BlockAnnotationRenderProps) {
-  return renderAnnotation({
-    block,
-    children,
-    editorElementRef,
-    focused,
-    path,
-    schemaType,
-    selected,
-    value,
-    type,
-  })
-}
-
-function RenderDecorator({
-  renderDecorator,
-  children,
-  editorElementRef,
-  focused,
-  path,
-  schemaType,
-  selected,
-  value,
-  type,
-}: {
-  renderDecorator: RenderDecoratorFunction
-} & BlockDecoratorRenderProps) {
-  return renderDecorator({
-    children,
-    editorElementRef,
-    focused,
-    path,
-    schemaType,
-    selected,
-    value,
-    type,
-  })
-}
-
-function RenderChild({
-  renderChild,
-  annotations,
-  children,
-  editorElementRef,
-  focused,
-  path,
-  schemaType,
-  selected,
-  value,
-  type,
-}: {
-  renderChild: RenderChildFunction
-} & BlockChildRenderProps) {
-  return renderChild({
-    annotations,
-    children,
-    editorElementRef,
-    focused,
-    path,
-    schemaType,
-    selected,
-    value,
-    type,
-  })
-}

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

@@ -1,265 +0,0 @@
-import type {PortableTextTextBlock} from '@sanity/types'
-import {useRef, useState, type ReactElement} from 'react'
-import {Range, type Element as SlateElement} from 'slate'
-import {
-  useSelected,
-  useSlateSelector,
-  type RenderElementProps,
-} from 'slate-react'
-import type {EventPositionBlock} from '../../internal-utils/event-position'
-import type {
-  BlockListItemRenderProps,
-  BlockRenderProps,
-  BlockStyleRenderProps,
-  PortableTextMemberSchemaTypes,
-  RenderBlockFunction,
-  RenderListItemFunction,
-  RenderStyleFunction,
-} from '../../types/editor'
-import {DropIndicator} from './drop-indicator'
-import {useCoreBlockElementBehaviors} from './use-core-block-element-behaviors'
-
-export function RenderTextBlock(props: {
-  attributes: RenderElementProps['attributes']
-  children: ReactElement
-  element: SlateElement
-  legacySchema: PortableTextMemberSchemaTypes
-  readOnly: boolean
-  renderBlock?: RenderBlockFunction
-  renderListItem?: RenderListItemFunction
-  renderStyle?: RenderStyleFunction
-  spellCheck?: boolean
-  textBlock: PortableTextTextBlock
-}) {
-  const [dragPositionBlock, setDragPositionBlock] =
-    useState<EventPositionBlock>()
-  const blockRef = useRef<HTMLDivElement>(null)
-
-  const selected = useSelected()
-  const focused = useSlateSelector(
-    (editor) =>
-      selected &&
-      editor.selection !== null &&
-      Range.isCollapsed(editor.selection),
-  )
-
-  useCoreBlockElementBehaviors({
-    key: props.element._key,
-    onSetDragPositionBlock: setDragPositionBlock,
-  })
-
-  const listIndex = useSlateSelector((editor) =>
-    editor.listIndexMap.get(props.textBlock._key),
-  )
-
-  let children = props.children
-
-  if (props.renderStyle && props.textBlock.style) {
-    const legacyStyleSchemaType =
-      props.textBlock.style !== undefined
-        ? props.legacySchema.styles.find(
-            (style) => style.value === props.textBlock.style,
-          )
-        : undefined
-
-    if (legacyStyleSchemaType) {
-      children = (
-        <RenderStyle
-          renderStyle={props.renderStyle}
-          block={props.textBlock}
-          editorElementRef={blockRef}
-          focused={focused}
-          path={[{_key: props.textBlock._key}]}
-          schemaType={legacyStyleSchemaType}
-          selected={selected}
-          value={props.textBlock.style}
-        >
-          {children}
-        </RenderStyle>
-      )
-    } else {
-      console.error(
-        `Unable to find Schema type for text block style ${props.textBlock.style}`,
-      )
-    }
-  }
-
-  if (props.renderListItem && props.textBlock.listItem) {
-    const legacyListItemSchemaType = props.legacySchema.lists.find(
-      (list) => list.value === props.textBlock.listItem,
-    )
-
-    if (legacyListItemSchemaType) {
-      children = (
-        <RenderListItem
-          renderListItem={props.renderListItem}
-          block={props.textBlock}
-          editorElementRef={blockRef}
-          focused={focused}
-          level={props.textBlock.level ?? 1}
-          path={[{_key: props.textBlock._key}]}
-          selected={selected}
-          value={props.textBlock.listItem}
-          schemaType={legacyListItemSchemaType}
-        >
-          {children}
-        </RenderListItem>
-      )
-    } else {
-      console.error(
-        `Unable to find Schema type for text block list item ${props.textBlock.listItem}`,
-      )
-    }
-  }
-
-  return (
-    <div
-      {...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"
-      {...(props.textBlock.listItem !== undefined
-        ? {
-            'data-list-item': props.textBlock.listItem,
-          }
-        : {})}
-      {...(props.textBlock.level !== undefined
-        ? {
-            'data-level': props.textBlock.level,
-          }
-        : {})}
-      {...(props.textBlock.style !== undefined
-        ? {
-            'data-style': props.textBlock.style,
-          }
-        : {})}
-      {...(listIndex !== undefined
-        ? {
-            'data-list-index': listIndex,
-          }
-        : {})}
-    >
-      {dragPositionBlock === 'start' ? <DropIndicator /> : null}
-      <div ref={blockRef}>
-        {props.renderBlock ? (
-          <RenderBlock
-            renderBlock={props.renderBlock}
-            editorElementRef={blockRef}
-            focused={focused}
-            level={props.textBlock.level}
-            listItem={props.textBlock.listItem}
-            path={[{_key: props.textBlock._key}]}
-            selected={selected}
-            schemaType={props.legacySchema.block}
-            style={props.textBlock.style}
-            type={props.legacySchema.block}
-            value={props.textBlock}
-          >
-            {children}
-          </RenderBlock>
-        ) : (
-          children
-        )}
-      </div>
-      {dragPositionBlock === 'end' ? <DropIndicator /> : null}
-    </div>
-  )
-}
-
-function RenderBlock({
-  renderBlock,
-  children,
-  editorElementRef,
-  focused,
-  level,
-  listItem,
-  path,
-  selected,
-  style,
-  schemaType,
-  type,
-  value,
-}: {
-  renderBlock: RenderBlockFunction
-} & BlockRenderProps) {
-  return renderBlock({
-    children,
-    editorElementRef,
-    focused,
-    level,
-    listItem,
-    path,
-    selected,
-    style,
-    schemaType,
-    type,
-    value,
-  })
-}
-
-function RenderListItem({
-  renderListItem,
-  block,
-  children,
-  editorElementRef,
-  focused,
-  level,
-  path,
-  schemaType,
-  selected,
-  value,
-}: {
-  renderListItem: RenderListItemFunction
-} & BlockListItemRenderProps) {
-  return renderListItem({
-    block,
-    children,
-    editorElementRef,
-    focused,
-    level,
-    path,
-    schemaType,
-    selected,
-    value,
-  })
-}
-
-function RenderStyle({
-  renderStyle,
-  block,
-  children,
-  editorElementRef,
-  focused,
-  path,
-  schemaType,
-  selected,
-  value,
-}: {
-  renderStyle: RenderStyleFunction
-} & BlockStyleRenderProps) {
-  return renderStyle({
-    block,
-    children,
-    editorElementRef,
-    focused,
-    path,
-    schemaType,
-    selected,
-    value,
-  })
-}

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

@@ -1,18 +0,0 @@
-import type {Editable} from 'slate-react'
-
-export type RenderTextProps = Parameters<
-  NonNullable<React.ComponentProps<typeof Editable>['renderText']>
->[0]
-
-export function RenderText(props: RenderTextProps) {
-  return (
-    <span
-      {...props.attributes}
-      data-child-key={props.text._key}
-      data-child-name={props.text._type}
-      data-child-type="span"
-    >
-      {props.children}
-    </span>
-  )
-}

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

@@ -1,39 +0,0 @@
-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])
-}