editorjs-style - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

dist/EditorJSStyle.d.ts

 import type { InlineTool, InlineToolConstructorOptions } from '@editorjs/editorjs';
 declare class EditorJSStyle implements InlineTool {
+    #private;
     static get isInline(): boolean;
@@ -12,4 +13,2 @@ static get sanitize(): {
     static get title(): string;
-    private actions;
-    private api;
     constructor({ api }: InlineToolConstructorOptions);
@@ -16,0 +15,0 @@ get shortcut(): string;

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.EditorJSStyle=t():e.EditorJSStyle=t()}(window,(function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var s=t[i]={i:i,l:!1,exports:{}};return e[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},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 i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)n.d(i,s,function(t){return e[t]}.bind(null,s));return i},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 i extends HTMLElement{constructor(){super(),this.addEventListener("keydown",e=>e.stopPropagation());new MutationObserver(()=>{var e,t,n,i,s,o;"#text"===(null===(e=this.firstChild)||void 0===e?void 0:e.nodeName)&&"​"===(null===(n=null===(t=this.firstChild)||void 0===t?void 0:t.textContent)||void 0===n?void 0:n.slice(0,1))||this.prepend("​"),"#text"===(null===(i=this.lastChild)||void 0===i?void 0:i.nodeName)&&"​"===(null===(o=null===(s=this.lastChild)||void 0===s?void 0:s.textContent)||void 0===o?void 0:o.slice(-1))||this.append("​")}).observe(this,{characterData:!0,childList:!0,subtree:!0})}}var s=i;var o=class{constructor({api:e}){this.actions=document.createElement("div"),this.api=e,customElements.get("editorjs-style")||customElements.define("editorjs-style",s)}static get isInline(){return!0}static get sanitize(){return{"editorjs-style":{class:!0,id:!0,style:!0}}}static get title(){return"Style"}get shortcut(){return"CMD+S"}checkState(){var e;this.actions.innerHTML="";const t=this.api.selection.findParentTag("EDITORJS-STYLE");if(!t)return!1;this.actions.innerHTML=`\n      <div style="margin-left: 0.5rem; ">\n        <div style="display: flex; align-items: center; justify-content: space-between; ">\n          <div>Style settings</div>\n\n          <button class="delete-button ${this.api.styles.settingsButton}" type="button">\n            <svg class="icon" height="24" viewBox="0 0 24 24" width="24">\n              <path d="M0 0h24v24H0z" fill="none"/>\n              <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>\n            </svg>\n          </button>\n        </div>\n\n        <label style="display: flex; align-items: center; justify-content: space-between; ">\n          <span>ID</span>\n\n          <input class="id-input ${this.api.styles.input}" placeholder="exciting" style="width: 80%; ">\n        </label>\n\n        <label style="display: flex; align-items: center; justify-content: space-between; ">\n          <span>Class</span>\n\n          <input class="class-input ${this.api.styles.input}" placeholder="note editorial" style="width: 80%; ">\n        </label>\n\n        <label style="display: flex; align-items: center; justify-content: space-between; ">\n          <span>Style</span>\n\n          <textarea\n            class="style-textarea ${this.api.styles.input}"\n            placeholder="background: #ffe7e8;"\n            style="resize: none; width: 80%; ">\n          </textarea>\n        </label>\n      </div>\n    `;const n=this.actions.querySelector(".delete-button"),i=this.actions.querySelector(".class-input"),s=this.actions.querySelector(".id-input"),o=this.actions.querySelector(".style-textarea");if(!(n&&i&&s&&o))throw new Error("Couldn't render actions for editorjs-style. ");return n.addEventListener("click",()=>{const e=Array.from(t.childNodes).map(e=>e.cloneNode(!0));if(e.forEach(e=>{var n;return null===(n=t.parentNode)||void 0===n?void 0:n.insertBefore(e,t)}),t.remove(),0===e.length)return;const n=window.getSelection();if(!n)throw new Error("Couldn't select unwrapped editorjs-style contents. ");n.removeAllRanges();const i=new Range;i.setStartBefore(e[0]),i.setEndAfter(e[e.length-1]),n.addRange(i)}),this.api.tooltip.onHover(n,"Delete style",{placement:"top"}),i.value=t.className,i.addEventListener("input",()=>t.setAttribute("class",i.value)),s.value=t.id,s.addEventListener("input",()=>t.id=s.value),o.value=null!==(e=t.getAttribute("style"))&&void 0!==e?e:"",o.addEventListener("keydown",e=>e.stopPropagation()),o.addEventListener("input",()=>t.setAttribute("style",o.value)),!0}clear(){this.actions.innerHTML=""}render(){const e=document.createElement("button");return e.classList.add(this.api.styles.inlineToolButton),e.type="button",e.innerHTML='\n      <svg class="icon" height="24" viewBox="0 0 24 24" width="24">\n        <path d="M0 0h24v24H0z" fill="none"/>\n        <path d="M2.53 19.65l1.34.56v-9.03l-2.43 5.86c-.41 1.02.08 2.19 1.09 2.61zm19.5-3.7L17.07 3.98c-.31-.75-1.04-1.21-1.81-1.23-.26 0-.53.04-.79.15L7.1 5.95c-.75.31-1.21 1.03-1.23 1.8-.01.27.04.54.15.8l4.96 11.97c.31.76 1.05 1.22 1.83 1.23.26 0 .52-.05.77-.15l7.36-3.05c1.02-.42 1.51-1.59 1.09-2.6zM7.88 8.75c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-2 11c0 1.1.9 2 2 2h1.45l-3.45-8.34v6.34z"/>\n      </svg>\n    ',e}renderActions(){return this.actions}surround(e){const t=new s;t.append(e.collapsed?"new style":e.extractContents()),setTimeout(()=>{e.insertNode(t),this.api.selection.expandToTag(t)})}};t.default=o}]).default}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.EditorJSStyle=t():e.EditorJSStyle=t()}(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var s=t[r]={i:r,l:!1,exports:{}};return e[r].call(s.exports,s,s.exports,n),s.l=!0,s.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 s in e)n.d(r,s,function(t){return e[t]}.bind(null,s));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 HTMLElement{constructor(){super(),this.addEventListener("keydown",e=>e.stopPropagation())}}var s=r;class i extends Error{constructor(...e){super(...e),Error.captureStackTrace&&Error.captureStackTrace(this,i),this.name="EditorJSStyleError"}}var o,l,a=i,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},u=function(e,t){if(!t.has(e))throw new TypeError("attempted to get private field on non-instance");return t.get(e)};o=new WeakMap,l=new WeakMap;var d=class{constructor({api:e}){o.set(this,void 0),l.set(this,void 0),c(this,o,document.createElement("div")),c(this,l,e),customElements.get("editorjs-style")||customElements.define("editorjs-style",s)}static get isInline(){return!0}static get sanitize(){return{"editorjs-style":{class:!0,id:!0,style:!0}}}static get title(){return"Style"}get shortcut(){return"CMD+S"}checkState(){var e;u(this,o).innerHTML="";const t=u(this,l).selection.findParentTag("EDITORJS-STYLE");if(!t)return!1;u(this,o).innerHTML=`\n      <div style="margin-left: 0.5rem; ">\n        <div style="display: flex; align-items: center; justify-content: space-between; ">\n          <div>Style settings</div>\n\n          <button class="delete-button ${u(this,l).styles.settingsButton}" type="button">\n            <svg class="icon" height="24" viewBox="0 0 24 24" width="24">\n              <path d="M0 0h24v24H0z" fill="none"/>\n              <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>\n            </svg>\n          </button>\n        </div>\n\n        <label style="display: flex; align-items: center; justify-content: space-between; ">\n          <span>ID</span>\n\n          <input class="id-input ${u(this,l).styles.input}" placeholder="exciting" style="width: 80%; ">\n        </label>\n\n        <label style="display: flex; align-items: center; justify-content: space-between; ">\n          <span>Class</span>\n\n          <input class="class-input ${u(this,l).styles.input}" placeholder="note editorial" style="width: 80%; ">\n        </label>\n\n        <label style="display: flex; align-items: center; justify-content: space-between; ">\n          <span>Style</span>\n\n          <textarea\n            class="style-textarea ${u(this,l).styles.input}"\n            placeholder="background: #ffe7e8;"\n            style="resize: none; width: 80%; ">\n          </textarea>\n        </label>\n      </div>\n    `;const n=u(this,o).querySelector(".delete-button"),r=u(this,o).querySelector(".class-input"),s=u(this,o).querySelector(".id-input"),i=u(this,o).querySelector(".style-textarea");if(!(n&&r&&s&&i))throw new a;return n.addEventListener("click",()=>{const e=Array.from(t.childNodes).map(e=>e.cloneNode(!0));if(e.forEach(e=>{var n;return null===(n=t.parentNode)||void 0===n?void 0:n.insertBefore(e,t)}),t.remove(),0===e.length)return;const n=window.getSelection();if(!n)throw new a;n.removeAllRanges();const r=new Range;r.setStartBefore(e[0]),r.setEndAfter(e[e.length-1]),n.addRange(r)}),u(this,l).tooltip.onHover(n,"Delete style",{placement:"top"}),r.value=t.className,r.addEventListener("input",()=>t.setAttribute("class",r.value)),s.value=t.id,s.addEventListener("input",()=>t.id=s.value),i.value=null!==(e=t.getAttribute("style"))&&void 0!==e?e:"",i.addEventListener("keydown",e=>e.stopPropagation()),i.addEventListener("input",()=>t.setAttribute("style",i.value)),!0}clear(){u(this,o).innerHTML=""}render(){const e=document.createElement("button");return e.classList.add(u(this,l).styles.inlineToolButton),e.type="button",e.innerHTML='\n      <svg class="icon" height="24" viewBox="0 0 24 24" width="24">\n        <path d="M0 0h24v24H0z" fill="none"/>\n        <path d="M2.53 19.65l1.34.56v-9.03l-2.43 5.86c-.41 1.02.08 2.19 1.09 2.61zm19.5-3.7L17.07 3.98c-.31-.75-1.04-1.21-1.81-1.23-.26 0-.53.04-.79.15L7.1 5.95c-.75.31-1.21 1.03-1.23 1.8-.01.27.04.54.15.8l4.96 11.97c.31.76 1.05 1.22 1.83 1.23.26 0 .52-.05.77-.15l7.36-3.05c1.02-.42 1.51-1.59 1.09-2.6zM7.88 8.75c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-2 11c0 1.1.9 2 2 2h1.45l-3.45-8.34v6.34z"/>\n      </svg>\n    ',e}renderActions(){return u(this,o)}surround(e){const t=new s;t.append(e.collapsed?"new style":e.extractContents()),setTimeout(()=>{e.insertNode(t),u(this,l).selection.expandToTag(t)})}};t.default=d}]).default}));

