@jvs-milkdown/utils 1.0.0

package/src/composable/composed/$node-schema.spec.ts

@@ -0,0 +1,139 @@
+import { Editor, schemaCtx } from '@jvs-milkdown/core'
+import { test, expect } from 'vitest'
+
+import { $nodeSchema } from './$node-schema'
+
+const docSchema = $nodeSchema('doc', () => {
+  return {
+    content: 'block*',
+    parseMarkdown: {
+      match: ({ type }) => type === 'root',
+      runner: (state, node, type) => {
+        state.injectRoot(node, type)
+      },
+    },
+    toMarkdown: {
+      match: (node) => node.type.name === 'doc',
+      runner: () => {},
+    },
+  }
+})
+
+const textSchema = $nodeSchema('text', () => ({
+  group: 'inline',
+  parseMarkdown: {
+    match: ({ type }) => type === 'text',
+    runner: () => {},
+  },
+  toMarkdown: {
+    match: (node) => node.type.name === 'text',
+    runner: () => {},
+  },
+}))
+
+const paragraphSchema = $nodeSchema('paragraph', () => ({
+  content: 'inline*',
+  group: 'block',
+  parseDOM: [{ tag: 'p' }],
+  toDOM: () => ['p', 0],
+  parseMarkdown: {
+    match: (node) => node.type === 'paragraph',
+    runner: () => {},
+  },
+  toMarkdown: {
+    match: (node) => node.type.name === 'paragraph',
+    runner: () => {},
+  },
+}))
+
+test('create schema', async () => {
+  const editor = Editor.make()
+  editor.use(docSchema)
+  editor.use(textSchema)
+  editor.use(paragraphSchema)
+  await editor.create()
+
+  expect(docSchema.node.schema.content).toEqual('block*')
+})
+
+test('extend schema', async () => {
+  const extended = docSchema.extendSchema((prev) => (ctx) => ({
+    ...prev(ctx),
+    defining: true,
+  }))
+
+  const editor = await Editor.make()
+    .use(docSchema)
+    .use(extended)
+    .use(paragraphSchema)
+    .use(textSchema)
+    .create()
+
+  expect(extended.node.schema.defining).toBe(true)
+  expect(docSchema.node.schema.defining).toBe(undefined)
+
+  const schema = editor.ctx.get(schemaCtx)
+  expect(schema.nodes.doc?.spec).toEqual(extended.node.schema)
+  expect(Object.keys(schema.nodes)).toEqual(['doc', 'paragraph', 'text'])
+})
+
+test('double extend schema', async () => {
+  const extended = docSchema.extendSchema((prev) => (ctx) => ({
+    ...prev(ctx),
+    defining: true,
+  }))
+
+  const extended2 = extended.extendSchema((prev) => (ctx) => ({
+    ...prev(ctx),
+    atom: true,
+  }))
+
+  const editor = await Editor.make()
+    .use(docSchema)
+    .use(extended)
+    .use(extended2)
+    .use(paragraphSchema)
+    .use(textSchema)
+    .create()
+
+  expect(extended2.node.schema.atom).toBe(true)
+  expect(extended2.node.schema.defining).toBe(true)
+
+  expect(extended.node.schema.atom).toBe(undefined)
+  expect(extended.node.schema.defining).toBe(true)
+
+  expect(docSchema.node.schema.atom).toBe(undefined)
+  expect(docSchema.node.schema.defining).toBe(undefined)
+
+  const schema = editor.ctx.get(schemaCtx)
+  expect(schema.nodes.doc?.spec).toEqual(extended2.node.schema)
+  expect(Object.keys(schema.nodes)).toEqual(['doc', 'paragraph', 'text'])
+})
+
+test('should can register extended schema only', async () => {
+  const extended = docSchema.extendSchema((prev) => (ctx) => ({
+    ...prev(ctx),
+    defining: true,
+  }))
+
+  const extended2 = extended.extendSchema((prev) => (ctx) => ({
+    ...prev(ctx),
+    atom: true,
+  }))
+
+  const editor = await Editor.make()
+    .use(extended2)
+    .use(paragraphSchema)
+    .use(textSchema)
+    .create()
+
+  expect(extended2.node.schema.atom).toBe(true)
+  expect(extended2.node.schema.defining).toBe(true)
+
+  // this schema is not registered, so it should be undefined
+  expect(extended.node.schema).toBe(undefined)
+
+  const schema = editor.ctx.get(schemaCtx)
+  expect(schema.nodes.doc?.spec).toEqual(extended2.node.schema)
+  expect(Object.keys(schema.nodes)).toEqual(['doc', 'paragraph', 'text'])
+})

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

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

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

