@milkdown/preset-commonmark 7.4.0 → 7.5.8

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

@@ -9,31 +9,38 @@ export const hardbreakClearMarkPlugin = $prose((ctx) => {
   return new Plugin({
     key: new PluginKey('MILKDOWN_HARDBREAK_MARKS'),
     appendTransaction: (trs, _oldState, newState) => {
-      if (!trs.length)
-        return
+      if (!trs.length) return
 
       const [tr] = trs
-      if (!tr)
-        return
+      if (!tr) return
 
       const [step] = tr.steps
 
       const isInsertHr = tr.getMeta('hardbreak')
       if (isInsertHr) {
-        if (!(step instanceof ReplaceStep))
-          return
+        if (!(step instanceof ReplaceStep)) return
 
         const { from } = step as unknown as { from: number }
-        return newState.tr.setNodeMarkup(from, hardbreakSchema.type(ctx), undefined, [])
+        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 }
+        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, [])
+            _tr = _tr.setNodeMarkup(
+              pos,
+              hardbreakSchema.type(ctx),
+              undefined,
+              []
+            )
         })
 
         return _tr

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

@@ -3,7 +3,10 @@ import { $ctx, $prose } from '@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')
+export const hardbreakFilterNodes = $ctx(
+  ['table', 'code_block'],
+  'hardbreakFilterNodes'
+)
 
 withMeta(hardbreakFilterNodes, {
   displayName: 'Ctx<hardbreakFilterNodes>',
@@ -25,8 +28,7 @@ export const hardbreakFilterPlugin = $prose((ctx) => {
         let curDepth = $from.depth
         let canApply = true
         while (curDepth > 0) {
-          if (notIn.includes($from.node(curDepth).type.name))
-            canApply = false
+          if (notIn.includes($from.node(curDepth).type.name)) canApply = false
 
           curDepth--
         }

package/src/plugin/inline-nodes-cursor-plugin.ts

@@ -6,7 +6,9 @@ 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 inlineNodesCursorPluginKey = new PluginKey(
+    'MILKDOWN_INLINE_NODES_CURSOR'
+  )
   const inlineNodesCursorPlugin: Plugin = new Plugin({
     key: inlineNodesCursorPluginKey,
     state: {
@@ -14,13 +16,19 @@ export const inlineNodesCursorPlugin = $prose(() => {
         return false
       },
       apply(tr) {
-        if (!tr.selection.empty)
-          return false
+        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)
+        if (
+          left &&
+          right &&
+          left.isInline &&
+          !left.isText &&
+          right.isInline &&
+          !right.isText
+        )
           return true
 
         return false
@@ -46,8 +54,7 @@ export const inlineNodesCursorPlugin = $prose(() => {
         },
         compositionstart: (view) => {
           const active = inlineNodesCursorPlugin.getState(view.state)
-          if (active)
-            lock = true
+          if (active) lock = true
 
           return false
         },

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

@@ -3,16 +3,19 @@ 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
-      })
-    }
-  })
-})
+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>',

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

@@ -2,10 +2,16 @@ import { $remark } from '@milkdown/utils'
 import type { Node } from '@milkdown/transformer'
 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'
+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[]) {
+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) {
@@ -18,8 +24,7 @@ function flatMapWithDepth(ast: Node, fn: (node: Node, index: number, parent: Nod
           if (xs) {
             for (let j = 0, m = xs.length; j < m; j++) {
               const item = xs[j]
-              if (item)
-                out.push(item)
+              if (item) out.push(item)
             }
           }
         }
@@ -33,20 +38,22 @@ function flatMapWithDepth(ast: Node, fn: (node: Node, index: number, parent: Nod
 
 /// @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]
+export const remarkHtmlTransformer = $remark(
+  'remarkHTMLTransformer',
+  () => () => (tree: Node) => {
+    flatMapWithDepth(tree, (node, _index, parent) => {
+      if (!isHTML(node)) return [node]
 
-    if (parent?.type === 'root') {
-      node.children = [{ ...node }]
-      delete node.value;
-      (node as { type: string }).type = 'paragraph'
-    }
+      if (parent?.type === 'root') {
+        node.children = [{ ...node }]
+        delete node.value
+        ;(node as { type: string }).type = 'paragraph'
+      }
 
-    return [node]
-  })
-})
+      return [node]
+    })
+  }
+)
 
 withMeta(remarkHtmlTransformer.plugin, {
   displayName: 'Remark<remarkHtmlTransformer>',

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

@@ -3,7 +3,10 @@ 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)
+export const remarkInlineLinkPlugin = $remark(
+  'remarkInlineLink',
+  () => remarkInlineLinks
+)
 
 withMeta(remarkInlineLinkPlugin.plugin, {
   displayName: 'Remark<remarkInlineLinkPlugin>',

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

@@ -6,42 +6,55 @@ 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
+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
+        const result = []
+        let start = 0
 
-    find.lastIndex = 0
+        find.lastIndex = 0
 
-    let match = find.exec(node.value)
+        let match = find.exec(node.value)
 
-    while (match) {
-      const position = match.index
+        while (match) {
+          const position = match.index
 
-      if (start !== position)
-        result.push({ type: 'text', value: node.value.slice(start, position) })
+          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)
-    }
+          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'
+        const hasResultAndIndex =
+          result.length > 0 && parent && typeof index === 'number'
 
-    if (!hasResultAndIndex)
-      return
+        if (!hasResultAndIndex) return
 
-    if (start < node.value.length)
-      result.push({ type: 'text', value: node.value.slice(start) })
+        if (start < node.value.length)
+          result.push({ type: 'text', value: node.value.slice(start) })
 
-    parent.children.splice(index, 1, ...result)
-    return index + result.length
-  })
-})
+        parent.children.splice(index, 1, ...result)
+        return index + result.length
+      }
+    )
+  }
+)
 
 withMeta(remarkLineBreak.plugin, {
   displayName: 'Remark<remarkLineBreak>',

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

@@ -4,14 +4,21 @@ 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!)
+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)
+      }
+    )
   }
