u2ui 1.0.1 → 1.4.6

package/js/rte/rte.js

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

package/js/rte/src/behavior.js

@@ -1,228 +1,228 @@
-
-import './events.js';
-import {$range} from './range.js';
-
-// /* cleaner */
-// {
-// 	let Cleaner;
-// 	Rte.on('input', function() {
-// 		if (!Cleaner) Cleaner = new c1.NodeCleaner();
-// 		Cleaner.cleanContents(Rte.active, true);
-// 	});
-// }
-
-/* force li's in contenteditable uls */
-{
-	let active;
-	let check = function(e){
-		let child;
-		for (child of active.childNodes) {
-			if (child.tagName === 'LI') continue;
-			if (child.nodeType === 3 && !child.textContent.trim()) continue;
-			if (child.nodeName === 'UL') {
-				child.removeNode();
-				continue;
-			}
-			let li = document.createElement('li');
-			child.before(li);
-			li.append(child);
-		}
-	}
-	addEventListener('u2-rte-activate', function(event) {
-		if (event.target.tagName !== 'UL') return;
-		active = event.target;
-		check()
-		event.target.addEventListener('input', check);
-	});
-	addEventListener('u2-rte-deactivate', function(event) {
-		if (event.target.tagName !== 'UL') return;
-		event.target.removeEventListener('input', check);
-	});
-}
-
-
-/* force p tag inside contenteditable divs */
-// const inlineElements = {A:1,ABBR:1,ACRONYM:1,B:1,BDO:1,BIG:1,BR:1,BUTTON:1,CITE:1,CODE:1,DFN:1,EM:1,I:1,IMG:1,INPUT:1,KBD:1,LABEL:1,MAP:1,OBJECT:1,Q:1,SAMP:1,SCRIPT:1,SELECT:1,SMALL:1,SPAN:1,STRONG:1,SUB:1,SUP:1,TEXTAREA:1,TT:1,VAR:1};	
-// function isInline(node) {
-// 	return node.nodeType === 3 || inlineElements[node.tagName];
-// }
-// function forceChildren(container, tag) {
-// 	// group inline elements and text-nodes to wrap them with tag
-// 	let newElement = null;
-// 	for (const node of [...container.childNodes]) { // need an array because children changes
-// 		if (isInline(node)) {
-// 			if (!newElement) {
-// 				newElement = document.createElement(tag);
-// 				node.before(newElement);
-// 			}
-// 			newElement.append(node);
-// 		} else {
-// 			newElement = null;
-// 		}
-// 	}
-// }
-// // addEventListener('u2-rte-activate', function(event) {
-// 	if (event.target.tagName !== 'DIV') return;
-// 	forceChildren(event.target, 'p');
-// });
-
-document.addEventListener('input',function(e){
-	if (!e.target.isContentEditable) return;
-	if (e.target.tagName !== 'DIV') return;
-	const range = $range.fromSelection();
-	const text = range.startContainer;
-	const offset = range.startOffset;
-	if (text.nodeType !== 3) return; /* text-node */
-	if (text.parentNode === e.target) { // warp blank text-nodes with p
-		const p = document.createElement('p');
-		text.after(p);
-		p.append(text);
-		range.setStart(text, offset);
-		range.select();
-	} else { // replace every div with a p
-		const div = text.parentNode;
-		if (div.tagName !== 'DIV') return;
-		//if (div.parentNode !== e.target) return;
-		const p = document.createElement('p');
-		div.after(p);
-		p.append(div)
-		div.removeNode();
-		range.setStart(text, offset);
-		range.select();
-	}
-});
-
-
-
-/* force p's to not contain a ul  (NEEDED?)  */
-document.addEventListener('input',function(e){
-	if (!e.target.isContentEditable) return;
-	if (e.target.tagName !== 'DIV') return;
-
-	const range = $range.fromSelection();
-	const text = range.startContainer;
-	const offset = range.startOffset;
-
-	if (text.nodeType !== 3) return; // text-node
-	const ul = text.parentNode.parentNode;
-	if (ul.tagName !== 'UL') return;
-	const p = ul.parentNode;
-	if (p.tagName !== 'P') return;
-	if (p.childNodes.length !== 1) return;
-	p.removeNode();
-
-	range.setStart(text, offset).select();
-});
-
-/* force br's tag inside contenteditable */
-const elementWithParagraphs = {DIV:1,TD:1,TH:1,LI:1,MAIN:1,ARTICLE:1,SECTION:1,ASIDE:1,HEADER:1,FOOTER:1,DETAILS:1};
-document.addEventListener('keydown',function(e){
-	if (!e.target.isContentEditable) return;
-	if (e.code !== 'Enter') return;
-	if (elementWithParagraphs[e.target.tagName]) return;
-	const br = document.createElement('br');
-	$range.fromSelection().deleteContents().insert(br).collapse().select();
-	e.preventDefault();
-},true);
-
-/* prevent links inside links */
-document.addEventListener('input',function(e){
-	if (!e.target.isContentEditable) return;
-	if (!e.target.closest('A')) return;
-	let a;
-	while (a = e.target.c1Find('a')) a.removeNode();
-});
-
-/* prevent phx inside phx */
-{
-	let PHX = {P:1,H1:1,H2:1,H3:1,H4:1,H5:1,H6:1,};
-	document.addEventListener('input',function(e){
-		if (!e.target.isContentEditable) return;
-		const check = function(node) {
-			Array.from(node.children).forEach(check); // for of will skip nodes (if some removed)
-			if (isPHX(node.parentNode) && isPHX(node)) {
-				if (node.nextElementSibling) {
-					node.after(document.createElement('br'));
-				}
-				node.removeNode();
-			}
-		}
-		function isPHX (node){
-			return PHX[node.tagName];
-		}
-		check(e.target)
-	});
-}
-/* */
-
-
-
-// remove node and replace it by its children
-Node.prototype.removeNode = function() {
-    this.replaceWith(...this.childNodes);
-};
-
-
-
-// HR: (todo: move to fixes.js?)
-
-document.addEventListener('click',function(e){
-    if (e.target.tagName === 'HR') {
-        $range().selectNode(e.target).select();
-    }
-});
-
-
-// firefox: place selection before hr if it is inside
-document.addEventListener('selectionchange',function(e){
-    const selection = getSelection();
-    if (selection.anchorNode.tagName === 'HR') {
-        $range().setStartBefore(selection.anchorNode).collapse().select(); // acts like chrome, selectNode(hr) will not work
-    }
-
-    // mark all hr's inside selection
-    document.querySelectorAll('hr.HrSelected').forEach(hr=>hr.classList.remove('HrSelected'));
-    selection.getRangeAt(0).commonAncestorContainer.querySelectorAll?.('hr').forEach(hr=>{
-        if (selection.containsNode(hr)) {
-            hr.classList.add('HrSelected');
-        }
-    });
-},true);
-
-const style = document.createElement('style');
-style.textContent = `
-hr.HrSelected {
-    outline: .3rem solid var(--u2-rte-selection-color, #49F9);
-}
-`;
-document.head.appendChild(style);
-
-// firefox: remove hr after selection on backspace
-document.addEventListener('keydown',function(e){
-    if (e.code !== 'Backspace') return;
-    const range = $range.fromSelection();
-    if (range.startContainer.nodeType !== 1) return;
-    const nodeAfter = range.startContainer.childNodes[range.startOffset];
-    if (nodeAfter && nodeAfter.tagName === 'HR') {
-        nodeAfter.removeNode();
-        e.preventDefault();
-    }
-});
-
-
-
-// PASTE HTML
-
-// // handle html-paste manually, because chrome ads computed styles
-// document.querySelector('[contenteditable]').addEventListener('beforeinput', function(e) {
-//     if (e.inputType === 'insertFromPaste') {
-//         e.preventDefault();
-//         let html = e.dataTransfer.getData('text/html');
-
-//         const start = html.indexOf('<!--StartFragment-->');
-//         const end = html.indexOf('<!--EndFragment-->');
-//         if (start > -1 && end > -1) html = html.slice(start + 20, end);
-
-//         $range.fromSelection().deleteContents().insertHtml(html).collapse().select();
-//     }
-// });
+
+import './events.js';
+import {$range} from './range.js';
+
+// /* cleaner */
+// {
+// 	let Cleaner;
+// 	Rte.on('input', function() {
+// 		if (!Cleaner) Cleaner = new c1.NodeCleaner();
+// 		Cleaner.cleanContents(Rte.active, true);
+// 	});
+// }
+
+/* force li's in contenteditable uls */
+{
+	let active;
+	let check = function(e){
+		let child;
+		for (child of active.childNodes) {
+			if (child.tagName === 'LI') continue;
+			if (child.nodeType === 3 && !child.textContent.trim()) continue;
+			if (child.nodeName === 'UL') {
+				child.removeNode();
+				continue;
+			}
+			let li = document.createElement('li');
+			child.before(li);
+			li.append(child);
+		}
+	}
+	addEventListener('u2-rte-activate', function(event) {
+		if (event.target.tagName !== 'UL') return;
+		active = event.target;
+		check()
+		event.target.addEventListener('input', check);
+	});
+	addEventListener('u2-rte-deactivate', function(event) {
+		if (event.target.tagName !== 'UL') return;
+		event.target.removeEventListener('input', check);
+	});
+}
+
+
+/* force p tag inside contenteditable divs */
+// const inlineElements = {A:1,ABBR:1,ACRONYM:1,B:1,BDO:1,BIG:1,BR:1,BUTTON:1,CITE:1,CODE:1,DFN:1,EM:1,I:1,IMG:1,INPUT:1,KBD:1,LABEL:1,MAP:1,OBJECT:1,Q:1,SAMP:1,SCRIPT:1,SELECT:1,SMALL:1,SPAN:1,STRONG:1,SUB:1,SUP:1,TEXTAREA:1,TT:1,VAR:1};	
+// function isInline(node) {
+// 	return node.nodeType === 3 || inlineElements[node.tagName];
+// }
+// function forceChildren(container, tag) {
+// 	// group inline elements and text-nodes to wrap them with tag
+// 	let newElement = null;
+// 	for (const node of [...container.childNodes]) { // need an array because children changes
+// 		if (isInline(node)) {
+// 			if (!newElement) {
+// 				newElement = document.createElement(tag);
+// 				node.before(newElement);
+// 			}
+// 			newElement.append(node);
+// 		} else {
+// 			newElement = null;
+// 		}
+// 	}
+// }
+// // addEventListener('u2-rte-activate', function(event) {
+// 	if (event.target.tagName !== 'DIV') return;
+// 	forceChildren(event.target, 'p');
+// });
+
+document.addEventListener('input',function(e){
+	if (!e.target.isContentEditable) return;
+	if (e.target.tagName !== 'DIV') return;
+	const range = $range.fromSelection();
+	const text = range.startContainer;
+	const offset = range.startOffset;
+	if (text.nodeType !== 3) return; /* text-node */
+	if (text.parentNode === e.target) { // warp blank text-nodes with p
+		const p = document.createElement('p');
+		text.after(p);
+		p.append(text);
+		range.setStart(text, offset);
+		range.select();
+	} else { // replace every div with a p
+		const div = text.parentNode;
+		if (div.tagName !== 'DIV') return;
+		//if (div.parentNode !== e.target) return;
+		const p = document.createElement('p');
+		div.after(p);
+		p.append(div)
+		div.removeNode();
+		range.setStart(text, offset);
+		range.select();
+	}
+});
+
+
+
+/* force p's to not contain a ul  (NEEDED?)  *
+document.addEventListener('input',function(e){
+	if (!e.target.isContentEditable) return;
+	if (e.target.tagName !== 'DIV') return;
+
+	const range = $range.fromSelection();
+	const text = range.startContainer;
+	const offset = range.startOffset;
+
+	if (text.nodeType !== 3) return; // text-node
+	const ul = text.parentNode.parentNode;
+	if (ul.tagName !== 'UL') return;
+	const p = ul.parentNode;
+	if (p.tagName !== 'P') return;
+	if (p.childNodes.length !== 1) return;
+	p.removeNode();
+
+	range.setStart(text, offset).select();
+});
+
+/* force br's tag inside contenteditable */
+const elementWithParagraphs = {DIV:1,TD:1,TH:1,LI:1,MAIN:1,ARTICLE:1,SECTION:1,ASIDE:1,HEADER:1,FOOTER:1,DETAILS:1};
+document.addEventListener('keydown',function(e){
+	if (!e.target.isContentEditable) return;
+	if (e.code !== 'Enter') return;
+	if (elementWithParagraphs[e.target.tagName]) return;
+	const br = document.createElement('br');
+	$range.fromSelection().deleteContents().insert(br).collapse().select();
+	e.preventDefault();
+},true);
+
+/* prevent links inside links */
+document.addEventListener('input',function(e){
+	if (!e.target.isContentEditable) return;
+	if (!e.target.closest('A')) return;
+	let a;
+	while (a = e.target.c1Find('a')) a.removeNode();
+});
+
+/* prevent phx inside phx */
+{
+	let PHX = {P:1,H1:1,H2:1,H3:1,H4:1,H5:1,H6:1,};
+	document.addEventListener('input',function(e){
+		if (!e.target.isContentEditable) return;
+		const check = function(node) {
+			Array.from(node.children).forEach(check); // for of will skip nodes (if some removed)
+			if (isPHX(node.parentNode) && isPHX(node)) {
+				if (node.nextElementSibling) {
+					node.after(document.createElement('br'));
+				}
+				node.removeNode();
+			}
+		}
+		function isPHX (node){
+			return PHX[node.tagName];
+		}
+		check(e.target)
+	});
+}
+/* */
+
+
+
+// remove node and replace it by its children
+Node.prototype.removeNode = function() {
+    this.replaceWith(...this.childNodes);
+};
+
+
+
+// HR: (todo: move to fixes.js?)
+
+document.addEventListener('click',function(e){
+    if (e.target.tagName === 'HR') {
+        $range().selectNode(e.target).select();
+    }
+});
+
+
+// firefox: place selection before hr if it is inside
+document.addEventListener('selectionchange',function(e){
+    const selection = getSelection();
+    if (selection.anchorNode?.tagName === 'HR') {
+        $range().setStartBefore(selection.anchorNode).collapse().select(); // acts like chrome, selectNode(hr) will not work
+    }
+
+    // mark all hr's inside selection
+    document.querySelectorAll('hr.HrSelected').forEach(hr=>hr.classList.remove('HrSelected'));
+    selection.getRangeAt(0).commonAncestorContainer.querySelectorAll?.('hr').forEach(hr=>{
+        if (selection.containsNode(hr)) {
+            hr.classList.add('HrSelected');
+        }
+    });
+},true);
+
+const style = document.createElement('style');
+style.textContent = `
+hr.HrSelected {
+    outline: .3rem solid var(--u2-rte-selection-color, #49F9);
+}
+`;
+document.head.appendChild(style);
+
+// firefox: remove hr after selection on backspace
+document.addEventListener('keydown',function(e){
+    if (e.code !== 'Backspace') return;
+    const range = $range.fromSelection();
+    if (range.startContainer.nodeType !== 1) return;
+    const nodeAfter = range.startContainer.childNodes[range.startOffset];
+    if (nodeAfter && nodeAfter.tagName === 'HR') {
+        nodeAfter.removeNode();
+        e.preventDefault();
+    }
+});
+
+
+
+// PASTE HTML
+
+// // handle html-paste manually, because chrome ads computed styles
+// document.querySelector('[contenteditable]').addEventListener('beforeinput', function(e) {
+//     if (e.inputType === 'insertFromPaste') {
+//         e.preventDefault();
+//         let html = e.dataTransfer.getData('text/html');
+
+//         const start = html.indexOf('<!--StartFragment-->');
+//         const end = html.indexOf('<!--EndFragment-->');
+//         if (start > -1 && end > -1) html = html.slice(start + 20, end);
+
+//         $range.fromSelection().deleteContents().insertHtml(html).collapse().select();
+//     }
+// });

