From 608f89c78813ea5feb51ec72f0a62637578e70e3 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 20 Aug 2023 06:39:10 -0700
Subject: [PATCH] Add focus states

---
 .../common/MentionEditor/index.module.scss    | 61 +++++++++++++++++++
 extensions/FilterMention/index.tsx            | 12 ++++
 2 files changed, 73 insertions(+)

diff --git a/components/common/MentionEditor/index.module.scss b/components/common/MentionEditor/index.module.scss
index 18fd389c..4aa11680 100644
--- a/components/common/MentionEditor/index.module.scss
+++ b/components/common/MentionEditor/index.module.scss
@@ -55,6 +55,11 @@
       margin: $unit-fourth;
       transition: all 0.1s ease-out;
 
+      :global(.remove) {
+        display: none;
+        padding: 0 $unit-half;
+      }
+
       &:hover {
         background: var(--null-bg-hover);
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
@@ -63,18 +68,34 @@
         cursor: pointer;
       }
 
+      &:focus {
+        outline: 2px solid blue;
+
+        :global(.remove) {
+          display: block;
+        }
+      }
+
       &[data-element='fire'] {
         background: var(--fire-bg);
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
           0 1px 0px var(--fire-shadow);
         color: var(--fire-text);
 
+        :global(.remove) {
+          color: var(--fire-text);
+        }
+
         &:hover {
           background: var(--fire-bg-hover);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--fire-shadow-hover);
           color: var(--fire-text-hover);
         }
+
+        &:focus {
+          outline: 2px solid var(--fire-shadow-hover);
+        }
       }
 
       &[data-element='water'] {
@@ -83,12 +104,20 @@
           0 1px 0px var(--water-shadow);
         color: var(--water-text);
 
+        :global(.remove) {
+          color: var(--water-text);
+        }
+
         &:hover {
           background: var(--water-bg-hover);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--water-shadow-hover);
           color: var(--water-text-hover);
         }
+
+        &:focus {
+          outline: 2px solid var(--water-shadow-hover);
+        }
       }
 
       &[data-element='earth'] {
@@ -97,12 +126,20 @@
           0 1px 0px var(--earth-shadow);
         color: var(--earth-text);
 
+        :global(.remove) {
+          color: var(--earth-text);
+        }
+
         &:hover {
           background: var(--earth-bg-hover);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--earth-shadow-hover);
           color: var(--earth-text-hover);
         }
+
+        &:focus {
+          outline: 2px solid var(--earth-shadow-hover);
+        }
       }
 
       &[data-element='wind'] {
@@ -111,11 +148,19 @@
           0 1px 0px var(--wind-shadow);
         color: var(--wind-text);
 
+        :global(.remove) {
+          color: var(--wind-text);
+        }
+
         &:hover {
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--wind-shadow-hover);
           color: var(--wind-text-hover);
         }
+
+        &:focus {
+          outline: 2px solid var(--wind-shadow-hover);
+        }
       }
 
       &[data-element='dark'] {
@@ -124,12 +169,20 @@
           0 1px 0px var(--dark-shadow);
         color: var(--dark-text);
 
+        :global(.remove) {
+          color: var(--dark-text);
+        }
+
         &:hover {
           background: var(--dark-bg-hover);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--dark-shadow-hover);
           color: var(--dark-text-hover);
         }
+
+        &:focus {
+          outline: 2px solid var(--dark-shadow-hover);
+        }
       }
 
       &[data-element='light'] {
@@ -138,12 +191,20 @@
           0 1px 0px var(--light-shadow);
         color: var(--light-text);
 
+        :global(.remove) {
+          color: var(--light-text);
+        }
+
         &:hover {
           background: var(--light-bg-hover);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--light-shadow-hover);
           color: var(--light-text-hover);
         }
+
+        &:focus {
+          outline: 2px solid var(--light-shadow-hover);
+        }
       }
     }
   }
diff --git a/extensions/FilterMention/index.tsx b/extensions/FilterMention/index.tsx
index 9ebad2f5..72f5f719 100644
--- a/extensions/FilterMention/index.tsx
+++ b/extensions/FilterMention/index.tsx
@@ -117,6 +117,17 @@ export const FilterMention = Node.create<MentionOptions>({
   },
 
   renderHTML({ node, HTMLAttributes }) {
+    const removeButton = [
+      'span',
+      {
+        class: 'remove',
+        onclick: () => {
+          // Add functionality for the button click here
+        },
+      },
+      '\u00D7', // Unicode for the multiplication symbol
+    ]
+
     return [
       'div',
       mergeAttributes(
@@ -130,6 +141,7 @@ export const FilterMention = Node.create<MentionOptions>({
         options: this.options,
         node,
       }),
+      removeButton,
     ]
   },