feat: Fix for Editor.js v2.19.1 (#24)

BREAKING CHANGE: For avoiding default exports, the module export method is also changed. * Simplify demo * Avoid default exports * Fix for v2.19.1 * Fix README
hata6502 · Jan 23, 2021 · 977e705 · 977e705
1 parent e8536f1
commit 977e705
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 123 deletions.
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
@@ -0,0 +1,26 @@
+name: CodeQL
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+  schedule:
+    - cron: '0 3 * * 1'
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ['javascript']
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 2
+      - run: git checkout HEAD^2
+        if: ${{ github.event_name == 'pull_request' }}
+      - uses: github/codeql-action/init@v1
+        with:
+          languages: ${{ matrix.language }}
+      - uses: github/codeql-action/autobuild@v1
+      - uses: github/codeql-action/analyze@v1
diff --git a/README.md b/README.md
@@ -1,3 +1,4 @@
+<!-- markdownlint-disable first-line-h1 -->
 <h1 align="center">Welcome to editorjs-style 👋</h1>
 <p>
   <a href="https://www.npmjs.com/package/editorjs-style" target="_blank">
@@ -6,12 +7,6 @@
   <a href="#" target="_blank">
     <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
   </a>
-  <a href="https://lgtm.com/projects/g/hata6502/editorjs-style/alerts/">
-    <img alt="Total alerts" src="https://img.shields.io/lgtm/alerts/g/hata6502/editorjs-style.svg?logo=lgtm&logoWidth=18"/>
-  </a>
-  <a href="https://lgtm.com/projects/g/hata6502/editorjs-style/context:javascript">
-    <img alt="Language grade: JavaScript" src="https://img.shields.io/lgtm/grade/javascript/g/hata6502/editorjs-style.svg?logo=lgtm&logoWidth=18"/>
-  </a>
   <a href="https://twitter.com/hata6502" target="_blank">
     <img alt="Twitter: hata6502" src="https://img.shields.io/twitter/follow/hata6502.svg?style=social" />
   </a>
@@ -24,9 +19,6 @@
 Editor.js may need many inline tools to styling inline elements.
 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)
@@ -71,11 +63,7 @@ yarn test
 
 ## Author
 
