leksy-editor 2.4.1 → 2.5.0

package/README.md

@@ -110,6 +110,7 @@ const app = createApp({
 | `showTabs` | Enables or disables the display of tabs. |
 | `enableFindAndReplace` | To enabled find and replace feature|
 | `customTooltip` | Customize tooltip according to your need, set using key-value pair|
+| `customIcon` | Customize icon according to your need, set using key-value pair|
 
 ### CSS Customization
 

package/index.js

@@ -32,7 +32,9 @@ class LeksyEditor {
      * @property {Boolean} disabled
      * @property {Function} onFullScreen
      * @property {Boolean} showTabs
-     * @property {Boolean} enableFindAndReplace 
+     * @property {Boolean} enableFindAndReplace
+     * @property {Array<Object>} customTooltip
+     * @property {Array<Object>} customIcon
      */
     /**
      * 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leksy-editor",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "Leksy Editor is an alternative to traditional WYSIWYG editors, designed primarily for creating mail templates, blogs, and documents without any content manipulation.",
   "main": "index.js",
   "directories": {

package/utilities.js

@@ -204,6 +204,10 @@ const getTooltip = (plugin, options) => {
     return options?.customTooltip?.[plugin.pluginId] ?? plugin.title
 }
 
+const getToolbarIcon = (plugin, options) => {
+    return options?.customIcon?.[plugin.pluginId] ?? plugin.icon
+}
+
 const makeToolbarButton = (_plugin, options, core) => {
     const pluginButton = document.createElement('button');
     pluginButton.type = "button"
@@ -217,7 +221,7 @@ const makeToolbarButton = (_plugin, options, core) => {
     };
 
     const pluginIcon = document.createElement('div');
-    pluginIcon.innerHTML = _plugin.icon;
+    pluginIcon.innerHTML = getToolbarIcon(_plugin, options);
     pluginButton.appendChild(pluginIcon)
     return pluginButton
 }
@@ -236,7 +240,7 @@ const makeToolbarButtonSelect = (_plugin, options, core) => {
     };
 
     const pluginIcon = document.createElement('div');
-    pluginIcon.innerHTML = _plugin.icon;
+    pluginIcon.innerHTML = getToolbarIcon(_plugin, options);
     pluginButton.appendChild(pluginIcon)
     const pluginSelect = makeToolbarSelect({ ..._plugin, icon: '' }, options, core);
 
@@ -265,7 +269,7 @@ const makeToolbarColor = (_plugin, options, core) => {
     };
 
     const pluginIcon = document.createElement('div');
-    pluginIcon.innerHTML = _plugin.icon;
+    pluginIcon.innerHTML = getToolbarIcon(_plugin, options);
     pluginIcon.onclick = () => pluginButton.click()
     pluginContainer.append(pluginButton, pluginIcon)
     return pluginContainer
@@ -348,7 +352,7 @@ const makeToolbarDropdown = (_plugin, options, core) => {
     dropdownButton.setAttribute('data-title', getTooltip(_plugin, options))
 
     const pluginIcon = document.createElement('div');
-    pluginIcon.innerHTML = _plugin.icon;
+    pluginIcon.innerHTML = getToolbarIcon(_plugin, options);
     dropdownButton.appendChild(pluginIcon)
 
     const dropdownContent = document.createElement('div');
@@ -597,7 +601,7 @@ const makeToolbarSelect = (_plugin, options, core) => {
     pluginIcon.style.justifyContent = 'space-between'
 
     const iconName = document.createElement('span');
-    iconName.innerHTML = _plugin.icon;
+    iconName.innerHTML = getToolbarIcon(_plugin, options);
 
     const arrow = document.createElement('span');
     if (_plugin.type == 'button-select') {