collavre 0.20.3 → 0.22.0

data/app/javascript/lib/lexical/color_import.js

@@ -0,0 +1,186 @@
+import { $isElementNode, $isTextNode } from "lexical"
+
+// Per text node, which format dimensions a nearer (more nested) span already
+// decided this import. Child span `after` callbacks run before ancestors', so a
+// nested span claims its dimensions first and ancestors must not override them.
+const decidedFormats = new WeakMap()
+
+// Replicates Lexical's (non-exported) inline-style format reading for <span>:
+// font-weight / font-style / text-decoration / vertical-align. Pasted content
+// (Google Docs, Word) carries bold/italic as inline styles, not <b>/<i> tags,
+// so our custom span import must compose these formats with the color binding.
+//
+// Lexical only turns formats ON, so a nested reset (font-weight:normal) can't
+// un-bold itself once an ancestor re-applies bold. We treat a dimension as
+// decided by the FIRST (nearest) span that declares it at all, so the inner
+// span owns it; an omitted declaration leaves it open to inherit from ancestors.
+// For inherited CSS props (font-weight, font-style) a reset value also actively
+// CLEARS a format an ancestor tag (<b>/<i>) already toggled. text-decoration /
+// vertical-align stay add-only (they propagate additively in CSS).
+function applyTextFormatFromStyle(node, domStyle) {
+  const fontWeight = domStyle.fontWeight
+  const textDecoration = domStyle.textDecoration
+  const fontStyle = domStyle.fontStyle
+  const verticalAlign = domStyle.verticalAlign
+  const decorations = (textDecoration || "").split(" ")
+
+  // [declared by this span?, value matches format?, format name, resettable?]
+  const rules = [
+    [Boolean(fontWeight), fontWeight === "700" || fontWeight === "bold", "bold", true],
+    [Boolean(textDecoration), decorations.includes("line-through"), "strikethrough", false],
+    [Boolean(fontStyle), fontStyle === "italic", "italic", true],
+    [Boolean(textDecoration), decorations.includes("underline"), "underline", false],
+    [Boolean(verticalAlign), verticalAlign === "sub", "subscript", false],
+    [Boolean(verticalAlign), verticalAlign === "super", "superscript", false]
+  ]
+
+  let decided = decidedFormats.get(node)
+  rules.forEach(([declared, shouldApply, format, resettable]) => {
+    if (decided && decided.has(format)) return
+    if (shouldApply && !node.hasFormat(format)) {
+      node.toggleFormat(format)
+    } else if (resettable && declared && !shouldApply && node.hasFormat(format)) {
+      node.toggleFormat(format) // explicit reset clears an ancestor's format
+    }
+    if (declared) {
+      if (!decided) {
+        decided = new Set()
+        decidedFormats.set(node, decided)
+      }
+      decided.add(format)
+    }
+  })
+}
+
+// The exact (property, value) pairs applyTextFormatFromStyle turns into a format
+// or reset. Only these are kept OUT of the carried node style (carrying them too
+// would double-represent the format). Value-aware on purpose: an unmapped value
+// (font-weight:800, font-style:oblique, vertical-align:middle) must be carried
+// as inline style or it's silently dropped on reopen.
+const FORMAT_MAPPED_VALUES = {
+  "font-weight": new Set(["700", "bold", "normal"]),
+  "font-style": new Set(["italic", "normal"]),
+  "vertical-align": new Set(["sub", "super"])
+}
+
+// text-decoration is dropped wholesale: its tokens become formats that Lexical
+// re-exports as its own text-decoration, so a remainder token would collide.
+// white-space is Lexical's exportDOM artifact, not user intent.
+const DROPPED_STYLE_PROPS = new Set(["text-decoration", "white-space"])
+
+// Every inline declaration to carry onto the produced text nodes: all of them
+// except format-mapped values and the dropped props above. Preserves color,
+// background, font-size/family, text-transform, etc. without cherry-picking,
+// mirroring the full-style copy the removed positional collector did.
+function carriedStyleDeclarations(domStyle) {
+  const map = new Map()
+  for (let i = 0; i < domStyle.length; i++) {
+    const prop = domStyle.item(i)
+    if (DROPPED_STYLE_PROPS.has(prop)) continue
+    const value = domStyle.getPropertyValue(prop)
+    const mapped = FORMAT_MAPPED_VALUES[prop]
+    if (mapped && mapped.has(value)) continue
+    map.set(prop, value)
+  }
+  return map
+}
+
+function parseStyle(styleText) {
+  const map = new Map()
+  ;(styleText || "").split(";").forEach((decl) => {
+    const idx = decl.indexOf(":")
+    if (idx === -1) return
+    const key = decl.slice(0, idx).trim()
+    const value = decl.slice(idx + 1).trim()
+    if (key) map.set(key, value)
+  })
+  return map
+}
+
+function serializeStyle(map) {
+  return Array.from(map.entries())
+    .map(([key, value]) => `${key}: ${value}`)
+    .join("; ")
+}
+
+// Merge (not overwrite) inherited declarations: a node that already carries its
+// own value (from a deeper colored span converted first) keeps it — inner wins,
+// matching CSS inheritance. The parent only fills in what's missing.
+function applyStyleToTextNodes(nodes, inherited, domStyle) {
+  nodes.forEach((node) => {
+    if ($isTextNode(node)) {
+      const merged = parseStyle(node.getStyle())
+      inherited.forEach((value, key) => {
+        if (!merged.has(key)) merged.set(key, value)
+      })
+      node.setStyle(serializeStyle(merged))
+      applyTextFormatFromStyle(node, domStyle)
+    } else if ($isElementNode(node)) {
+      applyStyleToTextNodes(node.getChildren(), inherited, domStyle)
+    }
+  })
+}
+
+// Custom <span> import: binds the span's inline style (color, background, and
+// every other non-format/non-white-space prop) to its text nodes AT IMPORT TIME.
+// The editor used to re-apply collected styles positionally to
+// root.getAllTextNodes(), which drifts whenever Lexical's importer doesn't map
+// DOM text nodes 1:1 (white-space:pre-wrap splits on \n/\t; whitespace-only
+// nodes are dropped). Binding during conversion keeps style on the right node.
+//
+// We only take over when the span carries color/background — Lexical's default
+// conversion already handles colorless spans, so deferring avoids behavior change.
+export function colorAwareSpanImport(domNode) {
+  const { color, backgroundColor } = domNode.style
+  if (!color && !backgroundColor) {
+    return null
+  }
+
+  const inherited = carriedStyleDeclarations(domNode.style)
+
+  return {
+    conversion: () => ({
+      node: null,
+      after: (childLexicalNodes) => {
+        applyStyleToTextNodes(childLexicalNodes, inherited, domNode.style)
+        return childLexicalNodes
+      }
+    }),
+    priority: 1
+  }
+}
+
+export const lexicalHtmlConfig = {
+  import: {
+    span: colorAwareSpanImport
+  }
+}
+
+// colorAwareSpanImport only runs for <span>. Color on a non-span element (a
+// colored <p>/<li>/<h1>, or a materialized data-lexical-color on a block) would
+// be dropped, since Lexical's default block conversions ignore color. Before
+// import (and AFTER syncLexicalStyleAttributes materializes data-lexical-*), wrap
+// each colored non-span's direct text children in a span carrying its full style,
+// so the span importer binds it. Nested colored elements keep their own style and
+// win via the merge in applyStyleToTextNodes. Block-level props (text-align,
+// margin) ride along harmlessly on the inline wrapper.
+const TEXT_NODE = 3
+
+export function normalizeColoredContainers(root) {
+  if (!root || typeof root.querySelectorAll !== "function") return
+  const ownerDocument = root.ownerDocument || document
+
+  root.querySelectorAll("[style]").forEach((element) => {
+    if (element.tagName === "SPAN") return
+    const { color, backgroundColor } = element.style
+    if (!color && !backgroundColor) return
+
+    Array.from(element.childNodes).forEach((child) => {
+      if (child.nodeType !== TEXT_NODE || !child.nodeValue) return
+      const span = ownerDocument.createElement("span")
+      span.setAttribute("style", element.getAttribute("style"))
+      element.replaceChild(span, child)
+      span.appendChild(child)
+    })
+  })
+}

