Merge pull request #493 from Harbour-Enterprises/har-9642_no-highlight

HAR-9642 Add no highlight option

Author: harbournick

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;

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,
     }),
   ]);

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 }) => {

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);

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,