@prosekit/extensions 0.11.3 → 0.11.5

package/src/code-block/index.ts

@@ -0,0 +1,32 @@
+export {
+  defineCodeBlock,
+  type CodeBlockExtension,
+} from './code-block'
+export {
+  defineCodeBlockCommands,
+  type CodeBlockCommandsExtension,
+} from './code-block-commands'
+export {
+  defineCodeBlockHighlight,
+  type CodeBlockHighlightOptions,
+  type HighlightParser,
+} from './code-block-highlight'
+export {
+  defineCodeBlockEnterRule,
+  defineCodeBlockInputRule,
+} from './code-block-input-rule'
+export { defineCodeBlockKeymap } from './code-block-keymap'
+export { defineCodeBlockShiki } from './code-block-shiki'
+export {
+  defineCodeBlockSpec,
+  type CodeBlockSpecExtension,
+} from './code-block-spec'
+export type { CodeBlockAttrs } from './code-block-types'
+export {
+  shikiBundledLanguagesInfo,
+  shikiBundledThemesInfo,
+  type ShikiBundledLanguage,
+  type ShikiBundledLanguageInfo,
+  type ShikiBundledTheme,
+  type ShikiBundledThemeInfo,
+} from './shiki-bundle'

package/src/code-block/shiki-bundle.ts

@@ -0,0 +1,8 @@
+export {
+  bundledLanguagesInfo as shikiBundledLanguagesInfo,
+  bundledThemesInfo as shikiBundledThemesInfo,
+  type BundledLanguage as ShikiBundledLanguage,
+  type BundledLanguageInfo as ShikiBundledLanguageInfo,
+  type BundledTheme as ShikiBundledTheme,
+  type BundledThemeInfo as ShikiBundledThemeInfo,
+} from 'shiki'

package/src/code-block/shiki-highlighter-chunk.ts

@@ -0,0 +1,84 @@
+import type {
+  BundledHighlighterOptions,
+  BundledLanguage,
+  BundledTheme,
+  Highlighter,
+  SpecialLanguage,
+} from 'shiki'
+import { createHighlighter } from 'shiki/bundle/full'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+
+let highlighterPromise: Promise<void> | undefined
+let highlighter: Highlighter | undefined
+const loadedLangs = new Set<BundledLanguage | SpecialLanguage>()
+const loadedThemes = new Set<BundledTheme>()
+
+export interface ShikiHighlighterOptions extends BundledHighlighterOptions<BundledLanguage, BundledTheme> {}
+
+export interface HighlighterOptions extends Omit<ShikiHighlighterOptions, 'langs' | 'themes'> {
+  themes: BundledTheme[]
+  langs: (BundledLanguage | SpecialLanguage)[]
+}
+
+function ensureHighlighter({
+  ...options
+}: HighlighterOptions): Promise<void> {
+  if (!highlighterPromise) {
+    // If no engine is provided, use the JavaScript engine, which is
+    // smaller than the WASM engine.
+    if (!options.engine) {
+      const engine = createJavaScriptRegexEngine({ forgiving: true })
+      options.engine = engine
+    }
+    highlighterPromise = createHighlighter(options).then((createdHighlighter) => {
+      highlighter = createdHighlighter
+    })
+  }
+  return highlighterPromise
+}
+
+async function loadLanguages(langs: (BundledLanguage | SpecialLanguage)[]) {
+  for (const lang of langs) {
+    if (!highlighter) break
+    await highlighter.loadLanguage(lang)
+    loadedLangs.add(lang)
+  }
+}
+
+async function loadThemes(themes: BundledTheme[]) {
+  for (const theme of themes) {
+    if (!highlighter) break
+    await highlighter.loadTheme(theme)
+    loadedThemes.add(theme)
+  }
+}
+
+export type HighlighterResult =
+  | {
+    highlighter: Highlighter
+    promise?: undefined
+  }
+  | {
+    highlighter?: undefined
+    promise: Promise<void>
+  }
+
+export function createOrGetHighlighter(
+  options: HighlighterOptions,
+): HighlighterResult {
+  if (!highlighter) {
+    return { promise: ensureHighlighter(options) }
+  }
+
+  const langs = options.langs.filter((lang) => !loadedLangs.has(lang))
+  if (langs.length > 0) {
+    return { promise: loadLanguages(langs) }
+  }
+
+  const themes = options.themes.filter((theme) => !loadedThemes.has(theme))
+  if (themes.length > 0) {
+    return { promise: loadThemes(themes) }
+  }
+
+  return { highlighter }
+}