@@ -0,0 +1,53 @@
+import type { Ctx, MilkdownPlugin } from '@jvs-milkdown/ctx'
+import type { RemarkPlugin, RemarkPluginRaw } from '@jvs-milkdown/transformer'
+
+import { InitReady, remarkPluginsCtx } from '@jvs-milkdown/core'
+
+import type { $Ctx } from '../$ctx'
+
+import { $ctx } from '../$ctx'
+
+/// @internal
+export type $Remark<Id extends string, Options> = [
+  optionsCtx: $Ctx<Options, Id>,
+  plugin: MilkdownPlugin,
+] & {
+  id: Id
+  plugin: MilkdownPlugin
+  options: $Ctx<Options, Id>
+}
+
+/// Create a milkdown wrapper for [remark plugin](https://github.com/remarkjs/remark/blob/main/doc/plugins.md).
+/// It takes a factory function which returns a [remark plugin](https://github.com/remarkjs/remark/blob/main/doc/plugins.md).
+///
+/// Additional property:
+/// - `id`: The id of the remark plugin.
+/// - `plugin`: The remark plugin created.
+/// - `options`: The ctx contains the options of the remark plugin.
+export function $remark<Id extends string, Options>(
+  id: Id,
+  remark: (ctx: Ctx) => RemarkPluginRaw<Options>,
+  initialOptions?: Options
+): $Remark<Id, Options> {
+  const options = $ctx<Options, Id>(initialOptions ?? ({} as Options), id)
+  const plugin: MilkdownPlugin = (ctx) => async () => {
+    await ctx.wait(InitReady)
+    const re = remark(ctx)
+    const remarkPlugin: RemarkPlugin<Options> = {
+      plugin: re,
+      options: ctx.get(options.key),
+    }
+    ctx.update(remarkPluginsCtx, (rp) => [...rp, remarkPlugin as RemarkPlugin])
+
+    return () => {
+      ctx.update(remarkPluginsCtx, (rp) => rp.filter((x) => x !== remarkPlugin))
+    }
+  }
+
+  const result = [options, plugin] as $Remark<Id, Options>
+  result.id = id
+  result.plugin = plugin
+  result.options = options
+
+  return result
+}

package/src/composable/composed/$use-keymap.ts

