@jvs-milkdown/utils 1.0.0

package/src/composable/$ctx.ts

@@ -0,0 +1,31 @@
+import type { MilkdownPlugin, SliceType } from '@jvs-milkdown/ctx'
+
+import { createSlice } from '@jvs-milkdown/ctx'
+
+/// @internal
+export type $Ctx<T, N extends string> = MilkdownPlugin & {
+  key: SliceType<T, N>
+}
+
+/// Create a slice plugin. The plugin will be registered in the `ctx` and can be accessed by other parts of the editor.
+/// ```ts
+/// const counterCtx = $ctx(0, 'counter');
+/// ```
+///
+/// Additional property:
+/// - `key`: The key of the slice.
+export function $ctx<T, N extends string>(value: T, name: N): $Ctx<T, N> {
+  const slice = createSlice(value, name)
+  const plugin: $Ctx<T, N> = (ctx) => {
+    ctx.inject(slice)
+    return () => {
+      return () => {
+        ctx.remove(slice)
+      }
+    }
+  }
+
+  plugin.key = slice
+
+  return plugin
+}

package/src/composable/$input-rule.ts

@@ -0,0 +1,55 @@
+import type { Ctx, MilkdownPlugin } from '@jvs-milkdown/ctx'
+import type { InputRule } from '@jvs-milkdown/prose/inputrules'
+
+import { SchemaReady, editorStateTimerCtx, inputRulesCtx } from '@jvs-milkdown/core'
+
+import { addTimer } from './utils'
+
+/// @internal
+export type $InputRule = MilkdownPlugin & {
+  inputRule: InputRule
+}
+
+/// Create an input rule plugin.
+/// It takes a factory function which returns a [prosemirror input rule](https://prosemirror.net/docs/ref/#inputrules.InputRule).
+///
+/// Additional property:
+/// - `inputRule`: The prosemirror input rule created.
+export function $inputRule(inputRule: (ctx: Ctx) => InputRule): $InputRule {
+  const plugin: MilkdownPlugin = (ctx) => async () => {
+    await ctx.wait(SchemaReady)
+    const ir = inputRule(ctx)
+    ctx.update(inputRulesCtx, (irs) => [...irs, ir])
+    ;(<$InputRule>plugin).inputRule = ir
+
+    return () => {
+      ctx.update(inputRulesCtx, (irs) => irs.filter((x) => x !== ir))
+    }
+  }
+
+  return <$InputRule>plugin
+}
+
+/// The async version for `$inputRule`. You can use `await` in the factory when creating the input rule.
+///
+/// Additional property:
+/// - `inputRule`: The prosemirror input rule created.
+/// - `timer`: The timer which will be resolved when the input rule is ready.
+export function $inputRuleAsync(
+  inputRule: (ctx: Ctx) => Promise<InputRule>,
+  timerName?: string
+) {
+  return addTimer<$InputRule>(
+    async (ctx, plugin) => {
+      await ctx.wait(SchemaReady)
+      const ir = await inputRule(ctx)
+      ctx.update(inputRulesCtx, (irs) => [...irs, ir])
+      plugin.inputRule = ir
+      return () => {
+        ctx.update(inputRulesCtx, (irs) => irs.filter((x) => x !== ir))
+      }
+    },
+    editorStateTimerCtx,
+    timerName
+  )
+}

package/src/composable/$mark.ts

