editorjs-inspector - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

dist/index.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.EditorJSInspector=t():e.EditorJSInspector=t()}(window,(function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return 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){"use strict";n.r(t);class o extends Error{constructor(...e){super(...e),Error.captureStackTrace&&Error.captureStackTrace(this,o),this.name="EditorJSInspectorError"}}var r,i,s,a,c=o,l=function(e,t,n){if(!t.has(e))throw new TypeError("attempted to set private field on non-instance");return t.set(e,n),n},d=function(e,t){if(!t.has(e))throw new TypeError("attempted to get private field on non-instance");return t.get(e)};class u{constructor({api:e}){r.set(this,void 0),i.set(this,void 0),s.set(this,void 0),a.set(this,void 0),l(this,r,e),l(this,i,document.createElement("button")),d(this,i).classList.add(d(this,r).styles.inlineToolButton),d(this,i).type="button",d(this,i).innerHTML='\n      <svg class="icon" height="24" viewBox="0 0 24 24" width="24">\n        <path d="M0 0h24v24H0z" fill="none"/>\n        <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>\n      </svg>\n    ',l(this,s,document.createElement("div")),d(this,s).classList.add("editorjs-inspector-dialog"),d(this,s).style.position="absolute",d(this,s).style.backgroundColor="#ffffff",d(this,s).style.border="1px solid #eaeaea",d(this,s).style.borderRadius="4px",d(this,s).style.boxShadow="0 3px 15px -3px rgba(13,20,33,.13)",d(this,s).style.margin="1rem",d(this,s).style.paddingRight="1rem",l(this,a,!1)}static get isInline(){return!0}static get title(){return"Inspector"}static domTree({anchor:e,node:t}){var n;const o=document.createElement("li"),r=document.createElement("span");r.style.cursor="pointer",e.isEqualNode(t)&&(r.style.backgroundColor="#cae6fe"),r.textContent=t instanceof Element?`<${[t.nodeName.toLowerCase(),...Array.from(t.attributes).map(e=>`${e.name}="${e.value}"`)].join(" ")}>`:null!==(n=t.textContent)&&void 0!==n?n:"",r.addEventListener("pointerdown",e=>{const n=window.getSelection();if(!n)throw new c;const o=new Range;(t instanceof Element?o.selectNode:o.selectNodeContents)(t),n.removeAllRanges(),n.addRange(o),e.preventDefault()}),o.append(r);const i=document.createElement("ul");return i.append(...Array.from(t.childNodes).map(t=>u.domTree({anchor:e,node:t}))),o.append(i),o}get shortcut(){return"CMD+SHIFT+I"}checkState(){var e;if(d(this,i).classList.toggle(d(this,r).styles.inlineToolButtonActive,d(this,a)),!d(this,a))return this.clear(),!1;const t=window.getSelection();if(!t)throw new c;if(!(null===(e=t.anchorNode)||void 0===e?void 0:e.parentElement))return!1;let n=t.anchorNode instanceof HTMLElement?t.anchorNode:t.anchorNode.parentElement;for(;n&&"true"!==(null==n?void 0:n.contentEditable);)n=null==n?void 0:n.parentElement;const o=d(this,i).closest(".codex-editor");if(!o||!n)return!1;const l=o.getBoundingClientRect(),p=n.getBoundingClientRect();d(this,s).innerHTML="",d(this,s).style.display="block",d(this,s).style.top=p.bottom-l.top+16+"px",d(this,s).style.left=p.left-l.left+"px";const f=document.createElement("ul");return f.append(u.domTree({anchor:t.anchorNode,node:n})),d(this,s).append(f),!0}clear(){d(this,s).style.display="none"}render(){return setTimeout(()=>{var e;const t=null===(e=d(this,i).closest(".codex-editor"))||void 0===e?void 0:e.querySelector(".ce-inline-toolbar");if(!(null==t?void 0:t.parentNode))throw new c;t.parentNode.insertBefore(d(this,s),t)}),d(this,i)}surround(){l(this,a,!d(this,a))}}r=new WeakMap,i=new WeakMap,s=new WeakMap,a=new WeakMap;var p=u;t.default=p}]).default}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.EditorJSInspector=t():e.EditorJSInspector=t()}(window,(function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return 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){"use strict";n.r(t);class o extends Error{constructor(...e){super(...e),Error.captureStackTrace&&Error.captureStackTrace(this,o),this.name="EditorJSInspectorError"}}var r,i,s,a,c=o,l=function(e,t,n){if(!t.has(e))throw new TypeError("attempted to set private field on non-instance");return t.set(e,n),n},d=function(e,t){if(!t.has(e))throw new TypeError("attempted to get private field on non-instance");return t.get(e)};class u{constructor({api:e}){r.set(this,void 0),i.set(this,void 0),s.set(this,void 0),a.set(this,void 0),l(this,r,e),l(this,i,document.createElement("button")),d(this,i).classList.add(d(this,r).styles.inlineToolButton),d(this,i).type="button",d(this,i).innerHTML='\n      <svg class="icon" height="24" viewBox="0 0 24 24" width="24">\n        <path d="M0 0h24v24H0z" fill="none"/>\n        <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>\n      </svg>\n    ',l(this,s,document.createElement("div")),d(this,s).classList.add("editorjs-inspector-dialog"),d(this,s).style.position="absolute",d(this,s).style.backgroundColor="#ffffff",d(this,s).style.border="1px solid #eaeaea",d(this,s).style.borderRadius="4px",d(this,s).style.boxShadow="0 3px 15px -3px rgba(13,20,33,.13)",d(this,s).style.left="0",d(this,s).style.margin="1rem",d(this,s).style.paddingRight="1rem",l(this,a,!1)}static get isInline(){return!0}static get title(){return"Inspector"}static domTree({anchor:e,node:t}){var n;const o=document.createElement("li"),r=document.createElement("span");r.style.cursor="pointer",e.isEqualNode(t)&&(r.style.backgroundColor="#cae6fe"),r.textContent=t instanceof Element?`<${[t.nodeName.toLowerCase(),...Array.from(t.attributes).map(e=>`${e.name}="${e.value}"`)].join(" ")}>`:null!==(n=t.textContent)&&void 0!==n?n:"",r.addEventListener("pointerdown",e=>{const n=window.getSelection();if(!n)throw new c;const o=new Range;(t instanceof Element?o.selectNode:o.selectNodeContents)(t),n.removeAllRanges(),n.addRange(o),e.preventDefault()}),o.append(r);const i=document.createElement("ul");return i.append(...Array.from(t.childNodes).map(t=>u.domTree({anchor:e,node:t}))),o.append(i),o}get shortcut(){return"CMD+SHIFT+I"}checkState(){var e,t;if(d(this,i).classList.toggle(d(this,r).styles.inlineToolButtonActive,d(this,a)),!d(this,a))return this.clear(),!1;const n=null===(e=d(this,i).closest(".codex-editor"))||void 0===e?void 0:e.querySelector("div.ce-inline-toolbar"),o=window.getSelection();if(!n||!o)throw new c;if(!(null===(t=o.anchorNode)||void 0===t?void 0:t.parentElement))return!1;let l=o.anchorNode instanceof HTMLElement?o.anchorNode:o.anchorNode.parentElement;for(;l&&"true"!==l.contentEditable;)l=l.parentElement;if(!l)return!1;d(this,s).innerHTML="",d(this,s).style.display="block",d(this,s).style.top=n.offsetTop+n.offsetHeight+"px";const p=document.createElement("ul");return p.append(u.domTree({anchor:o.anchorNode,node:l})),d(this,s).append(p),!0}clear(){d(this,s).style.display="none"}render(){return setTimeout(()=>{var e;const t=null===(e=d(this,i).closest(".codex-editor"))||void 0===e?void 0:e.querySelector(".ce-inline-toolbar");if(!(null==t?void 0:t.parentNode))throw new c;t.parentNode.insertBefore(d(this,s),t)}),d(this,i)}surround(){l(this,a,!d(this,a))}}r=new WeakMap,i=new WeakMap,s=new WeakMap,a=new WeakMap;var p=u;t.default=p}]).default}));

