@portabletext/editor 3.3.2 → 3.3.4

package/src/editor/components/drop-indicator.tsx

@@ -1,17 +0,0 @@
-export function DropIndicator() {
-  return (
-    <div
-      contentEditable={false}
-      className="pt-drop-indicator"
-      style={{
-        position: 'absolute',
-        width: '100%',
-        height: 1,
-        borderBottom: '1px solid currentColor',
-        zIndex: 5,
-      }}
-    >
-      <span />
-    </div>
-  )
-}

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

@@ -1,121 +0,0 @@
-import type {PortableTextObject} 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 {
-  BlockRenderProps,
-  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 | undefined
-  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) =>
-      selected &&
-      editor.selection !== null &&
-      Range.isCollapsed(editor.selection),
-  )
-
-  useCoreBlockElementBehaviors({
-    key: props.element._key,
-    onSetDragPositionBlock: setDragPositionBlock,
-  })
-
-  const legacySchemaType = props.legacySchema.blockObjects.find(
-    (schemaType) => schemaType.name === props.element._type,
-  )
-
-  if (!legacySchemaType) {
-    console.error(
-      `Unable to find Block Object "${props.element._type}" in Schema`,
-    )
-  }
-
-  const blockObject = props.blockObject ?? {
-    _key: props.element._key,
-    _type: props.element._type,
-  }
-
-  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 ? (
-          <RenderBlock
-            renderBlock={props.renderBlock}
-            editorElementRef={blockObjectRef}
-            focused={focused}
-            path={[{_key: props.element._key}]}
-            schemaType={legacySchemaType}
-            selected={selected}
-            type={legacySchemaType}
-            value={blockObject}
-          >
-            <RenderDefaultBlockObject blockObject={blockObject} />
-          </RenderBlock>
-        ) : (
-          <RenderDefaultBlockObject blockObject={blockObject} />
-        )}
-      </div>
-      {dragPositionBlock === 'end' ? <DropIndicator /> : null}
-    </div>
-  )
-}
-
-function RenderBlock({
-  renderBlock,
-  children,
-  editorElementRef,
-  focused,
-  path,
-  schemaType,
-  selected,
-  type,
-  value,
-}: {
-  renderBlock: RenderBlockFunction
-} & BlockRenderProps) {
-  return renderBlock({
-    children,
-    editorElementRef,
-    focused,
-    path,
-    schemaType,
-    selected,
-    type,
-    value,
-  })
-}

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

@@ -1,21 +0,0 @@
-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

@@ -1,88 +0,0 @@
-import {isTextBlock} from '@portabletext/schema'
-import {useSelector} from '@xstate/react'
-import {useContext, type ReactElement} from 'react'
-import type {Element as SlateElement} from 'slate'
-import {useSlateStatic, type RenderElementProps} from 'slate-react'
-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 legacySchema = useSelector(editorActor, (s) =>
-    s.context.getLegacySchema(),
-  )
-  const slateStatic = useSlateStatic()
-
-  const isInline =
-    '__inline' in props.element && props.element.__inline === true
-
-  if (isInline) {
-    return (
-      <RenderInlineObject
-        attributes={props.attributes}
-        element={props.element}
-        legacySchema={legacySchema}
-        readOnly={props.readOnly}
-        renderChild={props.renderChild}
-        schema={schema}
-      >
-        {props.children}
-      </RenderInlineObject>
-    )
-  }
-
-  const blockIndex = slateStatic.blockIndexMap.get(props.element._key)
-  const block =
-    blockIndex !== undefined ? slateStatic.value.at(blockIndex) : undefined
-
-  if (isTextBlock({schema}, block)) {
-    return (
-      <RenderTextBlock
-        attributes={props.attributes}
-        element={props.element}
-        legacySchema={legacySchema}
-        readOnly={props.readOnly}
-        renderBlock={props.renderBlock}
-        renderListItem={props.renderListItem}
-        renderStyle={props.renderStyle}
-        spellCheck={props.spellCheck}
-        textBlock={block}
-      >
-        {props.children}
-      </RenderTextBlock>
-    )
-  }
-
-  return (
-    <RenderBlockObject
-      attributes={props.attributes}
-      blockObject={block}
-      element={props.element}
-      legacySchema={legacySchema}
-      readOnly={props.readOnly}
-      renderBlock={props.renderBlock}
-      schema={schema}
-    >
-      {props.children}
-    </RenderBlockObject>
-  )
-}

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

