sonorance 0.1.0-beta.4.1

package/src/ui/md.mjs

@@ -0,0 +1,233 @@
+// Markdown <-> ProseMirror(Tiptap) bridge, built on remark/unified.
+//
+// The editor's in-memory truth is a ProseMirror document; the file on disk is
+// Markdown. This module is the only place that converts between them:
+//
+//   mdToDoc(md)  -> { frontmatter, doc }   (Markdown -> Tiptap JSON)
+//   docToMd(doc, frontmatter) -> md string  (Tiptap JSON -> Markdown)
+//
+// Byte-fidelity is NOT a goal: serialization is opinionated (remark-stringify
+// via mdast-util-to-markdown). Leading YAML frontmatter is split out verbatim
+// so machine-state stays hidden from the reading view and is re-attached on
+// save.
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkGfm from 'remark-gfm';
+import remarkFrontmatter from 'remark-frontmatter';
+import { toMarkdown } from 'mdast-util-to-markdown';
+import { gfmToMarkdown } from 'mdast-util-gfm';
+
+const parser = unified().use(remarkParse).use(remarkGfm).use(remarkFrontmatter, ['yaml']);
+
+// ---- Markdown -> Tiptap JSON ----------------------------------------------
+
+// Split a leading YAML frontmatter block (--- … ---) off the raw source so it
+// can be preserved verbatim and hidden. Returns { frontmatter, body }.
+export function splitFrontmatter(md) {
+  const m = /^(---\n[\s\S]*?\n---)(\n|$)/.exec(md);
+  if (!m) return { frontmatter: '', body: md };
+  return { frontmatter: m[1], body: md.slice(m[0].length) };
+}
+
+const MARK = { strong: 'bold', emphasis: 'italic', inlineCode: 'code', delete: 'strike' };
+
+function inlineChildren(node, marks = []) {
+  const out = [];
+  for (const c of node.children || []) out.push(...inlineNode(c, marks));
+  return out;
+}
+
+function inlineNode(n, marks) {
+  switch (n.type) {
+    case 'text':
+      return n.value ? [{ type: 'text', text: n.value, ...(marks.length ? { marks } : {}) }] : [];
+    case 'strong': case 'emphasis': case 'delete':
+      return inlineChildren(n, [...marks, { type: MARK[n.type] }]);
+    case 'inlineCode':
+      return [{ type: 'text', text: n.value, marks: [...marks, { type: 'code' }] }];
+    case 'link':
+      return inlineChildren(n, [...marks, { type: 'link', attrs: { href: n.url, title: n.title || null } }]);
+    case 'image':
+      return [{ type: 'image', attrs: { src: n.url, alt: n.alt || null, title: n.title || null } }];
+    case 'break':
+      return [{ type: 'hardBreak' }];
+    case 'html':
+      return n.value ? [{ type: 'text', text: n.value }] : [];
+    default:
+      return n.children ? inlineChildren(n, marks) : (n.value ? [{ type: 'text', text: n.value, ...(marks.length ? { marks } : {}) }] : []);
+  }
+}
+
+function listToBlock(node) {
+  const isTask = (node.children || []).some(li => li.checked === true || li.checked === false);
+  if (isTask) {
+    return {
+      type: 'taskList',
+      content: (node.children || []).map(li => ({
+        type: 'taskItem',
+        attrs: { checked: li.checked === true },
+        content: blockChildren(li),
+      })),
+    };
+  }
+  return {
+    type: node.ordered ? 'orderedList' : 'bulletList',
+    ...(node.ordered && node.start != null && node.start !== 1 ? { attrs: { start: node.start } } : {}),
+    content: (node.children || []).map(li => ({ type: 'listItem', content: blockChildren(li) })),
+  };
+}
+
+function tableToBlock(node) {
+  const align = node.align || [];
+  const rows = (node.children || []).map((row, ri) => ({
+    type: 'tableRow',
+    content: (row.children || []).map(cell => ({
+      type: ri === 0 ? 'tableHeader' : 'tableCell',
+      attrs: { colspan: 1, rowspan: 1, colwidth: null },
+      content: [{ type: 'paragraph', content: inlineChildren(cell) }],
+    })),
+  }));
+  return { type: 'table', content: rows };
+}
+
+function blockNode(n) {
+  switch (n.type) {
+    case 'heading':
+      return { type: 'heading', attrs: { level: n.depth }, content: inlineChildren(n) };
+    case 'paragraph': {
+      const content = inlineChildren(n);
+      return { type: 'paragraph', ...(content.length ? { content } : {}) };
+    }
+    case 'blockquote':
+      return { type: 'blockquote', content: blockChildren(n) };
+    case 'list':
+      return listToBlock(n);
+    case 'code':
+      return { type: 'codeBlock', attrs: { language: n.lang || null }, content: n.value ? [{ type: 'text', text: n.value }] : [] };
+    case 'thematicBreak':
+      return { type: 'horizontalRule' };
+    case 'table':
+      return tableToBlock(n);
+    case 'html':
+      // Keep raw/unmodeled HTML as a fenced code block so nothing is silently dropped.
+      return { type: 'codeBlock', attrs: { language: 'html' }, content: n.value ? [{ type: 'text', text: n.value }] : [] };
+    default:
+      return null;
+  }
+}
+
+function blockChildren(node) {
+  const out = [];
+  for (const c of node.children || []) {
+    const b = blockNode(c);
+    if (b) out.push(b);
+  }
+  return out.length ? out : [{ type: 'paragraph' }];
+}
+
+export function mdToDoc(md) {
+  const { frontmatter, body } = splitFrontmatter(md);
+  const tree = parser.parse(body);
+  const content = [];
+  for (const c of tree.children || []) {
+    if (c.type === 'yaml') continue;   // belt-and-suspenders; frontmatter already split
+    const b = blockNode(c);
+    if (b) content.push(b);
+  }
+  return { frontmatter, doc: { type: 'doc', content: content.length ? content : [{ type: 'paragraph' }] } };
+}
+
+// ---- Tiptap JSON -> Markdown ----------------------------------------------
+
+const MARK_MDAST = {
+  bold: (kids) => ({ type: 'strong', children: kids }),
+  italic: (kids) => ({ type: 'emphasis', children: kids }),
+  strike: (kids) => ({ type: 'delete', children: kids }),
+};
+
+function textToMdast(node) {
+  const text = { type: 'text', value: node.text || '' };
+  const marks = node.marks || [];
+  if (marks.some(m => m.type === 'code')) {
+    let n = { type: 'inlineCode', value: node.text || '' };
+    return wrapLinkStrong(n, marks);
+  }
+  return wrapLinkStrong(text, marks);
+}
+
+function wrapLinkStrong(inner, marks) {
+  let n = inner;
+  for (const m of marks) {
+    if (m.type === 'code') continue;
+    if (m.type === 'bold') n = { type: 'strong', children: [n] };
+    else if (m.type === 'italic') n = { type: 'emphasis', children: [n] };
+    else if (m.type === 'strike') n = { type: 'delete', children: [n] };
+    else if (m.type === 'link') n = { type: 'link', url: m.attrs?.href || '', title: m.attrs?.title || null, children: [n] };
+  }
+  return n;
+}
+
+function inlineToMdast(nodes) {
+  const out = [];
+  for (const n of nodes || []) {
+    if (n.type === 'text') out.push(textToMdast(n));
+    else if (n.type === 'hardBreak') out.push({ type: 'break' });
+    else if (n.type === 'image') out.push({ type: 'image', url: n.attrs?.src || '', alt: n.attrs?.alt || null, title: n.attrs?.title || null });
+  }
+  return out;
+}
+
+function blockToMdast(n) {
+  switch (n.type) {
+    case 'heading':
+      return { type: 'heading', depth: n.attrs?.level || 1, children: inlineToMdast(n.content) };
+    case 'paragraph':
+      return { type: 'paragraph', children: inlineToMdast(n.content) };
+    case 'blockquote':
+      return { type: 'blockquote', children: blocksToMdast(n.content) };
+    case 'bulletList':
+      return { type: 'list', ordered: false, spread: false, children: (n.content || []).map(li => ({ type: 'listItem', spread: false, children: blocksToMdast(li.content) })) };
+    case 'orderedList':
+      return { type: 'list', ordered: true, start: n.attrs?.start || 1, spread: false, children: (n.content || []).map(li => ({ type: 'listItem', spread: false, children: blocksToMdast(li.content) })) };
+    case 'taskList':
+      return { type: 'list', ordered: false, spread: false, children: (n.content || []).map(li => ({ type: 'listItem', checked: !!li.attrs?.checked, spread: false, children: blocksToMdast(li.content) })) };
+    case 'codeBlock':
+      return { type: 'code', lang: n.attrs?.language || null, value: (n.content || []).map(c => c.text || '').join('') };
+    case 'horizontalRule':
+      return { type: 'thematicBreak' };
+    case 'table':
+      return tableToMdast(n);
+    default:
+      return null;
+  }
+}
+
+function tableToMdast(n) {
+  return {
+    type: 'table',
+    align: [],
+    children: (n.content || []).map(row => ({
+      type: 'tableRow',
+      children: (row.content || []).map(cell => ({
+        type: 'tableCell',
+        children: inlineToMdast((cell.content?.[0] || {}).content),
+      })),
+    })),
+  };
+}
+
+function blocksToMdast(nodes) {
+  const out = [];
+  for (const n of nodes || []) {
+    const b = blockToMdast(n);
+    if (b) out.push(b);
+  }
+  return out;
+}
+
+export function docToMd(doc, frontmatter = '') {
+  const tree = { type: 'root', children: blocksToMdast(doc.content) };
+  let md = toMarkdown(tree, { extensions: [gfmToMarkdown()], bullet: '-', emphasis: '_', rule: '-', fences: true });
+  if (frontmatter) md = frontmatter.replace(/\n?$/, '\n') + '\n' + md;
+  return md;
+}

