Merge pull request #947 from MuckRock/allanlasser/embed-url

MuckRock · Dec 5, 2024 · d534f50 · d534f50
2 parents 3dcfab5 + 9f349f2
commit d534f50
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 59 deletions.
diff --git a/src/langs/json/en.json b/src/langs/json/en.json
@@ -546,7 +546,8 @@
     "copiedToClipboard": "Copied to clipboard",
     "couldNotCopyToClipboard": "Could not copy to clipboard",
     "permalink": "Permalink",
-    "iframe": "Embed HTML iFrame",
+    "embed": "Embed URL",
+    "iframe": "HTML iFrame",
     "preview": "Embed Preview",
     "save": "Save Settings",
     "customize": "Customize Embed",

diff --git a/src/lib/components/common/Copy.svelte b/src/lib/components/common/Copy.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+  import { Copy16 } from "svelte-octicons";
+
+  import Button from "./Button.svelte";
+
+  import copy from "$lib/utils/copy";
+
+  export let text: string;
+  export let hideLabel = false;
+</script>
+
+<Button
+  size="small"
+  ghost
+  on:click={() => copy(text)}
+  disabled={!navigator.clipboard}
+>
+  <Copy16 height={14} width={14} />
+  {#if !hideLabel}{$_("share.copy")}{/if}
+</Button>
diff --git a/src/lib/components/documents/Share.svelte b/src/lib/components/documents/Share.svelte
@@ -11,7 +11,6 @@
   import { _ } from "svelte-i18n";
   import {
     Check16,
-    Copy16,
     File16,
     Hash16,
     Note16,
@@ -21,6 +20,7 @@
   } from "svelte-octicons";
 
   import Button from "$lib/components/common/Button.svelte";
+  import Copy from "../common/Copy.svelte";
   import CustomizeEmbed, { embedSettings } from "./CustomizeEmbed.svelte";
   import Field from "$lib/components/common/Field.svelte";
   import FieldLabel from "$lib/components/common/FieldLabel.svelte";
@@ -35,7 +35,6 @@
   import Modal from "$lib/components/layouts/Modal.svelte";
   import Edit from "$lib/components/forms/Edit.svelte";
 
-  import copy from "$lib/utils/copy";
   import { createEmbedSearchParams } from "$lib/utils/embed";
   import {
     canonicalPageUrl,
@@ -188,20 +187,22 @@
       <Field>
         <FieldLabel>
           {$_("share.permalink")}
-          <Button
-            slot="action"
-            size="small"
-            ghost
-            mode="primary"
-            on:click={() => copy(String(permalink))}
-            disabled={!navigator.clipboard}
-          >
-            <Copy16 />
-            {$_("share.copy")}
-          </Button>
+          <Copy slot="action" text={permalink.href} />
         </FieldLabel>
         <Text
-          value={String(permalink)}
+          value={permalink.href}
+          --font-family="var(--font-mono)"
+          --font-size="var(--font-sm)"
+        />
+      </Field>
+
+      <Field>
+        <FieldLabel>
+          {$_("share.embed")}
+          <Copy slot="action" text={embedSrc.href} />
+        </FieldLabel>
+        <Text
+          value={embedSrc.href}
           --font-family="var(--font-mono)"
           --font-size="var(--font-sm)"
         />
@@ -210,17 +211,7 @@
       <Field>
         <FieldLabel>
           {$_("share.iframe")}
-          <Button
-            slot="action"
-            size="small"
-            ghost
-            mode="primary"
-            on:click={() => copy(iframe)}
-            disabled={!navigator.clipboard}
-          >
-            <Copy16 />
-            {$_("share.copy")}
-          </Button>
+          <Copy slot="action" text={iframe} />
         </FieldLabel>
         <TextArea
           value={iframe}

diff --git a/src/lib/components/documents/tests/Share.test.ts b/src/lib/components/documents/tests/Share.test.ts
@@ -43,11 +43,15 @@ describe("Share", () => {
     // Document tab
     await user.click(screen.getByText("Document"));
     expect(inputs[0]).toHaveValue(canonicalUrl(document).toString());
-    expect(inputs[1]).toHaveValue(`<iframe src="${embedUrl(document)}" />`);
+    expect(inputs[1]).toHaveValue(embedUrl(document).href);
+    expect(inputs[2]).toHaveValue(`<iframe src="${embedUrl(document)}" />`);
     // Page tab
     await user.click(screen.getByText("Page"));
     expect(inputs[0]).toHaveValue(pageUrl(document, 1).toString());
     expect(inputs[1]).toHaveValue(
+      canonicalPageUrl(document, 1).href + "?embed=1",
+    );
+    expect(inputs[2]).toHaveValue(
       `<iframe src="${canonicalPageUrl(document, 1)}?embed=1" />`,
     );
     // Note tab
@@ -56,6 +60,9 @@ describe("Share", () => {
       noteUrl(document, document.notes?.[0]!).toString(),
     );
     expect(inputs[1]).toHaveValue(
+      `${canonicalNoteUrl(document, document.notes?.[0]!)}?embed=1`,
+    );
+    expect(inputs[2]).toHaveValue(
       `<iframe src="${canonicalNoteUrl(document, document.notes?.[0]!)}?embed=1" />`,
     );
   });
@@ -65,21 +72,24 @@ describe("Share", () => {
     let inputs = screen.getAllByRole("textbox");
     // Default settings
     expect(inputs[0]).toHaveValue(canonicalUrl(document).toString());
-    expect(inputs[1]).toHaveValue(`<iframe src="${embedUrl(document)}" />`);
+    expect(inputs[1]).toHaveValue(embedUrl(document).href);
+    expect(inputs[2]).toHaveValue(`<iframe src="${embedUrl(document)}" />`);
     // Customize width and height
     await user.click(screen.getByText("Customize Embed"));
     expect(screen.getByText("Width")).toBeInTheDocument();
     const radioSelections = screen.getAllByLabelText("Fixed");
     // Width
     await user.click(radioSelections[0]!);
     expect(inputs[0]).toHaveValue(canonicalUrl(document).toString());
-    expect(inputs[1]).toHaveValue(
+    expect(inputs[1]).toHaveValue(`${embedUrl(document)}&width=500`);
+    expect(inputs[2]).toHaveValue(
       `<iframe src="${embedUrl(document)}&width=500" width="500" />`,
     );
     // Height
     await user.click(radioSelections[1]!);
     expect(inputs[0]).toHaveValue(canonicalUrl(document).toString());
-    expect(inputs[1]).toHaveValue(
+    expect(inputs[1]).toHaveValue(`${embedUrl(document)}&width=500&height=500`);
+    expect(inputs[2]).toHaveValue(
       `<iframe src="${embedUrl(document)}&width=500&height=500" width="500" height="500" />`,
     );
   });

diff --git a/src/lib/components/projects/ProjectShare.svelte b/src/lib/components/projects/ProjectShare.svelte
@@ -1,20 +1,22 @@
 <script lang="ts">
-  import { _ } from "svelte-i18n";
-  import { Copy16, ShieldLock24 } from "svelte-octicons";
-
   import type { Project } from "$lib/api/types";
-  import { canonicalUrl, embedUrl } from "$lib/api/projects";
+
+  import { _ } from "svelte-i18n";
+  import { ShieldLock24 } from "svelte-octicons";
 
   import Button from "$lib/components/common/Button.svelte";
+  import Copy from "../common/Copy.svelte";
   import Field from "$lib/components/common/Field.svelte";
   import FieldLabel from "$lib/components/common/FieldLabel.svelte";
   import Text from "$lib/components/inputs/Text.svelte";
   import TextArea from "$lib/components/inputs/TextArea.svelte";
   import Tip from "$lib/components/common/Tip.svelte";
+
   import Portal from "$lib/components/layouts/Portal.svelte";
   import Modal from "$lib/components/layouts/Modal.svelte";
   import EditProject from "$lib/components/forms/EditProject.svelte";
-  import copy from "$lib/utils/copy";
+
+  import { canonicalUrl, embedUrl } from "$lib/api/projects";
 
   export let project: Project;
 
@@ -26,7 +28,7 @@
 
   $: permalink = canonicalUrl(project);
   $: embedSrc = embedUrl(project);
-  $: iframe = `<iframe src="${embedUrl(project).href}" />`;
+  $: iframe = `<iframe src="${embedSrc.href}" />`;
 </script>
 
 <div class="share">
@@ -49,41 +51,35 @@
         </Tip>
       </div>
     {/if}
+
     <Field>
       <FieldLabel>
         {$_("share.permalink")}
-        <Button
-          slot="action"
-          size="small"
-          ghost
-          mode="primary"
-          on:click={() => copy(String(permalink))}
-          disabled={!navigator.clipboard}
-        >
-          <Copy16 />
-          {$_("share.copy")}
-        </Button>
+        <Copy slot="action" text={permalink.href} />
       </FieldLabel>
       <Text
-        value={String(permalink)}
+        value={permalink.href}
         --font-family="var(--font-mono)"
         --font-size="var(--font-sm)"
       />
     </Field>
+
+    <Field>
+      <FieldLabel>
+        {$_("share.embed")}
+        <Copy slot="action" text={embedSrc.href} />
+      </FieldLabel>
+      <Text
+        value={embedSrc.href}
+        --font-family="var(--font-mono)"
+        --font-size="var(--font-sm)"
+      />
+    </Field>
+
     <Field>
       <FieldLabel>
         {$_("share.iframe")}
-        <Button
-          slot="action"
-          size="small"
-          ghost
-          mode="primary"
-          on:click={() => copy(iframe)}
-          disabled={!navigator.clipboard}
-        >
-          <Copy16 />
-          {$_("share.copy")}
-        </Button>
+        <Copy slot="action" text={iframe} />
       </FieldLabel>
       <TextArea
         value={iframe}