@@ -0,0 +1,87 @@
+import type { Ctx, MilkdownPlugin } from '@jvs-milkdown/ctx'
+import type { MarkType } from '@jvs-milkdown/prose/model'
+import type { MarkSchema } from '@jvs-milkdown/transformer'
+
+import { marksCtx, schemaCtx, schemaTimerCtx } from '@jvs-milkdown/core'
+import { missingMarkInSchema } from '@jvs-milkdown/exception'
+
+import { addTimer } from './utils'
+
+/// @internal
+export type $Mark = MilkdownPlugin & {
+  id: string
+  schema: MarkSchema
+  type: (ctx: Ctx) => MarkType
+}
+
+/// Create a mark plugin.
+/// It takes a mark id and a factory function.
+/// The factory should return a function that returns a [mark schema](/transformer#interface-markschema).
+///
+/// Additional property:
+/// - `id`: The id of the mark.
+/// - `schema`: The mark schema created.
+/// - `type`: A function that will return the [prosemirror mark type](https://prosemirror.net/docs/ref/#model.MarkType).
+export function $mark(id: string, schema: (ctx: Ctx) => MarkSchema): $Mark {
+  const plugin: MilkdownPlugin = (ctx) => async () => {
+    const markSchema = schema(ctx)
+    ctx.update(marksCtx, (ns) => [
+      ...ns.filter((n) => n[0] !== id),
+      [id, markSchema] as [string, MarkSchema],
+    ])
+    ;(<$Mark>plugin).id = id
+    ;(<$Mark>plugin).schema = markSchema
+
+    return () => {
+      ctx.update(marksCtx, (ns) => ns.filter(([x]) => x !== id))
+    }
+  }
+  ;(<$Mark>plugin).type = (ctx) => {
+    const markType = ctx.get(schemaCtx).marks[id]
+    if (!markType) throw missingMarkInSchema(id)
+    return markType
+  }
+
+  return <$Mark>plugin
+}
+
+/// The async version for `$mark`. You can use `await` in the factory when creating the mark schema.
+///
+/// Additional property:
+/// - `id`: The id of the mark.
+/// - `schema`: The mark schema created.
+/// - `type`: A function that will return the [prosemirror mark type](https://prosemirror.net/docs/ref/#model.MarkType).
+/// - `timer`: The timer which will be resolved when the mark schema is ready.
+export function $markAsync(
+  id: string,
+  schema: (ctx: Ctx) => Promise<MarkSchema>,
+  timerName?: string
+) {
+  const plugin = addTimer<$Mark>(
+    async (ctx, plugin, done) => {
+      const markSchema = await schema(ctx)
+      ctx.update(marksCtx, (ns) => [
+        ...ns.filter((n) => n[0] !== id),
+        [id, markSchema] as [string, MarkSchema],
+      ])
+
+      plugin.id = id
+      plugin.schema = markSchema
+      done()
+
+      return () => {
+        ctx.update(marksCtx, (ns) => ns.filter(([x]) => x !== id))
+      }
+    },
+    schemaTimerCtx,
+    timerName
+  )
+
+  plugin.type = (ctx) => {
+    const markType = ctx.get(schemaCtx).marks[id]
+    if (!markType) throw missingMarkInSchema(id)
+    return markType
+  }
+
+  return plugin
+}

package/src/composable/$node.ts

@@ -0,0 +1,90 @@
+import type { Ctx, MilkdownPlugin } from '@jvs-milkdown/ctx'
+import type { NodeType } from '@jvs-milkdown/prose/model'
+import type { NodeSchema } from '@jvs-milkdown/transformer'
+
+import { nodesCtx, schemaCtx, schemaTimerCtx } from '@jvs-milkdown/core'
+import { missingNodeInSchema } from '@jvs-milkdown/exception'
+
+import { addTimer } from './utils'
+
+/// @internal
+export type $Node = MilkdownPlugin & {
+  id: string
+  schema: NodeSchema
+  type: (ctx: Ctx) => NodeType
+}
+
+/// Create a node plugin.
+/// It takes a node id and a factory function.
+/// The factory should return a function that returns a [node schema](/transformer#interface-nodeschema).
+///
+/// Additional property:
+/// - `id`: The id of the node.
+/// - `schema`: The node schema created.
+/// - `type`: A function that will return the [prosemirror node type](https://prosemirror.net/docs/ref/#model.NodeType).
+export function $node(id: string, schema: (ctx: Ctx) => NodeSchema): $Node {
+  const plugin: MilkdownPlugin = (ctx) => async () => {
+    const nodeSchema = schema(ctx)
+    ctx.update(nodesCtx, (ns) => [
+      ...ns.filter((n) => n[0] !== id),
+      [id, nodeSchema] as [string, NodeSchema],
+    ])
+    ;(<$Node>plugin).id = id
+    ;(<$Node>plugin).schema = nodeSchema
+
+    return () => {
+      ctx.update(nodesCtx, (ns) => ns.filter(([x]) => x !== id))
+    }
+  }
+
+  ;(<$Node>plugin).type = (ctx) => {
+    const nodeType = ctx.get(schemaCtx).nodes[id]
+    if (!nodeType) throw missingNodeInSchema(id)
+
+    return nodeType
+  }
+
+  return <$Node>plugin
+}
+
+/// The async version for `$node`. You can use `await` in the factory when creating the node schema.
+///
+/// Additional property:
+/// - `id`: The id of the node.
+/// - `schema`: The node schema created.
+/// - `type`: A function that will return the [prosemirror node type](https://prosemirror.net/docs/ref/#model.NodeType).
+/// - `timer`: The timer which will be resolved when the node schema is ready.
+export function $nodeAsync(
+  id: string,
+  schema: (ctx: Ctx) => Promise<NodeSchema>,
+  timerName?: string
+) {
+  const plugin = addTimer<$Node>(
+    async (ctx, plugin, done) => {
+      const nodeSchema = await schema(ctx)
+      ctx.update(nodesCtx, (ns) => [
+        ...ns.filter((n) => n[0] !== id),
+        [id, nodeSchema] as [string, NodeSchema],
+      ])
+
+      plugin.id = id
+      plugin.schema = nodeSchema
+      done()
+
+      return () => {
+        ctx.update(nodesCtx, (ns) => ns.filter(([x]) => x !== id))
+      }
+    },
+    schemaTimerCtx,
+    timerName
+  )
+
+  plugin.type = (ctx) => {
+    const nodeType = ctx.get(schemaCtx).nodes[id]
+    if (!nodeType) throw missingNodeInSchema(id)
+
+    return nodeType
+  }
+
+  return plugin
+}

