@portabletext/editor 1.50.2 → 1.50.4

package/src/internal-utils/portable-text-node.ts

@@ -0,0 +1,209 @@
+import type {EditorSchema} from '../editor/editor-schema'
+import {isTypedObject} from './asserters'
+
+type Path = Array<number>
+
+export type PortableTextNode<TEditorSchema extends EditorSchema> =
+  | EditorNode<TEditorSchema>
+  | TextBlockNode<TEditorSchema>
+  | SpanNode<TEditorSchema>
+  | PartialSpanNode
+  | ObjectNode
+
+//////////
+
+export type EditorNode<TEditorSchema extends EditorSchema> = {
+  children: Array<TextBlockNode<TEditorSchema> | ObjectNode>
+}
+
+export function isEditorNode<TEditorSchema extends EditorSchema>(
+  node: unknown,
+): node is EditorNode<TEditorSchema> {
+  if (typeof node === 'object' && node !== null) {
+    return (
+      !('_type' in node) && 'children' in node && Array.isArray(node.children)
+    )
+  }
+
+  return false
+}
+
+//////////
+
+export type TextBlockNode<TEditorSchema extends EditorSchema> = {
+  _key: string
+  _type: TEditorSchema['block']['name']
+  children: Array<SpanNode<TEditorSchema> | ObjectNode>
+  [other: string]: unknown
+}
+
+export function isTextBlockNode<TEditorSchema extends EditorSchema>(
+  context: {schema: TEditorSchema},
+  node: unknown,
+): node is TextBlockNode<TEditorSchema> {
+  return isTypedObject(node) && node._type === context.schema.block.name
+}
+
+//////////
+
+export type SpanNode<TEditorSchema extends EditorSchema> = {
+  _key: string
+  _type?: TEditorSchema['span']['name']
+  text: string
+  [other: string]: unknown
+}
+
+export function isSpanNode<TEditorSchema extends EditorSchema>(
+  context: {schema: TEditorSchema},
+  node: unknown,
+): node is SpanNode<TEditorSchema> {
+  if (typeof node !== 'object' || node === null) {
+    return false
+  }
+
+  if ('children' in node) {
+    return false
+  }
+
+  if ('_type' in node) {
+    return node._type === context.schema.span.name
+  }
+
+  return 'text' in node
+}
+
+//////////
+
+export type PartialSpanNode = {
+  text: string
+  [other: string]: unknown
+}
+
+export function isPartialSpanNode(node: unknown): node is PartialSpanNode {
+  return (
+    typeof node === 'object' &&
+    node !== null &&
+    'text' in node &&
+    typeof node.text === 'string'
+  )
+}
+
+//////////
+
+export type ObjectNode = {
+  _type: string
+  _key: string
+  [other: string]: unknown
+}
+
+export function isObjectNode(
+  context: {schema: EditorSchema},
+  node: unknown,
+): node is ObjectNode {
+  return (
+    !isEditorNode(node) &&
+    !isTextBlockNode(context, node) &&
+    !isSpanNode(context, node) &&
+    !isPartialSpanNode(node)
+  )
+}
+
+/**
+ *
+ */
+export function getBlock<TEditorSchema extends EditorSchema>(
+  root: EditorNode<TEditorSchema>,
+  path: Path,
+): TextBlockNode<TEditorSchema> | ObjectNode | undefined {
+  const index = path.at(0)
+
+  if (index === undefined || path.length !== 1) {
+    return undefined
+  }
+
+  return root.children.at(index)
+}
+
+/**
+ * A "node" can either be
+ * 1. The root (path length is 0)
+ * 2. A block (path length is 1)
+ * 3. A span (path length is 2)
+ * 4. Or an inline object (path length is 2)
+ */
+export function getNode<TEditorSchema extends EditorSchema>(
+  context: {schema: TEditorSchema},
+  root: EditorNode<TEditorSchema>,
+  path: Path,
+): PortableTextNode<TEditorSchema> | undefined {
+  if (path.length === 0) {
+    return root
+  }
+
+  if (path.length === 1) {
+    return getBlock(root, path)
+  }
+
+  if (path.length === 2) {
+    const block = getBlock(root, path.slice(0, 1))
+
+    if (!block || !isTextBlockNode(context, block)) {
+      return undefined
+    }
+
+    const child = block.children.at(path[1])
+
+    if (!child) {
+      return undefined
+    }
+
+    return child
+  }
+}
+
+export function getSpan<TEditorSchema extends EditorSchema>(
+  context: {schema: TEditorSchema},
+  root: EditorNode<TEditorSchema>,
+  path: Path,
+) {
+  const node = getNode(context, root, path)
+
+  if (node && isSpanNode(context, node)) {
+    return node
+  }
+
+  return undefined
+}
+
+/**
+ * A parent can either be the root or a text block
+ */
+export function getParent<TEditorSchema extends EditorSchema>(
+  context: {schema: TEditorSchema},
+  root: EditorNode<TEditorSchema>,
+  path: Path,
+) {
+  if (path.length === 0) {
+    return undefined
+  }
+
+  const parentPath = path.slice(0, -1)
+
+  if (parentPath.length === 0) {
+    return root
+  }
+
+  const blockIndex = parentPath.at(0)
+
+  if (blockIndex === undefined || parentPath.length !== 1) {
+    return undefined
+  }
+
+  const block = root.children.at(blockIndex)
+
+  if (block && isTextBlockNode(context, block)) {
+    return block
+  }
+
+  return undefined
+}