-<img alt="hata6502" src="https://avatars.githubusercontent.com/hata6502" width="48" /> **hata6502**
-
-- Website: https://b-hood.site/
-- Twitter: [@hata6502](https://twitter.com/hata6502)
-- Github: [@hata6502](https://github.com/hata6502)
+<img alt="hata6502" src="https://avatars.githubusercontent.com/hata6502" width="48" /> **Tomoyuki Hata <[email protected]>**
 
 ## 🤝 Contributing
 
@@ -89,7 +77,7 @@ Give a ⭐️ if this project helped you!
 
 ## 📝 License
 
-Copyright © 2020 [hata6502](https://github.com/hata6502).
+Copyright © 2020 [Tomoyuki Hata](https://github.com/hata6502).
 
 This project is [MIT](https://github.com/hata6502/editorjs-style/blob/master/LICENSE) licensed.
 

diff --git a/docs/index.html b/docs/index.html
@@ -3,47 +3,37 @@
   <head>
     <meta charset="utf-8" />
     <title>editorjs-style</title>
-    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
-    <script src="https://cdn.jsdelivr.net/npm/editorjs-inspector@latest"></script>
-    <script src="https://cdn.jsdelivr.net/npm/editorjs-style@latest"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph@latest"></script>
   </head>
 
   <body>
     <div id="editorjs"></div>
     <button id="button" type="button">Save</button>
     <div id="output-data"></div>
+
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
+
+    <!-- For demo -->
+    <script src="https://cdn.jsdelivr.net/npm/editorjs-style@latest"></script>
+    <!-- For developing -->
+    <!--<script src="../dist/index.js"></script>-->
+
     <script>
       const data = {
-        time: 1600015893556,
         blocks: [
           {
             type: 'paragraph',
             data: {
               text:
-                'editorjs-style <editorjs-style style="background-color: pink;">demo</editorjs-style><editorjs-style style="display: block;\nborder: 1px solid black;"><editorjs-style style="float: left;\nwidth: 100px;\nbackground-color: pink;\nmargin-right: 1rem;">floating content</editorjs-style>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</editorjs-style>',
+                'test <editorjs-style style="background-color: pink;">editorjs-style</editorjs-style> test',
             },
           },
         ],
-        version: '2.18.0',
       };
 
-      // To prevent breaking nested editorjs-style
-      class ParagraphForEditorJSStyle extends Paragraph {
-        static get enableLineBreaks() {
-          return true;
-        }
-      }
-
       const editorJS = new EditorJS({
         data,
         tools: {
-          editorJSInspector: EditorJSInspector,
-          editorJSStyle: EditorJSStyle,
-          paragraph: {
-            class: ParagraphForEditorJSStyle,
-            inlineToolbar: true,
-          },
+          style: EditorJSStyle.StyleInlineTool,
         },
       });
 

diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   ],
   "repository": "https://github.com/hata6502/editorjs-style",
   "license": "MIT",
-  "author": "hata6502",
+  "author": "Tomoyuki Hata <[email protected]>",
   "main": "dist/index.js",
   "scripts": {
     "fix": "prettier --write .",
@@ -23,7 +23,7 @@
     "webpack": "webpack"
   },
   "devDependencies": {
-    "@editorjs/editorjs": "^2.18.0",
+    "@editorjs/editorjs": "^2.19.1",
     "license-checker": "^25.0.1",
     "material-design-icons": "^3.0.1",
     "prettier": "^2.0.5",

diff --git a/src/EditorJSStyleElement.ts b/src/EditorJSStyleElement.ts
@@ -1,10 +1,3 @@
-class EditorJSStyleElement extends HTMLElement {
-  constructor() {
-    super();
+class EditorJSStyleElement extends HTMLElement {}
 
-    // To prevent Editor.js keydown event
-    this.addEventListener('keydown', (event) => event.stopPropagation());
-  }
-}
-
-export default EditorJSStyleElement;
+export { EditorJSStyleElement };
diff --git a/src/EditorJSStyleError.ts b/src/EditorJSStyleError.ts
@@ -10,4 +10,4 @@ class EditorJSStyleError extends Error {
   }
 }
 
-export default EditorJSStyleError;
+export { EditorJSStyleError };
diff --git a/src/EditorJSStyle.ts → src/StyleInlineTool.ts b/src/EditorJSStyle.ts → src/StyleInlineTool.ts
@@ -3,10 +3,10 @@ import type {
   InlineTool,
   InlineToolConstructorOptions,
 } from '@editorjs/editorjs';
-import EditorJSStyleElement from './EditorJSStyleElement';
-import EditorJSStyleError from './EditorJSStyleError';
+import { EditorJSStyleElement } from './EditorJSStyleElement';
+import { EditorJSStyleError } from './EditorJSStyleError';
 
-class EditorJSStyle implements InlineTool {
+class StyleInlineTool implements InlineTool {
   static get isInline() {
     return true;
   }
@@ -25,18 +25,20 @@ class EditorJSStyle implements InlineTool {
     return 'Style';
   }
 
+  static prepare() {
+    if (customElements.get('editorjs-style')) {
+      return;
+    }
+
+    customElements.define('editorjs-style', EditorJSStyleElement);
+  }
+
   #actions: HTMLDivElement;
   #api: API;
 
   constructor({ api }: InlineToolConstructorOptions) {
     this.#actions = document.createElement('div');
     this.#api = api;
-
-    if (customElements.get('editorjs-style')) {
-      return;
-    }
-
-    customElements.define('editorjs-style', EditorJSStyleElement);
   }
 
   get shortcut() {
@@ -46,14 +48,16 @@ class EditorJSStyle implements InlineTool {
   checkState() {
     this.#actions.innerHTML = '';
 
-    const editorjsStyle = this.#api.selection.findParentTag('EDITORJS-STYLE');
+    const editorJSStyleElement = this.#api.selection.findParentTag(
+      'EDITORJS-STYLE'
+    );
 
-    if (!editorjsStyle) {
+    if (!editorJSStyleElement) {
       return false;
     }
 
     this.#actions.innerHTML = `
-      <div style="margin-left: 0.5rem; ">
+      <div style="margin-bottom: 16px; margin-left: 16px; margin-right: 16px; ">
         <div style="display: flex; align-items: center; justify-content: space-between; ">
           <div>Style settings</div>
 
@@ -72,15 +76,15 @@ class EditorJSStyle implements InlineTool {
 
           <input class="id-input ${
             this.#api.styles.input
-          }" placeholder="exciting" style="width: 80%; ">
+          }" style="width: 80%; ">
         </label>
 
         <label style="display: flex; align-items: center; justify-content: space-between; ">
           <span>Class</span>
 
           <input class="class-input ${
             this.#api.styles.input
-          }" placeholder="note editorial" style="width: 80%; ">
+          }" style="width: 80%; ">
         </label>
 
         <label style="display: flex; align-items: center; justify-content: space-between; ">
@@ -116,14 +120,18 @@ class EditorJSStyle implements InlineTool {
     }
 
     deleteButton.addEventListener('click', () => {
-      const clonedNodes = Array.from(editorjsStyle.childNodes).map((node) =>
-        node.cloneNode(true)
-      );
+      const clonedNodes = Array.from(
+        editorJSStyleElement.childNodes
+      ).map((node) => node.cloneNode(true));
 
       clonedNodes.forEach((node) =>
-        editorjsStyle.parentNode?.insertBefore(node, editorjsStyle)
+        editorJSStyleElement.parentNode?.insertBefore(
+          node,
+          editorJSStyleElement
+        )
       );
-      editorjsStyle.remove();
+
+      editorJSStyleElement.remove();
 
       if (clonedNodes.length === 0) {
         return;
@@ -143,31 +151,36 @@ class EditorJSStyle implements InlineTool {
       range.setEndAfter(clonedNodes[clonedNodes.length - 1]);
 
       selection.addRange(range);
+      this.#actions.innerHTML = '';
+      this.#api.tooltip.hide();
     });
 
     this.#api.tooltip.onHover(deleteButton, 'Delete style', {
       placement: 'top',
     });
 
-    classInput.value = editorjsStyle.className;
+    classInput.value = editorJSStyleElement.className;
 
     classInput.addEventListener('input', () =>
-      editorjsStyle.setAttribute('class', classInput.value)
+      editorJSStyleElement.setAttribute('class', classInput.value)
     );
 
-    idInput.value = editorjsStyle.id;
+    idInput.value = editorJSStyleElement.id;
 
-    idInput.addEventListener('input', () => (editorjsStyle.id = idInput.value));
+    idInput.addEventListener(
+      'input',
+      () => (editorJSStyleElement.id = idInput.value)
+    );
 
-    styleTextarea.value = editorjsStyle.getAttribute('style') ?? '';
+    styleTextarea.value = editorJSStyleElement.getAttribute('style') ?? '';
 
     // To input line breaks
     styleTextarea.addEventListener('keydown', (event) =>
       event.stopPropagation()
     );
 
     styleTextarea.addEventListener('input', () =>
-      editorjsStyle.setAttribute('style', styleTextarea.value)
+      editorJSStyleElement.setAttribute('style', styleTextarea.value)
     );
 
     return true;
@@ -198,17 +211,13 @@ class EditorJSStyle implements InlineTool {
   }
 
   surround(range: Range) {
-    const editorjsStyle = new EditorJSStyleElement();
+    const editorjsStyleElement = new EditorJSStyleElement();
 
-    editorjsStyle.append(
-      range.collapsed ? 'new style' : range.extractContents()
-    );
+    editorjsStyleElement.append(range.extractContents());
 
-    setTimeout(() => {
-      range.insertNode(editorjsStyle);
-      this.#api.selection.expandToTag(editorjsStyle);
-    });
+    range.insertNode(editorjsStyleElement);
+    this.#api.selection.expandToTag(editorjsStyleElement);
   }
 }
 
-export default EditorJSStyle;
+export { StyleInlineTool };
diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1 @@
-import EditorJSStyle from './EditorJSStyle';
-
-export default EditorJSStyle;
+export { StyleInlineTool } from './StyleInlineTool';
diff --git a/webpack.config.js b/webpack.config.js
@@ -14,7 +14,6 @@ module.exports = {
   output: {
     filename: 'index.js',
     library: 'EditorJSStyle',
-    libraryExport: 'default',
     libraryTarget: 'umd',
   },
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,4 +10,4 @@ class EditorJSStyleError extends Error { @@
       }
     }
-    export default EditorJSStyleError;
+    export { EditorJSStyleError };