package/src/code-block/shiki-highlighter.ts

@@ -0,0 +1,22 @@
+import type {
+  HighlighterOptions,
+  HighlighterResult,
+} from './shiki-highlighter-chunk'
+
+let loaded: ((options: HighlighterOptions) => HighlighterResult) | undefined
+
+async function load() {
+  const { createOrGetHighlighter } = await import('./shiki-highlighter-chunk')
+  loaded = createOrGetHighlighter
+}
+
+export function createOrGetHighlighter(
+  options: HighlighterOptions,
+): HighlighterResult {
+  if (!loaded) {
+    return { promise: load() }
+  }
+  return loaded(options)
+}
+
+export type { HighlighterOptions }

package/src/code-block/shiki-parser.ts

@@ -0,0 +1,36 @@
+import type { Parser } from 'prosemirror-highlight'
+import { createParser } from 'prosemirror-highlight/shiki'
+
+import type { ShikiBundledLanguage } from './shiki-bundle'
+import {
+  createOrGetHighlighter,
+  type HighlighterOptions,
+} from './shiki-highlighter'
+
+/**
+ * @internal
+ */
+export function createLazyParser(
+  highlighterOptions: HighlighterOptions,
+): Parser {
+  let parser: Parser | undefined
+
+  return function lazyParser(options) {
+    const language = (options.language || '') as ShikiBundledLanguage
+    const { highlighter, promise } = createOrGetHighlighter({
+      ...highlighterOptions,
+      langs: [language],
+    })
+
+    if (!highlighter) {
+      return promise
+    }
+
+    if (!parser) {
+      parser = createParser(highlighter, {
+        theme: highlighterOptions.themes[0],
+      })
+    }
+    return parser(options)
+  }
+}

package/src/commit/index.ts

