Add highlights

slices/admin/assets/css/app.css

@@ -1,5 +1,4 @@
-body {
-  background-color: #fff;
-  color: #000;
-  font-family: sans-serif;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind typography;

slices/admin/assets/js/app.js

@@ -6,5 +6,26 @@ import "../css/app.css";
         Alpine.magic('clipboard', () => {
             return subject => navigator.clipboard.writeText(subject)
         })
+
+        Alpine.magic('textHighlighter', (el, {Alpine}) => {
+            return {
+                isOpen: false,
+                anchorX: "0px",
+                anchorY: "0px",
+                selection: null,
+                text: "",
+                highlightText() {
+                    this.isOpen = false
+                    // document.
+                    this.selection = document.getSelection()
+                    this.text = this.selection.toString()
+                    const anchor = this.selection.focusNode.parentElement.getBoundingClientRect()
+                    this.isOpen = el.contains(this.selection.focusNode) && this.selection.focusOffset != this.selection.anchorOffset;
+
+                    this.anchorX = `${anchor.left - 170}px`
+                    this.anchorY = `${anchor.top + window.scrollY}px`
+                }
+            }
+        })
     })
 })();