package.json

 {
   "name": "editorjs-inspector",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "DOM inspector feature for Editor.js",
@@ -5,0 +5,0 @@ "keywords": [

src/EditorJSInspector.ts

@@ -102,2 +102,3 @@ import type {
     this.#dialog.style.boxShadow = '0 3px 15px -3px rgba(13,20,33,.13)';
+    this.#dialog.style.left = '0';
     this.#dialog.style.margin = '1rem';
@@ -125,5 +126,12 @@ this.#dialog.style.paddingRight = '1rem';
 
+    const inlineToolbar = this.#button
+      .closest('.codex-editor')
+      ?.querySelector('div.ce-inline-toolbar') as
+      | HTMLDivElement
+      | null
+      | undefined;
+
     const selection = window.getSelection();
 
-    if (!selection) {
+    if (!inlineToolbar || !selection) {
       throw new EditorJSInspectorError();
@@ -141,19 +149,15 @@ }
 
-    while (root && root?.contentEditable !== 'true') {
-      root = root?.parentElement;
+    while (root && root.contentEditable !== 'true') {
+      root = root.parentElement;
     }
 
-    const codexEditor = this.#button.closest('.codex-editor');
-
-    if (!codexEditor || !root) {
+    if (!root) {
       return false;
     }
 
-    const codexEditorRect = codexEditor.getBoundingClientRect();
-    const rootRect = root.getBoundingClientRect();
-
     this.#dialog.innerHTML = '';
     this.#dialog.style.display = 'block';
-    this.#dialog.style.top = `${rootRect.bottom - codexEditorRect.top + 16}px`;
-    this.#dialog.style.left = `${rootRect.left - codexEditorRect.left}px`;
+    this.#dialog.style.top = `${
+      inlineToolbar.offsetTop + inlineToolbar.offsetHeight
+    }px`;
 
@@ -160,0 +164,0 @@ const list = document.createElement('ul');

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

Lines of code

225

increased by2.27%

Worsened metrics

Total package byte prevSize

717106

decreased by-0.01%

No dependency changes