@milkdown/preset-commonmark 7.2.3 → 7.3.0

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

@@ -6,7 +6,7 @@ import { hardbreakSchema } from '../node'
 import { withMeta } from '../__internal__'
 
 /// This plugin is used to clear the marks around the hardbreak node.
-export const hardbreakClearMarkPlugin = $prose(() => {
+export const hardbreakClearMarkPlugin = $prose((ctx) => {
   return new Plugin({
     key: new PluginKey('MILKDOWN_HARDBREAK_MARKS'),
     appendTransaction: (trs, _oldState, newState) => {
@@ -25,7 +25,7 @@ export const hardbreakClearMarkPlugin = $prose(() => {
           return
 
         const { from } = step as unknown as { from: number }
-        return newState.tr.setNodeMarkup(from, hardbreakSchema.type(), undefined, [])
+        return newState.tr.setNodeMarkup(from, hardbreakSchema.type(ctx), undefined, [])
       }
 
       const isAddMarkStep = step instanceof AddMarkStep
@@ -33,8 +33,8 @@ export const hardbreakClearMarkPlugin = $prose(() => {
         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, [])
+          if (node.type === hardbreakSchema.type(ctx))
+            _tr = _tr.setNodeMarkup(pos, hardbreakSchema.type(ctx), undefined, [])
         })
 
         return _tr

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

@@ -6,7 +6,8 @@ import type { EditorState } from '@milkdown/prose/state'
 import { pipe } from '@milkdown/utils'
 
 import { inlineSyncConfig } from './config'
-import { calculatePlaceholder, keepLink, replacePunctuation } from './utils'
+import { calculatePlaceholder, keepLink, mergeSlash, replacePunctuation } from './utils'
+import { asterisk, asteriskHolder, underline, underlineHolder } from './regexp'
 
 export interface InlineSyncContext {
   text: string
@@ -23,9 +24,7 @@ const getMarkdown = (ctx: Ctx, state: EditorState, node: Node, globalNode: Node[
   const serializer = ctx.get(serializerCtx)
   const doc = state.schema.topNodeType.create(undefined, [node, ...globalNode])
 
-  const markdown = serializer(doc)
-
-  return markdown
+  return serializer(doc)
 }
 
 const addPlaceholder = (ctx: Ctx, markdown: string) => {
@@ -36,7 +35,7 @@ const addPlaceholder = (ctx: Ctx, markdown: string) => {
 
   const movePlaceholder = (text: string) => config.movePlaceholder(holePlaceholder, text)
 
-  const handleText = pipe(replacePunctuation(holePlaceholder), movePlaceholder, keepLink)
+  const handleText = pipe(replacePunctuation(holePlaceholder), movePlaceholder, keepLink, mergeSlash)
 
   let text = handleText(firstLine)
   const placeholder = calculatePlaceholder(config.placeholderConfig)(text)
@@ -103,6 +102,10 @@ export const getContextByState = (ctx: Ctx, state: EditorState): InlineSyncConte
         // @ts-expect-error hijack the mark attribute
         link.attrs.href = link.attrs.href.replace(placeholder, '')
       }
+      if (node.text?.includes(asteriskHolder) || node.text?.includes(underlineHolder)) {
+        // @ts-expect-error hijack the attribute
+        node.text = node.text.replaceAll(asteriskHolder, asterisk).replaceAll(underlineHolder, underline)
+      }
     })
 
     return {

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

@@ -6,3 +6,10 @@ export const keepLinkRegexp = /\[(?<span>((www|https:\/\/|http:\/\/)[^\s\]]+))]\
 
 export const punctuationRegexp = (holePlaceholder: string) =>
   new RegExp(`\\\\(?=[^\\w\\s${holePlaceholder}\\\\]|_)`, 'g')
+
+export const ZERO_WIDTH_SPACE = '\u200B'
+
+export const asterisk = `${ZERO_WIDTH_SPACE}*`
+export const asteriskHolder = `${ZERO_WIDTH_SPACE}＊`
+export const underline = `${ZERO_WIDTH_SPACE}_`
+export const underlineHolder = `${ZERO_WIDTH_SPACE}⎽`

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

@@ -3,7 +3,14 @@
 import type { Node } from '@milkdown/prose/model'
 
 import type { SyncNodePlaceholder } from './config'
-import { keepLinkRegexp, punctuationRegexp } from './regexp'
+import {
+  asterisk,
+  asteriskHolder,
+  keepLinkRegexp,
+  punctuationRegexp,
+  underline,
+  underlineHolder,
+} from './regexp'
 
 export const keepLink = (str: string) => {
   let text = str
@@ -17,6 +24,14 @@ export const keepLink = (str: string) => {
   return text
 }
 
+export const mergeSlash = (str: string) => {
+  return str
+    .replaceAll(/\\\\\*/g, asterisk)
+    .replaceAll(/\\\\_/g, underline)
+    .replaceAll(asterisk, asteriskHolder)
+    .replaceAll(underline, underlineHolder)
+}
+
 export const swap = (text: string, first: number, last: number) => {
   const arr = text.split('')
   const temp = arr[first]

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

@@ -1,22 +1,26 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { $remark } from '@milkdown/utils'
-import type { Node, Parent } from 'unist'
 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(() => () => (tree: Node) => {
-  visit(tree, 'list', (node: Parent & { ordered?: boolean; start?: number }) => {
+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 Node & { label: number }).label = index + start
+        (child as unknown as Record<string, number>).label = index + start
       })
     }
   })
 })
 
-withMeta(remarkAddOrderInListPlugin, {
+withMeta(remarkAddOrderInListPlugin.plugin, {
   displayName: 'Remark<remarkAddOrderInListPlugin>',
   group: 'Remark',
 })
+
+withMeta(remarkAddOrderInListPlugin.options, {
+  displayName: 'RemarkConfig<remarkAddOrderInListPlugin>',
+  group: 'Remark',
+})

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

@@ -1,10 +1,10 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { $remark } from '@milkdown/utils'
-import type { Literal, Node, Parent } from 'unist'
+import type { Node } from '@milkdown/transformer'
 import { withMeta } from '../__internal__'
 
-const isParent = (node: Node): node is Parent => !!(node as Parent).children
-const isHTML = (node: Node): node is Literal<string> => 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[]) {
   return transform(ast, 0, null)[0]
@@ -34,22 +34,27 @@ 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(() => () => (tree: Node) => {
+export const remarkHtmlTransformer = $remark('remarkHTMLTransformer', () => () => (tree: Node) => {
   flatMapWithDepth(tree, (node, _index, parent) => {
     if (!isHTML(node))
       return [node]
 
     if (parent?.type === 'root') {
-      (node as Literal & { children: Literal[] }).children = [{ ...node }]
-      delete (node as Literal).value
-      node.type = 'paragraph'
+      node.children = [{ ...node }]
+      delete node.value;
+      (node as { type: string }).type = 'paragraph'
     }
 
     return [node]
   })
 })
 
-withMeta(remarkHtmlTransformer, {
+withMeta(remarkHtmlTransformer.plugin, {
   displayName: 'Remark<remarkHtmlTransformer>',
   group: 'Remark',
 })
+
+withMeta(remarkHtmlTransformer.options, {
+  displayName: 'RemarkConfig<remarkHtmlTransformer>',
+  group: 'Remark',
+})

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

@@ -4,9 +4,14 @@ 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(() => remarkInlineLinks)
+export const remarkInlineLinkPlugin = $remark('remarkInlineLink', () => remarkInlineLinks)
 
-withMeta(remarkInlineLinkPlugin, {
+withMeta(remarkInlineLinkPlugin.plugin, {
   displayName: 'Remark<remarkInlineLinkPlugin>',
   group: 'Remark',
 })
+
+withMeta(remarkInlineLinkPlugin.options, {
+  displayName: 'RemarkConfig<remarkInlineLinkPlugin>',
+  group: 'Remark',
+})

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

@@ -1,15 +1,15 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { $remark } from '@milkdown/utils'
-import type { Literal, Node, Parent } from 'unist'
+import type { Node } from '@milkdown/transformer'
 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(() => () => (tree: Node) => {
+export const remarkLineBreak = $remark('remarkLineBreak', () => () => (tree: Node) => {
   const find = /[\t ]*(?:\r?\n|\r)/g
-  visit(tree, 'text', (node: Literal, index: number, parent: Parent) => {
+  visit(tree, 'text', (node: Node & { value: string }, index: number, parent: Node & { children: Node[] }) => {
     if (!node.value || typeof node.value !== 'string')
       return
 
@@ -44,7 +44,12 @@ export const remarkLineBreak = $remark(() => () => (tree: Node) => {
   })
 })
 
-withMeta(remarkLineBreak, {
+withMeta(remarkLineBreak.plugin, {
   displayName: 'Remark<remarkLineBreak>',
   group: 'Remark',
 })
+
+withMeta(remarkLineBreak.options, {
+  displayName: 'RemarkConfig<remarkLineBreak>',
+  group: 'Remark',
+})

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

@@ -1,20 +1,25 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { $remark } from '@milkdown/utils'
-import type { Node } from 'unist'
-import type { VFile } from 'vfile'
+import type { Node } from '@milkdown/transformer'
 import { visit } from 'unist-util-visit'
 import { withMeta } from '../__internal__'
 
-export const remarkMarker = $remark(() => () => (tree: Node, file: VFile) => {
+/// 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 => ['strong', 'emphasis'].includes(node.type), (node: Node) => {
+  visit(tree, (node: Node) => ['strong', 'emphasis'].includes(node.type), (node: Node) => {
     (node as Node & { marker: string }).marker = getMarker(node)
   })
 })
 
-withMeta(remarkMarker, {
+withMeta(remarkMarker.plugin, {
   displayName: 'Remark<remarkMarker>',
   group: 'Remark',
 })
+
+withMeta(remarkMarker.options, {
+  displayName: 'RemarkConfig<remarkMarker>',
+  group: 'Remark',
+})

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

@@ -20,7 +20,7 @@ export const syncHeadingIdPlugin = $prose((ctx) => {
     let found = false
 
     view.state.doc.descendants((node, pos) => {
-      if (node.type === headingSchema.type()) {
+      if (node.type === headingSchema.type(ctx)) {
         if (node.textContent.trim().length === 0)
           return
 

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

@@ -9,14 +9,14 @@ import { bulletListSchema } from '../node'
 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(() => {
+export const syncListOrderPlugin = $prose((ctx) => {
   const syncOrderLabel = (view: EditorView) => {
     if (view.composing || !view.editable)
       return
 
-    const orderedListType = orderedListSchema.type()
-    const bulletListType = bulletListSchema.type()
-    const listItemType = listItemSchema.type()
+    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 => {
       let changed = false