highlighter-pen 1.0.1

package/README.md

@@ -0,0 +1,49 @@
+<a href="https://www.morganbkf.com/highlighter-pen/" target="_blank">
+  <img src="https://github.com/mimoklef/highlighter-pen/blob/main/assets/demotitle.png?raw=true" />
+</a>
+
+
+A simple JavaScript library that replaces the native text selection with a marker-like highlight effect.
+
+It behaves like a real highlighter: drag your mouse over text and see a custom overlay instead of the default selection.
+
+<a href="https://www.morganbkf.com/highlighter-pen/" target="_blank">
+  <img width=40% src="https://github.com/mimoklef/highlighter-pen/blob/main/assets/subtitle.jpg?raw=true" />
+</a>
+
+
+
+## ✨ Features
+
+- Marker-style highlight effect
+- Works across multiple lines
+- Keeps native selection inside inputs and textareas
+- No dependencies
+- Plug & play (1 script)
+
+
+
+## 🚀 Demo
+
+[You can access this demo and try it yourself](https://www.morganbkf.com/highlighter-pen/)
+
+
+
+## 📦 Installation
+
+### CDN (recommended)
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/mimoklef/highlighter-pen@v1.0.0/dist/highlighter-pen.js"></script>
+<script>
+  HighlighterPen().init();
+</script>
+```
+
+
+
+## 🙋🏻‍♂️ Author
+
+
+Made with ❤️ by [Morgan Bouyakhlef](https://www.morganbkf.com/)
+

package/dist/highlighter-pen.js

@@ -0,0 +1,216 @@
+/*!
+ * Highlighter pen v1.0.0
+ * Marker-like selection overlay using <marker> + optional native input selection yellow.
+ * https://github.com/mimoklef/highlighter-pen/
+ * © 2026 Morgan Bouyakhlef
+ * Released under the MIT License
+ */
+(function (global) {
+  "use strict";
+
+  const DEFAULTS = {
+    markerImage: "https://cdn.jsdelivr.net/gh/mimoklef/highlighter-pen@v1.0.1/assets/marker.png",
+    markerZIndex: 10,                  // marker overlays on text
+    hideNativeSelection: true,         // hide ::selection (so only your marker is visible)
+    inputSelectionYellow: true,        // keep native selection in inputs/textarea and tint it yellow
+    inputSelectionColor: "rgba(255,235,59,0.95)",
+    exclude: "input, textarea, select, button, label" // clicking these cancels selection
+  };
+
+  function createStyle(id, cssText) {
+    let el = document.getElementById(id);
+    if (el) return el;
+    el = document.createElement("style");
+    el.id = id;
+    el.textContent = cssText;
+    document.head.appendChild(el);
+    return el;
+  }
+
+  function isTextLikeInput(el) {
+    if (!el) return false;
+    if (el.tagName === "TEXTAREA") return true;
+    if (el.tagName !== "INPUT") return false;
+    const type = (el.getAttribute("type") || "text").toLowerCase();
+    return ["text", "email", "password", "search", "tel", "url", "number"].includes(type);
+  }
+
+  function HighlighterPen(userOptions) {
+    const opt = Object.assign({}, DEFAULTS, userOptions || {});
+    const STYLE_MAIN_ID = "hp-style-main";
+    const STYLE_INPUT_ID = "hp-style-input";
+    const STYLE_HIDESEL_ID = "hp-style-hidesel";
+
+    let overlays = [];
+    let padTop = 0;
+    let padBottom = 0;
+    let destroyed = false;
+
+    let onSelectionChange, onScroll, onResize, onPointerDown;
+
+    function injectStyles() {
+      createStyle(
+        STYLE_MAIN_ID,
+        `
+marker{
+  border-image-source: url("${opt.markerImage}");
+  border-image-slice: 0 27 0 29 fill;
+  border-image-width: 0px 1ch 0px 1ch;
+  border-image-outset: 0px 1ch 0px 1ch;
+  border-image-repeat: round stretch;
+  background-color: transparent;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  padding: 0.8em 0;
+  mix-blend-mode: multiply;
+  opacity: 1;
+  z-index: ${opt.markerZIndex} !important;
+}
+        `.trim()
+      );
+
+      if (opt.hideNativeSelection) {
+        createStyle(
+          STYLE_HIDESEL_ID,
+          `
+::selection { background: none; }
+::-moz-selection { background: none; }
+          `.trim()
+        );
+      }
+
+      if (opt.inputSelectionYellow) {
+        createStyle(
+          STYLE_INPUT_ID,
+          `
+input::selection, textarea::selection { background: ${opt.inputSelectionColor}; color: inherit; }
+input::-moz-selection, textarea::-moz-selection { background: ${opt.inputSelectionColor}; color: inherit; }
+          `.trim()
+        );
+      }
+    }
+
+    function readMarkerPaddingPx() {
+      const t = document.createElement("marker");
+      t.textContent = "A";
+      t.style.position = "fixed";
+      t.style.left = "-9999px";
+      t.style.top = "-9999px";
+      t.style.pointerEvents = "none";
+      document.body.appendChild(t);
+
+      const cs = getComputedStyle(t);
+      padTop = parseFloat(cs.paddingTop) || 0;
+      padBottom = parseFloat(cs.paddingBottom) || 0;
+
+      t.remove();
+    }
+
+    function clearOverlays() {
+      overlays.forEach((el) => el.remove());
+      overlays = [];
+    }
+
+    function draw() {
+      if (destroyed) return;
+
+      const sel = window.getSelection();
+      if (!sel || sel.rangeCount === 0 || sel.isCollapsed) {
+        clearOverlays();
+        return;
+      }
+
+      // Keep native selection (yellow) inside text inputs/textarea
+      const ae = document.activeElement;
+      if (isTextLikeInput(ae)) {
+        clearOverlays();
+        return;
+      }
+
+      const range = sel.getRangeAt(0);
+
+      // avoid nesting markers
+      const sp = range.startContainer.parentElement;
+      const ep = range.endContainer.parentElement;
+      if ((sp && sp.closest("marker")) || (ep && ep.closest("marker"))) return;
+
+      const rects = Array.from(range.getClientRects()).filter(
+        (r) => r.width > 1 && r.height > 1
+      );
+
+      clearOverlays();
+      if (!rects.length) return;
+
+      for (const r of rects) {
+        const m = document.createElement("marker");
+
+        m.style.position = "fixed";
+        m.style.left = `${r.left}px`;
+        m.style.top = `${Math.round(r.top - padTop)}px`;
+        m.style.width = `${Math.round(r.width)}px`;
+        m.style.height = `${Math.round(r.height + padTop + padBottom)}px`;
+        m.style.display = "block";
+        m.style.pointerEvents = "none";
+        m.style.margin = "0";
+
+        // avoid double-padding (already included in top/height)
+        m.style.padding = "0";
+
+        document.body.appendChild(m);
+        overlays.push(m);
+      }
+    }
+
+    function cancelSelection() {
+      const sel = window.getSelection();
+      if (sel) sel.removeAllRanges();
+      clearOverlays();
+    }
+
+    function init() {
+      injectStyles();
+
+      requestAnimationFrame(() => {
+        if (destroyed) return;
+        readMarkerPaddingPx();
+        draw();
+      });
+
+      onSelectionChange = () => requestAnimationFrame(draw);
+      onScroll = () => requestAnimationFrame(draw);
+      onResize = () => requestAnimationFrame(draw);
+
+      onPointerDown = (e) => {
+        const el = e.target && e.target.closest(opt.exclude);
+        if (!el) return;
+
+        // keep native selection inside text-like inputs/textarea
+        if (isTextLikeInput(el)) return;
+
+        cancelSelection();
+      };
+
+      document.addEventListener("selectionchange", onSelectionChange);
+      window.addEventListener("scroll", onScroll, { passive: true });
+      window.addEventListener("resize", onResize);
+      document.addEventListener("pointerdown", onPointerDown, true);
+
+      return api;
+    }
+
+    function destroy() {
+      destroyed = true;
+      clearOverlays();
+
+      document.removeEventListener("selectionchange", onSelectionChange);
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+      document.removeEventListener("pointerdown", onPointerDown, true);
+    }
+
+    const api = { init, draw, clear: clearOverlays, cancelSelection, destroy, options: opt };
+    return api;
+  }
+
+  global.HighlighterPen = HighlighterPen;
+})(typeof window !== "undefined" ? window : this);

package/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "highlighter-pen",
+  "version": "1.0.1",
+  "description": "Marker-like text selection overlay (live) using JavaScript + CSS injection",
+  "license": "MIT",
+  "main": "dist/highlighter-pen.js",
+  "files": ["dist"],
+  "author": "Morgan Bouyakhlef",
+  "keywords": ["highlight", "highlight pen", "text-selection", "highlighter", "highlighter pen", "javascript", "css", "ui", "ux", "dom", "pen"]
+}