fix(editor): preserve copied note images

Add note clipboard text serialization that keeps selected image nodes as markdown image references.

Author: ComputelessComputer

packages/editor/src/note/index.tsx

@@ -48,6 +48,7 @@ import {
   type PlaceholderFunction,
   SearchQuery,
   clearMarksOnEnterPlugin,
+  clipboardPlugin,
   clipPastePlugin,
   ensureImageTrailingParagraphs,
   fileHandlerPlugin,
@@ -445,6 +446,7 @@ export const NoteEditor = forwardRef<NoteEditorRef, NoteEditorProps>(
         history(),
         dropCursor(),
         gapCursor(),
+        clipboardPlugin(),
         hashtagPlugin(),
         imageTrailingParagraphPlugin(),
         searchPlugin(),

packages/editor/src/plugins/clipboard.test.ts

@@ -0,0 +1,47 @@
+import { Fragment, Slice } from "prosemirror-model";
+import { describe, expect, test } from "vitest";
+
+import { schema } from "../note/schema";
+import { serializeClipboardText } from "./clipboard";
+
+describe("serializeClipboardText", () => {
+  test("serializes selected images as markdown", () => {
+    const slice = new Slice(
+      Fragment.fromArray([
+        schema.nodes.paragraph.create(null, schema.text("Before")),
+        schema.nodes.image.create({
+          src: "asset://localhost/session/image.png",
+          alt: "diagram",
+          title: "Architecture",
+          editorWidth: 64,
+        }),
+        schema.nodes.paragraph.create(null, schema.text("After")),
+      ]),
+      0,
+      0,
+    );
+
+    expect(serializeClipboardText(slice)).toBe(
+      'Before\n\n![diagram](asset://localhost/session/image.png "char-editor-width=64|Architecture")\n\nAfter',
+    );
+  });
+
+  test("escapes markdown image fields", () => {
+    const slice = new Slice(
+      Fragment.from(
+        schema.nodes.image.create({
+          src: "https://example.com/screenshots/a(b).png",
+          alt: "diagram] detail",
+          title: 'Quote "title"',
+          editorWidth: 42,
+        }),
+      ),
+      0,
+      0,
+    );
+
+    expect(serializeClipboardText(slice)).toBe(
+      '![diagram\\] detail](https://example.com/screenshots/a\\(b\\).png "char-editor-width=42|Quote \\"title\\"")',
+    );
+  });
+});

packages/editor/src/plugins/clipboard.ts

@@ -0,0 +1,69 @@
+import type { Node as PMNode, Slice } from "prosemirror-model";
+import { Plugin, PluginKey } from "prosemirror-state";
+
+const EDITOR_WIDTH_PREFIX = "char-editor-width=";
+const MIN_EDITOR_WIDTH = 15;
+const MAX_EDITOR_WIDTH = 100;
+
+function normalizeEditorWidth(value: unknown) {
+  if (typeof value !== "number" || Number.isNaN(value)) {
+    return null;
+  }
+
+  return Math.min(
+    MAX_EDITOR_WIDTH,
+    Math.max(MIN_EDITOR_WIDTH, Math.round(value)),
+  );
+}
+
+function serializeImageTitleMetadata({
+  editorWidth,
+  title,
+}: {
+  editorWidth?: number | null;
+  title?: string | null;
+}) {
+  const normalizedTitle = title || null;
+  const normalizedWidth = normalizeEditorWidth(editorWidth);
+
+  if (!normalizedWidth) {
+    return normalizedTitle;
+  }
+
+  return normalizedTitle
+    ? `${EDITOR_WIDTH_PREFIX}${normalizedWidth}|${normalizedTitle}`
+    : `${EDITOR_WIDTH_PREFIX}${normalizedWidth}`;
+}
+
+function imageLeafText(node: PMNode) {
+  const alt = (node.attrs.alt || "").replace(/]/g, "\\]");
+  const src = node.attrs.src ? node.attrs.src.replace(/[()]/g, "\\$&") : "";
+  const title = serializeImageTitleMetadata({
+    editorWidth: node.attrs.editorWidth,
+    title: node.attrs.title,
+  });
+  const titlePart = title ? ` "${title.replace(/"/g, '\\"')}"` : "";
+
+  return `![${alt}](${src}${titlePart})`;
+}
+
+export function serializeClipboardText(slice: Slice) {
+  return slice.content.textBetween(0, slice.content.size, "\n\n", (node) => {
+    if (node.type.name === "image") {
+      return imageLeafText(node);
+    }
+
+    return node.textContent;
+  });
+}
+
+export function clipboardPlugin() {
+  return new Plugin({
+    key: new PluginKey("clipboard"),
+    props: {
+      clipboardTextSerializer(slice) {
+        return serializeClipboardText(slice);
+      },
+    },
+  });
+}

packages/editor/src/plugins/index.ts

@@ -1,4 +1,5 @@
 export { appLinkPastePlugin } from "./app-link-paste";
+export { clipboardPlugin, serializeClipboardText } from "./clipboard";
 export { clearMarksOnEnterPlugin } from "./clear-marks-on-enter";
 export {
   clipNodeSpec,