package/src/ui/paste-md.mjs

@@ -0,0 +1,54 @@
+// Markdown-aware paste for the Tiptap surface, as a ProseMirror plugin.
+//
+// ProseMirror's default paste treats clipboard *plain text* literally: pasting a
+// block of Markdown (from a terminal, another editor, an LLM answer) lands as raw
+// "## Heading" text instead of a real heading. Since our on-disk format IS Markdown
+// and we already own the remark<->PM bridge (md.mjs), we route a plain-text paste
+// through mdToDoc so it becomes real blocks — the same conversion the editor uses
+// on load. See md.mjs.
+//
+// Guardrails (so we never surprise the writer):
+//   - a rich source (text/html present) is left to ProseMirror's own handling;
+//   - a paste inside a code block stays literal;
+//   - a single line with no block-Markdown token is left to the default inline
+//     paste (so pasting a URL/word mid-sentence still inserts inline, not as a
+//     new paragraph).
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { mdToDoc } from './md.mjs';
+
+export const pasteMdKey = new PluginKey('sonorance-md-paste');
+
+// A single line only warrants block conversion if it opens with a block-level
+// Markdown token (heading, list, quote, fence, table row, rule).
+const BLOCKISH = /^\s{0,3}(#{1,6}\s|[-*+]\s|\d+[.)]\s|>\s|```|~~~|\||-{3,}\s*$|\*{3,}\s*$|_{3,}\s*$)/;
+
+export function markdownPastePlugin() {
+  return new Plugin({
+    key: pasteMdKey,
+    props: {
+      handlePaste(view, event) {
+        const cd = event.clipboardData;
+        if (!cd) return false;
+        const text = cd.getData('text/plain');
+        if (!text || !text.trim()) return false;
+        const html = cd.getData('text/html');
+        if (html && html.trim()) return false;                 // rich source → let PM map it
+        const { $from } = view.state.selection;
+        if ($from.parent.type.spec.code) return false;          // inside a code block → literal
+        const multiline = /\r?\n/.test(text.trim());
+        if (!multiline && !BLOCKISH.test(text)) return false;   // plain inline text → default paste
+
+        let doc;
+        try { ({ doc } = mdToDoc(text)); } catch { return false; }
+        const nodes = (doc && doc.content) || [];
+        if (!nodes.length) return false;
+
+        let pmDoc;
+        try { pmDoc = view.state.schema.nodeFromJSON(doc); } catch { return false; }
+        const slice = pmDoc.slice(0);
+        view.dispatch(view.state.tr.replaceSelection(slice).scrollIntoView());
+        return true;
+      },
+    },
+  });
+}