u2ui 1.0.0

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

@@ -0,0 +1,167 @@
+//import {$range} from '../../range.js';
+import * as state from '../../events.js';
+
+
+Rte.ui.setItem('ai', {
+    icon: 'smart-toy',
+    labels: { en: 'Magic-Editor' },
+    async click() {
+
+        const activeRte = state.active;
+        const original = activeRte.innerHTML;
+
+        const dEl = document.createElement('dialog');
+        dEl.className = 'u2RteAiDialog';
+        dEl.innerHTML = `
+            <h2>Magic-Editor</h2>
+            <form class=-promptForm>
+                <label style="display:block; text-align:center; margin-bottom:1rem">
+                    Anweisung: 
+                    <input name=prompt autofocus list=u2RteAiList placeholder="Schlüsselwörter fett">
+                    <button name=run>run</button>
+                    <datalist id=u2RteAiList>
+                        <option value="Korrigiere">
+                        <option value="Erweitere">
+                        <option value="Fahre fort">
+                        <option value="Fasse zusammen">
+                        <option value="Lorem Ipsum, 2 Paragraphen">
+                    </datalist>
+                </label>
+            </form>
+            <div class=-views>
+                <div>
+                    <h2>Original</h2>
+                    <div class="-textBox">${original}</div>
+                </div>
+                <div>
+                    <h2>Bearbeitet</h2>
+                    <div class="-textBox -result" contenteditable></div>
+                </div>
+                <div>
+                    <h2>Unterschied</h2>
+                    <div class="-textBox -diff"></div>
+                </div>
+            </div>
+            <style>
+            .u2RteAiDialog {
+                width: 100%;
+                max-width: none;
+                max-height: none;
+                height: auto;
+                border: none;
+
+                & ins { background: #dfd; text-decoration: none; }
+                & del { background: #fdd; text-decoration: none; }
+                & .-views { display:flex; gap:1rem; min-height:10rem; flex-wrap:wrap }
+                & .-views > div { flex:1 1 35rem; display:flex; flex-direction:column; }
+                & .-views > div > h2 { flex:0 0 auto; margin:0;}
+
+                & .-textBox { border:1px solid; padding:.5rem; flex:1 1 auto; box-shadow: 0 0 1rem #0003; max-height: 30rem; overflow:auto; }
+                & .-buttons { display:flex; flex-wrap:wrap; justify-content:end; gap:1em; margin-top:1rem }
+            }
+            </style>
+            <div u2-focusgroup class=-buttons>
+                <button type="button" class=-ok disabled>Übernehmen</button>
+                <button type="button" class=-cancel>Abbrechen</button>
+            </div>
+        `;
+        
+        
+
+        const btnOk = dEl.querySelector('.-ok');
+        const btnCancel = dEl.querySelector('.-cancel');
+
+
+        dEl.querySelector('.-promptForm').onsubmit = async e => {
+            e.preventDefault();
+            
+            dEl.querySelector('.-result').innerHTML = 'loading...';
+            dEl.querySelector('.-diff').innerHTML = 'loading...';
+            dEl.querySelector('.-promptForm').inert = true;
+
+            const prompt = dEl.querySelector('[name=prompt]').value;
+            dEl.querySelector('.-result').innerHTML = await request(prompt, original);
+
+            await showDiff();
+
+            btnOk.disabled = false;
+            dEl.querySelector('.-promptForm').inert = false;
+            btnOk.focus();
+        };
+        dEl.querySelector('.-result').addEventListener('input', async e => {
+            showDiff();
+        });
+
+        async function showDiff(){
+            const edited = dEl.querySelector('.-result').innerHTML;
+            const lib = await import('https://cdn.jsdelivr.net/npm/htmldiff-js@1.0.5/+esm');
+            const HtmlDiff = lib.default.default;
+            dEl.querySelector('.-diff').innerHTML = HtmlDiff.execute(original, edited);
+        }
+
+        btnOk.onclick = () => {
+            activeRte.innerHTML = dEl.querySelector('.-result').innerHTML;
+            dEl.close();
+        };
+        btnCancel.onclick = () => dEl.close();
+
+        document.body.append(dEl);
+        dEl.showModal();
+        dEl.onclose = () => dEl.remove();
+
+    },
+    shortcut:'m'
+});
+
+
+
+const endpoint = 'https://api.groq.com/openai/v1/chat/completions'
+const apiKey = "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";
+//const model = "llama3-8b-8192";
+const model = "llama3-70b-8192";
+
+async function request(prompt, text) {
+    const body = {
+        model,
+        stream: false,
+        messages: [{
+                role: "system",
+                content: `You are a text editor (html).
+                Return only the full(!) edited text without any explanations!
+
+                Example 1:\n
+                Prompt: You're a stupid bloke.\n
+                Text: Friendlier\n
+                Answer: We seem to have different perspectives.\n
+
+                Example 2:\n
+                Prompt: Fahre fort\n
+                Text: Es war einmal ein\n
+                Answer: Es war einmal ein kleines Mädchen.\n
+
+                Example 3:\n
+                Prompt: Ausführlicher\n
+                Text: Ein Pinsel ist zum malen\n
+                Answer: Ein Pinsel ist ein Werkzeug, das zum Auftragen von Farbe verwendet wird. Er besteht aus einem Griff und Borsten, die die Farbe halten und auf eine Oberfläche übertragen.\n
+
+                Example 4:\n
+                Prompt: Schlüsselwörter fett\n
+                Text: Ein Pinsel ist zum malen\n
+                Answer: Ein <strong>Pinsel</strong> ist zum <strong>malen</strong>\n
+                `,
+            },{
+                role: "user",
+                content: `Prompt: ${prompt}\nText: ${text}`,
+            }],
+    };
+    const result = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${apiKey}`
+        },
+        body: JSON.stringify(body),
+    }).then(response => response.json());
+
+    return result.choices[0].message.content;
+}

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

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

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

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