@@ -0,0 +1,330 @@
+import {
+  defineDefaultState,
+  definePlugin,
+  jsonFromNode,
+  union,
+  type NodeJSON,
+  type PlainExtension,
+  type StepJSON,
+} from '@prosekit/core'
+import {
+  DOMSerializer,
+  Fragment,
+  Slice,
+  type ProseMirrorNode,
+} from '@prosekit/pm/model'
+import {
+  PluginKey,
+  ProseMirrorPlugin,
+  type Transaction,
+} from '@prosekit/pm/state'
+import { Step } from '@prosekit/pm/transform'
+import {
+  Decoration,
+  DecorationSet,
+  type EditorView,
+} from '@prosekit/pm/view'
+import {
+  ChangeSet,
+  type Change,
+} from 'prosemirror-changeset'
+
+/**
+ * A JSON representation of a commit.
+ */
+interface Commit {
+  /**
+   * The current doc node in the JSON format
+   */
+  doc: NodeJSON
+  /**
+   * The parent node in the JSON format
+   */
+  parent: NodeJSON
+  /**
+   * An array of steps in the JSON format that transform the parent node to the
+   * current doc node.
+   */
+  steps: StepJSON[]
+}
+
+function getChanges(
+  doc: ProseMirrorNode,
+  parent: ProseMirrorNode,
+  steps: Step[],
+): readonly Change[] {
+  const initSet = ChangeSet.create(parent)
+  const currSet = initSet.addSteps(
+    doc,
+    steps.map((step) => step.getMap()),
+    null,
+  )
+  return currSet.changes
+}
+
+function renderDivWeight(view: EditorView): HTMLElement {
+  const document = view.dom.ownerDocument
+  return document.createElement('div')
+}
+
+function decorateDeletionSlice(
+  slice: Slice,
+): Array<(view: EditorView) => HTMLElement> {
+  // Get the fragment of the deleted content
+  let { openStart, openEnd, content } = slice
+
+  while (openStart > 0 && openEnd > 0 && content.childCount === 1) {
+    openStart--
+    openEnd--
+    content = content.child(0).content
+  }
+
+  // Nothing to render
+  if (content.childCount === 0) {
+    return []
+  }
+
+  // For example, if the slice is
+  //   {
+  //     openStart: 1,
+  //     openEnd: 1,
+  //     content: <p>Hello</p><p>World</p>
+  //   }
+  // We should render the following decorations:
+  //   <span>Hello</span>
+  //   <div></div>
+  //   <span>World</span>
+  if (openStart > 0 && openEnd > 0 && content.childCount === 2) {
+    const head = Fragment.from([content.child(0)])
+    const tail = Fragment.from([content.child(1)])
+    return [
+      ...decorateDeletionSlice(new Slice(head, openStart, openStart)),
+      renderDivWeight,
+      ...decorateDeletionSlice(new Slice(tail, openEnd, openEnd)),
+    ]
+  }
+
+  // For example, if the slice is
+  //   {
+  //     openStart: 1,
+  //     openEnd: 0,
+  //     content: <p>Hello</p><p>World</p>
+  //   }
+  // We should render the following decorations:
+  //   <span>Hello</span>
+  //   <div><p>World</p></div>
+  if (openStart > 0 && content.childCount >= 2) {
+    const nodes = content.content
+    const head = Fragment.from(nodes.slice(0, 1))
+    const body = Fragment.from(nodes.slice(1))
+
+    return [
+      ...decorateDeletionSlice(new Slice(head, openStart, openStart)),
+      ...decorateDeletionSlice(new Slice(body, 0, openEnd)),
+    ]
+  }
+
+  // For example, if the slice is
+  //   {
+  //     openStart: 0,
+  //     openEnd: 1,
+  //     content: <p>Hello</p><p>World</p>
+  //   }
+  // We should render the following decorations:
+  //   <div><p>Hello</p></div>
+  //   <span>World</span>
+  if (openEnd > 0 && content.childCount >= 2) {
+    const nodes = content.content
+    const body = Fragment.from(nodes.slice(0, -1))
+    const tail = Fragment.from(nodes.slice(-1))
+    return [
+      ...decorateDeletionSlice(new Slice(body, openStart, 0)),
+      ...decorateDeletionSlice(new Slice(tail, openEnd, openEnd)),
+    ]
+  }
+
+  const schema = content.child(0).type.schema
+  const isInline = content.child(0).isInline
+
+  const render = (view: EditorView): HTMLElement => {
+    const document = view.dom.ownerDocument
+
+    // Render the fragment to HTML
+    const element = document.createElement(isInline ? 'span' : 'div')
+    const serializer = DOMSerializer.fromSchema(schema)
+    serializer.serializeFragment(content, { document }, element)
+
+    // Add the class to the element
+    element.classList.add('prosekit-commit-deletion')
+    return element
+  }
+
+  return [render]
+}
+
+function decorateDeletion(
+  /** The doc node before the deletion */
+  doc: ProseMirrorNode,
+  /** The start position of the deleted text in the doc node */
+  from: number,
+  /** The end position of the deleted text in the doc node */
+  to: number,
+  /** The insert position of the decoration in the doc node after the change */
+  pos: number,
+): Decoration[] {
+  const slice = doc.slice(from, to)
+
+  const renders = decorateDeletionSlice(slice)
+  const count = renders.length
+
+  return renders.map((render, index) =>
+    Decoration.widget(pos, render, {
+      side: -20 - count + index,
+      // Ensure the text in the decoration is able to be selected.
+      ignoreSelection: true,
+    })
+  )
+}
+
+function decorateAddition(
+  /** The start position of the inserted text in the doc node */
+  from: number,
+  /** The end position of the inserted text in the doc node */
+  to: number,
+): Decoration {
+  return Decoration.inline(from, to, { class: 'prosekit-commit-addition' })
+}
+
+function decorateChange(prev: ProseMirrorNode, change: Change): Decoration[] {
+  const { fromA, toA, fromB, toB } = change
+  const decorations: Decoration[] = []
+
+  if (fromA < toA) {
+    decorations.push(...decorateDeletion(prev, fromA, toA, fromB))
+  }
+  if (fromB < toB) {
+    decorations.push(decorateAddition(fromB, toB))
+  }
+
+  return decorations
+}
+
+function decorateCommit(
+  doc: ProseMirrorNode,
+  parent: ProseMirrorNode,
+  steps: Step[],
+): DecorationSet {
+  const changes = getChanges(doc, parent, steps)
+  const decorations = changes.flatMap((change) => decorateChange(parent, change))
+  return DecorationSet.create(doc, decorations)
+}
+
+function defineCommitDecoration(commit: Commit): PlainExtension {
+  const key = new PluginKey<DecorationSet>('prosekit-commit-decoration')
+
+  return definePlugin(({ schema }): ProseMirrorPlugin => {
+    const parent = schema.nodeFromJSON(commit.parent)
+    const steps = commit.steps.map((step) => Step.fromJSON(schema, step))
+
+    return new ProseMirrorPlugin({
+      key,
+      state: {
+        init: (_, instance): DecorationSet => {
+          return decorateCommit(instance.doc, parent, steps)
+        },
+        apply: (tr, deco: DecorationSet): DecorationSet => {
+          return deco.map(tr.mapping, tr.doc)
+        },
+      },
+      props: {
+        decorations: (state): DecorationSet | undefined => {
+          return key.getState(state)
+        },
+      },
+    })
+  })
+}
+
+/**
+ * Define an extension to display the changes from the given commit in the editor.
+ */
+function defineCommitViewer(commit: Commit): PlainExtension {
+  return union(
+    defineDefaultState({ defaultDoc: commit.doc }),
+    defineCommitDecoration(commit),
+  )
+}
+
+class CommitRecorder {
+  private parent: ProseMirrorNode | null = null
+  private doc: ProseMirrorNode | null = null
+  private steps: Step[] = []
+
+  /**
+   * Return a commit object including all changes since the last commit. `null`
+   * will be returned if there is no change.
+   */
+  commit(): Commit | null {
+    if (
+      !this.parent
+      || !this.doc
+      || this.steps.length === 0
+      || this.parent.eq(this.doc)
+    ) {
+      return null
+    }
+
+    const commit: Commit = {
+      doc: jsonFromNode(this.doc),
+      parent: jsonFromNode(this.parent),
+      steps: this.steps.map((step) => step.toJSON() as StepJSON),
+    }
+    this.init(this.doc)
+    return commit
+  }
+
+  /**
+   * @internal
+   */
+  init(doc: ProseMirrorNode): void {
+    this.doc = doc
+    this.parent = doc
+    this.steps = []
+  }
+
+  /**
+   * @internal
+   */
+  apply(tr: Transaction): void {
+    this.steps.push(...tr.steps)
+    this.doc = tr.doc
+  }
+}
+
+/**
+ * Define an extension that can record the changes in the editor.
+ */
+function defineCommitRecorder(commitRecorder: CommitRecorder): PlainExtension {
+  const key = new PluginKey<DecorationSet>('prosekit-commit-recorder')
+
+  return definePlugin(
+    new ProseMirrorPlugin({
+      key,
+      state: {
+        init: (_, state): void => {
+          commitRecorder.init(state.doc)
+        },
+        apply: (tr): void => {
+          commitRecorder.apply(tr)
+        },
+      },
+    }),
+  )
+}
+
+export {
+  CommitRecorder,
+  defineCommitRecorder,
+  defineCommitViewer,
+  type Commit,
+}

