@jvs-milkdown/core 1.0.0

package/src/internal-plugin/editor-state.ts

@@ -0,0 +1,140 @@
+import type { MilkdownPlugin, TimerType } from '@jvs-milkdown/ctx'
+import type { Schema } from '@jvs-milkdown/prose/model'
+import type { JSONRecord, Parser } from '@jvs-milkdown/transformer'
+
+import { createSlice, createTimer } from '@jvs-milkdown/ctx'
+import { docTypeError } from '@jvs-milkdown/exception'
+import { customInputRules as createInputRules } from '@jvs-milkdown/prose'
+import { keymap as createKeymap } from '@jvs-milkdown/prose/keymap'
+import { DOMParser, Node } from '@jvs-milkdown/prose/model'
+import { EditorState, Plugin, PluginKey } from '@jvs-milkdown/prose/state'
+
+import { withMeta } from '../__internal__'
+import { editorStateCtx, inputRulesCtx, prosePluginsCtx } from './atoms'
+import { CommandsReady } from './commands'
+import { keymapCtx, KeymapReady } from './keymap'
+import { ParserReady, parserCtx } from './parser'
+import { schemaCtx } from './schema'
+import { SerializerReady } from './serializer'
+
+/// @internal
+export type DefaultValue =
+  | string
+  | { type: 'html'; dom: HTMLElement }
+  | { type: 'json'; value: JSONRecord }
+type StateOptions = Parameters<typeof EditorState.create>[0]
+type StateOptionsOverride = (prev: StateOptions) => StateOptions
+
+/// A slice which contains the default value of the editor.
+/// Can be markdown string, html string or json.
+export const defaultValueCtx = createSlice('' as DefaultValue, 'defaultValue')
+
+/// A slice which contains the options which is used to create the editor state.
+export const editorStateOptionsCtx = createSlice<StateOptionsOverride>(
+  (x) => x,
+  'stateOptions'
+)
+
+/// A slice which stores timers that need to be waited for before starting to run the plugin.
+/// By default, it's `[ParserReady, SerializerReady, CommandsReady]`.
+export const editorStateTimerCtx = createSlice(
+  [] as TimerType[],
+  'editorStateTimer'
+)
+
+/// The timer which will be resolved when the editor state plugin is ready.
+export const EditorStateReady = createTimer('EditorStateReady')
+
+/// @internal
+export function getDoc(
+  defaultValue: DefaultValue,
+  parser: Parser,
+  schema: Schema
+) {
+  if (typeof defaultValue === 'string') return parser(defaultValue)
+
+  if (defaultValue.type === 'html')
+    return DOMParser.fromSchema(schema).parse(defaultValue.dom)
+
+  if (defaultValue.type === 'json')
+    return Node.fromJSON(schema, defaultValue.value)
+
+  throw docTypeError(defaultValue)
+}
+
+const key = new PluginKey('MILKDOWN_STATE_TRACKER')
+
+/// The editor state plugin.
+/// This plugin will create a prosemirror editor state.
+///
+/// This plugin will wait for the parser plugin, serializer plugin and commands plugin.
+export const editorState: MilkdownPlugin = (ctx) => {
+  ctx
+    .inject(defaultValueCtx, '')
+    .inject(editorStateCtx, {} as EditorState)
+    .inject(editorStateOptionsCtx, (x) => x)
+    .inject(editorStateTimerCtx, [
+      ParserReady,
+      SerializerReady,
+      CommandsReady,
+      KeymapReady,
+    ])
+    .record(EditorStateReady)
+
+  return async () => {
+    await ctx.waitTimers(editorStateTimerCtx)
+
+    const schema = ctx.get(schemaCtx)
+    const parser = ctx.get(parserCtx)
+    const rules = ctx.get(inputRulesCtx)
+    const optionsOverride = ctx.get(editorStateOptionsCtx)
+    const prosePlugins = ctx.get(prosePluginsCtx)
+    const defaultValue = ctx.get(defaultValueCtx)
+    const doc = getDoc(defaultValue, parser, schema)
+    const km = ctx.get(keymapCtx)
+    const disposeBaseKeymap = km.addBaseKeymap()
+
+    const plugins = [
+      ...prosePlugins,
+      new Plugin({
+        key,
+        state: {
+          init: () => {
+            // do nothing
+          },
+          apply: (_tr, _value, _oldState, newState) => {
+            ctx.set(editorStateCtx, newState)
+          },
+        },
+      }),
+      createInputRules({ rules }),
+      createKeymap(km.build()),
+    ]
+
+    ctx.set(prosePluginsCtx, plugins)
+
+    const options = optionsOverride({
+      schema,
+      doc,
+      plugins,
+    })
+
+    const state = EditorState.create(options)
+    ctx.set(editorStateCtx, state)
+    ctx.done(EditorStateReady)
+
+    return () => {
+      disposeBaseKeymap()
+      ctx
+        .remove(defaultValueCtx)
+        .remove(editorStateCtx)
+        .remove(editorStateOptionsCtx)
+        .remove(editorStateTimerCtx)
+        .clearTimer(EditorStateReady)
+    }
+  }
+}
+
+withMeta(editorState, {
+  displayName: 'EditorState',
+})

