add select range button to */share page

D3press3dd · Aug 24, 2023 · 73e6e22 · 73e6e22
1 parent 0389809
commit 73e6e22
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 0 deletions.
diff --git a/chan.dev/src/content/decisions/0012-prefer-range-to-clipboard.md b/chan.dev/src/content/decisions/0012-prefer-range-to-clipboard.md
@@ -0,0 +1,29 @@
+---
+title: "12. Prefer range to clipboard"
+status: "Accepted"
+date: 2023-08-24
+---
+
+## Context
+
+I've attempted several times to get a clean clipboard item that will paste well into blogging platforms (Medium, dev.to, Hackernoon, Hashnode, etc.).
+
+While manual copy and paste worked, programatic copy and paste inserted additional whitespace.
+
+## Decision
+
+To ensure clean copy and paste, prefered `createRange` over `Clipboard`. Ranges allow one click selection of elements, allowing the user to easily grab a range and use system copy/paste.
+
+```js
+function selectElementContents(el) {
+  var range = document.createRange();
+  range.selectNodeContents(el);
+  var sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+```
+
+## Consequences
+
+This will require two steps. But the output is more reliable.
diff --git a/chan.dev/src/content/posts/select-dom-contents-programatically.md b/chan.dev/src/content/posts/select-dom-contents-programatically.md
@@ -0,0 +1,17 @@
+---
+title: "Select DOM contents programatically"
+references:
+  - https://developer.mozilla.org/en-US/docs/Web/API/Document/createRange
+---
+
+```js
+function selectContents(domNode) {
+  let range = document.createRange();
+  let sel = window.getSelection();
+
+  range.selectNodeContents(domNode);
+
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+```
diff --git a/chan.dev/src/layouts/Share.astro b/chan.dev/src/layouts/Share.astro
@@ -4,6 +4,7 @@ import GoogleFonts from "@components/header-google-fonts.astro";
 import GlobalStyles from "@components/header-global-styles.astro";
 import HeadAnalytics from "@components/head-analytics.astro";
 import site from "@src/metadata.json";
+import Prose from "@components/prose.astro";
 import type * as POSTS from "@pages/posts/posts";
 import { url } from "@modules/site";
 
@@ -70,6 +71,31 @@ const { entry } = Astro.props;
     }
   </head>
   <body class="bg-white dark:bg-gray-900" style="padding: 1rem" id="body">
+    <Prose>
+      <button id="copy_body_button">Select content</button>
+    </Prose>
     <slot />
+    <script is:inline>
+      function main() {
+        let copyToClipboardButton = document.getElementById("copy_body_button");
+        let content = document.querySelector("main");
+
+        copyToClipboardButton.addEventListener("click", () => {
+          function selectContents(domNode) {
+            let range = document.createRange();
+            let sel = window.getSelection();
+
+            range.selectNodeContents(domNode);
+
+            sel.removeAllRanges();
+            sel.addRange(range);
+          }
+
+          selectContents(content);
+        });
+      }
+
+      main();
+    </script>
   </body>
 </html>