@@ -0,0 +1,91 @@
+import type { Ctx, SliceType } from '@jvs-milkdown/ctx'
+import type { Command } from '@jvs-milkdown/prose/state'
+
+import type { $Ctx } from '../$ctx'
+import type { $Shortcut, Keymap } from '../$shortcut'
+
+import { $ctx } from '../$ctx'
+import { $shortcut } from '../$shortcut'
+
+/// @internal
+export type KeymapConfig<K extends string> = Record<
+  K,
+  {
+    shortcuts: string | string[]
+    priority?: number
+  }
+>
+
+/// @internal
+export interface KeymapItem {
+  shortcuts: string | string[]
+  priority?: number
+  command: (ctx: Ctx) => Command
+}
+
+/// @internal
+export type UserKeymapConfig<Key extends string> = Record<Key, KeymapItem>
+
+/// @internal
+export type $UserKeymap<N extends string, Key extends string> = [
+  $Ctx<KeymapConfig<Key>, `${N}Keymap`>,
+  $Shortcut,
+] & {
+  key: SliceType<KeymapConfig<Key>, `${N}Keymap`>
+  keymap: Keymap
+  ctx: $Ctx<KeymapConfig<Key>, `${N}Keymap`>
+  shortcuts: $Shortcut
+}
+
+/// Create a keymap which can be customized by user.
+/// It takes two arguments:
+/// - `name`: The name of the keymap.
+/// - `userKeymap`: The keymap config which contains the shortcuts and the command.
+export function $useKeymap<N extends string, Key extends string>(
+  name: N,
+  userKeymap: UserKeymapConfig<Key>
+) {
+  const key = Object.fromEntries(
+    Object.entries<KeymapItem>(userKeymap).map(
+      ([key, { shortcuts, priority }]) => {
+        return [key, { shortcuts, priority }]
+      }
+    )
+  ) as KeymapConfig<Key>
+
+  const keymapDef = $ctx<KeymapConfig<Key>, `${N}Keymap`>(key, `${name}Keymap`)
+
+  const shortcuts = $shortcut((ctx) => {
+    const keys = ctx.get(keymapDef.key)
+
+    const keymapTuple = Object.entries<KeymapItem>(userKeymap).flatMap(
+      ([key, { command }]) => {
+        const target = keys[key as Key]
+        const targetKeys = [target.shortcuts].flat()
+        const priority = target.priority
+
+        return targetKeys.map(
+          (targetKey) =>
+            [
+              targetKey,
+              {
+                key: targetKey,
+                onRun: command,
+                priority,
+              },
+            ] as const
+        )
+      }
+    )
+
+    return Object.fromEntries(keymapTuple)
+  })
+
+  const result = [keymapDef, shortcuts] as $UserKeymap<N, Key>
+  result.ctx = keymapDef
+  result.shortcuts = shortcuts
+  result.key = keymapDef.key
+  result.keymap = shortcuts.keymap
+
+  return result
+}

package/src/composable/composed/index.ts

@@ -0,0 +1,5 @@
+export * from './$node-schema'
+export * from './$mark-schema'
+export * from './$use-keymap'
+export * from './$attr'
+export * from './$remark'

package/src/composable/index.ts

@@ -0,0 +1,12 @@
+export * from './$command'
+export * from './$input-rule'
+export * from './$paste-rule'
+export * from './$mark'
+export * from './$node'
+export * from './$prose'
+export * from './$shortcut'
+export * from './$view'
+export * from './$ctx'
+
+export * from './composed'
+export * from './utils'

package/src/composable/utils.ts