package/src/composable/$paste-rule.ts

@@ -0,0 +1,59 @@
+import type { Ctx, MilkdownPlugin } from '@jvs-milkdown/ctx'
+
+import {
+  pasteRulesCtx,
+  pasteRulesTimerCtx,
+  SchemaReady,
+  type PasteRule,
+} from '@jvs-milkdown/core'
+
+import { addTimer } from './utils'
+
+/// @internal
+export type $PasteRule = MilkdownPlugin & {
+  pasteRule: PasteRule
+}
+
+/// Create a paste rule plugin.
+/// It takes a factory function which returns a paste rule.
+///
+/// Additional property:
+/// - `pasteRule`: The paste rule created.
+export function $pasteRule(pasteRule: (ctx: Ctx) => PasteRule): $PasteRule {
+  const plugin: MilkdownPlugin = (ctx) => async () => {
+    await ctx.wait(SchemaReady)
+    const pr = pasteRule(ctx)
+    ctx.update(pasteRulesCtx, (prs) => [...prs, pr])
+    ;(<$PasteRule>plugin).pasteRule = pr
+
+    return () => {
+      ctx.update(pasteRulesCtx, (prs) => prs.filter((x) => x !== pr))
+    }
+  }
+
+  return <$PasteRule>plugin
+}
+
+/// The async version for `$pasteRule`. You can use `await` in the factory when creating the paste rule.
+///
+/// Additional property:
+/// - `pasteRule`: The paste rule created.
+/// - `timer`: The timer which will be resolved when the paste rule is ready.
+export function $pasteRuleAsync(
+  pasteRule: (ctx: Ctx) => Promise<PasteRule>,
+  timerName?: string
+) {
+  return addTimer<$PasteRule>(
+    async (ctx, plugin) => {
+      await ctx.wait(SchemaReady)
+      const pr = await pasteRule(ctx)
+      ctx.update(pasteRulesCtx, (prs) => [...prs, pr])
+      plugin.pasteRule = pr
+      return () => {
+        ctx.update(pasteRulesCtx, (prs) => prs.filter((x) => x !== pr))
+      }
+    },
+    pasteRulesTimerCtx,
+    timerName
+  )
+}

package/src/composable/$prose.ts