package/js/rte/src/events.js

@@ -1,73 +1,73 @@
-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
-export let element = null; // the current element of the selection range
-
-addEventListener('focusin', function(event) {
-    //const target = event.target;
-    const target = event.composedPath()[0];
-
-    if (!target.isContentEditable) return;
-    // to enable rte for a contenteditable element set the custom property --u2-rte to true
-    if (getComputedStyle(target).getPropertyValue('--u2-rte')==='') return;
-
-    focused = target;
-
-    if (active===target) return; // if the active element is the same as the event target return (can be if the rte toolbar was active)
-
-    active = target;
-    target.dispatchEvent(new CustomEvent('u2-rte-activate', {bubbles:true, composed:true}));
-
-},true);
-
-addEventListener('focusout', function(event) {
-
-    if (!active) return; // is there an active rte
-
-    if (event.relatedTarget === active) return; // happens when reenters from toolbar
-    
-    focused = null;
-
-    // if new focus is a part of the rte toolbar return
-    if (event.relatedTarget && event.relatedTarget.closest('.u2RteTool')) return;
-
-    // trigger a custom event u2-rte-inactive
-    active.dispatchEvent(new CustomEvent('u2-rte-deactivate', {bubbles:true, composed:true}));
-    active = null;
-
-},true);
-
-// do not add it on activate, because firefox does not fire selectionchange on fist focus
-document.addEventListener('selectionchange', ()=>{
-    if (!focused) return;
-    if (window.u2DomChangeIgnore) return;
-    range = getSelection().getRangeAt(0);
-    //range = focused.getRootNode().getSelection().getRangeAt(0); // shadow dom?
-
-    active.dispatchEvent(new CustomEvent('u2-rte-selectionchange', {bubbles:true, composed:true}));
-});
-
-
-addEventListener('u2-rte-selectionchange', function() {
-    // highlight selection-range
-    if (CSS.highlights) {
-        const highlight = new Highlight(range);
-        CSS.highlights.set('u2-rte-selection', highlight); // todo: clear on focusout?
-    }
-
-    // trigger elementchange
-    let newElement = $range(range).affectedElement;
-    /*
-    let newElement = range.commonAncestorContainer;
-    // selection is a single node (image)
-    if (range.endContainer.nodeType === 1 && range.endContainer === range.startContainer && range.endOffset - range.startOffset === 1) newElement = newElement.childNodes[range.startOffset];
-    if (newElement.nodeType===3) { newElement = newElement.parentElement; }
-    */
-    if (newElement === active) newElement = null; // active (the rte itself) element is not an editable element
-    if (newElement === element) return; // no change
-    element = newElement; // todo?: is not available on selectionchange bevor this event is fired
-    active.dispatchEvent(new CustomEvent('u2-rte-elementchange', {bubbles:true, composed:true, detail:{element}}));
-});
+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
+export let element = null; // the current element of the selection range
+
+addEventListener('focusin', function(event) {
+    //const target = event.target;
+    const target = event.composedPath()[0];
+
+    if (!target.isContentEditable) return;
+    // to enable rte for a contenteditable element set the custom property --u2-rte to true
+    if (getComputedStyle(target).getPropertyValue('--u2-rte')==='') return;
+
+    focused = target;
+
+    if (active===target) return; // if the active element is the same as the event target return (can be if the rte toolbar was active)
+
+    active = target;
+    target.dispatchEvent(new CustomEvent('u2-rte-activate', {bubbles:true, composed:true}));
+
+},true);
+
+addEventListener('focusout', function(event) {
+
+    if (!active) return; // is there an active rte
+
+    if (event.relatedTarget === active) return; // happens when reenters from toolbar
+    
+    focused = null;
+
+    // if new focus is a part of the rte toolbar return
+    if (event.relatedTarget && event.relatedTarget.closest('.u2RteTool')) return;
+
+    // trigger a custom event u2-rte-inactive
+    active.dispatchEvent(new CustomEvent('u2-rte-deactivate', {bubbles:true, composed:true}));
+    active = null;
+
+},true);
+
+// do not add it on activate, because firefox does not fire selectionchange on fist focus
+document.addEventListener('selectionchange', ()=>{
+    if (!focused) return;
+    if (window.u2DomChangeIgnore) return;
+    range = getSelection().getRangeAt(0);
+    //range = focused.getRootNode().getSelection().getRangeAt(0); // shadow dom?
+
+    active.dispatchEvent(new CustomEvent('u2-rte-selectionchange', {bubbles:true, composed:true}));
+});
+
+
+addEventListener('u2-rte-selectionchange', function() {
+    // highlight selection-range
+    if (CSS.highlights) {
+        const highlight = new Highlight(range);
+        CSS.highlights.set('u2-rte-selection', highlight); // todo: clear on focusout?
+    }
+
+    // trigger elementchange
+    let newElement = $range(range).affectedElement;
+    /*
+    let newElement = range.commonAncestorContainer;
+    // selection is a single node (image)
+    if (range.endContainer.nodeType === 1 && range.endContainer === range.startContainer && range.endOffset - range.startOffset === 1) newElement = newElement.childNodes[range.startOffset];
+    if (newElement.nodeType===3) { newElement = newElement.parentElement; }
+    */
+    if (newElement === active) newElement = null; // active (the rte itself) element is not an editable element
+    if (newElement === element) return; // no change
+    element = newElement; // todo?: is not available on selectionchange bevor this event is fired
+    active.dispatchEvent(new CustomEvent('u2-rte-elementchange', {bubbles:true, composed:true, detail:{element}}));
+});