Add copy and share buttons

Author: aryanpingle

src/components/RunicEditor/index.css

@@ -152,7 +152,7 @@ collapse the details tag. */
 }
 
 .runic-editor__download-group {
-    margin-top: 2em;
+    margin-top: 1em;
     display: flex;
     justify-content: center;
     align-items: center;

src/components/RunicEditor/index.tsx

@@ -4,12 +4,14 @@ import { h, Component, VNode } from "preact";
 import { RuneSVG } from "components/RuneSVG";
 import { translateSentence } from "src/ipa";
 import { RangeInput } from "components/RangeInput";
-import { downloadURI, drawSVGToCanvas, svgToUri } from "./utils";
+import { downloadURI, drawSVGToCanvas, svgToImageBlob, svgToUri } from "./utils";
 import {
     CenterAlignIcon,
+    CopyIcon,
     DownloadIcon,
     LeftAlignIcon,
     RightAlignIcon,
+    ShareIcon,
 } from "components/icons";
 import { ChipSelect } from "components/ChipSelect";
 import { ColorInput } from "components/ColorInput";
@@ -120,6 +122,20 @@ function getSettings(obj: RunicEditor): VNode {
                     <DownloadIcon /> JPEG
                 </button>
             </div>
+            <div className="runic-editor__download-group">
+                <button
+                    className="runic-editor__download-button"
+                    onClick={() => obj.copyAsPNG()}
+                >
+                    <CopyIcon /> Copy
+                </button>
+                <button
+                    className="runic-editor__download-button"
+                    onClick={() => obj.sharePNG()}
+                >
+                    <ShareIcon /> Share
+                </button>
+            </div>
         </div>
     );
 }
@@ -185,9 +201,38 @@ export class RunicEditor extends Component<Props, State> {
         );
     };
 
-    // Miscellaneous
+    copyAsPNG = async () => {
+        this.usePreparedSVG(async (svgElement: SVGElement) => {
+            const blob = await svgToImageBlob(svgElement);
 
-    download = async (format: "svg" | "png" | "jpeg") => {
+            await navigator.clipboard.write?.([
+                new ClipboardItem({
+                    "image/png": blob,
+                }),
+            ]);
+        });
+    };
+
+    sharePNG = async () => {
+        this.usePreparedSVG(async (svgElement: SVGElement) => {
+            const blob = await svgToImageBlob(svgElement);
+
+            const file = new File([blob], "rune.png", {
+                lastModified: Date.now(),
+                type: "image/png",
+            });
+
+            const shareData: ShareData = {
+                files: [file],
+            };
+
+            if (navigator.canShare?.(shareData)) {
+                navigator.share(shareData);
+            }
+        });
+    };
+
+    usePreparedSVG = (callback: (svgElement: SVGElement) => void) => {
         const svgElement = this.runeSVGElement.svgElement;
 
         // Add background color (only if transparentBackground is disabled)
@@ -196,22 +241,29 @@ export class RunicEditor extends Component<Props, State> {
             svgElement.style.setProperty("background-color", backgroundColor);
         }
 
-        const filename = "rune";
-
-        if (format === "svg") {
-            const uri = svgToUri(svgElement);
-            downloadURI(uri, `${filename}.svg`);
-        } else {
-            // Draw the svg with styles to canvas, then download
-            const canvas = await drawSVGToCanvas(svgElement);
-            const uri = canvas.toDataURL(`image/${format}`);
-            downloadURI(uri, `${filename}.${format}`);
-        }
+        callback(svgElement);
 
         // Remove background color
         svgElement.style.removeProperty("background-color");
     };
 
+    // Miscellaneous
+
+    download = async (format: "svg" | "png" | "jpeg") => {
+        this.usePreparedSVG(async (svgElement: SVGElement) => {
+            const filename = "rune";
+            if (format === "svg") {
+                const uri = svgToUri(svgElement);
+                downloadURI(uri, `${filename}.svg`);
+            } else {
+                // Draw the svg with styles to canvas, then download
+                const canvas = await drawSVGToCanvas(svgElement);
+                const uri = canvas.toDataURL(`image/${format}`);
+                downloadURI(uri, `${filename}.${format}`);
+            }
+        });
+    };
+
     render() {
         return (
             <div className="runic-editor">

src/components/RunicEditor/utils.ts

@@ -45,6 +45,18 @@ export async function drawSVGToCanvas(
     });
 }
 
+export async function svgToImageBlob(svgElement: SVGElement) {
+    const canvas = await drawSVGToCanvas(svgElement);
+    let resultBlob = null;
+    await new Promise((resolve) => {
+        canvas.toBlob((blob) => {
+            resultBlob = blob;
+            resolve(0);
+        });
+    });
+    return resultBlob;
+}
+
 export function downloadURI(uri: string, filename: string = "tempfilename") {
     let link = document.createElement("a");
     link.download = filename;

src/components/icons.tsx

@@ -244,3 +244,31 @@ export const EnterKeyIcon = (props: preact.JSX.HTMLAttributes) => (
         <path d="M19,6a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H7.41l1.3-1.29A1,1,0,0,0,7.29,9.29l-3,3a1,1,0,0,0-.21.33,1,1,0,0,0,0,.76,1,1,0,0,0,.21.33l3,3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L7.41,14H17a3,3,0,0,0,3-3V7A1,1,0,0,0,19,6Z" />
     </svg>
 );
+
+export const ShareIcon = (props: preact.JSX.HTMLAttributes) => (
+    // @ts-ignore - HTML attributes are valid for SVG
+    <svg
+        width="800px"
+        height="800px"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path d="M18,14a4,4,0,0,0-3.08,1.48l-5.1-2.35a3.64,3.64,0,0,0,0-2.26l5.1-2.35A4,4,0,1,0,14,6a4.17,4.17,0,0,0,.07.71L8.79,9.14a4,4,0,1,0,0,5.72l5.28,2.43A4.17,4.17,0,0,0,14,18a4,4,0,1,0,4-4ZM18,4a2,2,0,1,1-2,2A2,2,0,0,1,18,4ZM6,14a2,2,0,1,1,2-2A2,2,0,0,1,6,14Zm12,6a2,2,0,1,1,2-2A2,2,0,0,1,18,20Z" />
+    </svg>
+);
+
+export const CopyIcon = (props: preact.JSX.HTMLAttributes) => (
+    // @ts-ignore - HTML attributes are valid for SVG
+    <svg
+        width="800px"
+        height="800px"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path d="M21,8.94a1.31,1.31,0,0,0-.06-.27l0-.09a1.07,1.07,0,0,0-.19-.28h0l-6-6h0a1.07,1.07,0,0,0-.28-.19.32.32,0,0,0-.09,0A.88.88,0,0,0,14.05,2H10A3,3,0,0,0,7,5V6H6A3,3,0,0,0,3,9V19a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V18h1a3,3,0,0,0,3-3V9S21,9,21,8.94ZM15,5.41,17.59,8H16a1,1,0,0,1-1-1ZM15,19a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V9A1,1,0,0,1,6,8H7v7a3,3,0,0,0,3,3h5Zm4-4a1,1,0,0,1-1,1H10a1,1,0,0,1-1-1V5a1,1,0,0,1,1-1h3V7a3,3,0,0,0,3,3h3Z" />
+    </svg>
+);