@milkdown/preset-commonmark 6.5.4 → 7.0.0-next.1

package/src/node/ordered-list.ts

@@ -1,79 +1,84 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createCmd, createCmdKey } from '@milkdown/core'
+import { commandsCtx } from '@milkdown/core'
 import { expectDomTypeError } from '@milkdown/exception'
 import { wrapIn } from '@milkdown/prose/commands'
 import { wrappingInputRule } from '@milkdown/prose/inputrules'
-import { createNode, createShortcut } from '@milkdown/utils'
+import { $command, $inputRule, $nodeAttr, $nodeSchema, $useKeymap } from '@milkdown/utils'
 
-import { SupportedKeys } from '../supported-keys'
+/// HTML attributes for ordered list node.
+export const orderedListAttr = $nodeAttr('orderedList')
 
-type Keys = SupportedKeys['OrderedList']
-
-export const WrapInOrderedList = createCmdKey('WrapInOrderedList')
-
-const id = 'ordered_list'
-export const orderedList = createNode<Keys>(utils => ({
-  id,
-  schema: () => ({
-    content: 'listItem+',
-    group: 'block',
-    attrs: {
-      order: {
-        default: 1,
-      },
-      spread: {
-        default: false,
-      },
+/// Schema for ordered list node.
+export const orderedListSchema = $nodeSchema('ordered_list', ctx => ({
+  content: 'listItem+',
+  group: 'block',
+  attrs: {
+    order: {
+      default: 1,
+    },
+    spread: {
+      default: false,
     },
-    parseDOM: [
-      {
-        tag: 'ol',
-        getAttrs: (dom) => {
-          if (!(dom instanceof HTMLElement))
-            throw expectDomTypeError(dom)
+  },
+  parseDOM: [
+    {
+      tag: 'ol',
+      getAttrs: (dom) => {
+        if (!(dom instanceof HTMLElement))
+          throw expectDomTypeError(dom)
 
-          return {
-            spread: dom.dataset.spread,
-            order: dom.hasAttribute('start') ? Number(dom.getAttribute('start')) : 1,
-          }
-        },
-      },
-    ],
-    toDOM: node => [
-      'ol',
-      {
-        ...(node.attrs.order === 1 ? {} : node.attrs.order),
-        'data-spread': node.attrs.spread,
-        'class': utils.getClassName(node.attrs, 'ordered-list'),
-      },
-      0,
-    ],
-    parseMarkdown: {
-      match: ({ type, ordered }) => type === 'list' && !!ordered,
-      runner: (state, node, type) => {
-        const spread = node.spread != null ? `${node.spread}` : 'true'
-        state.openNode(type, { spread }).next(node.children).closeNode()
+        return {
+          spread: dom.dataset.spread,
+          order: dom.hasAttribute('start') ? Number(dom.getAttribute('start')) : 1,
+        }
       },
     },
-    toMarkdown: {
-      match: node => node.type.name === id,
-      runner: (state, node) => {
-        state.openNode('list', undefined, { ordered: true, start: 1, spread: node.attrs.spread === 'true' })
-        state.next(node.content)
-        state.closeNode()
-      },
+  ],
+  toDOM: node => [
+    'ol',
+    {
+      ...ctx.get(orderedListAttr.key)(node),
+      ...(node.attrs.order === 1 ? {} : node.attrs.order),
+      'data-spread': node.attrs.spread,
     },
-  }),
-  inputRules: nodeType => [
-    wrappingInputRule(
-      /^(\d+)\.\s$/,
-      nodeType,
-      match => ({ order: Number(match[1]) }),
-      (match, node) => node.childCount + node.attrs.order === Number(match[1]),
-    ),
+    0,
   ],
-  commands: nodeType => [createCmd(WrapInOrderedList, () => wrapIn(nodeType))],
-  shortcuts: {
-    [SupportedKeys.OrderedList]: createShortcut(WrapInOrderedList, 'Mod-Alt-7'),
+  parseMarkdown: {
+    match: ({ type, ordered }) => type === 'list' && !!ordered,
+    runner: (state, node, type) => {
+      const spread = node.spread != null ? `${node.spread}` : 'true'
+      state.openNode(type, { spread }).next(node.children).closeNode()
+    },
+  },
+  toMarkdown: {
+    match: node => node.type.name === 'ordered_list',
+    runner: (state, node) => {
+      state.openNode('list', undefined, { ordered: true, start: 1, spread: node.attrs.spread === 'true' })
+      state.next(node.content)
+      state.closeNode()
+    },
   },
 }))
+
+/// Input rule for wrapping a block in ordered list node.
+export const wrapInOrderedListInputRule = $inputRule(() => wrappingInputRule(
+  /^\s*(\d+)\.\s$/,
+  orderedListSchema.type(),
+  match => ({ order: Number(match[1]) }),
+  (match, node) => node.childCount + node.attrs.order === Number(match[1]),
+))
+
+/// Command for wrapping a block in ordered list node.
+export const wrapInOrderedListCommand = $command('WrapInOrderedList', () => () => wrapIn(orderedListSchema.type()))
+
+/// Keymap for ordered list node.
+/// - `Mod-Alt-7`: Wrap a block in ordered list.
+export const orderedListKeymap = $useKeymap('orderedListKeymap', {
+  WrapInOrderedList: {
+    shortcuts: 'Mod-Alt-7',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(wrapInOrderedListCommand.key)
+    },
+  },
+})

package/src/node/paragraph.ts

@@ -1,62 +1,66 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createCmd, createCmdKey } from '@milkdown/core'
+import { commandsCtx } from '@milkdown/core'
 import { setBlockType } from '@milkdown/prose/commands'
 import type { Node } from '@milkdown/prose/model'
 import { Fragment } from '@milkdown/prose/model'
-import { createNode, createShortcut } from '@milkdown/utils'
+import { $command, $nodeAttr, $nodeSchema, $useKeymap } from '@milkdown/utils'
 
-import { SupportedKeys } from '../supported-keys'
+/// HTML attributes for paragraph node.
+export const paragraphAttr = $nodeAttr('paragraph')
 
-type Keys = SupportedKeys['Text']
+/// Schema for paragraph node.
+export const paragraphSchema = $nodeSchema('paragraph', ctx => ({
+  content: 'inline*',
+  group: 'block',
+  parseDOM: [{ tag: 'p' }],
+  toDOM: node => ['p', ctx.get(paragraphAttr.key)(node), 0],
+  parseMarkdown: {
+    match: node => node.type === 'paragraph',
+    runner: (state, node, type) => {
+      state.openNode(type)
+      if (node.children)
+        state.next(node.children)
 
-export const TurnIntoText = createCmdKey('TurnIntoText')
+      else
+        state.addText((node.value || '') as string)
 
-const id = 'paragraph'
-export const paragraph = createNode<Keys>((utils) => {
-  return {
-    id,
-    schema: () => ({
-      content: 'inline*',
-      group: 'block',
-      parseDOM: [{ tag: 'p' }],
-      toDOM: node => ['p', { class: utils.getClassName(node.attrs, id) }, 0],
-      parseMarkdown: {
-        match: node => node.type === 'paragraph',
-        runner: (state, node, type) => {
-          state.openNode(type)
-          if (node.children)
-            state.next(node.children)
-          else
-            state.addText(node.value as string)
+      state.closeNode()
+    },
+  },
+  toMarkdown: {
+    match: node => node.type.name === 'paragraph',
+    runner: (state, node) => {
+      state.openNode('paragraph')
+      const lastIsHardbreak = node.childCount >= 1 && node.lastChild?.type.name === 'hardbreak'
+      if (lastIsHardbreak) {
+        const contentArr: Node[] = []
+        node.content.forEach((n, _, i) => {
+          if (i === node.childCount - 1)
+            return
+
+          contentArr.push(n)
+        })
+        state.next(Fragment.fromArray(contentArr))
+      }
+      else {
+        state.next(node.content)
+      }
+      state.closeNode()
+    },
+  },
+}))
 
-          state.closeNode()
-        },
-      },
-      toMarkdown: {
-        match: node => node.type.name === 'paragraph',
-        runner: (state, node) => {
-          state.openNode('paragraph')
-          const lastIsHardbreak = node.childCount >= 1 && node.lastChild?.type.name === 'hardbreak'
-          if (lastIsHardbreak) {
-            const contentArr: Node[] = []
-            node.content.forEach((n, _, i) => {
-              if (i === node.childCount - 1)
-                return
+/// This command can turn the selected block into paragraph.
+export const turnIntoTextCommand = $command('TurnIntoText', () => () => setBlockType(paragraphSchema.type()))
 
-              contentArr.push(n)
-            })
-            state.next(Fragment.fromArray(contentArr))
-          }
-          else {
-            state.next(node.content)
-          }
-          state.closeNode()
-        },
-      },
-    }),
-    commands: nodeType => [createCmd(TurnIntoText, () => setBlockType(nodeType))],
-    shortcuts: {
-      [SupportedKeys.Text]: createShortcut(TurnIntoText, 'Mod-Alt-0'),
+/// Keymap for paragraph node.
+/// - `<Mod-Alt-0>`: Turn the selected block into paragraph.
+export const paragraphKeymap = $useKeymap('paragraphKeymap', {
+  TurnIntoText: {
+    shortcuts: 'Mod-Alt-0',
+    command: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      return () => commands.call(turnIntoTextCommand.key)
     },
-  }
+  },
 })

package/src/node/text.ts

@@ -1,21 +1,19 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createNode } from '@milkdown/utils'
+import { $node } from '@milkdown/utils'
 
-export const text = createNode(() => ({
-  id: 'text',
-  schema: () => ({
-    group: 'inline',
-    parseMarkdown: {
-      match: ({ type }) => type === 'text',
-      runner: (state, node) => {
-        state.addText(node.value as string)
-      },
+/// The bottom-level node.
+export const textSchema = $node('text', () => ({
+  group: 'inline',
+  parseMarkdown: {
+    match: ({ type }) => type === 'text',
+    runner: (state, node) => {
+      state.addText(node.value as string)
     },
-    toMarkdown: {
-      match: node => node.type.name === 'text',
-      runner: (state, node) => {
-        state.addNode('text', undefined, node.text as string)
-      },
+  },
+  toMarkdown: {
+    match: node => node.type.name === 'text',
+    runner: (state, node) => {
+      state.addNode('text', undefined, node.text as string)
     },
-  }),
+  },
 }))

package/src/plugin/hardbreak-clear-mark-plugin.ts

@@ -0,0 +1,45 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { Plugin, PluginKey } from '@milkdown/prose/state'
+import { AddMarkStep, ReplaceStep } from '@milkdown/prose/transform'
+import { $prose } from '@milkdown/utils'
+import { hardbreakSchema } from '../node/hardbreak'
+
+/// This plugin is used to clear the marks around the hardbreak node.
+export const hardbreakClearMarkPlugin = $prose(() => {
+  return new Plugin({
+    key: new PluginKey('MILKDOWN_HARDBREAK_MARKS'),
+    appendTransaction: (trs, _oldState, newState) => {
+      if (!trs.length)
+        return
+
+      const [tr] = trs
+      if (!tr)
+        return
+
+      const [step] = tr.steps
+
+      const isInsertHr = tr.getMeta('hardbreak')
+      if (isInsertHr) {
+        if (!(step instanceof ReplaceStep))
+          return
+
+        const { from } = step as unknown as { from: number }
+        return newState.tr.setNodeMarkup(from, hardbreakSchema.type(), undefined, [])
+      }
+
+      const isAddMarkStep = step instanceof AddMarkStep
+      if (isAddMarkStep) {
+        let _tr = newState.tr
+        const { from, to } = step as unknown as { from: number; to: number }
+        newState.doc.nodesBetween(from, to, (node, pos) => {
+          if (node.type === hardbreakSchema.type())
+            _tr = _tr.setNodeMarkup(pos, hardbreakSchema.type(), undefined, [])
+        })
+
+        return _tr
+      }
+
+      return undefined
+    },
+  })
+})

package/src/plugin/hardbreak-filter-plugin.ts

@@ -0,0 +1,33 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { Plugin, PluginKey } from '@milkdown/prose/state'
+import { $ctx, $prose } from '@milkdown/utils'
+
+/// This slice contains the nodes that within which the hardbreak will be ignored.
+export const hardbreakFilterNodes = $ctx(['table', 'code_block'], 'hardbreakFilterNodes')
+
+/// This plugin is used to filter the hardbreak node.
+/// If the hardbreak is going to be inserted within a node that is in the `hardbreakFilterNodes`, ignore it.
+export const hardbreakFilterPlugin = $prose((ctx) => {
+  const notIn = ctx.get(hardbreakFilterNodes.key)
+  return new Plugin({
+    key: new PluginKey('MILKDOWN_HARDBREAK_FILTER'),
+    filterTransaction: (tr, state) => {
+      const isInsertHr = tr.getMeta('hardbreak')
+      const [step] = tr.steps
+      if (isInsertHr && step) {
+        const { from } = step as unknown as { from: number }
+        const $from = state.doc.resolve(from)
+        let curDepth = $from.depth
+        let canApply = true
+        while (curDepth > 0) {
+          if (notIn.includes($from.node(curDepth).type.name))
+            canApply = false
+
+          curDepth--
+        }
+        return canApply
+      }
+      return true
+    },
+  })
+})

package/src/plugin/index.ts

@@ -1,17 +1,15 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createPlugin } from '@milkdown/utils'
-import links from 'remark-inline-links'
 
-import { addOrderInList } from './add-order-in-list'
-import { filterHTMLPlugin } from './filter-html'
-import { getInlineNodesCursorPlugin } from './inline-nodes-cursor'
-import { getInlineSyncPlugin, inlineSyncConfigCtx } from './inline-sync'
+export * from './inline-sync-plugin'
 
-export { inlineSyncConfigCtx }
-export const commonmarkPlugins = [
-  createPlugin(() => ({
-    injectSlices: [inlineSyncConfigCtx],
-    prosePlugins: (_, ctx) => [getInlineNodesCursorPlugin(), getInlineSyncPlugin(ctx)],
-    remarkPlugins: () => [links, filterHTMLPlugin, addOrderInList],
-  }))(),
-]
+export * from './remark-add-order-in-list-plugin'
+export * from './remark-line-break'
+export * from './remark-inline-link-plugin'
+
+export * from './inline-nodes-cursor-plugin'
+
+export * from './hardbreak-clear-mark-plugin'
+export * from './hardbreak-filter-plugin'
+
+export * from './sync-heading-id-plugin'
+export * from './sync-list-order-plugin'

package/src/plugin/{inline-nodes-cursor.ts → inline-nodes-cursor-plugin.ts}

@@ -1,15 +1,12 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { Plugin, PluginKey } from '@milkdown/prose/state'
 import { Decoration, DecorationSet } from '@milkdown/prose/view'
+import { $prose } from '@milkdown/utils'
 
-const inlineNodesCursorPluginKey = new PluginKey('MILKDOWN_INLINE_NODES_CURSOR')
-
-/**
- * This plugin is to solve the chrome 98 bug:
- * https://discuss.prosemirror.net/t/cursor-jumps-at-the-end-of-line-when-it-betweens-two-inline-nodes/4641
- */
-export const getInlineNodesCursorPlugin = (): Plugin => {
+/// This plugin is to solve the [chrome 98 bug](https://discuss.prosemirror.net/t/cursor-jumps-at-the-end-of-line-when-it-betweens-two-inline-nodes/4641).
+export const inlineNodesCursorPlugin = $prose(() => {
   let lock = false
+  const inlineNodesCursorPluginKey = new PluginKey('MILKDOWN_INLINE_NODES_CURSOR')
   const inlineNodesCursorPlugin: Plugin = new Plugin({
     key: inlineNodesCursorPluginKey,
     state: {
@@ -90,4 +87,4 @@ export const getInlineNodesCursorPlugin = (): Plugin => {
   })
 
   return inlineNodesCursorPlugin
-}
+})

package/src/plugin/{inline-sync → inline-sync-plugin}/config.ts

@@ -1,11 +1,12 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import type { Ctx } from '@milkdown/core'
-import { createSlice } from '@milkdown/core'
+import type { Ctx } from '@milkdown/ctx'
 import type { Node, NodeType } from '@milkdown/prose/model'
 import type { Transaction } from '@milkdown/prose/state'
+import { $ctx } from '@milkdown/utils'
 
 import { swap } from './utils'
 
+/// @internal
 export type ShouldSyncNode = (context: {
   prevNode: Node
   nextNode: Node
@@ -14,12 +15,14 @@ export type ShouldSyncNode = (context: {
   text: string
 }) => boolean
 
+/// @internal
 export interface SyncNodePlaceholder {
   hole: string
   punctuation: string
   char: string
 }
 
+/// @internal
 export interface InlineSyncConfig {
   placeholderConfig: SyncNodePlaceholder
   shouldSyncNode: ShouldSyncNode
@@ -27,6 +30,7 @@ export interface InlineSyncConfig {
   movePlaceholder: (placeholderToMove: string, text: string) => string
 }
 
+/// @internal
 export const defaultConfig: InlineSyncConfig = {
   placeholderConfig: {
     hole: '∅',
@@ -54,4 +58,15 @@ export const defaultConfig: InlineSyncConfig = {
   },
 }
 
-export const inlineSyncConfigCtx = createSlice<InlineSyncConfig, 'inlineSyncConfig'>(defaultConfig, 'inlineSyncConfig')
+/// A slice that contains the inline sync config.
+/// You can set value to this slice to change the config.
+///
+/// ```typescript
+/// ctx.update(inlineSyncConfigCtx, (prevCfg) => ({
+///   ...prevCfg,
+///   // your config
+/// }));
+/// ```
+///
+/// You can find the default config [here](https://github.com/Saul-Mirone/milkdown/blob/main/packages/preset-commonmark/src/plugin/inline-sync-plugin/config.ts).
+export const inlineSyncConfig = $ctx<InlineSyncConfig, 'inlineSyncConfig'>(defaultConfig, 'inlineSyncConfig')

package/src/plugin/{inline-sync → inline-sync-plugin}/context.ts

@@ -1,15 +1,13 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import type { Ctx } from '@milkdown/core'
+import type { Ctx } from '@milkdown/ctx'
 import { parserCtx, serializerCtx } from '@milkdown/core'
 import type { Node } from '@milkdown/prose/model'
 import type { EditorState } from '@milkdown/prose/state'
 import { pipe } from '@milkdown/utils'
 
-import { inlineSyncConfigCtx } from './config'
+import { inlineSyncConfig } from './config'
 import { calculatePlaceholder, keepLink, replacePunctuation } from './utils'
 
-export * from './config'
-
 export interface InlineSyncContext {
   text: string
   prevNode: Node
@@ -35,7 +33,7 @@ const getMarkdown = (ctx: Ctx, state: EditorState, node: Node, globalNode: Node[
 }
 
 const addPlaceholder = (ctx: Ctx, markdown: string) => {
-  const config = ctx.get(inlineSyncConfigCtx)
+  const config = ctx.get(inlineSyncConfig.key)
   const holePlaceholder = config.placeholderConfig.hole
 
   const [firstLine = '', ...rest] = markdown.split('\n\n')
@@ -65,7 +63,7 @@ const getNewNode = (ctx: Ctx, text: string) => {
 }
 
 const collectGlobalNodes = (ctx: Ctx, state: EditorState) => {
-  const { globalNodes } = ctx.get(inlineSyncConfigCtx)
+  const { globalNodes } = ctx.get(inlineSyncConfig.key)
   const nodes: Node[] = []
 
   state.doc.descendants((node) => {

package/src/plugin/inline-sync-plugin/index.ts

@@ -0,0 +1,4 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+export * from './config'
+export * from './inline-sync-plugin'

package/src/plugin/{inline-sync/index.ts → inline-sync-plugin/inline-sync-plugin.ts}

@@ -1,18 +1,23 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import type { Ctx } from '@milkdown/core'
+import type { Ctx } from '@milkdown/ctx'
 import { editorViewCtx } from '@milkdown/core'
 import { Plugin, PluginKey } from '@milkdown/prose/state'
+import { $prose } from '@milkdown/utils'
 
-import { inlineSyncConfigCtx } from './config'
+import { inlineSyncConfig } from './config'
 import { getContextByState } from './context'
 import { runReplacer } from './replacer'
 
-export * from './config'
-
-export const inlineSyncPluginKey = new PluginKey('MILKDOWN_INLINE_SYNC')
-export const getInlineSyncPlugin = (ctx: Ctx) => {
+/// This plugin is used to sync the inline mark.
+/// It will create and remove marks automatically according to the user input.
+///
+/// When users type something, the plugin will transform the line (for better performance) to real markdown AST by serializer
+/// and render the AST to dom by parser, thus the input texts can be displayed correctly.
+export const inlineSyncPlugin = $prose((ctx: Ctx) => {
   let requestId: number | null = null
-  const inlineSyncPlugin = new Plugin<null>({
+  const inlineSyncPluginKey = new PluginKey('MILKDOWN_INLINE_SYNC')
+
+  return new Plugin<null>({
     key: inlineSyncPluginKey,
     state: {
       init: () => {
@@ -41,7 +46,7 @@ export const getInlineSyncPlugin = (ctx: Ctx) => {
 
         const { prevNode, nextNode, text } = context
 
-        const { shouldSyncNode } = ctx.get(inlineSyncConfigCtx)
+        const { shouldSyncNode } = ctx.get(inlineSyncConfig.key)
 
         if (!shouldSyncNode({ prevNode, nextNode, ctx, tr, text }))
           return null
@@ -58,6 +63,4 @@ export const getInlineSyncPlugin = (ctx: Ctx) => {
       },
     },
   })
-
-  return inlineSyncPlugin
-}
+})

package/src/plugin/{inline-sync → inline-sync-plugin}/replacer.ts

@@ -1,10 +1,10 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import type { Ctx } from '@milkdown/core'
+import type { Ctx } from '@milkdown/ctx'
 import type { Attrs } from '@milkdown/prose/model'
 import type { EditorState, PluginKey, Transaction } from '@milkdown/prose/state'
 import { TextSelection } from '@milkdown/prose/state'
 
-import { inlineSyncConfigCtx } from './config'
+import { inlineSyncConfig } from './config'
 import { getContextByState } from './context'
 import { calcOffset } from './utils'
 
@@ -15,7 +15,7 @@ export const runReplacer = (
   dispatch: (tr: Transaction) => void,
   attrs: Attrs,
 ) => {
-  const { placeholderConfig } = ctx.get(inlineSyncConfigCtx)
+  const { placeholderConfig } = ctx.get(inlineSyncConfig.key)
   const holePlaceholder = placeholderConfig.hole
   // insert a placeholder to restore the selection
   let tr = state.tr.setMeta(key, true).insertText(holePlaceholder, state.selection.from)

package/src/plugin/remark-add-order-in-list-plugin.ts

@@ -0,0 +1,16 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { $remark } from '@milkdown/utils'
+import type { Node, Parent } from 'unist'
+import { visit } from 'unist-util-visit'
+
+/// This plugin is used to add order in list for remark AST.
+export const remarkAddOrderInListPlugin = $remark(() => () => (tree: Node) => {
+  visit(tree, 'list', (node: Parent & { ordered?: boolean; start?: number }) => {
+    if (node.ordered) {
+      const start = node.start ?? 1
+      node.children.forEach((child, index) => {
+        (child as Node & { label: number }).label = index + start
+      })
+    }
+  })
+})

package/src/plugin/remark-inline-link-plugin.ts

@@ -0,0 +1,6 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { $remark } from '@milkdown/utils'
+import remarkInlineLinks from 'remark-inline-links'
+
+/// This plugin wraps [remark-inline-links](https://github.com/remarkjs/remark-inline-links).
+export const remarkInlineLinkPlugin = $remark(() => remarkInlineLinks)