@prosekit/extensions 0.11.3 → 0.11.5

package/src/list/list-keymap.spec.ts

@@ -0,0 +1,39 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+import { pressKey } from '../testing/keyboard'
+
+describe('keymap', () => {
+  const { editor, n } = setupTest()
+
+  it('can update indentation', async () => {
+    const doc1 = n.doc(
+      //
+      n.bullet(n.p('foo')),
+      n.bullet(n.p('bar<a>')),
+    )
+    const doc2 = n.doc(
+      //
+      n.bullet(
+        //
+        n.p('foo'),
+        n.bullet(n.p('bar<a>')),
+      ),
+    )
+    editor.set(doc1)
+
+    await pressKey('mod-]')
+    expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
+    await pressKey('mod-[')
+    expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
+
+    await pressKey('Tab')
+    expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
+    await pressKey('Shift-Tab')
+    expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
+  })
+})

package/src/list/list-keymap.ts

@@ -0,0 +1,48 @@
+import {
+  defineKeymap,
+  type PlainExtension,
+} from '@prosekit/core'
+import {
+  chainCommands,
+  deleteSelection,
+} from '@prosekit/pm/commands'
+import {
+  createDedentListCommand,
+  createIndentListCommand,
+  deleteCommand,
+  enterCommand,
+  joinCollapsedListBackward,
+  joinListUp,
+  protectCollapsed,
+} from 'prosemirror-flat-list'
+
+// This is different from the one exported by prosemirror-flat-list, because
+// some commands are moved to `defineBaseKeymap` in `prosekit/core`.
+const backspaceCommand = chainCommands(
+  protectCollapsed,
+  deleteSelection,
+  joinListUp,
+  joinCollapsedListBackward,
+)
+
+const dedentListCommand = createDedentListCommand()
+const indentListCommand = createIndentListCommand()
+
+const listKeymap = {
+  'Enter': enterCommand,
+  'Backspace': backspaceCommand,
+  'Delete': deleteCommand,
+  'Mod-]': indentListCommand,
+  'Mod-[': dedentListCommand,
+  'Tab': indentListCommand,
+  'Shift-Tab': dedentListCommand,
+}
+
+/**
+ * Returns a extension that adds key bindings for list.
+ *
+ * @internal
+ */
+export function defineListKeymap(): PlainExtension {
+  return defineKeymap(listKeymap)
+}

package/src/list/list-plugins.ts

@@ -0,0 +1,35 @@
+import {
+  definePlugin,
+  type PlainExtension,
+} from '@prosekit/core'
+import { Plugin } from '@prosekit/pm/state'
+import {
+  createListEventPlugin,
+  createListRenderingPlugin,
+  createSafariInputMethodWorkaroundPlugin,
+  unwrapListSlice,
+} from 'prosemirror-flat-list'
+
+function createListClipboardPlugin(): Plugin {
+  return new Plugin({
+    props: {
+      transformCopied: unwrapListSlice,
+    },
+  })
+}
+
+function createListPlugins(): Plugin[] {
+  return [
+    createListEventPlugin(),
+    createListRenderingPlugin(),
+    createListClipboardPlugin(),
+    createSafariInputMethodWorkaroundPlugin(),
+  ]
+}
+
+/**
+ * @internal
+ */
+export function defineListPlugins(): PlainExtension {
+  return definePlugin(createListPlugins)
+}

package/src/list/list-serializer.ts

@@ -0,0 +1,38 @@
+import { isElementLike } from '@ocavue/utils'
+import {
+  defineClipboardSerializer,
+  type PlainExtension,
+} from '@prosekit/core'
+import {
+  joinListElements,
+  listToDOM,
+} from 'prosemirror-flat-list'
+
+/**
+ * @internal
+ */
+export function defineListSerializer(): PlainExtension {
+  return defineClipboardSerializer({
+    serializeFragmentWrapper: (fn) => {
+      return (...args) => {
+        const dom = fn(...args)
+        return joinListElements(dom)
+      }
+    },
+    serializeNodeWrapper: (fn) => {
+      return (...args) => {
+        const dom = fn(...args)
+        return isElementLike(dom) ? joinListElements(dom) : dom
+      }
+    },
+    nodesFromSchemaWrapper: (fn) => {
+      return (...args) => {
+        const nodes = fn(...args)
+        return {
+          ...nodes,
+          list: (node) => listToDOM({ node, nativeList: true, getMarkers: () => null }),
+        }
+      }
+    },
+  })
+}

package/src/list/list-spec.ts

