@portabletext/editor 0.0.0

package/src/editor/components/Element.tsx

@@ -0,0 +1,279 @@
+/* eslint-disable complexity */
+/* eslint-disable max-statements */
+import {
+  type Path,
+  type PortableTextChild,
+  type PortableTextObject,
+  type PortableTextTextBlock,
+} from '@sanity/types'
+import {type FunctionComponent, type ReactElement, useMemo, useRef} from 'react'
+import {Editor, Element as SlateElement, Range} from 'slate'
+import {ReactEditor, type RenderElementProps, useSelected, useSlateStatic} from 'slate-react'
+
+import {
+  type BlockRenderProps,
+  type PortableTextMemberSchemaTypes,
+  type RenderBlockFunction,
+  type RenderChildFunction,
+  type RenderListItemFunction,
+  type RenderStyleFunction,
+} from '../../types/editor'
+import {debugWithName} from '../../utils/debug'
+import {fromSlateValue} from '../../utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../../utils/weakMaps'
+import ObjectNode from '../nodes/DefaultObject'
+import {DefaultBlockObject, DefaultListItem, DefaultListItemInner} from '../nodes/index'
+import {DraggableBlock} from './DraggableBlock'
+
+const debug = debugWithName('components:Element')
+const debugRenders = false
+const EMPTY_ANNOTATIONS: PortableTextObject[] = []
+
+/**
+ * @internal
+ */
+export interface ElementProps {
+  attributes: RenderElementProps['attributes']
+  children: ReactElement
+  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 editor = useSlateStatic()
+  const selected = useSelected()
+  const blockRef = useRef<HTMLDivElement | null>(null)
+  const inlineBlockObjectRef = useRef(null)
+  const focused = (selected && editor.selection && Range.isCollapsed(editor.selection)) || false
+
+  const value = useMemo(
+    () => fromSlateValue([element], schemaTypes.block.name, KEY_TO_VALUE_ELEMENT.get(editor))[0],
+    [editor, element, schemaTypes.block.name],
+  )
+
+  let renderedBlock = children
+
+  let className
+
+  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 (editor.isInline(element)) {
+    const path = ReactEditor.findPath(editor, element)
+    const [block] = Editor.node(editor, 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: <ObjectNode value={value} />,
+                editorElementRef: inlineBlockObjectRef,
+                focused,
+                path: elmPath,
+                schemaType,
+                selected,
+                type: schemaType,
+                value: value as PortableTextChild,
+              })}
+            {!renderChild && <ObjectNode 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
+    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 (editor.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,
+        })
+      } else {
+        renderedBlock = (
+          <DefaultListItem
+            listStyle={value.listItem || schemaTypes.lists[0].value}
+            listLevel={value.level || 1}
+          >
+            <DefaultListItemInner>{renderedBlock}</DefaultListItemInner>
+          </DefaultListItem>
+        )
+      }
+    }
+    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}>
+        <DraggableBlock element={element} readOnly={readOnly} blockRef={blockRef}>
+          <div ref={blockRef}>{propsOrDefaultRendered}</div>
+        </DraggableBlock>
+      </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(editor),
+  )[0]
+  let renderedBlockFromProps
+  if (renderBlock) {
+    const _props: Omit<BlockRenderProps, 'type'> = Object.defineProperty(
+      {
+        children: <ObjectNode 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}>
+      {children}
+      <DraggableBlock element={element} readOnly={readOnly} blockRef={blockRef}>
+        {renderedBlockFromProps && (
+          <div ref={blockRef} contentEditable={false}>
+            {renderedBlockFromProps}
+          </div>
+        )}
+        {!renderedBlockFromProps && (
+          <DefaultBlockObject selected={selected}>
+            <ObjectNode value={value} />
+          </DefaultBlockObject>
+        )}
+      </DraggableBlock>
+    </div>
+  )
+}

package/src/editor/components/Leaf.tsx

