@cocreate/text 1.26.5 → 1.27.1

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [1.27.1](https://github.com/CoCreate-app/CoCreate-text/compare/v1.27.0...v1.27.1) (2024-06-19)
+
+
+### Bug Fixes
+
+* apply custom setValue function on element ([938088a](https://github.com/CoCreate-app/CoCreate-text/commit/938088a9d2caa3046fbac34d7bebf6858296ab74))
+
+# [1.27.0](https://github.com/CoCreate-app/CoCreate-text/compare/v1.26.5...v1.27.0) (2024-06-12)
+
+
+### Bug Fixes
+
+* bump cocreate dependencies ([5f04198](https://github.com/CoCreate-app/CoCreate-text/commit/5f0419854eca2a8707a0140d31547308fb1ae604))
+* dispatch input event when value is set in contenteditable elements ([1509928](https://github.com/CoCreate-app/CoCreate-text/commit/1509928a5df4d2d70d7d0d06d1124ae924901ae6))
+* formating ([5f751e7](https://github.com/CoCreate-app/CoCreate-text/commit/5f751e718f71b07b754022fea8d4f55e84b11158))
+* svg icon class ([3716b92](https://github.com/CoCreate-app/CoCreate-text/commit/3716b929a9806d585ba16c40c015a3cb469d4ab4))
+
+
+### Features
+
+* set activeSelection on document ([e85b59a](https://github.com/CoCreate-app/CoCreate-text/commit/e85b59a89af4a2951e63600e88ea3a7927b33581))
+
 ## [1.26.5](https://github.com/CoCreate-app/CoCreate-text/compare/v1.26.4...v1.26.5) (2024-05-08)
 
 

package/demo/test-webpage.html

@@ -348,9 +348,7 @@
                     href="https://github.com/CoCreate-app/CoCreate-website/tree/master/src/index.html?message=docs%3A%20describe%20your%20change..."
                     target="_blank"
                     class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
-                    <i
-                        class="height:20px fill:#505050"
-                        src="/assets/svg/pencil-alt.svg"></i>
+                    <i src="/assets/svg/pencil-alt.svg"></i>
                 </button>
             </main>
 

package/docs/index.html

@@ -72,41 +72,31 @@
                         href="https://github.com/CoCreate-app/CoCreate-text"
                         target="_blank"
                         class="margin-right:15px"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/github.svg"></i
+                        ><i src="/assets/svg/github.svg"></i
                     ></a>
                     <a
                         class="margin-right:15px share"
                         share-network="twitter"
                         title="Share on twitter"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/twitter.svg"></i
+                        ><i src="/assets/svg/twitter.svg"></i
                     ></a>
                     <a
                         class="margin-right:15px share"
                         share-network="facebook"
                         title="Share on Facebook"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/facebook.svg"></i
+                        ><i src="/assets/svg/facebook.svg"></i
                     ></a>
                     <a
                         class="margin-right:15px share"
                         share-network="instagram"
                         title="Share on instagram"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/instagram.svg"></i
+                        ><i src="/assets/svg/instagram.svg"></i
                     ></a>
                     <a
                         class="margin-right:15px share"
                         share-network="share"
                         title="Share on share"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/share-alt.svg"></i
+                        ><i src="/assets/svg/share-alt.svg"></i
                     ></a>
                 </div>
             </div>
@@ -224,7 +214,7 @@
                                     toggle="code-height"
                                     toggle-selector="#demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -235,18 +225,14 @@
                                     hide="#eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="code"
                                     show="#code-slash"
                                     hide="#code, #demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -255,7 +241,7 @@
                                     show="#code, #demo-code"
                                     hide="#code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/text",
-  "version": "1.26.5",
+  "version": "1.27.1",
   "description": "A simple text component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "text",
@@ -58,12 +58,12 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/actions": "^1.18.1",
-    "@cocreate/crdt": "^1.27.3",
-    "@cocreate/cursors": "^1.23.3",
-    "@cocreate/observer": "^1.16.0",
-    "@cocreate/selection": "^1.12.1",
-    "@cocreate/utils": "^1.33.6",
-    "@cocreate/uuid": "^1.11.1"
+    "@cocreate/actions": "^1.18.2",
+    "@cocreate/crdt": "^1.27.4",
+    "@cocreate/cursors": "^1.23.4",
+    "@cocreate/observer": "^1.16.1",
+    "@cocreate/selection": "^1.12.2",
+    "@cocreate/utils": "^1.33.7",
+    "@cocreate/uuid": "^1.11.2"
   }
 }

package/src/index.js

@@ -103,6 +103,10 @@ function initElement(element) {
         element.getValue = async () => {
             return await crdt.getText({ array, object, key })
         }
+        element.setValue = (value) => {
+            crdt.replaceText({ array, object, key, value, crud: isCrud, save: isSave, read: isRead });
+
+        }
     }
 }
 
@@ -128,8 +132,10 @@ function initDocument(doc) {
             let element = doc.activeElement;
             let { isRealtime, isCrdt } = getAttributes(element);
 
-            if (isRealtime && isCrdt)
+            if (isRealtime && isCrdt) {
+                doc.activeSelection = getSelection(element);
                 sendPosition(element);
+            }
         });
     }
 }
@@ -294,6 +300,7 @@ export function sendPosition(element) {
     if (JSON.stringify(currentPosition) === JSON.stringify(previousPosition))
         return;
     previousPosition = currentPosition;
+    // console.log('activeElement: ', element)
     element.activeElement = element;
     window.activeElement = element;
     cursors.sendPosition({ array, object, key, start, end });
@@ -307,6 +314,9 @@ function updateText({ element, value, start, end, range, undoRedo }) {
         if (element.tagName == 'HTML' && !element.hasAttribute('array'))
             element = element.ownerDocument.defaultView.frameElement;
     }
+
+    if (!element) return
+
     const { array, object, key, isCrud, isCrdt, isSave } = getAttributes(element);
     if (isCrdt == "false" || !array || !object || !key) return;
 

package/src/updateDom.js

@@ -1,209 +1,216 @@
-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);
-		
-	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;
-		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}']`);
-		// 	}
-		// }
-	}
-
-	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) {
-					domEl.parentElement.replaceChildren(...newEl.parentElement.childNodes);
-					// console.log('parent', domEl.parentElement)
-				} else {
-					domEl.replaceChildren(...newEl.childNodes);
-					// console.log('domEl', domEl)
-				}
-			}
-			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);
-				}
-		}
-		
-		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);
-			}	
-		}
-	}
+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);
+
+    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;
+        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}']`);
+        // 	}
+        // }
+    }
+
+    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) {
+                    domEl.parentElement.replaceChildren(...newEl.parentElement.childNodes);
+                    // console.log('parent', domEl.parentElement)
+                } else {
+                    domEl.replaceChildren(...newEl.childNodes);
+                    // console.log('domEl', domEl)
+                }
+            }
+            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);
+                }
+            } 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);
+            }
+        }
+    }
 }
 
 function parseHtml(domTextEditor, html) {
-	var dom = domParser(html);
-	if (domTextEditor.newHtml) {
-		domTextEditor.oldHtml = domTextEditor.newHtml;
-	} else {
-		domTextEditor.oldHtml = dom;
-	}
-	domTextEditor.newHtml = dom;
+    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--;
-			}
-		}
-	}
+    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--;
+            }
+        }
+    }
 }