quill-placeholder-autocomplete-module - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/quill-placeholder-autocomplete-module.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.QuillPlaceholderAutocomplete=t():e.QuillPlaceholderAutocomplete=t()}("undefined"!=typeof self?self:this,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){n(1),e.exports=n(2)},function(e,t){},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,i=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),r=n(3),s=n(4),l=(o=s)&&o.__esModule?o:{default:o};t.default=function(e){var t=e.import("delta");return e.register("formats/suggest",(0,l.default)(e)),function(){function n(e,t){var o=t.onClose,i=t.onOpen,s=t.getPlaceholders,l=t.container;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.quill=e,this.onClose=o,this.onOpen=i,this.getPlaceholders=s,"string"==typeof l?this.container=this.quill.container.parentNode.querySelector(l):void 0===l?(this.container=(0,r.h)("ul",{}),this.quill.container.parentNode.appendChild(this.container)):this.container=l,this.container.classList.add("ql-autocomplete-menu","completions"),this.container.style.position="absolute",this.container.style.display="none",this.onSelectionChange=this.maybeUnfocus.bind(this),this.onTextChange=this.update.bind(this),this.open=!1,this.quill.suggestsDialogOpen=!1,this.hashIndex=null,this.focusedButton=null,this.buttons=[],this.placeholders=[],this.altKeyDown=!1,e.keyboard.addBinding({key:51,altKey:!0,ctrlKey:null},this.onHashKey.bind(this)),e.keyboard.addBinding({key:40,collapsed:!0,format:["suggest"]},this.handleArrow.bind(this)),e.keyboard.addBinding({key:27,collapsed:null,format:["suggest"]},this.handleEscape.bind(this)),e.suggestHandler=this.handleEnterTab.bind(this)}return i(n,[{key:"onHashKey",value:function(t,n){if(this.open)return!0;t.length>0&&this.quill.deleteText(t.index,t.length,e.sources.USER),this.quill.insertText(t.index,"#","suggest","@@placeholder",e.sources.USER);var o=this.quill.getBounds(t.index);this.quill.setSelection(t.index+1,e.sources.SILENT),this.hashIndex=t.index,this.container.style.left=o.left+"px",this.container.style.top=o.top+o.height+"px",this.open=!0,this.quill.suggestsDialogOpen=!0,this.quill.on("text-change",this.onTextChange),this.quill.once("selection-change",this.onSelectionChange),this.update(),this.onOpen&&this.onOpen()}},{key:"handleArrow",value:function(){if(!this.open)return!0;this.buttons[0].focus()}},{key:"handleEnterTab",value:function(){if(!this.open)return!0;this.close(this.placeholders[0])}},{key:"handleEscape",value:function(){if(!this.open)return!0;this.close()}},{key:"emptyCompletionsContainer",value:function(){for(;this.container.firstChild;)this.container.removeChild(this.container.firstChild)}},{key:"update",value:function(){var e=this,t=this.quill.getSelection().index;if(this.hashIndex>=t)return this.close(null);this.originalQuery=this.quill.getText(this.hashIndex+1,t-this.hashIndex-1),this.query=this.originalQuery.toLowerCase(),this.placeholders=this.getPlaceholders().filter(function(t){return t.label.toLowerCase().startsWith(e.query)}).sort(function(e,t){return e.label>t.label}),this.renderCompletions(this.placeholders)}},{key:"maybeUnfocus",value:function(){this.container.querySelector("*:focus")||this.close(null)}},{key:"renderCompletions",value:function(e){var t=this;this.emptyCompletionsContainer();var n=Array(e.length);this.buttons=n;e.forEach(function(e,o){var i=(0,r.h)("li",{},(0,r.h)("button",{type:"button"},(0,r.h)("span",{className:"matched"},"#"+e.label.slice(0,t.query.length)),(0,r.h)("span",{className:"unmatched"},e.label.slice(t.query.length))));t.container.appendChild(i),n[o]=i.firstChild,n[o].addEventListener("keydown",function(e,o){return function(i){"ArrowDown"===i.key||40===i.keyCode?(i.preventDefault(),n[Math.min(n.length-1,e+1)].focus()):"ArrowUp"===i.key||38===i.keyCode?(i.preventDefault(),n[Math.max(0,e-1)].focus()):"Enter"===i.key||13===i.keyCode||" "===i.key||32===i.keyCode||"Tab"===i.key||9===i.keyCode?(i.preventDefault(),t.close(o)):"Escape"!==i.key&&27!==i.keyCode||(i.preventDefault(),t.close())}}(o,e)),n[o].addEventListener("mousedown",function(){return t.close(e)}),n[o].addEventListener("focus",function(){return t.focusedButton=o}),n[o].addEventListener("unfocus",function(){return t.focusedButton=null})}),this.container.style.display="block"}},{key:"close",value:function(n){this.container.style.display="none",this.emptyCompletionsContainer(),this.quill.off("selection-change",this.onSelectionChange),this.quill.off("text-change",this.onTextChange);var o=(new t).retain(this.hashIndex).delete(this.query.length+1);this.quill.updateContents(o,e.sources.USER),n&&(this.quill.insertEmbed(this.hashIndex,"placeholder",n,e.sources.USER),this.quill.setSelection(this.hashIndex+1,0,e.sources.SILENT)),this.quill.focus(),this.open=!1,this.quill.suggestsDialogOpen=!1,this.onClose&&this.onClose(n||null)}}]),n}()}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.h=function(e,t){for(var n=arguments.length,o=Array(n>2?n-2:0),i=2;i<n;i++)o[i-2]=arguments[i];var r=document.createElement(e);return Object.keys(t).forEach(function(e){return r[e]=t[e]}),o.forEach(function(e){"string"==typeof e&&(e=document.createTextNode(e)),r.appendChild(e)}),r}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=function e(t,n,o){null===t&&(t=Function.prototype);var i=Object.getOwnPropertyDescriptor(t,n);if(void 0===i){var r=Object.getPrototypeOf(t);return null===r?void 0:e(r,n,o)}if("value"in i)return i.value;var s=i.get;return void 0!==s?s.call(o):void 0};t.default=function(e){var t=e.import("blots/inline"),n=function(e){function n(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(n,t),o(n,[{key:"format",value:function(e,t){"suggest"===e&&t?this.domNode.setAttribute("data-id",t):i(n.prototype.__proto__||Object.getPrototypeOf(n.prototype),"format",this).call(this,e,t)}},{key:"formats",value:function(){var e=i(n.prototype.__proto__||Object.getPrototypeOf(n.prototype),"formats",this).call(this);return e.suggest=n.formats(this.domNode),e}}],[{key:"create",value:function(e){var t=i(n.__proto__||Object.getPrototypeOf(n),"create",this).call(this);return t.dataset.id=e,t}},{key:"formats",value:function(e){return e.dataset.id}}]),n}();return n.blotName="suggest",n.tagName="SPAN",n.className="suggest",n}}]).default});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.QuillPlaceholderAutocomplete=t():e.QuillPlaceholderAutocomplete=t()}("undefined"!=typeof self?self:this,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){n(1),e.exports=n(2)},function(e,t){},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,i=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),r=n(3),s=n(4),l=(o=s)&&o.__esModule?o:{default:o};t.default=function(e){var t=e.import("delta");return e.register("formats/suggest",(0,l.default)(e)),function(){function n(e,t){var o=this,i=t.onClose,s=t.onOpen,l=t.getPlaceholders,a=t.container;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.quill=e,this.onClose=i,this.onOpen=s,this.getPlaceholders=l,"string"==typeof a?this.container=this.quill.container.parentNode.querySelector(a):void 0===a?(this.container=(0,r.h)("ul",{}),this.quill.container.parentNode.appendChild(this.container)):this.container=a,this.container.classList.add("ql-autocomplete-menu","completions"),this.container.style.position="absolute",this.container.style.display="none",this.onSelectionChange=this.maybeUnfocus.bind(this),this.onTextChange=this.update.bind(this),this.open=!1,this.quill.suggestsDialogOpen=!1,this.hashIndex=null,this.focusedButton=null,this.buttons=[],this.placeholders=[],this.toolbarHeight=0,e.keyboard.addBinding({key:51,altKey:!0,ctrlKey:null},this.onHashKey.bind(this)),e.root.addEventListener("keydown",function(e){e.defaultPrevented||"#"===e.key&&(o.toolbarHeight||(o.toolbarHeight=o.quill.getModule("toolbar").container.offsetHeight),o.onHashKey(o.quill.getSelection()),e.preventDefault())},!0),e.keyboard.addBinding({key:40,collapsed:!0,format:["suggest"]},this.handleArrow.bind(this)),e.keyboard.addBinding({key:27,collapsed:null,format:["suggest"]},this.handleEscape.bind(this)),e.suggestHandler=this.handleEnterTab.bind(this)}return i(n,[{key:"onHashKey",value:function(t,n){if(this.open)return!0;t.length>0&&this.quill.deleteText(t.index,t.length,e.sources.USER),this.quill.insertText(t.index,"#","suggest","@@placeholder",e.sources.USER);var o=this.quill.getBounds(t.index);this.quill.setSelection(t.index+1,e.sources.SILENT),this.hashIndex=t.index,this.container.style.left=o.left+"px",this.container.style.top=o.top+o.height+this.toolbarHeight+2+"px",this.open=!0,this.quill.suggestsDialogOpen=!0,this.quill.on("text-change",this.onTextChange),this.quill.once("selection-change",this.onSelectionChange),this.update(),this.onOpen&&this.onOpen()}},{key:"handleArrow",value:function(){if(!this.open)return!0;this.buttons[0].focus()}},{key:"handleEnterTab",value:function(){if(!this.open)return!0;this.close(this.placeholders[0])}},{key:"handleEscape",value:function(){if(!this.open)return!0;this.close()}},{key:"emptyCompletionsContainer",value:function(){for(;this.container.firstChild;)this.container.removeChild(this.container.firstChild)}},{key:"update",value:function(){var e=this,t=this.quill.getSelection().index;if(this.hashIndex>=t)return this.close(null);this.originalQuery=this.quill.getText(this.hashIndex+1,t-this.hashIndex-1),this.query=this.originalQuery.toLowerCase(),this.placeholders=this.getPlaceholders().filter(function(t){return t.label.toLowerCase().startsWith(e.query)}).sort(function(e,t){return e.label>t.label}),this.renderCompletions(this.placeholders)}},{key:"maybeUnfocus",value:function(){this.container.querySelector("*:focus")||this.close(null)}},{key:"renderCompletions",value:function(e){var t=this;this.emptyCompletionsContainer();var n=Array(e.length);this.buttons=n;e.forEach(function(e,o){var i=(0,r.h)("li",{},(0,r.h)("button",{type:"button"},(0,r.h)("span",{className:"matched"},"#"+e.label.slice(0,t.query.length)),(0,r.h)("span",{className:"unmatched"},e.label.slice(t.query.length))));t.container.appendChild(i),n[o]=i.firstChild,n[o].addEventListener("keydown",function(e,o){return function(i){"ArrowDown"===i.key||40===i.keyCode?(i.preventDefault(),n[Math.min(n.length-1,e+1)].focus()):"ArrowUp"===i.key||38===i.keyCode?(i.preventDefault(),n[Math.max(0,e-1)].focus()):"Enter"===i.key||13===i.keyCode||" "===i.key||32===i.keyCode||"Tab"===i.key||9===i.keyCode?(i.preventDefault(),t.close(o)):"Escape"!==i.key&&27!==i.keyCode||(i.preventDefault(),t.close())}}(o,e)),n[o].addEventListener("mousedown",function(){return t.close(e)}),n[o].addEventListener("focus",function(){return t.focusedButton=o}),n[o].addEventListener("unfocus",function(){return t.focusedButton=null})}),this.container.style.display="block"}},{key:"close",value:function(n){this.container.style.display="none",this.emptyCompletionsContainer(),this.quill.off("selection-change",this.onSelectionChange),this.quill.off("text-change",this.onTextChange);var o=(new t).retain(this.hashIndex).delete(this.query.length+1);this.quill.updateContents(o,e.sources.USER),n&&(this.quill.insertEmbed(this.hashIndex,"placeholder",n,e.sources.USER),this.quill.setSelection(this.hashIndex+1,0,e.sources.SILENT)),this.quill.focus(),this.open=!1,this.quill.suggestsDialogOpen=!1,this.onClose&&this.onClose(n||null)}}]),n}()}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.h=function(e,t){for(var n=arguments.length,o=Array(n>2?n-2:0),i=2;i<n;i++)o[i-2]=arguments[i];var r=document.createElement(e);return Object.keys(t).forEach(function(e){return r[e]=t[e]}),o.forEach(function(e){"string"==typeof e&&(e=document.createTextNode(e)),r.appendChild(e)}),r}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=function e(t,n,o){null===t&&(t=Function.prototype);var i=Object.getOwnPropertyDescriptor(t,n);if(void 0===i){var r=Object.getPrototypeOf(t);return null===r?void 0:e(r,n,o)}if("value"in i)return i.value;var s=i.get;return void 0!==s?s.call(o):void 0};t.default=function(e){var t=e.import("blots/inline"),n=function(e){function n(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(n,t),o(n,[{key:"format",value:function(e,t){"suggest"===e&&t?this.domNode.setAttribute("data-id",t):i(n.prototype.__proto__||Object.getPrototypeOf(n.prototype),"format",this).call(this,e,t)}},{key:"formats",value:function(){var e=i(n.prototype.__proto__||Object.getPrototypeOf(n.prototype),"formats",this).call(this);return e.suggest=n.formats(this.domNode),e}}],[{key:"create",value:function(e){var t=i(n.__proto__||Object.getPrototypeOf(n),"create",this).call(this);return t.dataset.id=e,t}},{key:"formats",value:function(e){return e.dataset.id}}]),n}();return n.blotName="suggest",n.tagName="SPAN",n.className="suggest",n}}]).default});

