@puredesktop/platform-editor 1.0.0-beta.1 → 2.1.0

package/src/utils/markdownUtils.ts

@@ -1,331 +1,331 @@
-import { marked } from 'marked'
-import TurndownService from 'turndown'
-
-const turndownService = new TurndownService({
-  headingStyle: 'atx',
-  codeBlockStyle: 'fenced',
-  emDelimiter: '*',
-  strongDelimiter: '**',
-  bulletListMarker: '-',
-  hr: '---',
-})
-
-// Clean up whitespace in paragraphs and divs
-turndownService.addRule('cleanWhitespace', {
-  filter: (node): boolean => node.nodeName === 'P' || node.nodeName === 'DIV',
-  replacement: (content: string): string => `${content.trim()}\n\n`,
-})
-
-turndownService.addRule('taskCheckbox', {
-  filter: (node): boolean =>
-    node.nodeName === 'INPUT' && (node as HTMLInputElement).type === 'checkbox',
-  replacement: (_content: string, node): string =>
-    (node as HTMLInputElement).checked ? '[x] ' : '[ ] ',
-})
-
-turndownService.addRule('taskItem', {
-  filter: (node): boolean =>
-    node.nodeName === 'LI' &&
-    (node as HTMLElement).dataset?.type === 'taskItem',
-  replacement: (content: string, node): string => {
-    const element = node as HTMLElement
-    const checked =
-      element.getAttribute('data-checked') === 'true' ||
-      (
-        element.querySelector(
-          'input[type="checkbox"]',
-        ) as HTMLInputElement | null
-      )?.checked === true
-    const prefix = checked ? '- [x] ' : '- [ ] '
-    const body = content.replace(/^\s*\[(x| )\]\s*/i, '').trim()
-    if (!body) return `${prefix}\n`
-
-    if (looksLikeMarkdownTable(body)) {
-      return `${prefix}\n${indentMarkdown(body)}\n`
-    }
-
-    const [firstBlock, ...restBlocks] = body.split(/\n{2,}/)
-    const head = `${prefix}${firstBlock.trim()}`
-    if (restBlocks.length === 0) return `${head}\n`
-    return `${head}\n\n${indentMarkdown(restBlocks.join('\n\n').trim())}\n`
-  },
-})
-
-turndownService.addRule('table', {
-  filter: (node): boolean => node.nodeName === 'TABLE',
-  replacement: (_content: string, node): string => {
-    const table = node as HTMLTableElement
-    const rows = Array.from(table.querySelectorAll('tr')).map(row =>
-      Array.from(row.children).map(cell =>
-        normalizeCell(cell.textContent ?? ''),
-      ),
-    )
-    if (rows.length === 0) return ''
-
-    const header = rows[0]
-    const body = rows.slice(1)
-    const separator = header.map(() => '---')
-    const lines = [
-      `| ${header.join(' | ')} |`,
-      `| ${separator.join(' | ')} |`,
-      ...body.map(row => `| ${padRow(row, header.length).join(' | ')} |`),
-    ]
-
-    return `\n\n${lines.join('\n')}\n\n`
-  },
-})
-
-// Index markers (#172): <a class="ix" data-term="X">term</a> serializes
-// back as raw HTML so the round-trip is lossless. CommonMark passes
-// inline HTML through unchanged.
-turndownService.keep(
-  node =>
-    node.nodeName === 'A' &&
-    (node as HTMLElement).classList?.contains('ix') === true,
-)
-
-turndownService.keep(
-  node =>
-    node.nodeName === 'SPAN' &&
-    (node as HTMLElement).hasAttribute?.('data-comment-id') === true,
-)
-
-turndownService.keep(node => node.nodeName === 'SUB' || node.nodeName === 'SUP')
-
-turndownService.addRule('inlineMath', {
-  filter: (node): boolean =>
-    node.nodeName === 'SPAN' &&
-    (node as HTMLElement).dataset?.type === 'inline-math',
-  replacement: (_content: string, node): string => {
-    const latex = (node as HTMLElement).getAttribute('data-latex') ?? ''
-    return latex ? `$${latex}$` : ''
-  },
-})
-
-turndownService.addRule('blockMath', {
-  filter: (node): boolean =>
-    node.nodeName === 'DIV' &&
-    (node as HTMLElement).dataset?.type === 'block-math',
-  replacement: (_content: string, node): string => {
-    const latex = (node as HTMLElement).getAttribute('data-latex') ?? ''
-    return latex ? `\n\n$$\n${latex}\n$$\n\n` : ''
-  },
-})
-
-// <figure><img/><figcaption>caption</figcaption></figure> → ![caption](src)
-// The render pipeline already wraps caption-bearing markdown images in
-// a real <figure>, so this lossy serialization round-trips cleanly for
-// PDF output. The alt attribute is used as the markdown alt text only
-// when the figure has no caption.
-turndownService.addRule('figure', {
-  filter: (node): boolean => node.nodeName === 'FIGURE',
-  replacement: (_content: string, node): string => {
-    const el = node as HTMLElement
-    const img = el.querySelector('img')
-    const captionEl = el.querySelector('figcaption')
-    if (!img) return ''
-    const src = img.getAttribute('src') ?? ''
-    const alt = img.getAttribute('alt') ?? ''
-    const caption = (captionEl?.textContent ?? '').trim()
-    const text = caption || alt
-    return `\n\n![${text}](${src})\n\n`
-  },
-})
-
-/** Convert markdown string to HTML. Returns empty string for falsy input. */
-export const toHtml = (text: string): string =>
-  text ? renderMarkdownWithTaskLists(text) : ''
-
-/** Convert HTML string to markdown. Returns empty string for falsy input. */
-export const toMd = (html: string): string =>
-  html ? normalizeMarkdown(turndownService.turndown(html)) : ''
-
-/** Batch-convert [key, markdown] entries to [key, html]. */
-export const toHtmlEntries = (
-  entries: Array<[string, string]>,
-): Array<[string, string]> =>
-  entries.map(([key, value]) => [key, toHtml(value)])
-
-/** Batch-convert [key, html] entries to [key, markdown]. */
-export const toMdEntries = (
-  entries: Array<[string, string]>,
-  keyTransform?: (key: string) => string,
-): Array<[string, string]> =>
-  entries.map(([key, value]) => [
-    keyTransform ? keyTransform(key) : key,
-    toMd(value),
-  ])
-
-function normalizeCell(value: string): string {
-  return value.replace(/\|/g, '\\|').replace(/\s+/g, ' ').trim()
-}
-
-function padRow(row: string[], length: number): string[] {
-  if (row.length >= length) return row
-  return [...row, ...Array.from({ length: length - row.length }, () => '')]
-}
-
-function normalizeMarkdown(markdown: string): string {
-  return markdown
-    .replace(/^- {2,}/gm, '- ')
-    .replace(/^(\s*[-*])\s+\[(x| )\]\s+/gim, '$1 [$2] ')
-    .replace(/\n{3,}/g, '\n\n')
-    .trimEnd()
-}
-
-function renderMarkdownWithTaskLists(markdown: string): string {
-  const normalized = markdown.replace(/\r\n?/g, '\n')
-  const lines = normalized.split('\n')
-  const parts: string[] = []
-  let buffer: string[] = []
-  let index = 0
-
-  const flushBuffer = (): void => {
-    if (buffer.length === 0) return
-    const chunk = buffer.join('\n')
-    if (chunk.trim()) {
-      parts.push(marked.parse(chunk) as string)
-    }
-    buffer = []
-  }
-
-  while (index < lines.length) {
-    const taskMatch = matchTaskLine(lines[index])
-    if (!taskMatch || taskMatch.indent !== 0) {
-      buffer.push(lines[index])
-      index += 1
-      continue
-    }
-
-    flushBuffer()
-    const rendered = renderTaskListBlock(lines, index, taskMatch.indent)
-    parts.push(rendered.html)
-    index = rendered.nextIndex
-  }
-
-  flushBuffer()
-  return parts.join('')
-}
-
-function renderTaskListBlock(
-  lines: string[],
-  startIndex: number,
-  baseIndent: number,
-): { html: string; nextIndex: number } {
-  const items: string[] = []
-  let index = startIndex
-
-  while (index < lines.length) {
-    while (
-      index < lines.length &&
-      lines[index].trim() === '' &&
-      matchTaskLine(lines[index + 1] ?? '')?.indent === baseIndent
-    ) {
-      index += 1
-    }
-
-    const taskMatch = matchTaskLine(lines[index] ?? '')
-    if (!taskMatch || taskMatch.indent !== baseIndent) break
-
-    const nestedLines: string[] = []
-    index += 1
-
-    while (index < lines.length) {
-      const line = lines[index]
-      const nextTask = matchTaskLine(line)
-      if (nextTask && nextTask.indent === baseIndent) break
-
-      if (line.trim() === '') {
-        nestedLines.push('')
-        index += 1
-        continue
-      }
-
-      const indent = countIndent(line)
-      if (indent <= baseIndent) break
-
-      nestedLines.push(stripNestedIndent(line, baseIndent))
-      index += 1
-    }
-
-    const itemBody = buildTaskItemBody(taskMatch.text, nestedLines)
-    items.push(
-      `<li data-type="taskItem" data-checked="${
-        taskMatch.checked
-      }"><label><input type="checkbox"${
-        taskMatch.checked ? ' checked="checked"' : ''
-      }><span></span></label><div>${itemBody}</div></li>`,
-    )
-  }
-
-  return {
-    html: `<ul data-type="taskList">${items.join('')}</ul>`,
-    nextIndex: index,
-  }
-}
-
-function buildTaskItemBody(mainText: string, nestedLines: string[]): string {
-  const nestedMarkdown = nestedLines.join('\n').trim()
-  const tableCandidate = [mainText, nestedMarkdown]
-    .filter(Boolean)
-    .join('\n')
-    .trim()
-
-  if (looksLikeMarkdownTable(tableCandidate)) {
-    return (marked.parse(tableCandidate) as string).trim()
-  }
-
-  const body: string[] = []
-  if (mainText.trim()) {
-    body.push(`<p>${marked.parseInline(mainText.trim()) as string}</p>`)
-  }
-  if (nestedMarkdown) {
-    body.push(renderMarkdownWithTaskLists(nestedMarkdown).trim())
-  }
-  if (body.length === 0) {
-    body.push('<p></p>')
-  }
-  return body.join('')
-}
-
-function looksLikeMarkdownTable(markdown: string): boolean {
-  const lines = markdown
-    .split('\n')
-    .map(line => line.trim())
-    .filter(Boolean)
-  if (lines.length < 2) return false
-  return (
-    /^\|.*\|$/.test(lines[0]) &&
-    /^\|?(?:\s*:?-+:?\s*\|)+\s*:?-+:?\s*\|?$/.test(lines[1])
-  )
-}
-
-function matchTaskLine(
-  line: string,
-): { indent: number; checked: boolean; text: string } | null {
-  const match = line.match(/^(\s*)[-+*]\s+\[([ xX])\]\s*(.*)$/)
-  if (!match) return null
-  return {
-    indent: match[1].length,
-    checked: match[2].toLowerCase() === 'x',
-    text: match[3] ?? '',
-  }
-}
-
-function countIndent(line: string): number {
-  const match = line.match(/^(\s*)/)
-  return match?.[1].length ?? 0
-}
-
-function stripNestedIndent(line: string, baseIndent: number): string {
-  const preferred = ' '.repeat(baseIndent + 4)
-  if (line.startsWith(preferred)) return line.slice(preferred.length)
-  return line.slice(Math.min(line.length, baseIndent + 2))
-}
-
-function indentMarkdown(markdown: string): string {
-  return markdown
-    .split('\n')
-    .map(line => (line.trim() ? `    ${line}` : ''))
-    .join('\n')
-}
+import { marked } from 'marked'
+import TurndownService from 'turndown'
+
+const turndownService = new TurndownService({
+  headingStyle: 'atx',
+  codeBlockStyle: 'fenced',
+  emDelimiter: '*',
+  strongDelimiter: '**',
+  bulletListMarker: '-',
+  hr: '---',
+})
+
+// Clean up whitespace in paragraphs and divs
+turndownService.addRule('cleanWhitespace', {
+  filter: (node): boolean => node.nodeName === 'P' || node.nodeName === 'DIV',
+  replacement: (content: string): string => `${content.trim()}\n\n`,
+})
+
+turndownService.addRule('taskCheckbox', {
+  filter: (node): boolean =>
+    node.nodeName === 'INPUT' && (node as HTMLInputElement).type === 'checkbox',
+  replacement: (_content: string, node): string =>
+    (node as HTMLInputElement).checked ? '[x] ' : '[ ] ',
+})
+
+turndownService.addRule('taskItem', {
+  filter: (node): boolean =>
+    node.nodeName === 'LI' &&
+    (node as HTMLElement).dataset?.type === 'taskItem',
+  replacement: (content: string, node): string => {
+    const element = node as HTMLElement
+    const checked =
+      element.getAttribute('data-checked') === 'true' ||
+      (
+        element.querySelector(
+          'input[type="checkbox"]',
+        ) as HTMLInputElement | null
+      )?.checked === true
+    const prefix = checked ? '- [x] ' : '- [ ] '
+    const body = content.replace(/^\s*\[(x| )\]\s*/i, '').trim()
+    if (!body) return `${prefix}\n`
+
+    if (looksLikeMarkdownTable(body)) {
+      return `${prefix}\n${indentMarkdown(body)}\n`
+    }
+
+    const [firstBlock, ...restBlocks] = body.split(/\n{2,}/)
+    const head = `${prefix}${firstBlock.trim()}`
+    if (restBlocks.length === 0) return `${head}\n`
+    return `${head}\n\n${indentMarkdown(restBlocks.join('\n\n').trim())}\n`
+  },
+})
+
+turndownService.addRule('table', {
+  filter: (node): boolean => node.nodeName === 'TABLE',
+  replacement: (_content: string, node): string => {
+    const table = node as HTMLTableElement
+    const rows = Array.from(table.querySelectorAll('tr')).map(row =>
+      Array.from(row.children).map(cell =>
+        normalizeCell(cell.textContent ?? ''),
+      ),
+    )
+    if (rows.length === 0) return ''
+
+    const header = rows[0]
+    const body = rows.slice(1)
+    const separator = header.map(() => '---')
+    const lines = [
+      `| ${header.join(' | ')} |`,
+      `| ${separator.join(' | ')} |`,
+      ...body.map(row => `| ${padRow(row, header.length).join(' | ')} |`),
+    ]
+
+    return `\n\n${lines.join('\n')}\n\n`
+  },
+})
+
+// Index markers (#172): <a class="ix" data-term="X">term</a> serializes
+// back as raw HTML so the round-trip is lossless. CommonMark passes
+// inline HTML through unchanged.
+turndownService.keep(
+  node =>
+    node.nodeName === 'A' &&
+    (node as HTMLElement).classList?.contains('ix') === true,
+)
+
+turndownService.keep(
+  node =>
+    node.nodeName === 'SPAN' &&
+    (node as HTMLElement).hasAttribute?.('data-comment-id') === true,
+)
+
+turndownService.keep(node => node.nodeName === 'SUB' || node.nodeName === 'SUP')
+
+turndownService.addRule('inlineMath', {
+  filter: (node): boolean =>
+    node.nodeName === 'SPAN' &&
+    (node as HTMLElement).dataset?.type === 'inline-math',
+  replacement: (_content: string, node): string => {
+    const latex = (node as HTMLElement).getAttribute('data-latex') ?? ''
+    return latex ? `$${latex}$` : ''
+  },
+})
+
+turndownService.addRule('blockMath', {
+  filter: (node): boolean =>
+    node.nodeName === 'DIV' &&
+    (node as HTMLElement).dataset?.type === 'block-math',
+  replacement: (_content: string, node): string => {
+    const latex = (node as HTMLElement).getAttribute('data-latex') ?? ''
+    return latex ? `\n\n$$\n${latex}\n$$\n\n` : ''
+  },
+})
+
+// <figure><img/><figcaption>caption</figcaption></figure> → ![caption](src)
+// The render pipeline already wraps caption-bearing markdown images in
+// a real <figure>, so this lossy serialization round-trips cleanly for
+// PDF output. The alt attribute is used as the markdown alt text only
+// when the figure has no caption.
+turndownService.addRule('figure', {
+  filter: (node): boolean => node.nodeName === 'FIGURE',
+  replacement: (_content: string, node): string => {
+    const el = node as HTMLElement
+    const img = el.querySelector('img')
+    const captionEl = el.querySelector('figcaption')
+    if (!img) return ''
+    const src = img.getAttribute('src') ?? ''
+    const alt = img.getAttribute('alt') ?? ''
+    const caption = (captionEl?.textContent ?? '').trim()
+    const text = caption || alt
+    return `\n\n![${text}](${src})\n\n`
+  },
+})
+
+/** Convert markdown string to HTML. Returns empty string for falsy input. */
+export const toHtml = (text: string): string =>
+  text ? renderMarkdownWithTaskLists(text) : ''
+
+/** Convert HTML string to markdown. Returns empty string for falsy input. */
+export const toMd = (html: string): string =>
+  html ? normalizeMarkdown(turndownService.turndown(html)) : ''
+
+/** Batch-convert [key, markdown] entries to [key, html]. */
+export const toHtmlEntries = (
+  entries: Array<[string, string]>,
+): Array<[string, string]> =>
+  entries.map(([key, value]) => [key, toHtml(value)])
+
+/** Batch-convert [key, html] entries to [key, markdown]. */
+export const toMdEntries = (
+  entries: Array<[string, string]>,
+  keyTransform?: (key: string) => string,
+): Array<[string, string]> =>
+  entries.map(([key, value]) => [
+    keyTransform ? keyTransform(key) : key,
+    toMd(value),
+  ])
+
+function normalizeCell(value: string): string {
+  return value.replace(/\|/g, '\\|').replace(/\s+/g, ' ').trim()
+}
+
+function padRow(row: string[], length: number): string[] {
+  if (row.length >= length) return row
+  return [...row, ...Array.from({ length: length - row.length }, () => '')]
+}
+
+function normalizeMarkdown(markdown: string): string {
+  return markdown
+    .replace(/^- {2,}/gm, '- ')
+    .replace(/^(\s*[-*])\s+\[(x| )\]\s+/gim, '$1 [$2] ')
+    .replace(/\n{3,}/g, '\n\n')
+    .trimEnd()
+}
+
+function renderMarkdownWithTaskLists(markdown: string): string {
+  const normalized = markdown.replace(/\r\n?/g, '\n')
+  const lines = normalized.split('\n')
+  const parts: string[] = []
+  let buffer: string[] = []
+  let index = 0
+
+  const flushBuffer = (): void => {
+    if (buffer.length === 0) return
+    const chunk = buffer.join('\n')
+    if (chunk.trim()) {
+      parts.push(marked.parse(chunk) as string)
+    }
+    buffer = []
+  }
+
+  while (index < lines.length) {
+    const taskMatch = matchTaskLine(lines[index])
+    if (!taskMatch || taskMatch.indent !== 0) {
+      buffer.push(lines[index])
+      index += 1
+      continue
+    }
+
+    flushBuffer()
+    const rendered = renderTaskListBlock(lines, index, taskMatch.indent)
+    parts.push(rendered.html)
+    index = rendered.nextIndex
+  }
+
+  flushBuffer()
+  return parts.join('')
+}
+
+function renderTaskListBlock(
+  lines: string[],
+  startIndex: number,
+  baseIndent: number,
+): { html: string; nextIndex: number } {
+  const items: string[] = []
+  let index = startIndex
+
+  while (index < lines.length) {
+    while (
+      index < lines.length &&
+      lines[index].trim() === '' &&
+      matchTaskLine(lines[index + 1] ?? '')?.indent === baseIndent
+    ) {
+      index += 1
+    }
+
+    const taskMatch = matchTaskLine(lines[index] ?? '')
+    if (!taskMatch || taskMatch.indent !== baseIndent) break
+
+    const nestedLines: string[] = []
+    index += 1
+
+    while (index < lines.length) {
+      const line = lines[index]
+      const nextTask = matchTaskLine(line)
+      if (nextTask && nextTask.indent === baseIndent) break
+
+      if (line.trim() === '') {
+        nestedLines.push('')
+        index += 1
+        continue
+      }
+
+      const indent = countIndent(line)
+      if (indent <= baseIndent) break
+
+      nestedLines.push(stripNestedIndent(line, baseIndent))
+      index += 1
+    }
+
+    const itemBody = buildTaskItemBody(taskMatch.text, nestedLines)
+    items.push(
+      `<li data-type="taskItem" data-checked="${
+        taskMatch.checked
+      }"><label><input type="checkbox"${
+        taskMatch.checked ? ' checked="checked"' : ''
+      }><span></span></label><div>${itemBody}</div></li>`,
+    )
+  }
+
+  return {
+    html: `<ul data-type="taskList">${items.join('')}</ul>`,
+    nextIndex: index,
+  }
+}
+
+function buildTaskItemBody(mainText: string, nestedLines: string[]): string {
+  const nestedMarkdown = nestedLines.join('\n').trim()
+  const tableCandidate = [mainText, nestedMarkdown]
+    .filter(Boolean)
+    .join('\n')
+    .trim()
+
+  if (looksLikeMarkdownTable(tableCandidate)) {
+    return (marked.parse(tableCandidate) as string).trim()
+  }
+
+  const body: string[] = []
+  if (mainText.trim()) {
+    body.push(`<p>${marked.parseInline(mainText.trim()) as string}</p>`)
+  }
+  if (nestedMarkdown) {
+    body.push(renderMarkdownWithTaskLists(nestedMarkdown).trim())
+  }
+  if (body.length === 0) {
+    body.push('<p></p>')
+  }
+  return body.join('')
+}
+
+function looksLikeMarkdownTable(markdown: string): boolean {
+  const lines = markdown
+    .split('\n')
+    .map(line => line.trim())
+    .filter(Boolean)
+  if (lines.length < 2) return false
+  return (
+    /^\|.*\|$/.test(lines[0]) &&
+    /^\|?(?:\s*:?-+:?\s*\|)+\s*:?-+:?\s*\|?$/.test(lines[1])
+  )
+}
+
+function matchTaskLine(
+  line: string,
+): { indent: number; checked: boolean; text: string } | null {
+  const match = line.match(/^(\s*)[-+*]\s+\[([ xX])\]\s*(.*)$/)
+  if (!match) return null
+  return {
+    indent: match[1].length,
+    checked: match[2].toLowerCase() === 'x',
+    text: match[3] ?? '',
+  }
+}
+
+function countIndent(line: string): number {
+  const match = line.match(/^(\s*)/)
+  return match?.[1].length ?? 0
+}
+
+function stripNestedIndent(line: string, baseIndent: number): string {
+  const preferred = ' '.repeat(baseIndent + 4)
+  if (line.startsWith(preferred)) return line.slice(preferred.length)
+  return line.slice(Math.min(line.length, baseIndent + 2))
+}
+
+function indentMarkdown(markdown: string): string {
+  return markdown
+    .split('\n')
+    .map(line => (line.trim() ? `    ${line}` : ''))
+    .join('\n')
+}