u2ui 1.0.0

package/js/rte/src/ui.js

@@ -0,0 +1,269 @@
+
+import {$range} from './range.js';
+import * as state from './events.js';
+import {Rte} from './rte.js';
+
+import '../../../el/tooltip/tooltip.js';
+import '../../../el/ico/ico.js';
+
+const elsRoot = import.meta.resolve('../../../el/');
+
+const css = `
+@import '${elsRoot}tooltip/tooltip.css';
+@import '${elsRoot}ico/ico.css';
+
+[contenteditable]:focus td {
+	outline:1px dashed #F4E2DC;
+	outline-offset:0px;
+}
+[contenteditable] td {
+	min-width:1em;
+}
+[contenteditable]:focus table {
+	outline:1px dashed #F4E2DC;
+	outline-offset:1px;
+}
+
+
+#u2RteToolbar {
+    --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon_name}/baseline.svg';
+	position:absolute;
+	z-index:1999;
+	box-shadow: 0 0 10px rgba(0,0,0,.4);
+	font-size:14px;
+	font-family: system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+    background-color:var(--color-text, #222);
+    color: var(--color-bg, #fff);
+    max-width: min(17rem, 100vw);
+    transition:.14s;
+    transition-property:top, left, opacity;
+    margin:0;
+    overflow: visible;
+    border:0;
+
+    & [hidden] { display:none !important; }
+
+    & u2-ico { --size: 21px }
+    
+    & > div {
+        display:flex;
+        flex-flow:wrap;
+        justify-content: space-between;
+    }
+    
+    & :is(input, textarea) {
+        font-size:inherit;
+        background:inherit;
+        border:1px solid;
+        width:100%;
+        padding:3px;
+        color:#fff;
+    }
+    & input[type=checkbox] {
+        width:auto;
+    }
+    & table {
+        margin:0;
+        flex: 1 1 100%;
+        border-collapse:collapse;
+        width: 100%;
+    }
+    
+    & td {
+        height:39px;
+        vertical-align: middle;
+        padding:8px 10px;
+    }
+    & input {
+        border:none;
+        background:#ccc;
+        color:#000;
+        margin:0;
+        padding:.3em .6em;
+    }
+    & input:is(:focus, :hover) {
+        background:#fff;
+    }
+    
+    & .-item {
+        background:transparent;
+        border-radius:0;
+        border:0;
+    }
+    & .-item {
+        display:flex;
+        align-items:center;
+        justify-content: center;
+        line-height:1.2;
+        padding:.6em;
+        color:inherit;
+    }
+    & .-item:hover {
+        background:#fff4;
+    }
+    & .-item.active {
+        color: var(--color, #0099ff);
+        color: color-mix(in srgb, var(--color, #0099ff), #fff 30%);
+    }
+    & .-item.-button {
+        width:auto;
+        flex:auto;
+    }
+    & .-item.-select {
+        width:8em;
+        position:relative;
+        padding:.5em .7em;
+        flex:1 1 auto;
+        padding-right: 1.8em;
+        justify-content: start;
+    }
+    & .-item.-select:after {
+        content:'▼';
+        position:absolute;
+        top:50%;
+        right:1em;
+        transform:translateY(-50%);
+        font-size:.7em;
+    }
+    
+    & .-state {
+        /* button reset: */
+        background:transparent;
+        padding:0;
+        margin:0;
+
+        overflow:hidden;
+        white-space:nowrap;
+    }
+    
+    & .-options {
+        padding:.2em;
+        position: absolute;
+        left:-1px;
+        top:100%;
+        white-space:nowrap;
+        z-index:1;
+        background-color:#fff;
+        color:#000;
+        overflow:visible;
+        box-shadow:0 0 .5rem #0007;
+        min-width:100%;
+        cursor:pointer;
+    }
+    & .-options {
+        opacity:0;
+        visibility:hidden;
+        transition:.2s .1s;
+    }
+    & .-select:is(:hover, :focus-within) .-options {
+        opacity:1;
+        visibility:visible;
+    }
+
+    & .-options > * {
+        padding:.3rem !important;
+        white-space: nowrap;
+        display:block !important;
+        clear:both !important;
+        width:auto !important;
+        border-bottom:1px solid #eee;
+        margin:0 !important;
+    }
+    & .-options > .-selected {
+        background-color: var(--color, #49F);
+        color: #fff;
+    }
+    
+}
+`;
+
+let style = document.createElement('style');
+style.innerHTML = css;
+document.head.appendChild(style);
+
+let uiMouseover = 0;
+
+window.Rte.ui = {
+	init() {
+
+		const my = this;
+		my.div = document.createElement('div');
+		my.div.id = 'u2RteToolbar';
+        my.div.popover = 'manual';
+        my.div.classList.add('u2RteTool');
+        my.div.tabIndex = -1;
+
+		my.mainContainer = document.createElement('div');
+		my.mainContainer.className = '-main';
+		my.div.appendChild(my.mainContainer);
+
+        addEventListener('u2-rte-activate', function(e) {
+            my.mainContainer.innerHTML = '';
+
+            for (let item of Rte.targetToolbarItems(e.target)) {
+                my.mainContainer.appendChild(item.el);
+            }
+
+            document.documentElement.appendChild(my.div);
+            my.div.showPopover();
+
+            e.target.addEventListener('keydown', shortcutListener, false);
+		});
+        addEventListener('u2-rte-deactivate', function(e) {
+            my.div.hidePopover();
+            e.target.removeEventListener('keydown', shortcutListener, false);
+		});
+        addEventListener('u2-rte-selectionchange', function() {
+			for (let item of Object.values(Rte.items)){
+				if (!item.enable || item.enable(state.element)) {
+					item.enabled = true;
+					item.el.removeAttribute('hidden');
+					if (item.check) {
+						const act = item.check(state.element) ? 'add' : 'remove';
+						item.el.classList[act]('active');
+					}
+				} else {
+					item.enabled = false;
+					item.el.setAttribute('hidden',true);
+				}
+			}
+		});
+		const shortcutListener = function(e) {
+			if (e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey) {
+				const char = e.key;
+				for (let item of Object.values(Rte.items)){
+					if (item.enabled && item.shortcut === char) {
+                        item.el.click();
+		                e.preventDefault();
+					}
+				}
+			}
+		};
+		my.div.addEventListener('mouseenter',() => {uiMouseover = 1;});
+		my.div.addEventListener('mouseleave',() => {uiMouseover = 0;});
+	},
+	setItem(name, opt) {
+        return Rte.setItem(name, opt);
+	},
+	setSelect(name, opt) {
+        return Rte.setSelect(name, opt);
+	},
+	items:{}
+};
+
+Rte.ui.init();
+
+
+import('../../Placer/Placer.js').then(({Placer})=>{
+    const placer = new Placer(Rte.ui.div, {
+        x:'center',
+        y:'after',
+    });
+    addEventListener('u2-rte-selectionchange', async ()=>{
+        if (uiMouseover) return;
+        placer.options.margin = getSelection().isCollapsed ? 120 : 40;
+        placer.toClientRect($range.fromSelection().boundingClientRect());
+    });
+});
+
+const lang = document.documentElement.getAttribute('lang') || navigator.language.substring(0,2) || 'en';

