<fix> toggle conversion tool

flaming-cl · Jan 24, 2023 · 2608e0a · 2608e0a
1 parent 4f3132b
commit 2608e0a
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ const ColorPlugin = require('editorjs-text-color-plugin');
 
 ### Load from CDN
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/bundle.js"></script>
 ```
 
 ## Usage
@@ -44,6 +44,7 @@ var editor = EditorJS({
          colorCollections: ['#EC7878','#9C27B0','#673AB7','#3F51B5','#0070FF','#03A9F4','#00BCD4','#4CAF50','#8BC34A','#CDDC39', '#FFF'],
          defaultColor: '#FF1300',
          type: 'text', 
+         customPicker: true // add a button to allow selecting any colour  
       }     
     },
     Marker: {
@@ -66,9 +67,9 @@ var editor = EditorJS({
 |------------------|-----------|----------------------------------------------------------------------------------------------------------------------------------------|
 | colorCollections | `array`   | Colors available in the palette.   CSS variables, for example var(--main-text-color), are supported                                    |
 | defaultColor     | `string`  | Default color (if you do not set up a default color, it will be the first color of your color collections).   CSS variables supported. |
-| type             | `string`  | Set the plugin as a marker or a text color tool                                                                                        |
-| customPicker     | `boolean` | Whether to show a random color picker in the palette, defaults to `false`.                                                             |
-| icon             | `string`  | SVG string to replace default button icons.                                                                                     |
+| type             | `string`  | Set the plugin as a marker or a text color tool. It will be set as a text color tool as default.                                       |
+| customPicker     | `boolean` | Turn on a random color picker in the palette, defaults to `false`.                                                                     |
+| icon             | `string`  | SVG string to replace default button icons.                                                                                            |
 
 ## Output data
 
@@ -89,6 +90,7 @@ Colored text will be wrapped with a `color` tag with an `color-plugin` class.
 | V1.12.1 | Mar-25-2022 | CSS variable Support for colorCollection/defaultColor.   This version supports the newest version of Editor.js (v2.23.2). Previous versions support Editor.js (v2.0)      |
 | V1.13.1 | May-1-2022  | Thanks to HaoCherHong's contribution, we add a custom color picker in this version.                                                                                       |
 | V2.0.1  | Jan-20-2023 | New features: 1. clean applied text/marker color. When the left area of the plugin color turns blue, it means applied color can be cleaned now. 2. Allow customized icons |
+| V2.0.2  | Jan-23-2023 | Fix: 1. toggle conversion tool when opening inline color plugin 2. optimized picker initialization                                                                         |
 
 ## Credits
 UI Built Based on https://github.com/XboxYan/xy-ui by XboxYan  

diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "editorjs-text-color-plugin",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Text Color Tool for Editor.js",
   "main": "./dist/bundle.js",
   "scripts": {

diff --git a/src/index.js b/src/index.js
@@ -21,10 +21,11 @@ class Color {
     this.pluginType = this.config.type || 'text';
     this.parentTag = this.pluginType === 'marker' ? 'MARK' : 'FONT';
     this.hasCustomPicker = this.config.customPicker || false;
-    this.icon = this.config.icon;
     this.color = handleCSSVariables(
         getDefaultColorCache(this.config.defaultColor, this.pluginType)
     );
+    this.picker = null;
+    this.icon = null;
 
     /**
      * Toolbar Button
@@ -73,11 +74,14 @@ class Color {
    * @return {HTMLElement}
    */
   createLeftButton() {
-    const leftPart = document.createElement('div');
-    leftPart.id = 'color-left-btn';
-    leftPart.appendChild(this.createButtonIcon());
-    leftPart.addEventListener('click', () => this.clickedOnLeft = true);
-    return leftPart;
+    if (!this.icon) {
+      this.icon = document.createElement('div');
+      this.icon.id = 'color-left-btn';
+      this.icon.appendChild(this.createButtonIcon());
+      this.icon.addEventListener('click', () => this.clickedOnLeft = true);
+    }
+
+    return this.icon;
   }
 
   /**
@@ -89,7 +93,7 @@ class Color {
     const buttonIcon = document.createElement('div');
     buttonIcon.id = 'color-btn-text';
     const defaultIcon = this.pluginType === 'marker' ? markerIcon : textIcon;
-    buttonIcon.innerHTML = this.icon || defaultIcon;
+    buttonIcon.innerHTML = this.config.icon || defaultIcon;
     return buttonIcon;
   }
 
@@ -99,15 +103,19 @@ class Color {
    * @return {HTMLElement}
    */
   createRightButton(sharedScope) {
-    return new Picker.ColorPlugin({
-      onColorPicked: function (value) {
-        sharedScope.color = value;
-      },
-      hasCustomPicker: this.hasCustomPicker,
-      defaultColor: this.config.defaultColor,
-      colorCollections: this.config.colorCollections,
-      type: this.pluginType
-    });
+    if (!this.picker) {
+      this.picker = new Picker.ColorPlugin({
+        onColorPicked: function (value) {
+          sharedScope.color = value;
+        },
+        hasCustomPicker: this.hasCustomPicker,
+        defaultColor: this.config.defaultColor,
+        colorCollections: this.config.colorCollections,
+        type: this.pluginType
+      });
+    }
+
+    return this.picker;
   }
 
   /**
@@ -270,6 +278,11 @@ class Color {
       mark: true
     };
   }
+
+  clear() {
+    this.picker = null;
+    this.icon = null;
+  }
 }
 
 module.exports = Color;
diff --git a/src/picker/index.js b/src/picker/index.js
@@ -5,7 +5,9 @@ import {
     getDefaultColorCache,
     throttle,
     getCustomColorCache,
-    setCustomColorCache
+    setCustomColorCache,
+    CONVERTER_BTN,
+    CONVERTER_PANEL,
 } from './utils/main';
 const ColorCollections = ['#ff1300','#EC7878','#9C27B0','#673AB7','#3F51B5','#0070FF','#03A9F4','#00BCD4','#4CAF50','#8BC34A','#CDDC39','#FFE500','#FFBF00','#FF9800','#795548','#9E9E9E','#5A5A5A','#FFF'];
 class ColorPlugin extends HTMLElement {
@@ -180,12 +182,21 @@ class ColorPlugin extends HTMLElement {
                 this.onColorPicked(this.value);
             }
         });
+        this.popover.addEventListener('click', () => this.closeConverter());
         if (this.hasCustomPicker) {
             this.setupCustomPicker();
         }
         this.value = this.defaultvalue;
     }
 
+    closeConverter() {
+        const conversionOpened = document.getElementsByClassName(CONVERTER_PANEL)[0];
+        if (conversionOpened) {
+            const converterBtn = document.getElementsByClassName(CONVERTER_BTN)[0];
+            converterBtn?.click();
+        }
+    }
+
     disconnectedCallback() {
         if (this.pickerInput) {
             document.body.removeChild(this.pickerInput);

diff --git a/src/picker/utils/main.js b/src/picker/utils/main.js
@@ -44,8 +44,9 @@ export function throttle(fn, delay) {
 
 /**
  * Cache the latest text/marker color
- * @param string defaultColor
- * @returns string defaultColor
+ * @param defaultColor
+ * @param pluginType
+ * @returns defaultColor
  */
 export function setDefaultColorCache(defaultColor, pluginType) {
     sessionStorage.setItem(`${TEXT_COLOR_CACHE}-${pluginType}`, JSON.stringify(defaultColor));
@@ -54,7 +55,8 @@ export function setDefaultColorCache(defaultColor, pluginType) {
 
 /**
  * Get cached text/marker color
- * @param string defaultColor
+ * @param defaultColor
+ * @param pluginType
  * @returns string cachedDefaultColor/defaultColor
  */
 export function getDefaultColorCache(defaultColor, pluginType) {
@@ -64,18 +66,22 @@ export function getDefaultColorCache(defaultColor, pluginType) {
 
 /**
  * Cache custom color
- * @param string customColor, string pluginType
+ * @param customColor,
+ * @param pluginType
  */
 export function setCustomColorCache(customColor, pluginType) {
     sessionStorage.setItem(`${TEXT_COLOR_CACHE}-${pluginType}-custom`, JSON.stringify(customColor));
 }
 
 /**
  * Get cached custom color
- * @param string customColor, string pluginType
+ * @param pluginType
  * @returns string cachedCustomColor
  */
 export function getCustomColorCache(pluginType) {
     const cachedCustomColor = sessionStorage.getItem(`${TEXT_COLOR_CACHE}-${pluginType}-custom`);
     return cachedCustomColor ? JSON.parse(cachedCustomColor) : null;
 }
+
+export const CONVERTER_BTN = 'ce-inline-toolbar__dropdown';
+export const CONVERTER_PANEL = 'ce-conversion-toolbar--showed';