data/app/javascript/lib/lexical/minimize_html.js

@@ -0,0 +1,182 @@
+// Minimize the HTML that Lexical's `$generateHtmlFromNodes` produces before it
+// is persisted as a creative description / comment body.
+//
+// Lexical emits verbose markup: every text node is wrapped in
+// `<span style="white-space: pre-wrap;">`, bold/italic double-wrap as
+// `<b><strong class="lexical-text-bold">`, and the whole document is nested in
+// an extra `<div>` wrapper. None of that is needed once the content is rendered
+// inside a `.creative-content` container.
+//
+// The goal (per product spec) is: a single line of text needs no markup at all,
+// and styled regions keep a minimal `<span class="…">` / semantic tag. We only
+// strip genuine redundancy — we never drop a tag or class that the renderer or
+// the editor's re-import (`$generateNodesFromDOM`) relies on.
+
+// Editor-only inline style declarations that carry no meaning once rendered.
+// `white-space: pre-wrap` is usually redundant: plain text wraps normally and
+// code blocks preserve whitespace via the kept `.lexical-code-block` rule (which
+// children inherit). It is NOT redundant when the text carries significant
+// whitespace (see `hasSignificantWhitespace`): the render container
+// (`.creative-content`) has no `pre-wrap`, so dropping it would collapse runs of
+// spaces / indentation that the user actually typed.
+const REDUNDANT_STYLE_PROPS = ["white-space"]
+
+// Editor-only attributes that never affect rendering of persisted content.
+const REDUNDANT_ATTRS = ["spellcheck"]
+
+// Same-format wrapper pairs Lexical emits as outer/inner duplicates. Either tag
+// alone still conveys the format on re-import, so the attribute-less one can go.
+const SAME_FORMAT_PAIRS = [
+  ["b", "strong"],
+  ["i", "em"]
+]
+
+function hasNoAttributes(el) {
+  return el.attributes.length === 0
+}
+
+// Whitespace whose rendering changes once `white-space: pre-wrap` is dropped:
+// a run of 2+ whitespace (collapses to one space) or a tab/newline/form-feed.
+// A single leading/trailing space between inline runs renders fine without
+// `pre-wrap`, so it is not significant and must not block minimization of the
+// common case (e.g. the "Hello " before a bold word).
+function hasSignificantWhitespace(text) {
+  return /\s{2,}|[\t\n\r\f]/.test(text)
+}
+
+// Block-level tags terminate an inline formatting context: whitespace never
+// combines across them, so the document-order scan below must not look past one.
+const BLOCK_TAGS = new Set([
+  "BODY", "DIV", "P", "H1", "H2", "H3", "H4", "H5", "H6", "UL", "OL", "LI",
+  "BLOCKQUOTE", "PRE", "TABLE", "THEAD", "TBODY", "TR", "TD", "TH", "FIGURE", "HR"
+])
+
+function isBlock(node) {
+  return node != null && node.nodeType === 1 && BLOCK_TAGS.has(node.tagName)
+}
+
+// The rendered character immediately adjacent to `el` in document order, within
+// the same inline formatting context. `dir` is "previousSibling"/"nextSibling".
+// Climbs out of inline wrappers (e.g. `<b><strong>`) so a space nested one level
+// deep still sees its neighbour, but stops at a block edge (returns "").
+function adjacentInlineChar(el, dir) {
+  let node = el
+  while (node && !node[dir]) {
+    node = node.parentNode
+    if (isBlock(node)) return ""
+  }
+  const sibling = node && node[dir]
+  if (!sibling) return ""
+  const text = sibling.textContent || ""
+  return dir === "previousSibling" ? text.slice(-1) : text.charAt(0)
+}
+
+// Significant whitespace can straddle an inline formatting boundary: e.g. the
+// live editor serializes a bolded " bar" as `foo ` + `<b><strong> bar</strong></b>`,
+// where each node holds a single edge space. Dropping `pre-wrap` from both sides
+// would collapse the pair to one space. Detect each side independently so the
+// kept `pre-wrap` lands on BOTH elements and the run survives unambiguously.
+function hasBoundarySignificantWhitespace(el) {
+  const text = el.textContent || ""
+  if (/^\s/.test(text) && /\s/.test(adjacentInlineChar(el, "previousSibling"))) {
+    return true
+  }
+  if (/\s$/.test(text) && /\s/.test(adjacentInlineChar(el, "nextSibling"))) {
+    return true
+  }
+  return false
+}
+
+function stripRedundantStyle(el) {
+  if (!el.hasAttribute("style")) return
+  const keepWhiteSpace =
+    hasSignificantWhitespace(el.textContent) ||
+    hasBoundarySignificantWhitespace(el)
+  REDUNDANT_STYLE_PROPS.forEach((prop) => {
+    if (prop === "white-space" && keepWhiteSpace) return
+    el.style.removeProperty(prop)
+  })
+  if (el.style.length === 0 || !el.getAttribute("style")?.trim()) {
+    el.removeAttribute("style")
+  }
+}
+
+function isSameFormatPair(tagA, tagB) {
+  const a = tagA.toLowerCase()
+  const b = tagB.toLowerCase()
+  return SAME_FORMAT_PAIRS.some(
+    ([x, y]) => (a === x && b === y) || (a === y && b === x)
+  )
+}
+
+function unwrap(el) {
+  const parent = el.parentNode
+  if (!parent) return
+  while (el.firstChild) parent.insertBefore(el.firstChild, el)
+  parent.removeChild(el)
+}
+
+// Depth-first cleanup: normalize attributes, then collapse redundant wrappers.
+function cleanElement(el) {
+  // Recurse first so inner redundancy is resolved before we inspect a parent.
+  Array.from(el.children).forEach(cleanElement)
+
+  if (el.tagName === "BODY") return
+
+  REDUNDANT_ATTRS.forEach((attr) => el.removeAttribute(attr))
+  stripRedundantStyle(el)
+
+  const tag = el.tagName.toLowerCase()
+
+  // Attribute-less <span> conveys nothing — unwrap it (plain text, link inner).
+  if (tag === "span" && hasNoAttributes(el)) {
+    unwrap(el)
+    return
+  }
+
+  // Collapse Lexical's outer/inner duplicate format wrappers (e.g. <b><strong>).
+  // Drop whichever element carries no attributes; the other keeps the format.
+  const onlyChild =
+    el.children.length === 1 && el.childNodes.length === 1 ? el.children[0] : null
+  if (onlyChild && isSameFormatPair(tag, onlyChild.tagName)) {
+    if (hasNoAttributes(el)) {
+      unwrap(el)
+    } else if (hasNoAttributes(onlyChild)) {
+      unwrap(onlyChild)
+    }
+  }
+}
+
+const MEDIA_SELECTOR = "img, action-text-attachment, figure, [data-trix-attachment]"
+
+// A single top-level paragraph is just a line of text — emit its inline content
+// without the <p> wrapper. Structural blocks (headings, lists, quotes, code,
+// multiple paragraphs) are left intact.
+function unwrapSingleParagraph(root) {
+  const blocks = Array.from(root.children)
+  if (blocks.length === 1 && blocks[0].tagName === "P") {
+    const paragraph = blocks[0]
+    // An empty line (just a <br> / whitespace, no media) collapses to "" so the
+    // stored value matches isHtmlEmpty and re-imports to a fresh paragraph.
+    if (!paragraph.textContent.trim() && !paragraph.querySelector(MEDIA_SELECTOR)) {
+      return ""
+    }
+    // A soft line break (<br>) inside the line must keep its <p> wrapper: a bare
+    // top-level <br> cannot be re-grouped into a paragraph on re-import and would
+    // break the document shape / split the line.
+    if (paragraph.querySelector("br")) {
+      return root.innerHTML
+    }
+    return paragraph.innerHTML
+  }
+  return root.innerHTML
+}
+
+// `root` is the element whose children are the serialized content blocks
+// (i.e. the throwaway <div> wrapper Lexical's output was parsed into). Mutates
+// `root` in place and returns the minimized HTML string.
+export function minimizeContentHtml(root) {
+  if (!root) return ""
+  Array.from(root.children).forEach(cleanElement)
+  return unwrapSingleParagraph(root)
+}