package.json

 {
   "name": "quill-placeholder-autocomplete-module",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "brings autocomplete to Quill placeholder module",
@@ -5,0 +5,0 @@ "main": "dist/quill-placeholder-autocomplete-module.min.js",

src/autocomplete-module.js

@@ -35,3 +35,2 @@ import { h } from './utils';
       this.container.classList.add('ql-autocomplete-menu', 'completions');
-
       this.container.style.position = 'absolute';
@@ -49,13 +48,26 @@ this.container.style.display = 'none';
       this.placeholders = [];
-      this.altKeyDown = false;
+      this.toolbarHeight = 0;
 
+      // TODO: Once Quill supports using event.key (issue #1091) use that instead of alt-3
       quill.keyboard.addBinding({
-        // TODO: Once Quill supports using event.key (issue #1091) use that instead of alt-3
         key: 51,  // '3' keyCode
-        // intercept AltGr in all browser except IE8
-        // source: https://stackoverflow.com/questions/10657346/detect-alt-gr-alt-graph-modifier-on-key-press
         altKey: true,
-        ctrlKey: null // more accepting
+        ctrlKey: null // both
       }, this.onHashKey.bind(this));
 
+      quill.root.addEventListener('keydown', (event) => {
+        if (event.defaultPrevented)
+          return; // Do nothing if the event was already processed
+
+        if (event.key === '#') {
+          if (!this.toolbarHeight)
+            this.toolbarHeight = this.quill.getModule('toolbar').container.offsetHeight;
+          this.onHashKey(this.quill.getSelection());
+        } else
+          return; // Quit when this doesn't handle the key event.
+
+        // Cancel the default action to avoid it being handled twice
+        event.preventDefault();
+      }, true);
+
       quill.keyboard.addBinding({
@@ -84,3 +96,3 @@ key: 40,  // ArrowDown
      */
-    onHashKey(range, context) {
+    onHashKey(range, _) {
       // prevent from opening twice
@@ -101,3 +113,3 @@ // NOTE: returning true stops event propagation in Quill
       this.container.style.left = hashSignBounds.left + 'px';
-      this.container.style.top = hashSignBounds.top + hashSignBounds.height + 'px';
+      this.container.style.top = hashSignBounds.top + hashSignBounds.height + this.toolbarHeight + 2 + 'px';
       this.open = true;
@@ -104,0 +116,0 @@ this.quill.suggestsDialogOpen = true;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

426697

increased by53.51%

Number of package files

16

increased by6.67%

Lines of code

7036

increased by0.14%

No dependency changes