@@ -0,0 +1,60 @@
+import {
+  defineNodeSpec,
+  type Extension,
+} from '@prosekit/core'
+import type {
+  DOMOutputSpec,
+  ProseMirrorNode,
+} from '@prosekit/pm/model'
+import {
+  createListSpec,
+  listToDOM,
+  type ListAttributes,
+} from 'prosemirror-flat-list'
+
+import type { ListAttrs } from './list-types'
+
+/**
+ * @internal
+ */
+export type ListSpecExtension = Extension<{
+  Nodes: {
+    list: ListAttrs
+  }
+}>
+
+function getMarkers(node: ProseMirrorNode): DOMOutputSpec[] {
+  const attrs = node.attrs as ListAttributes
+  switch (attrs.kind) {
+    case 'task':
+      // Use a `label` element here so that the area around the checkbox is also checkable.
+      return [
+        [
+          'label',
+          [
+            'input',
+            { type: 'checkbox', checked: attrs.checked ? '' : undefined },
+          ],
+        ],
+      ]
+    default:
+      // Always return an empty array so that the marker element is rendered. This
+      // is required to make the drop indicator locate the correct position.
+      return []
+  }
+}
+
+/**
+ * @internal
+ */
+export function defineListSpec(): ListSpecExtension {
+  const spec = createListSpec()
+
+  return defineNodeSpec<'list', ListAttrs>({
+    ...spec,
+    toDOM: (node) => {
+      return listToDOM({ node, getMarkers })
+    },
+    name: 'list',
+  })
+}

package/src/list/list-types.spec.ts

@@ -0,0 +1,10 @@
+import type { ListAttributes } from 'prosemirror-flat-list'
+import { test } from 'vitest'
+
+import { assertTypeEqual } from '../types/assert-type-equal'
+
+import type { ListAttrs } from './list-types'
+
+test('ListAttrs', () => {
+  assertTypeEqual<keyof ListAttrs, keyof ListAttributes>(true)
+})

package/src/list/list-types.ts

@@ -0,0 +1,23 @@
+/**
+ * The attributes of a list node.
+ *
+ * @public
+ */
+export interface ListAttrs {
+  /**
+   * The kind of list node.
+   */
+  kind?: 'bullet' | 'ordered' | 'task' | 'toggle'
+  /**
+   * The optional order of the list node.
+   */
+  order?: number | null
+  /**
+   * Whether the list node is checked if its `kind` is `"task"`.
+   */
+  checked?: boolean
+  /**
+   * Whether the list node is collapsed if its `kind` is `"toggle"`.
+   */
+  collapsed?: boolean
+}

package/src/list/list.spec.ts

