@taufik-nurrohman/text-editor.key 1.0.10 → 1.0.12

package/index.js

@@ -207,26 +207,45 @@
         map.pull(); // Reset all key(s)
     }
 
-    function onInput(e) {
-        var $ = this,
-            key = e.data,
-            map = getReference($);
-        key && map.pull(key);
+    function onFocus(e) {
+        onBlur.call(this, e);
     }
 
-    function onKeyDown(e) {
-        var $ = this,
+    function onKeyDownOrPutDown(e) {
+        var map = getReference(this),
             command,
             v,
+            data = e.data,
+            inputType = e.inputType,
             key = e.key,
-            map = getReference($);
-        // Make the `Alt`, `Control`, `Meta`, and `Shift` key(s) sticky (does not require the user to release all key(s) first to repeat or change the current key combination).
-        map[e.altKey ? 'push' : 'pull']('Alt');
-        map[e.ctrlKey ? 'push' : 'pull']('Control');
-        map[e.metaKey ? 'push' : 'pull']('Meta');
-        map[e.shiftKey ? 'push' : 'pull']('Shift');
-        // Add the actual key to the queue. Don’t worry, this will not mistakenly add a key that already exists in the queue.
-        key && map.push(key);
+            type = e.type;
+        if ('keydown' === type) {
+            // Make the `Alt`, `Control`, `Meta`, and `Shift` key(s) sticky (does not require the user to release all key(s) first to repeat or change the current key combination).
+            map[e.altKey ? 'push' : 'pull']('Alt');
+            map[e.ctrlKey ? 'push' : 'pull']('Control');
+            map[e.metaKey ? 'push' : 'pull']('Meta');
+            map[e.shiftKey ? 'push' : 'pull']('Shift');
+            // Add the actual key to the queue. Don’t worry, this will not mistakenly add a key that already exists in the queue.
+            key && map.push(key);
+        } else {
+            if ('deleteContentBackward' === inputType) {
+                map.pull().push('Backspace'); // Simulate `Backspace` key
+            } else if ('deleteContentForward' === inputType) {
+                map.pull().push('Delete'); // Simulate `Delete` key
+            } else if ('deleteWordBackward' === inputType) {
+                map.pull().push('Control').push('Backspace'); // Simulate `Control-Backspace` keys
+            } else if ('deleteWordForward' === inputType) {
+                map.pull().push('Control').push('Delete'); // Simulate `Control-Delete` keys
+            } else if ('insertLineBreak' === inputType) {
+                map.pull().push('Enter'); // Simulate `Enter` key
+            } else if ('insertText' === inputType && data) {
+                // One character at a time
+                map.toArray().forEach(function (key) {
+                    return 1 === toCount(key) && map.pull(key);
+                });
+                map.push(data);
+            }
+        }
         if (command = map.command()) {
             v = map.fire(command);
             if (false === v) {
@@ -239,11 +258,33 @@
         bounce(map, e); // Reset all key(s) after 1 second idle.
     }
 
-    function onKeyUp(e) {
-        var $ = this,
+    function onKeyUpOrPutUp(e) {
+        var map = getReference(this),
+            data = e.data,
+            inputType = e.inputType,
             key = e.key,
-            map = getReference($);
-        key && map.pull(key); // Reset current key.
+            type = e.type;
+        if ('keyup' === type) {
+            map[e.altKey ? 'push' : 'pull']('Alt');
+            map[e.ctrlKey ? 'push' : 'pull']('Control');
+            map[e.metaKey ? 'push' : 'pull']('Meta');
+            map[e.shiftKey ? 'push' : 'pull']('Shift');
+            key && map.pull(key);
+        } else {
+            if ('deleteContentBackward' === inputType) {
+                map.pull('Backspace');
+            } else if ('deleteContentForward' === inputType) {
+                map.pull('Delete');
+            } else if ('deleteWordBackward' === inputType) {
+                map.pull('Control').pull('Backspace');
+            } else if ('deleteWordForward' === inputType) {
+                map.pull('Control').pull('Delete');
+            } else if ('insertLineBreak' === inputType) {
+                map.pull('Enter');
+            } else if ('insertText' === inputType && data) {
+                map.pull(data);
+            }
+        }
     }
 
     function setReference(key, value) {
@@ -271,9 +312,11 @@
             return $.keys[key] = of, $;
         });
         $.on('blur', onBlur);
-        $.on('input', onInput);
-        $.on('key.down', onKeyDown);
-        $.on('key.up', onKeyUp);
+        $.on('focus', onFocus);
+        $.on('key.down', onKeyDownOrPutDown);
+        $.on('key.up', onKeyUpOrPutUp);
+        $.on('put.down', onKeyDownOrPutDown);
+        $.on('put.up', onKeyUpOrPutUp);
         return setReference($, map), $;
     }
 
@@ -282,9 +325,11 @@
             map = getReference($);
         map.pull();
         $.off('blur', onBlur);
-        $.off('input', onInput);
-        $.off('key.down', onKeyDown);
-        $.off('key.up', onKeyUp);
+        $.off('focus', onFocus);
+        $.off('key.down', onKeyDownOrPutDown);
+        $.off('key.up', onKeyUpOrPutUp);
+        $.off('put.down', onKeyDownOrPutDown);
+        $.off('put.up', onKeyUpOrPutUp);
         return letReference($), $;
     }
     var index_js = {

package/index.min.js

@@ -23,4 +23,4 @@
  * SOFTWARE.
  *
  */
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):((t="undefined"!=typeof globalThis?globalThis:t||self).TextEditor=t.TextEditor||{},t.TextEditor.Key=n())}(this,(function(){"use strict";var t=function(t){return Array.isArray(t)},n=function(t){return"function"==typeof t},e=function(t,n){return void 0===n&&(n=!0),!(!t||"object"!=typeof t)&&(!n||function(t,n){return!(!t||"object"!=typeof t)&&r(n)&&r(t.constructor)&&n===t.constructor}(t,Object))},r=function(t){return function(t){return void 0!==t}(t)&&!function(t){return null===t}(t)},o=function(t){return"string"==typeof t};function u(t){var n=this;return n.commands={},n.key=null,n.keys={},n.self=t||n,n.set=new Set,n}var i=u.prototype;i.command=function(t){var n=this;if(o(t))return t===n.toString();var e=n.keys[n.toString()];return!!r(e)&&e},i.fire=function(e,u){var i,f,s=this,a=s.self||s;return u=u||[],n(e)||o(e)&&(e=s.commands[e])?(i=e.apply(a,u),f=!0):t(e)&&(t(e[1])&&e[1].forEach((function(t,n){return r(t)&&(u[n]=t)})),(e=s.commands[e[0]])&&(i=e.apply(a,u),f=!0)),f?!r(i)||i:null},i.pull=function(t){var n=this;return n.key=null,r(t)?(n.set.delete(t),n):(n.set=new Set,n)},i.push=function(t){var n=this;return n.set.add(n.key=t,1),n},i.toArray=function(){return Array.from(this.set)},i.toString=function(){return this.toArray().join("-")},Object.defineProperty(u,"name",{value:"Key"});var f,s,a,c=function(t){return t.length},l=function(){for(var n=arguments.length,o=Array(n),u=0;u<n;u++)o[u]=arguments[u];for(var i,f=o.shift(),s=0,a=c(o);s<a;++s)for(var y in o[s])if(r(f[y]))if(t(f[y])&&t(o[s][y])){f[y]=[].concat(f[y]);for(var p=0,h=c(o[s][y]);p<h;++p)i=o[s][y][p],-1===f[y].indexOf(i)&&f[y].push(o[s][y][p])}else e(f[y])&&e(o[s][y])?f[y]=l({},f[y],o[s][y]):f[y]=o[s][y];else f[y]=o[s][y];return f},y=(f=function(t,n){t.pull(),n.altKey&&t.push("Alt"),n.ctrlKey&&t.push("Control"),n.metaKey&&t.push("Meta"),n.shiftKey&&t.push("Shift")},s=1e3,function(){var t=arguments,n=this;a&&clearTimeout(a),a=setTimeout((function(){return f.apply(n,t)}),s)}),p=new WeakMap;function h(t){return p.get(t)||null}function d(t){h(this).pull()}function m(t){var n=t.data,e=h(this);n&&e.pull(n)}function v(t){var n,e,r=t.key,o=h(this);o[t.altKey?"push":"pull"]("Alt"),o[t.ctrlKey?"push":"pull"]("Control"),o[t.metaKey?"push":"pull"]("Meta"),o[t.shiftKey?"push":"pull"]("Shift"),r&&o.push(r),(n=o.command())&&(!1===(e=o.fire(n))?(function(t){t&&t.preventDefault()}(t),function(t){t&&t.stopPropagation()}(t)):null===e&&console.warn("Unknown command:",n)),y(o,t)}function k(t){var n=t.key,e=h(this);n&&e.pull(n)}var K={attach:function(){var t,e,r=this,o=r.constructor._,i=new u(r);return r.commands=l(r.commands=i.commands,r.state.commands||{}),r.keys=l(r.keys=i.keys,r.state.keys||{}),!n(o.command)&&(o.command=function(t,n){return this.commands[t]=n,this}),!n(o.k)&&(o.k=function(t){var n=h(this).toArray();return!1===t?n:n.join(t||"-")}),!n(o.key)&&(o.key=function(t,n){return this.keys[t]=n,this}),r.on("blur",d),r.on("input",m),r.on("key.down",v),r.on("key.up",k),t=r,e=i,p.set(t,e),r},detach:function(){var t,n=this;return h(n).pull(),n.off("blur",d),n.off("input",m),n.off("key.down",v),n.off("key.up",k),t=n,p.delete(t),n},name:"TextEditor.Key"};return K}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t="undefined"!=typeof globalThis?globalThis:t||self).TextEditor=t.TextEditor||{},t.TextEditor.Key=e())}(this,(function(){"use strict";var t=function(t){return Array.isArray(t)},e=function(t){return"function"==typeof t},n=function(t,e){return void 0===e&&(e=!0),!(!t||"object"!=typeof t)&&(!e||function(t,e){return!(!t||"object"!=typeof t)&&r(e)&&r(t.constructor)&&e===t.constructor}(t,Object))},r=function(t){return function(t){return void 0!==t}(t)&&!function(t){return null===t}(t)},o=function(t){return"string"==typeof t};function u(t){var e=this;return e.commands={},e.key=null,e.keys={},e.self=t||e,e.set=new Set,e}var l=u.prototype;l.command=function(t){var e=this;if(o(t))return t===e.toString();var n=e.keys[e.toString()];return!!r(n)&&n},l.fire=function(n,u){var l,i,a=this,s=a.self||a;return u=u||[],e(n)||o(n)&&(n=a.commands[n])?(l=n.apply(s,u),i=!0):t(n)&&(t(n[1])&&n[1].forEach((function(t,e){return r(t)&&(u[e]=t)})),(n=a.commands[n[0]])&&(l=n.apply(s,u),i=!0)),i?!r(l)||l:null},l.pull=function(t){var e=this;return e.key=null,r(t)?(e.set.delete(t),e):(e.set=new Set,e)},l.push=function(t){var e=this;return e.set.add(e.key=t,1),e},l.toArray=function(){return Array.from(this.set)},l.toString=function(){return this.toArray().join("-")},Object.defineProperty(u,"name",{value:"Key"});var i,a,s,p=function(t){return t.length},f=function(){for(var e=arguments.length,o=Array(e),u=0;u<e;u++)o[u]=arguments[u];for(var l,i=o.shift(),a=0,s=p(o);a<s;++a)for(var c in o[a])if(r(i[c]))if(t(i[c])&&t(o[a][c])){i[c]=[].concat(i[c]);for(var d=0,y=p(o[a][c]);d<y;++d)l=o[a][c][d],-1===i[c].indexOf(l)&&i[c].push(o[a][c][d])}else n(i[c])&&n(o[a][c])?i[c]=f({},i[c],o[a][c]):i[c]=o[a][c];else i[c]=o[a][c];return i},c=(i=function(t,e){t.pull(),e.altKey&&t.push("Alt"),e.ctrlKey&&t.push("Control"),e.metaKey&&t.push("Meta"),e.shiftKey&&t.push("Shift")},a=1e3,function(){var t=arguments,e=this;s&&clearTimeout(s),s=setTimeout((function(){return i.apply(e,t)}),a)}),d=new WeakMap;function y(t){return d.get(t)||null}function h(t){y(this).pull()}function m(t){h.call(this,t)}function k(t){var e,n,r=y(this),o=t.data,u=t.inputType,l=t.key;"keydown"===t.type?(r[t.altKey?"push":"pull"]("Alt"),r[t.ctrlKey?"push":"pull"]("Control"),r[t.metaKey?"push":"pull"]("Meta"),r[t.shiftKey?"push":"pull"]("Shift"),l&&r.push(l)):"deleteContentBackward"===u?r.pull().push("Backspace"):"deleteContentForward"===u?r.pull().push("Delete"):"deleteWordBackward"===u?r.pull().push("Control").push("Backspace"):"deleteWordForward"===u?r.pull().push("Control").push("Delete"):"insertLineBreak"===u?r.pull().push("Enter"):"insertText"===u&&o&&(r.toArray().forEach((function(t){return 1===p(t)&&r.pull(t)})),r.push(o)),(e=r.command())&&(!1===(n=r.fire(e))?(function(t){t&&t.preventDefault()}(t),function(t){t&&t.stopPropagation()}(t)):null===n&&console.warn("Unknown command:",e)),c(r,t)}function v(t){var e=y(this),n=t.data,r=t.inputType,o=t.key;"keyup"===t.type?(e[t.altKey?"push":"pull"]("Alt"),e[t.ctrlKey?"push":"pull"]("Control"),e[t.metaKey?"push":"pull"]("Meta"),e[t.shiftKey?"push":"pull"]("Shift"),o&&e.pull(o)):"deleteContentBackward"===r?e.pull("Backspace"):"deleteContentForward"===r?e.pull("Delete"):"deleteWordBackward"===r?e.pull("Control").pull("Backspace"):"deleteWordForward"===r?e.pull("Control").pull("Delete"):"insertLineBreak"===r?e.pull("Enter"):"insertText"===r&&n&&e.pull(n)}var w={attach:function(){var t,n,r=this,o=r.constructor._,l=new u(r);return r.commands=f(r.commands=l.commands,r.state.commands||{}),r.keys=f(r.keys=l.keys,r.state.keys||{}),!e(o.command)&&(o.command=function(t,e){return this.commands[t]=e,this}),!e(o.k)&&(o.k=function(t){var e=y(this).toArray();return!1===t?e:e.join(t||"-")}),!e(o.key)&&(o.key=function(t,e){return this.keys[t]=e,this}),r.on("blur",h),r.on("focus",m),r.on("key.down",k),r.on("key.up",v),r.on("put.down",k),r.on("put.up",v),t=r,n=l,d.set(t,n),r},detach:function(){var t,e=this;return y(e).pull(),e.off("blur",h),e.off("focus",m),e.off("key.down",k),e.off("key.up",v),e.off("put.down",k),e.off("put.up",v),t=e,d.delete(t),e},name:"TextEditor.Key"};return w}));

