@portabletext/editor 1.48.14 → 1.49.0

package/src/priority/priority.sort.ts

@@ -0,0 +1,121 @@
+import type {EditorPriority} from './priority.types'
+
+export function sortByPriority<
+  T extends {
+    priority?: EditorPriority
+  },
+>(items: Array<T>): Array<T> {
+  if (items.length === 0) {
+    return []
+  }
+
+  // Separate items with and without priority
+  const itemsWithPriority = items.filter(
+    (item): item is T & {priority: EditorPriority} =>
+      item.priority !== undefined,
+  )
+  const itemsWithoutPriority = items.filter(
+    (item) => item.priority === undefined,
+  )
+
+  if (itemsWithPriority.length === 0) {
+    return items
+  }
+
+  // Create a map of items by their priority ID
+  const itemsByPriorityId = new Map(
+    itemsWithPriority.map((item) => [item.priority.id, item]),
+  )
+
+  // Build the dependency graph
+  const graph = new Map<string, Set<string>>()
+  const inDegree = new Map<string, number>()
+
+  // Helper function to ensure a node exists in the graph
+  function ensureNode(id: string) {
+    if (!graph.has(id)) {
+      graph.set(id, new Set())
+      inDegree.set(id, 0)
+    }
+  }
+
+  // Initialize graph and in-degree for all items
+  for (const item of itemsWithPriority) {
+    const id = item.priority.id
+    ensureNode(id)
+  }
+
+  // Helper function to add an edge to the graph
+  function addEdge(fromId: string, toId: string) {
+    if (!graph.has(fromId) || !graph.has(toId)) return
+    graph.get(fromId)?.add(toId)
+    inDegree.set(toId, (inDegree.get(toId) ?? 0) + 1)
+  }
+
+  // Add edges based on references
+  for (const item of itemsWithPriority) {
+    const id = item.priority.id
+    const visited = new Set<string>()
+    let ref = item.priority.reference
+
+    while (ref) {
+      const refId = ref.priority.id
+      ensureNode(refId)
+
+      // Check for cyclic reference
+      if (visited.has(refId)) {
+        throw new Error('Circular dependency detected in priorities')
+      }
+      visited.add(refId)
+
+      if (ref.importance === 'higher') {
+        // Reference must come before current item
+        addEdge(id, refId)
+      } else {
+        // Current item must come before reference
+        addEdge(refId, id)
+      }
+
+      ref = ref.priority.reference
+    }
+  }
+
+  const queue: string[] = []
+
+  // Find all nodes with no incoming edges
+  for (const [id, degree] of inDegree) {
+    if (degree === 0) {
+      queue.push(id)
+    }
+  }
+
+  const result: T[] = []
+
+  // Perform topological sort
+  while (queue.length > 0) {
+    const currentId = queue.shift()!
+    const currentItem = itemsByPriorityId.get(currentId)
+    if (currentItem) {
+      result.push(currentItem)
+    }
+
+    // Decrease in-degree of neighbors
+    for (const neighborId of graph.get(currentId) ?? []) {
+      const newDegree = (inDegree.get(neighborId) ?? 0) - 1
+      inDegree.set(neighborId, newDegree)
+      if (newDegree === 0) {
+        queue.push(neighborId)
+      }
+    }
+  }
+
+  // Add any remaining items that weren't processed
+  for (const item of itemsWithPriority) {
+    if (!result.includes(item)) {
+      result.push(item)
+    }
+  }
+
+  // Append items without priority at the end in their original order
+  return [...result, ...itemsWithoutPriority]
+}

package/src/priority/priority.types.ts

@@ -0,0 +1,24 @@
+import {defaultKeyGenerator} from '../editor/key-generator'
+
+export type EditorPriority = {
+  id: string
+  name?: string
+  reference?: {
+    priority: EditorPriority
+    importance: 'higher' | 'lower'
+  }
+}
+
+export function createEditorPriority(config?: {
+  name?: string
+  reference?: {
+    priority: EditorPriority
+    importance: 'higher' | 'lower'
+  }
+}): EditorPriority {
+  return {
+    id: defaultKeyGenerator(),
+    name: config?.name,
+    reference: config?.reference,
+  }
+}

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,435 +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 * 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)
-            },
-          },
-        ],
-      ],
-    })
-
-    editorActor.send({
-      type: 'add behavior',
-      behavior,
-    })
-
-    return () => {
-      editorActor.send({
-        type: 'remove behavior',
-        behavior,
-      })
-    }
-  }, [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),
-        ],
-      ],
-    })
-
-    editorActor.send({
-      type: 'add behavior',
-      behavior,
-    })
-
-    return () => {
-      editorActor.send({
-        type: 'remove behavior',
-        behavior,
-      })
-    }
-  }, [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'