package/src/internal-plugin/editor-view.ts

@@ -0,0 +1,166 @@
+import type { Ctx, MilkdownPlugin, TimerType } from '@jvs-milkdown/ctx'
+import type { DirectEditorProps } from '@jvs-milkdown/prose/view'
+
+import { createSlice, createTimer } from '@jvs-milkdown/ctx'
+import { Plugin, PluginKey } from '@jvs-milkdown/prose/state'
+import { EditorView } from '@jvs-milkdown/prose/view'
+
+import { withMeta } from '../__internal__'
+import {
+  editorStateCtx,
+  editorViewCtx,
+  markViewCtx,
+  nodeViewCtx,
+  prosePluginsCtx,
+} from './atoms'
+import { EditorStateReady } from './editor-state'
+import { InitReady } from './init'
+import { pasteRulesCtx, PasteRulesReady } from './paste-rule'
+
+type EditorOptions = Omit<DirectEditorProps, 'state'>
+
+type RootType = Node | undefined | null | string
+
+/// The timer which will be resolved when the editor view plugin is ready.
+export const EditorViewReady = createTimer('EditorViewReady')
+
+/// A slice which stores timers that need to be waited for before starting to run the plugin.
+/// By default, it's `[EditorStateReady]`.
+export const editorViewTimerCtx = createSlice(
+  [] as TimerType[],
+  'editorViewTimer'
+)
+
+/// A slice which contains the editor view options which will be passed to the editor view.
+export const editorViewOptionsCtx = createSlice(
+  {} as Partial<EditorOptions>,
+  'editorViewOptions'
+)
+
+/// A slice which contains the value to get the root element.
+/// Can be a selector string, a node or null.
+/// If it's null, the editor will be created in the body.
+export const rootCtx = createSlice(null as RootType, 'root')
+
+/// A slice which contains the actually root element.
+export const rootDOMCtx = createSlice(null as unknown as HTMLElement, 'rootDOM')
+
+/// A slice which contains the root element attributes.
+/// You can add attributes to the root element by this slice.
+export const rootAttrsCtx = createSlice(
+  {} as Record<string, string>,
+  'rootAttrs'
+)
+
+function createViewContainer(root: Node, ctx: Ctx) {
+  const container = document.createElement('div')
+  container.className = 'milkdown'
+  root.appendChild(container)
+  ctx.set(rootDOMCtx, container)
+
+  const attrs = ctx.get(rootAttrsCtx)
+  Object.entries(attrs).forEach(([key, value]) =>
+    container.setAttribute(key, value)
+  )
+
+  return container
+}
+
+function prepareViewDom(dom: Element) {
+  dom.classList.add('editor')
+  dom.setAttribute('role', 'textbox')
+}
+
+const key = new PluginKey('MILKDOWN_VIEW_CLEAR')
+
+/// The editor view plugin.
+/// This plugin will create an editor view.
+///
+/// This plugin will wait for the editor state plugin.
+export const editorView: MilkdownPlugin = (ctx) => {
+  ctx
+    .inject(rootCtx, document.body)
+    .inject(editorViewCtx, {} as EditorView)
+    .inject(editorViewOptionsCtx, {})
+    .inject(rootDOMCtx, null as unknown as HTMLElement)
+    .inject(rootAttrsCtx, {})
+    .inject(editorViewTimerCtx, [EditorStateReady, PasteRulesReady])
+    .record(EditorViewReady)
+
+  return async () => {
+    await ctx.wait(InitReady)
+
+    const root = ctx.get(rootCtx) || document.body
+    const el = typeof root === 'string' ? document.querySelector(root) : root
+
+    ctx.update(prosePluginsCtx, (xs) => [
+      new Plugin({
+        key,
+        view: (editorView) => {
+          const container = el ? createViewContainer(el, ctx) : undefined
+
+          const handleDOM = () => {
+            if (container && el) {
+              const editor = editorView.dom
+              el.replaceChild(container, editor)
+              container.appendChild(editor)
+            }
+          }
+          handleDOM()
+          return {
+            destroy: () => {
+              if (container?.parentNode)
+                container?.parentNode.replaceChild(editorView.dom, container)
+
+              container?.remove()
+            },
+          }
+        },
+      }),
+      ...xs,
+    ])
+
+    await ctx.waitTimers(editorViewTimerCtx)
+
+    const state = ctx.get(editorStateCtx)
+    const options = ctx.get(editorViewOptionsCtx)
+    const nodeViews = Object.fromEntries(ctx.get(nodeViewCtx))
+    const markViews = Object.fromEntries(ctx.get(markViewCtx))
+    const view = new EditorView(el as Node, {
+      state,
+      nodeViews,
+      markViews,
+      transformPasted: (slice, view, isPlainText) => {
+        ctx
+          .get(pasteRulesCtx)
+          .sort((a, b) => (b.priority ?? 50) - (a.priority ?? 50))
+          .map((rule) => rule.run)
+          .forEach((runner) => {
+            slice = runner(slice, view, isPlainText)
+          })
+
+        return slice
+      },
+      ...options,
+    })
+    prepareViewDom(view.dom)
+    ctx.set(editorViewCtx, view)
+    ctx.done(EditorViewReady)
+
+    return () => {
+      view?.destroy()
+      ctx
+        .remove(rootCtx)
+        .remove(editorViewCtx)
+        .remove(editorViewOptionsCtx)
+        .remove(rootDOMCtx)
+        .remove(rootAttrsCtx)
+        .remove(editorViewTimerCtx)
+        .clearTimer(EditorViewReady)
+    }
+  }
+}
+
+withMeta(editorView, {
+  displayName: 'EditorView',
+})