@@ -0,0 +1,134 @@
+import {
+  createEditor,
+  union,
+} from '@prosekit/core'
+import type { ProseMirrorNode } from '@prosekit/pm/model'
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { defineDoc } from '../doc'
+import { defineParagraph } from '../paragraph'
+import { setupTest } from '../testing'
+import { defineText } from '../text'
+
+import { defineList } from './index'
+
+describe('defineList', () => {
+  it('can add list node', () => {
+    const extension = union(
+      defineList(),
+      defineDoc(),
+      defineText(),
+      defineParagraph(),
+    )
+    const editor = createEditor({ extension })
+    const schema = editor.schema
+    const nodes = Object.keys(schema.nodes)
+    expect(nodes.includes('list')).toBe(true)
+  })
+
+  it('can copy lists as native HTML <li> elements', async () => {
+    const { editor, n, copy } = setupTest()
+
+    const copyAndGetHTML = async (doc: ProseMirrorNode) => {
+      editor.set(doc)
+      editor.commands.selectAll()
+      const { html } = await copy()
+      return html
+    }
+
+    expect(
+      await copyAndGetHTML(
+        n.doc(
+          n.bullet(n.paragraph('Bullet 1')),
+          n.bullet(n.paragraph('Bullet 2')),
+        ),
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      <ul data-pm-slice="0 0 []">
+        <li
+          class="prosemirror-flat-list"
+          data-list-kind="bullet"
+        >
+          <p>
+            Bullet 1
+          </p>
+        </li>
+        <li
+          class="prosemirror-flat-list"
+          data-list-kind="bullet"
+        >
+          <p>
+            Bullet 2
+          </p>
+        </li>
+      </ul>
+      "
+    `)
+
+    expect(
+      await copyAndGetHTML(
+        n.doc(
+          n.ordered(n.paragraph('Ordered 1')),
+          n.ordered(n.paragraph('Ordered 2')),
+        ),
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      <ol data-pm-slice="0 0 []">
+        <li
+          class="prosemirror-flat-list"
+          data-list-kind="ordered"
+        >
+          <p>
+            Ordered 1
+          </p>
+        </li>
+        <li
+          class="prosemirror-flat-list"
+          data-list-kind="ordered"
+        >
+          <p>
+            Ordered 2
+          </p>
+        </li>
+      </ol>
+      "
+    `)
+
+    expect(
+      await copyAndGetHTML(
+        n.doc(
+          n.checked(n.paragraph('Checked 1')),
+          n.unchecked(n.paragraph('Unchecked 2')),
+        ),
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      <ul data-pm-slice="0 0 []">
+        <li
+          class="prosemirror-flat-list"
+          data-list-kind="task"
+          data-list-checked
+        >
+          <p>
+            Checked 1
+          </p>
+        </li>
+        <li
+          class="prosemirror-flat-list"
+          data-list-kind="task"
+        >
+          <p>
+            Unchecked 2
+          </p>
+        </li>
+      </ul>
+      "
+    `)
+  })
+})

package/src/list/list.ts

@@ -0,0 +1,38 @@
+import {
+  union,
+  type Union,
+} from '@prosekit/core'
+
+import {
+  defineListCommands,
+  type ListCommandsExtension,
+} from './list-commands'
+import { defineListDropIndicator } from './list-drop-indicator'
+import { defineListInputRules } from './list-input-rules'
+import { defineListKeymap } from './list-keymap'
+import { defineListPlugins } from './list-plugins'
+import { defineListSerializer } from './list-serializer'
+import {
+  defineListSpec,
+  type ListSpecExtension,
+} from './list-spec'
+
+/**
+ * @internal
+ */
+export type ListExtension = Union<[ListSpecExtension, ListCommandsExtension]>
+
+/**
+ * @public
+ */
+export function defineList(): ListExtension {
+  return union(
+    defineListSpec(),
+    defineListPlugins(),
+    defineListKeymap(),
+    defineListInputRules(),
+    defineListCommands(),
+    defineListSerializer(),
+    defineListDropIndicator(),
+  )
+}

package/src/list/style.css

@@ -0,0 +1,128 @@
+:root {
+  --prosekit-list-bullet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='currentColor'/%3E%3C/svg%3E");
+  --prosekit-list-toggle-open-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='8,10 12,14 16,10' fill='currentColor'/%3E%3C/svg%3E");
+  --prosekit-list-toggle-closed-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='10,8 14,12 10,16' fill='currentColor'/%3E%3C/svg%3E");
+}
+
+.prosemirror-flat-list {
+  & {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  & > .list-marker {
+    position: absolute;
+    left: 0;
+    width: 1.5em;
+    width: 1lh;
+    height: 1.5em;
+    height: 1lh;
+    text-align: center;
+  }
+
+  & > .list-content {
+    margin-left: 1.5em;
+    margin-left: 1lh;
+  }
+
+  &[data-list-kind="bullet"] > .list-marker,
+  &[data-list-kind="toggle"] > .list-marker {
+    background-color: currentColor;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+  }
+
+  &[data-list-kind="bullet"] {
+    & > .list-marker {
+      mask-image: var(--prosekit-list-bullet-icon);
+    }
+  }
+
+  &[data-list-kind="toggle"] {
+    & > .list-marker {
+      mask-image: var(--prosekit-list-toggle-open-icon);
+    }
+
+    &[data-list-collapsable][data-list-collapsed] > .list-marker {
+      mask-image: var(--prosekit-list-toggle-closed-icon);
+    }
+  }
+
+  &[data-list-kind="ordered"] {
+    /*
+      Ensure that the counters in children don't escape, so that the sub lists
+      won't affect the counter of the parent list.
+  
+      See also https://github.com/ocavue/prosemirror-flat-list/issues/23
+      */
+    & > * {
+      contain: style;
+    }
+
+    &::before {
+      position: absolute;
+      right: calc(100% - 1.5em);
+      right: calc(100% - 1lh);
+      content: counter(prosemirror-flat-list-counter, decimal) ". ";
+      font-variant-numeric: tabular-nums;
+    }
+    counter-increment: prosemirror-flat-list-counter;
+
+    /* 
+      Reset the counter for the first list node in the sequence.
+      */
+    &:first-child,
+    :not(&) + & {
+      counter-reset: prosemirror-flat-list-counter;
+
+      /* 
+        If the first list node has a custom order number, set the counter to that value.
+        */
+      &[data-list-order] {
+        @supports (counter-set: prosemirror-flat-list-counter 1) {
+          counter-set: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
+        }
+
+        /* 
+          Safari older than version 17.2 doesn't support `counter-set` 
+          */
+        @supports not (counter-set: prosemirror-flat-list-counter 1) {
+          counter-increment: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
+        }
+      }
+    }
+  }
+
+  &[data-list-kind="task"] {
+    & > .list-marker {
+      &,
+      & * {
+        /* Make sure that the checkbox is at the center */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        padding: 0;
+        cursor: pointer;
+      }
+    }
+  }
+
+  &[data-list-kind="toggle"] {
+    &[data-list-collapsable] > .list-marker {
+      cursor: pointer;
+    }
+    &:not([data-list-collapsable]) > .list-marker {
+      opacity: 40%;
+      pointer-events: none;
+    }
+
+    /* If collapsed, hide the second and futher children */
+    &[data-list-collapsable][data-list-collapsed] > .list-content > *:nth-child(n+2) {
+      display: none;
+    }
+  }
+}

package/src/loro/index.ts

@@ -0,0 +1,17 @@
+export type {
+  LoroSyncPluginProps,
+  LoroUndoPluginProps,
+} from 'loro-prosemirror'
+export {
+  defineLoro,
+  type LoroExtension,
+  type LoroOptions,
+} from './loro'
+export { defineLoroCommands } from './loro-commands'
+export {
+  defineLoroCursorPlugin,
+  type LoroCursorOptions,
+} from './loro-cursor-plugin'
+export { defineLoroKeymap } from './loro-keymap'
+export { defineLoroSyncPlugin } from './loro-sync-plugin'
+export { defineLoroUndoPlugin } from './loro-undo-plugin'

package/src/loro/loro-commands.ts

@@ -0,0 +1,27 @@
+import {
+  defineCommands,
+  type Extension,
+} from '@prosekit/core'
+import {
+  redo,
+  undo,
+} from 'loro-prosemirror'
+
+const commands = {
+  undo: () => undo,
+  redo: () => redo,
+} as const
+
+/**
+ * @internal
+ */
+export type LoroCommandsExtension = Extension<{
+  Commands: {
+    undo: []
+    redo: []
+  }
+}>
+
+export function defineLoroCommands(): LoroCommandsExtension {
+  return defineCommands(commands)
+}

package/src/loro/loro-cursor-plugin.ts

@@ -0,0 +1,28 @@
+import {
+  definePlugin,
+  type PlainExtension,
+} from '@prosekit/core'
+import type {
+  EditorState,
+  Selection,
+} from '@prosekit/pm/state'
+import type { DecorationAttrs } from '@prosekit/pm/view'
+import type { PeerID } from 'loro-crdt'
+import {
+  LoroCursorPlugin,
+  type CursorAwareness,
+} from 'loro-prosemirror'
+
+export interface LoroCursorOptions {
+  awareness: CursorAwareness
+  getSelection?: (state: EditorState) => Selection
+  createCursor?: (user: PeerID) => Element
+  createSelection?: (user: PeerID) => DecorationAttrs
+}
+
+export function defineLoroCursorPlugin(
+  options: LoroCursorOptions,
+): PlainExtension {
+  const { awareness, ...rest } = options
+  return definePlugin(LoroCursorPlugin(awareness, rest))
+}

package/src/loro/loro-keymap.ts

@@ -0,0 +1,23 @@
+import {
+  defineKeymap,
+  isApple,
+  type Keymap,
+  type PlainExtension,
+} from '@prosekit/core'
+import {
+  redo,
+  undo,
+} from 'loro-prosemirror'
+
+const keymap: Keymap = {
+  'Mod-z': undo,
+  'Shift-Mod-z': redo,
+}
+
+if (!isApple) {
+  keymap['Mod-y'] = redo
+}
+
+export function defineLoroKeymap(): PlainExtension {
+  return defineKeymap(keymap)
+}

package/src/loro/loro-sync-plugin.ts

@@ -0,0 +1,14 @@
+import {
+  definePlugin,
+  type PlainExtension,
+} from '@prosekit/core'
+import {
+  LoroSyncPlugin,
+  type LoroSyncPluginProps,
+} from 'loro-prosemirror'
+
+export function defineLoroSyncPlugin(
+  options: LoroSyncPluginProps,
+): PlainExtension {
+  return definePlugin(LoroSyncPlugin(options))
+}

package/src/loro/loro-undo-plugin.ts

@@ -0,0 +1,12 @@
+import {
+  definePlugin,
+  type PlainExtension,
+} from '@prosekit/core'
+import {
+  LoroUndoPlugin,
+  type LoroUndoPluginProps,
+} from 'loro-prosemirror'
+
+export function defineLoroUndoPlugin(options: LoroUndoPluginProps): PlainExtension {
+  return definePlugin(LoroUndoPlugin(options))
+}