editorjs-layout - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.EditorJSLayout=e():t.EditorJSLayout=e()}(self,(function(){return(()=>{"use strict";var t={211:(t,e,n)=>{n.r(e),n.d(e,{LayoutBlockTool:()=>C});class o extends Error{constructor(...t){super(...t),Error.captureStackTrace&&Error.captureStackTrace(this,o),this.name="EditorJSLayoutError"}}var r,i=new Uint8Array(16);function a(){if(!r&&!(r="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return r(i)}const s=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i,d=function(t){return"string"==typeof t&&s.test(t)};for(var c=[],u=0;u<256;++u)c.push((u+256).toString(16).substr(1));const l=function(t,e,n){var o=(t=t||{}).random||(t.rng||a)();if(o[6]=15&o[6]|64,o[8]=63&o[8]|128,e){n=n||0;for(var r=0;r<16;++r)e[n+r]=o[r];return e}return function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=(c[t[e+0]]+c[t[e+1]]+c[t[e+2]]+c[t[e+3]]+"-"+c[t[e+4]]+c[t[e+5]]+"-"+c[t[e+6]]+c[t[e+7]]+"-"+c[t[e+8]]+c[t[e+9]]+"-"+c[t[e+10]]+c[t[e+11]]+c[t[e+12]]+c[t[e+13]]+c[t[e+14]]+c[t[e+15]]).toLowerCase();if(!d(n))throw TypeError("Stringified UUID is invalid");return n}(o)};const p=({EditorJS:t,data:e,dispatchData:n,editorJSConfig:o,itemContentId:r})=>{const i=l(),a=document.createElement("div");return a.id=i,a.style.cursor="pointer",a.addEventListener("click",(()=>{const i=(({EditorJS:t,data:e,editorJSConfig:n,onClose:o})=>{const r=document.createElement("dialog");r.style.maxWidth="960px",r.style.top="32px",r.style.width="calc(100% - 64px)";const i=document.createElement("div"),a=l();i.id=a,r.append(i);const s=new t(Object.assign(Object.assign({},n),{holder:a,data:e})),d=()=>{return t=void 0,e=void 0,i=function*(){const t=yield s.save();s.destroy(),r.removeEventListener("close",d),r.remove(),null==o||o({editorJSData:t})},new((n=void 0)||(n=Promise))((function(o,r){function a(t){try{d(i.next(t))}catch(t){r(t)}}function s(t){try{d(i.throw(t))}catch(t){r(t)}}function d(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,s)}d((i=i.apply(t,e||[])).next())}));var t,e,n,i};return r.addEventListener("close",d),r})({EditorJS:t,data:e,editorJSConfig:o,onClose:({editorJSData:t})=>{return e=void 0,o=void 0,a=function*(){return n((({itemContent:e,layout:n})=>({itemContent:Object.assign(Object.assign({},e),{[r]:{blocks:t.blocks}}),layout:n})))},new((i=void 0)||(i=Promise))((function(t,n){function r(t){try{d(a.next(t))}catch(t){n(t)}}function s(t){try{d(a.throw(t))}catch(t){n(t)}}function d(e){var n;e.done?t(e.value):(n=e.value,n instanceof i?n:new i((function(t){t(n)}))).then(r,s)}d((a=a.apply(e,o||[])).next())}));var e,o,i,a}});document.body.append(i),i.showModal()})),new t(Object.assign(Object.assign({},o),{holder:i,data:e,minHeight:0,readOnly:!0})),a},h=({EditorJS:t,data:e,dispatchData:n,editorJSConfig:r,itemContentData:i})=>{const a=document.createElement("div");return a.id=e.id,a.className=e.className,a.style.cssText=e.style,e.children.forEach((e=>{let s;switch(e.type){case"container":s=h({EditorJS:t,data:e,dispatchData:n,editorJSConfig:r,itemContentData:i});break;case"item":s=(({EditorJS:t,data:e,dispatchData:n,editorJSConfig:o,itemContentData:r})=>{var i;const a=document.createElement("div");a.id=e.id,a.className=e.className,a.style.cssText=e.style;const s=null!==(i=r[e.itemContentId])&&void 0!==i?i:{blocks:[]};return a.append(p({EditorJS:t,data:s,dispatchData:n,editorJSConfig:o,itemContentId:e.itemContentId})),a})({EditorJS:t,data:e,dispatchData:n,editorJSConfig:r,itemContentData:i});break;default:throw new o}a.append(s)})),a};var f,y,m,v,g,w=function(t,e,n){if(!e.has(t))throw new TypeError("attempted to set private field on non-instance");return e.set(t,n),n},S=function(t,e){if(!e.has(t))throw new TypeError("attempted to get private field on non-instance");return e.get(t)};class C{constructor({config:t,data:e}){f.set(this,void 0),y.set(this,void 0),m.set(this,void 0),v.set(this,void 0),g.set(this,(t=>{const e=t({itemContent:S(this,m),layout:S(this,v)});w(this,m,e.itemContent),w(this,v,e.layout),this.renderWrapper()})),w(this,y,document.createElement("div")),w(this,m,{}),w(this,v,{type:"container",id:"",className:"",style:"",children:[]}),t&&"EditorJS"in t&&(w(this,f,t),w(this,m,t.initialData.itemContent),t.initialData.layout&&w(this,v,t.initialData.layout)),e&&"itemContent"in e&&(w(this,m,e.itemContent),e.layout&&w(this,v,e.layout))}static get shortcut(){return"CMD+L"}static get toolbox(){return{icon:'\n        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512">\n          <rect x="48" y="48" width="176" height="176" rx="20" ry="20" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>\n          <rect x="288" y="48" width="176" height="176" rx="20" ry="20" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>\n          <rect x="48" y="288" width="176" height="176" rx="20" ry="20" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>\n          <rect x="288" y="288" width="176" height="176" rx="20" ry="20" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>\n        </svg>\n      ',title:"Layout"}}render(){return this.renderWrapper(),S(this,y)}save(){return{itemContent:S(this,m),layout:S(this,f).enableLayoutSaving?S(this,v):void 0}}validate(t){return!0}renderWrapper(){S(this,y).innerHTML="",S(this,y).append(h({EditorJS:S(this,f).EditorJS,data:S(this,v),dispatchData:S(this,g),editorJSConfig:S(this,f).editorJSConfig,itemContentData:S(this,m)}))}}f=new WeakMap,y=new WeakMap,m=new WeakMap,v=new WeakMap,g=new WeakMap}},e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={exports:{}};return t[o](r,r.exports,n),r.exports}return n.d=(t,e)=>{for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n(211)})()}));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.EditorJSLayout=e():t.EditorJSLayout=e()}(self,(function(){return(()=>{"use strict";var t={211:(t,e,n)=>{n.r(e),n.d(e,{LayoutBlockTool:()=>C});class o extends Error{constructor(...t){super(...t),Error.captureStackTrace&&Error.captureStackTrace(this,o),this.name="EditorJSLayoutError"}}var i,r=new Uint8Array(16);function a(){if(!i&&!(i="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return i(r)}const s=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i,d=function(t){return"string"==typeof t&&s.test(t)};for(var c=[],l=0;l<256;++l)c.push((l+256).toString(16).substr(1));const u=function(t,e,n){var o=(t=t||{}).random||(t.rng||a)();if(o[6]=15&o[6]|64,o[8]=63&o[8]|128,e){n=n||0;for(var i=0;i<16;++i)e[n+i]=o[i];return e}return function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=(c[t[e+0]]+c[t[e+1]]+c[t[e+2]]+c[t[e+3]]+"-"+c[t[e+4]]+c[t[e+5]]+"-"+c[t[e+6]]+c[t[e+7]]+"-"+c[t[e+8]]+c[t[e+9]]+"-"+c[t[e+10]]+c[t[e+11]]+c[t[e+12]]+c[t[e+13]]+c[t[e+14]]+c[t[e+15]]).toLowerCase();if(!d(n))throw TypeError("Stringified UUID is invalid");return n}(o)};const p=({EditorJS:t,data:e,dispatchData:n,editorJSConfig:o,itemContentId:i})=>{const r=u(),a=document.createElement("div");return a.id=r,a.style.cursor="pointer",a.addEventListener("click",(()=>{const r=(({EditorJS:t,data:e,editorJSConfig:n,onClose:o})=>{const i=document.createElement("dialog");i.style.maxWidth="960px",i.style.padding="0",i.style.top="32px",i.style.width="calc(100% - 64px)";const r=document.createElement("div"),a=u();r.id=a,i.append(r);const s=new t(Object.assign(Object.assign({},n),{holder:a,data:e})),d=t=>{t.target instanceof Node&&t.target.isEqualNode(i)&&i.close()};i.addEventListener("click",d);const c=()=>{return t=void 0,e=void 0,r=function*(){const t=yield s.save();s.destroy(),i.removeEventListener("click",d),i.removeEventListener("close",c),i.remove(),null==o||o({editorJSData:t})},new((n=void 0)||(n=Promise))((function(o,i){function a(t){try{d(r.next(t))}catch(t){i(t)}}function s(t){try{d(r.throw(t))}catch(t){i(t)}}function d(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,s)}d((r=r.apply(t,e||[])).next())}));var t,e,n,r};return i.addEventListener("close",c),i})({EditorJS:t,data:e,editorJSConfig:o,onClose:({editorJSData:t})=>{return e=void 0,o=void 0,a=function*(){return n((({itemContent:e,layout:n})=>({itemContent:Object.assign(Object.assign({},e),{[i]:{blocks:t.blocks}}),layout:n})))},new((r=void 0)||(r=Promise))((function(t,n){function i(t){try{d(a.next(t))}catch(t){n(t)}}function s(t){try{d(a.throw(t))}catch(t){n(t)}}function d(e){var n;e.done?t(e.value):(n=e.value,n instanceof r?n:new r((function(t){t(n)}))).then(i,s)}d((a=a.apply(e,o||[])).next())}));var e,o,r,a}});document.body.append(r),r.showModal()})),new t(Object.assign(Object.assign({},o),{holder:r,data:e,minHeight:0,readOnly:!0})),a},h=({EditorJS:t,data:e,dispatchData:n,editorJSConfig:i,itemContentData:r})=>{const a=document.createElement("div");return a.id=e.id,a.className=e.className,a.style.cssText=e.style,e.children.forEach((e=>{let s;switch(e.type){case"container":s=h({EditorJS:t,data:e,dispatchData:n,editorJSConfig:i,itemContentData:r});break;case"item":s=(({EditorJS:t,data:e,dispatchData:n,editorJSConfig:o,itemContentData:i})=>{var r;const a=document.createElement("div");a.id=e.id,a.className=e.className,a.style.cssText=e.style;const s=null!==(r=i[e.itemContentId])&&void 0!==r?r:{blocks:[]};return a.append(p({EditorJS:t,data:s,dispatchData:n,editorJSConfig:o,itemContentId:e.itemContentId})),a})({EditorJS:t,data:e,dispatchData:n,editorJSConfig:i,itemContentData:r});break;default:throw new o}a.append(s)})),a};var f,y,m,v,g,w=function(t,e,n){if(!e.has(t))throw new TypeError("attempted to set private field on non-instance");return e.set(t,n),n},S=function(t,e){if(!e.has(t))throw new TypeError("attempted to get private field on non-instance");return e.get(t)};class C{constructor({config:t,data:e}){f.set(this,void 0),y.set(this,void 0),m.set(this,void 0),v.set(this,void 0),g.set(this,(t=>{const e=t({itemContent:S(this,m),layout:S(this,v)});w(this,m,e.itemContent),w(this,v,e.layout),this.renderWrapper()})),w(this,y,document.createElement("div")),w(this,m,{}),w(this,v,{type:"container",id:"",className:"",style:"",children:[]}),t&&"EditorJS"in t&&(w(this,f,t),w(this,m,t.initialData.itemContent),t.initialData.layout&&w(this,v,t.initialData.layout)),e&&"itemContent"in e&&(w(this,m,e.itemContent),e.layout&&w(this,v,e.layout))}static get shortcut(){return"CMD+L"}static get toolbox(){return{icon:'\n        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512">\n          <rect x="48" y="48" width="176" height="176" rx="20" ry="20" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>\n          <rect x="288" y="48" width="176" height="176" rx="20" ry="20" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>\n          <rect x="48" y="288" width="176" height="176" rx="20" ry="20" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>\n          <rect x="288" y="288" width="176" height="176" rx="20" ry="20" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>\n        </svg>\n      ',title:"Layout"}}render(){return this.renderWrapper(),S(this,y)}save(){return{itemContent:S(this,m),layout:S(this,f).enableLayoutSaving?S(this,v):void 0}}validate(t){return!0}renderWrapper(){S(this,y).innerHTML="",S(this,y).append(h({EditorJS:S(this,f).EditorJS,data:S(this,v),dispatchData:S(this,g),editorJSConfig:S(this,f).editorJSConfig,itemContentData:S(this,m)}))}}f=new WeakMap,y=new WeakMap,m=new WeakMap,v=new WeakMap,g=new WeakMap}},e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={exports:{}};return t[o](i,i.exports,n),i.exports}return n.d=(t,e)=>{for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n(211)})()}));

package.json

 {
   "name": "editorjs-layout",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Layout block tool for Editor.js. ",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -49,2 +49,25 @@ <!-- markdownlint-disable first-line-h1 -->
 
+## &lt;dialog&gt; polyfill
+
+editorjs-layout uses `<dialog>` element.
+[GoogleChrome/dialog-polyfill](https://github.com/GoogleChrome/dialog-polyfill) can be used to improve the browser compatibility.
+
+## Build
+
+```sh
+yarn webpack
+```
+
+## Format
+
+```sh
+yarn fix
+```
+
+## Run tests
+
+```sh
+yarn test
+```
+
 ## Author
@@ -51,0 +74,0 @@

src/itemContent/createDialog.ts

@@ -19,2 +19,4 @@ import type { OutputData } from "@editorjs/editorjs";
   dialog.style.maxWidth = "960px";
+  // Make be not able to click inner
+  dialog.style.padding = "0";
   dialog.style.top = "32px";
@@ -36,2 +38,12 @@ dialog.style.width = "calc(100% - 64px)";
 
+  const handleDialogClick = (event: MouseEvent) => {
+    if (!(event.target instanceof Node) || !event.target.isEqualNode(dialog)) {
+      return;
+    }
+
+    dialog.close();
+  };
+
+  dialog.addEventListener("click", handleDialogClick);
+
   const handleDialogClose = async () => {
@@ -42,2 +54,3 @@ const editorJSData = await editorJS.save();
 
+    dialog.removeEventListener("click", handleDialogClick);
     dialog.removeEventListener("close", handleDialogClose);
@@ -44,0 +57,0 @@ dialog.remove();

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

679552

increased by0.12%

Lines of code

1540

increased by0.65%

Number of lines in readme file

91

increased by33.82%

No dependency changes