@cocreate/text 1.27.1 → 1.28.1

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [1.28.1](https://github.com/CoCreate-app/CoCreate-text/compare/v1.28.0...v1.28.1) (2024-12-14)
+
+
+### Bug Fixes
+
+* try catchblock ([ca984f1](https://github.com/CoCreate-app/CoCreate-text/commit/ca984f1276cfed24ee34c21e874905a39b4bfac7))
+
+# [1.28.0](https://github.com/CoCreate-app/CoCreate-text/compare/v1.27.1...v1.28.0) (2024-11-04)
+
+
+### Bug Fixes
+
+* formating ([df994e2](https://github.com/CoCreate-app/CoCreate-text/commit/df994e2495420d626f1429a8a00f0cd8287d1cbd))
+* if condition remove ([ac7bf6a](https://github.com/CoCreate-app/CoCreate-text/commit/ac7bf6a3cca3c2e876900f5d86d372880295dc73))
+* if no selection return ([a271cb3](https://github.com/CoCreate-app/CoCreate-text/commit/a271cb3c73e74d0b104939a2d6a662dd11da59f8))
+* observer taget has been renamed to selector ([da1e9e9](https://github.com/CoCreate-app/CoCreate-text/commit/da1e9e9eeaddcbafcfb589278ff8fadd10e4dd52))
+* pretier.config.js and file formating ([0ae4aed](https://github.com/CoCreate-app/CoCreate-text/commit/0ae4aed54f9358cd39b4de513684d9949f7e8844))
+* send position on mousedown and arrow keys ([1e63d00](https://github.com/CoCreate-app/CoCreate-text/commit/1e63d00fedef6de42594c592a6171b5c061ebd06))
+
+
+### Features
+
+* add prettier.config.js and format files ([9a8b71d](https://github.com/CoCreate-app/CoCreate-text/commit/9a8b71d52a4fa98a95f723238fbe7cd32e254adc))
+
 ## [1.27.1](https://github.com/CoCreate-app/CoCreate-text/compare/v1.27.0...v1.27.1) (2024-06-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/text",
-  "version": "1.27.1",
+  "version": "1.28.1",
   "description": "A simple text component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "text",

package/prettier.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+        tabWidth: 4,
+        semi: true,
+        trailingComma: "none",
+        bracketSameLine: true,
+        useTabs: true,
+        overrides: [
+            {
+                files: ["*.json", "*.yml", "*.yaml"],
+                options: {
+                    tabWidth: 2,
+                    useTabs: false
+                },
+            }
+        ],  
+    };

package/src/index.js

@@ -173,7 +173,7 @@ function _mousedown(event) {
         if (array && object && key && !target.hasAttribute('contenteditable'))
             target.setAttribute('contenteditable', 'true');
     }
-    // sendPosition(element)
+    sendPosition(domTextEditor)
 }
 
 function _blur(event) {
@@ -245,6 +245,8 @@ function _keydown(event) {
         } else if (event.keyCode == 89) {
             updateText({ element, range, undoRedo: 'redo' });
         }
+    } else {
+        sendPosition(element)
     }
 }
 
@@ -430,7 +432,7 @@ export function _dispatchInputEvent(element, content, start, end, prev_start, pr
 observer.init({
     name: 'CoCreateTextAddedNodes',
     observe: ['addedNodes'],
-    target: selectors,
+    selector: selectors,
     callback(mutation) {
         let isCrdt = mutation.target.getAttribute('crdt');
         if (isCrdt) return;
@@ -442,7 +444,7 @@ observer.init({
     name: 'CoCreateTextAttribtes',
     observe: ['attributes'],
     attributeName: [...getAttributeNames(['array', 'object', 'key']), 'contenteditable'],
-    target: selectors,
+    selector: selectors,
     callback(mutation) {
         let _id = mutation.target.getAttribute('object')
         if (!_id) {

package/src/updateDom.js

@@ -40,13 +40,11 @@ export function updateDom({ domTextEditor, value, start, end, html }) {
             newEl.innerHTML = domTextEditor.htmlString;
         domEl = domTextEditor;
         type = 'innerHTML';
-    }
-    else if (element.tagName == 'HTML') {
+    } else if (element.tagName == 'HTML') {
         // console.log('element = html')
         domEl = domTextEditor;
         type = 'innerHTML';
-    }
-    else if (path) {
+    } else if (path) {
         // console.log("else path", path)
         domEl = domTextEditor.querySelector(path);
         // if (!domEl || !oldEl){
@@ -103,44 +101,34 @@ export function updateDom({ domTextEditor, value, start, end, html }) {
         // 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 {
+            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') {
+        } 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') {
+        } else if (type == 'insertAdjacent') {
             domEl.insertAdjacentHTML(position, value);
             // console.log('insertAdjacent', domEl, value)
-        }
-        else if (type == 'textNode') {
+        } 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') {
+        } else if (type == 'innerHTML') {
             domEl.replaceChildren(...newEl.childNodes);
             // console.log('innerHtml', domEl, newEl)
         }

package/src/updateText.js

@@ -1,79 +1,155 @@
-import crdt from '@cocreate/crdt';
-import { getAttributes } from '@cocreate/utils';
-import { getStringPosition } from '@cocreate/selection';
+import crdt from "@cocreate/crdt";
+import { getAttributes } from "@cocreate/utils";
+import { getStringPosition } from "@cocreate/selection";
 
-export function insertAdjacentElement({ domTextEditor, target, position, element, elementValue }) {
-    let remove;
-    if (element && !elementValue) {
-        remove = getStringPosition({ string: domTextEditor.htmlString, target: element });
-        if (!remove.start && !remove.end)
-            throw new Error('insertAdjacentElement: element not found');
-        elementValue = domTextEditor.htmlString.substring(remove.start, remove.end);
-    }
+export function insertAdjacentElement({
+	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");
 
-    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 });
+			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);
+	}
 }
 
 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 });
 }
 
-export function updateDomText({ domTextEditor, target, position, element, elementValue, attribute, value, property, pos, remove }) {
-    let { start, end, newValue } = getStringPosition({ string: domTextEditor.htmlString, target, attribute, property, value, remove });
-    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 });
+export function updateDomText({
+	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 });
 }
 
 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 });
+	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
+	});
 }