@portabletext/editor 0.0.0

package/src/editor/plugins/createWithPatches.ts

@@ -0,0 +1,274 @@
+/* eslint-disable max-nested-callbacks */
+import {type Subject} from 'rxjs'
+import {
+  type Descendant,
+  Editor,
+  type InsertNodeOperation,
+  type InsertTextOperation,
+  type MergeNodeOperation,
+  type MoveNodeOperation,
+  type Operation,
+  type RemoveNodeOperation,
+  type RemoveTextOperation,
+  type SetNodeOperation,
+  type SplitNodeOperation,
+} from 'slate'
+
+import {insert, setIfMissing, unset} from '../../patch/PatchEvent'
+import {
+  type EditorChange,
+  type PatchObservable,
+  type PortableTextMemberSchemaTypes,
+  type PortableTextSlateEditor,
+} from '../../types/editor'
+import {type Patch} from '../../types/patch'
+import {createApplyPatch} from '../../utils/applyPatch'
+import {debugWithName} from '../../utils/debug'
+import {fromSlateValue, isEqualToEmptyEditor} from '../../utils/values'
+import {IS_PROCESSING_REMOTE_CHANGES, KEY_TO_VALUE_ELEMENT} from '../../utils/weakMaps'
+import {withRemoteChanges} from '../../utils/withChanges'
+import {isPatching, PATCHING, withoutPatching} from '../../utils/withoutPatching'
+import {withPreserveKeys} from '../../utils/withPreserveKeys'
+import {withoutSaving} from './createWithUndoRedo'
+
+const debug = debugWithName('plugin:withPatches')
+const debugVerbose = false
+
+export interface PatchFunctions {
+  insertNodePatch: (
+    editor: PortableTextSlateEditor,
+    operation: InsertNodeOperation,
+    previousChildren: Descendant[],
+  ) => Patch[]
+  insertTextPatch: (
+    editor: PortableTextSlateEditor,
+    operation: InsertTextOperation,
+    previousChildren: Descendant[],
+  ) => Patch[]
+  mergeNodePatch: (
+    editor: PortableTextSlateEditor,
+    operation: MergeNodeOperation,
+    previousChildren: Descendant[],
+  ) => Patch[]
+  moveNodePatch: (
+    editor: PortableTextSlateEditor,
+    operation: MoveNodeOperation,
+    previousChildren: Descendant[],
+  ) => Patch[]
+  removeNodePatch: (
+    editor: PortableTextSlateEditor,
+    operation: RemoveNodeOperation,
+    previousChildren: Descendant[],
+  ) => Patch[]
+  removeTextPatch: (
+    editor: PortableTextSlateEditor,
+    operation: RemoveTextOperation,
+    previousChildren: Descendant[],
+  ) => Patch[]
+  setNodePatch: (
+    editor: PortableTextSlateEditor,
+    operation: SetNodeOperation,
+    previousChildren: Descendant[],
+  ) => Patch[]
+  splitNodePatch: (
+    editor: PortableTextSlateEditor,
+    operation: SplitNodeOperation,
+    previousChildren: Descendant[],
+  ) => Patch[]
+}
+
+interface Options {
+  change$: Subject<EditorChange>
+  keyGenerator: () => string
+  patches$?: PatchObservable
+  patchFunctions: PatchFunctions
+  readOnly: boolean
+  schemaTypes: PortableTextMemberSchemaTypes
+}
+
+export function createWithPatches({
+  change$,
+  patches$,
+  patchFunctions,
+  readOnly,
+  schemaTypes,
+}: Options): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
+  // The previous editor children are needed to figure out the _key of deleted nodes
+  // The editor.children would no longer contain that information if the node is already deleted.
+  let previousChildren: Descendant[]
+
+  const applyPatch = createApplyPatch(schemaTypes)
+
+  return function withPatches(editor: PortableTextSlateEditor) {
+    IS_PROCESSING_REMOTE_CHANGES.set(editor, false)
+    PATCHING.set(editor, true)
+    previousChildren = [...editor.children]
+
+    const {apply} = editor
+    let bufferedPatches: Patch[] = []
+
+    const handleBufferedRemotePatches = () => {
+      if (bufferedPatches.length === 0) {
+        return
+      }
+      const patches = bufferedPatches
+      bufferedPatches = []
+      let changed = false
+      withRemoteChanges(editor, () => {
+        Editor.withoutNormalizing(editor, () => {
+          withoutPatching(editor, () => {
+            withoutSaving(editor, () => {
+              withPreserveKeys(editor, () => {
+                patches.forEach((patch) => {
+                  if (debug.enabled) debug(`Handling remote patch ${JSON.stringify(patch)}`)
+                  changed = applyPatch(editor, patch)
+                })
+              })
+            })
+          })
+        })
+        if (changed) {
+          editor.normalize()
+          editor.onChange()
+        }
+      })
+    }
+
+    const handlePatches = ({patches}: {patches: Patch[]}) => {
+      const remotePatches = patches.filter((p) => p.origin !== 'local')
+      if (remotePatches.length === 0) {
+        return
+      }
+      bufferedPatches = bufferedPatches.concat(remotePatches)
+      handleBufferedRemotePatches()
+    }
+
+    if (patches$) {
+      editor.subscriptions.push(() => {
+        debug('Subscribing to patches$')
+        const sub = patches$.subscribe(handlePatches)
+        return () => {
+          debug('Unsubscribing to patches$')
+          sub.unsubscribe()
+        }
+      })
+    }
+
+    editor.apply = (operation: Operation): void | Editor => {
+      if (readOnly) {
+        apply(operation)
+        return editor
+      }
+      let patches: Patch[] = []
+
+      // Update previous children here before we apply
+      previousChildren = editor.children
+
+      const editorWasEmpty = isEqualToEmptyEditor(previousChildren, schemaTypes)
+
+      // Apply the operation
+      apply(operation)
+
+      const editorIsEmpty = isEqualToEmptyEditor(editor.children, schemaTypes)
+
+      if (!isPatching(editor)) {
+        if (debugVerbose && debug.enabled)
+          debug(`Editor is not producing patch for operation ${operation.type}`, operation)
+        return editor
+      }
+
+      // If the editor was empty and now isn't, insert the placeholder into it.
+      if (editorWasEmpty && !editorIsEmpty && operation.type !== 'set_selection') {
+        patches.push(insert(previousChildren, 'before', [0]))
+      }
+
+      switch (operation.type) {
+        case 'insert_text':
+          patches = [
+            ...patches,
+            ...patchFunctions.insertTextPatch(editor, operation, previousChildren),
+          ]
+          break
+        case 'remove_text':
+          patches = [
+            ...patches,
+            ...patchFunctions.removeTextPatch(editor, operation, previousChildren),
+          ]
+          break
+        case 'remove_node':
+          patches = [
+            ...patches,
+            ...patchFunctions.removeNodePatch(editor, operation, previousChildren),
+          ]
+          break
+        case 'split_node':
+          patches = [
+            ...patches,
+            ...patchFunctions.splitNodePatch(editor, operation, previousChildren),
+          ]
+          break
+        case 'insert_node':
+          patches = [
+            ...patches,
+            ...patchFunctions.insertNodePatch(editor, operation, previousChildren),
+          ]
+          break
+        case 'set_node':
+          patches = [
+            ...patches,
+            ...patchFunctions.setNodePatch(editor, operation, previousChildren),
+          ]
+          break
+        case 'merge_node':
+          patches = [
+            ...patches,
+            ...patchFunctions.mergeNodePatch(editor, operation, previousChildren),
+          ]
+          break
+        case 'move_node':
+          patches = [
+            ...patches,
+            ...patchFunctions.moveNodePatch(editor, operation, previousChildren),
+          ]
+          break
+        case 'set_selection':
+        default:
+        // Do nothing
+      }
+
+      // Unset the value if a operation made the editor empty
+      if (
+        !editorWasEmpty &&
+        editorIsEmpty &&
+        ['merge_node', 'set_node', 'remove_text', 'remove_node'].includes(operation.type)
+      ) {
+        patches = [...patches, unset([])]
+        change$.next({
+          type: 'unset',
+          previousValue: fromSlateValue(
+            previousChildren,
+            schemaTypes.block.name,
+            KEY_TO_VALUE_ELEMENT.get(editor),
+          ),
+        })
+      }
+
+      // Prepend patches with setIfMissing if going from empty editor to something involving a patch.
+      if (editorWasEmpty && patches.length > 0) {
+        patches = [setIfMissing([], []), ...patches]
+      }
+
+      // Emit all patches
+      if (patches.length > 0) {
+        patches.forEach((patch) => {
+          change$.next({
+            type: 'patch',
+            patch: {...patch, origin: 'local'},
+          })
+        })
+      }
+      return editor
+    }
+    return editor
+  }
+}

