From df33a6d88a90e7c8f2537f630dafe10c1d4d4fe8 Mon Sep 17 00:00:00 2001
From: VladaHarbour <dataart.vladyslava@harbourcollaborators.com>
Date: Thu, 8 May 2025 16:33:11 +0300
Subject: [PATCH] HAR-9642 Add no highlight option

---
 .../src/components/toolbar/IconGrid.vue       | 60 ++++++++++++++-----
 .../toolbar/color-dropdown-helpers.js         |  3 +-
 .../src/components/toolbar/defaultItems.js    |  3 +-
 .../src/components/toolbar/super-toolbar.js   | 12 +++-
 .../components/toolbar/use-toolbar-item.js    |  2 +
 shared/common/icons/droplet-slash.svg         |  1 +
 6 files changed, 63 insertions(+), 18 deletions(-)
 create mode 100644 shared/common/icons/droplet-slash.svg

diff --git a/packages/super-editor/src/components/toolbar/IconGrid.vue b/packages/super-editor/src/components/toolbar/IconGrid.vue
index ffc54337b6..7e9c313b85 100644
--- a/packages/super-editor/src/components/toolbar/IconGrid.vue
+++ b/packages/super-editor/src/components/toolbar/IconGrid.vue
@@ -1,5 +1,6 @@
 <script setup>
 import IconGridRow from './IconGridRow.vue';
