u2ui 1.5.3 → 1.5.4

package/js/rte/src/unstyle/unstyle.js

@@ -0,0 +1,140 @@
+const NAME = /^[a-z][a-z\d-]*$/;
+const ATTRIBUTE = /^[a-z][a-z\d_.:-]*$/;
+
+const SCOPES = new Set(['foreign', 'all']);
+
+// The ladder is ordered from least to most destructive, and it does not stop at
+// the application's own presentation: someone who keeps pressing wants more
+// removed, so the last rungs take the declared content classes and finally the
+// semantic inline elements as well.
+//
+// The first four rungs are scoped to `foreign`: they spare the classes the host
+// declared as content, and the wrappers carrying them.
+export const defaultUnstyleLevels = Object.freeze([
+    level('styles', {attributes: ['style'], scope: 'foreign'}),
+    level('attributes', {scope: 'foreign', attributes: [
+        'align', 'bgcolor', 'border', 'cellpadding', 'cellspacing', 'color',
+        'face', 'height', 'size', 'valign', 'width',
+    ]}),
+    level('classes', {attributes: ['class'], scope: 'foreign'}),
+    level('formatting', {scope: 'foreign',
+        elements: ['b', 'font', 'i', 's', 'span', 'strike', 'u']}),
+    level('contentClasses', {attributes: ['class']}),
+    level('inline', {elements: [
+        'a', 'abbr', 'bdi', 'bdo', 'cite', 'code', 'data', 'del', 'dfn', 'em',
+        'ins', 'kbd', 'mark', 'q', 'ruby', 'samp', 'small', 'strong', 'sub',
+        'sup', 'time', 'var',
+    ]}),
+]);
+
+export class Unstyle {
+    constructor(levels = defaultUnstyleLevels) {
+        if (!Array.isArray(levels) || !levels.length) throw new TypeError('Unstyle levels must be a non-empty array');
+        this.levels = Object.freeze(levels.map(item => level(item?.name, item)));
+        if (new Set(this.levels.map(item => item.name)).size !== this.levels.length) {
+            throw new RangeError('Unstyle level names must be unique');
+        }
+        Object.freeze(this);
+    }
+
+    clean(root, {through, map = null, transaction = null, preserve = null, keep = null} = {}) {
+        if (!root?.querySelectorAll) throw new TypeError('Unstyle cleanup requires a DOM root');
+        if (map !== null && typeof map?.unwrap !== 'function') throw new TypeError('Unstyle cleanup requires a point map');
+        if (transaction !== null && typeof transaction?.touch !== 'function') {
+            throw new TypeError('Unstyle cleanup requires a transaction');
+        }
+        if (preserve !== null && typeof preserve?.has !== 'function') {
+            throw new TypeError('Unstyle cleanup requires a preserved element set');
+        }
+        const declaredClasses = keep === null ? null : new Set(keep);
+        const end = this.levels.findIndex(level => level.name === through);
+        if (end < 0) throw new RangeError(`Unknown unstyle level: ${through}`);
+        const changed = [];
+        const elements = descendants(root).filter(element => !preserve?.has(element));
+        for (const level of this.levels.slice(0, end + 1)) {
+            const kept = keepFor(level, declaredClasses);
+            for (const element of elements.filter(element => matches(level, element, kept)).reverse()) {
+                clear(level, element, map, transaction, kept);
+                if (!changed.includes(element)) changed.push(element);
+            }
+        }
+        return changed;
+    }
+}
+
+export const defaultUnstyle = new Unstyle();
+
+// Only a level scoped to foreign presentation spares the declared classes; the
+// rungs below that scope are where the application's own presentation goes.
+export function keepFor(level, declaredClasses) {
+    return level.scope === 'foreign' ? declaredClasses : null;
+}
+
+// `kept` names classes the host treats as content, so removing presentation does
+// not remove meaning the application declared.
+export function matches(level, element, kept = null) {
+    return level.elements.includes(element.localName) && !declared(element, kept)
+        || level.attributes.some(name => removable(name, element, kept));
+}
+
+// An element carrying a declared content class is content itself: the class
+// applies to that wrapper, so removing presentation must not unwrap it.
+export function declared(element, kept = null) {
+    return !!kept?.size && [...element.classList].some(name => kept.has(name));
+}
+
+// Whether a level would actually take something off this element.
+export function removable(name, element, kept = null) {
+    if (!element.hasAttribute(name)) return false;
+    if (name !== 'class' || !kept?.size) return true;
+    return [...element.classList].some(value => !kept.has(value));
+}
+
+// Takes a level's attributes off one element, narrowing `class` to the names
+// the host declared as content instead of dropping it whole.
+export function strip(level, element, kept = null) {
+    for (const name of level.attributes) {
+        if (name === 'class' && kept?.size) {
+            const rest = [...element.classList].filter(value => kept.has(value));
+            if (rest.length) element.setAttribute('class', rest.join(' '));
+            else element.removeAttribute('class');
+            continue;
+        }
+        element.removeAttribute(name);
+    }
+}
+
+function clear(level, element, map, transaction, kept = null) {
+    const parent = element.parentNode;
+    strip(level, element, kept);
+    const unwrap = !!parent && (level.elements.includes(element.localName)
+        || element.localName === 'span' && !element.attributes.length);
+    if (unwrap) map ? map.unwrap(element) : element.replaceWith(...element.childNodes);
+    if (transaction && parent) transaction.touch(unwrap ? parent : element).touch(parent);
+}
+
+function descendants(root) {
+    const result = root.nodeType === Node.ELEMENT_NODE ? [root] : [];
+    return result.concat([...root.querySelectorAll('*')]);
+}
+
+function level(name, options = {}) {
+    if (typeof name !== 'string' || !name.trim()) throw new TypeError('An unstyle level requires a name');
+    const attributes = names(options.attributes || [], ATTRIBUTE, 'attribute');
+    const elements = names(options.elements || [], NAME, 'element');
+    if (!attributes.length && !elements.length) throw new TypeError('An unstyle level requires attributes or elements');
+    const scope = options.scope ?? 'all';
+    if (!SCOPES.has(scope)) throw new TypeError(`Unknown unstyle scope: ${scope}`);
+    return Object.freeze({name: name.trim(), attributes, elements, scope});
+}
+
+function names(values, pattern, label) {
+    if (!Array.isArray(values)) throw new TypeError(`Unstyle ${label}s must be an array`);
+    const result = [];
+    for (const value of values) {
+        const name = String(value).toLowerCase();
+        if (!pattern.test(name)) throw new TypeError(`Invalid unstyle ${label}: ${value}`);
+        if (!result.includes(name)) result.push(name);
+    }
+    return Object.freeze(result);
+}