@@ -1,129 +0,0 @@
-import {useRef, type ReactElement} from 'react'
-import {Range, type Element as SlateElement} from 'slate'
-import {DOMEditor} from 'slate-dom'
-import {
-  useSelected,
-  useSlateSelector,
-  useSlateStatic,
-  type RenderElementProps,
-} from 'slate-react'
-import {getPointBlock} from '../../internal-utils/slate-utils'
-import type {
-  BlockChildRenderProps,
-  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
-  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 legacySchemaType = props.legacySchema.inlineObjects.find(
-    (inlineObject) => inlineObject.name === props.element._type,
-  )
-
-  if (!legacySchemaType) {
-    console.error(
-      `Unable to find Inline Object "${props.element._type}" in Schema`,
-    )
-  }
-
-  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}`,
-    )
-  }
-
-  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={inlineObject._key}
-      data-child-name={inlineObject._type}
-      data-child-type="object"
-    >
-      {props.children}
-      <span ref={inlineObjectRef} style={{display: 'inline-block'}}>
-        {props.renderChild && block && legacySchemaType ? (
-          <RenderChild
-            renderChild={props.renderChild}
-            annotations={[]}
-            editorElementRef={inlineObjectRef}
-            selected={selected}
-            focused={focused}
-            path={[{_key: block._key}, 'children', {_key: props.element._key}]}
-            schemaType={legacySchemaType}
-            value={inlineObject}
-            type={legacySchemaType}
-          >
-            <RenderDefaultInlineObject inlineObject={inlineObject} />
-          </RenderChild>
-        ) : (
-          <RenderDefaultInlineObject inlineObject={inlineObject} />
-        )}
-      </span>
-    </span>
-  )
-}
-
-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-leaf.tsx

@@ -1,64 +0,0 @@
-import {useSelector} from '@xstate/react'
-import {useContext, type CSSProperties} from 'react'
-import type {Text} from 'slate'
-import type {RenderLeafProps} from 'slate-react'
-import type {
-  RangeDecoration,
-  RenderAnnotationFunction,
-  RenderChildFunction,
-  RenderDecoratorFunction,
-  RenderPlaceholderFunction,
-} from '../../types/editor'
-import {EditorActorContext} from '../editor-actor-context'
-import {RenderSpan} from './render-span'
-
-const PLACEHOLDER_STYLE: CSSProperties = {
-  position: 'absolute',
-  userSelect: 'none',
-  pointerEvents: 'none',
-  left: 0,
-  right: 0,
-}
-
-export function RenderLeaf(
-  props: RenderLeafProps & {
-    leaf: Text & {placeholder?: boolean; rangeDecoration?: RangeDecoration}
-    readOnly: boolean
-    renderAnnotation?: RenderAnnotationFunction
-    renderChild?: RenderChildFunction
-    renderDecorator?: RenderDecoratorFunction
-    renderPlaceholder?: RenderPlaceholderFunction
-  },
-) {
-  const editorActor = useContext(EditorActorContext)
-  const schema = useSelector(editorActor, (s) => s.context.schema)
-
-  if (props.leaf._type !== schema.span.name) {
-    return props.children
-  }
-
-  let renderedSpan = <RenderSpan {...props} />
-
-  if (
-    props.renderPlaceholder &&
-    props.leaf.placeholder &&
-    props.text.text === ''
-  ) {
-    return (
-      <>
-        <span style={PLACEHOLDER_STYLE} contentEditable={false}>
-          {props.renderPlaceholder()}
-        </span>
-        {renderedSpan}
-      </>
-    )
-  }
-
-  const rangeDecoration = props.leaf.rangeDecoration
-
-  if (rangeDecoration) {
-    renderedSpan = rangeDecoration.component({children: renderedSpan})
-  }
-
-  return renderedSpan
-}