package/index.mjs

@@ -1,8 +1,10 @@
 import Key from '@taufik-nurrohman/key';
-import {debounce} from '@taufik-nurrohman/tick';
+
+import {debounce, delay} from '@taufik-nurrohman/tick';
 import {fromStates} from '@taufik-nurrohman/from';
-import {isFunction, isSet} from '@taufik-nurrohman/is';
+import {isFunction, isSet, isString} from '@taufik-nurrohman/is';
 import {offEventDefault, offEventPropagation} from '@taufik-nurrohman/event';
+import {toCount} from '@taufik-nurrohman/to';
 
 const bounce = debounce((map, e) => {
     // Remove all key(s)
@@ -31,24 +33,38 @@ function onBlur(e) {
     map.pull(); // Reset all key(s)
 }
 
-function onInput(e) {
-    let $ = this,
-        key = e.data,
-        map = getReference($);
-    key && map.pull(key);
+function onFocus(e) {
+    onBlur.call(this, e);
 }
 
-function onKeyDown(e) {
-    let $ = this, command, v,
-        key = e.key,
-        map = getReference($);
-    // Make the `Alt`, `Control`, `Meta`, and `Shift` key(s) sticky (does not require the user to release all key(s) first to repeat or change the current key combination).
-    map[e.altKey ? 'push' : 'pull']('Alt');
-    map[e.ctrlKey ? 'push' : 'pull']('Control');
-    map[e.metaKey ? 'push' : 'pull']('Meta');
-    map[e.shiftKey ? 'push' : 'pull']('Shift');
-    // Add the actual key to the queue. Don’t worry, this will not mistakenly add a key that already exists in the queue.
-    key && map.push(key);
+function onKeyDownOrPutDown(e) {
+    let map = getReference(this), command, v,
+        {data, inputType, key, type} = e;
+    if ('keydown' === type) {
+        // Make the `Alt`, `Control`, `Meta`, and `Shift` key(s) sticky (does not require the user to release all key(s) first to repeat or change the current key combination).
+        map[e.altKey ? 'push' : 'pull']('Alt');
+        map[e.ctrlKey ? 'push' : 'pull']('Control');
+        map[e.metaKey ? 'push' : 'pull']('Meta');
+        map[e.shiftKey ? 'push' : 'pull']('Shift');
+        // Add the actual key to the queue. Don’t worry, this will not mistakenly add a key that already exists in the queue.
+        key && map.push(key);
+    } else {
+        if ('deleteContentBackward' === inputType) {
+            map.pull().push('Backspace'); // Simulate `Backspace` key
+        } else if ('deleteContentForward' === inputType) {
+            map.pull().push('Delete'); // Simulate `Delete` key
+        } else if ('deleteWordBackward' === inputType) {
+            map.pull().push('Control').push('Backspace'); // Simulate `Control-Backspace` keys
+        } else if ('deleteWordForward' === inputType) {
+            map.pull().push('Control').push('Delete'); // Simulate `Control-Delete` keys
+        } else if ('insertLineBreak' === inputType) {
+            map.pull().push('Enter'); // Simulate `Enter` key
+        } else if ('insertText' === inputType && data) {
+            // One character at a time
+            map.toArray().forEach(key => 1 === toCount(key) && map.pull(key));
+            map.push(data);
+        }
+    }
     if (command = map.command()) {
         v = map.fire(command);
         if (false === v) {
@@ -61,11 +77,30 @@ function onKeyDown(e) {
     bounce(map, e); // Reset all key(s) after 1 second idle.
 }
 
-function onKeyUp(e) {
-    let $ = this,
-        key = e.key,
-        map = getReference($);
-    key && map.pull(key); // Reset current key.
+function onKeyUpOrPutUp(e) {
+    let map = getReference(this),
+        {data, inputType, key, type} = e;
+    if ('keyup' === type) {
+        map[e.altKey ? 'push' : 'pull']('Alt');
+        map[e.ctrlKey ? 'push' : 'pull']('Control');
+        map[e.metaKey ? 'push' : 'pull']('Meta');
+        map[e.shiftKey ? 'push' : 'pull']('Shift');
+        key && map.pull(key);
+    } else {
+        if ('deleteContentBackward' === inputType) {
+            map.pull('Backspace');
+        } else if ('deleteContentForward' === inputType) {
+            map.pull('Delete');
+        } else if ('deleteWordBackward' === inputType) {
+            map.pull('Control').pull('Backspace');
+        } else if ('deleteWordForward' === inputType) {
+            map.pull('Control').pull('Delete');
+        } else if ('insertLineBreak' === inputType) {
+            map.pull('Enter');
+        } else if ('insertText' === inputType && data) {
+            map.pull(data);
+        }
+    }
 }
 
 function setReference(key, value) {
@@ -93,9 +128,11 @@ function attach() {
         return ($.keys[key] = of), $;
     });
     $.on('blur', onBlur);
-    $.on('input', onInput);
-    $.on('key.down', onKeyDown);
-    $.on('key.up', onKeyUp);
+    $.on('focus', onFocus);
+    $.on('key.down', onKeyDownOrPutDown);
+    $.on('key.up', onKeyUpOrPutUp);
+    $.on('put.down', onKeyDownOrPutDown);
+    $.on('put.up', onKeyUpOrPutUp);
     return setReference($, map), $;
 }
 
@@ -104,9 +141,11 @@ function detach() {
         map = getReference($);
     map.pull();
     $.off('blur', onBlur);
-    $.off('input', onInput);
-    $.off('key.down', onKeyDown);
-    $.off('key.up', onKeyUp);
+    $.off('focus', onFocus);
+    $.off('key.down', onKeyDownOrPutDown);
+    $.off('key.up', onKeyUpOrPutUp);
+    $.off('put.down', onKeyDownOrPutDown);
+    $.off('put.up', onKeyUpOrPutUp);
     return letReference($), $;
 }
 

package/package.json

@@ -8,7 +8,8 @@
     "@taufik-nurrohman/is": "*",
     "@taufik-nurrohman/key": "*",
     "@taufik-nurrohman/text-editor": "*",
-    "@taufik-nurrohman/tick": "*"
+    "@taufik-nurrohman/tick": "*",
+    "@taufik-nurrohman/to": "*"
   },
   "description": "Provides a feature to easily interact with the keyboard keys.",
   "devDependencies": {
@@ -46,5 +47,5 @@
   "scripts": {
     "pack": "pack --clean=false --from=.factory --js-format=umd --js-name=TextEditor.Key --js-top='%(js.license)' --mjs=true --to=."
   },
-  "version": "1.0.10"
+  "version": "1.0.12"
 }