package/src/commit/style.css

@@ -0,0 +1,7 @@
+.prosekit-commit-deletion {
+  background-color: #e5534b80;
+  text-decoration: line-through;
+}
+.prosekit-commit-addition {
+  background-color: #53e54b80;
+}

package/src/doc/index.ts

@@ -0,0 +1,21 @@
+import {
+  defineNodeSpec,
+  type Extension,
+} from '@prosekit/core'
+import type { Attrs } from '@prosekit/pm/model'
+
+/**
+ * @internal
+ */
+export type DocExtension = Extension<{ Nodes: { doc: Attrs } }>
+
+/**
+ * @public
+ */
+export function defineDoc(): DocExtension {
+  return defineNodeSpec({
+    name: 'doc',
+    content: 'block+',
+    topNode: true,
+  })
+}

package/src/drop-cursor/drop-cursor.ts

@@ -0,0 +1,46 @@
+import {
+  definePlugin,
+  type PlainExtension,
+} from '@prosekit/core'
+import { dropCursor } from 'prosemirror-dropcursor'
+
+export interface DropCursorOptions {
+  /**
+   * The color of the cursor.  Use `false` to apply no color and rely only on class.
+   *
+   * @default 'black'
+   */
+  color?: string | false
+
+  /**
+   * The precise width of the cursor in pixels.
+   *
+   * @default 1
+   */
+  width?: number
+
+  /**
+   * A CSS class name to add to the cursor element.
+   */
+  class?: string
+}
+
+/**
+ * @internal
+ */
+export type DropCursorExtension = PlainExtension
+
+/**
+ * Show up a decoration at the drop position when something is dragged over the editor.
+ *
+ * See [prosemirror-dropcursor](https://github.com/ProseMirror/prosemirror-dropcursor) for more information.
+ *
+ * You probably want to use `<DropIndicator />` component instead of this extension.
+ *
+ * @public
+ */
+export function defineDropCursor(
+  options?: DropCursorOptions,
+): DropCursorExtension {
+  return definePlugin(() => dropCursor(options))
+}

