u2ui 1.5.10 → 1.5.12

package/js/rte/PLAN.md

@@ -70,6 +70,22 @@ Nothing did that afterwards — the bold mark recognizes `<b>`, but only a mark
 command ever makes an element canonical — so a strict list would otherwise have
 turned every pasted emphasis into plain text.
 
+Not every `text/html` flavor is html. A pdf viewer offers its selection as one
+while putting plain text inside it, and importing that as html collapsed every
+line break into a single line. `ExternalInput` still decides by flavor list —
+reading the payload before preventing native insertion would give a failed read
+somewhere to fall back to — but the payload now decides what the flavor *is*:
+without a single tag it is text, escaped and joined by breaks, which is all the
+structure such a paste has. A `text/plain` paste with no html flavor beside it
+stays native as before.
+
+Keeping the content of an unlisted element is right for almost all of them, and
+wrong for the few a browser never renders the children of: unwrapping a `<style>`
+from a word processor left its stylesheet standing in the text. `SanitizePolicy`
+now carries a `drop` list — `base head link meta noscript script style template
+title` — that `narrow()` removes with their content, while everything else keeps
+dissolving into what the author wrote.
+
 A native paste now meets the attribute policy. Nothing is parsed there — the
 browser inserts its own payload — so it was the one import path without an
 allowlist, and layout ids, tracking attributes and inline styles came straight

package/js/rte/src/input/README.md

