@cocreate/text 1.17.0 → 1.17.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/text",
-  "version": "1.17.0",
+  "version": "1.17.1",
   "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

@@ -12,28 +12,27 @@ export function updateDom({domTextEditor, value, start, end, html}) {
 		parseHtml(domTextEditor, html);
 		
 	let domEl, oldEl, curCaret, newEl;
-	if (path && path.includes('<')) {
-		let index = path.lastIndexOf(' >')
-		if (index != -1)
-			path = path.slice(0, index)
-		else{
-			index = path.lastIndexOf('<')
-			path = path.slice(0, index)
-		}
-	}
+	// 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 = path.lastIndexOf(' >')
-		if (index != -1)
-			path = path.slice(0, index)
-		newEl = domTextEditor.newHtml.querySelector(path);
+		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;
@@ -43,38 +42,65 @@ 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}']`);
+		// 	}
+		// }
+	}
+
+	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) {
+	if(domEl && newEl) {
 		let activeElement = domEl.ownerDocument.activeElement;
 		if (activeElement == domEl)
 			curCaret = getSelection(activeElement);
-		else if (activeElement.tagName == 'BODY')
+		else if (activeElement && activeElement.tagName == 'BODY')
 			curCaret = getSelection(domEl);
 		else
 			curCaret = getSelection(activeElement);
-	}
+	
 
-	if (!value && type != 'isStartTag' && type != 'textNode'){
-		type = 'innerHTML';
-	}
+		if (!value && type != 'isStartTag' && type != 'textNode'){
+			type = 'innerHTML';
+		}
 
-	if(domEl && newEl) {
+		// console.log('domEl', domEl)
+		// console.log('newEl', newEl)
 		if(start != end && type == 'innerHTML') {
 			domTextEditor.htmlString = html;
 			if (domEl.tagName != 'HTML'){
@@ -96,6 +122,9 @@ export function updateDom({domTextEditor, value, start, end, html}) {
 			}
 		}
 		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)
 
@@ -116,31 +145,32 @@ export function updateDom({domTextEditor, value, start, end, html}) {
 			// 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 && 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);
+			}	
+		}
 	}
 }