@milkdown/preset-commonmark 7.15.0 → 7.15.2

package/src/__test__/html.spec.ts

@@ -0,0 +1,46 @@
+import '@testing-library/jest-dom/vitest'
+import type { EditorView } from '@milkdown/prose/view'
+
+import { defaultValueCtx, Editor, editorViewCtx } from '@milkdown/core'
+import { expect, it } from 'vitest'
+
+import { commonmark } from '..'
+
+function createEditor() {
+  const editor = Editor.make()
+  editor.use(commonmark)
+  return editor
+}
+
+const htmlInBlockquote = {
+  name: 'htmlInBlockquote',
+  defaultValue: `
+> <p>Hello, world!</p>
+`,
+  check: (view: EditorView) => {
+    expect(view.dom.querySelector('blockquote')).toBeInTheDocument()
+  },
+}
+
+const htmlInListItem = {
+  name: 'htmlInListItem',
+  defaultValue: `
+* <p>List item with HTML</p>
+`,
+  check: (view: EditorView) => {
+    expect(view.dom.querySelector('li')).toBeInTheDocument()
+  },
+}
+
+;[htmlInBlockquote, htmlInListItem].forEach(({ name, defaultValue, check }) => {
+  it(`should render html in ${name}`, async () => {
+    const editor = createEditor()
+    editor.config((ctx) => {
+      ctx.set(defaultValueCtx, defaultValue)
+    })
+
+    await editor.create()
+
+    check(editor.ctx.get(editorViewCtx))
+  })
+})

package/src/mark/emphasis.ts