data/app/javascript/lib/lexical/video_node.jsx

@@ -0,0 +1,96 @@
+import {
+    $applyNodeReplacement,
+    DecoratorNode,
+} from "lexical"
+
+export class VideoNode extends DecoratorNode {
+    __src
+    __filename
+
+    static getType() {
+        return "video"
+    }
+
+    static clone(node) {
+        return new VideoNode(node.__src, node.__filename, node.__key)
+    }
+
+    static importJSON(serializedNode) {
+        const { src, filename } = serializedNode
+        return $createVideoNode({ src, filename })
+    }
+
+    exportDOM() {
+        const element = document.createElement("video")
+        element.setAttribute("src", this.__src)
+        element.setAttribute("controls", "")
+        return { element }
+    }
+
+    static importDOM() {
+        return {
+            video: () => ({ conversion: convertVideoElement, priority: 1 }),
+        }
+    }
+
+    constructor(src, filename, key) {
+        super(key)
+        this.__src = src
+        this.__filename = filename
+    }
+
+    exportJSON() {
+        return {
+            src: this.getSrc(),
+            filename: this.__filename,
+            type: "video",
+            version: 1,
+        }
+    }
+
+    createDOM(config) {
+        const span = document.createElement("span")
+        const className = config.theme?.video
+        if (className !== undefined) span.className = className
+        return span
+    }
+
+    updateDOM() {
+        return false
+    }
+
+    getSrc() {
+        return this.__src
+    }
+
+    getFilename() {
+        return this.__filename
+    }
+
+    decorate() {
+        return (
+            <video
+                src={this.__src}
+                controls
+                style={{ maxWidth: "100%", borderRadius: "4px" }}
+            />
+        )
+    }
+}
+
+function convertVideoElement(domNode) {
+    if (domNode instanceof HTMLVideoElement) {
+        const src = domNode.getAttribute("src")
+        if (!src) return null
+        return { node: $createVideoNode({ src, filename: null }) }
+    }
+    return null
+}
+
+export function $createVideoNode({ src, filename }) {
+    return $applyNodeReplacement(new VideoNode(src, filename))
+}
+
+export function $isVideoNode(node) {
+    return node instanceof VideoNode
+}

