@cocreate/text 1.29.2 → 1.30.0

package/src/updateDom.js

@@ -1,204 +1,151 @@
-import { sendPosition, _dispatchInputEvent } from './index';
-import { getSelection, processSelection, getElementPosition } from '@cocreate/selection';
-import { domParser } from '@cocreate/utils';
-
-export function updateDom({ domTextEditor, value, start, end, html }) {
-    if (!domTextEditor.htmlString)
-        domTextEditor.htmlString = html;
-    if (start < 0 || start > domTextEditor.htmlString.length)
-        throw new Error('position is out of range');
-
-    let { element, path, position, type } = getElementPosition(domTextEditor.htmlString, start, end);
-    parseHtml(domTextEditor, html);
+/**
+ * updateDom.js
+ * 
+ * An intelligent DOM morphing engine for collaborative editors.
+ * This engine uses a "Shadow" Virtual DOM approach. It updates the live DOM 
+ * without destroying node identities, preserving native text selections, 
+ * CSS animations, and scroll positions.
+ */
 
-    let domEl, oldEl, curCaret, newEl;
-    // console.log('element', element)
-    // console.log('path', path)
+import { domParser } from '@cocreate/utils';
 
+/**
+ * Updates the live DOM editor safely using a virtual diffing approach.
+ * Crucially, it manages the `htmlString` and `vDom` state directly on 
+ * the domTextEditor element for cross-module reference (e.g., selection mapping).
+ * 
+ * @param {HTMLElement} domTextEditor - The live DOM element acting as the editor.
+ * @param {string} newHtml - The incoming HTML string from CRDT/state.
+ */
+export function updateDom(domTextEditor, newHtml) {
     try {
-        newEl = domTextEditor.newHtml.querySelector(path);
-    } catch (err) {
-        console.log('error', err)
+        if (!domTextEditor || typeof newHtml !== 'string') return;
+
+        // 1. Create our "Shadow" Virtual DOM from the new string
+        let vDom = domParser(newHtml);
+        
+        // Extract the actual usable node (bypassing wrapper document tags if present)
+        let vNode = vDom.tagName === "DOM-PARSER" || vDom.nodeName === "#document" 
+            ? (vDom.body || vDom) 
+            : vDom;
+
+        // 2. State Management: Attach to domTextEditor for cross-module access
+        // This is exactly the "Shadow DOM" concept you envisioned!
+        // selection.js can now query domTextEditor.vDom without causing UI reflows.
+        domTextEditor.htmlString = newHtml;
+        domTextEditor.vDom = vNode.cloneNode(true); 
+
+        // 3. Perform the DOM Morphing (Patching)
+        // We sync the live editor's children with our new virtual children.
+        syncChildren(domTextEditor, vNode);
+
+    } catch (error) {
+        console.error("Error during DOM morphing update:", error);
     }
+}
 
-    if (path && !newEl) {
-        let index
-        do {
-            index = path.lastIndexOf(' >')
-            if (index != -1)
-                path = path.slice(0, index)
-            newEl = domTextEditor.newHtml.querySelector(path);
-        } while (!newEl && index != -1)
+/**
+ * Recursively diffs and patches a live DOM node against a virtual node.
+ * 
+ * @param {Node} liveNode - The node currently on the screen.
+ * @param {Node} vNode - The off-screen "shadow" node parsed from the string.
+ */
+function syncNode(liveNode, vNode) {
+    // 1. Type Mismatch: If nodes are fundamentally different (e.g., DIV changed to SPAN),
+    // we must replace the live node entirely.
+    if (liveNode.nodeType !== vNode.nodeType || liveNode.nodeName !== vNode.nodeName) {
+        liveNode.replaceWith(vNode.cloneNode(true));
+        return;
     }
 
-    if (!newEl) {
-        // console.log("no newEL", path)
-        newEl = domTextEditor.cloneNode(true);
-        if (html != undefined)
-            newEl.innerHTML = html;
-        else
-            newEl.innerHTML = domTextEditor.htmlString;
-        domEl = domTextEditor;
-        type = 'innerHTML';
-    } else if (element.tagName == 'HTML') {
-        // console.log('element = html')
-        domEl = domTextEditor;
-        type = 'innerHTML';
-    } else if (path) {
-        // console.log("else path", path)
-        domEl = domTextEditor.querySelector(path);
-        // if (!domEl || !oldEl){
-        //     let eid = newEl.getAttribute('eid');
-        // 	if (!domEl && eid){
-        // 		domEl = domTextEditor.querySelector(`[eid='${eid}']`);
-        // 	}
-        // 	if (!oldEl && eid){
-        // 		oldEl = domTextEditor.oldHtml.querySelector(`[eid='${eid}']`);
-        // 	}
-        // }
+    // 2. Text Nodes: Update text content if changed.
+    // This preserves the exact Text Node identity, preventing caret loss!
+    if (liveNode.nodeType === Node.TEXT_NODE) {
+        if (liveNode.nodeValue !== vNode.nodeValue) {
+            liveNode.nodeValue = vNode.nodeValue;
+        }
+        return;
     }
 
-    if (!domEl) {
-        // console.log('no domEl')
-        let index
-        do {
-            index = path.lastIndexOf(' >')
-            if (index != -1)
-                path = path.slice(0, index)
-            domEl = domTextEditor.querySelector(path);
-        } while (!domEl && index != -1)
-
-        if (domEl) {
-            newEl = domTextEditor.newHtml.querySelector(path);
-        }
+    // 3. Element Nodes: Sync attributes and children
+    if (liveNode.nodeType === Node.ELEMENT_NODE) {
+        // ID/Key check (laying ground for your node tracking idea)
+        // If elements share an ID or 'eid', we know they are logically the same
+        syncAttributes(liveNode, vNode);
+        syncChildren(liveNode, vNode);
+    }
+}
 
-        if (!domEl || !newEl) {
-            newEl = domTextEditor.cloneNode(true);
-            if (html != undefined)
-                newEl.innerHTML = html;
-            else
-                newEl.innerHTML = domTextEditor.htmlString;
-            domEl = domTextEditor;
-            type = 'innerHTML';
+/**
+ * Synchronizes attributes from the virtual node to the live node.
+ * 
+ * @param {HTMLElement} liveNode - The live element.
+ * @param {HTMLElement} vNode - The virtual element containing desired attributes.
+ */
+function syncAttributes(liveNode, vNode) {
+    const liveAttrs = liveNode.attributes;
+    const vAttrs = vNode.attributes;
+
+    // Remove attributes that exist on live DOM but not on virtual DOM
+    // Run backward because removing modifies the liveAttrs live collection
+    for (let i = liveAttrs.length - 1; i >= 0; i--) {
+        const attrName = liveAttrs[i].name;
+        if (!vNode.hasAttribute(attrName)) {
+            liveNode.removeAttribute(attrName);
         }
     }
 
-    if (domEl && newEl) {
-        let activeElement = domEl.ownerDocument.activeElement;
-        if (activeElement == domEl)
-            curCaret = getSelection(activeElement);
-        else if (activeElement && activeElement.tagName == 'BODY')
-            curCaret = getSelection(domEl);
-        else
-            curCaret = getSelection(activeElement);
-
-
-        if (!value && type != 'isStartTag' && type != 'textNode') {
-            type = 'innerHTML';
+    // Add or update attributes from the virtual DOM to the live DOM
+    for (let i = 0; i < vAttrs.length; i++) {
+        const attrName = vAttrs[i].name;
+        const vValue = vAttrs[i].value;
+        
+        // Only update if it actually changed, to prevent unnecessary layout thrashing
+        if (liveNode.getAttribute(attrName) !== vValue) {
+            liveNode.setAttribute(attrName, vValue);
         }
+    }
+}
 
-        // console.log('domEl', domEl)
-        // console.log('newEl', newEl)
-        if (start != end && type == 'innerHTML') {
-            domTextEditor.htmlString = html;
-            if (domEl.tagName != 'HTML' && newEl.parentElement) {
-                domEl.parentElement.replaceChildren(...newEl.parentElement.childNodes);
-            } else {
-                domEl.replaceChildren(...newEl.childNodes);
-                // console.log('Html tag', domEl)
-            }
-
-            if (curCaret && curCaret.range) {
-                curCaret.range.startContainer = domEl;
-                curCaret.range.endContainer = domEl;
-            }
-        } else if (type == 'isStartTag') {
-            oldEl = domTextEditor.oldHtml.querySelector(path);
-            if (!oldEl && domEl.tagName == 'HTML')
-                oldEl = domTextEditor.oldHtml
-            assignAttributes(newEl, oldEl, domEl);
-            // console.log('isStartTag', domEl, newEl)
-
-        } else if (type == 'insertAdjacent') {
-            domEl.insertAdjacentHTML(position, value);
-            // console.log('insertAdjacent', domEl, value)
-        } else if (type == 'textNode') {
-            if (start != end)
-                domTextEditor.htmlString = html;
-            domEl.innerHTML = newEl.innerHTML;
-            // console.log('textnode', domEl.innerHTML, newEl.innerHTML)
-
-        } else if (type == 'innerHTML') {
-            domEl.replaceChildren(...newEl.childNodes);
-            // console.log('innerHtml', domEl, newEl)
-        }
-        domTextEditor.htmlString = html;
-
-        if (curCaret && start >= 0 && end >= 0) {
-            if (curCaret.range && curCaret.range.startContainer == domEl) {
-                if (curCaret.start >= curCaret.range.startOffset) {
-                    let p = processSelection(domEl, value, curCaret.start, curCaret.end, start, end, curCaret.range);
-                    sendPosition(domEl);
-                    _dispatchInputEvent(p.element, p.value, p.start, p.end, p.prev_start, p.prev_end);
-                }
+/**
+ * Diffs and reconciles child nodes between the live and virtual elements.
+ * 
+ * @param {HTMLElement} liveNode - The live parent element.
+ * @param {HTMLElement} vNode - The virtual parent element.
+ */
+function syncChildren(liveNode, vNode) {
+    const liveChildren = Array.from(liveNode.childNodes);
+    const vChildren = Array.from(vNode.childNodes);
+    
+    const max = Math.max(liveChildren.length, vChildren.length);
+
+    for (let i = 0; i < max; i++) {
+        const liveChild = liveChildren[i];
+        const vChild = vChildren[i];
+
+        if (!liveChild && vChild) {
+            // Virtual DOM has new nodes that live DOM doesn't have yet (Insertion)
+            
+            // Script Tag Handling: If a new script tag is injected, we must recreate it 
+            // so the browser executes it properly.
+            if (vChild.nodeName === 'SCRIPT') {
+                let script = document.createElement('script');
+                syncAttributes(script, vChild);
+                script.innerHTML = vChild.innerHTML;
+                liveNode.appendChild(script);
             } else {
-                let p = processSelection(domEl, value, curCaret.start, curCaret.end, start, end, curCaret.range);
-                _dispatchInputEvent(p.element, p.value, p.start, p.end, p.prev_start, p.prev_end);
-
-            }
-        } else {
-            _dispatchInputEvent(domTextEditor);
-        }
-
-        if (['HTML', 'HEAD', 'BODY', 'SCRIPT'].includes(newEl.tagName)) {
-            let scripts;
-            if (newEl.tagName == 'SCRIPT') {
-                scripts = [newEl];
-            }
-            else {
-                scripts = domEl.querySelectorAll('script');
-            }
-            for (let script of scripts) {
-                let newScript = domEl.ownerDocument.createElement('script');
-                for (let attribute of script.attributes) {
-                    newScript.setAttribute(attribute.name, attribute.value);
-                }
-                newScript.innerHTML = script.innerHTML;
-                script.replaceWith(newScript);
+                liveNode.appendChild(vChild.cloneNode(true));
             }
+        } 
+        else if (liveChild && !vChild) {
+            // Live DOM has extra nodes that virtual DOM no longer has (Deletion)
+            liveNode.removeChild(liveChild);
+        } 
+        else if (liveChild && vChild) {
+            // Both nodes exist, we must deeply synchronize them (Mutation)
+            syncNode(liveChild, vChild);
         }
     }
 }
 
-function parseHtml(domTextEditor, html) {
-    var dom = domParser(html);
-    if (domTextEditor.newHtml) {
-        domTextEditor.oldHtml = domTextEditor.newHtml;
-    } else {
-        domTextEditor.oldHtml = dom;
-    }
-    domTextEditor.newHtml = dom;
-}
-
-function assignAttributes(newEl, oldEl, domEl) {
-    if (!oldEl) return;
-    for (let newElAtt of newEl.attributes) {
-        if (!oldEl.attributes[newElAtt.name] || oldEl.attributes[newElAtt.name].value !== newElAtt.value)
-            try {
-                domEl.setAttribute(newElAtt.name, newElAtt.value);
-            }
-            catch (err) {
-                throw new Error("assignAttributes: " + err.message, err.name);
-            }
-    }
-
-    if (newEl.attributes.length !== oldEl.attributes.length) {
-        for (let i = 0, len = oldEl.attributes.length; i < len; i++) {
-            let oldElAtt = oldEl.attributes[i];
-            if (!newEl.attributes[oldElAtt.name]) {
-                domEl.removeAttribute(oldElAtt.name);
-                i--, len--;
-            }
-        }
-    }
-}
+export default updateDom;

package/src/updateText.js

@@ -2,154 +2,196 @@ import crdt from "@cocreate/crdt";
 import { getAttributes } from "@cocreate/utils";
 import { getStringPosition } from "@cocreate/selection";
 
+/**
+ * Translates a DOM element insertion/movement into string manipulation.
+ * Calculates index offsets dynamically to maintain accurate CRDT positions.
+ */
 export function insertAdjacentElement({
-	domTextEditor,
-	target,
-	position,
-	element,
-	elementValue
+    domTextEditor,
+    target,
+    position,
+    element,
+    elementValue
 }) {
-	try {
-		let remove;
-		if (element && !elementValue) {
-			remove = getStringPosition({
-				string: domTextEditor.htmlString,
-				target: element
-			});
-			if (!remove || (!remove.start && !remove.end))
-				throw new Error("insertAdjacentElement: element not found");
-
-			elementValue = domTextEditor.htmlString.substring(
-				remove.start,
-				remove.end
-			);
-		}
-
-		let { start } = getStringPosition({
-			string: domTextEditor.htmlString,
-			target,
-			position,
-			value: elementValue
-		});
-		if (remove)
-			_updateText({
-				domTextEditor,
-				start: remove.start,
-				end: remove.end
-			});
-		if (remove && remove.start < start) {
-			let length = remove.end - remove.start;
-			_updateText({
-				domTextEditor,
-				value: elementValue,
-				start: start - length
-			});
-		} else _updateText({ domTextEditor, value: elementValue, start });
-	} catch (error) {
-		console.error(error);
-	}
+    try {
+        let remove;
+        
+        // 1. If moving an existing element, locate its current string coordinates
+        if (element && !elementValue) {
+            remove = getStringPosition({
+                string: domTextEditor.htmlString,
+                target: element
+            });
+            
+            if (!remove || (!remove.start && !remove.end))
+                throw new Error("insertAdjacentElement: element not found");
+
+            elementValue = domTextEditor.htmlString.substring(
+                remove.start,
+                remove.end
+            );
+        }
+
+        // 2. Locate the coordinates for the insertion target
+        let { start } = getStringPosition({
+            string: domTextEditor.htmlString,
+            target,
+            position,
+            value: elementValue
+        });
+
+        // 3. Execute the move as a Delete + Insert
+        if (remove) {
+            _updateText({
+                domTextEditor,
+                start: remove.start,
+                end: remove.end
+            });
+        }
+            
+        // 4. OT Math: Shift the insertion index left if the removed text preceded it
+        if (remove && remove.start < start) {
+            let length = remove.end - remove.start;
+            _updateText({
+                domTextEditor,
+                value: elementValue,
+                start: start - length
+            });
+        } else {
+            _updateText({ domTextEditor, value: elementValue, start });
+        }
+    } catch (error) {
+        console.error("Error in insertAdjacentElement:", error);
+    }
 }
 
 export function removeElement({ domTextEditor, target }) {
-	updateDomText({ domTextEditor, target });
+    updateDomText({ domTextEditor, target });
 }
 
 export function setInnerText({ domTextEditor, target, value, start, end }) {
-	updateDomText({ domTextEditor, target, value, pos: { start, end } });
+    updateDomText({ domTextEditor, target, value, pos: { start, end } });
 }
 
 export function setClass({ domTextEditor, target, value }) {
-	updateDomText({ domTextEditor, target, attribute: "class", value });
+    updateDomText({ domTextEditor, target, attribute: "class", value });
 }
+
 export function removeClass({ domTextEditor, target, value }) {
-	updateDomText({
-		domTextEditor,
-		target,
-		attribute: "class",
-		value,
-		remove: true
-	});
+    updateDomText({
+        domTextEditor,
+        target,
+        attribute: "class",
+        value,
+        remove: true
+    });
 }
 
 export function setStyle({ domTextEditor, target, property, value }) {
-	updateDomText({
-		domTextEditor,
-		target,
-		attribute: "style",
-		property,
-		value
-	});
+    updateDomText({
+        domTextEditor,
+        target,
+        attribute: "style",
+        property,
+        value
+    });
 }
 
 export function removeStyle({ domTextEditor, target, property }) {
-	updateDomText({
-		domTextEditor,
-		target,
-		attribute: "style",
-		property,
-		remove: true
-	});
+    updateDomText({
+        domTextEditor,
+        target,
+        attribute: "style",
+        property,
+        remove: true
+    });
 }
 
 export function setAttribute({ domTextEditor, target, name, value }) {
-	updateDomText({ domTextEditor, target, attribute: name, value });
+    updateDomText({ domTextEditor, target, attribute: name, value });
 }
 
 export function removeAttribute({ domTextEditor, target, name }) {
-	updateDomText({ domTextEditor, target, attribute: name, remove: "true" });
+    updateDomText({ domTextEditor, target, attribute: name, remove: "true" });
 }
 
 export function replaceInnerText({ domTextEditor, target, value }) {
-	updateDomText({ domTextEditor, target, value });
+    updateDomText({ domTextEditor, target, value });
 }
 
+/**
+ * Resolves DOM targets to string ranges and sends atomic updates.
+ */
 export function updateDomText({
-	domTextEditor,
-	target,
-	position,
-	element,
-	elementValue,
-	attribute,
-	value,
-	property,
-	pos,
-	remove
+    domTextEditor,
+    target,
+    position,
+    element,
+    elementValue,
+    attribute,
+    value,
+    property,
+    pos,
+    remove
 }) {
-	let selection = getStringPosition({
-		string: domTextEditor.htmlString,
-		target,
-		attribute,
-		property,
-		value,
-		remove
-	});
-	if (!selection) return;
-	let { start, end, newValue } = selection;
-	if (pos) {
-		start += pos.start;
-		end += pos.end;
-	}
-	if (start != end) _updateText({ domTextEditor, start, end });
-	if ((attribute && remove != "true") || (attribute && value))
-		_updateText({
-			domTextEditor,
-			value: ` ${attribute}="${newValue}"`,
-			start
-		});
-	else if (value) _updateText({ domTextEditor, value, start });
+    let selection = getStringPosition({
+        string: domTextEditor.htmlString,
+        target,
+        attribute,
+        property,
+        value,
+        remove
+    });
+    
+    if (!selection) return;
+    
+    let { start, end, newValue } = selection;
+    
+    if (pos) {
+        start += pos.start;
+        end += pos.end;
+    }
+
+    // FIXED: Combined the isolated delete and insert into a single, atomic Replace operation
+    // This prevents the "ghost state" network glitch described in the code review.
+    let replaceValue = "";
+    if ((attribute && remove != "true") || (attribute && value)) {
+        replaceValue = ` ${attribute}="${newValue}"`;
+    } else if (value) {
+        replaceValue = value;
+    }
+
+    if (start != end || replaceValue) {
+        _updateText({
+            domTextEditor,
+            start,
+            end,
+            value: replaceValue
+        });
+    }
 }
 
+/**
+ * Prepares the payload and communicates with the underlying CRDT engine.
+ */
 function _updateText({ domTextEditor, value, start, end }) {
-	if (domTextEditor.tagName == "HTML")
-		domTextEditor = domTextEditor.ownerDocument.defaultView.frameElement;
-	const { array, object, key, isCrud } = getAttributes(domTextEditor);
-	crdt.updateText({
-		array,
-		object,
-		key,
-		value,
-		start,
-		length: end - start,
-		crud: isCrud
-	});
-}
+    // Cross-frame sync logic: Bubble up to the iframe wrapper if targeting the root document
+    if (domTextEditor.tagName == "HTML") {
+        domTextEditor = domTextEditor.ownerDocument.defaultView.frameElement;
+    }
+        
+    const { array, object, key, isCrud } = getAttributes(domTextEditor);
+    
+    // Ensure we don't send negative or invalid lengths to the engine
+    let length = (end !== undefined && start !== undefined) ? end - start : 0;
+    
+    crdt.updateText({
+        array,
+        object,
+        key,
+        value,
+        start,
+        length,
+        crud: isCrud
+    });
+}