@jvs-milkdown/preset-commonmark 1.0.0

package/src/node/text.ts

@@ -0,0 +1,25 @@
+import { $node } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+
+/// 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)
+    },
+  },
+}))
+
+withMeta(textSchema, {
+  displayName: 'NodeSchema<text>',
+  group: 'Text',
+})

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

@@ -0,0 +1,58 @@
+import { Plugin, PluginKey } from '@jvs-milkdown/prose/state'
+import { AddMarkStep, ReplaceStep } from '@jvs-milkdown/prose/transform'
+import { $prose } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+import { hardbreakSchema } from '../node'
+
+/// This plugin is used to clear the marks around the hardbreak node.
+export const hardbreakClearMarkPlugin = $prose((ctx) => {
+  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(ctx),
+          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(ctx))
+            _tr = _tr.setNodeMarkup(
+              pos,
+              hardbreakSchema.type(ctx),
+              undefined,
+              []
+            )
+        })
+
+        return _tr
+      }
+
+      return undefined
+    },
+  })
+})
+
+withMeta(hardbreakClearMarkPlugin, {
+  displayName: 'Prose<hardbreakClearMarkPlugin>',
+  group: 'Prose',
+})

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

@@ -0,0 +1,46 @@
+import { Plugin, PluginKey } from '@jvs-milkdown/prose/state'
+import { $ctx, $prose } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+
+/// This slice contains the nodes that within which the hardbreak will be ignored.
+export const hardbreakFilterNodes = $ctx(
+  ['table', 'code_block'],
+  'hardbreakFilterNodes'
+)
+
+withMeta(hardbreakFilterNodes, {
+  displayName: 'Ctx<hardbreakFilterNodes>',
+  group: 'Prose',
+})
+
+/// 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
+    },
+  })
+})
+
+withMeta(hardbreakFilterPlugin, {
+  displayName: 'Prose<hardbreakFilterPlugin>',
+  group: 'Prose',
+})

package/src/plugin/index.ts

@@ -0,0 +1,14 @@
+export * from './remark-add-order-in-list-plugin'
+export * from './remark-line-break'
+export * from './remark-inline-link-plugin'
+export * from './remark-html-transformer'
+export * from './remark-marker-plugin'
+export * from './remark-preserve-empty-line'
+
+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-plugin.ts

@@ -0,0 +1,103 @@
+import { Plugin, PluginKey } from '@jvs-milkdown/prose/state'
+import { Decoration, DecorationSet } from '@jvs-milkdown/prose/view'
+import { $prose } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+
+/// 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: {
+      init() {
+        return false
+      },
+      apply(tr) {
+        if (!tr.selection.empty) return false
+
+        const pos = tr.selection.$from
+        const left = pos.nodeBefore
+        const right = pos.nodeAfter
+        if (
+          left &&
+          right &&
+          left.isInline &&
+          !left.isText &&
+          right.isInline &&
+          !right.isText
+        )
+          return true
+
+        return false
+      },
+    },
+    props: {
+      handleDOMEvents: {
+        compositionend: (view, e) => {
+          if (lock) {
+            lock = false
+            requestAnimationFrame(() => {
+              const active = inlineNodesCursorPlugin.getState(view.state)
+              if (active) {
+                const from = view.state.selection.from
+                e.preventDefault()
+                view.dispatch(view.state.tr.insertText(e.data || '', from))
+              }
+            })
+
+            return true
+          }
+          return false
+        },
+        compositionstart: (view) => {
+          const active = inlineNodesCursorPlugin.getState(view.state)
+          if (active) lock = true
+
+          return false
+        },
+        beforeinput: (view, e) => {
+          const active = inlineNodesCursorPlugin.getState(view.state)
+          if (active && e instanceof InputEvent && e.data && !lock) {
+            const from = view.state.selection.from
+            e.preventDefault()
+            view.dispatch(view.state.tr.insertText(e.data || '', from))
+
+            return true
+          }
+
+          return false
+        },
+      },
+      decorations(state) {
+        const active = inlineNodesCursorPlugin.getState(state)
+        if (active) {
+          const pos = state.selection.$from
+          const position = pos.pos
+          const left = document.createElement('span')
+          const leftDec = Decoration.widget(position, left, {
+            side: -1,
+          })
+          const right = document.createElement('span')
+          const rightDec = Decoration.widget(position, right)
+          setTimeout(() => {
+            left.contentEditable = 'true'
+            right.contentEditable = 'true'
+          })
+          return DecorationSet.create(state.doc, [leftDec, rightDec])
+        }
+        return DecorationSet.empty
+      },
+    },
+  })
+
+  return inlineNodesCursorPlugin
+})
+
+withMeta(inlineNodesCursorPlugin, {
+  displayName: 'Prose<inlineNodesCursorPlugin>',
+  group: 'Prose',
+})

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