@@ -103,7 +103,12 @@ const external = new ExternalInput(surface, {
 
 For `insertFromPaste` and `insertFromDrop`, the contenteditable Input Events
 contract supplies rich and plain data in `dataTransfer` plus the DOM range that
-would be replaced. The adapter takes over only when `text/html` is present. It
+would be replaced. The adapter takes over only when `text/html` is present, and
+the payload then decides what that flavor is: markup is imported as it stands,
+while a flavor carrying none is the text it is — a pdf viewer labels its plain
+selection `text/html` — and its line breaks, the only structure such a text has,
+become breaks instead of collapsing. Reading the payload happens after native
+insertion is prevented, so a failing read cannot fall back to it. It
 prevents native insertion first, sanitizes into a detached `DocumentFragment`,
 optionally cleans presentation cumulatively through the selected level, and
 passes the result and exact target range to the registered command. Drop thus

package/js/rte/src/input/external-input.js

@@ -2,6 +2,7 @@ import {inputRange} from './input-pipeline.js';
 import {editingHost, isPlainTextHost} from '../selection/ownership/ownership.js';
 
 const INPUTS = new Set(['insertFromPaste', 'insertFromDrop']);
+const ENTITIES = {'&': '&amp;', '<': '&lt;', '>': '&gt;'};
 
 // Owns rich external HTML before the browser can insert it. The selected
 // sanitizer, optional presentation cleanup, and mapped insertion command stay
@@ -100,9 +101,8 @@ export class ExternalInput {
         if (!hasHtml(event.dataTransfer)) return;
         event.preventDefault();
         try {
-            const html = event.dataTransfer.getData('text/html');
             const range = inputRange(event, this.#surface);
-            this.insert(html, {range, inputType: event.inputType});
+            this.insert(importHtml(event.dataTransfer), {range, inputType: event.inputType});
         } catch (error) {
             this.#surface.emit('u2-rte-error', {
                 transaction: null,
@@ -123,8 +123,18 @@ export class ExternalInput {
     }
 }
 
+// Reading the payload belongs after preventDefault, where a failure stays fail-closed, so the flavor
+// list is all this may look at. Plain text without an html flavor is the browser's to insert.
 function hasHtml(transfer) {
-    if (!transfer || typeof transfer.getData !== 'function') return false;
-    const types = [...(transfer.types || [])].map(type => String(type).toLowerCase());
-    return types.includes('text/html');
+    if (typeof transfer?.getData !== 'function') return false;
+    return [...(transfer.types || [])].some(type => String(type).toLowerCase() === 'text/html');
+}
+
+// Markup as it is, an html flavor without any as the text it is: a pdf viewer labels its plain
+// selection that way, and html would collapse the line breaks that are all the structure it has.
+function importHtml(transfer) {
+    const html = String(transfer.getData('text/html') || '');
+    if (/<[a-z!/]/i.test(html)) return html;
+    const text = String(transfer.getData('text/plain') || '') || html;
+    return text.replace(/[&<>]/g, character => ENTITIES[character]).replace(/\r?\n/g, '<br>');
 }

package/js/rte/src/sanitize/README.md

@@ -13,8 +13,15 @@ repairs editable document shape.
 - `elements`: element names the security policy can accept;
 - `attributes`: global (`*`) and per-element attribute names;
 - `protocols`: per-element rules for URL attributes;
+- `drop`: element names that `narrow()` removes with their content;
 - `comments` and `dataAttributes`: explicit booleans, both false by default.
 
+An element outside `elements` keeps its content — dropping it would lose text the
+author wrote. `drop` names the exception: elements a browser never renders the
+children of, where unwrapping would turn a stylesheet, a script, or document
+metadata into visible text. It defaults to `base head link meta noscript script
+style template title` and, like every default, an application may replace it.
+
 The supplied `sanitizePolicy` accepts the `document` element preset, ordinary
 editor metadata, and conservative web URLs. An image may carry a `data:` URL,
 because an image executes nothing — not even an SVG one, which browsers draw in

package/js/rte/src/sanitize/policy.js

@@ -27,10 +27,18 @@ const DEFAULT_PROTOCOLS = Object.freeze({
     q: Object.freeze({cite: Object.freeze(['http', 'https', 'relative'])}),
 });
 
+// Elements a browser never renders the children of. Unwrapping one turns source — a stylesheet, a
+// script, document metadata — into visible text, so these go with their content. Every other unknown
+// element keeps its content: dropping it would lose text the author wrote.
+const DEFAULT_DROP = Object.freeze([
+    'base', 'head', 'link', 'meta', 'noscript', 'script', 'style', 'template', 'title',
+]);
+
 export const sanitizeDefaults = Object.freeze({
     elements: elementPresets.document,
     attributes: DEFAULT_ATTRIBUTES,
     protocols: DEFAULT_PROTOCOLS,
+    drop: DEFAULT_DROP,
     comments: false,
     dataAttributes: false,
 });
@@ -41,6 +49,7 @@ export class SanitizePolicy {
 
     constructor(options = {}) {
         this.elements = names(options.elements ?? sanitizeDefaults.elements, NAME, 'element');
+        this.drop = names(options.drop ?? sanitizeDefaults.drop, NAME, 'element');
         this.#attributes = groups(options.attributes ?? sanitizeDefaults.attributes, ATTRIBUTE, 'attribute');
         this.#protocols = protocolGroups(options.protocols ?? sanitizeDefaults.protocols);
         this.attributeNames = Object.freeze(unique(Object.values(this.#attributes).flat()));
@@ -69,8 +78,9 @@ export class SanitizePolicy {
     }
 
     // Reduces a subtree to the elements this policy allows, keeping the content
-    // of the rest. Parsed input gets this from the safe sink; markup the browser
-    // inserted itself has to be narrowed afterwards.
+    // of the rest — except the `drop` elements, which go with theirs. Parsed input
+    // gets this from the safe sink; markup the browser inserted itself has to be
+    // narrowed afterwards.
     //
     // `skip` leaves an element to a later stage. Structural repair already
     // removes what the content model rejects, and it does so knowing that
@@ -86,8 +96,15 @@ export class SanitizePolicy {
             : this.elements.filter(name => elements.includes(name));
         const changed = [];
         for (const element of descendants(root).reverse()) {
-            if (preserve?.has(element) || allowed.includes(element.localName)) continue;
+            if (preserve?.has(element)) continue;
             if (!element.parentNode || skip?.(element)) continue;
+            if (this.drop.includes(element.localName)) {
+                if (map) map.remove(element);
+                else element.remove();
+                changed.push(element);
+                continue;
+            }
+            if (allowed.includes(element.localName)) continue;
             const equivalent = alias?.[element.localName];
             if (equivalent && allowed.includes(equivalent)) {
                 const replacement = element.ownerDocument.createElement(equivalent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "u2ui",
-  "version": "1.5.10",
+  "version": "1.5.12",
   "description": "HTML Advanced: More Capabilities, Same Feel, Same Simplicity",
   "keywords": ["web-components","pattern-library","component-library","ui-toolkit","design-system"],
   "author": "Tobias Buschor",