@cocreate/text 1.12.32 → 1.13.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [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.0",
   "description": "A simple text component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "text",

package/src/index.js

@@ -71,7 +71,8 @@ export function _addEventListeners (element) {
     element.addEventListener('cut', _cut);
     element.addEventListener('paste', _paste);
     element.addEventListener('keydown', _keydown);
-    element.addEventListener('keypress', _keypress);
+    element.addEventListener('beforeinput', _beforeinput);
+    element.addEventListener('input', _input);
 }
 
 function _click (event) {
@@ -130,33 +131,47 @@ 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) {
@@ -166,10 +181,9 @@ function _removeEventListeners (element) {
     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);
@@ -278,6 +292,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);