data/app/javascript/modules/__tests__/command_args_form.test.js

@@ -0,0 +1,103 @@
+/**
+ * @jest-environment jsdom
+ */
+import CommandArgsForm from '../command_args_form'
+
+const baseCommand = (overrides = {}) => ({
+  name: 'foo_tool',
+  label: '/foo_tool',
+  input_schema: [
+    { name: 'creative_id', type: 'string', required: false },
+    { name: 'topic_id', type: 'string', required: false },
+    { name: 'note', type: 'string', required: false }
+  ],
+  ...overrides
+})
+
+const fieldFor = (paramName) =>
+  document.querySelector(`[data-param-name="${paramName}"]`)
+
+describe('CommandArgsForm context auto-fill', () => {
+  let container
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('fills creative_id and topic_id from contextValuesFn', () => {
+    const form = new CommandArgsForm({
+      container,
+      contextValuesFn: () => ({ creative_id: '12508', topic_id: '8455' })
+    })
+
+    form.show(baseCommand())
+
+    expect(fieldFor('creative_id').value).toBe('12508')
+    expect(fieldFor('topic_id').value).toBe('8455')
+    expect(fieldFor('note').value).toBe('')
+  })
+
+  test('explicit default_value beats context auto-fill', () => {
+    const form = new CommandArgsForm({
+      container,
+      contextValuesFn: () => ({ creative_id: '12508', topic_id: '8455' })
+    })
+
+    form.show(baseCommand({
+      input_schema: [
+        { name: 'creative_id', type: 'string', required: false, default_value: '999' },
+        { name: 'topic_id', type: 'string', required: false }
+      ]
+    }))
+
+    expect(fieldFor('creative_id').value).toBe('999')
+    expect(fieldFor('topic_id').value).toBe('8455')
+  })
+
+  test('does not fill unrelated params even if names overlap', () => {
+    const form = new CommandArgsForm({
+      container,
+      contextValuesFn: () => ({ creative_id: '12508', topic_id: '8455', note: 'ctx' })
+    })
+
+    form.show(baseCommand())
+
+    expect(fieldFor('note').value).toBe('')
+  })
+
+  test('missing context values leave fields empty', () => {
+    const form = new CommandArgsForm({
+      container,
+      contextValuesFn: () => ({ creative_id: null, topic_id: '' })
+    })
+
+    form.show(baseCommand())
+
+    expect(fieldFor('creative_id').value).toBe('')
+    expect(fieldFor('topic_id').value).toBe('')
+  })
+
+  test('contextValuesFn throwing does not break form', () => {
+    const form = new CommandArgsForm({
+      container,
+      contextValuesFn: () => { throw new Error('boom') }
+    })
+
+    expect(() => form.show(baseCommand())).not.toThrow()
+    expect(fieldFor('creative_id').value).toBe('')
+  })
+
+  test('no contextValuesFn provided behaves like before', () => {
+    const form = new CommandArgsForm({ container })
+
+    form.show(baseCommand())
+
+    expect(fieldFor('creative_id').value).toBe('')
+    expect(fieldFor('topic_id').value).toBe('')
+  })
+})

