Show attribution only in copied HTML

Author: 0disoft

src/lib/dc/export-document.ts

@@ -30,6 +30,7 @@ export type DcExportOptions = {
   showLineNumbers: boolean;
   documentTheme?: DcDocumentTheme;
   structure?: DcExportStructure;
+  includeAttribution?: boolean;
 };
 
 export type DcExportStructure = "dcTable";
@@ -386,6 +387,18 @@ function textOf(node: JSONContent): string {
   return childrenOf(node).map(textOf).join("");
 }
 
+function hasRenderableDocumentContent(node: JSONContent): boolean {
+  if (typeof node.text === "string" && node.text.trim()) {
+    return true;
+  }
+
+  if (node.type === "horizontalRule") {
+    return true;
+  }
+
+  return childrenOf(node).some(hasRenderableDocumentContent);
+}
+
 function safeSize(value: string, fallback: string): string {
   const normalized = value.trim();
   return /^\d{1,2}px$/.test(normalized) ? normalized : fallback;
@@ -2619,9 +2632,15 @@ export async function exportDocumentToDcHtml(
   document: JSONContent,
   options: DcExportOptions,
 ): Promise<string> {
+  if (!hasRenderableDocumentContent(document)) {
+    return "";
+  }
+
   const palette = documentPalette(options);
   const body = await renderBlockAsync(document, options, { proseTableSafe: true });
-  const bodyWithAttribution = `${body}${renderAttributionFooter(options)}`;
+  const bodyWithAttribution = options.includeAttribution
+    ? `${body}${renderAttributionFooter(options)}`
+    : body;
   const wrapperStyle = joinStyle({
     display: "block",
     "background-color": palette.articleBackground,

src/routes/+page.svelte

@@ -267,7 +267,7 @@
     let renderTurn = 0;
 
     const htmlSize = $derived(
-        `${Math.max(1, Math.ceil(html.length / 1024))}KB`,
+        html.length === 0 ? "0KB" : `${Math.ceil(html.length / 1024)}KB`,
     );
     const copyLabel = $derived(copyState === "copied" ? "복사됨" : "디씨 복사");
     const sourceCopyLabel = $derived(
@@ -2246,7 +2246,12 @@
         copyState = "idle";
 
         try {
-            await copyDcHtml(html, editor?.getText() ?? "");
+            const copyHtml = await exportDocumentToDcHtml(documentJson, {
+                ...exportOptions(),
+                includeAttribution: true,
+            });
+
+            await copyDcHtml(copyHtml, editor?.getText() ?? "");
             copyState = "copied";
             window.setTimeout(() => {
                 copyState = "idle";
@@ -3492,8 +3497,6 @@
                 >
                     {#if html}
                         {@html html}
-                    {:else}
-                        <div class="empty">...</div>
                     {/if}
                 </div>
             {:else}
@@ -3711,7 +3714,7 @@
     }
 
     .toolbar .copy-button:disabled {
-        cursor: wait;
+        cursor: not-allowed;
         opacity: 0.72;
     }
 
@@ -4252,7 +4255,7 @@
     }
 
     .source-copy-button:disabled {
-        cursor: wait;
+        cursor: not-allowed;
         opacity: 0.66;
     }
 
@@ -5152,25 +5155,6 @@
         max-width: 100%;
     }
 
-    .empty {
-        color: oklch(51.52% 0.02 87.11);
-        font-family:
-            Cascadia Mono,
-            D2Coding,
-            나눔고딕코딩,
-            Noto Sans Mono CJK,
-            JetBrains Mono,
-            Fira Code,
-            Hack,
-            Source Code Pro,
-            IBM Plex Mono,
-            Roboto Mono,
-            Consolas,
-            Menlo,
-            Monaco,
-            monospace;
-    }
-
     .copy-error {
         margin: 14px 0 0;
         color: var(--danger);

tests/e2e/paste-preview.spec.ts

@@ -148,6 +148,9 @@ test("renders the paste tool", async ({ page }) => {
   await expect(page.locator(".editor-surface")).not.toContainText(
     "Go 반복문 정복: for 하나로 모든 루프를 제어한다",
   );
+  await expect(page.getByText("HTML 0KB")).toBeVisible();
+  await expect(page.locator(".preview-surface")).not.toContainText("...");
+  await expect(page.getByRole("button", { name: /디씨 복사/ })).toHaveCSS("cursor", "not-allowed");
   page.once("dialog", async (dialog) => {
     expect(dialog.message()).toContain("예시 템플릿");
     await dialog.accept();
@@ -275,6 +278,7 @@ test("renders the paste tool", async ({ page }) => {
   await expect(htmlSource).toHaveValue(/while_style\.go/);
   await expect(htmlSource).toHaveValue(/infinite_loop\.go/);
   await expect(htmlSource).toHaveValue(/range_with_index\.go/);
+  await expect(htmlSource).not.toHaveValue(/Created with dc-code-paste/);
   await expect(htmlSource).toHaveValue(/line-height:18px;vertical-align:middle/);
   await expect(htmlSource).not.toHaveValue(/<pre/);
   await expect(htmlSource).toHaveValue(/&nbsp;&nbsp;&nbsp;&nbsp;/);

tests/unit/export-document.test.ts

@@ -27,7 +27,22 @@ function textOfTestDocument(node: JSONContent): string {
 }
 
 describe("exportDocumentToDcHtml", () => {
-  it("appends a subtle linked attribution footer to copied DC HTML", async () => {
+  it("returns empty HTML for an empty editor document", async () => {
+    const document: JSONContent = {
+      type: "doc",
+      content: [{ type: "paragraph" }],
+    };
+
+    await expect(exportDocumentToDcHtml(document, exportOptions)).resolves.toBe("");
+    await expect(
+      exportDocumentToDcHtml(document, {
+        ...exportOptions,
+        includeAttribution: true,
+      }),
+    ).resolves.toBe("");
+  });
+
+  it("omits the attribution footer by default for preview HTML", async () => {
     const document: JSONContent = {
       type: "doc",
       content: [
@@ -39,6 +54,27 @@ describe("exportDocumentToDcHtml", () => {
     };
 
     const html = await exportDocumentToDcHtml(document, exportOptions);
+
+    expect(html).toContain("본문 내용");
+    expect(html).not.toContain("Created with dc-code-paste");
+    expect(html).not.toContain('href="https://0disoft.github.io/dc-code-paste/"');
+  });
+
+  it("appends a subtle linked attribution footer to copied DC HTML", async () => {
+    const document: JSONContent = {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "본문 내용" }],
+        },
+      ],
+    };
+
+    const html = await exportDocumentToDcHtml(document, {
+      ...exportOptions,
+      includeAttribution: true,
+    });
     const footerStart = html.indexOf("Created with dc-code-paste");
 
     expect(footerStart).toBeGreaterThan(html.indexOf("본문 내용"));
@@ -66,6 +102,7 @@ describe("exportDocumentToDcHtml", () => {
     const html = await exportDocumentToDcHtml(document, {
       ...exportOptions,
       documentTheme: "darkEditorial",
+      includeAttribution: true,
     });
 
     expect(html).toContain("Created with dc-code-paste");
@@ -637,6 +674,7 @@ describe("exportDocumentToDcHtml", () => {
       bodyFontSize: "17px",
       codeFontSize: "15px",
       theme: "catppuccin-mocha",
+      includeAttribution: true,
     });
 
     expect(markdown.length).toBeGreaterThan(3_000);