+import DropIcon from '@harbour-enterprises/common/icons/droplet-slash.svg?raw';
 
 const emit = defineEmits(['select', 'clickoutside']);
 const props = defineProps({
@@ -15,6 +16,10 @@ const props = defineProps({
     type: Object,
     required: false,
   },
+  hasNoneIcon: {
+    type: Boolean,
+    required: false,
+  }
 });
 
 const handleSelect = (option) => {
@@ -24,31 +29,58 @@ const handleSelect = (option) => {
 </script>
 
 <template>
-  <div class="option-grid-ctn">
-    <IconGridRow 
-      :icons="icons"
-      :active-color="activeColor"
-      @select="handleSelect"
-    />
-    
-    <template v-if="customIcons.flat().length">
-      <span class="option-grid-ctn__subtitle">Custom colors</span>
-      
+  <div class="options-grid-wrap">
+    <div 
+      v-if="hasNoneIcon"
+      class="none-option"
+      @click="handleSelect('none')"
+    >
+      <span 
+        v-html="DropIcon"
+        class="none-icon"
+      ></span>
+      None
+    </div>
+    <div class="option-grid-ctn">
       <IconGridRow
-        :icons="customIcons"
+        :icons="icons"
         :active-color="activeColor"
         @select="handleSelect"
       />
-    </template>
+
+      <template v-if="customIcons.flat().length">
+        <span class="option-grid-ctn__subtitle">Custom colors</span>
+
+        <IconGridRow
+          :icons="customIcons"
+          :active-color="activeColor"
+          @select="handleSelect"
+        />
+      </template>
+    </div>
   </div>
 </template>
 
 <style scoped>
+.options-grid-wrap {
+  padding: 5px;
+  border-radius: 5px;
+}
+.none-option {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  &:hover {
+    opacity: 0.65;
+  }
+}
+.none-icon {
+  width: 16px;
+}
 .option-grid-ctn {
   display: flex;
   flex-direction: column;
-  padding: 5px;
-  border-radius: 5px;
   background-color: #fff;
   z-index: 3;
   box-sizing: border-box;
diff --git a/packages/super-editor/src/components/toolbar/color-dropdown-helpers.js b/packages/super-editor/src/components/toolbar/color-dropdown-helpers.js
index 5e249d874d..18d0eb3fac 100644
--- a/packages/super-editor/src/components/toolbar/color-dropdown-helpers.js
+++ b/packages/super-editor/src/components/toolbar/color-dropdown-helpers.js
@@ -20,7 +20,7 @@ export const makeColorOption = (color, label = null) => {
   };
 };
 
-export const renderColorOptions = (superToolbar, button, customIcons = []) => {
+export const renderColorOptions = (superToolbar, button, customIcons = [], hasNoneIcon = false) => {
   const handleSelect = (e) => {
     button.iconColor.value = e;
     superToolbar.emitCommand({ item: button, argument: e });
@@ -32,6 +32,7 @@ export const renderColorOptions = (superToolbar, button, customIcons = []) => {
       icons,
       customIcons,
       activeColor: button.iconColor,
+      hasNoneIcon,
       onSelect: handleSelect,
     }),
   ]);
diff --git a/packages/super-editor/src/components/toolbar/defaultItems.js b/packages/super-editor/src/components/toolbar/defaultItems.js
index 69ee594599..24994226a1 100644
--- a/packages/super-editor/src/components/toolbar/defaultItems.js
+++ b/packages/super-editor/src/components/toolbar/defaultItems.js
@@ -218,12 +218,13 @@ export const makeDefaultItems = (superToolbar, isDev = false, windowWidth, role,
     active: false,
     tooltip: 'Highlight color',
     command: 'setHighlight',
+    noArgumentCommand: 'unsetHighlight',
     suppressActiveHighlight: true,
     options: [
       {
         key: 'color',
         type: 'render',
-        render: () => renderColorOptions(superToolbar, highlight),
+        render: () => renderColorOptions(superToolbar, highlight, [], true),
       },
     ],
     onActivate: ({ color }) => {
diff --git a/packages/super-editor/src/components/toolbar/super-toolbar.js b/packages/super-editor/src/components/toolbar/super-toolbar.js
index 6312851c86..42b466cc39 100644
--- a/packages/super-editor/src/components/toolbar/super-toolbar.js
+++ b/packages/super-editor/src/components/toolbar/super-toolbar.js
@@ -322,7 +322,7 @@ export class SuperToolbar extends EventEmitter {
     const option = {
       key: 'color',
       type: 'render',
-      render: () => renderColorOptions(this, highlightItem, result),
+      render: () => renderColorOptions(this, highlightItem, result, true),
     }
 
     highlightItem.nestedOptions.value = [option];
@@ -459,8 +459,16 @@ export class SuperToolbar extends EventEmitter {
 
   #runCommandWithArgumentOnly({ item, argument }, callback) {
     if (!argument || !this.activeEditor) return;
-
+    
     let command = item.command;
+    const noArgumentCommand = item.noArgumentCommand;
+    
+    if (argument === 'none' && noArgumentCommand in this.activeEditor?.commands) {
+      this.activeEditor.commands[noArgumentCommand]();
+      this.updateToolbarState();
+      return;
+    }
+    
     if (command in this.activeEditor?.commands) {
       this.activeEditor.commands[command](argument);
       if (typeof callback === 'function') callback(argument);
diff --git a/packages/super-editor/src/components/toolbar/use-toolbar-item.js b/packages/super-editor/src/components/toolbar/use-toolbar-item.js
index 7eaea683f1..d3c66bd304 100644
--- a/packages/super-editor/src/components/toolbar/use-toolbar-item.js
+++ b/packages/super-editor/src/components/toolbar/use-toolbar-item.js
@@ -19,6 +19,7 @@ export const useToolbarItem = (options) => {
   const type = options.type;
   const name = ref(options.name);
   const command = options.command;
+  const noArgumentCommand = options.noArgumentCommand;
   const icon = ref(options.icon);
   const group = ref(options.group || 'center');
   const allowWithoutEditor = ref(options.allowWithoutEditor);
@@ -112,6 +113,7 @@ export const useToolbarItem = (options) => {
     name,
     type,
     command,
+    noArgumentCommand,
     icon,
     tooltip,
     group,
diff --git a/shared/common/icons/droplet-slash.svg b/shared/common/icons/droplet-slash.svg
new file mode 100644
index 0000000000..59b649abd1
--- /dev/null
+++ b/shared/common/icons/droplet-slash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 512c53.2 0 101.4-21.6 136.1-56.6l-298.3-235C140 257.1 128 292.3 128 320c0 106 86 192 192 192zM505.2 370.7c4.4-16.2 6.8-33.1 6.8-50.7c0-91.2-130.2-262.3-166.6-308.3C339.4 4.2 330.5 0 320.9 0l-1.8 0c-9.6 0-18.5 4.2-24.5 11.7C277.8 33 240.7 81.3 205.8 136L38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L505.2 370.7zM224 336c0 44.2 35.8 80 80 80c8.8 0 16 7.2 16 16s-7.2 16-16 16c-61.9 0-112-50.1-112-112c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg>