u2ui 1.0.1 → 1.4.5

package/js/rte/src/ui/items/code.js

@@ -1,93 +1,93 @@
-import {$range} from '../../range.js';
-import * as state from '../../events.js';
-
-const dialog = document.createElement('dialog');
-dialog.id = 'qgRteHtml';
-dialog.innerHTML = 
-    '<u2-code class=-editor editable language=html></u2-code>'+
-    //'<textarea class=-editor spellcheck=false class=c1Rst style="width:100%; height:50vh"></textarea>'+
-    '<style>'+
-    '	#qgRteHtml { max-width:none; width:auto; border:0; inset:auto .5rem .5rem .5rem; background:#fff; color:#000; box-shadow:0 0 20px; padding:0; } '+
-    '	#qgRteHtml > .-editor { font-size:11.5px monospace; padding:1vw; margin:0; } '+
-    '</style>';
-    
-const editor = dialog.firstChild;
-
-Rte.ui.setItem('Code', {
-    icon: 'code',
-    click() {
-        const el = state.active;
-
-        document.documentElement.append(dialog);
-        dialog.showModal();
-
-        function hide(e) {
-            if (e.key==='Escape' || e.target !== editor) {
-                dialog.close();
-                dialog.remove();
-                document.removeEventListener('keydown',hide);
-                document.removeEventListener('mousedown',hide);
-                el.focus();
-            }
-        }
-        document.addEventListener('keydown',hide);
-        document.addEventListener('mousedown',hide);
-
-        let indentHtml2 = null;
-        Promise.all([
-            import('../../util/indentHtml.js'),
-            import('../../../../../el/code/code.js'),
-        ]).then(([indentHtml]) => {
-            indentHtml2 = indentHtml;
-            return customElements.whenDefined('u2-code');
-        }).then(()=>{
-            return new Promise(resolve=>{setTimeout(resolve,20)});
-        }).then(()=>{
-    
-            const {code, start, end} = getInnerHTMLAndPositionsByRange(el, state.range, indentHtml2.indent);
-    
-            editor.value = code;
-            editor.onkeyup = editor.onblur = function(){
-                el.innerHTML = indentHtml2.unindent(editor.value);
-                //el.dispatchEvent(new Event('input',{'bubbles':true,'cancelable':true})); // needed?
-            }
-            editor.focus();
-            editor.setSelectionRange(start, end);
-
-            const lines = code.substring(0, start).split("\n").length - 1;
-            const lineHeight = parseInt(window.getComputedStyle(editor).lineHeight);
-
-            setTimeout(()=>{ // without timeout it works only the first time
-                editor.scrollTop = lines * lineHeight;
-            });
-
-        });
-
-    },
-    shortcut:'h'
-});
-
-
-
-function getInnerHTMLAndPositionsByRange(el, range, manipulate) {
-    range = $range(range);
-    const startId = 'marker_start_so9df8as0f0';
-    const endId   = 'marker_end_laseg08a0egga';
-    const startTextNode = document.createTextNode(startId);
-    const endTextNode   = document.createTextNode(endId);
-    
-    range.cloneRange().collapse(false).insertNode(endTextNode);
-    range.cloneRange().collapse(true).insertNode(startTextNode);
-
-    let code = manipulate?.(el.innerHTML) || el.innerHTML;
-
-    startTextNode.remove();
-    endTextNode.remove();
-
-    const start = code.indexOf(startId);
-    code = code.replace(startId,'');
-    const end = code.indexOf(endId);
-    code = code.replace(endId,'');
-
-    return {code, start, end};
-}
+import {$range} from '../../range.js';
+import * as state from '../../events.js';
+
+const dialog = document.createElement('dialog');
+dialog.id = 'qgRteHtml';
+dialog.innerHTML = 
+    '<u2-code class=-editor editable language=html></u2-code>'+
+    //'<textarea class=-editor spellcheck=false class=c1Rst style="width:100%; height:50vh"></textarea>'+
+    '<style>'+
+    '	#qgRteHtml { max-width:none; width:auto; border:0; inset:auto .5rem .5rem .5rem; background:#fff; color:#000; box-shadow:0 0 20px; padding:0; } '+
+    '	#qgRteHtml > .-editor { font-size:11.5px monospace; padding:1vw; margin:0; } '+
+    '</style>';
+    
+const editor = dialog.firstChild;
+
+Rte.ui.setItem('Code', {
+    icon: 'code',
+    click() {
+        const el = state.active;
+
+        document.documentElement.append(dialog);
+        dialog.showModal();
+
+        function hide(e) {
+            if (e.key==='Escape' || e.target !== editor) {
+                dialog.close();
+                dialog.remove();
+                document.removeEventListener('keydown',hide);
+                document.removeEventListener('mousedown',hide);
+                el.focus();
+            }
+        }
+        document.addEventListener('keydown',hide);
+        document.addEventListener('mousedown',hide);
+
+        let indentHtml2 = null;
+        Promise.all([
+            import('../../util/indentHtml.js'),
+            import('../../../../../el/code/code.js'),
+        ]).then(([indentHtml]) => {
+            indentHtml2 = indentHtml;
+            return customElements.whenDefined('u2-code');
+        }).then(()=>{
+            return new Promise(resolve=>{setTimeout(resolve,20)});
+        }).then(()=>{
+    
+            const {code, start, end} = getInnerHTMLAndPositionsByRange(el, state.range, indentHtml2.indent);
+    
+            editor.value = code;
+            editor.onkeyup = editor.onblur = function(){
+                el.innerHTML = indentHtml2.unindent(editor.value);
+                //el.dispatchEvent(new Event('input',{'bubbles':true,'cancelable':true})); // needed?
+            }
+            editor.focus();
+            editor.setSelectionRange(start, end);
+
+            const lines = code.substring(0, start).split("\n").length - 1;
+            const lineHeight = parseInt(window.getComputedStyle(editor).lineHeight);
+
+            setTimeout(()=>{ // without timeout it works only the first time
+                editor.scrollTop = lines * lineHeight;
+            });
+
+        });
+
+    },
+    shortcut:'h'
+});
+
+
+
+function getInnerHTMLAndPositionsByRange(el, range, manipulate) {
+    range = $range(range);
+    const startId = 'marker_start_so9df8as0f0';
+    const endId   = 'marker_end_laseg08a0egga';
+    const startTextNode = document.createTextNode(startId);
+    const endTextNode   = document.createTextNode(endId);
+    
+    range.cloneRange().collapse(false).insertNode(endTextNode);
+    range.cloneRange().collapse(true).insertNode(startTextNode);
+
+    let code = manipulate?.(el.innerHTML) || el.innerHTML;
+
+    startTextNode.remove();
+    endTextNode.remove();
+
+    const start = code.indexOf(startId);
+    code = code.replace(startId,'');
+    const end = code.indexOf(endId);
+    code = code.replace(endId,'');
+
+    return {code, start, end};
+}

