@milkdown/preset-gfm 7.21.2 → 7.22.0

package/src/__test__/keep-table-align.spec.ts

@@ -0,0 +1,131 @@
+import '@testing-library/jest-dom/vitest'
+import { defaultValueCtx, Editor, editorViewCtx, rootCtx } from '@milkdown/core'
+import { commonmark } from '@milkdown/preset-commonmark'
+import { expect, it } from 'vitest'
+
+import { gfm } from '..'
+
+const TABLE = '| aa | bb |\n| --- | --- |\n| cc | dd |\n'
+
+async function createEditor(markdown: string) {
+  const root = document.createElement('div')
+  document.body.appendChild(root)
+  const editor = Editor.make()
+  editor.config((ctx) => {
+    ctx.set(rootCtx, root)
+    ctx.set(defaultValueCtx, markdown)
+  })
+  editor.use(commonmark)
+  editor.use(gfm)
+  await editor.create()
+  return editor
+}
+
+const view = (editor: Editor) => editor.ctx.get(editorViewCtx)
+
+function posOf(editor: Editor, typeName: string, nth = 0) {
+  let seen = 0
+  let pos = -1
+  view(editor).state.doc.descendants((node, p) => {
+    if (node.type.name === typeName && seen++ === nth && pos < 0) pos = p
+    return true
+  })
+  return pos
+}
+
+// Every `alignment` attr in column `col`, header row first.
+function columnAlignments(editor: Editor, col: number) {
+  const out: (string | null)[] = []
+  view(editor).state.doc.descendants((node) => {
+    if (/^table.*row$/.test(node.type.name))
+      out.push(node.child(col)?.attrs.alignment ?? null)
+    return true
+  })
+  return out
+}
+
+it('should propagate a header cell alignment to the body cells below it', async () => {
+  const editor = await createEditor(TABLE)
+  const headerPos = posOf(editor, 'table_header')
+  const header = view(editor).state.doc.nodeAt(headerPos)!
+
+  view(editor).dispatch(
+    view(editor).state.tr.setNodeMarkup(headerPos, undefined, {
+      ...header.attrs,
+      alignment: 'center',
+    })
+  )
+
+  expect(columnAlignments(editor, 0)).toEqual(['center', 'center'])
+})
+
+it('should propagate down the header cell own column, not the first one', async () => {
+  const editor = await createEditor(
+    '| aa | bb | cc |\n| --- | --- | --- |\n| dd | ee | ff |\n'
+  )
+  const headerPos = posOf(editor, 'table_header', 1)
+  const header = view(editor).state.doc.nodeAt(headerPos)!
+
+  view(editor).dispatch(
+    view(editor).state.tr.setNodeMarkup(headerPos, undefined, {
+      ...header.attrs,
+      alignment: 'right',
+    })
+  )
+
+  expect(columnAlignments(editor, 1)).toEqual(['right', 'right'])
+  expect(columnAlignments(editor, 0)).toEqual([null, null])
+  expect(columnAlignments(editor, 2)).toEqual([null, null])
+})
+
+it('should still propagate when the same transaction also inserts text', async () => {
+  // "Some text changed" must not be read as "nothing structural happened".
+  const editor = await createEditor(TABLE)
+  const headerPos = posOf(editor, 'table_header')
+  const bodyPos = posOf(editor, 'table_cell')
+  const header = view(editor).state.doc.nodeAt(headerPos)!
+
+  view(editor).dispatch(
+    view(editor)
+      .state.tr.insertText('zz', bodyPos + 2)
+      .setNodeMarkup(headerPos, undefined, {
+        ...header.attrs,
+        alignment: 'right',
+      })
+  )
+
+  expect(columnAlignments(editor, 0)).toEqual(['right', 'right'])
+})
+
+it('should not append a transaction when no cell needs re-aligning', async () => {
+  const editor = await createEditor(`${TABLE}\npara\n`)
+  const state = view(editor).state
+  const tr = state.tr.insertText('x', posOf(editor, 'table_cell') + 2)
+
+  expect(state.applyTransaction(tr).transactions).toHaveLength(1)
+})
+
+it('should not append a transaction for a structural change to a consistent table', async () => {
+  // A structural change reaches the walk, which then finds nothing to realign.
+  const editor = await createEditor(
+    '| aa | bb |\n| :---: | ---: |\n| cc | dd |\n\npara\n'
+  )
+  const state = view(editor).state
+  const tr = state.tr.replaceWith(
+    state.doc.content.size,
+    state.doc.content.size,
+    state.schema.nodes.paragraph!.create()
+  )
+
+  expect(tr.docChanged).toBe(true)
+  expect(state.applyTransaction(tr).transactions).toHaveLength(1)
+})
+
+it('should leave a parsed table internally consistent', async () => {
+  const editor = await createEditor(
+    '| aa | bb |\n| :--- | ---: |\n| cc | dd |\n'
+  )
+
+  expect(columnAlignments(editor, 0)).toEqual(['left', 'left'])
+  expect(columnAlignments(editor, 1)).toEqual(['right', 'right'])
+})

