u2ui 1.5.3 → 1.5.7

package/el/ico/ico.js

@@ -61,14 +61,14 @@ export default class U2Ico extends HTMLElement {
             const name = this.getAttribute('icon');
             const path = dirTemplateToUrl(dir, name);
 
-            requestAnimationFrame(()=>{
-                this.setAttribute('state','loading')
-            });
-
             const pathStr = path.toString();
             if (this._lastLoading === pathStr) return; // prevent multiple requests
             this._lastLoading = pathStr;
 
+            requestAnimationFrame(()=>{
+                this.setAttribute('state','loading')
+            });
+
             loadSvgString(path).then(svg=>{
                 // if (path.origin !== location.origin) {} todo: sanitize svg
 
@@ -85,7 +85,7 @@ export default class U2Ico extends HTMLElement {
                         const height = parseFloat(svgEl.getAttribute('height')) ?? 24;
                         svgEl.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
                     }
-                    ['xmlns','xmlns:xlink','version','class','width','height'].forEach(attr=>svgEl.removeAttribute(attr)); // remove width, height ok?
+                    ['xmlns','xmlns:xlink','version','class'].forEach(attr=>svgEl.removeAttribute(attr));
                     svgEl.ariaHidden = true;
                     this.setAttribute('state','loaded');
                     this.dispatchEvent(new CustomEvent('u2-ico-loaded', {bubbles: true, composed: true}));

package/el/rte/README.md

@@ -1,21 +1,16 @@
 # <u2-rte> - element
-"Rich" Rich Text Editor (alpha)
+Progressively enhances one native textarea with the RTE rich-text editor
+
+The textarea remains the form control, fallback, and canonical serialized value.
 
 ## Usage
 
 ```html
-<u2-rte style="--u2-rte-toolbar:Bold Italic">
-    <strong>RTE</strong>
-    <br>
-    <i>(Rich Text Editor)</i>
-</u2-rte>
-```
-
-```css
-u2-rte {
-    --u2-rte:true;
-    --u2-rte-toolbar:Bold Italic;
-}
+<form>
+    <u2-rte style="--u2-rte-toolbar:bold italic">
+        <textarea name=content><p>Some <strong>HTML</strong></p></textarea>
+    </u2-rte>
+</form>
 ```
 
 ## Install
@@ -30,6 +25,51 @@ u2-rte {
 [test.html](http://gcdn.li/u2ui/u2@main/el/rte/tests/test.html)  
 [minimal.html](http://gcdn.li/u2ui/u2@main/el/rte/tests/minimal.html)  
 
+## Behavior
+
+HTML is the default language. Markdown loads its converters only when used:
+
+```html
+<u2-rte language="markdown">
+    <textarea name="content">Some **Markdown**</textarea>
+</u2-rte>
+```
+
+Exactly one direct `textarea` is required. Free child content is deliberately
+not supported. Put form attributes such as `name`, `required`, `disabled`,
+`readonly`, `placeholder`, and `form` on the textarea.
+
+The `value` property reads and writes the serialized textarea value. Editor
+changes update it before a bubbling `input` event is emitted from the textarea.
+A bubbling `change` event follows when focus leaves an editor changed since its
+last change event. Form reset, disabled, readonly, placeholder, direction,
+language, and spellchecking state are mirrored back to the editor.
+
+## Languages
+
+- `html` (default) stores sanitized HTML.
+- `markdown` parses with Marked and serializes with Turndown. The dependencies
+  are loaded lazily from jsDelivr.
+
+Other formats need a proven round-trip between their source text and the HTML
+DOM edited by RTE. They should not be added as aliases or partial parsers.
+
+## TODO
+
+- Add `el/rte` to U2's generated project catalog when the module is ready for
+  automatic loading. It currently requires the explicit module import shown
+  above because that catalog lives outside this module.
+- RTE needs a shared root-aware convention-client entry point before this
+  adapter can support editors placed inside an application ShadowRoot. The
+  current public convenience client owns the document root only.
+- RTE should report whether a committed change already has a corresponding
+  native `input` event. The adapter currently uses the transaction trigger to
+  avoid emitting duplicate input events.
+- Complete label, constraint-validation, selection, and focus tests for the
+  visually hidden textarea across current Chromium, Firefox, and WebKit.
+- Allow applications to provide language codecs without turning the initial
+  two built-in formats into a general plugin system prematurely.
+
 ## About
 
 - MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>

package/el/rte/manifest.json

@@ -6,11 +6,26 @@
         "path": "rte.js",
         "declarations": [{
             "kind": "class",
-            "description": "\"Rich\" Rich Text Editor (alpha)",
+            "description": "Progressively enhances a textarea with the RTE2 rich-text editor",
             "name": "U2Rte",
-            "members": [],
-            "events": [],
-            "attributes": [],
+            "members": [{
+                "kind": "field",
+                "name": "value",
+                "description": "The serialized textarea value"
+            }],
+            "events": [{
+                "name": "input",
+                "description": "Fired from the textarea after the editor value changes"
+            },{
+                "name": "change",
+                "description": "Fired from the textarea when focus leaves a changed editor"
+            }],
+            "attributes": [{
+                "name": "language",
+                "description": "Serialization language",
+                "u2-type": "string",
+                "u2Examples": ["html", "markdown"]
+            }],
             "cssProperties": [{
                 "name": "--u2-rte-toolbar",
                 "description": "Space separated list of toolbar commands",

package/el/rte/rte.css

@@ -1,9 +1,34 @@
 u2-rte {
-    display:block;
-    border:1px solid var(--color-line, color-mix(in srgb, currentColor, transparent 75%));
-}
+    display: block;
+    position: relative;
+    border: 1px solid var(--color-line, color-mix(in srgb, currentColor, transparent 75%));
+
+    & > textarea {
+        display: block;
+        inline-size: 100%;
+    }
+
+    &[data-ready] > textarea {
+        position: absolute;
+        inline-size: 1px;
+        block-size: 1px;
+        margin: 0 !important;
+        padding: 0;
+        border: 0;
+        overflow: hidden;
+        clip-path: inset(50%);
+    }
+
+    & > [data-u2-rte-editor] {
+        min-block-size: 6em;
+        padding: .5em;
+        outline: 0;
+        --u2-rte: true;
 
-u2-rte > textarea {
-    display:block;
-    width:100%;
+        &:empty::before {
+            content: attr(data-placeholder);
+            color: color-mix(in srgb, currentColor, transparent 45%);
+            pointer-events: none;
+        }
+    }
 }

package/el/rte/rte.js

@@ -1,56 +1,186 @@
+import {Source, editor} from '../../js/rte/rte.js';
 
-import '../../js/rte/rte.js';
+const codecs = {
+    html: () => ({
+        parse: value => value,
+        serialize: value => value,
+    }),
+    markdown: async () => {
+        const [{parse}, {default: TurndownService}] = await Promise.all([
+            // deno-lint-ignore no-import-prefix
+            import('https://cdn.jsdelivr.net/npm/marked@16.2.1/+esm'),
+            // deno-lint-ignore no-import-prefix
+            import('https://cdn.jsdelivr.net/npm/turndown@7.2.0/+esm'),
+        ]);
+        const turndown = new TurndownService({headingStyle: 'atx'});
+        return {
+            parse: value => parse(value),
+            serialize: value => turndown.turndown(value),
+        };
+    },
+};
 
 export default class U2Rte extends HTMLElement {
-    constructor() {
-        super();
-        let shadowRoot = this.attachShadow({mode:'open'});
-        shadowRoot.innerHTML =
-        `<style>
-        :host {
-            display:block;
-            --u2-rte:true;
-        }
-        #editor {
-            --u2-rte:true;
-            padding:1px; /* to avoid margin collapse */
+    #codec;
+    #source;
+    #observer;
+    #form;
+    #tabindex;
+    #dirty = false;
+    #writing = false;
+    #version = 0;
+
+    connectedCallback() {
+        const textarea = this.querySelector(':scope > textarea:only-child');
+        if (!textarea || this.children.length !== 1) {
+            console.error('u2-rte requires exactly one direct textarea');
+            return;
         }
-        </style>
-        <div id=editor contenteditable></div>
-        `;
-        //this.setAttribute('contenteditable', true);
-        this.editor = this.shadowRoot.getElementById('editor');
-
-        this.editor.addEventListener('input', (event)=>{
-            const html = this.editor.innerHTML;
-            const value = html;
-            if (this.textarea) {
-                this.textarea.value = value;
-            } else {
-                this.innerHTML = value;
-            }
-        });
+        this.textarea = textarea;
+        this.#init(++this.#version);
+    }
 
+    disconnectedCallback() {
+        this.#version++;
+        this.#dispose();
     }
-    connectedCallback() {
-        if (this.children.length === 1 && this.children[0].tagName === 'TEXTAREA') {
-            this.textarea = this.children[0];
+
+    get language() { return this.getAttribute('language') || 'html'; }
+    get value() { return this.textarea?.value ?? ''; }
+    set value(value) {
+        if (!this.textarea) return;
+        this.textarea.value = String(value);
+        if (this.#source) this.#write(this.textarea.value);
+    }
+
+    async #init(version) {
+        const load = codecs[this.language];
+        if (!load) {
+            console.error(`u2-rte: Unsupported language: ${this.language}`);
+            return;
+        }
+        try {
+            const codec = await load();
+            if (!this.isConnected || version !== this.#version) return;
+            this.#codec = codec;
+            this.editor = document.createElement('div');
+            this.editor.contentEditable = 'true';
+            this.editor.dataset.u2RteEditor = '';
+            this.editor.role = 'textbox';
+            this.editor.ariaMultiLine = 'true';
+            this.append(this.editor);
+            this.surface = editor.core.add(this.editor);
+            this.#source = new Source(this.surface);
+            this.#write(this.textarea.value);
+            this.editor.addEventListener('input', this.#input);
+            this.editor.addEventListener('focusout', this.#focusout);
+            this.editor.addEventListener('u2-rte-change', this.#change);
+            this.textarea.addEventListener('focus', this.#focus);
+            this.textarea.addEventListener('invalid', this.#focus);
+            this.#form = this.textarea.form;
+            this.#form?.addEventListener('reset', this.#reset);
+            this.#tabindex = this.textarea.getAttribute('tabindex');
+            this.textarea.tabIndex = -1;
+            this.#observer = new MutationObserver(this.#mutate);
+            this.#observer.observe(this.editor, {subtree: true, childList: true, characterData: true, attributes: true});
+            this.#observer.observe(this.textarea, {attributes: true});
+            this.#state();
+            this.dataset.ready = '';
+        } catch (error) {
+            this.#dispose();
+            console.error('u2-rte:', error);
         }
-        let sourceValue = this.textarea ? this.textarea.value : this.innerHTML;
-        this.editor.innerHTML = sourceValue;
-        
-        this._internals = this.attachInternals();
-        this._internals.role = 'textbox';
     }
-}
 
-customElements.get('u2-rte') || customElements.define('u2-rte', U2Rte);
+    #write(value) {
+        this.#writing = true;
+        try {
+            this.#source.write(this.#codec.parse(value));
+        } finally {
+            this.#writing = false;
+        }
+        this.#sync();
+    }
+
+    #sync() {
+        const html = this.#source.read().html;
+        this.textarea.value = this.#codec.serialize(html);
+    }
+
+    #emitInput(event) {
+        this.#sync();
+        this.#dirty = true;
+        this.textarea.dispatchEvent(new InputEvent('input', {
+            bubbles: true,
+            composed: true,
+            data: event?.data ?? null,
+            inputType: event?.inputType || '',
+        }));
+    }
+
+    #input = event => {
+        event.stopPropagation();
+        this.#emitInput(event);
+    };
+
+    #change = event => {
+        if (this.#writing) return;
+        this.#sync();
+        if (event.detail.transaction.options.trigger !== 'input') this.#emitInput();
+    };
+
+    #focusout = () => queueMicrotask(() => {
+        if (!this.#dirty || this.editor.matches(':focus-within')) return;
+        this.#dirty = false;
+        this.textarea.dispatchEvent(new Event('change', {bubbles: true}));
+    });
+
+    #focus = event => {
+        event.preventDefault();
+        this.editor.focus();
+    };
 
+    #reset = () => queueMicrotask(() => this.#write(this.textarea.value));
 
-// import Showdown from 'https://cdn.skypack.dev/showdown';
-// const converter = new Showdown.Converter();
-// converter.setOption('tables', true);
-// this.editor.innerHTML = converter.makeHtml(sourceValue);
+    #mutate = records => {
+        if (records.some(record => record.target === this.textarea)) this.#state();
+        if (records.some(record => record.target !== this.textarea)) this.#sync();
+    };
 
-// import TurndownService from 'https://cdn.skypack.dev/turndown@7.1.1';
-// value = new TurndownService().turndown(html);
+    #state() {
+        const inactive = this.textarea.disabled || this.textarea.readOnly;
+        this.editor.contentEditable = inactive ? 'false' : 'true';
+        this.editor.ariaDisabled = this.textarea.disabled ? 'true' : null;
+        this.editor.ariaReadOnly = this.textarea.readOnly ? 'true' : null;
+        this.editor.dataset.placeholder = this.textarea.placeholder;
+        for (const name of ['dir', 'lang', 'spellcheck']) {
+            const value = this.textarea.getAttribute(name);
+            if (value === null) this.editor.removeAttribute(name);
+            else this.editor.setAttribute(name, value);
+        }
+    }
+
+    #dispose() {
+        this.#observer?.disconnect();
+        this.#form?.removeEventListener('reset', this.#reset);
+        this.textarea?.removeEventListener('focus', this.#focus);
+        this.textarea?.removeEventListener('invalid', this.#focus);
+        this.editor?.removeEventListener('input', this.#input);
+        this.editor?.removeEventListener('focusout', this.#focusout);
+        this.editor?.removeEventListener('u2-rte-change', this.#change);
+        this.surface?.dispose();
+        this.editor?.remove();
+        if (this.#tabindex === null) this.textarea?.removeAttribute('tabindex');
+        else if (this.#tabindex !== undefined) this.textarea?.setAttribute('tabindex', this.#tabindex);
+        this.removeAttribute('data-ready');
+        this.#observer = null;
+        this.#form = null;
+        this.#source = null;
+        this.#tabindex = undefined;
+        this.#dirty = false;
+        this.surface = null;
+        this.editor = null;
+    }
+}
+
+customElements.get('u2-rte') || customElements.define('u2-rte', U2Rte);

package/el/rte0/README.md

@@ -0,0 +1,37 @@
+# <u2-rte0> - element
+"Rich" Rich Text Editor (alpha)
+
+## Usage
+
+```html
+<u2-rte0 style="--u2-rte-toolbar:Bold Italic">
+    <strong>RTE</strong>
+    <br>
+    <i>(Rich Text Editor)</i>
+</u2-rte0>
+```
+
+```css
+u2-rte0 {
+    --u2-rte:true;
+    --u2-rte-toolbar:Bold Italic;
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/rte0/rte0.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/rte0/rte0.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/el/rte0/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/rte0/tests/minimal.html)  
+
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+

package/el/rte0/manifest.json

@@ -0,0 +1,33 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "rte0.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "\"Rich\" Rich Text Editor (alpha)",
+            "name": "U2Rte0",
+            "members": [],
+            "events": [],
+            "attributes": [],
+            "cssProperties": [{
+                "name": "--u2-rte-toolbar",
+                "description": "Space separated list of toolbar commands",
+                "syntax": "*"
+            },{
+                "name": "--u2-rte",
+                "description": "Marks regions as rich-text editable",
+                "syntax": "*"
+            }],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-rte0",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-rte0",
+            "declaration": { "name": "U2Rte0", "module": "rte0.js" }
+        }]
+    }]
+}

package/el/rte0/rte0.css

@@ -0,0 +1,9 @@
+u2-rte0 {
+    display:block;
+    border:1px solid var(--color-line, color-mix(in srgb, currentColor, transparent 75%));
+}
+
+u2-rte0 > textarea {
+    display:block;
+    width:100%;
+}

package/el/rte0/rte0.js

@@ -0,0 +1,56 @@
+
+import '../../js/rte0/rte.js';
+
+export default class U2Rte0 extends HTMLElement {
+    constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode:'open'});
+        shadowRoot.innerHTML =
+        `<style>
+        :host {
+            display:block;
+            --u2-rte:true;
+        }
+        #editor {
+            --u2-rte:true;
+            padding:1px; /* to avoid margin collapse */
+        }
+        </style>
+        <div id=editor contenteditable></div>
+        `;
+        //this.setAttribute('contenteditable', true);
+        this.editor = this.shadowRoot.getElementById('editor');
+
+        this.editor.addEventListener('input', (event)=>{
+            const html = this.editor.innerHTML;
+            const value = html;
+            if (this.textarea) {
+                this.textarea.value = value;
+            } else {
+                this.innerHTML = value;
+            }
+        });
+
+    }
+    connectedCallback() {
+        if (this.children.length === 1 && this.children[0].tagName === 'TEXTAREA') {
+            this.textarea = this.children[0];
+        }
+        let sourceValue = this.textarea ? this.textarea.value : this.innerHTML;
+        this.editor.innerHTML = sourceValue;
+        
+        this._internals = this.attachInternals();
+        this._internals.role = 'textbox';
+    }
+}
+
+customElements.get('u2-rte0') || customElements.define('u2-rte0', U2Rte0);
+
+
+// import Showdown from 'https://cdn.skypack.dev/showdown';
+// const converter = new Showdown.Converter();
+// converter.setOption('tables', true);
+// this.editor.innerHTML = converter.makeHtml(sourceValue);
+
+// import TurndownService from 'https://cdn.skypack.dev/turndown@7.1.1';
+// value = new TurndownService().turndown(html);

package/el/system/styler.js

@@ -597,6 +597,7 @@ function parseCssLength(str) {
 }
 
 function unitToPx(value, unit, el){
+    if (!unit) return value;
     if (unit === 'px') return value;
     if (unit === 'cm') return value * 96 / 2.54;
     if (unit === 'mm') return value * 96 / 25.4;
@@ -627,6 +628,7 @@ function unitToPx(value, unit, el){
 }
 
 function pxToUnit(px, unit, el){
+    if (!unit) return px;
     if (unit === 'px')  return px;
     if (unit === 'cm')  return px * 2.54 / 96;
     if (unit === 'mm')  return px * 25.4 / 96;

package/el/tooltip/tooltip.css

@@ -3,7 +3,7 @@ u2-tooltip {
     /* relevant */
     opacity: 0;
     visibility:hidden;
-    position: absolute;
+    position: absolute; /* keep its document position while scrolling */
     left: -9999px;
     top: -9999px;
     z-index: 9999;
@@ -97,4 +97,4 @@ u2-tooltip {
         top: var(--halfMinus);
     }
 }
-/* */
+/* */

package/js/Placer/Placer.js

@@ -52,7 +52,8 @@ export class Placer {
 
         let position = getComputedStyle(this.el).getPropertyValue('position');
         if (position !== 'fixed') {
-            let root = offsetParent(this.el);
+            // Popovers use the top-layer containing block regardless of their DOM ancestry.
+            let root = this.el.popover ? null : offsetParent(this.el);
             if (root) {
                 // if (!root) root = document.documentElement; // make no sense
                 viewport = root.getBoundingClientRect();