editorjs-inspector - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

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(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},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 r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},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 r extends Error{constructor(...e){super(...e),Error.captureStackTrace&&Error.captureStackTrace(this,r),this.name="EditorJSInspectorError"}}var o,i,s,a,l=r,c=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}){o.set(this,void 0),i.set(this,void 0),s.set(this,void 0),a.set(this,void 0),c(this,o,e),c(this,i,document.createElement("button")),d(this,i).classList.add(d(this,o).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    ',c(this,s,document.createElement("div")),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",d(this,s).style.transform="translateY(-100%)",d(this,s).style.zIndex="1",c(this,a,!1)}static get isInline(){return!0}static get title(){return"Inspector"}static domTree({anchor:e,node:t}){var n;const r=document.createElement("li"),o=document.createElement("span");o.style.cursor="pointer",e.isEqualNode(t)&&(o.style.backgroundColor="#cae6fe"),o.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:"",o.addEventListener("pointerdown",e=>{const n=window.getSelection();if(!n)throw new l;const r=new Range;r.selectNodeContents(t),n.removeAllRanges(),n.addRange(r),e.preventDefault()}),r.append(o);const i=document.createElement("ul");return i.append(...Array.from(t.childNodes).map(t=>u.domTree({anchor:e,node:t}))),r.append(i),r}get shortcut(){return"CMD+SHIFT+I"}checkState(){var e;if(d(this,i).classList.toggle(d(this,o).styles.inlineToolButtonActive,d(this,a)),!d(this,a))return this.clear(),!1;const t=window.getSelection();if(!t)throw new l;if(!(null===(e=t.anchorNode)||void 0===e?void 0:e.parentElement))return!1;let n=t.anchorNode.parentElement;for(;n&&"true"!==(null==n?void 0:n.contentEditable);)n=null==n?void 0:n.parentElement;if(!n)return!1;const r=n.getBoundingClientRect();d(this,s).innerHTML="",d(this,s).style.display="block",d(this,s).style.top=window.pageYOffset+r.top-16+"px",d(this,s).style.left=window.pageXOffset+r.left+"px";const c=document.createElement("ul");return c.append(u.domTree({anchor:t.anchorNode,node:n})),d(this,s).append(c),!0}clear(){d(this,s).style.display="none"}render(){return document.body.appendChild(d(this,s)),d(this,i)}surround(){c(this,a,!d(this,a))}}o=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,l=o,c=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),c(this,r,e),c(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    ',c(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",c(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 l;const o=new Range;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 l;if(!(null===(e=t.anchorNode)||void 0===e?void 0:e.parentElement))return!1;let n=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 c=o.getBoundingClientRect(),p=n.getBoundingClientRect();d(this,s).innerHTML="",d(this,s).style.display="block",d(this,s).style.top=p.bottom-c.top+16+"px",d(this,s).style.left=p.left-c.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 l;t.parentNode.insertBefore(d(this,s),t)}),d(this,i)}surround(){c(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.1.2",
+  "version": "1.1.3",
   "description": "DOM inspector feature for Editor.js",
@@ -5,0 +5,0 @@ "keywords": [

src/EditorJSInspector.ts

@@ -94,2 +94,3 @@ import type {
     this.#dialog = document.createElement('div');
+    this.#dialog.classList.add('editorjs-inspector-dialog');
     this.#dialog.style.position = 'absolute';
@@ -102,4 +103,2 @@ this.#dialog.style.backgroundColor = '#ffffff';
     this.#dialog.style.paddingRight = '1rem';
-    this.#dialog.style.transform = 'translateY(-100%)';
-    this.#dialog.style.zIndex = '1';
 
@@ -141,12 +140,15 @@ this.#enabled = false;
 
-    if (!root) {
+    const codexEditor = this.#button.closest('.codex-editor');
+
+    if (!codexEditor || !root) {
       return false;
     }
 
-    const rect = root.getBoundingClientRect();
+    const codexEditorRect = codexEditor.getBoundingClientRect();
+    const rootRect = root.getBoundingClientRect();
 
     this.#dialog.innerHTML = '';
     this.#dialog.style.display = 'block';
-    this.#dialog.style.top = `${window.pageYOffset + rect.top - 16}px`;
-    this.#dialog.style.left = `${window.pageXOffset + rect.left}px`;
+    this.#dialog.style.top = `${rootRect.bottom - codexEditorRect.top + 16}px`;
+    this.#dialog.style.left = `${rootRect.left - codexEditorRect.left}px`;
 
@@ -169,4 +171,14 @@ const list = document.createElement('ul');
   render() {
-    document.body.appendChild(this.#dialog);
+    setTimeout(() => {
+      const inlineToolbar = this.#button
+        .closest('.codex-editor')
+        ?.querySelector('.ce-inline-toolbar');
 
+      if (!inlineToolbar?.parentNode) {
+        throw new EditorJSInspectorError();
+      }
+
+      inlineToolbar.parentNode.insertBefore(this.#dialog, inlineToolbar);
+    });
+
     return this.#button;
@@ -173,0 +185,0 @@ }

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

716940

increased by0.08%

Lines of code

215

increased by4.37%

No dependency changes