@@ -0,0 +1,288 @@
+import {type Path, type PortableTextObject, type PortableTextTextBlock} from '@sanity/types'
+import {isEqual, uniq} from 'lodash'
+import {
+  type ReactElement,
+  startTransition,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {Text} from 'slate'
+import {type RenderLeafProps, useSelected} from 'slate-react'
+
+import {
+  type BlockAnnotationRenderProps,
+  type BlockChildRenderProps,
+  type BlockDecoratorRenderProps,
+  type PortableTextMemberSchemaTypes,
+  type RenderAnnotationFunction,
+  type RenderChildFunction,
+  type RenderDecoratorFunction,
+} from '../../types/editor'
+import {debugWithName} from '../../utils/debug'
+import {usePortableTextEditor} from '../hooks/usePortableTextEditor'
+import {DefaultAnnotation} from '../nodes/DefaultAnnotation'
+import {PortableTextEditor} from '../PortableTextEditor'
+
+const debug = debugWithName('components:Leaf')
+
+const EMPTY_MARKS: string[] = []
+
+/**
+ * @internal
+ */
+export interface LeafProps extends RenderLeafProps {
+  children: ReactElement
+  schemaTypes: PortableTextMemberSchemaTypes
+  renderAnnotation?: RenderAnnotationFunction
+  renderChild?: RenderChildFunction
+  renderDecorator?: RenderDecoratorFunction
+  readOnly: boolean
+}
+
+/**
+ * Renders Portable Text span nodes in Slate
+ * @internal
+ */
+export const Leaf = (props: LeafProps) => {
+  const {attributes, children, leaf, schemaTypes, renderChild, renderDecorator, renderAnnotation} =
+    props
+  const spanRef = useRef<HTMLElement>(null)
+  const portableTextEditor = usePortableTextEditor()
+  const blockSelected = useSelected()
+  const [focused, setFocused] = useState(false)
+  const [selected, setSelected] = useState(false)
+  const block = children.props.parent as PortableTextTextBlock | undefined
+  const path: Path = useMemo(
+    () => (block ? [{_key: block?._key}, 'children', {_key: leaf._key}] : []),
+    [block, leaf._key],
+  )
+  const decoratorValues = useMemo(
+    () => schemaTypes.decorators.map((dec) => dec.value),
+    [schemaTypes.decorators],
+  )
+  const marks: string[] = useMemo(
+    () => uniq((leaf.marks || EMPTY_MARKS).filter((mark) => decoratorValues.includes(mark))),
+    [decoratorValues, leaf.marks],
+  )
+  const annotationMarks = Array.isArray(leaf.marks) ? leaf.marks : EMPTY_MARKS
+  const annotations = useMemo(
+    () =>
+      annotationMarks
+        .map(
+          (mark) =>
+            !decoratorValues.includes(mark) && block?.markDefs?.find((def) => def._key === mark),
+        )
+        .filter(Boolean) as PortableTextObject[],
+    [annotationMarks, block, decoratorValues],
+  )
+
+  const shouldTrackSelectionAndFocus = annotations.length > 0 && blockSelected
+
+  useEffect(() => {
+    if (!shouldTrackSelectionAndFocus) {
+      setFocused(false)
+      return
+    }
+    const sel = PortableTextEditor.getSelection(portableTextEditor)
+    if (
+      sel &&
+      isEqual(sel.focus.path, path) &&
+      PortableTextEditor.isCollapsedSelection(portableTextEditor)
+    ) {
+      startTransition(() => {
+        setFocused(true)
+      })
+    }
+  }, [shouldTrackSelectionAndFocus, path, portableTextEditor])
+
+  // Function to check if this leaf is currently inside the user's text selection
+  const setSelectedFromRange = useCallback(() => {
+    if (!shouldTrackSelectionAndFocus) {
+      return
+    }
+    debug('Setting selection and focus from range')
+    const winSelection = window.getSelection()
+    if (!winSelection) {
+      setSelected(false)
+      return
+    }
+    if (winSelection && winSelection.rangeCount > 0) {
+      const range = winSelection.getRangeAt(0)
+      if (spanRef.current && range.intersectsNode(spanRef.current)) {
+        setSelected(true)
+      } else {
+        setSelected(false)
+      }
+    } else {
+      setSelected(false)
+    }
+  }, [shouldTrackSelectionAndFocus])
+
+  useEffect(() => {
+    if (!shouldTrackSelectionAndFocus) {
+      return undefined
+    }
+    const sub = portableTextEditor.change$.subscribe((next) => {
+      if (next.type === 'blur') {
+        setFocused(false)
+        setSelected(false)
+        return
+      }
+      if (next.type === 'focus') {
+        const sel = PortableTextEditor.getSelection(portableTextEditor)
+        if (
+          sel &&
+          isEqual(sel.focus.path, path) &&
+          PortableTextEditor.isCollapsedSelection(portableTextEditor)
+        ) {
+          setFocused(true)
+        }
+        setSelectedFromRange()
+        return
+      }
+      if (next.type === 'selection') {
+        if (
+          next.selection &&
+          isEqual(next.selection.focus.path, path) &&
+          PortableTextEditor.isCollapsedSelection(portableTextEditor)
+        ) {
+          setFocused(true)
+        } else {
+          setFocused(false)
+        }
+        setSelectedFromRange()
+      }
+    })
+    return () => {
+      sub.unsubscribe()
+    }
+  }, [path, portableTextEditor, setSelectedFromRange, shouldTrackSelectionAndFocus])
+
+  useEffect(() => setSelectedFromRange(), [setSelectedFromRange])
+
+  const content = useMemo(() => {
+    let returnedChildren = children
+    // Render text nodes
+    if (Text.isText(leaf) && leaf._type === schemaTypes.span.name) {
+      marks.forEach((mark) => {
+        const schemaType = schemaTypes.decorators.find((dec) => dec.value === mark)
+        if (schemaType && renderDecorator) {
+          const _props: Omit<BlockDecoratorRenderProps, 'type'> = Object.defineProperty(
+            {
+              children: returnedChildren,
+              editorElementRef: spanRef,
+              focused,
+              path,
+              selected,
+              schemaType,
+              value: mark,
+            },
+            'type',
+            {
+              enumerable: false,
+              get() {
+                console.warn("Property 'type' is deprecated, use 'schemaType' instead.")
+                return schemaType
+              },
+            },
+          )
+          returnedChildren = renderDecorator(_props as BlockDecoratorRenderProps)
+        }
+      })
+
+      if (block && annotations.length > 0) {
+        annotations.forEach((annotation) => {
+          const schemaType = schemaTypes.annotations.find((t) => t.name === annotation._type)
+          if (schemaType) {
+            if (renderAnnotation) {
+              const _props: Omit<BlockAnnotationRenderProps, 'type'> = Object.defineProperty(
+                {
+                  block,
+                  children: returnedChildren,
+                  editorElementRef: spanRef,
+                  focused,
+                  path,
+                  selected,
+                  schemaType,
+                  value: annotation,
+                },
+                'type',
+                {
+                  enumerable: false,
+                  get() {
+                    console.warn("Property 'type' is deprecated, use 'schemaType' instead.")
+                    return schemaType
+                  },
+                },
+              )
+
+              returnedChildren = (
+                <span ref={spanRef}>{renderAnnotation(_props as BlockAnnotationRenderProps)}</span>
+              )
+            } else {
+              returnedChildren = (
+                <DefaultAnnotation annotation={annotation}>
+                  <span ref={spanRef}>{returnedChildren}</span>
+                </DefaultAnnotation>
+              )
+            }
+          }
+        })
+      }
+      if (block && renderChild) {
+        const child = block.children.find((_child) => _child._key === leaf._key) // Ensure object equality
+        if (child) {
+          const defaultRendered = <>{returnedChildren}</>
+          const _props: Omit<BlockChildRenderProps, 'type'> = Object.defineProperty(
+            {
+              annotations,
+              children: defaultRendered,
+              editorElementRef: spanRef,
+              focused,
+              path,
+              schemaType: schemaTypes.span,
+              selected,
+              value: child,
+            },
+            'type',
+            {
+              enumerable: false,
+              get() {
+                console.warn("Property 'type' is deprecated, use 'schemaType' instead.")
+                return schemaTypes.span
+              },
+            },
+          )
+          returnedChildren = renderChild(_props as BlockChildRenderProps)
+        }
+      }
+    }
+    return returnedChildren
+  }, [
+    annotations,
+    block,
+    children,
+    focused,
+    leaf,
+    marks,
+    path,
+    renderAnnotation,
+    renderChild,
+    renderDecorator,
+    schemaTypes.annotations,
+    schemaTypes.decorators,
+    schemaTypes.span,
+    selected,
+  ])
+  return useMemo(
+    () => (
+      <span key={leaf._key} {...attributes} ref={spanRef}>
+        {content}
+      </span>
+    ),
+    [leaf, attributes, content],
+  )
+}

package/src/editor/components/SlateContainer.tsx

@@ -0,0 +1,81 @@
+import {type PropsWithChildren, useEffect, useMemo, useState} from 'react'
+import {createEditor} from 'slate'
+import {Slate, withReact} from 'slate-react'
+
+import {type PatchObservable} from '../../types/editor'
+import {debugWithName} from '../../utils/debug'
+import {KEY_TO_SLATE_ELEMENT, KEY_TO_VALUE_ELEMENT} from '../../utils/weakMaps'
+import {withPlugins} from '../plugins'
+import {type PortableTextEditor} from '../PortableTextEditor'
+
+const debug = debugWithName('component:PortableTextEditor:SlateContainer')
+
+/**
+ * @internal
+ */
+export interface SlateContainerProps extends PropsWithChildren {
+  keyGenerator: () => string
+  maxBlocks: number | undefined
+  patches$?: PatchObservable
+  portableTextEditor: PortableTextEditor
+  readOnly: boolean
+}
+
+/**
+ * Sets up and encapsulates the Slate instance
+ * @internal
+ */
+export function SlateContainer(props: SlateContainerProps) {
+  const {patches$, portableTextEditor, readOnly, maxBlocks, keyGenerator} = props
+
+  // Create the slate instance, using `useState` ensures setup is only run once, initially
+  const [[slateEditor, subscribe]] = useState(() => {
+    debug('Creating new Slate editor instance')
+    const {editor, subscribe: _sub} = withPlugins(withReact(createEditor()), {
+      keyGenerator,
+      maxBlocks,
+      patches$,
+      portableTextEditor,
+      readOnly,
+    })
+    KEY_TO_VALUE_ELEMENT.set(editor, {})
+    KEY_TO_SLATE_ELEMENT.set(editor, {})
+    return [editor, _sub] as const
+  })
+
+  useEffect(() => {
+    const unsubscribe = subscribe()
+    return () => {
+      unsubscribe()
+    }
+  }, [subscribe])
+
+  // Update the slate instance when plugin dependent props change.
+  useEffect(() => {
+    debug('Re-initializing plugin chain')
+    withPlugins(slateEditor, {
+      keyGenerator,
+      maxBlocks,
+      patches$,
+      portableTextEditor,
+      readOnly,
+    })
+  }, [keyGenerator, portableTextEditor, maxBlocks, readOnly, patches$, slateEditor])
+
+  const initialValue = useMemo(() => {
+    return [slateEditor.pteCreateEmptyBlock()]
+  }, [slateEditor])
+
+  useEffect(() => {
+    return () => {
+      debug('Destroying Slate editor')
+      slateEditor.destroy()
+    }
+  }, [slateEditor])
+
+  return (
+    <Slate editor={slateEditor} initialValue={initialValue}>
+      {props.children}
+    </Slate>
+  )
+}