package/src/internal-plugin/index.ts

@@ -0,0 +1,11 @@
+export * from './atoms'
+export * from './commands'
+export * from './config'
+export * from './editor-state'
+export * from './editor-view'
+export * from './init'
+export * from './parser'
+export * from './schema'
+export * from './serializer'
+export * from './keymap'
+export * from './paste-rule'

package/src/internal-plugin/init.ts

@@ -0,0 +1,78 @@
+import type { MilkdownPlugin } from '@jvs-milkdown/ctx'
+
+import { createTimer } from '@jvs-milkdown/ctx'
+import remarkParse from 'remark-parse'
+import remarkStringify, { type Options } from 'remark-stringify'
+import { unified } from 'unified'
+
+import type { Editor } from '../editor'
+
+import { remarkHandlers, withMeta } from '../__internal__'
+import {
+  editorCtx,
+  initTimerCtx,
+  inputRulesCtx,
+  markViewCtx,
+  nodeViewCtx,
+  prosePluginsCtx,
+  remarkCtx,
+  remarkPluginsCtx,
+  remarkStringifyOptionsCtx,
+} from './atoms'
+import { ConfigReady } from './config'
+
+/// The timer which will be resolved when the init plugin is ready.
+export const InitReady = createTimer('InitReady')
+
+/// The init plugin.
+/// This plugin prepare slices that needed by other plugins. And create a remark instance.
+///
+/// This plugin will wait for the config plugin.
+export function init(editor: Editor): MilkdownPlugin {
+  const plugin: MilkdownPlugin = (ctx) => {
+    ctx
+      .inject(editorCtx, editor)
+      .inject(prosePluginsCtx, [])
+      .inject(remarkPluginsCtx, [])
+      .inject(inputRulesCtx, [])
+      .inject(nodeViewCtx, [])
+      .inject(markViewCtx, [])
+      .inject(remarkStringifyOptionsCtx, {
+        handlers: remarkHandlers,
+        encode: [],
+      } as Options)
+      .inject(remarkCtx, unified().use(remarkParse).use(remarkStringify))
+      .inject(initTimerCtx, [ConfigReady])
+      .record(InitReady)
+
+    return async () => {
+      await ctx.waitTimers(initTimerCtx)
+      const options = ctx.get(remarkStringifyOptionsCtx)
+      ctx.set(
+        remarkCtx,
+        unified().use(remarkParse).use(remarkStringify, options)
+      )
+
+      ctx.done(InitReady)
+
+      return () => {
+        ctx
+          .remove(editorCtx)
+          .remove(prosePluginsCtx)
+          .remove(remarkPluginsCtx)
+          .remove(inputRulesCtx)
+          .remove(nodeViewCtx)
+          .remove(markViewCtx)
+          .remove(remarkStringifyOptionsCtx)
+          .remove(remarkCtx)
+          .remove(initTimerCtx)
+          .clearTimer(InitReady)
+      }
+    }
+  }
+  withMeta(plugin, {
+    displayName: 'Init',
+  })
+
+  return plugin
+}