package/src/editor/plugins/createWithPlaceholderBlock.ts

@@ -0,0 +1,36 @@
+import {Editor, Path} from 'slate'
+
+import {type PortableTextSlateEditor} from '../../types/editor'
+import {type SlateTextBlock, type VoidElement} from '../../types/slate'
+import {debugWithName} from '../../utils/debug'
+
+const debug = debugWithName('plugin:withPlaceholderBlock')
+
+/**
+ * Keep a "placeholder" block present when the editor is empty
+ *
+ */
+export function createWithPlaceholderBlock(): (
+  editor: PortableTextSlateEditor,
+) => PortableTextSlateEditor {
+  return function withPlaceholderBlock(editor: PortableTextSlateEditor): PortableTextSlateEditor {
+    const {apply} = editor
+
+    editor.apply = (op) => {
+      if (op.type === 'remove_node') {
+        const node = op.node as SlateTextBlock | VoidElement
+        if (op.path[0] === 0 && Editor.isVoid(editor, node)) {
+          // Check next path, if it exists, do nothing
+          const nextPath = Path.next(op.path)
+          // Is removing the first block which is a void (not a text block), add a new empty text block in it, if there is no other element in the next path
+          if (!editor.children[nextPath[0]]) {
+            debug('Adding placeholder block')
+            Editor.insertNode(editor, editor.pteCreateEmptyBlock())
+          }
+        }
+      }
+      apply(op)
+    }
+    return editor
+  }
+}