@@ -0,0 +1,29 @@
+import { $remark } from '@jvs-milkdown/utils'
+import { visit } from 'unist-util-visit'
+
+import { withMeta } from '../__internal__'
+
+/// This plugin is used to add order in list for remark AST.
+export const remarkAddOrderInListPlugin = $remark(
+  'remarkAddOrderInList',
+  () => () => (tree) => {
+    visit(tree, 'list', (node) => {
+      if (node.ordered) {
+        const start = node.start ?? 1
+        node.children.forEach((child, index) => {
+          ;(child as unknown as Record<string, number>).label = index + start
+        })
+      }
+    })
+  }
+)
+
+withMeta(remarkAddOrderInListPlugin.plugin, {
+  displayName: 'Remark<remarkAddOrderInListPlugin>',
+  group: 'Remark',
+})
+
+withMeta(remarkAddOrderInListPlugin.options, {
+  displayName: 'RemarkConfig<remarkAddOrderInListPlugin>',
+  group: 'Remark',
+})

package/src/plugin/remark-html-transformer.ts

@@ -0,0 +1,74 @@
+import type { Node } from '@jvs-milkdown/transformer'
+
+import { $remark } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+
+const isParent = (node: Node): node is Node & { children: Node[] } =>
+  !!(node as Node & { children: Node[] }).children
+const isHTML = (
+  node: Node
+): node is Node & { children: Node[]; value: unknown } => node.type === 'html'
+
+function flatMapWithDepth(
+  ast: Node,
+  fn: (node: Node, index: number, parent: Node | null) => Node[]
+) {
+  return transform(ast, 0, null)[0]
+
+  function transform(node: Node, index: number, parent: Node | null) {
+    if (isParent(node)) {
+      const out = []
+      for (let i = 0, n = node.children.length; i < n; i++) {
+        const nthChild = node.children[i]
+        if (nthChild) {
+          const xs = transform(nthChild, i, node)
+          if (xs) {
+            for (let j = 0, m = xs.length; j < m; j++) {
+              const item = xs[j]
+              if (item) out.push(item)
+            }
+          }
+        }
+      }
+      node.children = out
+    }
+
+    return fn(node, index, parent)
+  }
+}
+
+// List of container node types that can contain block-level content
+// and thus may need HTML content to be wrapped in paragraphs
+const BLOCK_CONTAINER_TYPES = ['root', 'blockquote', 'listItem']
+
+/// @internal
+/// This plugin should be deprecated after we support HTML.
+export const remarkHtmlTransformer = $remark(
+  'remarkHTMLTransformer',
+  () => () => (tree: Node) => {
+    flatMapWithDepth(tree, (node, _index, parent) => {
+      if (!isHTML(node)) return [node]
+
+      // If the parent is a block container that expects block content,
+      // wrap the HTML in a paragraph node
+      if (parent && BLOCK_CONTAINER_TYPES.includes(parent.type)) {
+        node.children = [{ ...node }]
+        delete node.value
+        ;(node as { type: string }).type = 'paragraph'
+      }
+
+      return [node]
+    })
+  }
+)
+
+withMeta(remarkHtmlTransformer.plugin, {
+  displayName: 'Remark<remarkHtmlTransformer>',
+  group: 'Remark',
+})
+
+withMeta(remarkHtmlTransformer.options, {
+  displayName: 'RemarkConfig<remarkHtmlTransformer>',
+  group: 'Remark',
+})

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

