Fix markdown import/export round-tripping

Author: ChristianChiarulli

src/components/editor/lib/markdown.ts

@@ -98,38 +98,141 @@ function normalizeImportedQuoteSpacing(node: LexicalNode): void {
   }
 }
 
-function normalizeLoadedCodeBlockTrailingNewline(node: LexicalNode): void {
+type FencedCodeBlock = {
+  signature: string;
+  text: string;
+};
+
+function normalizeCodeBlockLanguage(
+  language: string | null | undefined,
+): string {
+  return !language || language === "plain" ? "" : language;
+}
+
+function getCodeBlockSignature(
+  language: string | null | undefined,
+  text: string,
+): string {
+  return `${normalizeCodeBlockLanguage(language)}\u0000${text.replace(/\n+$/, "")}`;
+}
+
+function collectFencedCodeBlocks(markdown: string): FencedCodeBlock[] {
+  const lines = markdown.split("\n");
+  const blocks: FencedCodeBlock[] = [];
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const trimmed = line.trimStart();
+
+    if (CODE_SINGLE_LINE_RE.test(trimmed)) {
+      blocks.push({
+        signature: getCodeBlockSignature("", ""),
+        text: "",
+      });
+      continue;
+    }
+
+    const match = CODE_FENCE_RE.exec(trimmed);
+    if (!match) {
+      continue;
+    }
+
+    const fenceChar = match[1][0];
+    const fenceLen = match[1].length;
+    const escapedFenceChar = fenceChar === "`" ? "\\`" : "~";
+    const closeFenceRe = new RegExp(
+      `^[ \\t]*${escapedFenceChar}{${fenceLen},}[ \\t]*$`,
+    );
+
+    let end = i + 1;
+    while (end < lines.length && !closeFenceRe.test(lines[end])) {
+      end++;
+    }
+
+    const contentLines = lines.slice(i + 1, end);
+    let trailingBlankLines = 0;
+    for (let j = contentLines.length - 1; j >= 0; j--) {
+      if (contentLines[j].trim() !== "") {
+        break;
+      }
+      trailingBlankLines++;
+    }
+
+    const baseLines =
+      trailingBlankLines > 0
+        ? contentLines.slice(0, contentLines.length - trailingBlankLines)
+        : contentLines;
+    const text = baseLines.join("\n") + "\n".repeat(trailingBlankLines);
+    const info = trimmed.slice(match[1].length).trim();
+    const language =
+      info.length > 0
+        ? normalizeCodeBlockLanguage(info.split(/\s+/, 1)[0])
+        : "";
+    blocks.push({
+      signature: getCodeBlockSignature(language, text),
+      text,
+    });
+    i = end;
+  }
+
+  return blocks;
+}
+
+function normalizeImportedCodeBlockText(
+  node: LexicalNode,
+  codeBlocksBySignature: Map<string, string[]>,
+): void {
   if ($isElementNode(node)) {
     for (const child of node.getChildren()) {
-      normalizeLoadedCodeBlockTrailingNewline(child);
+      normalizeImportedCodeBlockText(child, codeBlocksBySignature);
     }
   }
 
   if (!$isCodeNode(node)) {
     return;
   }
 
-  const text = node.getTextContent();
-  if (!text.endsWith("\n")) {
+  const expectedText = codeBlocksBySignature
+    .get(getCodeBlockSignature(node.getLanguage(), node.getTextContent()))
+    ?.shift();
+  if (expectedText == null) {
+    return;
+  }
+
+  if (node.getTextContent() === expectedText) {
     return;
   }
 
-  // Comrak renders fenced code blocks as <pre><code>content\n</code></pre>.
-  // Lexical preserves that final newline as an extra empty line in the editor,
-  // but our markdown import path does not. Trim only the synthetic final
-  // newline so reload matches paste behavior while preserving intentional
-  // trailing blank lines inside the block.
-  const normalized = text.slice(0, -1);
   node.clear();
-  if (normalized.length > 0) {
-    node.append($createTextNode(normalized));
+  if (expectedText.length > 0) {
+    node.append($createTextNode(expectedText));
+  }
+}
+
+function normalizeImportedCodeBlocksFromMarkdown(
+  nodes: LexicalNode[],
+  markdown: string,
+): void {
+  const codeBlocksBySignature = new Map<string, string[]>();
+  for (const block of collectFencedCodeBlocks(markdown)) {
+    const existing = codeBlocksBySignature.get(block.signature);
+    if (existing) {
+      existing.push(block.text);
+    } else {
+      codeBlocksBySignature.set(block.signature, [block.text]);
+    }
+  }
+
+  for (const node of nodes) {
+    normalizeImportedCodeBlockText(node, codeBlocksBySignature);
   }
 }
 
 export function normalizeImportedNodes(nodes: LexicalNode[]): LexicalNode[] {
   for (const node of nodes) {
     normalizeImportedQuoteSpacing(node);
   }
+
   return nodes;
 }
 
@@ -141,6 +244,7 @@ const domParser = new DOMParser();
 
 export function $importMarkdownFromHTML(
   html: string,
+  markdown: string,
   node?: ElementNode,
 ): void {
   const t0 = performance.now();
@@ -151,9 +255,7 @@ export function $importMarkdownFromHTML(
   );
   const t1 = performance.now();
   const nodes = normalizeImportedNodes($generateNodesFromDOM(editor, dom));
-  for (const node of nodes) {
-    normalizeLoadedCodeBlockTrailingNewline(node);
-  }
+  normalizeImportedCodeBlocksFromMarkdown(nodes, markdown);
   const t2 = performance.now();
   const target = node ?? $getRoot();
   target.clear();

src/components/editor/note-editor.tsx

@@ -22,7 +22,7 @@ import {
 import { CodeExtension } from "@lexical/code";
 import { HashtagExtension } from "./extensions/hashtag-extension";
 import { TableExtension } from "@lexical/table";
-import { LinkNode } from "@lexical/link";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
 import { ImageNode } from "./nodes/image-node";
 import { YouTubeNode } from "./nodes/youtube-node";
 
@@ -40,6 +40,7 @@ import HeadingAnchorPlugin from "./plugins/heading-anchor-plugin";
 import HeadingBackspacePlugin from "./plugins/heading-backspace-plugin";
 import LinkClickPlugin from "./plugins/link-click-plugin";
 import LinkPastePlugin from "./plugins/link-paste-plugin";
+import AutoLinkPlugin from "./plugins/autolink-plugin";
 import MarkdownCopyPlugin from "./plugins/markdown-copy-plugin";
 import MarkdownPastePlugin from "./plugins/markdown-paste-plugin";
 import ImageDropPlugin from "./plugins/image-drop-plugin";
@@ -145,6 +146,7 @@ function EditorInner({
       <HeadingBackspacePlugin />
       <LinkClickPlugin />
       <LinkPastePlugin />
+      <AutoLinkPlugin />
       <MarkdownCopyPlugin />
       <MarkdownPastePlugin />
       <YouTubeEmbedPlugin />
@@ -167,7 +169,7 @@ export const NoteEditor = forwardRef<NoteEditorHandle, NoteEditorProps>(
           name: "CometEditor",
           namespace: "CometEditor",
           theme,
-          nodes: [LinkNode, ImageNode, YouTubeNode],
+          nodes: [AutoLinkNode, LinkNode, ImageNode, YouTubeNode],
           onError: (error: Error) => console.error("Lexical error:", error),
           dependencies: [
             RichTextExtension,

src/components/editor/plugins/autolink-plugin.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { createLinkMatcherWithRegExp, registerAutoLink } from "@lexical/link";
+
+const EMAIL_LINK_MATCHER = createLinkMatcherWithRegExp(
+  /[A-Za-z0-9.!#$%&'*+/=?^_`{|}~-]+@[A-Za-z0-9-]+(?:\.[A-Za-z0-9-]+)+/,
+  (text) => `mailto:${text}`,
+);
+
+export default function AutoLinkPlugin() {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return registerAutoLink(editor, {
+      changeHandlers: [],
+      excludeParents: [],
+      matchers: [EMAIL_LINK_MATCHER],
+    });
+  }, [editor]);
+
+  return null;
+}

src/components/editor/plugins/initial-content-plugin.tsx

@@ -44,7 +44,7 @@ export default function InitialContentPlugin({
           $setSelection(null);
         } else if (html) {
           // Use pre-rendered HTML from Rust backend (comrak)
-          $importMarkdownFromHTML(html);
+          $importMarkdownFromHTML(html, markdown);
           if (isNew) {
             // Place cursor at end of heading for new notes
             const root = $getRoot();

src/components/editor/plugins/markdown-paste-plugin.tsx

@@ -138,8 +138,7 @@ function trimBoundaryEmptyParagraphs(
   if (nodes.length === 0) return nodes;
 
   const lines = sourceMarkdown.split("\n");
-  const hasLeadingBlankLine =
-    lines.length > 0 && lines[0]?.trim().length === 0;
+  const hasLeadingBlankLine = lines.length > 0 && lines[0]?.trim().length === 0;
   const hasTrailingBlankLine =
     lines.length > 0 && lines[lines.length - 1]?.trim().length === 0;
 

src/components/editor/transformers/code-transformer.ts

@@ -18,7 +18,7 @@ export const CODE_BLOCK: MultilineElementTransformer = {
     }
     const language = node.getLanguage();
     const languageTag = language && language !== "plain" ? language : "";
-    const textContent = node.getTextContent().replace(/\n+$/, "");
+    const textContent = node.getTextContent();
 
     // Use dynamic fence length: find the longest run of backticks in the
     // content and use one more than that (minimum 3).

src/components/editor/transformers/link-transformer.ts

@@ -9,6 +9,19 @@ function getLinkAttributes(url: string) {
   return { target: "_blank", rel: "noopener noreferrer" };
 }
 
+function isPlainEmailAutolink(
+  displayText: string,
+  url: string,
+  title: string | null,
+) {
+  return (
+    title == null &&
+    displayText.length > 0 &&
+    url.startsWith("mailto:") &&
+    url.slice("mailto:".length) === displayText
+  );
+}
+
 export const LINK: TextMatchTransformer = {
   dependencies: [LinkNode],
   export: (node) => {
@@ -18,6 +31,9 @@ export const LINK: TextMatchTransformer = {
     const displayText = node.getTextContent();
     const url = node.getURL();
     const title = node.getTitle();
+    if (isPlainEmailAutolink(displayText, url, title)) {
+      return displayText;
+    }
     const titlePart = title ? ` "${title}"` : "";
     return `[${displayText || url}](${url}${titlePart})`;
   },