package/src/editor/plugins/createWithPortableTextBlockStyle.ts

@@ -0,0 +1,91 @@
+import {Editor, type Node, Path, Text as SlateText, Transforms} from 'slate'
+
+import {type PortableTextMemberSchemaTypes, type PortableTextSlateEditor} from '../../types/editor'
+import {debugWithName} from '../../utils/debug'
+
+const debug = debugWithName('plugin:withPortableTextBlockStyle')
+
+export function createWithPortableTextBlockStyle(
+  types: PortableTextMemberSchemaTypes,
+): (editor: PortableTextSlateEditor) => PortableTextSlateEditor {
+  const defaultStyle = types.styles[0].value
+  return function withPortableTextBlockStyle(
+    editor: PortableTextSlateEditor,
+  ): PortableTextSlateEditor {
+    // Extend Slate's default normalization to reset split node to normal style
+    // if there is no text at the right end of the split.
+    const {normalizeNode} = editor
+    editor.normalizeNode = (nodeEntry) => {
+      normalizeNode(nodeEntry)
+      const [, path] = nodeEntry
+      for (const op of editor.operations) {
+        if (
+          op.type === 'split_node' &&
+          op.path.length === 1 &&
+          editor.isTextBlock(op.properties) &&
+          op.properties.style !== defaultStyle &&
+          op.path[0] === path[0] &&
+          !Path.equals(path, op.path)
+        ) {
+          const [child] = Editor.node(editor, [op.path[0] + 1, 0])
+          if (SlateText.isText(child) && child.text === '') {
+            debug(`Normalizing split node to ${defaultStyle} style`, op)
+            Transforms.setNodes(editor, {style: defaultStyle}, {at: [op.path[0] + 1], voids: false})
+            break
+          }
+        }
+      }
+    }
+    editor.pteHasBlockStyle = (style: string): boolean => {
+      if (!editor.selection) {
+        return false
+      }
+      const selectedBlocks = [
+        ...Editor.nodes(editor, {
+          at: editor.selection,
+          match: (node) => editor.isTextBlock(node) && node.style === style,
+        }),
+      ]
+      if (selectedBlocks.length > 0) {
+        return true
+      }
+      return false
+    }
+
+    editor.pteToggleBlockStyle = (blockStyle: string): void => {
+      if (!editor.selection) {
+        return
+      }
+      const selectedBlocks = [
+        ...Editor.nodes(editor, {
+          at: editor.selection,
+          match: (node) => editor.isTextBlock(node),
+        }),
+      ]
+      selectedBlocks.forEach(([node, path]) => {
+        if (editor.isTextBlock(node) && node.style === blockStyle) {
+          debug(`Unsetting block style '${blockStyle}'`)
+          Transforms.setNodes(editor, {...node, style: defaultStyle} as Partial<Node>, {
+            at: path,
+          })
+        } else {
+          if (blockStyle) {
+            debug(`Setting style '${blockStyle}'`)
+          } else {
+            debug('Setting default style', defaultStyle)
+          }
+          Transforms.setNodes(
+            editor,
+            {
+              ...node,
+              style: blockStyle || defaultStyle,
+            } as Partial<Node>,
+            {at: path},
+          )
+        }
+      })
+      editor.onChange()
+    }
+    return editor
+  }
+}

package/src/editor/plugins/createWithPortableTextLists.ts

