@prosekit/extensions 0.11.3 → 0.11.5

package/src/testing/keyboard.ts

@@ -0,0 +1,36 @@
+import { isApple } from '@prosekit/core'
+import { userEvent } from '@vitest/browser/context'
+
+/**
+ * @example
+ *
+ * ```ts
+ * await pressKey('mod-1')
+ * await pressKey('Backspace')
+ * ```
+ *
+ * @internal
+ */
+
+export async function pressKey(input: string) {
+  const keys = input.split('-').map((key) => {
+    if (key.toLowerCase() === 'mod') {
+      return isApple ? 'Meta' : 'Control'
+    }
+    return key
+  })
+  const seq: string[] = []
+  for (const key of keys) {
+    // Press key without releasing it
+    seq.push('{' + key + '>}')
+  }
+  for (const key of keys.toReversed()) {
+    // Release a previously pressed key
+    seq.push('{/' + key + '}')
+  }
+  return await userEvent.keyboard(seq.join(''))
+}
+
+export async function inputText(input: string) {
+  return await userEvent.keyboard(input)
+}

package/src/testing/markdown.ts

@@ -0,0 +1,23 @@
+import rehypeParse from 'rehype-parse'
+import rehypeRemark from 'rehype-remark'
+import remarkHtml from 'remark-html'
+import remarkParse from 'remark-parse'
+import remarkStringify from 'remark-stringify'
+import { unified } from 'unified'
+
+export function markdownFromHTML(html: string): string {
+  return unified()
+    .use(rehypeParse)
+    .use(rehypeRemark)
+    .use(remarkStringify)
+    .processSync(html)
+    .toString()
+}
+
+export function htmlFromMarkdown(markdown: string): string {
+  return unified()
+    .use(remarkParse)
+    .use(remarkHtml)
+    .processSync(markdown)
+    .toString()
+}

package/src/text/index.ts

@@ -0,0 +1,24 @@
+import {
+  defineNodeSpec,
+  type Extension,
+} from '@prosekit/core'
+import type { Attrs } from '@prosekit/pm/model'
+
+/**
+ * @internal
+ */
+export type TextExtension = Extension<{
+  Nodes: {
+    text: Attrs
+  }
+}>
+
+/**
+ * @public
+ */
+export function defineText(): TextExtension {
+  return defineNodeSpec({
+    name: 'text',
+    group: 'inline',
+  })
+}

package/src/text-align/index.ts

