u2ui 1.5.10 → 1.5.11

package/js/rte/PLAN.md

@@ -70,6 +70,19 @@ 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 with line breaks inside it, and importing that as html
+collapsed them all into a single line. `ExternalInput` now takes a paste over
+only when the flavor carries markup, so text stays with the browser, which
+inserts it with its breaks intact.
+
+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,10 @@ 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
+carries markup: a pdf viewer labels its plain selection `text/html`, and
+importing that as html would collapse the line breaks the text flavor keeps, so
+a flavor without a single tag is left to the browser. 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

@@ -97,7 +97,7 @@ export class ExternalInput {
     #beforeInput = event => {
         if (!this.#owns(event) || !INPUTS.has(event.inputType) || !event.cancelable
             || event.defaultPrevented || event.isComposing || isPlainTextHost(this.#root)) return;
-        if (!hasHtml(event.dataTransfer)) return;
+        if (!hasMarkup(event.dataTransfer)) return;
         event.preventDefault();
         try {
             const html = event.dataTransfer.getData('text/html');
@@ -123,8 +123,13 @@ export class ExternalInput {
     }
 }
 
-function hasHtml(transfer) {
+// An html flavor carrying no markup is text that was labelled html — a pdf viewer offers its
+// selection that way. Importing it as html would collapse the line breaks it carries, while the
+// browser inserts the text flavor with them intact, so that one stays with the browser.
+function hasMarkup(transfer) {
     if (!transfer || typeof transfer.getData !== 'function') return false;
     const types = [...(transfer.types || [])].map(type => String(type).toLowerCase());
-    return types.includes('text/html');
+    if (!types.includes('text/html')) return false;
+    if (!types.includes('text/plain')) return true;
+    return /<[a-z!/]/i.test(transfer.getData('text/html'));
 }

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.11",
   "description": "HTML Advanced: More Capabilities, Same Feel, Same Simplicity",
   "keywords": ["web-components","pattern-library","component-library","ui-toolkit","design-system"],
   "author": "Tobias Buschor",