@@ -0,0 +1,70 @@
+import type { Ctx, MilkdownPlugin } from '@jvs-milkdown/ctx'
+import type { Plugin, PluginKey } from '@jvs-milkdown/prose/state'
+
+import {
+  SchemaReady,
+  editorStateTimerCtx,
+  prosePluginsCtx,
+} from '@jvs-milkdown/core'
+
+import { addTimer } from './utils'
+
+/// @internal
+export type $Prose = MilkdownPlugin & {
+  plugin: () => Plugin
+  key: () => PluginKey | undefined
+}
+
+/// Create a milkdown wrapper for [prosemirror plugin](https://prosemirror.net/docs/ref/#state.Plugin).
+/// It takes a factory function which returns a [prosemirror plugin](https://prosemirror.net/docs/ref/#state.Plugin).
+///
+/// Additional property:
+/// - `plugin`: The prosemirror plugin created.
+/// - `key`: The [prosemirror plugin key](https://prosemirror.net/docs/ref/#state.PluginKey) of the plugin.
+export function $prose(prose: (ctx: Ctx) => Plugin): $Prose {
+  let prosePlugin: Plugin | undefined
+  const plugin: MilkdownPlugin = (ctx) => async () => {
+    await ctx.wait(SchemaReady)
+    prosePlugin = prose(ctx)
+    ctx.update(prosePluginsCtx, (ps) => [...ps, prosePlugin!])
+
+    return () => {
+      ctx.update(prosePluginsCtx, (ps) => ps.filter((x) => x !== prosePlugin))
+    }
+  }
+  ;(<$Prose>plugin).plugin = () => prosePlugin!
+  ;(<$Prose>plugin).key = () => prosePlugin!.spec.key
+
+  return <$Prose>plugin
+}
+
+/// The async version for `$prose`. You can use `await` in the factory when creating the plugin.
+///
+/// Additional property:
+/// - `plugin`: The prosemirror plugin created.
+/// - `key`: The [prosemirror plugin key](https://prosemirror.net/docs/ref/#state.PluginKey) of the plugin.
+/// - `timer`: The timer which will be resolved when the plugin is ready.
+export function $proseAsync(
+  prose: (ctx: Ctx) => Promise<Plugin>,
+  timerName?: string
+) {
+  let prosePlugin: Plugin | undefined
+  const plugin = addTimer<$Prose>(
+    async (ctx) => {
+      await ctx.wait(SchemaReady)
+      prosePlugin = await prose(ctx)
+      ctx.update(prosePluginsCtx, (ps) => [...ps, prosePlugin!])
+
+      return () => {
+        ctx.update(prosePluginsCtx, (ps) => ps.filter((x) => x !== prosePlugin))
+      }
+    },
+    editorStateTimerCtx,
+    timerName
+  )
+
+  plugin.plugin = () => prosePlugin!
+  plugin.key = () => prosePlugin!.spec.key
+
+  return plugin
+}

package/src/composable/$shortcut.ts

@@ -0,0 +1,66 @@
+import type { Ctx, MilkdownPlugin } from '@jvs-milkdown/ctx'
+import type { Command } from '@jvs-milkdown/prose/state'
+
+import {
+  KeymapReady,
+  editorStateTimerCtx,
+  keymapCtx,
+  type KeymapItem,
+} from '@jvs-milkdown/core'
+
+import { addTimer } from './utils'
+
+/// @internal
+export type Keymap = Record<string, Command | KeymapItem>
+
+/// @internal
+export type $Shortcut = MilkdownPlugin & {
+  keymap: Keymap
+}
+
+/// Create a shortcut for the editor.
+/// It takes a factory function which returns a [prosemirror keymap](https://prosemirror.net/docs/ref/#keymap).
+///
+/// Additional property:
+/// - `keymap`: The prosemirror keymap created.
+export function $shortcut(shortcut: (ctx: Ctx) => Keymap): $Shortcut {
+  const plugin: MilkdownPlugin = (ctx) => async () => {
+    await ctx.wait(KeymapReady)
+    const km = ctx.get(keymapCtx)
+    const keymap = shortcut(ctx)
+    const dispose = km.addObjectKeymap(keymap)
+    ;(<$Shortcut>plugin).keymap = keymap
+
+    return () => {
+      dispose()
+    }
+  }
+
+  return <$Shortcut>plugin
+}
+
+/// The async version for `$shortcut`. You can use `await` in the factory when creating the keymap.
+///
+/// Additional property:
+/// - `keymap`: The prosemirror keymap created.
+/// - `timer`: The timer which will be resolved when the plugin is ready.
+export function $shortcutAsync(
+  shortcut: (ctx: Ctx) => Promise<Keymap>,
+  timerName?: string
+) {
+  return addTimer<$Shortcut>(
+    async (ctx, plugin) => {
+      await ctx.wait(KeymapReady)
+      const km = ctx.get(keymapCtx)
+      const keymap = await shortcut(ctx)
+      const dispose = km.addObjectKeymap(keymap)
+      plugin.keymap = keymap
+
+      return () => {
+        dispose()
+      }
+    },
+    editorStateTimerCtx,
+    timerName
+  )
+}