package/src/drop-cursor/index.ts

@@ -0,0 +1,5 @@
+export {
+  defineDropCursor,
+  type DropCursorExtension,
+  type DropCursorOptions,
+} from './drop-cursor'

package/src/drop-indicator/drop-indicator-facet.ts

@@ -0,0 +1,84 @@
+import {
+  defineFacet,
+  defineFacetPayload,
+  pluginFacet,
+  type PlainExtension,
+  type PluginPayload,
+} from '@prosekit/core'
+
+import { createDropIndicatorPlugin } from './drop-indicator-plugin'
+import type {
+  DragEventHandler,
+  ShowHandler,
+} from './types'
+
+/**
+ * @internal
+ */
+export function defineDropIndicatorPayload(
+  payload: DropIndicatorPayload,
+): PlainExtension {
+  return defineFacetPayload(dropIndicatorFacet, [payload]) as PlainExtension
+}
+
+/**
+ * @internal
+ */
+export interface DropIndicatorPayload {
+  /**
+   * A callback that is called when the drop indicator should be shown.
+   */
+  onShow?: ShowHandler
+
+  /**
+   * A callback that is called when the drop indicator should be hidden.
+   */
+  onHide?: VoidFunction
+
+  /**
+   * A callback that is called when the `dragover` event is fired. You can
+   * return `false` to disable the current drop point and thus hide the drop
+   * indicator.
+   */
+  onDrag?: DragEventHandler
+}
+
+const dropIndicatorFacet = defineFacet<DropIndicatorPayload, PluginPayload>({
+  parent: pluginFacet,
+  singleton: true,
+  reducer: (payloads: DropIndicatorPayload[]): PluginPayload => {
+    let showHandlers = payloads.map(p => p.onShow).filter(x => !!x)
+    let hideHandlers = payloads.map(p => p.onHide).filter(x => !!x)
+    let dragHandlers = payloads.map(p => p.onDrag).filter(x => !!x)
+
+    let showHandler: ShowHandler = (options) => {
+      for (let fn of showHandlers) {
+        fn(options)
+      }
+    }
+
+    let hideHandler: VoidFunction = () => {
+      for (let fn of hideHandlers) {
+        fn()
+      }
+    }
+
+    let dragHandler: DragEventHandler = (options): boolean => {
+      for (let fn of dragHandlers) {
+        if (fn(options) === false) return false
+      }
+      return true
+    }
+
+    if (showHandlers.length === 0) {
+      // No `onShow` event handler, so we don't need to create a plugin.
+      return []
+    }
+
+    return createDropIndicatorPlugin({
+      onDrag: dragHandler,
+      onShow: showHandler,
+      onHide: hideHandler,
+    })
+  },
+})