package.json

 {
   "name": "editorjs-style",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Inline-style Tool for Editor.js",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -27,6 +27,11 @@ Work in progress
 Editor.js may need many inline tools to styling inline elements.
-By attaching any id, class and style to inline elements, it can be used like a HTML editor.
+editorjs-style provides feature attaching any id, class and style to inline elements.
 
+By using with [editorjs-inspector](https://github.com/hata6502/editorjs-inspector),
+Editor.js can be used like a HTML editor.
+
 ### ✨ [Demo](https://hata6502.github.io/editorjs-style/)
 
+![Demo](https://user-images.githubusercontent.com/7702653/93618038-bd90e880-fa11-11ea-9355-f782a557b6d4.gif)
+
 ## Install
@@ -33,0 +38,0 @@

src/EditorJSStyle.ts

@@ -7,2 +7,3 @@ import type {
 import EditorJSStyleElement from './EditorJSStyleElement';
+import EditorJSStyleError from './EditorJSStyleError';
 
@@ -28,8 +29,8 @@ class EditorJSStyle implements InlineTool {
 
-  private actions: HTMLDivElement;
-  private api: API;
+  #actions: HTMLDivElement;
+  #api: API;
 
   constructor({ api }: InlineToolConstructorOptions) {
-    this.actions = document.createElement('div');
-    this.api = api;
+    this.#actions = document.createElement('div');
+    this.#api = api;
 
@@ -48,5 +49,5 @@ if (customElements.get('editorjs-style')) {
   checkState() {
-    this.actions.innerHTML = '';
+    this.#actions.innerHTML = '';
 
-    const editorjsStyle = this.api.selection.findParentTag('EDITORJS-STYLE');
+    const editorjsStyle = this.#api.selection.findParentTag('EDITORJS-STYLE');
 
@@ -57,3 +58,3 @@ if (!editorjsStyle) {
 
-    this.actions.innerHTML = `
+    this.#actions.innerHTML = `
       <div style="margin-left: 0.5rem; ">
@@ -63,3 +64,5 @@ <div style="display: flex; align-items: center; justify-content: space-between; ">
 
-          <button class="delete-button ${this.api.styles.settingsButton}" type="button">
+          <button class="delete-button ${
+            this.#api.styles.settingsButton
+          }" type="button">
             <svg class="icon" height="24" viewBox="0 0 24 24" width="24">
@@ -75,3 +78,5 @@ <path d="M0 0h24v24H0z" fill="none"/>
 
-          <input class="id-input ${this.api.styles.input}" placeholder="exciting" style="width: 80%; ">
+          <input class="id-input ${
+            this.#api.styles.input
+          }" placeholder="exciting" style="width: 80%; ">
         </label>
@@ -82,3 +87,5 @@
 
-          <input class="class-input ${this.api.styles.input}" placeholder="note editorial" style="width: 80%; ">
+          <input class="class-input ${
+            this.#api.styles.input
+          }" placeholder="note editorial" style="width: 80%; ">
         </label>
@@ -90,3 +97,3 @@
           <textarea
-            class="style-textarea ${this.api.styles.input}"
+            class="style-textarea ${this.#api.styles.input}"
             placeholder="background: #ffe7e8;"
@@ -99,15 +106,15 @@ style="resize: none; width: 80%; ">
 
-    const deleteButton = this.actions.querySelector(
+    const deleteButton = this.#actions.querySelector(
       '.delete-button'
     ) as HTMLButtonElement | null;
 
-    const classInput = this.actions.querySelector(
+    const classInput = this.#actions.querySelector(
       '.class-input'
     ) as HTMLInputElement | null;
 
-    const idInput = this.actions.querySelector(
+    const idInput = this.#actions.querySelector(
       '.id-input'
     ) as HTMLInputElement | null;
 
-    const styleTextarea = this.actions.querySelector(
+    const styleTextarea = this.#actions.querySelector(
       '.style-textarea'
@@ -117,3 +124,3 @@ ) as HTMLTextAreaElement | null;
     if (!deleteButton || !classInput || !idInput || !styleTextarea) {
-      throw new Error("Couldn't render actions for editorjs-style. ");
+      throw new EditorJSStyleError();
     }
@@ -138,3 +145,3 @@
       if (!selection) {
-        throw new Error("Couldn't select unwrapped editorjs-style contents. ");
+        throw new EditorJSStyleError();
       }
@@ -152,3 +159,3 @@
 
-    this.api.tooltip.onHover(deleteButton, 'Delete style', {
+    this.#api.tooltip.onHover(deleteButton, 'Delete style', {
       placement: 'top',
@@ -182,3 +189,3 @@ });
   clear() {
-    this.actions.innerHTML = '';
+    this.#actions.innerHTML = '';
   }
@@ -189,3 +196,3 @@
 
-    button.classList.add(this.api.styles.inlineToolButton);
+    button.classList.add(this.#api.styles.inlineToolButton);
     button.type = 'button';
@@ -204,3 +211,3 @@
   renderActions(): HTMLElement {
-    return this.actions;
+    return this.#actions;
   }
@@ -217,3 +224,3 @@
       range.insertNode(editorjsStyle);
-      this.api.selection.expandToTag(editorjsStyle);
+      this.#api.selection.expandToTag(editorjsStyle);
     });
@@ -220,0 +227,0 @@ }

src/EditorJSStyleElement.ts

@@ -7,24 +7,2 @@ class EditorJSStyleElement extends HTMLElement {
     this.addEventListener('keydown', (event) => event.stopPropagation());
-
-    const mutationObserver = new MutationObserver(() => {
-      if (
-        this.firstChild?.nodeName !== '#text' ||
-        this.firstChild?.textContent?.slice(0, 1) !== '\u200b'
-      ) {
-        this.prepend('\u200b');
-      }
-
-      if (
-        this.lastChild?.nodeName !== '#text' ||
-        this.lastChild?.textContent?.slice(-1) !== '\u200b'
-      ) {
-        this.append('\u200b');
-      }
-    });
-
-    mutationObserver.observe(this, {
-      characterData: true,
-      childList: true,
-      subtree: true,
-    });
   }
@@ -31,0 +9,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

720841

increased by0.02%

Number of package files

22

increased by10%

Lines of code

252

increased by0.4%

Number of lines in readme file

105

increased by5%

No dependency changes