@@ -0,0 +1,160 @@
+import {Editor, Element, type Node, Text, Transforms} from 'slate'
+
+import {type PortableTextMemberSchemaTypes, type PortableTextSlateEditor} from '../../types/editor'
+import {debugWithName} from '../../utils/debug'
+
+const debug = debugWithName('plugin:withPortableTextLists')
+const MAX_LIST_LEVEL = 10
+
+export function createWithPortableTextLists(types: PortableTextMemberSchemaTypes) {
+  return function withPortableTextLists(editor: PortableTextSlateEditor): PortableTextSlateEditor {
+    editor.pteToggleListItem = (listItemStyle: string) => {
+      const isActive = editor.pteHasListStyle(listItemStyle)
+      if (isActive) {
+        debug(`Remove list item '${listItemStyle}'`)
+        editor.pteUnsetListItem(listItemStyle)
+      } else {
+        debug(`Add list item '${listItemStyle}'`)
+        editor.pteSetListItem(listItemStyle)
+      }
+    }
+
+    editor.pteUnsetListItem = (listItemStyle: string) => {
+      if (!editor.selection) {
+        return
+      }
+      const selectedBlocks = [
+        ...Editor.nodes(editor, {
+          at: editor.selection,
+          match: (node) => Element.isElement(node) && node._type === types.block.name,
+        }),
+      ]
+      selectedBlocks.forEach(([node, path]) => {
+        if (editor.isListBlock(node)) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const {listItem, level, ...rest} = node
+          const newNode = {
+            ...rest,
+            listItem: undefined,
+            level: undefined,
+          } as Partial<Node>
+          debug(`Unsetting list '${listItemStyle}'`)
+          Transforms.setNodes(editor, newNode, {at: path})
+        }
+      })
+    }
+
+    editor.pteSetListItem = (listItemStyle: string) => {
+      if (!editor.selection) {
+        return
+      }
+      const selectedBlocks = [
+        ...Editor.nodes(editor, {
+          at: editor.selection,
+          match: (node) => editor.isTextBlock(node),
+        }),
+      ]
+      selectedBlocks.forEach(([node, path]) => {
+        debug(`Setting list '${listItemStyle}'`)
+        Transforms.setNodes(
+          editor,
+          {
+            ...node,
+            level: 1,
+            listItem: listItemStyle || (types.lists[0] && types.lists[0].value),
+          } as Partial<Node>,
+          {at: path},
+        )
+      })
+    }
+
+    editor.pteEndList = () => {
+      if (!editor.selection) {
+        return false
+      }
+      const selectedBlocks = [
+        ...Editor.nodes(editor, {
+          at: editor.selection,
+          match: (node) =>
+            Element.isElement(node) &&
+            editor.isListBlock(node) &&
+            node.children.length === 1 &&
+            Text.isText(node.children[0]) &&
+            node.children[0].text === '',
+        }),
+      ]
+      if (selectedBlocks.length === 0) {
+        return false
+      }
+      selectedBlocks.forEach(([node, path]) => {
+        if (Element.isElement(node)) {
+          debug('Unset list')
+          Transforms.setNodes(
+            editor,
+            {
+              ...node,
+              level: undefined,
+              listItem: undefined,
+            },
+            {at: path},
+          )
+        }
+      })
+      return true // Note: we are exiting the plugin chain by not returning editor (or hotkey plugin 'enter' will fire)
+    }
+
+    editor.pteIncrementBlockLevels = (reverse?: boolean): boolean => {
+      if (!editor.selection) {
+        return false
+      }
+      const selectedBlocks = [
+        ...Editor.nodes(editor, {
+          at: editor.selection,
+          match: (node) => !!editor.isListBlock(node),
+        }),
+      ]
+      if (selectedBlocks.length === 0) {
+        return false
+      }
+      selectedBlocks.forEach(([node, path]) => {
+        if (editor.isListBlock(node)) {
+          let level = node.level || 1
+          if (reverse) {
+            level--
+            debug('Decrementing list level', Math.min(MAX_LIST_LEVEL, Math.max(1, level)))
+          } else {
+            level++
+            debug('Incrementing list level', Math.min(MAX_LIST_LEVEL, Math.max(1, level)))
+          }
+          Transforms.setNodes(
+            editor,
+            {level: Math.min(MAX_LIST_LEVEL, Math.max(1, level))},
+            {at: path},
+          )
+        }
+      })
+      return true
+    }
+
+    editor.pteHasListStyle = (listStyle: string): boolean => {
+      if (!editor.selection) {
+        return false
+      }
+      const selectedBlocks = [
+        ...Editor.nodes(editor, {
+          at: editor.selection,
+          match: (node) => editor.isTextBlock(node),
+        }),
+      ]
+
+      if (selectedBlocks.length > 0) {
+        return selectedBlocks.every(
+          ([node]) => editor.isListBlock(node) && node.listItem === listStyle,
+        )
+      }
+      return false
+    }
+
+    return editor
+  }
+}