package/src/internal-plugin/keymap.test.ts

@@ -0,0 +1,136 @@
+import { Clock, Container, Ctx } from '@jvs-milkdown/ctx'
+import { expect, test, vi } from 'vitest'
+
+import { KeymapManager } from './keymap'
+
+test('should work with basic keymap', async () => {
+  const km = new KeymapManager()
+  const container = new Container()
+  const clock = new Clock()
+  const ctx = new Ctx(container, clock)
+  km.setCtx(ctx)
+  km.addBaseKeymap()
+
+  const keymap = km.build()
+  expect(keymap['Backspace']).toBeDefined()
+  expect(keymap['Enter']).toBeDefined()
+})
+
+test('should chain commands for same key', async () => {
+  const km = new KeymapManager()
+  const container = new Container()
+  const clock = new Clock()
+  const ctx = new Ctx(container, clock)
+  km.setCtx(ctx)
+
+  const mock1 = vi.fn()
+  const mock2 = vi.fn()
+  const mock3 = vi.fn()
+
+  km.add({
+    key: 'Backspace',
+    onRun: () => {
+      return () => {
+        mock1()
+        return false
+      }
+    },
+  })
+
+  km.add({
+    key: 'Backspace',
+    onRun: () => {
+      return () => {
+        mock2()
+        return true
+      }
+    },
+  })
+
+  km.add({
+    key: 'Backspace',
+    onRun: () => {
+      return () => {
+        mock3()
+        return false
+      }
+    },
+  })
+
+  const keymap = km.build()
+  keymap['Backspace']!({} as never, () => {}, {} as never)
+
+  expect(mock1).toHaveBeenCalledTimes(1)
+  expect(mock2).toHaveBeenCalledTimes(1)
+  expect(mock3).not.toHaveBeenCalled()
+})
+
+test('should call high priority keymap first', async () => {
+  const km = new KeymapManager()
+  const container = new Container()
+  const clock = new Clock()
+  const ctx = new Ctx(container, clock)
+  km.setCtx(ctx)
+
+  const mock1 = vi.fn()
+  const mock2 = vi.fn()
+  const mock3 = vi.fn()
+
+  km.add({
+    key: 'Backspace',
+    onRun: () => {
+      return () => {
+        mock1()
+        return false
+      }
+    },
+  })
+
+  km.add({
+    key: 'Backspace',
+    onRun: () => {
+      return () => {
+        mock2()
+        return true
+      }
+    },
+  })
+
+  km.add({
+    key: 'Backspace',
+    priority: 100,
+    onRun: () => {
+      return () => {
+        mock3()
+        return true
+      }
+    },
+  })
+
+  const keymap = km.build()
+  keymap['Backspace']!({} as never, () => {}, {} as never)
+
+  expect(mock1).not.toHaveBeenCalled()
+  expect(mock2).not.toHaveBeenCalled()
+  expect(mock3).toHaveBeenCalledTimes(1)
+})
+
+test('should add object keymap', async () => {
+  const km = new KeymapManager()
+  const container = new Container()
+  const clock = new Clock()
+  const ctx = new Ctx(container, clock)
+  km.setCtx(ctx)
+
+  const mockBackspace = vi.fn()
+  const mockEnter = vi.fn()
+
+  km.addObjectKeymap({
+    Backspace: mockBackspace,
+    Enter: mockEnter,
+  })
+
+  const keymap = km.build()
+  expect(keymap['Backspace']).toBeDefined()
+  expect(keymap['Enter']).toBeDefined()
+})

package/src/internal-plugin/keymap.ts