package/src/__test__/paste-special-char.spec.ts

@@ -0,0 +1,121 @@
+import '@testing-library/jest-dom/vitest'
+import { Editor, editorViewCtx } from '@milkdown/core'
+import { commonmark } from '@milkdown/preset-commonmark'
+import { getMarkdown } from '@milkdown/utils'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+
+import { gfm } from '..'
+
+// https://github.com/Milkdown/milkdown/issues/2400
+// The strikethrough input rule shares the same flaw as the underscore-emphasis
+// rule: its regex was not anchored to the end of the input (`$`), so pasting
+// text that ends with `~` twice and then pressing Space/Enter matched a `~...~`
+// span across the two pastes and corrupted the document.
+
+const PASTED = 'qa34 %~'
+
+async function createEditor() {
+  const editor = Editor.make()
+  editor.use(commonmark)
+  editor.use(gfm)
+  await editor.create()
+  return editor
+}
+
+function hasStrikethrough(editor: Editor) {
+  const { doc } = editor.ctx.get(editorViewCtx).state
+  let found = false
+  doc.descendants((node) => {
+    if (node.marks.some((mark) => mark.type.name === 'strike_through'))
+      found = true
+  })
+  return found
+}
+
+function paste(editor: Editor, text: string) {
+  const view = editor.ctx.get(editorViewCtx)
+  view.dispatch(view.state.tr.insertText(text))
+}
+
+describe('pasting special characters — strikethrough (#2400)', () => {
+  it('does not delete characters when pressing Space after two pastes', async () => {
+    const editor = await createEditor()
+    const view = editor.ctx.get(editorViewCtx)
+
+    paste(editor, PASTED)
+    paste(editor, PASTED)
+
+    const before = view.state.doc.textContent
+    const end = view.state.selection.from
+
+    // The trailing `deflt` callback is required by the prop type but unused
+    // by the input-rule plugin.
+    view.someProp('handleTextInput', (f) =>
+      f(view, end, end, ' ', () => view.state.tr)
+    )
+
+    expect(view.state.doc.textContent).toBe(before)
+    expect(hasStrikethrough(editor)).toBe(false)
+  })
+
+  it('does not delete characters when pressing Enter after two pastes', async () => {
+    const editor = await createEditor()
+    const view = editor.ctx.get(editorViewCtx)
+
+    paste(editor, PASTED)
+    paste(editor, PASTED)
+
+    const before = view.state.doc.textContent
+
+    const event = new KeyboardEvent('keydown', { key: 'Enter' })
+    view.someProp('handleKeyDown', (f) => f(view, event))
+
+    expect(view.state.doc.textContent).toBe(before)
+    expect(hasStrikethrough(editor)).toBe(false)
+  })
+
+  it('still turns ~~word~~ into strikethrough when the closing ~ is typed', async () => {
+    const editor = await createEditor()
+    const view = editor.ctx.get(editorViewCtx)
+
+    paste(editor, '~~word~')
+
+    const end = view.state.selection.from
+    view.someProp('handleTextInput', (f) =>
+      f(view, end, end, '~', () => view.state.tr)
+    )
+
+    expect(view.state.doc.textContent).toBe('word')
+    expect(hasStrikethrough(editor)).toBe(true)
+  })
+})
+
+// The `$` anchor added to the strikethrough rule must not regress typing the
+// markdown syntax by hand: these mirror the input-rule e2e tests.
+describe('typing strikethrough still works', () => {
+  it('creates strikethrough when typing ~~on the grass~~', async () => {
+    const user = userEvent.setup()
+    const editor = await createEditor()
+    const view = editor.ctx.get(editorViewCtx)
+
+    await user.type(view.dom, 'The lunatic is ~~on the grass~~')
+
+    expect(hasStrikethrough(editor)).toBe(true)
+  })
+
+  it('does not create strikethrough for intra-word tildes', async () => {
+    const user = userEvent.setup()
+    const editor = await createEditor()
+
+    await user.type(
+      editor.ctx.get(editorViewCtx).dom,
+      'C:/the/~lunatic~/is/on/the/grass'
+    )
+
+    expect(hasStrikethrough(editor)).toBe(false)
+    expect(editor.action(getMarkdown())).toBe(
+      'C:/the/\\~lunatic\\~/is/on/the/grass\n'
+    )
+  })
+})

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