@@ -0,0 +1,63 @@
+import type {
+  Cleanup,
+  Ctx,
+  MilkdownPlugin,
+  SliceType,
+  TimerType,
+} from '@jvs-milkdown/ctx'
+
+import { createTimer } from '@jvs-milkdown/ctx'
+import { customAlphabet } from 'nanoid'
+
+/// @internal
+export const nanoid = customAlphabet('abcedfghicklmn', 10)
+
+/// @internal
+export type WithTimer<T> = T & { timer: TimerType }
+
+/// @internal
+export function addTimer<
+  T extends MilkdownPlugin,
+  PluginWithTimer extends T = WithTimer<T>,
+>(
+  runner: (
+    ctx: Ctx,
+    plugin: PluginWithTimer,
+    done: () => void
+  ) => Promise<void | Cleanup>,
+  injectTo: SliceType<TimerType[], string>,
+  timerName?: string
+): PluginWithTimer {
+  const timer = createTimer(timerName || nanoid())
+  let doneCalled = false
+
+  const plugin: MilkdownPlugin = (ctx) => {
+    ctx.record(timer)
+    ctx.update(injectTo, (x) => x.concat(timer))
+
+    return async () => {
+      const done = () => {
+        ctx.done(timer)
+        doneCalled = true
+      }
+
+      const cleanup = await runner(ctx, <PluginWithTimer>plugin, done)
+
+      if (!doneCalled) ctx.done(timer)
+
+      return () => {
+        ctx.update(injectTo, (x) => x.filter((y) => y !== timer))
+        ctx.clearTimer(timer)
+        if (cleanup) {
+          const result = cleanup()
+          if (result && 'then' in result) {
+            result.catch(console.error)
+          }
+        }
+      }
+    }
+  }
+  ;(<T & { timer: TimerType }>plugin).timer = timer
+
+  return <PluginWithTimer>plugin
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './composable'
+export * from './macro'
+export * from './pipe'

package/src/macro/call-command.ts

@@ -0,0 +1,28 @@
+import type { CmdKey } from '@jvs-milkdown/core'
+import type { Ctx } from '@jvs-milkdown/ctx'
+
+import { commandsCtx } from '@jvs-milkdown/core'
+
+type InferParams<T> = T extends CmdKey<infer U> ? U : never
+
+/// Call a command. You can pass the command key and the payload to the macro.
+export function callCommand<T extends CmdKey<any>>(
+  slice: string,
+  payload?: InferParams<T>
+): (ctx: Ctx) => boolean
+export function callCommand<T>(
+  slice: CmdKey<T>,
+  payload?: T
+): (ctx: Ctx) => boolean
+export function callCommand(
+  slice: string | CmdKey<any>,
+  payload?: any
+): (ctx: Ctx) => boolean
+export function callCommand(
+  slice: string | CmdKey<any>,
+  payload?: any
+): (ctx: Ctx) => boolean {
+  return (ctx: Ctx) => {
+    return ctx.get(commandsCtx).call(slice, payload)
+  }
+}

package/src/macro/force-update.ts

@@ -0,0 +1,14 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+
+import { editorViewCtx } from '@jvs-milkdown/core'
+
+/// Force update the editor.
+export function forceUpdate() {
+  return (ctx: Ctx): void => {
+    const view = ctx.get(editorViewCtx)
+    const { tr } = view.state
+
+    const nextTr = Object.assign(Object.create(tr), tr).setTime(Date.now())
+    return view.dispatch(nextTr)
+  }
+}

package/src/macro/get-html.ts

@@ -0,0 +1,20 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+
+import { editorViewCtx, schemaCtx } from '@jvs-milkdown/core'
+import { DOMSerializer } from '@jvs-milkdown/prose/model'
+
+/// Get content of the editor as HTML string.
+export function getHTML() {
+  return (ctx: Ctx): string => {
+    const div = document.createElement('div')
+    const schema = ctx.get(schemaCtx)
+    const view = ctx.get(editorViewCtx)
+    const fragment = DOMSerializer.fromSchema(schema).serializeFragment(
+      view.state.doc.content
+    )
+
+    div.appendChild(fragment)
+
+    return div.innerHTML
+  }
+}

package/src/macro/get-markdown.ts

@@ -0,0 +1,27 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+
+import { editorViewCtx, schemaCtx, serializerCtx } from '@jvs-milkdown/core'
+
+/// Get content of the editor as markdown string.
+/// If range is provided, it will return the markdown string of the range.
+/// If range is not provided, it will return the markdown string of the whole document.
+export function getMarkdown(range?: { from: number; to: number }) {
+  return (ctx: Ctx): string => {
+    const view = ctx.get(editorViewCtx)
+    const schema = ctx.get(schemaCtx)
+    const serializer = ctx.get(serializerCtx)
+
+    if (!range) {
+      return serializer(view.state.doc)
+    }
+
+    const state = view.state
+    const slice = state.doc.slice(range.from, range.to, true)
+    const doc = schema.topNodeType.createAndFill(null, slice.content)
+    if (!doc) {
+      console.error('No document found')
+      return ''
+    }
+    return serializer(doc)
+  }
+}

package/src/macro/index.ts

@@ -0,0 +1,11 @@
+export * from './call-command'
+export * from './force-update'
+export * from './get-html'
+export * from './get-markdown'
+export * from './insert'
+export * from './outline'
+export * from './replace-all'
+export * from './set-attr'
+export * from './insert-pos'
+export * from './replace-range'
+export * from './markdown-to-slice'

package/src/macro/insert-pos.ts

@@ -0,0 +1,27 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+
+import { editorViewCtx } from '@jvs-milkdown/core'
+
+import { markdownToSlice } from './markdown-to-slice'
+
+/// Insert markdown string to the given position.
+/// If inline is true, the markdown will be inserted as inline text.
+/// If inline is false, the markdown will be inserted as block text.
+export function insertPos(
+  markdown: string,
+  pos: number,
+  inline: boolean = false
+) {
+  return (ctx: Ctx) => {
+    const slice = markdownToSlice(markdown)(ctx)
+    const view = ctx.get(editorViewCtx)
+    const toPos = view.state.doc.resolve(pos)
+
+    const min = 0
+    const max = view.state.doc.content.size
+    const resolved = inline ? toPos.pos : toPos.after(toPos.depth - 1)
+    const to = Math.min(Math.max(resolved, min), max)
+
+    view.dispatch(view.state.tr.replace(resolved, to, slice))
+  }
+}

package/src/macro/insert.ts

@@ -0,0 +1,38 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+
+import { editorViewCtx, parserCtx, schemaCtx } from '@jvs-milkdown/core'
+import { isTextOnlySlice } from '@jvs-milkdown/prose'
+import { DOMParser, DOMSerializer, Slice } from '@jvs-milkdown/prose/model'
+
+/// Insert markdown string into the editor.
+export function insert(markdown: string, inline: boolean = false) {
+  return (ctx: Ctx) => {
+    const view = ctx.get(editorViewCtx)
+    const parser = ctx.get(parserCtx)
+    const doc = parser(markdown)
+    if (!doc) return
+
+    if (!inline) {
+      const contentSlice = view.state.selection.content()
+      return view.dispatch(
+        view.state.tr
+          .replaceSelection(
+            new Slice(doc.content, contentSlice.openStart, contentSlice.openEnd)
+          )
+          .scrollIntoView()
+      )
+    }
+
+    const schema = ctx.get(schemaCtx)
+    const dom = DOMSerializer.fromSchema(schema).serializeFragment(doc.content)
+    const domParser = DOMParser.fromSchema(schema)
+    const slice = domParser.parseSlice(dom)
+    const node = isTextOnlySlice(slice)
+    if (node) {
+      view.dispatch(view.state.tr.replaceSelectionWith(node, true))
+      return
+    }
+
+    view.dispatch(view.state.tr.replaceSelection(slice))
+  }
+}

package/src/macro/markdown-to-slice.ts

@@ -0,0 +1,18 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+
+import { parserCtx, schemaCtx } from '@jvs-milkdown/core'
+import { DOMSerializer, DOMParser } from '@jvs-milkdown/prose/model'
+
+/// Convert markdown string to slice.
+export function markdownToSlice(markdown: string) {
+  return (ctx: Ctx) => {
+    const parser = ctx.get(parserCtx)
+    const doc = parser(markdown)
+    const schema = ctx.get(schemaCtx)
+    const dom = DOMSerializer.fromSchema(schema).serializeFragment(doc.content)
+    const domParser = DOMParser.fromSchema(schema)
+    const slice = domParser.parseSlice(dom)
+
+    return slice
+  }
+}

package/src/macro/outline.ts

@@ -0,0 +1,21 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+
+import { editorViewCtx } from '@jvs-milkdown/core'
+
+/// Get outline of the editor.
+export function outline() {
+  return (ctx: Ctx): Array<{ text: string; level: number; id: string }> => {
+    const view = ctx.get(editorViewCtx)
+    const data: { text: string; level: number; id: string }[] = []
+    const doc = view.state.doc
+    doc.descendants((node) => {
+      if (node.type.name === 'heading' && node.attrs.level)
+        data.push({
+          text: node.textContent,
+          level: node.attrs.level,
+          id: node.attrs.id,
+        })
+    })
+    return data
+  }
+}