tosijs-styled-editor 0.4.2 → 0.4.4

package/dist/module.js

@@ -250,6 +250,99 @@ function caretGeometryAt(marker, root) {
   }
   return null;
 }
+function forSchemeTest(value) {
+  return value.replace(/^[\u0000-\u0020]+|[\u0000-\u0020]+$/g, "").replace(/[\u0000-\u001f\u007f]/g, "");
+}
+function isSafeUrl(value) {
+  const trimmed = forSchemeTest(value);
+  if (!/^[a-z][a-z0-9+.-]*:/i.test(trimmed))
+    return true;
+  if (/^data:image\/(png|jpeg|jpg|gif|webp|avif|bmp|svg\+xml);/i.test(trimmed)) {
+    return !/^data:image\/svg/i.test(trimmed);
+  }
+  return /^(https?|mailto|tel):/i.test(trimmed);
+}
+var FORBIDDEN_TAGS = new Set([
+  "script",
+  "iframe",
+  "object",
+  "embed",
+  "link",
+  "meta",
+  "base",
+  "style",
+  "form",
+  "noscript",
+  "template",
+  "animate",
+  "animatetransform",
+  "animatemotion",
+  "set"
+]);
+var URL_ATTRIBUTES = [
+  "href",
+  "src",
+  "srcset",
+  "xlink:href",
+  "action",
+  "formaction",
+  "ping",
+  "poster",
+  "background",
+  "cite",
+  "data",
+  "longdesc",
+  "profile",
+  "usemap",
+  "manifest"
+];
+var DANGEROUS_SCHEME = /^(javascript|vbscript|livescript|mocha|data:text\/html)/i;
+var FORBIDDEN_ATTRIBUTES = new Set(["ping"]);
+var localNameGetter = Object.getOwnPropertyDescriptor(Element.prototype, "localName")?.get;
+var attributesGetter = Object.getOwnPropertyDescriptor(Element.prototype, "attributes")?.get;
+function getLocalName(el) {
+  return localNameGetter ? localNameGetter.call(el) : el.localName;
+}
+function getAttributes(el) {
+  return attributesGetter ? attributesGetter.call(el) : el.attributes;
+}
+function sanitizeInPlace(root) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  const doomed = [];
+  let node;
+  while (node = walker.nextNode()) {
+    const el = node;
+    const localName = String(getLocalName(el) ?? "").toLowerCase();
+    if (FORBIDDEN_TAGS.has(localName)) {
+      doomed.push(el);
+      continue;
+    }
+    for (const attr of Array.from(getAttributes(el) ?? [])) {
+      const name = attr.name.toLowerCase();
+      if (name.startsWith("on")) {
+        el.removeAttribute(attr.name);
+        continue;
+      }
+      if (FORBIDDEN_ATTRIBUTES.has(name)) {
+        el.removeAttribute(attr.name);
+        continue;
+      }
+      const normalized = forSchemeTest(attr.value);
+      if (DANGEROUS_SCHEME.test(normalized)) {
+        el.removeAttribute(attr.name);
+        continue;
+      }
+      if (URL_ATTRIBUTES.includes(name) && !isSafeUrl(attr.value)) {
+        el.removeAttribute(attr.name);
+      }
+    }
+  }
+  for (const el of doomed)
+    el.remove();
+}
+function isSafeNavigationUrl(value) {
+  return isSafeUrl(value) && !/^data:/i.test(forSchemeTest(value));
+}
 // src/selection.ts
 function characters(text) {
   const Segmenter = Intl.Segmenter;
@@ -1173,6 +1266,10 @@ var commands = {
   setLink(ctx, url, target = "_blank") {
     if (!url)
       return;
+    if (!isSafeNavigationUrl(url)) {
+      console.error("setLink: refusing unsafe URL scheme", url);
+      return;
+    }
     ctx.selectable.resetBounds();
     spanify(ctx.root, false);
     ctx.selectable.markBounds();
@@ -1456,6 +1553,15 @@ var commands = {
     ctx.updateUndo("new");
   }
 };
+function runCommand(ctx, name, ...args) {
+  const registry = ctx.commands ?? commands;
+  const fn = registry[name];
+  if (fn) {
+    fn(ctx, ...args);
+  } else {
+    console.error("unrecognized command", name);
+  }
+}
 function executeCommand(ctx, commandString) {
   const registry = ctx.commands ?? commands;
   const commandList = commandString.split(/;\s*/);
@@ -1669,7 +1775,7 @@ function insertMenu(editor) {
           if (!url)
             return;
           const target = prompt("Target (blank for a new tab)", "_blank");
-          editor.doCommand(`setLink ${url} ${target || "_blank"}`);
+          editor.doCommandWith("setLink", url, target || "_blank");
         }
       },
       {
@@ -1684,7 +1790,7 @@ function insertMenu(editor) {
           if (!url)
             return;
           const alt = prompt("Alt text (describe the image)") || "";
-          editor.doCommand(`insertImage ${url} ${alt}`);
+          editor.doCommandWith("insertImage", url, alt);
         }
       },
       null,
@@ -1821,6 +1927,7 @@ class TosijsStyledEditor extends WebComponent {
       cursor: "text",
       overflowY: "auto",
       position: "relative",
+      touchAction: "manipulation",
       transition: "padding-top 0.15s ease-out, padding-bottom 0.15s ease-out"
     },
     ':host [part="doc"] > *': {
@@ -1870,6 +1977,8 @@ class TosijsStyledEditor extends WebComponent {
       margin: "0",
       border: "0",
       outline: "none",
+      fontSize: "16px",
+      lineHeight: "1",
       background: "var(--editor-text)",
       color: "transparent",
       caretColor: "transparent",
@@ -2149,6 +2258,7 @@ class TosijsStyledEditor extends WebComponent {
     }
   }
   commands = { ...commands };
+  sanitize = sanitizeInPlace;
   content = [
     slot({
       name: "menubar",
@@ -2247,6 +2357,16 @@ class TosijsStyledEditor extends WebComponent {
     this.selectable.focusTarget = this.parts.caret;
     this.selectable.onBoundsChanged = () => this.syncCaret();
     this.syncCaret();
+    this.parts.doc.addEventListener("scroll", this.handleGeometryChange, {
+      capture: true,
+      passive: true
+    });
+    window.addEventListener("resize", this.handleGeometryChange, {
+      passive: true
+    });
+    this.geometryObserver = new ResizeObserver(this.handleGeometryChange);
+    this.geometryObserver.observe(this.parts.doc, { box: "content-box" });
+    this.geometryObserver.observe(this, { box: "border-box" });
     this.applyWidgets();
     this.trackBar(this.parts.menubar, "has-menubar");
     this.trackBar(this.parts.toolbar, "has-toolbar");
@@ -2280,7 +2400,19 @@ class TosijsStyledEditor extends WebComponent {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.selectable?.destroy();
+    this.parts?.doc?.removeEventListener("scroll", this.handleGeometryChange, {
+      capture: true
+    });
+    window.removeEventListener("resize", this.handleGeometryChange);
+    this.geometryObserver?.disconnect();
   }
+  geometryObserver = null;
+  handleGeometryChange = () => {
+    this.syncCaret();
+    if (this.touchAffordances?.style.display === "block") {
+      this.positionAffordances();
+    }
+  };
   markerRect(marker) {
     const geometry = caretGeometryAt(marker, this.parts.doc);
     if (geometry) {
@@ -2303,7 +2435,7 @@ class TosijsStyledEditor extends WebComponent {
     const start = doc.querySelector(".sel-start");
     const end = doc.querySelector(".sel-end");
     const anchor = end || start;
-    const collapsed = doc.querySelectorAll(".selected").length === 0;
+    const collapsed = doc.querySelector(".selected") === null;
     const host = this.getBoundingClientRect();
     const view = doc.getBoundingClientRect();
     const hostStyle = getComputedStyle(this);
@@ -2352,6 +2484,9 @@ class TosijsStyledEditor extends WebComponent {
   doCommand(commandString) {
     executeCommand(this.getContext(), commandString);
   }
+  doCommandWith(name, ...args) {
+    runCommand(this.getContext(), name, ...args);
+  }
   focus() {
     this.selectable?.focus();
   }
@@ -2368,7 +2503,7 @@ class TosijsStyledEditor extends WebComponent {
     return Array.from(this.parts.doc.querySelectorAll(".selected-block"));
   }
   insertionPoint() {
-    return this.parts.doc.querySelector("input.caret");
+    return this.parts.doc.querySelector(".sel-end");
   }
   block(node) {
     let current = node;
@@ -2394,10 +2529,9 @@ class TosijsStyledEditor extends WebComponent {
   moveCaretToCell(cell) {
     this.selectable.unmark();
     this.selectable.removeBounds();
-    const start = document.createElement("input");
-    start.className = "sel-start";
-    const end = document.createElement("input");
-    end.className = "sel-end caret";
+    const bounds = this.selectable.createBounds();
+    const end = bounds.lastChild;
+    const start = bounds.firstChild;
     cell.insertBefore(start, cell.firstChild);
     cell.appendChild(end);
     this.selectable.normalize();
@@ -3171,14 +3305,18 @@ class TosijsStyledEditor extends WebComponent {
     if (!link || !this.parts.doc.contains(link))
       return;
     if (evt.metaKey || evt.ctrlKey) {
-      window.open(link.getAttribute("href") || "", link.getAttribute("target") || "_blank", "noopener");
+      const href = link.getAttribute("href") || "";
+      if (isSafeNavigationUrl(href)) {
+        window.open(href, "_blank", "noopener");
+      }
     }
     evt.preventDefault();
   };
   handleShortcut(evt) {
     const key = evt.key.toLowerCase();
     const shortcutStr = `${evt.ctrlKey || evt.metaKey ? "ctrl+" : ""}${key}`;
-    const btn = this.parts.toolbar.querySelector(`[data-shortcut="${shortcutStr}"]`);
+    const escaped = typeof CSS !== "undefined" && CSS.escape ? CSS.escape(shortcutStr) : shortcutStr.replace(/["\\]/g, "\\$&");
+    const btn = this.parts.toolbar.querySelector(`[data-shortcut="${escaped}"]`);
     if (btn) {
       const value = btn.getAttribute("value");
       if (value) {
@@ -3388,6 +3526,7 @@ class TosijsStyledEditor extends WebComponent {
     } else {
       const temp = document.createElement("div");
       temp.innerHTML = html;
+      this.sanitize(temp);
       while (temp.firstChild) {
         ip.before(temp.firstChild);
       }
@@ -3481,7 +3620,7 @@ class TosijsStyledEditor extends WebComponent {
         reader.readAsDataURL(file);
       });
       if (url)
-        this.doCommand(`insertImage ${url} ${file.name}`);
+        this.doCommandWith("insertImage", url, file.name);
     }
   }
   cellEdgeAt(evt) {
@@ -3511,6 +3650,7 @@ class TosijsStyledEditor extends WebComponent {
       this.touchAffordances.style.display = "none";
       this.parts.doc.style.paddingTop = "";
       this.parts.doc.style.paddingBottom = "";
+      this.syncCaret();
       return;
     }
     const selStart = this.parts.doc.querySelector(".sel-start");
@@ -3519,12 +3659,12 @@ class TosijsStyledEditor extends WebComponent {
       this.touchAffordances.style.display = "none";
       this.parts.doc.style.paddingTop = "";
       this.parts.doc.style.paddingBottom = "";
+      this.syncCaret();
       return;
     }
     const docRect = this.parts.doc.getBoundingClientRect();
     const startRect = this.markerRect(selStart);
     const endRect = this.markerRect(selEnd);
-    let needsPaddingChange = false;
     if (this.touchDrags.size === 0) {
       const existingTopPad = parseFloat(this.parts.doc.style.paddingTop) || 0;
       const existingBottomPad = parseFloat(this.parts.doc.style.paddingBottom) || 0;
@@ -3535,23 +3675,13 @@ class TosijsStyledEditor extends WebComponent {
       const hadTop = this.parts.doc.style.paddingTop;
       const hadBottom = this.parts.doc.style.paddingBottom;
       if (wantTop !== hadTop || wantBottom !== hadBottom) {
-        needsPaddingChange = true;
         this.parts.doc.style.paddingTop = wantTop;
         this.parts.doc.style.paddingBottom = wantBottom;
       }
     }
-    if (needsPaddingChange) {
-      this.touchAffordances.style.opacity = "0";
-      this.touchAffordances.style.display = "block";
-      setTimeout(() => {
-        this.positionAffordances();
-        this.touchAffordances.style.opacity = "1";
-      }, 160);
-    } else {
-      this.positionAffordances();
-      this.touchAffordances.style.display = "block";
-      this.touchAffordances.style.opacity = "1";
-    }
+    this.positionAffordances();
+    this.touchAffordances.style.display = "block";
+    this.touchAffordances.style.opacity = "1";
   }
   positionAffordances() {
     const selStart = this.parts.doc.querySelector(".sel-start");
@@ -3672,9 +3802,9 @@ class TosijsStyledEditor extends WebComponent {
       this.hideTouchMenu();
       return;
     }
-    this.showTouchMenu();
+    this.showTouchMenu(evt);
   };
-  showTouchMenu() {
+  showTouchMenu(openedBy) {
     this.hideTouchMenu();
     const menu = document.createElement("div");
     menu.className = "touch-menu not-selectable do-not-spanify";
@@ -3771,13 +3901,13 @@ class TosijsStyledEditor extends WebComponent {
     this.touchMenuEl = menu;
     this.touchAffordances.appendChild(menu);
     this.touchMenuDismiss = (e) => {
+      if (e === openedBy)
+        return;
       if (this.touchMenuEl && !this.touchMenuEl.contains(e.target)) {
         this.hideTouchMenu();
       }
     };
-    setTimeout(() => {
-      this.parts.doc.addEventListener("pointerdown", this.touchMenuDismiss);
-    }, 0);
+    this.parts.doc.addEventListener("pointerdown", this.touchMenuDismiss);
   }
   touchMenuDismiss = null;
   hideTouchMenu() {
@@ -3848,14 +3978,17 @@ class TosijsStyledEditor extends WebComponent {
     if (!select)
       return;
     const value = select.value;
-    if (value) {
-      this.doCommand(value);
-    }
+    if (!value)
+      return;
+    const name = value.trim().split(/[\s;]/)[0];
+    if (!name || !(name in this.commands))
+      return;
+    this.doCommand(value);
   };
 }
 var tosijsStyledEditor = TosijsStyledEditor.elementCreator();
 // src/version.ts
-var version = "0.4.2";
+var version = "0.4.4";
 export {
   MENU_CLASS,
   Selectable,
@@ -3889,6 +4022,7 @@ export {
   insertMenu,
   isBefore,
   isHeaderCell,
+  isSafeNavigationUrl,
   isTableCell,
   justificationMenu,
   lastLeafNode,
@@ -3906,6 +4040,8 @@ export {
   previousLeafNode,
   renumberFootnotes,
   rowOfCell,
+  runCommand,
+  sanitizeInPlace,
   setColumnWidths,
   siblingOrder,
   spanify,

package/dist/tosijs-styled-editor.d.ts

@@ -59,6 +59,35 @@ export declare class TosijsStyledEditor extends WebComponent<EditableParts> {
     set value(html: string);
     /** The editable commands — extend this object to add custom commands */
     commands: Record<string, Command>;
+    /**
+     * Sanitizer applied to pasted and dropped content, before it enters the
+     * document. Replace it to use a different one:
+     *
+     * ```js
+     * editor.sanitize = (root) => {
+     *   DOMPurify.sanitize(root, {
+     *     IN_PLACE: true,
+     *     FORBID_TAGS: ['style'],
+     *     CUSTOM_ELEMENT_HANDLING: {
+     *       tagNameCheck: /^[a-z][a-z0-9]*-[a-z0-9-]*$/,
+     *       attributeNameCheck: /^data-|^slot$|^dir$/,
+     *     },
+     *   })
+     * }
+     * ```
+     *
+     * It takes a detached ELEMENT and mutates it, rather than taking and
+     * returning an HTML string, deliberately: a string signature would force a
+     * serialize-and-reparse round trip, and that round trip is where mutation
+     * XSS lives — markup that is inert when parsed once can become executable
+     * when re-parsed from its own serialization. DOMPurify's `IN_PLACE: true`
+     * has the same shape for the same reason.
+     *
+     * The default is `sanitizeInPlace`. Setting this to a no-op disables
+     * sanitization; see the security section of the README for what is and is
+     * not covered.
+     */
+    sanitize: (root: Element) => void;
     content: (HTMLDivElement | HTMLSlotElement)[];
     formResetCallback(): void;
     connectedCallback(): void;
@@ -70,6 +99,17 @@ export declare class TosijsStyledEditor extends WebComponent<EditableParts> {
      */
     private applyWidgets;
     disconnectedCallback(): void;
+    private geometryObserver;
+    /**
+     * Repaint everything positioned over the document.
+     *
+     * Deliberately NOT coalesced with requestAnimationFrame. Measured: one
+     * repaint costs 0.015ms — 0.09% of a frame — and the browser already
+     * delivers scroll at most once per frame (60 events across 60 frames). So
+     * rAF bought no work reduction and cost a frame of latency, which shows up
+     * as the caret trailing the text while scrolling.
+     */
+    private handleGeometryChange;
     /**
      * Position the caret (and, for an expanded selection, its two edges) over the
      * document from the inert markers' rects. Nothing here is in the text, so
@@ -90,14 +130,30 @@ export declare class TosijsStyledEditor extends WebComponent<EditableParts> {
     private getContext;
     /** Execute a command string */
     doCommand(commandString: string): void;
+    /**
+     * Run one command with pre-separated arguments.
+     *
+     * Use this whenever an argument is a runtime value (a URL, a filename): the
+     * string form splits on `;` and whitespace, so those values can inject a
+     * second command — and a data URI contains `;` by spec.
+     */
+    doCommandWith(name: string, ...args: string[]): void;
     focus(): void;
     normalize(): void;
     /** Get all leaf nodes in the current selection */
     selectedLeafNodes(): Node[];
     /** Get the selected blocks */
     selectedBlocks(): Element[];
-    /** Get the caret input if it exists in the doc */
-    insertionPoint(): HTMLInputElement | null;
+    /**
+     * The caret marker, if the doc has one.
+     *
+     * This selected `input.caret` until the markers stopped being `<input>`
+     * elements, after which it matched nothing and returned null forever —
+     * silently disabling every command that inserts at the caret
+     * (insertFootnote, insertTable, insertImage, setLink and the rest), because
+     * they all bail on a null insertion point.
+     */
+    insertionPoint(): HTMLElement | null;
     /** Get the top-level block containing a node */
     block(node: Node): Element | null;
     /** Find the table cell containing the caret, if any */

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.4.2";
+export declare const version = "0.4.4";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tosijs-styled-editor",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "Rich text editor web component — no contentEditable, no browser selection APIs",
   "repository": {
     "type": "git",
@@ -26,11 +26,13 @@
     "dist",
     "!dist/*.tsbuildinfo",
     "README.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
   "scripts": {
     "start": "bun bin/site.ts",
     "make": "bun bin/site.ts --build",
+    "prepublishOnly": "bun run make && bun test && bun run lint",
     "test": "bun test",
     "lint": "bun tsc --noEmit --noUnusedLocals --noUnusedParameters",
     "format": "bun prettier --write .",