-  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>',

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

@@ -10,21 +10,26 @@ export const syncHeadingIdPlugin = $prose((ctx) => {
   const headingIdPluginKey = new PluginKey('MILKDOWN_HEADING_ID')
 
   const updateId = (view: EditorView) => {
-    if (view.composing)
-      return
+    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
+        if (node.textContent.trim().length === 0) return
 
         const attrs = node.attrs
-        const id = getId(node)
+        let id = getId(node)
+        if (idMap[id]) {
+          idMap[id]! += 1
+          id += `-#${idMap[id]}`
+        } else {
+          idMap[id] = 1
+        }
 
         if (attrs.id !== id) {
           found = true
@@ -36,8 +41,7 @@ export const syncHeadingIdPlugin = $prose((ctx) => {
       }
     })
 
-    if (found)
-      view.dispatch(tr)
+    if (found) view.dispatch(tr)
   }
 
   return new Plugin({
@@ -46,7 +50,8 @@ export const syncHeadingIdPlugin = $prose((ctx) => {
       updateId(view)
 
       return {
-        update: (view) => {
+        update: (view, prevState) => {
+          if (view.state.doc.eq(prevState.doc)) return
           updateId(view)
         },
       }

package/src/plugin/sync-list-order-plugin.ts

@@ -10,14 +10,16 @@ import { withMeta } from '../__internal__'
 /// This plugin is used to keep the label of list item up to date in ordered list.
 export const syncListOrderPlugin = $prose((ctx) => {
   const syncOrderLabel = (view: EditorView) => {
-    if (view.composing || !view.editable)
-      return
+    if (view.composing || !view.editable) return
 
     const orderedListType = orderedListSchema.type(ctx)
     const bulletListType = bulletListSchema.type(ctx)
     const listItemType = listItemSchema.type(ctx)
     const state = view.state
-    const handleNodeItem = (attrs: Record<string, any>, index: number): boolean => {
+    const handleNodeItem = (
+      attrs: Record<string, any>,
+      index: number
+    ): boolean => {
       let changed = false
       const expectedLabel = `${index + 1}.`
       if (attrs.label !== expectedLabel) {
@@ -41,14 +43,15 @@ export const syncListOrderPlugin = $prose((ctx) => {
             if (child.type === listItemType) {
               const attrs = { ...child.attrs }
               const changed = handleNodeItem(attrs, index)
-              if (changed)
-                tr = tr.setNodeMarkup(pos, undefined, attrs)
+              if (changed) tr = tr.setNodeMarkup(pos, undefined, attrs)
             }
             return false
           })
         }
-      }
-      else if (node.type === listItemType && parent?.type === orderedListType) {
+      } else if (
+        node.type === listItemType &&
+        parent?.type === orderedListType
+      ) {
         const attrs = { ...node.attrs }
         let changed = false
         if (attrs.listType !== 'ordered') {
@@ -57,8 +60,7 @@ export const syncListOrderPlugin = $prose((ctx) => {
         }
 
         const base = parent?.maybeChild(0)
-        if (base)
-          changed = handleNodeItem(attrs, index)
+        if (base) changed = handleNodeItem(attrs, index)
 
         if (changed) {
           tr = tr.setNodeMarkup(pos, undefined, attrs)
@@ -67,8 +69,7 @@ export const syncListOrderPlugin = $prose((ctx) => {
       }
     })
 
-    if (needDispatch)
-      view.dispatch(tr.setMeta('addToHistory', false))
+    if (needDispatch) view.dispatch(tr.setMeta('addToHistory', false))
   }
   return new Plugin({
     key: new PluginKey('MILKDOWN_KEEP_LIST_ORDER'),