data/app/javascript/modules/__tests__/html_content_empty.test.js

@@ -0,0 +1,41 @@
+/**
+ * @jest-environment jsdom
+ */
+import { isHtmlEmpty } from '../html_content_empty';
+
+describe('isHtmlEmpty', () => {
+  test('returns true for null/empty string', () => {
+    expect(isHtmlEmpty('')).toBe(true);
+    expect(isHtmlEmpty(null)).toBe(true);
+    expect(isHtmlEmpty(undefined)).toBe(true);
+  });
+
+  test('returns true for whitespace-only HTML', () => {
+    expect(isHtmlEmpty('<p>   </p>')).toBe(true);
+    expect(isHtmlEmpty('<div><br></div>')).toBe(true);
+  });
+
+  test('returns false when there is text content', () => {
+    expect(isHtmlEmpty('<p>hello</p>')).toBe(false);
+  });
+
+  test('returns false for image-only HTML', () => {
+    expect(isHtmlEmpty('<p><img src="/blob/abc.png"></p>')).toBe(false);
+  });
+
+  test('returns false for action-text-attachment-only HTML', () => {
+    expect(isHtmlEmpty(
+      '<action-text-attachment sgid="abc" url="/blob" filename="file.png"></action-text-attachment>'
+    )).toBe(false);
+  });
+
+  test('returns false for figure.attachment-only HTML (trix-style)', () => {
+    expect(isHtmlEmpty(
+      '<figure class="attachment attachment--file" data-trix-attachment=\'{"sgid":"abc"}\'></figure>'
+    )).toBe(false);
+  });
+
+  test('returns false for [data-trix-attachment]-only HTML', () => {
+    expect(isHtmlEmpty('<div data-trix-attachment=\'{"sgid":"x"}\'></div>')).toBe(false);
+  });
+});