package/src/types/editor.ts

@@ -124,6 +124,7 @@ export interface PortableTextSlateEditor extends ReactEditor {
   isTextBlock: (value: unknown) => value is PortableTextTextBlock
   isTextSpan: (value: unknown) => value is PortableTextSpan
   isListBlock: (value: unknown) => value is PortableTextListBlock
+  value: Array<PortableTextBlock>
 
   /**
    * Use hotkeys
@@ -191,7 +192,10 @@ export type FocusChange = {
   event: FocusEvent<HTMLDivElement, Element>
 }
 
-/** @beta */
+/**
+ * @beta
+ * @deprecated Use `'patch'` changes instead
+ */
 export type UnsetChange = {
   type: 'unset'
   previousValue: PortableTextBlock[]
@@ -208,7 +212,9 @@ export type BlurChange = {
 /**
  * The editor is currently loading something
  * Could be used to show a spinner etc.
- * @beta */
+ * @beta
+ * @deprecated
+ */
 export type LoadingChange = {
   type: 'loading'
   isLoading: boolean

package/src/internal-utils/__tests__/patchToOperations.test.ts

@@ -1,312 +0,0 @@
-import type {Patch} from '@portabletext/patches'
-import {createEditor, type Descendant} from 'slate'
-import {beforeEach, describe, expect, it} from 'vitest'
-import {createActor} from 'xstate'
-import {schemaType} from '../../editor/__tests__/PortableTextEditorTester'
-import {editorMachine} from '../../editor/editor-machine'
-import {legacySchemaToEditorSchema} from '../../editor/editor-schema'
-import {defaultKeyGenerator} from '../../editor/key-generator'
-import {createLegacySchema} from '../../editor/legacy-schema'
-import {withPlugins} from '../../editor/plugins/with-plugins'
-import {relayMachine} from '../../editor/relay-machine'
-import {createApplyPatch} from '../applyPatch'
-import {VOID_CHILD_KEY} from '../values'
-
-const legacySchema = createLegacySchema(schemaType)
-const schemaTypes = legacySchemaToEditorSchema(legacySchema)
-
-const patchToOperations = createApplyPatch(schemaTypes)
-
-const editor = withPlugins(createEditor(), {
-  editorActor: createActor(editorMachine, {
-    input: {
-      schema: schemaTypes,
-      keyGenerator: defaultKeyGenerator,
-      getLegacySchema: () => legacySchema,
-    },
-  }),
-  relayActor: createActor(relayMachine),
-  subscriptions: [],
-})
-
-const createDefaultValue = (): Descendant[] => [
-  {
-    _type: 'image',
-    _key: 'c01739b0d03b',
-    children: [
-      {
-        _key: VOID_CHILD_KEY,
-        _type: 'span',
-        text: '',
-        marks: [],
-      },
-    ],
-    __inline: false,
-    value: {
-      asset: {
-        _ref: 'image-f52f71bc1df46e080dabe43a8effe8ccfb5f21de-4032x3024-png',
-        _type: 'reference',
-      },
-    },
-  },
-]
-
-describe('operationToPatches', () => {
-  beforeEach(() => {
-    editor.onChange()
-  })
-
-  it('makes the correct operations for block objects', () => {
-    editor.children = createDefaultValue()
-    const patches = [
-      {
-        type: 'unset',
-        path: [{_key: 'c01739b0d03b'}, 'hotspot'],
-        origin: 'remote',
-      },
-      {type: 'unset', path: [{_key: 'c01739b0d03b'}, 'crop'], origin: 'remote'},
-      {
-        type: 'set',
-        path: [{_key: 'c01739b0d03b'}, 'asset'],
-        value: {
-          _ref: 'image-b5681d9d0b2b6c922238e7c694500dd7c1349b19-256x256-jpg',
-          _type: 'reference',
-        },
-        origin: 'remote',
-      },
-    ] as Patch[]
-    patches.forEach((p) => {
-      patchToOperations(editor, p)
-    })
-    expect(editor.children).toEqual([
-      {
-        __inline: false,
-        _key: 'c01739b0d03b',
-        _type: 'image',
-        children: [
-          {
-            _key: VOID_CHILD_KEY,
-            _type: 'span',
-            marks: [],
-            text: '',
-          },
-        ],
-        value: {
-          asset: {
-            _ref: 'image-b5681d9d0b2b6c922238e7c694500dd7c1349b19-256x256-jpg',
-            _type: 'reference',
-          },
-        },
-      },
-    ])
-  })
-  it('will not create operations for insertion inside blocks', () => {
-    editor.children = [
-      {
-        _type: 'someType',
-        _key: 'c01739b0d03b',
-        children: [
-          {
-            _key: VOID_CHILD_KEY,
-            _type: 'span',
-            text: '',
-            marks: [],
-          },
-        ],
-        __inline: false,
-        value: {
-          asset: {
-            _ref: 'image-f52f71bc1df46e080dabe43a8effe8ccfb5f21de-4032x3024-png',
-            _type: 'reference',
-          },
-          nestedArray: [],
-        },
-      },
-    ]
-    const patches = [
-      {
-        type: 'insert',
-        path: [{_key: 'c01739b0d03b'}, 'nestedArray'],
-        origin: 'remote',
-      },
-    ] as Patch[]
-    patches.forEach((p) => {
-      patchToOperations(editor, p)
-    })
-    expect(editor.children).toMatchInlineSnapshot(`
-      [
-        {
-          "__inline": false,
-          "_key": "c01739b0d03b",
-          "_type": "someType",
-          "children": [
-            {
-              "_key": "${VOID_CHILD_KEY}",
-              "_type": "span",
-              "marks": [],
-              "text": "",
-            },
-          ],
-          "value": {
-            "asset": {
-              "_ref": "image-f52f71bc1df46e080dabe43a8effe8ccfb5f21de-4032x3024-png",
-              "_type": "reference",
-            },
-            "nestedArray": [],
-          },
-        },
-      ]
-    `)
-  })
-  it('will not create operations for removal inside blocks', () => {
-    editor.children = [
-      {
-        _type: 'someType',
-        _key: 'c01739b0d03b',
-        children: [
-          {
-            _key: VOID_CHILD_KEY,
-            _type: 'span',
-            text: '',
-            marks: [],
-          },
-        ],
-        __inline: false,
-        value: {
-          asset: {
-            _ref: 'image-f52f71bc1df46e080dabe43a8effe8ccfb5f21de-4032x3024-png',
-            _type: 'reference',
-          },
-          nestedArray: [
-            {
-              _key: 'foo',
-              _type: 'nestedValue',
-            },
-          ],
-        },
-      },
-    ]
-    const patches = [
-      {
-        type: 'unset',
-        path: [{_key: 'c01739b0d03b'}, 'nestedArray', 0],
-        origin: 'remote',
-      },
-    ] as Patch[]
-    patches.forEach((p) => {
-      patchToOperations(editor, p)
-    })
-    expect(editor.children).toMatchInlineSnapshot(`
-      [
-        {
-          "__inline": false,
-          "_key": "c01739b0d03b",
-          "_type": "someType",
-          "children": [
-            {
-              "_key": "${VOID_CHILD_KEY}",
-              "_type": "span",
-              "marks": [],
-              "text": "",
-            },
-          ],
-          "value": {
-            "asset": {
-              "_ref": "image-f52f71bc1df46e080dabe43a8effe8ccfb5f21de-4032x3024-png",
-              "_type": "reference",
-            },
-            "nestedArray": [
-              {
-                "_key": "foo",
-                "_type": "nestedValue",
-              },
-            ],
-          },
-        },
-      ]
-    `)
-  })
-  it('will not create operations for setting data inside blocks', () => {
-    editor.children = [
-      {
-        _key: '1335959d4d03',
-        _type: 'block',
-        children: [
-          {
-            _key: '9bd868adcd6b',
-            _type: 'span',
-            marks: [],
-            text: '1 ',
-          },
-          {
-            _key: '6f75d593f3fc',
-            _type: 'span',
-            marks: ['11de7fcea659'],
-            text: '2',
-          },
-          {
-            _key: '033618a7f081',
-            _type: 'span',
-            marks: [],
-            text: ' 3',
-          },
-        ],
-        markDefs: [
-          {
-            _key: '11de7fcea659',
-            _type: 'link',
-          },
-        ],
-        style: 'normal',
-      },
-    ]
-    const patches = [
-      {
-        type: 'set',
-        path: [{_key: '1335959d4d03'}, 'markDefs', {_key: '11de7fcea659'}],
-        origin: 'remote',
-        value: {href: 'http://www.test.com'},
-      },
-    ] as Patch[]
-    patches.forEach((p) => {
-      patchToOperations(editor, p)
-    })
-    expect(editor.children).toMatchInlineSnapshot(`
-      [
-        {
-          "_key": "1335959d4d03",
-          "_type": "block",
-          "children": [
-            {
-              "_key": "9bd868adcd6b",
-              "_type": "span",
-              "marks": [],
-              "text": "1 ",
-            },
-            {
-              "_key": "6f75d593f3fc",
-              "_type": "span",
-              "marks": [
-                "11de7fcea659",
-              ],
-              "text": "2",
-            },
-            {
-              "_key": "033618a7f081",
-              "_type": "span",
-              "marks": [],
-              "text": " 3",
-            },
-          ],
-          "markDefs": [
-            {
-              "_key": "11de7fcea659",
-              "_type": "link",
-            },
-          ],
-          "style": "normal",
-        },
-      ]
-    `)
-  })
-})