ffadilaputra · December 6, 2024 03:26 · Aug 22, 2024 · Aug 22, 2024 · Aug 22, 2024 · Aug 22, 2024
diff --git a/figma-copy.md b/figma-copy.md
@@ -47,7 +47,7 @@ Now in your JavaScript file, you want to copy those three things to the device's
 </html>
 ```
 
-I know, you're screaming at your screen right now, "That's the least valid HTML I've ever _seen_!" I hear you, but it works.
+I know, you're screaming at your screen right now, "That's the least valid HTML I've ever _seen_!" You're not wrong, but it works.
 
 Say you take all that and assign it to a variable called `data`. Here's how you might then attach an event handler to a button, so that when it's clicked, it copies `data` to the user's clipboard. But the exact details of this part depend on your use case...
 

diff --git a/figma-copy.md b/figma-copy.md
@@ -72,6 +72,8 @@ button.addEventListener("click", (e) => {
 
 And there you go! Even if it's a component from a specific library, all that should be captured as usual. Pretty neat!
 
+---
+
 _* This worked as of the time of publication, but might break if Figma makes any changes. Not much I can do about that._
 
 _** Is there a way to simplify this, up to using the Figma API to get the clipboard-friendly version of something? Maybe. But this is good enough for me._

diff --git a/figma-copy.md b/figma-copy.md
@@ -74,4 +74,6 @@ And there you go! Even if it's a component from a specific library, all that sho
 
 _* This worked as of the time of publication, but might break if Figma makes any changes. Not much I can do about that._
 
-_** Is there a way to simplify this, up to using the Figma API to get the clipboard-friendly version of something? Maybe. But this is good enough for me._
+_** Is there a way to simplify this, up to using the Figma API to get the clipboard-friendly version of something? Maybe. But this is good enough for me._
+
+_*** This JavaScript code may not work in every single browser or browser version you need to support. But then again, getting data to the clipboard via JavaScript is probably the part you've got figured out already._
diff --git a/figma-copy.md b/figma-copy.md
@@ -6,7 +6,7 @@
 
 In the `text/html`, you're looking for:
 
-1. An HTML comment with `figmeta`:
+1. An HTML comment starting with `figmeta`:
 ```html
 <!--(figmeta) ... (/figmeta)-->
 ```

diff --git a/figma-copy.md b/figma-copy.md
@@ -29,8 +29,9 @@ Now in your JavaScript file, you want to copy those three things to the device's
 
 ```html
 <html>
-<head>
-  <meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  </head>
   <body>
     <html>
       <body>

diff --git a/figma-copy.md b/figma-copy.md
@@ -25,7 +25,7 @@ There might be some extraneous HTML surrounding all this, but you really just wa
 
 ---
 
-Now in your JavaScript file, you want to copy those three things to the device's clipboard, sandwiched by some other HTML (line breaks optional, shown here for readability):
+Now in your JavaScript file, you want to copy those three things to the device's clipboard, sandwiched by some other HTML (line breaks and indentation not recommended; shown here only for readability):
 
 ```html
 <html>

diff --git a/figma-copy.md b/figma-copy.md
@@ -72,4 +72,5 @@ button.addEventListener("click", (e) => {
 And there you go! Even if it's a component from a specific library, all that should be captured as usual. Pretty neat!
 
 _* This worked as of the time of publication, but might break if Figma makes any changes. Not much I can do about that._
+
 _** Is there a way to simplify this, up to using the Figma API to get the clipboard-friendly version of something? Maybe. But this is good enough for me._
diff --git a/figma-copy.md b/figma-copy.md
@@ -0,0 +1,75 @@
+1. Copy the object in Figma
+2. Open [Clipboard Inspector](https://evercoder.github.io/clipboard-inspector/) or a tool like it that can read the raw data off your clipboard.
+3. When you paste the Figma object into this tool, you should see something that's type `text/html`, and possibly something of type `text/plain`. The `text/plain` one will be the text content of your object, which you can ignore.
+
+---
+
+In the `text/html`, you're looking for:
+
+1. An HTML comment with `figmeta`:
+```html
+<!--(figmeta) ... (/figmeta)-->
+```
+
+2. An HTML comment starting with `figma`:
+```html
+<!--(figma) ... (/figma)-->
+```
+
+If your object has text content, you should see an HTML `span` tag at the end. Grab that too.
+```html
+<span style="white-space:pre-wrap;"> ... </span>
+```
+
+There might be some extraneous HTML surrounding all this, but you really just want these three things.
+
+---
+
+Now in your JavaScript file, you want to copy those three things to the device's clipboard, sandwiched by some other HTML (line breaks optional, shown here for readability):
+
+```html
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
+  <body>
+    <html>
+      <body>
+        <!--StartFragment-->
+        <meta charset="utf-8">
+        <!--(figmeta) ... (/figmeta)-->
+        <!--(figma) ... (/figma)-->
+        <span style="white-space:pre-wrap;"> ... </span>
+        <!--EndFragment-->
+      </body>
+    </html>
+  </body>
+</html>
+```
+
+I know, you're screaming at your screen right now, "That's the least valid HTML I've ever _seen_!" I hear you, but it works.
+
+Say you take all that and assign it to a variable called `data`. Here's how you might then attach an event handler to a button, so that when it's clicked, it copies `data` to the user's clipboard. But the exact details of this part depend on your use case...
+
+```js
+
+let data = "that whole mess in the previous section";
+let button = document.querySelector("button");
+
+const copyFigma = () => {
+  const myHTMLString = data;
+  const myBlob = new Blob([ myHTMLString ], {type: 'text/html'});
+  let item = new ClipboardItem({'text/html': myBlob });
+
+  navigator.clipboard.write([item]);
+};
+
+button.addEventListener("click", (e) => {
+  e.preventDefault();
+  copyFigma();
+});
+```
+
+And there you go! Even if it's a component from a specific library, all that should be captured as usual. Pretty neat!
+
+_* This worked as of the time of publication, but might break if Figma makes any changes. Not much I can do about that._
+_** Is there a way to simplify this, up to using the Figma API to get the clipboard-friendly version of something? Maybe. But this is good enough for me._