@@ -0,0 +1,167 @@
+import type { Command } from '@jvs-milkdown/prose/state'
+
+import {
+  createSlice,
+  createTimer,
+  type Ctx,
+  type MilkdownPlugin,
+  type SliceType,
+} from '@jvs-milkdown/ctx'
+import { ctxCallOutOfScope } from '@jvs-milkdown/exception'
+import {
+  baseKeymap,
+  chainCommands,
+  deleteSelection,
+  joinTextblockBackward,
+  selectNodeBackward,
+} from '@jvs-milkdown/prose/commands'
+import { undoInputRule } from '@jvs-milkdown/prose/inputrules'
+
+import { SchemaReady } from './schema'
+
+/// @internal
+export type KeymapItem = {
+  key: string
+  onRun: (ctx: Ctx) => Command
+  priority?: number
+}
+
+/// @internal
+export type KeymapKey = SliceType<KeymapItem>
+
+function overrideBaseKeymap(keymap: Record<string, Command>) {
+  const handleBackspace = chainCommands(
+    undoInputRule,
+    deleteSelection,
+    joinTextblockBackward,
+    selectNodeBackward
+  )
+  keymap.Backspace = handleBackspace
+  return keymap
+}
+
+/// The keymap manager.
+/// This class is used to manage the keymap.
+export class KeymapManager {
+  /// @internal
+  #ctx: Ctx | null = null
+
+  #keymap: KeymapItem[] = []
+
+  /// @internal
+  setCtx = (ctx: Ctx) => {
+    this.#ctx = ctx
+  }
+
+  get ctx() {
+    return this.#ctx
+  }
+
+  /// Add a keymap item.
+  /// When not passing a priority, the priority will be 50.
+  /// For the same key, the keymap with higher priority will be executed first.
+  /// If the priority is the same, the keymap will be executed in the order of addition.
+  add = (keymap: KeymapItem) => {
+    this.#keymap.push(keymap)
+
+    return () => {
+      this.#keymap = this.#keymap.filter((item) => item !== keymap)
+    }
+  }
+
+  /// Add an object of keymap items.
+  addObjectKeymap = (keymaps: Record<string, Command | KeymapItem>) => {
+    const remove: (() => void)[] = []
+    Object.entries(keymaps).forEach(([key, command]) => {
+      if (typeof command === 'function') {
+        const keymapItem = {
+          key,
+          onRun: () => command,
+        }
+
+        this.#keymap.push(keymapItem)
+        remove.push(() => {
+          this.#keymap = this.#keymap.filter((item) => item !== keymapItem)
+        })
+      } else {
+        this.#keymap.push(command)
+        remove.push(() => {
+          this.#keymap = this.#keymap.filter((item) => item !== command)
+        })
+      }
+    })
+
+    return () => {
+      remove.forEach((fn) => fn())
+    }
+  }
+
+  /// Add the prosemirror base keymap.
+  addBaseKeymap = () => {
+    const base = overrideBaseKeymap(baseKeymap)
+    return this.addObjectKeymap(base)
+  }
+
+  /// @internal
+  build = () => {
+    const keymap: Record<string, KeymapItem[]> = {}
+    this.#keymap.forEach((item) => {
+      keymap[item.key] = [...(keymap[item.key] || []), item]
+    })
+
+    const output: Record<string, Command> = Object.fromEntries(
+      Object.entries(keymap).map(([key, items]) => {
+        const sortedItems = items.sort(
+          (a, b) => (b.priority ?? 50) - (a.priority ?? 50)
+        )
+
+        const command: Command = (state, dispatch, view) => {
+          const ctx = this.#ctx
+          if (ctx == null) throw ctxCallOutOfScope()
+
+          const commands = sortedItems.map((item) => item.onRun(ctx))
+          const chained = chainCommands(...commands)
+
+          return chained(state, dispatch, view)
+        }
+
+        return [key, command] as const
+      })
+    )
+
+    return output
+  }
+}
+
+/// A slice which stores the keymap manager.
+export const keymapCtx = createSlice(new KeymapManager(), 'keymap')
+
+/// A slice which stores timers that need to be waited for before starting to run the plugin.
+/// By default, it's `[SchemaReady]`.
+export const keymapTimerCtx = createSlice([SchemaReady], 'keymapTimer')
+
+/// The timer which will be resolved when the keymap plugin is ready.
+export const KeymapReady = createTimer('KeymapReady')
+
+/// The keymap plugin.
+/// This plugin will create a keymap manager.
+///
+/// This plugin will wait for the schema plugin.
+export const keymap: MilkdownPlugin = (ctx) => {
+  const km = new KeymapManager()
+  km.setCtx(ctx)
+  ctx
+    .inject(keymapCtx, km)
+    .inject(keymapTimerCtx, [SchemaReady])
+    .record(KeymapReady)
+
+  return async () => {
+    await ctx.waitTimers(keymapTimerCtx)
+
+    ctx.done(KeymapReady)
+
+    return () => {
+      ctx.remove(keymapCtx).remove(keymapTimerCtx).clearTimer(KeymapReady)
+    }
+  }
+}