From 82430404e358c798cf40cb69f33063653b4662e7 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Tue, 9 May 2023 20:31:28 +0300
Subject: [PATCH] [editor] add text highlight action

---
 src/components/Editor/Editor.tsx                       |  7 ++++++-
 src/components/Editor/Prosemirror.scss                 |  5 +++++
 .../Editor/TextBubbleMenu/TextBubbleMenu.module.scss   |  2 +-
 .../Editor/TextBubbleMenu/TextBubbleMenu.tsx           | 10 ++++++++++
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
index ee4cf24a..716f379d 100644
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@@ -142,7 +142,12 @@ export const Editor = (props: EditorProps) => {
       Focus,
       Gapcursor,
       HardBreak,
-      Highlight,
+      Highlight.configure({
+        multicolor: true,
+        HTMLAttributes: {
+          class: 'highlight'
+        }
+      }),
       CustomImage.configure({
         HTMLAttributes: {
           class: 'uploadedImage'
diff --git a/src/components/Editor/Prosemirror.scss b/src/components/Editor/Prosemirror.scss
index 535d96f4..7538473a 100644
--- a/src/components/Editor/Prosemirror.scss
+++ b/src/components/Editor/Prosemirror.scss
@@ -72,3 +72,8 @@
 .horizontalRule {
   border-top: 2px solid #000;
 }
+
+mark.highlight {
+  box-decoration-break: clone;
+  padding: 0.125em 0;
+}
diff --git a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss
index 1de40e2b..d82cd864 100644
--- a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss
+++ b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss
@@ -14,7 +14,7 @@
       margin-left: 4px;
     }
 
-    .colorWheel {
+    .toggleHighlight {
       display: inline-block;
       width: 20px;
       height: 20px;
diff --git a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
index a282a05f..f0ae262b 100644
--- a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
+++ b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
@@ -36,6 +36,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
   const isOrderedList = isActive('isOrderedList')
   const isBulletList = isActive('isBulletList')
   const isLink = isActive('link')
+  const isHighlight = isActive('highlight')
 
   const toggleLinkForm = () => {
     setLinkEditorOpen(true)
@@ -191,6 +192,15 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
             >
               <Icon name="editor-italic" />
             </button>
+            <button
+              type="button"
+              class={clsx(styles.bubbleMenuButton, {
+                [styles.bubbleMenuButtonActive]: isHighlight()
+              })}
+              onClick={() => props.editor.chain().focus().toggleHighlight({ color: '#F6E3A1' }).run()}
+            >
+              <div class={styles.toggleHighlight} />
+            </button>
             <div class={styles.delimiter} />
             <button
               type="button"