@portabletext/editor 1.49.13 → 1.50.0

package/src/selectors/selector.get-list-state.test.ts

@@ -0,0 +1,202 @@
+import type {PortableTextBlock} from '@sanity/types'
+import {describe, expect, test} from 'vitest'
+import type {EditorSelector} from '../editor/editor-selector'
+import {defaultKeyGenerator} from '../editor/key-generator'
+import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
+import {getListState, type ListState} from './selector.get-list-state'
+
+function blockObject(_key: string, name: string) {
+  return {
+    _key,
+    _type: name,
+  }
+}
+
+function textBlock(
+  _key: string,
+  {
+    listItem,
+    level,
+  }: {
+    listItem?: 'bullet' | 'number'
+    level?: number
+  },
+): PortableTextBlock {
+  return {
+    _key,
+    _type: 'block',
+    children: [
+      {
+        _key: defaultKeyGenerator(),
+        _type: 'span',
+        text: `${listItem}-${level}`,
+      },
+    ],
+    style: 'normal',
+    level,
+    listItem,
+  }
+}
+
+function createSnapshot(value: Array<PortableTextBlock>) {
+  return createTestSnapshot({
+    context: {
+      value,
+    },
+  })
+}
+
+function getListStates(
+  paths: Array<[{_key: string}]>,
+): EditorSelector<Array<ListState | undefined>> {
+  return (snapshot) => {
+    return paths.map((path) => getListState({path})(snapshot))
+  }
+}
+describe(getListState.name, () => {
+  test('empty', () => {
+    const snapshot = createSnapshot([])
+
+    expect(getListState({path: [{_key: 'k0'}]})(snapshot)).toEqual(undefined)
+  })
+
+  test('single list item', () => {
+    const snapshot = createSnapshot([
+      textBlock('k0', {listItem: 'number', level: 1}),
+    ])
+
+    expect(getListState({path: [{_key: 'k0'}]})(snapshot)).toEqual({
+      index: 1,
+    })
+  })
+
+  test('single indented list item', () => {
+    const snapshot = createSnapshot([
+      textBlock('k0', {listItem: 'number', level: 2}),
+    ])
+
+    expect(getListState({path: [{_key: 'k0'}]})(snapshot)).toEqual({
+      index: 1,
+    })
+  })
+
+  test('two lists broken up by a paragraph', () => {
+    const snapshot = createSnapshot([
+      textBlock('k0', {listItem: 'number', level: 1}),
+      textBlock('k1', {listItem: 'number', level: 1}),
+      textBlock('k2', {}),
+      textBlock('k3', {listItem: 'number', level: 1}),
+      textBlock('k4', {listItem: 'number', level: 1}),
+    ])
+
+    expect(
+      getListStates([
+        [{_key: 'k0'}],
+        [{_key: 'k1'}],
+        [{_key: 'k2'}],
+        [{_key: 'k3'}],
+        [{_key: 'k4'}],
+      ])(snapshot),
+    ).toEqual([{index: 1}, {index: 2}, undefined, {index: 1}, {index: 2}])
+  })
+
+  test('two lists broken up by an image', () => {
+    const snapshot = createSnapshot([
+      textBlock('k0', {listItem: 'number', level: 1}),
+      textBlock('k1', {listItem: 'number', level: 1}),
+      blockObject('k2', 'image'),
+      textBlock('k3', {listItem: 'number', level: 1}),
+      textBlock('k4', {listItem: 'number', level: 1}),
+    ])
+
+    expect(
+      getListStates([
+        [{_key: 'k0'}],
+        [{_key: 'k1'}],
+        [{_key: 'k2'}],
+        [{_key: 'k3'}],
+        [{_key: 'k4'}],
+      ])(snapshot),
+    ).toEqual([{index: 1}, {index: 2}, undefined, {index: 1}, {index: 2}])
+  })
+
+  test('numbered lists broken up by a bulleted list', () => {
+    const snapshot = createSnapshot([
+      textBlock('k0', {listItem: 'number', level: 1}),
+      textBlock('k1', {listItem: 'bullet', level: 1}),
+      textBlock('k2', {listItem: 'number', level: 1}),
+    ])
+
+    expect(
+      getListStates([[{_key: 'k0'}], [{_key: 'k1'}], [{_key: 'k2'}]])(snapshot),
+    ).toEqual([{index: 1}, {index: 1}, {index: 1}])
+  })
+
+  test('simple indented list', () => {
+    const snapshot = createSnapshot([
+      textBlock('k0', {listItem: 'number', level: 1}),
+      textBlock('k1', {listItem: 'number', level: 2}),
+      textBlock('k2', {listItem: 'number', level: 2}),
+      textBlock('k3', {listItem: 'number', level: 1}),
+    ])
+
+    expect(
+      getListStates([
+        [{_key: 'k0'}],
+        [{_key: 'k1'}],
+        [{_key: 'k2'}],
+        [{_key: 'k3'}],
+      ])(snapshot),
+    ).toEqual([{index: 1}, {index: 1}, {index: 2}, {index: 2}])
+  })
+
+  test('reverse indented list', () => {
+    const snapshot = createSnapshot([
+      textBlock('k0', {listItem: 'number', level: 2}),
+      textBlock('k1', {listItem: 'number', level: 1}),
+      textBlock('k2', {listItem: 'number', level: 2}),
+    ])
+
+    expect(
+      getListStates([[{_key: 'k0'}], [{_key: 'k1'}], [{_key: 'k2'}]])(snapshot),
+    ).toEqual([{index: 1}, {index: 1}, {index: 1}])
+  })
+
+  test('complex list', () => {
+    const snapshot = createSnapshot([
+      textBlock('k0', {listItem: 'number', level: 1}),
+      textBlock('k1', {listItem: 'number', level: 3}),
+      textBlock('k2', {listItem: 'number', level: 2}),
+      textBlock('k3', {listItem: 'number', level: 3}),
+      textBlock('k4', {listItem: 'number', level: 1}),
+      textBlock('k5', {listItem: 'number', level: 3}),
+      textBlock('k6', {listItem: 'number', level: 4}),
+      textBlock('k7', {listItem: 'number', level: 3}),
+      textBlock('k8', {listItem: 'number', level: 1}),
+    ])
+
+    expect(
+      getListStates([
+        [{_key: 'k0'}],
+        [{_key: 'k1'}],
+        [{_key: 'k2'}],
+        [{_key: 'k3'}],
+        [{_key: 'k4'}],
+        [{_key: 'k5'}],
+        [{_key: 'k6'}],
+        [{_key: 'k7'}],
+        [{_key: 'k8'}],
+      ])(snapshot),
+    ).toEqual([
+      {index: 1},
+      {index: 1},
+      {index: 1},
+      {index: 1},
+      {index: 2},
+      {index: 1},
+      {index: 1},
+      {index: 2},
+      {index: 3},
+    ])
+  })
+})