package/js/rte/src/ui/items/undo.js

@@ -1,183 +1,183 @@
-const histories = new WeakMap();
-let active = null;
-let ignoreChanges = false;
-
-// add to history
-function addToHistory(target) {
-    if (ignoreChanges) return;
-    histories.has(target) || histories.set(target, {items:[]});
-    const history = histories.get(target);
-    const html = target.innerHTML;
-
-    // compare with last
-    const last = history.items[history.items.length-1];
-    if (last && last.html === html) return;
-
-    // remove history after current
-    if (history.current != null) {
-        history.items.splice(history.current+1);
-        history.current = null;
-    }
-    
-    const selection = saveSelectionWithinElement(target);
-    history.items.push({
-        html: target.innerHTML,
-        selection: selection,
-        // time: Date.now() not used
-    });
-}
-
-// debounce
-const addToHistoryDebounced = debounce(addToHistory, 500, 800);
-
-const mutationObserver = new MutationObserver(()=>{
-    if (ignoreChanges) return;
-    addToHistoryDebounced(active);
-});
-
-addEventListener('u2-rte-activate', function(e) {
-    active = e.target;
-    setTimeout(() => addToHistoryDebounced.force(e.target))  // it has not yet the selection
-    mutationObserver.observe(e.target, {subtree:true, attributes:true, characterData:true});
-});
-addEventListener('u2-rte-deactivate', function(e) {
-    addToHistoryDebounced.force(e.target);
-    mutationObserver.disconnect();
-});
-
-
-function undo() {
-    const history = histories.get(active);
-    history.current ??= history.items.length - 1;
-    if (history.current <= 0) return;
-    history.current--;
-    patchItem(active, history.items[history.current]);
-}
-function redo() {
-    const history = histories.get(active);
-    if (history.current >= history.items.length-1) return;
-    history.current++;
-    patchItem(active, history.items[history.current]);
-}
-function patchItem(target, item) {
-    if (!item) return;
-    ignoreChanges = true;
-    target.innerHTML = item.html;
-    setTimeout(()=>restoreSelectionWithinElement(item.selection, target));
-    setTimeout(()=>ignoreChanges = false, 100);
-}
-function hasUndo() {
-    const history = histories.get(active);
-    if (!history) return;
-    const count = history.items.length;
-    return count && (history.current??count > 1);
-}
-function hasRedo() {
-    const history = histories.get(active);
-    if (!history) return;
-    return history.current !== undefined && history.current < history.items.length-1;
-}
-
-
-Rte.ui.setItem('Undo', {
-    icon:'undo', 
-    click:undo, 
-    check:hasUndo, 
-    shortcut:'z',
-    labels:{
-        de: 'Rückgängig',
-        en: 'Undo',
-        fr: 'Annuler',
-    }
-});
-Rte.ui.setItem('Redo', {
-    icon:'redo', 
-    click:redo, 
-    check:hasRedo, 
-    shortcut:'y',
-    labels:{
-        de: 'Wiederholen',
-        en: 'Redo',
-        fr: 'Refaire',
-    } 
-});
-
-
-
-function getXPathForElement(element, rootElement) {
-    if (element === rootElement) {
-        return ".";
-    } else if (element.nodeType === 3) { // Textknoten
-        const textNodes = Array.from(element.parentNode.childNodes).filter(node => node.nodeType === 3);
-        const idx = textNodes.indexOf(element);
-        return `${getXPathForElement(element.parentNode, rootElement)}/text()[${idx + 1}]`;
-    } else { // Elementknoten
-        const siblings = Array.from(element.parentNode.children);
-        const idx = siblings.indexOf(element);
-        const tagName = element.tagName.toLowerCase();
-        return `${getXPathForElement(element.parentNode, rootElement)}/${tagName}[${idx + 1}]`;
-    }
-}
-
-function getElementByXPath(xpath, contextElement) {
-    const result = document.evaluate(xpath, contextElement, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
-    return result.singleNodeValue;
-}
-
-function saveSelectionWithinElement(element) {
-    const sel = window.getSelection();
-    if (sel.rangeCount > 0) {
-        const range = sel.getRangeAt(0);
-        return {
-            startPath: getXPathForElement(range.startContainer, element),
-            startOffset: range.startOffset,
-            endPath: getXPathForElement(range.endContainer, element),
-            endOffset: range.endOffset
-        };
-    }
-    return null;
-}
-
-function restoreSelectionWithinElement(saved, element) {
-    const startNode = getElementByXPath(saved.startPath, element);
-    const endNode = getElementByXPath(saved.endPath, element);
-    if (startNode && endNode) {
-        const range = document.createRange();
-        range.setStart(startNode, saved.startOffset);
-        range.setEnd(endNode, saved.endOffset);
-        const sel = window.getSelection();
-        sel.removeAllRanges();
-        sel.addRange(range);
-    }
-}
-
-
-function debounce(fn, min, max) {
-    let timeoutMin = null;
-    let timeoutMax = null;
-    let lastInvocationTime = null;
-    const debouncedFn = function(...args) {
-        const invoke = () => {
-            fn(...args);
-            lastInvocationTime = Date.now();
-            clearTimeout(timeoutMax);
-            timeoutMax = null;
-        };
-        const now = Date.now();
-        if (lastInvocationTime && (now - lastInvocationTime < max)) {
-            clearTimeout(timeoutMin);
-            timeoutMin = setTimeout(invoke, min);
-        } else {
-            if (!timeoutMax) {
-                timeoutMax = setTimeout(invoke, max);
-            }
-        }
-    };
-    debouncedFn.force = function(...args) {
-        clearTimeout(timeoutMin);
-        clearTimeout(timeoutMax);
-        fn(...args);
-        lastInvocationTime = Date.now();
-    };
-    return debouncedFn;
-}
+const histories = new WeakMap();
+let active = null;
+let ignoreChanges = false;
+
+// add to history
+function addToHistory(target) {
+    if (ignoreChanges) return;
+    histories.has(target) || histories.set(target, {items:[]});
+    const history = histories.get(target);
+    const html = target.innerHTML;
+
+    // compare with last
+    const last = history.items[history.items.length-1];
+    if (last && last.html === html) return;
+
+    // remove history after current
+    if (history.current != null) {
+        history.items.splice(history.current+1);
+        history.current = null;
+    }
+    
+    const selection = saveSelectionWithinElement(target);
+    history.items.push({
+        html: target.innerHTML,
+        selection: selection,
+        // time: Date.now() not used
+    });
+}
+
+// debounce
+const addToHistoryDebounced = debounce(addToHistory, 500, 800);
+
+const mutationObserver = new MutationObserver(()=>{
+    if (ignoreChanges) return;
+    addToHistoryDebounced(active);
+});
+
+addEventListener('u2-rte-activate', function(e) {
+    active = e.target;
+    setTimeout(() => addToHistoryDebounced.force(e.target))  // it has not yet the selection
+    mutationObserver.observe(e.target, {subtree:true, attributes:true, characterData:true});
+});
+addEventListener('u2-rte-deactivate', function(e) {
+    addToHistoryDebounced.force(e.target);
+    mutationObserver.disconnect();
+});
+
+
+function undo() {
+    const history = histories.get(active);
+    history.current ??= history.items.length - 1;
+    if (history.current <= 0) return;
+    history.current--;
+    patchItem(active, history.items[history.current]);
+}
+function redo() {
+    const history = histories.get(active);
+    if (history.current >= history.items.length-1) return;
+    history.current++;
+    patchItem(active, history.items[history.current]);
+}
+function patchItem(target, item) {
+    if (!item) return;
+    ignoreChanges = true;
+    target.innerHTML = item.html;
+    setTimeout(()=>restoreSelectionWithinElement(item.selection, target));
+    setTimeout(()=>ignoreChanges = false, 100);
+}
+function hasUndo() {
+    const history = histories.get(active);
+    if (!history) return;
+    const count = history.items.length;
+    return count && (history.current??count > 1);
+}
+function hasRedo() {
+    const history = histories.get(active);
+    if (!history) return;
+    return history.current !== undefined && history.current < history.items.length-1;
+}
+
+
+Rte.ui.setItem('Undo', {
+    icon:'undo', 
+    click:undo, 
+    check:hasUndo, 
+    shortcut:'z',
+    labels:{
+        de: 'Rückgängig',
+        en: 'Undo',
+        fr: 'Annuler',
+    }
+});
+Rte.ui.setItem('Redo', {
+    icon:'redo', 
+    click:redo, 
+    check:hasRedo, 
+    shortcut:'y',
+    labels:{
+        de: 'Wiederholen',
+        en: 'Redo',
+        fr: 'Refaire',
+    } 
+});
+
+
+
+function getXPathForElement(element, rootElement) {
+    if (element === rootElement) {
+        return ".";
+    } else if (element.nodeType === 3) { // Textknoten
+        const textNodes = Array.from(element.parentNode.childNodes).filter(node => node.nodeType === 3);
+        const idx = textNodes.indexOf(element);
+        return `${getXPathForElement(element.parentNode, rootElement)}/text()[${idx + 1}]`;
+    } else { // Elementknoten
+        const siblings = Array.from(element.parentNode.children);
+        const idx = siblings.indexOf(element);
+        const tagName = element.tagName.toLowerCase();
+        return `${getXPathForElement(element.parentNode, rootElement)}/${tagName}[${idx + 1}]`;
+    }
+}
+
+function getElementByXPath(xpath, contextElement) {
+    const result = document.evaluate(xpath, contextElement, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
+    return result.singleNodeValue;
+}
+
+function saveSelectionWithinElement(element) {
+    const sel = window.getSelection();
+    if (sel.rangeCount > 0) {
+        const range = sel.getRangeAt(0);
+        return {
+            startPath: getXPathForElement(range.startContainer, element),
+            startOffset: range.startOffset,
+            endPath: getXPathForElement(range.endContainer, element),
+            endOffset: range.endOffset
+        };
+    }
+    return null;
+}
+
+function restoreSelectionWithinElement(saved, element) {
+    const startNode = getElementByXPath(saved.startPath, element);
+    const endNode = getElementByXPath(saved.endPath, element);
+    if (startNode && endNode) {
+        const range = document.createRange();
+        range.setStart(startNode, saved.startOffset);
+        range.setEnd(endNode, saved.endOffset);
+        const sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+}
+
+
+function debounce(fn, min, max) {
+    let timeoutMin = null;
+    let timeoutMax = null;
+    let lastInvocationTime = null;
+    const debouncedFn = function(...args) {
+        const invoke = () => {
+            fn(...args);
+            lastInvocationTime = Date.now();
+            clearTimeout(timeoutMax);
+            timeoutMax = null;
+        };
+        const now = Date.now();
+        if (lastInvocationTime && (now - lastInvocationTime < max)) {
+            clearTimeout(timeoutMin);
+            timeoutMin = setTimeout(invoke, min);
+        } else {
+            if (!timeoutMax) {
+                timeoutMax = setTimeout(invoke, max);
+            }
+        }
+    };
+    debouncedFn.force = function(...args) {
+        clearTimeout(timeoutMin);
+        clearTimeout(timeoutMax);
+        fn(...args);
+        lastInvocationTime = Date.now();
+    };
+    return debouncedFn;
+}

package/js/rte/src/ui.items.js

@@ -40,7 +40,6 @@ const blocklessElements = {
     'STRONG':1,
     'LABEL':1,
     'A':1,
-	'BUTTON':1,
 }
 
 const lang = {
@@ -236,7 +235,7 @@ import('./ui/items/ai.js');
 		cleanContents(node);
 	    node.nodeType === Node.COMMENT_NODE && node.remove();
 		if (node.nodeType === Node.ELEMENT_NODE) {
-			removeTags[node.tagName] && node.removeNode();
+			removeTags[node.tagName] && node.replaceWith(...node.childNodes);
 			removeAttrs.forEach(attr=>node.removeAttribute(attr));
 			if (node.tagName !== 'IMG') ['width','height'].forEach(attr=>node.removeAttribute(attr))
 		}
@@ -246,7 +245,7 @@ import('./ui/items/ai.js');
 	}
 	Rte.ui.setItem('Removeformat', {
 		click() {
-			const root = state.range.callapsed ? active : state.range.commonAncestorContainer;
+			const root = state.range.collapsed ? active : state.range.commonAncestorContainer;
 			cleanContents(root);
 		},
 		shortcut:'space',
@@ -496,23 +495,23 @@ import {TableHandles} from '../c1/tableHandles.mjs?qgUniq=bbcd4cc';
 
 
 	var matchText = function(node, regex, callback, excludeElements) {
-		excludeElements || (excludeElements = ['script', 'style', 'iframe', 'canvas']);
+		excludeElements ||= ['script', 'style', 'iframe', 'canvas'];
 		var child = node.firstChild;
 		while (child) {
 			if (child.nodeType === 1) {
-				if (excludeElements.indexOf(child.tagName.toLowerCase()) > -1) break;
+				if (excludeElements.includes(child.tagName.toLowerCase())) break;
 				matchText(child, regex, callback, excludeElements);
 			}
 			if (child.nodeType === 3) {
 				var bk = 0;
 				child.data.replace(regex, function(str) {
-					var args = [].slice.call(arguments);
+					var args = Array.from(arguments);
 					var tag = callback.apply(window, [child].concat(args));
 					if (!tag) return false;
 					var offset = args[args.length - 2];
 					var newTextNode = child.splitText(offset+bk);
 					bk -= child.data.length + str.length;
-					newTextNode.data = newTextNode.data.substr(str.length);
+					newTextNode.data = newTextNode.data.slice(str.length);
 					child.parentNode.insertBefore(tag, newTextNode);
 					child = newTextNode;
 				});