Fix Markdown mark round-trips (#219)

src/lib/components/Editor.svelte

@@ -51,6 +51,7 @@
 	import { calloutGroup, calloutIcon, calloutLabel, CALLOUT_MENU, transformCalloutBlockquotes, serializeCallout } from '$lib/editor/callouts';
 	import { wrapTextareaSelection } from '$lib/editor/source/selectionPairs';
 	import { convertListNode, type MixedListName } from '$lib/editor/mixedLists';
+	import { serializeInlineMarkdown } from '$lib/editor/markdown';
 	import { relativePath } from '$lib/utils/paths';
 	import GraphView from './GraphView.svelte';
 	import TagSuggestInput from './TagSuggestInput.svelte';
@@ -3666,68 +3667,7 @@
 	}
 
 	function serializeInline(node: any): string {
-		if (node.childCount === 0) return '';
-		const parts: string[] = [];
-		node.forEach((child: any, _offset: number, index: number) => {
-			if (child.isText) {
-				let text = child.text || '';
-				// Preserve leading tabs/em-spaces as HTML entities so they survive markdown roundtrip
-				// (markdown parsers strip tab whitespace, but   passes through as HTML)
-				// Tabs come from initial indent; em-spaces (U+2003) come from prior   roundtrips
-				if (index === 0) {
-					text = text.replace(/^[\t\u2003]+/, (ws) => ' '.repeat(ws.length));
-				}
-				// Apply marks
-				for (const mark of child.marks) {
-					switch (mark.type.name) {
-						case 'bold': text = `**${text}**`; break;
-						case 'italic': text = `*${text}*`; break;
-						case 'strike': text = `~~${text}~~`; break;
-						case 'code': text = `\`${text}\``; break;
-						case 'underline': text = `<u>${text}</u>`; break;
-						case 'subscript': text = `~${text}~`; break;
-						case 'superscript': text = `^${text}^`; break;
-						case 'highlight': {
-							const color = mark.attrs?.color;
-							if (color) {
-								text = `<mark data-color="${color}">${text}</mark>`;
-							} else {
-								text = `==${text}==`;
-							}
-							break;
-						}
-						case 'textStyle': {
-							const c = mark.attrs?.color;
-							if (c) text = `<span style="color: ${c}">${text}</span>`;
-							break;
-						}
-						case 'link': text = `[${text}](${mark.attrs.href})`; break;
-						case 'wikiLink': {
-							const wlTitle = mark.attrs.title || text;
-							// If display text differs from the reference, emit [[ref|display]] (Obsidian alias syntax)
-							text = wlTitle !== text ? `[[${wlTitle}|${text}]]` : `[[${wlTitle}]]`;
-							break;
-						}
-					}
-				}
-				parts.push(text);
-			} else if (child.type.name === 'image') {
-				const src = stripAssetSrc(child.attrs.src || '');
-				if (!src) return; // Skip images with unresolved blob: URLs
-				const alt = child.attrs.alt || '';
-				const size = child.attrs['data-size'] || child.attrs.size || 'full';
-				const sizeSuffix = size && size !== 'full' ? `|size=${size}` : '';
-				if (parts.length > 0 && parts[parts.length - 1] !== '\n') {
-					parts.push('\n');
-				}
-				parts.push(`![${alt}${sizeSuffix}](${src})`);
-			} else if (child.type.name === 'mathInline') {
-				parts.push(`$${child.attrs.tex || ''}$`);
-			} else if (child.type.name === 'hardBreak') {
-				parts.push('  \n');
-			}
-		});
-		return parts.join('');
+		return serializeInlineMarkdown(node, stripAssetSrc);
 	}
 
 	function autofocus(el: HTMLElement) {

src/lib/editor/markdown.ts

@@ -0,0 +1,143 @@
+import type { Mark, Node as ProseMirrorNode } from '@tiptap/pm/model';
+
+type AssetSourceNormalizer = (source: string) => string;
+
+type MarkdownMark = {
+  key: string;
+  priority: number;
+  open: string;
+  close: string;
+};
+
+const identityAssetSource: AssetSourceNormalizer = (source) => source;
+
+function stringAttr(mark: Mark, name: string): string {
+  const value = mark.attrs?.[name];
+  return typeof value === 'string' ? value : '';
+}
+
+function markdownMark(mark: Mark, text: string): MarkdownMark | null {
+  switch (mark.type.name) {
+    case 'bold':
+      return { key: 'bold', priority: 10, open: '**', close: '**' };
+    case 'italic':
+      return { key: 'italic', priority: 20, open: '*', close: '*' };
+    case 'strike':
+      return { key: 'strike', priority: 30, open: '~~', close: '~~' };
+    case 'underline':
+      return { key: 'underline', priority: 40, open: '<u>', close: '</u>' };
+    case 'subscript':
+      return { key: 'subscript', priority: 50, open: '~', close: '~' };
+    case 'superscript':
+      return { key: 'superscript', priority: 60, open: '^', close: '^' };
+    case 'highlight': {
+      const color = stringAttr(mark, 'color');
+      return color
+        ? {
+            key: `highlight:${color}`,
+            priority: 70,
+            open: `<mark data-color="${color}">`,
+            close: '</mark>',
+          }
+        : { key: 'highlight', priority: 70, open: '==', close: '==' };
+    }
+    case 'textStyle': {
+      const color = stringAttr(mark, 'color');
+      return color
+        ? {
+            key: `textStyle:${color}`,
+            priority: 80,
+            open: `<span style="color: ${color}">`,
+            close: '</span>',
+          }
+        : null;
+    }
+    case 'code':
+      return { key: 'code', priority: 90, open: '`', close: '`' };
+    case 'link': {
+      const href = stringAttr(mark, 'href');
+      return {
+        key: `link:${href}`,
+        priority: 100,
+        open: '[',
+        close: `](${href})`,
+      };
+    }
+    case 'wikiLink': {
+      const title = stringAttr(mark, 'title') || text;
+      const aliased = mark.attrs?.aliased === true || title !== text;
+      return {
+        key: `wikiLink:${title}:${aliased}`,
+        priority: 110,
+        open: aliased ? `[[${title}|` : '[[',
+        close: ']]',
+      };
+    }
+    default:
+      return null;
+  }
+}
+
+function marksForText(node: ProseMirrorNode): MarkdownMark[] {
+  return node.marks
+    .map((mark) => markdownMark(mark, node.text || ''))
+    .filter((mark): mark is MarkdownMark => mark !== null)
+    .sort((left, right) => left.priority - right.priority || left.key.localeCompare(right.key));
+}
+
+function commonMarkCount(active: MarkdownMark[], next: MarkdownMark[]): number {
+  const length = Math.min(active.length, next.length);
+  let index = 0;
+  while (index < length && active[index].key === next[index].key) index += 1;
+  return index;
+}
+
+export function serializeInlineMarkdown(
+  node: ProseMirrorNode,
+  normalizeAssetSource: AssetSourceNormalizer = identityAssetSource,
+): string {
+  let result = '';
+  let activeMarks: MarkdownMark[] = [];
+
+  const transitionMarks = (nextMarks: MarkdownMark[]) => {
+    const shared = commonMarkCount(activeMarks, nextMarks);
+    for (let index = activeMarks.length - 1; index >= shared; index -= 1) {
+      result += activeMarks[index].close;
+    }
+    for (let index = shared; index < nextMarks.length; index += 1) {
+      result += nextMarks[index].open;
+    }
+    activeMarks = nextMarks;
+  };
+
+  node.forEach((child, _offset, index) => {
+    if (child.isText) {
+      transitionMarks(marksForText(child));
+      let text = child.text || '';
+      if (index === 0) {
+        text = text.replace(/^[\t\u2003]+/, (whitespace) => '&emsp;'.repeat(whitespace.length));
+      }
+      result += text;
+      return;
+    }
+
+    transitionMarks([]);
+
+    if (child.type.name === 'image') {
+      const source = normalizeAssetSource(child.attrs.src || '');
+      if (!source) return;
+      const alt = child.attrs.alt || '';
+      const size = child.attrs['data-size'] || child.attrs.size || 'full';
+      const sizeSuffix = size && size !== 'full' ? `|size=${size}` : '';
+      if (result) result += '\n';
+      result += `![${alt}${sizeSuffix}](${source})`;
+    } else if (child.type.name === 'mathInline') {
+      result += `$${child.attrs.tex || ''}$`;
+    } else if (child.type.name === 'hardBreak') {
+      result += '  \n';
+    }
+  });
+
+  transitionMarks([]);
+  return result;
+}