@cocreate/text 1.12.32 → 1.13.3

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [1.13.3](https://github.com/CoCreate-app/CoCreate-text/compare/v1.13.2...v1.13.3) (2021-11-29)
+
+
+### Bug Fixes
+
+* sendPosition if no element return ([fec4fbb](https://github.com/CoCreate-app/CoCreate-text/commit/fec4fbb20b574af0995f1f49ad16501a83c52b98))
+
+## [1.13.2](https://github.com/CoCreate-app/CoCreate-text/compare/v1.13.1...v1.13.2) (2021-11-28)
+
+
+### Bug Fixes
+
+* removed console.log ([81a07d4](https://github.com/CoCreate-app/CoCreate-text/commit/81a07d4be95acd507fa4047de38847069fd53d5c))
+
+## [1.13.1](https://github.com/CoCreate-app/CoCreate-text/compare/v1.13.0...v1.13.1) (2021-11-28)
+
+
+### Bug Fixes
+
+* replace click and keyup event with selectionchange event ([515da39](https://github.com/CoCreate-app/CoCreate-text/commit/515da39a62af4e350aa2a7857aa48b87c822a5dd))
+
+# [1.13.0](https://github.com/CoCreate-app/CoCreate-text/compare/v1.12.32...v1.13.0) (2021-11-28)
+
+
+### Bug Fixes
+
+* remove keypress and replaced with beforeinput event to support mobile browsers ([84ae8b1](https://github.com/CoCreate-app/CoCreate-text/commit/84ae8b162657ec028e6a49b627ca104909ff11ad))
+
+
+### Features
+
+* support for undo and redo ([8a727d3](https://github.com/CoCreate-app/CoCreate-text/commit/8a727d3ba5df8bcf03cf96c07c40e889dd359aea))
+
 ## [1.12.32](https://github.com/CoCreate-app/CoCreate-text/compare/v1.12.31...v1.12.32) (2021-11-27)
 
 

package/package.json

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

package/src/index.js

@@ -16,6 +16,10 @@ function init() {
     let elements = document.querySelectorAll(selectors);
     initElements(elements);
     _crdtUpdateListener();
+    document.addEventListener('selectionchange', (e) => {
+        let element = document.activeElement;
+        sendPosition(element)
+    });
 }
 
 function initElements (elements) {
@@ -32,10 +36,16 @@ function initElement (element) {
         if(!collection || !document_id || !name) return;
 
         if (!isCrdt) {
-            if (element.tagName == 'IFRAME')
+            if (element.tagName == 'IFRAME'){
                 _addEventListeners(element.contentDocument.documentElement);
-            else 
-            _addEventListeners(element);
+                let Document = element.contentDocument
+                Document.addEventListener('selectionchange', (e) => {
+                    let element = Document.activeElement;
+                    sendPosition(element)
+                });            }  
+            else{ 
+                _addEventListeners(element);
+            }
         }   
         element.setAttribute('crdt', 'true');
         element.crdt = {init: true};
@@ -65,18 +75,12 @@ function initElement (element) {
 }
 
 export function _addEventListeners (element) {
-    element.addEventListener('click', _click);
     element.addEventListener('blur', _blur);
-    element.addEventListener('keyup', _keyup);
     element.addEventListener('cut', _cut);
     element.addEventListener('paste', _paste);
     element.addEventListener('keydown', _keydown);
-    element.addEventListener('keypress', _keypress);
-}
-
-function _click (event) {
-    let element = event.currentTarget;
-    sendPosition(element);
+    element.addEventListener('beforeinput', _beforeinput);
+    element.addEventListener('input', _input);
 }
 
 function _blur (event) {
@@ -87,11 +91,6 @@ function _blur (event) {
     cursors.sendPosition({collection, document_id, name, start, end});
 }
 
-function _keyup (event) {
-    let element = event.currentTarget;
-    sendPosition(element);
-}
-
 function _cut (event) {
     let element = event.currentTarget;
     const { start, end, range } = getSelection(element);
@@ -130,53 +129,66 @@ function _keydown (event) {
     const { start, end, range } = getSelection(element);
     if(event.key == "Backspace" || event.key == "Tab" || event.key == "Enter") {
         eventObj = event;
-        //ToDO switch case
         if(start != end) {
             updateText({element, start, end, range});
         }
+        
         if(event.key == "Backspace" && start == end) {
             updateText({element, start: start - 1, end, range});
         }
-        if(event.key == 'Tab') {
+        else if(event.key == 'Tab') {
             updateText({element, value: "\t", start, range});
         }
-        if(event.key == "Enter") {
+        else if(event.key == "Enter") {
             updateText({element, value: "\n", start, range});
         }
         event.preventDefault();
     }
+    else if (event.ctrlKey) {
+        if (event.keyCode == 90) 
+            console.log('Undo');
+        else if (event.keyCode == 89) 
+            console.log('Redo');
+    }
 }
 
-function _keypress (event) {
+function _beforeinput (event) {
     if(event.stopCCText) return;
     let element = event.currentTarget;
     let { start, end, range } = getSelection(element);
-    if(start != end) {
-        updateText({element, start, end, range});
+    if (event.data) {
+        if(start != end) {
+            updateText({element, start, end, range});
+        }
+        eventObj = event;
+        updateText({element, value: event.data, start, range});
+        event.preventDefault();
+    }
+}
+
+function _input (event) {
+    if(event.stopCCText) return;
+    if (event.data) {
+        eventObj = event;
     }
-    eventObj = event;
-    updateText({element, value: event.key, start, range});
-    event.preventDefault();
 }
 
 function _removeEventListeners (element) {
-    element.removeEventListener('click', _click);
     element.removeEventListener('blur', _blur);
-    element.removeEventListener('keyup', _keyup);
     element.removeEventListener('cut', _cut);
     element.removeEventListener('paste', _paste);
     element.removeEventListener('keydown', _keydown);
-    element.removeEventListener('keypress', _keypress);
+    element.removeEventListener('beforeinput', _beforeinput);
 }
 
-
 export function sendPosition (element) {
     if (!element) return;
     const { start, end } = getSelection(element);
     if (element.tagName == 'HTML' && !element.hasAttribute('collection') || !element.hasAttribute('collection')) 
         element = element.ownerDocument.defaultView.frameElement;
+    if (!element) return;
     const { collection, document_id, name, isCrdt } = crud.getAttr(element);
-    if (isCrdt == 'false') return;
+    if (isCrdt == 'false' || !collection || !document_id || !name) return;
     cursors.sendPosition({ collection, document_id, name, start, end });
 }
 
@@ -278,6 +290,7 @@ export function _dispatchInputEvent(element, content, start, end, prev_start, pr
         element.dispatchEvent(event);
     }   
     let inputEvent = new CustomEvent('input', { bubbles: true });
+    Object.defineProperty(inputEvent, 'stopCCText', { writable: false, value: true });
     Object.defineProperty(inputEvent, 'target', { writable: false, value: element });
     Object.defineProperty(inputEvent, 'detail', { writable: false, value: detail });
     element.dispatchEvent(inputEvent);