@@ -0,0 +1,20 @@
+import { $remark } from '@jvs-milkdown/utils'
+import remarkInlineLinks from 'remark-inline-links'
+
+import { withMeta } from '../__internal__'
+
+/// This plugin wraps [remark-inline-links](https://github.com/remarkjs/remark-inline-links).
+export const remarkInlineLinkPlugin = $remark(
+  'remarkInlineLink',
+  () => remarkInlineLinks
+)
+
+withMeta(remarkInlineLinkPlugin.plugin, {
+  displayName: 'Remark<remarkInlineLinkPlugin>',
+  group: 'Remark',
+})
+
+withMeta(remarkInlineLinkPlugin.options, {
+  displayName: 'RemarkConfig<remarkInlineLinkPlugin>',
+  group: 'Remark',
+})

package/src/plugin/remark-line-break.ts

@@ -0,0 +1,69 @@
+import type { Node } from '@jvs-milkdown/transformer'
+
+import { $remark } from '@jvs-milkdown/utils'
+import { visit } from 'unist-util-visit'
+
+import { withMeta } from '../__internal__'
+
+/// This plugin is used to add inline line break for remark AST.
+/// The inline line break should be treated as a `space`.
+/// And the normal line break should be treated as a `LF`.
+export const remarkLineBreak = $remark(
+  'remarkLineBreak',
+  () => () => (tree: Node) => {
+    const find = /[\t ]*(?:\r?\n|\r)/g
+    visit(
+      tree,
+      'text',
+      (
+        node: Node & { value: string },
+        index: number,
+        parent: Node & { children: Node[] }
+      ) => {
+        if (!node.value || typeof node.value !== 'string') return
+
+        const result = []
+        let start = 0
+
+        find.lastIndex = 0
+
+        let match = find.exec(node.value)
+
+        while (match) {
+          const position = match.index
+
+          if (start !== position)
+            result.push({
+              type: 'text',
+              value: node.value.slice(start, position),
+            })
+
+          result.push({ type: 'break', data: { isInline: true } })
+          start = position + match[0].length
+          match = find.exec(node.value)
+        }
+
+        const hasResultAndIndex =
+          result.length > 0 && parent && typeof index === 'number'
+
+        if (!hasResultAndIndex) return
+
+        if (start < node.value.length)
+          result.push({ type: 'text', value: node.value.slice(start) })
+
+        parent.children.splice(index, 1, ...result)
+        return index + result.length
+      }
+    )
+  }
+)
+
+withMeta(remarkLineBreak.plugin, {
+  displayName: 'Remark<remarkLineBreak>',
+  group: 'Remark',
+})
+
+withMeta(remarkLineBreak.options, {
+  displayName: 'RemarkConfig<remarkLineBreak>',
+  group: 'Remark',
+})

package/src/plugin/remark-marker-plugin.ts

@@ -0,0 +1,33 @@
+import type { Node } from '@jvs-milkdown/transformer'
+
+import { $remark } from '@jvs-milkdown/utils'
+import { visit } from 'unist-util-visit'
+
+import { withMeta } from '../__internal__'
+
+/// This plugin is used to keep the marker (`_` and `*`) of emphasis and strong nodes.
+export const remarkMarker = $remark(
+  'remarkMarker',
+  () => () => (tree, file) => {
+    const getMarker = (node: Node) => {
+      return (file.value as string).charAt(node.position!.start.offset!)
+    }
+    visit(
+      tree,
+      (node: Node) => ['strong', 'emphasis'].includes(node.type),
+      (node: Node) => {
+        ;(node as Node & { marker: string }).marker = getMarker(node)
+      }
+    )
+  }
+)
+
+withMeta(remarkMarker.plugin, {
+  displayName: 'Remark<remarkMarker>',
+  group: 'Remark',
+})
+
+withMeta(remarkMarker.options, {
+  displayName: 'RemarkConfig<remarkMarker>',
+  group: 'Remark',
+})

