Merge pull request #51 from kommitters/v1.1

Prepare v1.1.2 release

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 1.1.2 (18.01.2022)
+* set the plugin to recognize any editor Id
+
 ## 1.1.1 (07.12.2021)
 * Reduce the gif size
 

README.md

@@ -42,13 +42,16 @@ const editor = EditorJS({
         underline: true,
         backgroundColor: '#154360',
         textColor: '#FDFEFE',
+        holder: 'editorId',
       }
     }
   }
 });
 ```
 Select some text, click on the tooltip button in the inline-tools bar, and type the tooltip in the input, when the key enter is pressed, the tooltip will be created.
 
+**Note:** Use the holder field to indicate the EditorJS Id passed in the div tag, by default the holder field is 'editorjs'. 
+
 ## Config Params
 
 | Field          | Type      | Description                     |
@@ -58,6 +61,7 @@ Select some text, click on the tooltip button in the inline-tools bar, and type
 | underline | `{ underline: boolean }`  | You could add underline text decoration to the text wrapped by the tooltip
 | backgroundColor | `{ backgroundColor: string }`  | You could choose the tooltip color, you could pass hexadecimal colors or string colors
 | textColor | `{ textColor: string }`  | You could choose the tooltip text color, you could pass hexadecimal colors or string colors
+| holder | `{ holder: string }`  | If your EditorJS Id passed in the Editor tag is different from 'editorjs', use the holder field.
 
 ## Output data
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "editorjs-tooltip",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "keywords": [
     "tool",
     "tooltip",

src/index.js

@@ -42,6 +42,7 @@ export default class Tooltip {
     this.underline = config.underline ? config.underline : false;
     this.backgroundColor = config.backgroundColor;
     this.textColor = config.textColor;
+    this.editorId = config.holder ? config.holder : 'editorjs';
 
     this.tag = 'SPAN';
 
@@ -130,7 +131,7 @@ export default class Tooltip {
    * Observe if some tooltip span is inserted and create the respective tooltip
    */
   tooltipsObserver() {
-    const holder = document.getElementById('editorjs');
+    const holder = document.getElementById(this.editorId);
     const observer = new MutationObserver((mutationList) => {
       mutationList.forEach((mutation) => {
         if (mutation.type === 'childList'

test/fixtures/tooltip.js

@@ -27,6 +27,7 @@ const config = {
   underline: true,
   backgroundColor: 'blue',
   textColor: 'white',
+  holder: 'editorjs2',
 };
 
 /**

test/tooltip.test.js

@@ -7,8 +7,8 @@ describe('Tooltip', () => {
   let tooltip;
   beforeEach(() => {
     document.body.innerHTML = `<div id= "editorjs"><span id="tooltip">Tooltip text</span></div>
-                               <div class= "ct tooltip-color ct--right ct--shown">
-                               <div class= "ct__content tooltip-text-color">tooltip</div></div>`;
+                              <div class= "ct tooltip-color ct--right ct--shown">
+                              <div class= "ct__content tooltip-text-color">tooltip</div></div>`;
   });
 
   describe('validates panel components', () => {
@@ -41,14 +41,23 @@ describe('Tooltip', () => {
     });
   });
 
-  describe('validates tooltip position', () => {
+  describe('validates config parameters', () => {
+    beforeEach(() => {
+      document.body.innerHTML = `<div id= "editorjs2"><span id="tooltip">Tooltip text</span></div>
+                                <div class= "ct tooltip-color ct--right ct--shown">
+                                <div class= "ct__content tooltip-text-color">tooltip</div></div>`;
+    });
+
     it('validates position', () => {
       tooltip = createTooltipRightPosition();
       expect(tooltip.tooltipLocation).toBe('right');
     });
-  });
 
-  describe('validates tooltip background color and underline decoration', () => {
+    it('validates holder', () => {
+      tooltip = createTooltipRightPosition();
+      expect(tooltip.editorId).toBe('editorjs2');
+    });
+
     it('validates color and underline decoration', () => {
       tooltip = createTooltipRightPosition();