Refactored

Author: samandar-boymurodov

example/example.html

@@ -54,6 +54,9 @@
         inlineCode: {
           class: InlineCode,
           shortcut: 'CMD+SHIFT+M',
+          config: {
+            containerSelector: "#editorjs"
+          }
         },
       },
       data: example_data, // Imported from example_data.js

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/inline-code",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "keywords": [
     "codex editor",
     "inline",

src/index.js

@@ -3,7 +3,7 @@
  */
  import './index.css';
  import { IconInlineCode } from '@codexteam/icons'
-
+ import { isTextEmpty, isCaretAtLastPosition, isTextNode } from './utils'
 /**
  * Inline Code Tool for the Editor.js
  *
@@ -21,7 +21,7 @@ export default class InlineCode {
 
   /**
    */
-  constructor({api}) {
+  constructor({api, config}) {
     this.api = api;
 
     /**
@@ -47,45 +47,23 @@ export default class InlineCode {
       active: this.api.styles.inlineToolButtonActive
     };
 
-    window.addEventListener("keydown", this.keyListener)
+    document.querySelector(config.containerSelector)?.addEventListener("keydown", this.keyListener)
   }
 
 
-  isTextEmpty = (textContent) => {
-    return /^\s*$/.test(textContent)
-  }
-
   keyListener = (e) => {
     const codeWrapper = this.api.selection.findParentTag(this.tag, InlineCode.CSS)
-    if (e.key === "ArrowRight" && codeWrapper) {
-      if (!this.isCaretAtLastPosition(codeWrapper)) return
+    if (e.key !== "ArrowRight" || !codeWrapper) return
+    if (!isCaretAtLastPosition(codeWrapper)) return
 
-      if (codeWrapper.nextElementSibling) return
-
-      if (!codeWrapper.nextSibling) {
-        const emptyChar = document.createTextNode("\u00A0")
-        codeWrapper.parentElement.appendChild(emptyChar)
-
-      } else {
-        if (this.isTextEmpty(codeWrapper.nextSibling.data)) {
-          codeWrapper.nextSibling.insertData(0, "\u00A0")
-        }
+    if (!isTextNode(codeWrapper.nextSibling)) {
+      codeWrapper.insertAdjacentText("afterend", "\u00A0")
+    } else {
+      if (isTextEmpty(codeWrapper.nextSibling.data)) {
+          codeWrapper.nextSibling.replaceWith("\u00A0")
       }
     }
   }
-
-  isCaretAtLastPosition(element) {
-    // Get the selection object
-    const selection = window.getSelection();
-
-    if (selection.rangeCount === 0) return false;
-
-    // Get the range object
-    const range = selection.getRangeAt(0);
-
-    // Check if the end offset of the range is equal to the length of the text content
-    return range.endOffset === element.textContent.length;
-  }
   /**
    * Specifies Tool as Inline Toolbar Tool
    *

src/utils.js

@@ -0,0 +1,20 @@
+export const isTextEmpty = (textContent) => {
+    return /^\s*$/.test(textContent)
+}
+
+export const isCaretAtLastPosition = (element) => {
+    // Get the selection object
+    const selection = window.getSelection();
+
+    if (selection.rangeCount === 0) return false;
+
+    // Get the range object
+    const range = selection.getRangeAt(0);
+
+    // Check if the end offset of the range is equal to the length of the text content
+    return range.endOffset === element.textContent.length;
+}
+
+export const isTextNode = (node) => {
+    return node && node.nodeType === 3;
+}