@@ -91,7 +91,7 @@ withMeta(emphasisStarInputRule, {
 
 /// Input rule for use `_` to create emphasis mark.
 export const emphasisUnderscoreInputRule = $inputRule((ctx) => {
-  return markRule(/(?:^|[^_])_([^_]+)_$/, emphasisSchema.type(ctx), {
+  return markRule(/\b_(?![_\s])(.*?[^_\s])_\b/, emphasisSchema.type(ctx), {
     getAttr: () => ({
       marker: '_',
     }),

package/src/mark/strong.ts

@@ -86,13 +86,20 @@ withMeta(toggleStrongCommand, {
 
 /// A input rule that will capture the strong mark.
 export const strongInputRule = $inputRule((ctx) => {
-  return markRule(/(?:\*\*|__)([^*_]+)(?:\*\*|__)$/, strongSchema.type(ctx), {
-    getAttr: (match) => {
-      return {
-        marker: match[0].startsWith('*') ? '*' : '_',
-      }
-    },
-  })
+  // Avoid matching when the opening delimiter is directly adjacent to alphanumeric characters,
+  // colon or slash (to prevent matches inside file paths, URLs, or intra-word like `a**b**c`).
+  // Also ensure the closing delimiter is not followed by such characters (mirrors strike-through rule).
+  return markRule(
+    /(?<![\w:/])(?:\*\*|__)([^*_]+?)(?:\*\*|__)(?![\w/])$/,
+    strongSchema.type(ctx),
+    {
+      getAttr: (match) => {
+        return {
+          marker: match[0].startsWith('*') ? '*' : '_',
+        }
+      },
+    }
+  )
 })
 
 withMeta(strongInputRule, {

package/src/node/heading.ts

@@ -21,11 +21,7 @@ const headingIndex = Array(6)
   .map((_, i) => i + 1)
 
 function defaultHeadingIdGenerator(node: Node) {
-  return node.textContent
-    .toLowerCase()
-    .trim()
-    .replace(/[^\w\s-]/g, '')
-    .replace(/\s+/g, '-')
+  return node.textContent.toLowerCase().trim().replace(/\s+/g, '-')
 }
 
 /// This is a slice contains a function to generate heading id.

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

@@ -38,6 +38,10 @@ function flatMapWithDepth(
   }
 }
 
+// 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(
@@ -46,7 +50,9 @@ export const remarkHtmlTransformer = $remark(
     flatMapWithDepth(tree, (node, _index, parent) => {
       if (!isHTML(node)) return [node]
 
-      if (parent?.type === 'root') {
+      // 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'

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

@@ -1,4 +1,5 @@
-import type { EditorView } from '@milkdown/prose/view'
+import type { Node } from '@milkdown/prose/model'
+import type { EditorState, Transaction } from '@milkdown/prose/state'
 
 import { Plugin, PluginKey } from '@milkdown/prose/state'
 import { $prose } from '@milkdown/utils'
@@ -10,13 +11,24 @@ import { orderedListSchema } from '../node/ordered-list'
 
 /// 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
+  const syncOrderLabel = (
+    transactions: readonly Transaction[],
+    _oldState: EditorState,
+    newState: EditorState
+  ) => {
+    // Skip if composing or not editable
+    if (
+      !newState.selection ||
+      transactions.some(
+        (tr) => tr.getMeta('addToHistory') === false || !tr.isGeneric
+      )
+    )
+      return null
 
     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
@@ -31,57 +43,64 @@ export const syncListOrderPlugin = $prose((ctx) => {
       return changed
     }
 
-    let tr = state.tr
+    let tr = newState.tr
     let needDispatch = false
-    state.doc.descendants((node, pos, parent, index) => {
-      if (node.type === bulletListType) {
-        const base = node.maybeChild(0)
-        if (base?.type === listItemType && base.attrs.listType === 'ordered') {
-          needDispatch = true
-          tr.setNodeMarkup(pos, orderedListType, { spread: 'true' })
 
-          node.descendants((child, pos, _parent, index) => {
-            if (child.type === listItemType) {
-              const attrs = { ...child.attrs }
-              const changed = handleNodeItem(attrs, index)
-              if (changed) tr = tr.setNodeMarkup(pos, undefined, attrs)
-            }
-            return false
-          })
-        }
-      } else if (
-        node.type === listItemType &&
-        parent?.type === orderedListType
-      ) {
-        const attrs = { ...node.attrs }
-        let changed = false
-        if (attrs.listType !== 'ordered') {
-          attrs.listType = 'ordered'
-          changed = true
-        }
+    newState.doc.descendants(
+      (node: Node, pos: number, parent: Node | null, index: number) => {
+        if (node.type === bulletListType) {
+          const base = node.maybeChild(0)
+          if (
+            base?.type === listItemType &&
+            base.attrs.listType === 'ordered'
+          ) {
+            needDispatch = true
+            tr.setNodeMarkup(pos, orderedListType, { spread: 'true' })
 
-        const base = parent?.maybeChild(0)
-        if (base) changed = handleNodeItem(attrs, index)
+            node.descendants(
+              (
+                child: Node,
+                pos: number,
+                _parent: Node | null,
+                index: number
+              ) => {
+                if (child.type === listItemType) {
+                  const attrs = { ...child.attrs }
+                  const changed = handleNodeItem(attrs, index)
+                  if (changed) tr = tr.setNodeMarkup(pos, undefined, attrs)
+                }
+                return false
+              }
+            )
+          }
+        } else if (
+          node.type === listItemType &&
+          parent?.type === orderedListType
+        ) {
+          const attrs = { ...node.attrs }
+          let changed = false
+          if (attrs.listType !== 'ordered') {
+            attrs.listType = 'ordered'
+            changed = true
+          }
 
-        if (changed) {
-          tr = tr.setNodeMarkup(pos, undefined, attrs)
-          needDispatch = true
+          const base = parent?.maybeChild(0)
+          if (base) changed = handleNodeItem(attrs, index)
+
+          if (changed) {
+            tr = tr.setNodeMarkup(pos, undefined, attrs)
+            needDispatch = true
+          }
         }
       }
-    })
+    )
 
-    if (needDispatch) view.dispatch(tr.setMeta('addToHistory', false))
+    return needDispatch ? tr.setMeta('addToHistory', false) : null
   }
+
   return new Plugin({
     key: new PluginKey('MILKDOWN_KEEP_LIST_ORDER'),
-    view: (view) => {
-      syncOrderLabel(view)
-      return {
-        update: (view) => {
-          syncOrderLabel(view)
-        },
-      }
-    },
+    appendTransaction: syncOrderLabel,
   })
 })