Add copy to clipboard when clicking on a math result

src/editor/block/math.js

@@ -18,6 +18,19 @@ class MathResult extends WidgetType {
         let wrap = document.createElement("span")
         wrap.className = "heynote-math-result"
         wrap.innerHTML = this.result
+        wrap.addEventListener("click", (e) => {
+            e.preventDefault()
+            navigator.clipboard.writeText(this.result)
+            const copyElement = document.createElement("i")
+            copyElement.className = "heynote-math-result-copied"
+            copyElement.innerHTML = "Copied!"
+            wrap.appendChild(copyElement)
+            copyElement.offsetWidth // trigger reflow so that the animation is shown
+            copyElement.className = "heynote-math-result-copied fade-out"
+            setTimeout(() => {
+                copyElement.remove()
+            }, 1700)
+        })
         return wrap
     }
     ignoreEvent() { return false }

src/editor/theme/base.js

@@ -99,5 +99,22 @@ export const heynoteBase = EditorView.theme({
         padding: '0px 4px',
         borderRadius: '2px',
         marginLeft: '12px',
+        boxShadow: '0 0 3px rgba(0,0,0, 0.1)',
+        cursor: 'pointer',
+        position: "relative",
+        whiteSpace: "nowrap",
+    },
+    '.heynote-math-result-copied': {
+        position: "absolute",
+        top: "0px",
+        left: "0px",
+        marginLeft: "calc(100% + 10px)",
+        width: "60px",
+        transition: "opacity 500ms",
+        transitionDelay: "1000ms",
+        color: "rgba(0,0,0, 0.8)",
+    },
+    '.heynote-math-result-copied.fade-out': {
+        opacity: 0,
     },
 })

src/editor/theme/dark.js

@@ -137,6 +137,10 @@ const darkTheme = EditorView.theme({
     ".heynote-math-result": {
         background: "#0e1217",
         color: "#a0e7c7",
+        boxShadow: '0 0 3px rgba(0,0,0, 0.3)',
+    },
+    '.heynote-math-result-copied': {
+        color: "rgba(220,240,230, 1.0)",
     },
 }, { dark: true });