@portabletext/editor 1.48.14 → 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/editor/create-editor.ts

@@ -8,6 +8,8 @@ import type {Behavior} from '../behaviors/behavior.types.behavior'
 import type {ExternalBehaviorEvent} from '../behaviors/behavior.types.event'
 import {createCoreConverters} from '../converters/converters.core'
 import {compileType} from '../internal-utils/schema'
+import {corePriority} from '../priority/priority.core'
+import {createEditorPriority} from '../priority/priority.types'
 import type {EditableAPI} from '../types/editor'
 import {createSlateEditor, type SlateEditor} from './create-slate-editor'
 import type {
@@ -117,23 +119,33 @@ export function createInternalEditor(editorActor: EditorActor): InternalEditor {
         editorActorSnapshot: editorActor.getSnapshot(),
         slateEditorInstance: slateEditor.instance,
       }),
-    registerBehavior: (config) => {
+    registerBehavior: (behaviorConfig) => {
+      const priority = createEditorPriority({
+        name: 'custom',
+        reference: {
+          priority: corePriority,
+          importance: 'higher',
+        },
+      })
+      const behaviorConfigWithPriority = {
+        ...behaviorConfig,
+        priority,
+      }
+
       editorActor.send({
         type: 'add behavior',
-        behavior: config.behavior,
+        behaviorConfig: behaviorConfigWithPriority,
       })
 
       return () => {
         editorActor.send({
           type: 'remove behavior',
-          behavior: config.behavior,
+          behaviorConfig: behaviorConfigWithPriority,
         })
       }
     },
     send: (event) => {
       switch (event.type) {
-        case 'add behavior':
-        case 'remove behavior':
         case 'update key generator':
         case 'update readOnly':
         case 'patches':

package/src/editor/editor-machine.ts

@@ -11,12 +11,13 @@ import {
   setup,
   type ActorRefFrom,
 } from 'xstate'
-import {coreBehaviors} from '../behaviors/behavior.core'
+import type {BehaviorConfig} from '../behaviors/behavior.config'
+import {coreBehaviorsConfig} from '../behaviors/behavior.core'
 import {performEvent} from '../behaviors/behavior.perform-event'
-import type {Behavior} from '../behaviors/behavior.types.behavior'
 import type {BehaviorEvent} from '../behaviors/behavior.types.event'
 import type {Converter} from '../converters/converter.types'
 import type {EventPosition} from '../internal-utils/event-position'
+import {sortByPriority} from '../priority/priority.sort'
 import type {NamespaceEvent} from '../type-utils'
 import type {
   EditorSelection,
@@ -55,14 +56,6 @@ export type MutationEvent = {
  * @public
  */
 export type ExternalEditorEvent =
-  | {
-      type: 'add behavior'
-      behavior: Behavior
-    }
-  | {
-      type: 'remove behavior'
-      behavior: Behavior
-    }
   | {
       type: 'update readOnly'
       readOnly: boolean
@@ -160,6 +153,14 @@ export type HasTag = ReturnType<EditorActor['getSnapshot']>['hasTag']
  */
 export type InternalEditorEvent =
   | ExternalEditorEvent
+  | {
+      type: 'add behavior'
+      behaviorConfig: BehaviorConfig
+    }
+  | {
+      type: 'remove behavior'
+      behaviorConfig: BehaviorConfig
+    }
   | {
       type: 'blur'
       editor: PortableTextSlateEditor
@@ -213,7 +214,7 @@ export type InternalEditorEmittedEvent =
 export const editorMachine = setup({
   types: {
     context: {} as {
-      behaviors: Set<Behavior>
+      behaviors: Set<BehaviorConfig>
       converters: Set<Converter>
       getLegacySchema: () => PortableTextMemberSchemaTypes
       keyGenerator: () => string
@@ -248,14 +249,14 @@ export const editorMachine = setup({
       behaviors: ({context, event}) => {
         assertEvent(event, 'add behavior')
 
-        return new Set([...context.behaviors, event.behavior])
+        return new Set([...context.behaviors, event.behaviorConfig])
       },
     }),
     'remove behavior from context': assign({
       behaviors: ({context, event}) => {
         assertEvent(event, 'remove behavior')
 
-        context.behaviors.delete(event.behavior)
+        context.behaviors.delete(event.behaviorConfig)
 
         return new Set([...context.behaviors])
       },
@@ -342,13 +343,15 @@ export const editorMachine = setup({
       assertEvent(event, ['behavior event'])
 
       try {
+        const behaviors = sortByPriority([
+          ...context.behaviors.values(),
+          ...coreBehaviorsConfig,
+        ]).map((config) => config.behavior)
+
         performEvent({
           mode: 'raise',
-          behaviors: [...context.behaviors.values(), ...coreBehaviors],
-          remainingEventBehaviors: [
-            ...context.behaviors.values(),
-            ...coreBehaviors,
-          ],
+          behaviors,
+          remainingEventBehaviors: behaviors,
           event: event.behaviorEvent,
           editor: event.editor,
           keyGenerator: context.keyGenerator,

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/priority/priority.core.ts

@@ -0,0 +1,3 @@
+import {createEditorPriority} from './priority.types'
+
+export const corePriority = createEditorPriority({name: 'core'})

package/src/priority/priority.sort.test.ts

@@ -0,0 +1,319 @@
+import {describe, expect, test} from 'vitest'
+import {sortByPriority} from './priority.sort'
+import {createEditorPriority} from './priority.types'
+
+describe(sortByPriority.name, () => {
+  test('empty array', () => {
+    const result = sortByPriority([])
+    expect(result).toEqual([])
+  })
+
+  test('single item', () => {
+    const item = {priority: createEditorPriority({name: 'single'})}
+    const result = sortByPriority([item])
+    expect(result).toEqual([item])
+  })
+
+  test('two sets of priorities', () => {
+    const a = createEditorPriority({name: 'a'})
+    const b = createEditorPriority({
+      name: 'b',
+      reference: {priority: a, importance: 'higher'},
+    })
+    const b1 = createEditorPriority({
+      name: 'b1',
+      reference: {priority: b, importance: 'lower'},
+    })
+    const b2 = createEditorPriority({
+      name: 'b2',
+      reference: {priority: b, importance: 'lower'},
+    })
+    const c = createEditorPriority({
+      name: 'c',
+      reference: {priority: a, importance: 'higher'},
+    })
+    const c1 = createEditorPriority({
+      name: 'c1',
+      reference: {priority: c, importance: 'lower'},
+    })
+    const c2 = createEditorPriority({
+      name: 'c2',
+      reference: {priority: c, importance: 'lower'},
+    })
+
+    const items = [
+      {priority: c1},
+      {priority: c2},
+      {priority: a},
+      {priority: b1},
+      {priority: b2},
+      {priority: b},
+      {priority: c},
+    ]
+
+    expect(sortByPriority(items).map((item) => item.priority.name)).toEqual([
+      'b',
+      'c',
+      'b1',
+      'b2',
+      'c1',
+      'c2',
+      'a',
+    ])
+  })
+
+  test('sub-priorities', () => {
+    const a = createEditorPriority({name: 'a'})
+    const b = createEditorPriority({
+      name: 'b',
+      reference: {priority: a, importance: 'lower'},
+    })
+    const b1 = createEditorPriority({
+      name: 'b1',
+      reference: {priority: b, importance: 'lower'},
+    })
+    const b2 = createEditorPriority({
+      name: 'b2',
+      reference: {priority: b1, importance: 'higher'},
+    })
+
+    const items = [{priority: b2}, {priority: b1}, {priority: a}]
+
+    expect(sortByPriority(items).map((item) => item.priority.name)).toEqual([
+      'a',
+      'b2',
+      'b1',
+    ])
+  })
+
+  test('direct higher reference', () => {
+    const a = createEditorPriority({
+      name: 'a',
+    })
+    const b = createEditorPriority({
+      name: 'b',
+      reference: {priority: a, importance: 'higher'},
+    })
+
+    const items = [{priority: b}, {priority: a}]
+
+    expect(sortByPriority(items).map((item) => item.priority.name)).toEqual([
+      'b',
+      'a',
+    ])
+  })
+
+  test('direct lower reference', () => {
+    const a = createEditorPriority({name: 'a'})
+    const b = createEditorPriority({
+      name: 'b',
+      reference: {priority: a, importance: 'lower'},
+    })
+
+    const items = [{priority: b}, {priority: a}]
+
+    expect(sortByPriority(items).map((item) => item.priority.name)).toEqual([
+      'a',
+      'b',
+    ])
+  })
+
+  test('transitive references', () => {
+    const a = createEditorPriority({name: 'a'})
+    const b = createEditorPriority({
+      name: 'b',
+      reference: {priority: a, importance: 'lower'},
+    })
+    const c = createEditorPriority({
+      name: 'c',
+      reference: {priority: b, importance: 'higher'},
+    })
+
+    const items = [{priority: c}, {priority: b}, {priority: a}]
+
+    expect(sortByPriority(items).map((item) => item.priority.name)).toEqual([
+      'a',
+      'c',
+      'b',
+    ])
+  })
+
+  test('transitive references #2', () => {
+    const a = createEditorPriority({name: 'a'})
+    const b = createEditorPriority({
+      name: 'b',
+      reference: {priority: a, importance: 'higher'},
+    })
+    const c = createEditorPriority({
+      name: 'c',
+      reference: {priority: b, importance: 'lower'},
+    })
+
+    const items = [{priority: c}, {priority: b}, {priority: a}]
+
+    expect(sortByPriority(items).map((item) => item.priority.name)).toEqual([
+      'b',
+      'c',
+      'a',
+    ])
+  })
+
+  test('references to missing priorities', () => {
+    const a = createEditorPriority({name: 'a'})
+    const b = createEditorPriority({
+      name: 'b',
+      reference: {priority: a, importance: 'lower'},
+    })
+    const c = createEditorPriority({
+      name: 'c',
+      reference: {priority: b, importance: 'higher'},
+    })
+    const items = [{priority: a}, {priority: c}]
+
+    expect(sortByPriority(items).map((item) => item.priority.name)).toEqual([
+      'a',
+      'c',
+    ])
+  })
+
+  test('references to missing priorities #2', () => {
+    const a = createEditorPriority({name: 'a'})
+    const b = createEditorPriority({
+      name: 'b',
+      reference: {priority: a, importance: 'higher'},
+    })
+    const c = createEditorPriority({
+      name: 'c',
+      reference: {priority: b, importance: 'lower'},
+    })
+    const items = [{priority: a}, {priority: c}]
+
+    expect(sortByPriority(items).map((item) => item.priority.name)).toEqual([
+      'c',
+      'a',
+    ])
+  })
+
+  test('complex reference chains', () => {
+    const a = createEditorPriority({
+      name: 'a',
+    })
+    const b = createEditorPriority({
+      name: 'b',
+      reference: {priority: a, importance: 'lower'},
+    })
+    const c = createEditorPriority({
+      name: 'c',
+      reference: {priority: b, importance: 'higher'},
+    })
+    const d = createEditorPriority({
+      name: 'd',
+      reference: {priority: c, importance: 'lower'},
+    })
+
+    const items = [{priority: d}, {priority: c}, {priority: b}, {priority: a}]
+
+    const result = sortByPriority(items)
+    expect(result.map((item) => item.priority.name)).toEqual([
+      'a',
+      'c',
+      'd',
+      'b',
+    ])
+  })
+
+  test('complex reference chains #2', () => {
+    const a = createEditorPriority({
+      name: 'a',
+    })
+    const b = createEditorPriority({
+      name: 'b',
+      reference: {priority: a, importance: 'higher'},
+    })
+    const c = createEditorPriority({
+      name: 'c',
+      reference: {priority: b, importance: 'lower'},
+    })
+    const d = createEditorPriority({
+      name: 'd',
+      reference: {priority: c, importance: 'higher'},
+    })
+
+    const items = [{priority: d}, {priority: c}, {priority: b}, {priority: a}]
+
+    const result = sortByPriority(items)
+    expect(result.map((item) => item.priority.name)).toEqual([
+      'b',
+      'd',
+      'c',
+      'a',
+    ])
+  })
+
+  test('multiple independent chains', () => {
+    const a1 = createEditorPriority({name: 'a1'})
+    const a2 = createEditorPriority({
+      name: 'a2',
+      reference: {priority: a1, importance: 'lower'},
+    })
+
+    const b1 = createEditorPriority({name: 'b1'})
+    const b2 = createEditorPriority({
+      name: 'b2',
+      reference: {priority: b1, importance: 'lower'},
+    })
+
+    const items = [
+      {priority: a2},
+      {priority: b1},
+      {priority: a1},
+      {priority: b2},
+    ]
+
+    const result = sortByPriority(items)
+    const names = result.map((item) => item.priority.name)
+
+    // Verify that a1 comes before a2 and b1 comes before b2
+    expect(names.indexOf('a1')).toBeLessThan(names.indexOf('a2'))
+    expect(names.indexOf('b1')).toBeLessThan(names.indexOf('b2'))
+  })
+
+  test('cyclic references', () => {
+    const a = createEditorPriority({name: 'a'})
+    const b = createEditorPriority({
+      name: 'b',
+      reference: {priority: a, importance: 'lower'},
+    })
+    const c = createEditorPriority({
+      name: 'c',
+      reference: {priority: b, importance: 'lower'},
+    })
+    a.reference = {priority: c, importance: 'lower'}
+
+    const items = [{priority: a}, {priority: b}, {priority: c}]
+
+    expect(() => sortByPriority(items)).toThrow()
+  })
+
+  test('missing priorities', () => {
+    const a = createEditorPriority({name: 'a'})
+    const b = createEditorPriority({
+      name: 'b',
+      reference: {priority: a, importance: 'lower'},
+    })
+
+    const items = [
+      {name: 'd'},
+      {name: 'c'},
+      {priority: a, name: 'a'},
+      {priority: b, name: 'b'},
+    ]
+
+    expect(sortByPriority(items).map((item) => item.name)).toEqual([
+      'a',
+      'b',
+      'd',
+      'c',
+    ])
+  })
+})