u2ui 1.0.0

package/js/rte/old/range-selection.old.js

@@ -0,0 +1,394 @@
+const oSelection = getSelection();
+
+export function range(oRange) {
+	if (!(this instanceof range)) return new range(oRange);
+	this.oR = oRange || document.createRange();
+};
+range.prototype = {
+	container() {
+		return this.oR.commonAncestorContainer;
+	},
+	containerElement() {
+		var node = this.oR.commonAncestorContainer;
+		return node.nodeType === 1 ? node : node.parentNode;
+	},
+	startContainer() {
+		return this.oR.startContainer;
+	},
+	startContainerElement() {
+		var node = this.oR.startContainer;
+		return node.nodeType === 1 ?  node : node.parentNode;
+	},
+	startOffset() {
+		return this.oR.startOffset;
+	},
+	endContainer() {
+		return this.oR.endContainer;
+	},
+	endContainerElement() {
+		var node = this.oR.endContainer;
+		return node.nodeType === 1 ?  node : node.parentNode;
+	},
+	endOffset() {
+		return this.oR.endOffset;
+	},
+	clone() {
+		return new range( this.oR.cloneRange() );
+	},
+	extractContents() {
+		return this.oR.extractContents();
+	},
+	rect() {
+		var pos = this.oR.getBoundingClientRect();
+		pos = pos.top ? pos : this.oR.getClientRects()[0];
+		if (!pos) {
+			var clone = this.oR.cloneRange();
+			if (this.oR.startOffset > 0) {
+				clone.setStart( this.oR.startContainer, this.oR.startOffset-1 );
+				pos = clone.getBoundingClientRect();
+			} else if (this.oR.endOffset <= this.endContainer.length) {
+				clone.setEnd( this.oR.endContainer, this.oR.endOffset+1 );
+				pos = clone.getBoundingClientRect();
+			} else {
+				pos = this.containerElement().getBoundingClientRect();
+			}
+		}
+        return q1.rect({
+        	x: pos.left+pageXOffset,
+        	y: pos.top+pageYOffset,
+        	w: pos.width,
+        	h: pos.height
+        });
+	},
+	select() {
+		oSelection.removeAllRanges();
+		oSelection.addRange( this.oR );
+	},
+	toString() {
+		return this.oR.toString();
+	},
+	toCleanString() {
+		var fragment = this.oR.cloneContents();
+		var div = document.createElement('div');
+		[].slice.call(fragment.querySelectorAll('script, style')).forEach( function(el) {
+			el.remove();
+		});
+		div.appendChild(fragment);
+		//return div.textContent.replace(/[\f\n\r\t\v\u2028\u2029]+/g, ' '); // like \s but no \u00A0 (does not work)
+		return div.textContent.replace(/\s+/g, ' '); // no \u00A0
+	},
+	sameAs(range) {
+		if (!range) {return false;}
+		return this.oR.startContainer === range.oR.startContainer
+		&& this.oR.startOffset === range.oR.startOffset
+		&& this.oR.endContainer === range.oR.endContainer
+		&& this.oR.endOffset === range.oR.endOffset;
+	},
+};
+const setters = {
+	setStart(node,offset) {
+		this.oR.setStart(node,offset);
+		return this;
+	},
+	setStartBefore(node) {
+		this.oR.setStartBefore(node);
+		return this;
+	},
+	setEnd(node,offset) {
+		this.oR.setEnd(node,offset);
+		return this;
+	},
+	setEndAfter(node) {
+		this.oR.setEndAfter(node);
+		return this;
+	},
+	toNode(node) {
+		this.oR.selectNode(node);
+		return this;
+	},
+	toContents(node) {
+		this.oR.selectNodeContents(node);
+		return this;
+	},
+	insert(node) {
+		if (node instanceof Array) {
+			for (var i=0, n; n = node[i++];) {
+				this.oR.insertNode(n);
+			}
+			return this;
+		}
+		if (typeof node === 'string') { node = document.createTextNode(node); }
+		this.oR.insertNode(node);
+		return this;
+	},
+	collapse(toStart) {
+		this.oR.collapse(toStart);
+		return this;
+	}
+};
+Object.assign(range.prototype, setters);
+
+export function selection() {
+	if (!oSelection.rangeCount) return false;
+	if (!(this instanceof selection)) return new selection();
+	this.oR = oSelection.getRangeAt(0);
+};
+
+selection.prototype = new range();
+
+//	selection.prototype.constructor = selection;
+for (var i in setters) {
+	selection.prototype[i] = function(fn) {
+		return function() {
+			var ret = fn.apply(this, arguments);
+			oSelection.removeAllRanges();
+			oSelection.addRange( this.oR );
+			return ret;
+		};
+	}(setters[i]);
+}
+selection.prototype.range = function() {
+	return range(this.oR);
+};
+selection.prototype.toString = function() {
+	return oSelection.toString();
+};
+
+
+var nextNode = function(node, direction) {
+	var child   = direction==='start' ? 'lastChild'       : 'firstChild',
+		sibling = direction==='start' ? 'previousSibling' : 'nextSibling';
+	if (node[child]) return node[child];
+	while (node) {
+		if (node[sibling]) return node[sibling];
+		node = node.parentNode;
+	}
+	return false;
+};
+var nextTextNode = function(node, direction) {
+	do {
+		node = nextNode(node, direction );
+		if (node.nodeType === 3) return node;
+	} while (node);
+	return false;
+};
+var nextPosition = function(node, offset, direction) {
+	if (direction==='start') {
+		offset--;
+		if (node.data === undefined || offset < 0) {
+			node = nextTextNode(node, direction);
+			offset = node.data.length-1;
+		}
+	} else {
+		offset++;
+		if (node.data === undefined || offset >= node.data.length) {
+			node = nextTextNode(node, direction);
+			offset = 0;
+		}
+	}
+	return [node, offset];
+};
+
+/* save / restore */
+range.prototype.save = function() {
+	return {
+		sC: this.oR.startContainer,
+		sO: this.oR.startOffset,
+		eC: this.oR.endContainer,
+		eO: this.oR.endOffset,
+		oR: this.oR,
+		type:'q1SavedRange1'
+	};
+};
+range.prototype.saveHard = function() {
+	var sRange = this.oR.cloneRange();
+	sRange.collapse(true);
+	var sMarker = document.createElement('i');
+	sMarker.id = 'q1Tmp_'+Math.random();
+	sRange.insertNode(sMarker);
+
+	var eRange = this.oR.cloneRange();
+	eRange.collapse(false);
+	var eMarker = document.createElement('i');
+	eMarker.id = 'q1Tmp_'+Math.random();
+	eRange.insertNode(eMarker);
+	return {
+		startMarker: sMarker.id,
+		endMarker: eMarker.id,
+		type: 'q1SavedRangeHard'
+	};
+};
+range.prototype.restore = function(saved) {
+	if (saved.type==='q1SavedRange1') {
+		this.oR.setStart(saved.sC,saved.sO);
+		this.setEnd(saved.eC,saved.eO);
+	} else if (saved.type==='q1SavedRangeHard') {
+		var sMarker = document.getElementById(saved.startMarker);
+		var eMarker = document.getElementById(saved.endMarker);
+		this.oR.setStartBefore( sMarker );
+		this.oR.setEndAfter( eMarker );
+		this.setEndAfter(eMarker);
+		sMarker.remove();
+		eMarker.remove();
+	}
+	return this;
+};
+
+
+range.prototype.affectedRootNodes = function() {
+	var el = this.oR.startContainer,
+		end = this.oR.endContainer,
+		els = [],
+		prev = null;
+	do {
+		if (el === end) break;
+		if (el.contains && el.contains(end)) continue;
+		if (prev && prev.contains && prev.contains(el)) continue;
+		prev = el;
+		els.push(el);
+	} while (el = nextNode(el))
+	els.push(el);
+	return els;
+};
+range.prototype.splitTextNodes = function() {
+	var node = this.oR.startContainer;
+	if (node.data) {
+		var startNode = node.splitText(this.oR.startOffset);
+		this.setStart(startNode,0);
+	}
+	node = this.oR.endContainer;
+	if (node.data) {
+		node.splitText(this.oR.endOffset);
+		this.setEnd(node,node.data.length);
+	}
+};
+range.prototype.containingRootNodes = function() {
+	this.splitTextNodes();
+	return this.affectedRootNodes();
+};
+range.prototype.containingRootNodesForceElements = function() {
+	var nodes = this.containingRootNodes(),
+		newNodes = [];
+	for (var i=0, el; el=nodes[i++];) { // todo: summarize following textNodes
+		if (el.data) {
+			if (el.data.trim() === '') continue;
+			var nEl = document.createElement('span');
+			el.parentNode.insertBefore( nEl, el );
+			nEl.appendChild(el);
+			el = nEl;
+		}
+		newNodes.push(el);
+	}
+	if (newNodes[0]) {
+		this.setStartBefore(nodes[0]);
+		this.setEndAfter(nodes[nodes.length-1]);
+	}
+	return newNodes;
+};
+
+range.prototype.collapseToPoint = function(x, y) {
+	// firefox has the rangeParent and rangeOffset properties of e.g. mouse-events
+
+	/* todo: w3c test if its landed in browsers*/
+	if (document.caretPositionFromPoint) {
+  		var point = document.caretPositionFromPoint(x,y);
+    	this.oR.setStart(point.offsetNode, point.offset);
+    	return this.setEnd(point.offsetNode, point.offset);
+	} else if (document.caretRangeFromPoint) { // chrome (w3c deprecated)
+		this.oR = document.caretRangeFromPoint(x,y);
+		return this.setEnd(this.oR.endContainer, this.oR.endOffset);
+	}
+
+	var r = this.oR;
+	var el = document.q1NodeFromPoint(x,y);
+	if (el.nodeType!==3) {
+		return this.setStart(el, 0).setEnd(el, 0);
+	}
+	r.setStart(el,0);
+	r.setEnd(el,0);
+	var rect = this.rect();
+	while (rect.y+rect.h < y || rect.x < x) {
+		if (r.startOffset-1 > el.data.length) break;
+		r.setStart(r.startContainer, r.startOffset+1); // opera error!
+		rect = this.rect();
+	}
+	return this.collapse(true); //.setStart(el,)collapse(true);
+};
+
+
+range.prototype.findElement = function() {
+	var r = this.oR;
+	if (r.startContainer.nodeType === 1 && r.endOffset-r.startOffset === 1) {
+		return r.startContainer.childNodes[r.startOffset];
+	}
+
+	// walk thru white-spaces
+	var sNode = this.oR.startContainer;
+	var eNode = this.oR.endContainer;
+
+	if (sNode.nodeType===3 && sNode.data.substr(this.oR.startOffset).trim()==='') {
+		sNode = nextNode(sNode,'end');
+	}
+	do {
+		if (!sNode) break;
+		if (sNode === eNode
+			|| sNode.tagName === 'IMG'
+			|| (sNode.nodeType === 3 && sNode.data.trim() !== '')) {
+			break;
+		}
+	} while (sNode = nextNode(sNode,'end'))
+
+
+	if (eNode.nodeType === 3) {
+		if (eNode.data.substr(0, this.oR.endOffset).trim() === '') {
+			eNode = eNode.previousSibling;
+		}
+	} else {
+		eNode = eNode.previousSibling;
+	}
+	do {
+		if (!eNode) break;
+		if (eNode === sNode
+			|| eNode.tagName === 'IMG'
+			|| (eNode.nodeType===3 && eNode.data.trim() !== '')) {
+			break;
+		}
+	} while( eNode = nextNode(eNode,'start') )
+
+	if (eNode === sNode) {
+		return eNode.nodeType === 1 ? eNode : eNode.parentNode;
+	}
+
+	// else return containerElement
+	return this.containerElement();
+};
+
+/*
+range.prototype.expand = function() {
+	// http://msdn.microsoft.com/en-us/library/ms536421%28VS.85%29.aspx
+	this.oR.expand('word') // chrome
+};
+*/
+range.prototype.walkChar = function(alter, point, direction) {
+	var setEnd   = point === 'start' ? 'setStart' : 'setEnd',
+		setStart = point === 'start' ? 'setEnd'   : 'setStart',
+//			strBefore = this.toCleanString(), strAfter,
+		pos, coordBefore = this.endingCoord(point), coordAfter;
+	do {
+		pos = nextPosition(this.oR[point+'Container'], this.oR[point+'Offset'], direction );
+		if (pos[0] === false) return this;
+		this.oR[setEnd](pos[0],pos[1]);
+//			strAfter = this.toCleanString();
+		coordAfter = this.endingCoord(point);
+	} while( /*strAfter === strBefore ||*/ ( coordAfter.y === coordBefore.y && coordAfter.x === coordBefore.x ) ); // check if moved
+	alter==='move' && this.oR[setStart](pos[0], pos[1]);
+	this[setEnd](pos[0], pos[1]);
+	return this;
+};
+
+range.prototype.endingCoord = function(which) {
+	var rects = this.oR.getClientRects(),
+		rect = which === 'start' ? rects[0] : rects[rects.length-1];
+	return which === 'start' ? {x:rect.left, y:rect.top} : {x:rect.right, y:rect.bottom};
+};
+

package/js/rte/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/src/behavior.js

@@ -0,0 +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();
+//     }
+// });

package/js/rte/src/events.js

@@ -0,0 +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}}));
+});