package/js/rte/src/util/htmlparser.js

@@ -0,0 +1,178 @@
+let startTag = /^<([\w\:\-]+)((?:\s+[\w\:\-]+(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/,
+    endTag = /^<\/([\w\:\-]+)[^>]*>/,
+    attr = /([\w\:\-]+)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g;
+// Empty Elements - HTML 4.01
+let empty = makeMap("area,base,basefont,br,col,frame,hr,img,input,isindex,link,meta,param,embed");
+
+// Block Elements - HTML 4.01
+let block = makeMap("address,applet,blockquote,button,center,dd,del,dir,div,dl,dt,fieldset,form,frameset,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,p,pre,script,table,tbody,td,tfoot,th,thead,tr,ul");
+
+// Inline Elements - HTML 4.01
+let inline = makeMap("a,abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var");
+
+// Elements that you can, intentionally, leave open
+// (and which close themselves)
+let closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr");
+
+// Attributes that have their values filled in disabled="disabled"
+let fillAttrs = makeMap("checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected");
+
+// Special Elements (can contain anything)
+let special = makeMap("script,style");
+
+let HTMLParser  = function(html, handler) {
+	let index, chars, match, stack = [], last = html;
+	stack.last = function() {
+		return this[ this.length - 1 ];
+	};
+
+	while (html) {
+		chars = true;
+
+		// Make sure we're not in a script or style element
+		if (!stack.last() || !special[ stack.last() ]) {
+
+			// Comment
+			if (html.indexOf("<!--") === 0) {
+				index = html.indexOf("-->");
+
+				if (index >= 0) {
+					if (handler.comment )
+						handler.comment( html.substring( 4, index ) );
+					html = html.substring( index + 3 );
+					chars = false;
+				}
+
+			// end tag
+			} else if (html.indexOf("</") === 0) {
+	            //$log("HTMLParser: endtag ");
+				match = html.match( endTag );
+
+				if (match) {
+	                //$log("HTMLParser: endtag match : "+match[0]);
+					html = html.substring( match[0].length );
+					match[0].replace( endTag, parseEndTag );
+					chars = false;
+				}
+
+			// start tag
+			} else if (html.indexOf("<") === 0) {
+	            //$log("HTMLParser: starttag ");
+				match = html.match( startTag );
+
+				if (match) {
+	                //$log("HTMLParser: starttag match : "+match[0]);
+					html = html.substring( match[0].length );
+					match[0].replace( startTag, parseStartTag );
+					chars = false;
+				}
+			}
+
+			if (chars) {
+	            //$log("HTMLParser: other ");
+				index = html.indexOf("<");
+				let text = index < 0 ? html : html.substring( 0, index );
+				html = index < 0 ? "" : html.substring( index );
+				if (handler.chars) {
+	                //$log("HTMLParser: chars " + text);
+				    handler.chars( text );
+			    }
+			}
+		} else {
+	        //$log("HTMLParser: special ");
+			html = html.replace(new RegExp("(.*)<\/" + stack.last() + "[^>]*>"), function(all, text) {
+				text = text.replace(/<!--(.*?)-->/g, "$1").
+					replace(/<!\[CDATA\[(.*?)]]>/g, "$1");
+				if (handler.chars) {
+	                //$log("HTMLParser: special chars " + text);
+				    handler.chars( text );
+			    }
+				return "";
+			});
+			parseEndTag( "", stack.last() );
+		}
+		if (html == last) {throw "Parse Error: " + html;}
+		last = html;
+	}
+
+	// Clean up any remaining tags
+	parseEndTag();
+
+	function parseStartTag(tag, tagName, rest, unary) {
+		tagName = tagName.toLowerCase();
+		if (block[ tagName ]) {
+			while ( stack.last() && inline[ stack.last() ]) {
+				parseEndTag('', stack.last());
+			}
+		}
+
+		if (closeSelf[ tagName ] && stack.last() == tagName) {
+			parseEndTag('', tagName);
+		}
+
+		unary = empty[ tagName ] || !!unary;
+
+		if (!unary )
+			stack.push( tagName );
+
+		if (handler.start) {
+			let attrs = [];
+
+			rest.replace(attr, function(match, name) {
+				let value = arguments[2] ? arguments[2] :
+					arguments[3] ? arguments[3] :
+					arguments[4] ? arguments[4] :
+					fillAttrs[name] ? name : "";
+
+				attrs.push({
+					name: name,
+					value: value,
+					escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') //"
+				});
+			});
+
+			if (handler.start) {
+			    //$log("unary ? : "+unary);
+				handler.start( tagName, attrs, unary );
+			}
+		}
+	}
+
+	function parseEndTag(tag, tagName) {
+	  let pos;
+		// If no tag name is provided, clean shop
+		if (!tagName) {
+			pos = 0;
+		} else {
+		// Find the closest opened tag of the same type
+			for (pos = stack.length - 1; pos >= 0; pos--) {
+				//$log("parseEndTag : "+stack[ pos ] );
+				if (stack[ pos ] == tagName) {
+				    break;
+			    }
+			}
+        }
+		if (pos >= 0) {
+			// Close all the open elements, up the stack
+			for (let i = stack.length - 1; i >= pos; i--) {
+                if (handler.end) {
+				    //$log("end : "+stack[ i ] );
+                    handler.end( stack[ i ] );
+                }
+			}
+			// Remove the open elements from the stack
+			//$log("setting stack length : " + stack.length + " -> " +pos );
+			stack.length = pos;
+		}
+	}
+};
+function makeMap(str) {
+	let obj = {}, items = str.split(",");
+	for (let i = 0; i < items.length; i++ )
+		obj[ items[i] ] = true;
+	return obj;
+}
+
+export {
+	HTMLParser
+};

package/js/rte/src/util/indentHtml.js

@@ -0,0 +1,48 @@
+
+import {HTMLParser} from './htmlparser.js';
+
+export function indent(str) {
+	let res = '';
+	let ind = '';
+	let pre = false;
+	str = str.replace(/\n|\t/g, ' ').replace(/<([\/a-zA-Z0-9]+)/g, function(a) { return a.toLowerCase(); });
+	HTMLParser(str,{
+		start(tag, attrs, unary) {
+			pre = tag==='pre' ? true : pre;
+			!pre && (res += ind);
+			res += makeStartTag(tag,attrs,unary);
+			!pre && (res+='\n');
+			!unary && (ind += '\t');
+		},
+		end(tag) {
+			pre = tag==='pre' ? false : pre;
+			!pre && (ind=ind.substring(1));
+			res += ind+'</' + tag.toLowerCase() + '>';
+			!pre && (res+='\n');
+		},
+		chars(text) {
+			!pre && (res += ind);
+			if (!text.match(/^\s/)) text = '\uFEFF'+text; // mark if no whitespace
+			if (!text.match(/\s$/)) text = text+'\uFEFF';
+			res += text;
+			!pre && (res+='\n');
+		},
+		comment(text) {
+			res += "<!--" + text + "-->";
+		}
+	});
+	return res;
+};
+
+function makeStartTag(tag, attrs, unary) {
+    let str = '<' + tag;
+    for (var i = 0, att; att = attrs[i++];) {
+        str += ' ' + att.name + '="' + att.escaped + '"';
+    }
+    str += (unary?'/':'')+'>';
+    return str;
+};
+
+export function unindent(str){
+    return str.replace(/\s*\uFEFF\s*/g,'');
+}

package/js/rte/tests/ai.html

@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+    <title>Test</title>
+    <script src="../../../u2/tests/test-init.js" type=module async></script>
+
+    <script src="../../../u2/auto.js" type=module async></script>
+
+    <script src="../rte.js" type=module async></script>
+
+    <style>
+        body {
+            max-width: 100rem;
+        }
+        .rte {
+            border: 1px solid #ccc;
+            margin: 10px;
+            padding: 10px;
+            min-height: 100px;
+        }
+        .u2-flex {
+            margin:2rem 0;
+            gap:.4rem;
+        }
+        .u2-flex > * {
+            margin:0;
+            padding:.5rem; 
+            flex:1 1 18rem;
+            border:1px solid black;
+        }
+        u2-code {
+            font-size:12px;
+        }
+    </style>
+
+</head>
+
+<body>
+
+
+<section id=container>
+
+    <div class=u2-flex>
+        <div id=rte-1 class=rte contenteditable spellcheck=false>
+            <p>
+                Nachdem die Weltraumsonde Voyager 1 monatelang nur Datenmüll zur Erde gesendet hat, ist der erste Schritt der Reparatur gelungen. Am Wochenende wurden zum ersten Mal wieder korrekte Daten zu Gesundheit und Status empfangen. Das hat die NASA jetzt publik gemacht und ergänzt, dass bald auch wieder wissenschaftliche Messdaten erwartet würden. Als die korrekten Daten am Samstag im Jet Propulsion Laboratory angekommen sind, ist beim verantwortlichen Team Jubel ausgebrochen, heißt es weiter. Es war das erste Mal seit November, dass von der am weitesten von der Erde entfernten Sonde wieder benutzbare Daten zu ihrem Zustand geschickt wurden.
+            </p>
+            <img width="200" height="150" alt="tick" src="https://fastly.picsum.photos/id/237/200/150.jpg?hmac=cP3GW-TQQWpntUpoHauvAWmCaKSFUngooZCPRN50Om8">
+        </div>
+        <u2-code trim editable element=rte-1></u2-code>
+    </div>
+
+    <h2>AI-Only</h2>
+    <div class=u2-flex>
+        <div id=rte-2 class=rte contenteditable spellcheck=false>
+            <p>
+                Nachdem die Weltraumsonde Voyager 1 monatelang nur Datenmüll zur Erde gesendet hat, ist der erste Schritt der Reparatur gelungen. Am Wochenende wurden zum ersten Mal wieder korrekte Daten zu Gesundheit und Status empfangen. Das hat die NASA jetzt publik gemacht und ergänzt, dass bald auch wieder wissenschaftliche Messdaten erwartet würden. Als die korrekten Daten am Samstag im Jet Propulsion Laboratory angekommen sind, ist beim verantwortlichen Team Jubel ausgebrochen, heißt es weiter. Es war das erste Mal seit November, dass von der am weitesten von der Erde entfernten Sonde wieder benutzbare Daten zu ihrem Zustand geschickt wurden.
+            </p>
+            <img width="200" height="150" alt="tick" src="https://fastly.picsum.photos/id/237/200/150.jpg?hmac=cP3GW-TQQWpntUpoHauvAWmCaKSFUngooZCPRN50Om8">
+        </div>
+        <u2-code trim editable element=rte-2></u2-code>
+    </div>
+
+
+    <u2-code trim editable>
+        <style>
+        body {
+            --u2-rte:true;
+        }
+        #rte-2 {
+            --u2-rte:true;
+            --u2-rte-toolbar: ai;
+        }
+        </style>
+    </u2-code>
+
+
+            
+</section>

package/js/rte/tests/behavior.html

@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+    <title>Test</title>
+    <script src="../../../u2/tests/test-init.js" type=module async></script>
+
+    <script src="../../../u2/auto.js" type=module async></script>
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/aria.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+    <script src="../src/behavior.js" type=module async></script>
+    <style>
+        body {
+            max-width: 200rem;
+        }
+        [contenteditable] {
+            border: 1px solid #ccc;
+            margin: 10px;
+            padding: 10px;
+            min-height: 100px;
+        }
+        .rte {
+            --u2-rte:true;
+        }
+        .u2-flex {
+            gap:.4rem;
+        }
+        .u2-flex > * {
+            margin:0;
+            flex:1 1 18rem;
+        }
+        u2-code {
+            font-size:12px;
+        }
+    </style>
+
+</head>
+
+<body>
+
+
+<section id=container>
+
+
+    <div class=u2-flex>
+        <div id=rte-1 class=rte contenteditable spellcheck=false>
+force p inside divs <span>span</span> more
+<p>paragraph</p>
+        </div>
+        <u2-code trim editable element=rte-1></u2-code>
+    </div>
+
+
+    <div class=u2-flex>
+        <ul id=rte-2 class=rte contenteditable spellcheck=false>
+force li inside ul
+<li>list item</li>
+<li>list item</li>
+<span>span</span> <span>span</span>
+        </ul>
+        <u2-code trim editable element=rte-2></u2-code>
+    </div>
+
+    <div class=u2-flex>
+        <p id=rte-3 class=rte contenteditable spellcheck=false>
+force br inside p
+        </p>
+        <u2-code trim editable element=rte-3></u2-code>
+    </div>
+
+    <div class=u2-flex>
+        <div id=rte-4 class=rte contenteditable spellcheck=false>
+<p>
+    <ul>
+        <li>Pharagraphs</li>
+        <li>should not contain</li>
+        <li>lists</li>
+    </ul>
+</p>
+        </div>
+        <u2-code trim editable element=rte-4></u2-code>
+    </div>
+
+</section>