package/src/composable/$view.ts

@@ -0,0 +1,110 @@
+import type { Ctx, MilkdownPlugin } from '@jvs-milkdown/ctx'
+import type {
+  MarkViewConstructor,
+  NodeViewConstructor,
+} from '@jvs-milkdown/prose/view'
+
+import {
+  SchemaReady,
+  editorViewTimerCtx,
+  markViewCtx,
+  nodeViewCtx,
+} from '@jvs-milkdown/core'
+import { NodeType } from '@jvs-milkdown/prose/model'
+
+import type { $Mark, $Node } from '.'
+
+import { addTimer } from './utils'
+
+/// @internal
+export type $View<
+  T extends $Node | $Mark,
+  V extends NodeViewConstructor | MarkViewConstructor,
+> = MilkdownPlugin & {
+  view: V
+  type: T
+}
+
+/// @internal
+export type GetConstructor<T extends $Node | $Mark> = T extends $Node
+  ? NodeViewConstructor
+  : T extends $Mark
+    ? MarkViewConstructor
+    : NodeViewConstructor | MarkViewConstructor
+
+/// Create a [prosemirror node/mark view](https://prosemirror.net/docs/ref/#view.NodeView) plugin.
+/// It takes two arguments
+/// - `type`: The node/mark plugin that needs to add a view.
+/// - `view`: The factory that creates the view. It should return a function that returns a [node/mark view constructor](https://prosemirror.net/docs/ref/#view.NodeView).
+///
+/// Additional property:
+/// - `view`: The view created.
+/// - `type`: The node/mark plugin that needs to add a view.
+export function $view<
+  T extends $Node | $Mark,
+  V extends NodeViewConstructor | MarkViewConstructor = GetConstructor<T>,
+>(type: T, view: (ctx: Ctx) => V): $View<T, V> {
+  const plugin: MilkdownPlugin = (ctx) => async () => {
+    await ctx.wait(SchemaReady)
+    const v = view(ctx)
+    if (type.type(ctx) instanceof NodeType)
+      ctx.update(nodeViewCtx, (ps) => [
+        ...ps,
+        [type.id, v] as [string, NodeViewConstructor],
+      ])
+    else
+      ctx.update(markViewCtx, (ps) => [
+        ...ps,
+        [type.id, v] as [string, MarkViewConstructor],
+      ])
+    ;(<$View<T, V>>plugin).view = v
+    ;(<$View<T, V>>plugin).type = type
+
+    return () => {
+      if (type.type(ctx) instanceof NodeType)
+        ctx.update(nodeViewCtx, (ps) => ps.filter((x) => x[0] !== type.id))
+      else ctx.update(markViewCtx, (ps) => ps.filter((x) => x[0] !== type.id))
+    }
+  }
+
+  return <$View<T, V>>plugin
+}
+
+/// The async version for `$view`. You can use `await` in the factory when creating the view.
+///
+/// Additional property:
+/// - `view`: The view created.
+/// - `type`: The node/mark plugin that needs to add a view.
+/// - `timer`: The timer which will be resolved when the view is ready.
+export function $viewAsync<
+  T extends $Node | $Mark,
+  V extends NodeViewConstructor | MarkViewConstructor = GetConstructor<T>,
+>(type: T, view: (ctx: Ctx) => Promise<V>, timerName?: string) {
+  return addTimer<$View<T, V>>(
+    async (ctx, plugin) => {
+      await ctx.wait(SchemaReady)
+      const v = await view(ctx)
+      if (type.type(ctx) instanceof NodeType)
+        ctx.update(nodeViewCtx, (ps) => [
+          ...ps,
+          [type.id, v] as [string, NodeViewConstructor],
+        ])
+      else
+        ctx.update(markViewCtx, (ps) => [
+          ...ps,
+          [type.id, v] as [string, MarkViewConstructor],
+        ])
+
+      plugin.view = v
+      plugin.type = type
+
+      return () => {
+        if (type.type(ctx) instanceof NodeType)
+          ctx.update(nodeViewCtx, (ps) => ps.filter((x) => x[0] !== type.id))
+        else ctx.update(markViewCtx, (ps) => ps.filter((x) => x[0] !== type.id))
+      }
+    },
+    editorViewTimerCtx,
+    timerName
+  )
+}