package/src/plugin/remark-preserve-empty-line.ts

@@ -0,0 +1,49 @@
+import type { Node } from '@jvs-milkdown/transformer'
+
+import { $remark } from '@jvs-milkdown/utils'
+import { visitParents } from 'unist-util-visit-parents'
+
+import { withMeta } from '../__internal__'
+
+function visitEmptyLine(ast: Node) {
+  return visitParents(
+    ast,
+    (node: Node) =>
+      node.type === 'html' &&
+      ['<br />', '<br>', '<br >', '<br/>'].includes(
+        (node as Node & { value: string }).value?.trim()
+      ),
+    (node: Node, parents: Node[]) => {
+      if (!parents.length) return
+      const parent = parents[parents.length - 1] as
+        | (Node & { children: Node[] })
+        | undefined
+      if (!parent) return
+      const index = parent.children.indexOf(node)
+      if (index === -1) return
+
+      parent.children.splice(index, 1)
+    },
+    true
+  )
+}
+
+/// @internal
+/// This plugin is used to preserve the empty line.
+/// Markdown will fold the empty line into the previous line by default.
+/// This plugin will preserve the empty line by converting `<br />` to `line-break`.
+/// This plugin should be used with `linebreakSchema` to work.
+export const remarkPreserveEmptyLinePlugin = $remark(
+  'remark-preserve-empty-line',
+  () => () => visitEmptyLine
+)
+
+withMeta(remarkPreserveEmptyLinePlugin.plugin, {
+  displayName: 'Remark<remarkPreserveEmptyLine>',
+  group: 'Remark',
+})
+
+withMeta(remarkPreserveEmptyLinePlugin.options, {
+  displayName: 'RemarkConfig<remarkPreserveEmptyLine>',
+  group: 'Remark',
+})

package/src/plugin/sync-heading-id-plugin.ts

@@ -0,0 +1,67 @@
+import type { EditorView } from '@jvs-milkdown/prose/view'
+
+import { Plugin, PluginKey } from '@jvs-milkdown/prose/state'
+import { $prose } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__'
+import { headingIdGenerator, headingSchema } from '../node/heading'
+
+/// This plugin is used to sync the heading id when the heading content changes.
+/// It will use the `headingIdGenerator` to generate the id.
+export const syncHeadingIdPlugin = $prose((ctx) => {
+  const headingIdPluginKey = new PluginKey('MILKDOWN_HEADING_ID')
+
+  const updateId = (view: EditorView) => {
+    if (view.composing) return
+
+    const getId = ctx.get(headingIdGenerator.key)
+    const tr = view.state.tr.setMeta('addToHistory', false)
+
+    let found = false
+    const idMap: Record<string, number> = {}
+
+    view.state.doc.descendants((node, pos) => {
+      if (node.type === headingSchema.type(ctx)) {
+        if (node.textContent.trim().length === 0) return
+
+        const attrs = node.attrs
+        let id = getId(node)
+        if (idMap[id]) {
+          idMap[id]! += 1
+          id += `-#${idMap[id]}`
+        } else {
+          idMap[id] = 1
+        }
+
+        if (attrs.id !== id) {
+          found = true
+          tr.setMeta(headingIdPluginKey, true).setNodeMarkup(pos, undefined, {
+            ...attrs,
+            id,
+          })
+        }
+      }
+    })
+
+    if (found) view.dispatch(tr)
+  }
+
+  return new Plugin({
+    key: headingIdPluginKey,
+    view: (view) => {
+      updateId(view)
+
+      return {
+        update: (view, prevState) => {
+          if (view.state.doc.eq(prevState.doc)) return
+          updateId(view)
+        },
+      }
+    },
+  })
+})
+
+withMeta(syncHeadingIdPlugin, {
+  displayName: 'Prose<syncHeadingIdPlugin>',
+  group: 'Prose',
+})