package/src/selectors/selector.get-list-state.ts

@@ -0,0 +1,175 @@
+import type {PortableTextTextBlock} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import {isTextBlock} from '../internal-utils/parse-blocks'
+import type {BlockPath} from '../types/paths'
+import {getFocusTextBlock, getPreviousBlock} from './selectors'
+
+/**
+ * @beta
+ * Represents the List state of a block.
+ */
+export type ListState = {
+  index: number
+}
+
+/**
+ * @beta
+ * Given the `path` of a block, this selector will return the `ListState` of
+ * the block.
+ */
+export function getListState({
+  path,
+}: {
+  path: BlockPath
+}): EditorSelector<ListState | undefined> {
+  return (snapshot) => {
+    const selection = {
+      anchor: {
+        path,
+        offset: 0,
+      },
+      focus: {
+        path,
+        offset: 0,
+      },
+    }
+
+    const focusTextBlock = getFocusTextBlock({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection,
+      },
+    })
+
+    if (!focusTextBlock) {
+      return undefined
+    }
+
+    if (
+      focusTextBlock.node.listItem === undefined ||
+      focusTextBlock.node.level === undefined
+    ) {
+      return undefined
+    }
+
+    const previousListItem = getPreviousListItem({
+      listItem: focusTextBlock.node.listItem,
+      level: focusTextBlock.node.level,
+    })({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection,
+      },
+    })
+
+    if (!previousListItem) {
+      return {
+        index: 1,
+      }
+    }
+
+    if (previousListItem.node.listItem !== focusTextBlock.node.listItem) {
+      return {
+        index: 1,
+      }
+    }
+
+    if (
+      previousListItem.node.level !== undefined &&
+      previousListItem.node.level < focusTextBlock.node.level
+    ) {
+      return {
+        index: 1,
+      }
+    }
+
+    const previousListItemListState = getListState({
+      path: previousListItem.path,
+    })(snapshot)
+
+    if (previousListItemListState === undefined) {
+      return {
+        index: 1,
+      }
+    }
+
+    return {
+      index: previousListItemListState.index + 1,
+    }
+  }
+}
+
+function getPreviousListItem({
+  listItem,
+  level,
+}: {
+  listItem: string
+  level: number
+}): EditorSelector<
+  | {
+      node: PortableTextTextBlock
+      path: [{_key: string}]
+    }
+  | undefined
+> {
+  return (snapshot) => {
+    const previousBlock = getPreviousBlock({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+      },
+    })
+
+    if (!previousBlock) {
+      return undefined
+    }
+
+    if (!isTextBlock(snapshot.context, previousBlock.node)) {
+      return undefined
+    }
+
+    if (
+      previousBlock.node.listItem === undefined ||
+      previousBlock.node.level === undefined
+    ) {
+      return undefined
+    }
+
+    if (previousBlock.node.listItem !== listItem) {
+      return undefined
+    }
+
+    if (previousBlock.node.level === level) {
+      return {
+        node: previousBlock.node,
+        path: previousBlock.path,
+      }
+    }
+
+    if (previousBlock.node.level < level) {
+      return undefined
+    }
+
+    return getPreviousListItem({
+      listItem,
+      level,
+    })({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: {
+          anchor: {
+            path: previousBlock.path,
+            offset: 0,
+          },
+          focus: {
+            path: previousBlock.path,
+            offset: 0,
+          },
+        },
+      },
+    })
+  }
+}

package/src/types/editor.ts

@@ -29,6 +29,7 @@ import type {DOMNode} from 'slate-dom'
 import type {ReactEditor} from 'slate-react'
 import type {PortableTextEditableProps} from '../editor/Editable'
 import type {PortableTextEditor} from '../editor/PortableTextEditor'
+import type {BlockPath} from './paths'
 
 /** @beta */
 export interface EditableAPIDeleteOptions {
@@ -373,7 +374,7 @@ export interface BlockRenderProps {
   focused: boolean
   level?: number
   listItem?: string
-  path: Path
+  path: BlockPath
   selected: boolean
   style?: string
   schemaType: ObjectSchemaType

package/src/types/paths.ts

@@ -0,0 +1 @@
+export type BlockPath = [{_key: string}]