@@ -0,0 +1,70 @@
+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 { 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())
+}
+
+// https://github.com/Milkdown/milkdown/issues/2419
+// Tight task lists must round-trip as tight, and the checkbox syntax
+// (`- [ ]` / `- [x]`) must survive. The list_item toMarkdown fix must be
+// applied *in place*: preset-gfm delegates unchecked items to the base
+// list_item runner, so replacing the whole runner would drop checkboxes.
+describe('task list spread round-trip (#2419)', () => {
+  // The serializer normalizes bullet markers to `*`, so the inputs use `*`
+  // to keep the assertions about spread (blank lines) and the surviving
+  // checkbox rather than the marker character.
+  const cases = [
+    '* [ ] a\n* [x] b\n',
+    '* [ ] a\n  * [ ] b\n* [x] c\n',
+    '* [ ] a\n\n* [x] b\n',
+  ]
+
+  cases.forEach((markdown) => {
+    it(`should round-trip ${JSON.stringify(markdown)}`, async () => {
+      const output = await roundTrip(markdown)
+      expect(output).toBe(markdown)
+    })
+  })
+
+  it('should keep the checkbox on a tight unchecked task item', async () => {
+    const output = await roundTrip('* [ ] todo\n')
+    expect(output).toBe('* [ ] todo\n')
+    expect(output).not.toBe('* todo\n')
+  })
+
+  // The `spread` attribute must be a real boolean so schema.nodeFromJSON()
+  // 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)
+    })
+  })
+})

package/src/mark/strike-through.ts

@@ -71,7 +71,7 @@ withMeta(toggleStrikethroughCommand, {
 /// Input rule to create the strikethrough mark.
 export const strikethroughInputRule = $inputRule((ctx) => {
   return markRule(
-    /(?<![\w:/])(~{1,2})(.+?)\1(?!\w|\/)/,
+    /(?<![\w:/])(~{1,2})(.+?)\1(?!\w|\/)$/,
     strikethroughSchema.type(ctx)
   )
 })

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

@@ -28,7 +28,7 @@ export const extendListItemSchemaForTask = listItemSchema.extendSchema(
               return {
                 label: dom.dataset.label,
                 listType: dom.dataset.listType,
-                spread: dom.dataset.spread,
+                spread: dom.dataset.spread === 'true',
                 checked: dom.dataset.checked
                   ? dom.dataset.checked === 'true'
                   : null,
@@ -64,7 +64,7 @@ export const extendListItemSchemaForTask = listItemSchema.extendSchema(
             const label = node.label != null ? `${node.label}.` : '•'
             const checked = node.checked != null ? Boolean(node.checked) : null
             const listType = node.label != null ? 'ordered' : 'bullet'
-            const spread = node.spread != null ? `${node.spread}` : 'true'
+            const spread = node.spread ?? true
 
             state.openNode(type, { label, listType, spread, checked })
             state.next(node.children)
@@ -81,7 +81,7 @@ export const extendListItemSchemaForTask = listItemSchema.extendSchema(
 
             const label = node.attrs.label
             const listType = node.attrs.listType
-            const spread = node.attrs.spread === 'true'
+            const spread = node.attrs.spread
             const checked = node.attrs.checked
 
             state.openNode('listItem', undefined, {

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

@@ -16,14 +16,31 @@ function getChildIndex(node: Node, parent: Node) {
   return index
 }
 
+// The span that differs between the two docs, in `next` coordinates, or `null`
+// when they are value-identical. Both scans compare children by reference
+// before looking inside them.
+function changedRange(prev: Node, next: Node) {
+  const from = prev.content.findDiffStart(next.content)
+  if (from == null) return null
+
+  const diff = prev.content.findDiffEnd(next.content)
+  if (!diff) return null
+
+  // Repeated content ("aa" -> "aaa") lets the end scan overrun the start.
+  return { from, to: Math.max(diff.b, from) }
+}
+
 export const keepTableAlignPlugin = $prose(() => {
   return new Plugin({
     key: pluginKey,
     appendTransaction: (_tr, oldState, state) => {
+      if (oldState.doc === state.doc) return
+
+      const range = changedRange(oldState.doc, state.doc)
+      if (!range) return
+
       let tr: Transaction | undefined
       const check = (node: Node, pos: number) => {
-        if (!tr) tr = state.tr
-
         if (node.type.name !== 'table_cell') return
 
         const $pos = state.doc.resolve(pos)
@@ -40,9 +57,22 @@ export const keepTableAlignPlugin = $prose(() => {
         const currentAlign = node.attrs.alignment
         if (align === currentAlign) return
 
+        // Creating `tr` any earlier appends an empty transaction to every
+        // document change.
+        if (!tr) tr = state.tr
         tr.setNodeMarkup(pos, undefined, { ...node.attrs, alignment: align })
       }
-      if (oldState.doc !== state.doc) state.doc.descendants(check)
+
+      // `nodesBetween` reports the range's ancestors, so an edit deep inside a
+      // cell still reaches its table. Each table it finds is checked in full,
+      // because a header cell reaches body cells outside the range.
+      state.doc.nodesBetween(range.from, range.to, (node, pos) => {
+        if (node.type.name !== 'table') return true
+
+        state.doc.nodesBetween(pos, pos + node.nodeSize, check)
+        // Tables do not nest.
+        return false
+      })
 
       return tr
     },