data/app/javascript/modules/__tests__/markdown_source_reconcile.test.js

@@ -0,0 +1,70 @@
+/**
+ * @jest-environment jsdom
+ */
+import { reconcileMarkdownSource } from '../markdown_source_reconcile';
+
+const DATA_URI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+const BLOB_PATH = '/rails/active_storage/blobs/redirect/abc123def/image.png';
+const DATA_URI_2 = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+const BLOB_PATH_2 = '/rails/active_storage/blobs/redirect/xyz789/two.gif';
+
+describe('reconcileMarkdownSource', () => {
+  test('returns rewritten value when current still equals saved', () => {
+    const saved = `Hello ![pic](${DATA_URI}) world`;
+    const rewritten = `Hello ![pic](${BLOB_PATH}) world`;
+    expect(reconcileMarkdownSource(saved, rewritten, saved)).toBe(rewritten);
+  });
+
+  test('returns null when no rewrites happened', () => {
+    expect(reconcileMarkdownSource('a', 'a', 'a')).toBe(null);
+  });
+
+  test('returns null when saved has no data URI and current diverged from saved', () => {
+    expect(reconcileMarkdownSource('saved', 'rewritten', 'user typed something else')).toBe(null);
+  });
+
+  test('merges substitutions when user typed AFTER the data URI mid-save', () => {
+    const saved = `![pic](${DATA_URI})`;
+    const rewritten = `![pic](${BLOB_PATH})`;
+    const current = `![pic](${DATA_URI})\n\nNew paragraph user typed during save.`;
+    const expected = `![pic](${BLOB_PATH})\n\nNew paragraph user typed during save.`;
+    expect(reconcileMarkdownSource(saved, rewritten, current)).toBe(expected);
+  });
+
+  test('merges substitutions when user typed BEFORE the data URI mid-save', () => {
+    const saved = `start ![pic](${DATA_URI}) end`;
+    const rewritten = `start ![pic](${BLOB_PATH}) end`;
+    const current = `inserted at top\n\nstart ![pic](${DATA_URI}) end`;
+    const expected = `inserted at top\n\nstart ![pic](${BLOB_PATH}) end`;
+    expect(reconcileMarkdownSource(saved, rewritten, current)).toBe(expected);
+  });
+
+  test('handles multiple data URIs in a single save', () => {
+    const saved = `A ![1](${DATA_URI}) B ![2](${DATA_URI_2}) C`;
+    const rewritten = `A ![1](${BLOB_PATH}) B ![2](${BLOB_PATH_2}) C`;
+    const current = `A ![1](${DATA_URI}) B ![2](${DATA_URI_2}) C\n\nextra text`;
+    const expected = `A ![1](${BLOB_PATH}) B ![2](${BLOB_PATH_2}) C\n\nextra text`;
+    expect(reconcileMarkdownSource(saved, rewritten, current)).toBe(expected);
+  });
+
+  test('handles reference-style data URI definitions', () => {
+    const saved = `![pic][p]\n\n[p]: ${DATA_URI}`;
+    const rewritten = `![pic][p]\n\n[p]: ${BLOB_PATH}`;
+    const current = `![pic][p]\n\nuser typed more\n\n[p]: ${DATA_URI}`;
+    const expected = `![pic][p]\n\nuser typed more\n\n[p]: ${BLOB_PATH}`;
+    expect(reconcileMarkdownSource(saved, rewritten, current)).toBe(expected);
+  });
+
+  test('returns null when user removed the data URI before response', () => {
+    const saved = `![pic](${DATA_URI})`;
+    const rewritten = `![pic](${BLOB_PATH})`;
+    const current = 'user wiped everything';
+    expect(reconcileMarkdownSource(saved, rewritten, current)).toBe(null);
+  });
+
+  test('returns null on non-string inputs', () => {
+    expect(reconcileMarkdownSource(null, 'a', 'a')).toBe(null);
+    expect(reconcileMarkdownSource('a', null, 'a')).toBe(null);
+    expect(reconcileMarkdownSource('a', 'a', null)).toBe(null);
+  });
+});