@milkdown/preset-gfm 7.22.0 → 7.22.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milkdown/preset-gfm",
-  "version": "7.22.0",
+  "version": "7.22.2",
   "keywords": [
     "gfm",
     "markdown",
@@ -27,15 +27,15 @@
     }
   },
   "dependencies": {
+    "@milkdown/core": "7.22.2",
+    "@milkdown/ctx": "7.22.2",
+    "@milkdown/exception": "7.22.2",
+    "@milkdown/preset-commonmark": "7.22.2",
+    "@milkdown/prose": "7.22.2",
+    "@milkdown/transformer": "7.22.2",
+    "@milkdown/utils": "7.22.2",
     "prosemirror-safari-ime-span": "^1.0.1",
-    "remark-gfm": "^4.0.1",
-    "@milkdown/core": "7.22.0",
-    "@milkdown/ctx": "7.22.0",
-    "@milkdown/exception": "7.22.0",
-    "@milkdown/prose": "7.22.0",
-    "@milkdown/transformer": "7.22.0",
-    "@milkdown/utils": "7.22.0",
-    "@milkdown/preset-commonmark": "7.22.0"
+    "remark-gfm": "^4.0.1"
   },
   "scripts": {
     "build": "vite build"

package/src/__test__/inline-br-containers.spec.ts

@@ -0,0 +1,106 @@
+import { editorViewCtx } from '@milkdown/core'
+import { getMarkdown } from '@milkdown/utils'
+import { describe, expect, it } from 'vitest'
+
+import { countBrAtomsIn, roundTrip, withEditor } from './test-utils'
+
+describe('inline br in gfm containers', () => {
+  it('does not drop a footnote whose definition has a block <br>', async () => {
+    const input = '[^note]: foo\n\n    <br />\n\n    bar\n\n'
+    const output = await roundTrip(input)
+    expect(output).toBe('[^note]: foo\n\n    <br />\n\n    bar\n')
+  })
+
+  it('keeps a referenced footnote whose definition has a block <br>', async () => {
+    const input = 'See [^note].\n\n[^note]: foo\n\n    <br />\n\n    bar\n\n'
+    const output = await roundTrip(input)
+    expect(output).toBe(
+      'See [^note].\n\n[^note]: foo\n\n    <br />\n\n    bar\n'
+    )
+  })
+
+  it('keeps an inline <br> inside a footnote definition', async () => {
+    const output = await roundTrip('[^note]: foo<br>bar\n')
+    expect(output).toBe('[^note]: foo<br>bar\n')
+  })
+
+  // A lone <br> in a table cell is byte-identical to the placeholder the
+  // old serializer emitted for every empty cell, so it folds into an
+  // empty cell; the serializer no longer emits placeholders inside cells.
+  it('folds a lone table-cell <br> into an empty cell', async () => {
+    const input = '| <br> | c |\n| --- | --- |\n| x | y |\n'
+    expect(await countBrAtomsIn(input)).toBe(0)
+    const output = await roundTrip(input)
+    expect(output).toBe('|   | c |\n| - | - |\n| x | y |\n')
+  })
+
+  it('loads a legacy empty-cell placeholder as an empty cell', async () => {
+    const input = '| <br /> | c |\n| --- | --- |\n| x | y |\n'
+    expect(await countBrAtomsIn(input)).toBe(0)
+    const output = await roundTrip(input)
+    expect(output).toBe('|   | c |\n| - | - |\n| x | y |\n')
+  })
+
+  it('round-trips an empty table cell without a placeholder', async () => {
+    const input = '|  | c |\n| --- | --- |\n| x | y |\n'
+    const output = await roundTrip(input)
+    expect(output).toBe('|   | c |\n| - | - |\n| x | y |\n')
+    expect(output).not.toContain('<br')
+  })
+
+  it('keeps consecutive <br>s inside a table cell as atoms', async () => {
+    const input = '| <br><br> | c |\n| --- | --- |\n| x | y |\n'
+    expect(await countBrAtomsIn(input)).toBe(2)
+    const output = await roundTrip(input)
+    expect(output).toBe(
+      '| <br><br> | c |\n| -------- | - |\n| x        | y |\n'
+    )
+  })
+
+  it('keeps sibling text and an inline <br> inside a table cell', async () => {
+    const input = '| a<br>b | c |\n| --- | --- |\n| x | y |\n'
+    expect(await countBrAtomsIn(input)).toBe(1)
+    const output = await roundTrip(input)
+    expect(output).toBe('| a<br>b | c |\n| ------ | - |\n| x      | y |\n')
+  })
+
+  // An HTML paste can put a trailing hardbreak in a cell. The
+  // serializer drops it, the same as the paragraph serializer does.
+  // Otherwise it renders as a trailing space that the next parse trims,
+  // and two consecutive saves diverge.
+  it('drops a trailing hardbreak in a cell so saves stay stable', async () => {
+    const output = await withEditor(
+      '| a | c |\n| --- | --- |\n| x | y |\n',
+      (editor) =>
+        editor.action((ctx) => {
+          const view = ctx.get(editorViewCtx)
+          const { state } = view
+          const hardbreak = state.schema.nodes.hardbreak
+          if (!hardbreak) throw new Error('hardbreak type missing')
+          let pos = -1
+          state.doc.descendants((node, nodePos) => {
+            if (
+              pos === -1 &&
+              node.type.name === 'paragraph' &&
+              node.textContent === 'a'
+            )
+              pos = nodePos + node.nodeSize - 1
+            return pos === -1
+          })
+          view.dispatch(state.tr.insert(pos, hardbreak.create()))
+          return getMarkdown()(ctx)
+        })
+    )
+    expect(output).toBe('| a | c |\n| - | - |\n| x | y |\n')
+  })
+
+  it('keeps a lone <br> inside strikethrough', async () => {
+    const output = await roundTrip('~~<br>~~\n')
+    expect(output).toBe('~~<br>~~\n')
+  })
+
+  it('keeps an inline <br> inside a task list item', async () => {
+    const output = await roundTrip('- [ ] foo<br>bar\n')
+    expect(output).toBe('* [ ] foo<br>bar\n')
+  })
+})

package/src/__test__/inline-code-input-rule.spec.ts

@@ -0,0 +1,69 @@
+import '@testing-library/jest-dom/vitest'
+import { Editor, editorViewCtx } from '@milkdown/core'
+import { commonmark } from '@milkdown/preset-commonmark'
+import { TextSelection } from '@milkdown/prose/state'
+import { getMarkdown } from '@milkdown/utils'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+
+import { gfm } from '..'
+
+// The strikethrough input rule goes through the same `markRule` helper as the
+// CommonMark marks, so it follows the same inline code boundary policy.
+
+async function createEditor() {
+  const editor = Editor.make()
+  editor.use(commonmark)
+  editor.use(gfm)
+  await editor.create()
+  return editor
+}
+
+// Moving the caret drops the stored marks, so the input rule can no longer rely
+// on them to tell whether the next character lands inside an inline code span.
+function moveCaret(editor: Editor, pos?: number) {
+  const view = editor.ctx.get(editorViewCtx)
+  const { state } = view
+  view.dispatch(
+    state.tr.setSelection(
+      TextSelection.create(state.doc, pos ?? state.selection.from)
+    )
+  )
+}
+
+describe('strikethrough input rule around inline code', () => {
+  it('keeps delimiters typed inside an existing inline code literal', async () => {
+    const user = userEvent.setup()
+    const editor = await createEditor()
+    const view = editor.ctx.get(editorViewCtx)
+
+    await user.type(view.dom, '`ab`')
+    // put the caret between `a` and `b`, inside the code span
+    view.focus()
+    moveCaret(editor, 2)
+    await user.keyboard('~~x~~')
+
+    expect(editor.action(getMarkdown())).toBe('`a~~x~~b`\n')
+  })
+
+  it('still creates a strikethrough around inline code', async () => {
+    const user = userEvent.setup()
+    const editor = await createEditor()
+
+    await user.type(editor.ctx.get(editorViewCtx).dom, '~~`code`~~')
+
+    expect(editor.action(getMarkdown())).toBe('~~`code`~~\n')
+  })
+
+  it('still creates a strikethrough around inline code when the caret moved', async () => {
+    const user = userEvent.setup()
+    const editor = await createEditor()
+    const view = editor.ctx.get(editorViewCtx)
+
+    await user.type(view.dom, '~~`code`')
+    moveCaret(editor)
+    await user.type(view.dom, '~~')
+
+    expect(editor.action(getMarkdown())).toBe('~~`code`~~\n')
+  })
+})

package/src/__test__/table-header-row.spec.ts

@@ -30,7 +30,7 @@ it('should not crash when serializing a table with empty header row', async () =
   const schema = editor.ctx.get(schemaCtx)
   const serializer = editor.ctx.get(serializerCtx)
 
-  // Create a table with an empty header row (content.size === 0)
+  // An empty header row has a content size of 0.
   const tableHeaderRow = schema.nodes.table_header_row!.create()
   const tableRow = schema.nodes.table_row!.create(null, [
     schema.nodes.table_cell!.create(
@@ -41,7 +41,6 @@ it('should not crash when serializing a table with empty header row', async () =
   const table = schema.nodes.table!.create(null, [tableHeaderRow, tableRow])
   const doc = schema.topNodeType.createAndFill(null, [table])!
 
-  // This should not throw
   expect(() => serializer(doc)).not.toThrow()
 })
 

package/src/__test__/task-list-spread-roundtrip.spec.ts

@@ -1,31 +1,7 @@
-import '@testing-library/jest-dom/vitest'
-import {
-  defaultValueCtx,
-  Editor,
-  editorViewCtx,
-  schemaCtx,
-} from '@milkdown/core'
-import { commonmark } from '@milkdown/preset-commonmark'
-import { getMarkdown } from '@milkdown/utils'
+import { editorViewCtx, schemaCtx } from '@milkdown/core'
 import { describe, expect, it } from 'vitest'
 
-import { gfm } from '..'
-
-async function createEditor(defaultValue: string) {
-  const editor = Editor.make()
-  editor.config((ctx) => {
-    ctx.set(defaultValueCtx, defaultValue)
-  })
-  editor.use(commonmark)
-  editor.use(gfm)
-  await editor.create()
-  return editor
-}
-
-async function roundTrip(markdown: string) {
-  const editor = await createEditor(markdown)
-  return editor.action(getMarkdown())
-}
+import { roundTrip, withEditor } from './test-utils'
 
 // https://github.com/Milkdown/milkdown/issues/2419
 // Tight task lists must round-trip as tight, and the checkbox syntax
@@ -59,12 +35,13 @@ describe('task list spread round-trip (#2419)', () => {
   // does not throw on documents containing task lists.
   cases.forEach((markdown) => {
     it(`should round-trip through nodeFromJSON for ${JSON.stringify(markdown)}`, async () => {
-      const editor = await createEditor(markdown)
-      const doc = editor.ctx.get(editorViewCtx).state.doc
-      const schema = editor.ctx.get(schemaCtx)
-      const json = doc.toJSON()
-      expect(() => schema.nodeFromJSON(json)).not.toThrow()
-      expect(schema.nodeFromJSON(json).eq(doc)).toBe(true)
+      await withEditor(markdown, (editor) => {
+        const doc = editor.ctx.get(editorViewCtx).state.doc
+        const schema = editor.ctx.get(schemaCtx)
+        const json = doc.toJSON()
+        expect(() => schema.nodeFromJSON(json)).not.toThrow()
+        expect(schema.nodeFromJSON(json).eq(doc)).toBe(true)
+      })
     })
   })
 })

package/src/__test__/test-utils.ts

@@ -0,0 +1,63 @@
+import { defaultValueCtx, Editor, editorViewCtx } from '@milkdown/core'
+import { commonmark } from '@milkdown/preset-commonmark'
+import { getMarkdown } from '@milkdown/utils'
+
+import { gfm } from '..'
+
+type EditorPlugins = Parameters<Editor['use']>[0]
+
+/// Run `fn` against a fresh editor loaded with `defaultValue` and destroy
+/// the editor afterwards. Uses the commonmark and gfm presets unless
+/// `plugins` are given, in which case exactly those are used.
+export async function withEditor<T>(
+  defaultValue: string,
+  fn: (editor: Editor) => T | Promise<T>,
+  ...plugins: EditorPlugins[]
+): Promise<T> {
+  const editor = Editor.make()
+  editor.config((ctx) => {
+    ctx.set(defaultValueCtx, defaultValue)
+  })
+  for (const plugin of plugins.length ? plugins : [commonmark, gfm])
+    editor.use(plugin)
+  // Outside the try: destroy() never settles on a half-created editor, so
+  // a creation failure must propagate directly instead of timing out.
+  await editor.create()
+  try {
+    return await fn(editor)
+  } finally {
+    await editor.destroy().catch(() => {})
+  }
+}
+
+export function roundTrip(markdown: string, ...plugins: EditorPlugins[]) {
+  return withEditor(
+    markdown,
+    (editor) => editor.action(getMarkdown()),
+    ...plugins
+  )
+}
+
+// Keep in sync with `isBrHtmlValue` in
+// preset-commonmark/src/__internal__/empty-line-br.ts (deliberately not
+// part of the public API).
+const BR_VALUE_PATTERN = /^<br\s*\/?\s*>$/i
+
+/// Load `markdown` and count the html atoms holding a `<br>` in the
+/// resulting document.
+export function countBrAtomsIn(markdown: string) {
+  return withEditor(markdown, (editor) =>
+    editor.action((ctx) => {
+      const doc = ctx.get(editorViewCtx).state.doc
+      let count = 0
+      doc.descendants((node) => {
+        if (
+          node.type.name === 'html' &&
+          BR_VALUE_PATTERN.test(String(node.attrs.value).trim())
+        )
+          count += 1
+      })
+      return count
+    })
+  )
+}

package/src/node/footnote/definition.ts

@@ -38,7 +38,8 @@ export const footnoteDefinitionSchema = $nodeSchema(
       return [
         'dl',
         {
-          // TODO: add a prosemirror plugin to sync label on change
+          // TODO: add a prosemirror plugin that syncs the label on a
+          // change.
           'data-label': label,
           'data-type': id,
         },

package/src/node/footnote/reference.ts

@@ -35,7 +35,8 @@ export const footnoteReferenceSchema = $nodeSchema(
       return [
         'sup',
         {
-          // TODO: add a prosemirror plugin to sync label on change
+          // TODO: add a prosemirror plugin that syncs the label on a
+          // change.
           'data-label': label,
           'data-type': id,
         },

package/src/node/table/input.ts

@@ -59,10 +59,10 @@ withMeta(insertTableInputRule, {
   group: 'Table',
 })
 
-/// A paste rule for fixing tables without header cells.
-/// This is a workaround for some editors (e.g. Google Docs) which allow creating tables without header cells,
-/// which is not supported by Markdown schema.
-/// This paste rule will promote the first data row to header, or add empty header cells as a fallback.
+/// A paste rule that fixes a table without header cells. An editor such
+/// as Google Docs creates a table without header cells, which the
+/// Markdown schema does not support. This rule promotes the first data
+/// row to a header row, or adds empty header cells as a fallback.
 export const tablePasteRule = $pasteRule((ctx) => ({
   run: (slice, _view, isPlainText) => {
     if (isPlainText) {
@@ -124,9 +124,9 @@ export const tablePasteRule = $pasteRule((ctx) => ({
       return newTable
     }
 
-    // Wrap consecutive orphaned table_row nodes (at the top level of a fragment)
-    // into a proper table. This happens when ProseMirror's parseSlice breaks
-    // a table apart (e.g. when pasting multiple tables from Google Docs).
+    // Wrap the consecutive orphaned table_row nodes at the top level of
+    // a fragment into a table. `parseSlice` breaks a table apart this
+    // way, for example on a paste of several tables from Google Docs.
     function wrapOrphanedRows(fragment: FragmentType): FragmentType {
       const rowType = tableRowSchema.type(ctx)
       const nodes: ProsemirrorNode[] = []
@@ -136,7 +136,8 @@ export const tablePasteRule = $pasteRule((ctx) => ({
       function flushPendingRows() {
         if (pendingRows.length === 0) return
 
-        // Create an empty table_header_row, then fixTable will promote the first data row
+        // An empty table_header_row lets `fixTable` promote the first
+        // data row.
         const emptyHeaderRow = tableHeaderRowSchema.type(ctx).createAndFill()!
         const table = tableSchema
           .type(ctx)

package/src/node/table/schema.ts

@@ -1,11 +1,36 @@
-import type { NodeType } from '@milkdown/prose/model'
-import type { MarkdownNode } from '@milkdown/transformer'
+import type { Node, NodeType } from '@milkdown/prose/model'
+import type { MarkdownNode, SerializerState } from '@milkdown/transformer'
 
 import { tableNodes } from '@milkdown/prose/tables'
 import { $nodeSchema } from '@milkdown/utils'
 
 import { withMeta } from '../../__internal__'
 
+/// A cell holds exactly one paragraph. See `cellContent` below. An mdast
+/// tableCell holds phrasing content directly. Serializing the inline
+/// content of the paragraph keeps the paragraph serializer and its
+/// empty-line placeholder out of a table cell. The parse runners mirror
+/// this and wrap the flat cell content in a paragraph.
+///
+/// Like `serializeText` in the paragraph runner, a trailing hardbreak is
+/// dropped: mdast renders it as a trailing space inside a cell, which
+/// the next parse trims, so keeping it makes consecutive saves diverge.
+/// Cells that are not a single paragraph (schema-invalid but loadable
+/// from JSON documents) are serialized as-is instead of losing children.
+function serializeCellContent(state: SerializerState, node: Node) {
+  const paragraph = node.content.firstChild
+  if (node.childCount !== 1 || paragraph?.type.name !== 'paragraph') {
+    state.next(node.content)
+    return
+  }
+  const last = paragraph.lastChild
+  const content =
+    last?.type.name === 'hardbreak'
+      ? paragraph.content.cut(0, paragraph.content.size - last.nodeSize)
+      : paragraph.content
+  state.next(content)
+}
+
 const originalSchema = tableNodes({
   tableGroup: 'block',
   cellContent: 'paragraph',
@@ -104,8 +129,8 @@ export const tableHeaderRowSchema = $nodeSchema('table_header_row', () => ({
   toMarkdown: {
     match: (node) => node.type.name === 'table_header_row',
     runner: (state, node) => {
-      // if the row is empty, we don't need to create a table row
-      // prevent remark from crashing
+      // An empty row needs no table row, and skipping it keeps remark
+      // from crashing.
       if (node.content.size === 0) {
         return
       }
@@ -147,8 +172,8 @@ export const tableRowSchema = $nodeSchema('table_row', () => ({
   toMarkdown: {
     match: (node) => node.type.name === 'table_row',
     runner: (state, node) => {
-      // if the row is empty, we don't need to create a table row
-      // prevent remark from crashing
+      // An empty row needs no table row, and skipping it keeps remark
+      // from crashing.
       if (node.content.size === 0) {
         return
       }
@@ -188,7 +213,9 @@ export const tableCellSchema = $nodeSchema('table_cell', () => ({
   toMarkdown: {
     match: (node) => node.type.name === 'table_cell',
     runner: (state, node) => {
-      state.openNode('tableCell').next(node.content).closeNode()
+      state.openNode('tableCell')
+      serializeCellContent(state, node)
+      state.closeNode()
     },
   },
 }))
@@ -222,7 +249,7 @@ export const tableHeaderSchema = $nodeSchema('table_header', () => ({
     match: (node) => node.type.name === 'table_header',
     runner: (state, node) => {
       state.openNode('tableCell')
-      state.next(node.content)
+      serializeCellContent(state, node)
       state.closeNode()
     },
   },

package/src/node/task-list-item.ts

@@ -5,7 +5,8 @@ import { $inputRule } from '@milkdown/utils'
 
 import { withMeta } from '../__internal__'
 
-/// This schema extends the [list item](/preset-commonmark#list-item) schema and add task list support for it.
+/// This schema extends the [list item](/preset-commonmark#list-item)
+/// schema and adds task list support to it.
 export const extendListItemSchemaForTask = listItemSchema.extendSchema(
   (prev) => {
     return (ctx) => {
@@ -109,8 +110,8 @@ withMeta(extendListItemSchemaForTask.ctx, {
   group: 'ListItem',
 })
 
-/// Input rule for wrapping a block in task list node.
-/// Users can type `[ ] ` or `[x] ` to wrap the block in task list node with checked status.
+/// An input rule that wraps a block in a task list node. Type `[ ] ` or
+/// `[x] ` to wrap the block and set its checked status.
 export const wrapInTaskListInputRule = $inputRule(() => {
   return new InputRule(
     /^\[(?<checked>\s|x)\]\s$/,

package/src/plugin/auto-insert-span-plugin.ts

@@ -3,8 +3,9 @@ import { imeSpan } from 'prosemirror-safari-ime-span'
 
 import { withMeta } from '../__internal__'
 
-/// This plugin is used to fix the bug of IME composing in table in Safari browser.
-/// original discussion in https://discuss.prosemirror.net/t/ime-composing-problems-on-td-or-th-element-in-safari-browser/4501
+/// This plugin fixes an IME composing bug in a table in the Safari browser. See
+/// the
+/// [original discussion](https://discuss.prosemirror.net/t/ime-composing-problems-on-td-or-th-element-in-safari-browser/4501).
 export const autoInsertSpanPlugin = $prose(() => imeSpan)
 
 withMeta(autoInsertSpanPlugin, {

package/src/plugin/column-resizing-plugin.ts

@@ -3,7 +3,8 @@ import { $prose } from '@milkdown/utils'
 
 import { withMeta } from '../__internal__'
 
-/// This plugin is wrapping the `columnResizing` plugin from [prosemirror-tables](https://github.com/ProseMirror/prosemirror-tables).
+/// This plugin wraps the `columnResizing` plugin from
+/// [prosemirror-tables](https://github.com/ProseMirror/prosemirror-tables).
 export const columnResizingPlugin = $prose(() => columnResizing({}))
 
 withMeta(columnResizingPlugin, {

package/src/plugin/keep-table-align-plugin.ts

@@ -47,7 +47,7 @@ export const keepTableAlignPlugin = $prose(() => {
         const tableRow = $pos.node($pos.depth)
         const table = $pos.node($pos.depth - 1)
         const tableHeaderRow = table.firstChild
-        // TODO: maybe consider add a header row
+        // TODO: add a header row when the table has none.
         if (!tableHeaderRow) return
 
         const index = getChildIndex(node, tableRow)

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

@@ -6,7 +6,8 @@ import remarkGFM from 'remark-gfm'
 
 import { withMeta } from '../__internal__'
 
-/// This plugin is wrapping the [remark-gfm](https://github.com/remarkjs/remark-gfm).
+/// This plugin wraps
+/// [remark-gfm](https://github.com/remarkjs/remark-gfm).
 export const remarkGFMPlugin: $Remark<'remarkGFM', Options | null | undefined> =
   $remark('remarkGFM', () => remarkGFM)
 

package/src/plugin/table-editing-plugin.ts

@@ -3,7 +3,8 @@ import { $prose } from '@milkdown/utils'
 
 import { withMeta } from '../__internal__'
 
-/// This plugin is wrapping the `tableEditing` plugin from [prosemirror-tables](https://github.com/ProseMirror/prosemirror-tables).
+/// This plugin wraps the `tableEditing` plugin from
+/// [prosemirror-tables](https://github.com/ProseMirror/prosemirror-tables).
 export const tableEditingPlugin = $prose(() =>
   tableEditing({ allowTableNodeSelection: true })
 )