package/src/composable/composed/$attr.ts

@@ -0,0 +1,29 @@
+import type { Mark, Node } from '@jvs-milkdown/prose/model'
+
+import type { $Ctx } from '../$ctx'
+
+import { $ctx } from '../$ctx'
+
+/// @internal
+export type $NodeAttr = $Ctx<
+  (node: Node) => Record<string, any>,
+  `${string}Attr`
+>
+
+/// Create a slice which contains the attributes for node schema.
+export const $nodeAttr = (
+  name: string,
+  value: (node: Node) => Record<string, any> = () => ({})
+): $NodeAttr => $ctx(value, `${name}Attr`)
+
+/// @internal
+export type $MarkAttr = $Ctx<
+  (node: Mark) => Record<string, any>,
+  `${string}Attr`
+>
+
+/// Create a slice which contains the attributes for mark schema.
+export const $markAttr = (
+  name: string,
+  value: (mark: Mark) => Record<string, any> = () => ({})
+): $MarkAttr => $ctx(value, `${name}Attr`)

package/src/composable/composed/$mark-schema.ts

@@ -0,0 +1,65 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+import type { MarkSchema } from '@jvs-milkdown/transformer'
+
+import type { $Ctx } from '../$ctx'
+import type { $Mark } from '../$mark'
+
+import { $ctx } from '../$ctx'
+import { $mark } from '../$mark'
+
+/// @internal
+export type GetMarkSchema = (ctx: Ctx) => MarkSchema
+
+/// @internal
+export type $MarkSchema<T extends string> = [
+  schemaCtx: $Ctx<GetMarkSchema, T>,
+  schema: $Mark,
+] & {
+  id: $Mark['id']
+  type: $Mark['type']
+  mark: $Mark
+  ctx: $Ctx<GetMarkSchema, T>
+  key: $Ctx<GetMarkSchema, T>['key']
+  extendSchema: (
+    handler: (prev: GetMarkSchema) => GetMarkSchema
+  ) => $MarkSchema<T>
+}
+
+/// Create a plugin for mark schema.
+/// The first parameter is the id of the mark schema.
+/// The second parameter is the function that returns the mark schema.
+///
+/// The function will return a plugin with additional properties:
+/// - `id`: The id of the mark schema.
+/// - `type`: A function witch will return the type of the mark schema.
+/// - `ctx`: The context of the mark schema.
+/// - `mark`: The mark schema plugin.
+/// - `schema`: The mark schema.
+/// - `key`: The key of slice which contains the mark schema factory.
+/// - `extendSchema`: A function witch will return a plugin that can extend the mark schema.
+export function $markSchema<T extends string>(
+  id: T,
+  schema: GetMarkSchema
+): $MarkSchema<T> {
+  const schemaCtx = $ctx(schema, id)
+
+  const markSchema = $mark(id, (ctx) => {
+    const userSchema = ctx.get(schemaCtx.key)
+    return userSchema(ctx)
+  })
+
+  const result = [schemaCtx, markSchema] as $MarkSchema<T>
+  result.id = markSchema.id
+  result.mark = markSchema
+
+  result.type = (ctx: Ctx) => markSchema.type(ctx)
+  result.ctx = schemaCtx
+  result.key = schemaCtx.key
+  result.extendSchema = (handler) => {
+    const nextSchema = handler(schema)
+
+    return $markSchema(id, nextSchema)
+  }
+
+  return result
+}