package/js/rte/tables.js

@@ -0,0 +1,7 @@
+import {editor} from './rte.js';
+import {tables} from './src/client/tables.js';
+
+export {tables, tableTools} from './src/client/tables.js';
+export {Tables} from './src/command/table.js';
+
+editor.add(tables);

package/js/rte/unstyle.js

@@ -0,0 +1,8 @@
+import {editor} from './rte.js';
+import {unstyle} from './src/client/unstyle.js';
+
+export {unstyle, unstyles} from './src/client/unstyle.js';
+export {unstyleCommand} from './src/command/unstyle.js';
+export {Unstyle, defaultUnstyle, defaultUnstyleLevels} from './src/unstyle/unstyle.js';
+
+editor.add(unstyle);

package/js/rte0/README.md

@@ -0,0 +1,37 @@
+# SelectorObserver.js
+Easily Make Elements Editable with Intuitive Controls
+
+## Usage
+
+```html
+<div contenteditable style="--u2-rte:true" id="myEditor">
+    Start <strong>typing</strong> here...
+</div>
+```
+
+```css
+#myEditor {
+    --u2-rte-toolbar:Bold Italic Code;
+}
+```
+
+## Demos
+
+[behavior.html](http://gcdn.li/u2ui/u2@main/js/rte0/tests/behavior.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/js/rte0/tests/test.html)  
+[selection-explorer.html](http://gcdn.li/u2ui/u2@main/js/rte0/tests/selection-explorer.html)  
+[events.html](http://gcdn.li/u2ui/u2@main/js/rte0/tests/events.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/js/rte0/tests/minimal.html)  
+[fixes.html](http://gcdn.li/u2ui/u2@main/js/rte0/tests/fixes.html)  
+[range.html](http://gcdn.li/u2ui/u2@main/js/rte0/tests/range.html)  
+[ai.html](http://gcdn.li/u2ui/u2@main/js/rte0/tests/ai.html)  
+
+## Files
+
+- /src/fixes.js: Tries to fix as many wrong browser behaviors as possible for a seamless experience.
+
+## 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/js/rte0/rte.js

@@ -0,0 +1,7 @@
+
+import './src/fixes.js';
+import './src/behavior.js';
+import './src/rte.js';
+import './src/ui.js';
+import './src/ui.items.js';
+

package/js/{rte → rte0}/src/behavior.js

@@ -1,4 +1,3 @@
-
 import './events.js';
 import {$range} from './range.js';
 

package/js/{rte → rte0}/src/events.js

@@ -1,6 +1,5 @@
 import {$range} from './range.js';
 
-
 export let active = null; // the active contenteditable (even if the toolbar has focus)
 export let focused = null; // the focused contenteditable (not if the toolbar has focus)
 export let range = null; // the current selection range

package/js/{rte → rte0}/src/range.js

@@ -1,5 +1,3 @@
-
-
 const selection = getSelection();
 const chainedFns = {setStart:1,setStartBefore:1,setStartAfter:1,setEnd:1,setEndAfter:1,selectNode:1,selectNodeContents:1,insertNode:1,collapse:1,deleteContents:1};
 

package/js/{rte → rte0}/src/ui.items.js

@@ -1,5 +1,3 @@
-
-
 import {$range} from './range.js';
 import * as state from './events.js';
 

package/js/{rte → rte0}/src/ui.js

@@ -1,4 +1,3 @@
-
 import {$range} from './range.js';
 import * as state from './events.js';
 import {Rte} from './rte.js';

package/package.json

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

package/u2/Element.js

@@ -17,8 +17,8 @@ export default class U2Element extends HTMLElement {
 
 /** Bring what a child needs into this element's shadow. Both start at once — the css is the
     part that shows, it must not wait for a module. Defaults follow the category: an el has
-    both, a class is css only, an attr is js only — `u2-skin` is the attr that styles, and it
-    stays an attr because it carries a value: useAttr('skin', {css:true}). */
+    both, a class is css only, an attr is js only — `u2-skin` is css and nothing else, and it
+    stays an attr because it carries a value: useAttr('skin', {css:true, js:false}). */
 function use(el, category, name, {css = category !== 'attr', js = category !== 'class'} = {}) {
     const path = `${base}${category}/${name}/${name}`;
     const warn = err => console.warn('u2: could not load', category + '/' + name, err);