@@ -0,0 +1,133 @@
+import {
+  defineCommands,
+  defineKeymap,
+  defineNodeAttr,
+  setNodeAttrs,
+  union,
+  type Extension,
+  type PlainExtension,
+  type Union,
+} from '@prosekit/core'
+import type { Command } from '@prosekit/pm/state'
+
+/**
+ * @public
+ */
+export interface TextAlignOptions<NodeName extends string = string> {
+  /**
+   * The names of node to add the attribute to.
+   *
+   * @example
+   *
+   * ["paragraph", "heading"]
+   */
+  types: NodeName[]
+
+  /**
+   * The default value for the attribute.
+   *
+   * @default "left"
+   */
+  default?: string
+}
+
+function defineTextAlignAttr<NodeName extends string>(
+  type: NodeName,
+  defaultValue: string | null,
+) {
+  return defineNodeAttr<NodeName, 'textAlign', string | null>({
+    type,
+    attr: 'textAlign',
+    default: defaultValue,
+    splittable: true,
+    toDOM: (value: any) => (value ? ['style', `text-align:${value};`] : null),
+    parseDOM: (node: HTMLElement) => {
+      return node.style.getPropertyValue('text-align') || null
+    },
+  })
+}
+
+/**
+ * @internal
+ */
+export type TextAlignAttrsExtension<NodeName extends string> = Extension<{
+  Nodes: { [K in NodeName]: { textAlign: string | null } }
+}>
+
+/**
+ * @internal
+ */
+function defineTextAlignAttrs<NodeName extends string>(
+  types: NodeName[],
+  defaultValue: string | null,
+): TextAlignAttrsExtension<NodeName> {
+  return union(types.map((type) => defineTextAlignAttr(type, defaultValue)))
+}
+
+/**
+ * @internal
+ */
+export function setTextAlign({
+  types,
+  value,
+}: {
+  types: string[]
+  value: string | null
+}): Command {
+  return setNodeAttrs({ type: types, attrs: { textAlign: value } })
+}
+
+/**
+ * @internal
+ */
+export type TextAlignCommandsExtension = Extension<{
+  Commands: {
+    setTextAlign: [value: string | null]
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineTextAlignCommands(
+  types: string[],
+): TextAlignCommandsExtension {
+  return defineCommands({
+    setTextAlign: (value: string | null) => setTextAlign({ types, value }),
+  })
+}
+
+/**
+ * @internal
+ */
+export function defineTextAlignKeymap(types: string[]): PlainExtension {
+  return defineKeymap({
+    'mod-shift-l': setTextAlign({ types, value: 'left' }),
+    'mod-shift-e': setTextAlign({ types, value: 'center' }),
+    'mod-shift-r': setTextAlign({ types, value: 'right' }),
+    'mod-shift-j': setTextAlign({ types, value: 'justify' }),
+  })
+}
+
+/**
+ * @internal
+ */
+export type TextAlignExtension<NodeName extends string> = Union<
+  [TextAlignAttrsExtension<NodeName>, TextAlignCommandsExtension]
+>
+
+/**
+ * Adds a `textAlign` attribute to the specified nodes. This will be rendered as
+ * a CSS `text-align` style.
+ *
+ * @public
+ */
+export function defineTextAlign<NodeName extends string = string>(
+  options: TextAlignOptions<NodeName>,
+): TextAlignExtension<NodeName> {
+  return union(
+    defineTextAlignAttrs<NodeName>(options.types, options.default || 'left'),
+    defineTextAlignKeymap(options.types),
+    defineTextAlignCommands(options.types),
+  )
+}

package/src/types/assert-type-equal.ts

@@ -0,0 +1,8 @@
+import type { IsEqual } from 'type-fest'
+
+/**
+ * Utility function assert that two types are equal in tests.
+ */
+export function assertTypeEqual<T, U>(_val: IsEqual<T, U>): void {
+  // noop
+}

package/src/underline/index.ts

@@ -0,0 +1,83 @@
+import {
+  defineCommands,
+  defineKeymap,
+  defineMarkSpec,
+  toggleMark,
+  union,
+  type Extension,
+  type PlainExtension,
+  type Union,
+} from '@prosekit/core'
+import type { Attrs } from '@prosekit/pm/model'
+
+/**
+ * @internal
+ */
+export type UnderlineSpecExtension = Extension<{
+  Marks: {
+    underline: Attrs
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineUnderlineSpec(): UnderlineSpecExtension {
+  return defineMarkSpec({
+    name: 'underline',
+    parseDOM: [
+      { tag: 'u' },
+      { tag: 'underline' },
+      { style: 'text-decoration=underline' },
+      { style: 'text-decoration-line=underline' },
+    ],
+    toDOM() {
+      return ['u', 0]
+    },
+  })
+}
+
+/**
+ * @internal
+ */
+export type UnderlineCommandsExtension = Extension<{
+  Commands: {
+    toggleUnderline: []
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineUnderlineCommands(): UnderlineCommandsExtension {
+  return defineCommands({
+    toggleUnderline: () => toggleMark({ type: 'underline' }),
+  })
+}
+
+/**
+ * @internal
+ */
+export function defineUnderlineKeymap(): PlainExtension {
+  return defineKeymap({
+    'Mod-u': toggleMark({ type: 'underline' }),
+  })
+}
+
+/**
+ * @internal
+ */
+export type UnderlineExtension = Union<
+  [UnderlineSpecExtension, UnderlineCommandsExtension]
+>
+
+/**
+ * @public
+ */
+export function defineUnderline(): UnderlineExtension {
+  return union(
+    defineUnderlineSpec(),
+    defineUnderlineCommands(),
+    defineUnderlineKeymap(),
+  )
+}

package/src/virtual-selection/index.ts

@@ -0,0 +1,100 @@
+import {
+  definePlugin,
+  type PlainExtension,
+} from '@prosekit/core'
+import {
+  PluginKey,
+  ProseMirrorPlugin,
+  type EditorState,
+  type Transaction,
+} from '@prosekit/pm/state'
+import {
+  Decoration,
+  DecorationSet,
+} from '@prosekit/pm/view'
+
+/**
+ * @internal
+ */
+export type VirtualSelectionExtension = PlainExtension
+
+/**
+ * Shows a virtual selection when the editor is not focused. When the editor is
+ * not focused, the selected inline content will be wrapped in a `<span>`
+ * element with the class `prosekit-virtual-selection`.
+ *
+ * This is useful when you want to move the focus to an element outside the
+ * editor, but still want to show the selection.
+ *
+ * @public
+ */
+export function defineVirtualSelection(): VirtualSelectionExtension {
+  return definePlugin(virtualSelectionPlugin)
+}
+
+// Show the decoration when this is true.
+type PluginState = boolean
+
+const key = new PluginKey<PluginState>('prosekit-virtual-selection')
+
+function getFocusMeta(tr: Transaction): PluginState | undefined {
+  return tr.getMeta(key) as PluginState | undefined
+}
+
+function setFocusMeta(tr: Transaction, value: PluginState) {
+  return tr.setMeta(key, value)
+}
+
+function getFocusState(state: EditorState): PluginState | undefined {
+  return key.getState(state)
+}
+
+const virtualSelectionPlugin = new ProseMirrorPlugin<PluginState>({
+  key,
+  state: {
+    init: () => false,
+    apply: (tr, value) => {
+      return getFocusMeta(tr) ?? value
+    },
+  },
+  props: {
+    handleDOMEvents: {
+      focus: (view) => {
+        view.dispatch(setFocusMeta(view.state.tr, false))
+      },
+
+      blur: (view) => {
+        const { dom, root } = view
+        const activeElement = root.activeElement
+
+        // Don't show the decoration if the dom is blurred because the focus
+        // moved outside the browser window.
+        if (activeElement === dom) return
+
+        view.dispatch(setFocusMeta(view.state.tr, true))
+      },
+    },
+    decorations: (state) => {
+      const { selection, doc } = state
+
+      if (
+        selection.empty
+        || !getFocusState(state)
+        // When `selection.visible` is false, it indicates that the selection is
+        // rendered by the editor and it's not a native browser selection. An
+        // example of this is `NodeSelection`. In this situation, since the
+        // editor already shows the selection, we don't need to display a
+        // virtual selection.
+        || !selection.visible
+      ) {
+        return null
+      }
+
+      return DecorationSet.create(doc, [
+        Decoration.inline(selection.from, selection.to, {
+          class: 'prosekit-virtual-selection',
+        }),
+      ])
+    },
+  },
+})

package/src/virtual-selection/style.css

@@ -0,0 +1,5 @@
+.prosekit-virtual-selection {
+  border-radius: 2px;
+  background-color: #8888884d;
+  box-shadow: 0 0 0 2px #8888884d;
+}

package/src/yjs/index.ts

@@ -0,0 +1,22 @@
+export {
+  defineYjs,
+  type YjsExtension,
+  type YjsOptions,
+} from './yjs'
+export { defineYjsCommands } from './yjs-commands'
+export {
+  defineYjsCursorPlugin,
+  type YjsCursorOptions,
+  type YjsCursorPluginOptions,
+} from './yjs-cursor-plugin'
+export { defineYjsKeymap } from './yjs-keymap'
+export {
+  defineYjsSyncPlugin,
+  type YjsSyncOptions,
+  type YjsSyncPluginOptions,
+} from './yjs-sync-plugin'
+export {
+  defineYjsUndoPlugin,
+  type YjsUndoOptions,
+  type YjsUndoPluginOptions,
+} from './yjs-undo-plugin'

package/src/yjs/style.css

@@ -0,0 +1,31 @@
+.ProseMirror .ProseMirror-yjs-cursor {
+  position: absolute;
+  height: 1em;
+  border-left: black;
+  border-left-width: 2px;
+  border-left-style: solid;
+  border-color: orange;
+  word-break: normal;
+  pointer-events: none;
+}
+
+.ProseMirror .ProseMirror-yjs-cursor > div {
+  position: relative;
+  top: -1.05em;
+  padding-right: 2px;
+  padding-left: 2px;
+  background-color: rgb(250, 129, 0);
+  color: white;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 13px;
+  line-height: normal;
+  font-family: serif;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ProseMirror > .ProseMirror-yjs-cursor:first-child {
+  margin-top: 16px;
+}

package/src/yjs/yjs-commands.ts

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

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

@@ -0,0 +1,25 @@
+import {
+  definePlugin,
+  type PlainExtension,
+} from '@prosekit/core'
+import type { Plugin } from '@prosekit/pm/state'
+import { yCursorPlugin } from 'y-prosemirror'
+import type { Awareness } from 'y-protocols/awareness'
+
+/**
+ * Options for `y-prosemirror`'s `yCursorPlugin`.
+ */
+export type YjsCursorPluginOptions = NonNullable<
+  Parameters<typeof yCursorPlugin>[1]
+>
+
+export interface YjsCursorOptions extends YjsCursorPluginOptions {
+  awareness: Awareness
+}
+
+export function defineYjsCursorPlugin(
+  options: YjsCursorOptions,
+): PlainExtension {
+  const { awareness, ...rest } = options
+  return definePlugin(yCursorPlugin(awareness, rest) as Plugin)
+}

package/src/yjs/yjs-keymap.ts

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

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

@@ -0,0 +1,23 @@
+import {
+  definePlugin,
+  type PlainExtension,
+} from '@prosekit/core'
+import type { Plugin } from '@prosekit/pm/state'
+import { ySyncPlugin } from 'y-prosemirror'
+import type * as Y from 'yjs'
+
+/**
+ * Options for `y-prosemirror`'s `ySyncPlugin`.
+ */
+export type YjsSyncPluginOptions = NonNullable<
+  Parameters<typeof ySyncPlugin>[1]
+>
+
+export interface YjsSyncOptions extends YjsSyncPluginOptions {
+  fragment: Y.XmlFragment
+}
+
+export function defineYjsSyncPlugin(options: YjsSyncOptions): PlainExtension {
+  const { fragment, ...rest } = options
+  return definePlugin(ySyncPlugin(fragment, rest) as Plugin)
+}

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

@@ -0,0 +1,87 @@
+import {
+  definePlugin,
+  type PlainExtension,
+} from '@prosekit/core'
+import type { ProseMirrorPlugin } from '@prosekit/pm/state'
+import type { EditorView } from '@prosekit/pm/view'
+import {
+  yUndoPlugin as originalYUndoPlugin,
+  yUndoPluginKey,
+} from 'y-prosemirror'
+import type { UndoManager as YjsUndoManager } from 'yjs'
+
+type UndoManager = YjsUndoManager & { restore: () => void }
+
+/**
+ * @see https://github.com/yjs/y-prosemirror/issues/114 and https://github.com/yjs/y-prosemirror/issues/102
+ */
+function fixYUndoPlugin(yUndoPluginInstance: ProseMirrorPlugin) {
+  const originalUndoPluginView = yUndoPluginInstance.spec.view
+  yUndoPluginInstance.spec.view = (view: EditorView) => {
+    const pluginState = yUndoPluginKey.getState(view.state)
+    if (!pluginState) {
+      return {}
+    }
+
+    const undoManager = pluginState.undoManager as UndoManager
+
+    if (undoManager.restore) {
+      undoManager.restore()
+      undoManager.restore = () => {}
+    }
+
+    const viewRet = originalUndoPluginView
+      ? originalUndoPluginView(view)
+      : undefined
+
+    return {
+      destroy: () => {
+        const hasUndoManSelf = undoManager.trackedOrigins.has(undoManager)
+
+        const observers = undoManager._observers
+
+        undoManager.restore = () => {
+          if (hasUndoManSelf) {
+            undoManager.trackedOrigins.add(undoManager)
+          }
+
+          undoManager.doc.on(
+            'afterTransaction',
+            undoManager.afterTransactionHandler,
+          )
+
+          undoManager._observers = observers
+        }
+
+        if (viewRet?.destroy) {
+          viewRet.destroy()
+        }
+      },
+    }
+  }
+}
+
+/**
+ * Options for the `y-prosemirror`'s `yUndoPlugin`.
+ */
+export type YjsUndoPluginOptions = NonNullable<
+  Parameters<typeof originalYUndoPlugin>[0]
+>
+
+export interface YjsUndoOptions extends YjsUndoPluginOptions {}
+
+/**
+ * @internal
+ */
+function yUndoPlugin(options?: YjsUndoOptions) {
+  const yUndoPluginInstance = originalYUndoPlugin(options)
+  fixYUndoPlugin(yUndoPluginInstance)
+  return yUndoPluginInstance
+}
+
+/**
+ * @internal
+ */
+export function defineYjsUndoPlugin(options: YjsUndoOptions): PlainExtension {
+  return definePlugin(yUndoPlugin(options))
+}