Merge branch 'editor/toogle_highlight' into 'dev'

[editor] add text highlight action

See merge request discoursio/discoursio-webapp!75

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'

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;
+}

src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss

@@ -14,7 +14,7 @@
       margin-left: 4px;
     }
 
-    .colorWheel {
+    .toggleHighlight {
       display: inline-block;
       width: 20px;
       height: 20px;

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"