@cocreate/text 1.16.5 → 1.17.2

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [1.17.2](https://github.com/CoCreate-app/CoCreate-text/compare/v1.17.1...v1.17.2) (2022-07-09)
+
+
+### Bug Fixes
+
+* updateDom will sendPosition if the currentContainer = domEl ([c1e9f56](https://github.com/CoCreate-app/CoCreate-text/commit/c1e9f56359c88dbff943c3b82d81746d30833fdb))
+
+## [1.17.1](https://github.com/CoCreate-app/CoCreate-text/compare/v1.17.0...v1.17.1) (2022-06-24)
+
+
+### Bug Fixes
+
+* imporved handeling of path fallback to html element if no matches amoung parentElements ([5c331d0](https://github.com/CoCreate-app/CoCreate-text/commit/5c331d0d32ffd60587f684b44e69766097193c33))
+
+# [1.17.0](https://github.com/CoCreate-app/CoCreate-text/compare/v1.16.5...v1.17.0) (2022-06-23)
+
+
+### Bug Fixes
+
+* try to update parent element of previous element rather then html tag ([37ab36c](https://github.com/CoCreate-app/CoCreate-text/commit/37ab36ce79fa270b3a43daaf14597e765f42e371))
+
+
+### Features
+
+* if newEl can not be found using path, update path to query parent element ([2c637f1](https://github.com/CoCreate-app/CoCreate-text/commit/2c637f1e0c3d15f00d1664c4d744d4ee9c4581c6))
+
 ## [1.16.5](https://github.com/CoCreate-app/CoCreate-text/compare/v1.16.4...v1.16.5) (2022-06-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/text",
-  "version": "1.16.5",
+  "version": "1.17.2",
   "description": "A simple text component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "text",
@@ -69,6 +69,7 @@
     "@cocreate/hosting": "^1.3.3",
     "@cocreate/observer": "^1.5.3",
     "@cocreate/selection": "^1.4.11",
+    "@cocreate/utils": "^1.7.4",
     "@cocreate/uuid": "^1.2.4"
   }
 }

package/src/updateDom.js

@@ -11,9 +11,28 @@ export function updateDom({domTextEditor, value, start, end, html}) {
     let {element, path, position, type} = getElementPosition(domTextEditor.htmlString, start, end);
 		parseHtml(domTextEditor, html);
 		
-	let domEl, oldEl, curCaret;
-	let newEl = domTextEditor.newHtml.querySelector(path);
+	let domEl, oldEl, curCaret, newEl;
+	// console.log('element', element)
+	// console.log('path', path)
+
+	try {
+		newEl = domTextEditor.newHtml.querySelector(path);
+	} catch(err){
+		console.log('error', err)
+	}
+
+	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)
+	}
+
 	if(!newEl){
+		// console.log("no newEL", path)
 		newEl = domTextEditor.cloneNode(true);
 		if (html != undefined)
 			newEl.innerHTML = html;
@@ -23,90 +42,136 @@ export function updateDom({domTextEditor, value, start, end, html}) {
 		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);
-		oldEl = domTextEditor.oldHtml.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}']`);
-			}
-		}
+		// 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}']`);
+		// 	}
+		// }
 	}
 
-	let activeElement = domEl.ownerDocument.activeElement;
-	if (activeElement == domEl)
-		curCaret = getSelection(activeElement);
-	else if (activeElement.tagName == 'BODY')
-		curCaret = getSelection(domEl);
-	else
-		curCaret = getSelection(activeElement);
-		
-	if (!value && type != 'isStartTag' && type != 'textNode'){
-		type = 'innerHTML';
+	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);
+		}
+
+		if (!domEl || !newEl){
+			newEl = domTextEditor.cloneNode(true);
+			if (html != undefined)
+				newEl.innerHTML = html;
+			else
+				newEl.innerHTML = domTextEditor.htmlString;
+			domEl = domTextEditor;
+			type = 'innerHTML';
+		}
 	}
-	
+
 	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';
+		}
+
+		// console.log('domEl', domEl)
+		// console.log('newEl', newEl)
 		if(start != end && type == 'innerHTML') {
 			domTextEditor.htmlString = html;
 			if (domEl.tagName != 'HTML'){
-				if (newEl.parentElement)
+				if (newEl.parentElement) {
 					domEl.parentElement.replaceChildren(...newEl.parentElement.childNodes);
-				else
+					// console.log('parent', domEl.parentElement)
+				} else {
 					domEl.replaceChildren(...newEl.childNodes);
+					// console.log('domEl', domEl)
+				}
 			}
-			else
+			else {
 				domEl.replaceChildren(...newEl.childNodes);	
-			// domEl = newEl;
+				// console.log('Html tag', domEl)
+			}
 			if (curCaret && curCaret.range) {
 				curCaret.range.startContainer = domEl;
 				curCaret.range.endContainer = domEl;
 			}
 		}
-		else if (type == 'isStartTag')
+		else if (type == 'isStartTag') {
+			oldEl = domTextEditor.oldHtml.querySelector(path);
+			if (!oldEl && domEl.tagName == 'HTML')
+				oldEl = domTextEditor.oldHtml
 			assignAttributes(newEl, oldEl, domEl);
-		else if (type == 'insertAdjacent')
+			// 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.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);
-		}
-	}
-	
-	if (newEl.tagName == 'HTML' || 'HEAD' || 'BODY' || 'SCRIPT'){
-		let scripts;
-		if (newEl.tagName == 'SCRIPT'){
-			scripts = [newEl];
-		}
-		else{
-			scripts = domEl.querySelectorAll('script');
+
+		if(curCaret && start >= 0 && end >= 0) {
+			if (curCaret.range.startContainer == domEl)
+				if (curCaret.range && 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);
+				}
 		}
-		for (let script of scripts) {
-			let newScript = domEl.ownerDocument.createElement('script');
-			for(let attribute of script.attributes) {
-				newScript.setAttribute(attribute.name, attribute.value);
+		
+		if (['HTML', 'HEAD', 'BODY', 'SCRIPT'].includes(newEl.tagName)){
+			let scripts;
+			if (newEl.tagName == 'SCRIPT'){
+				scripts = [newEl];
 			}
-			newScript.innerHTML = script.innerHTML;
-			script.replaceWith(newScript);
-		}	
+			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);
+			}	
+		}
 	}
 }