fix invalid state class in dark mode

resources/scripts/components/base-select/BaseMultiselect.vue

@@ -437,21 +437,22 @@ export default {
       required: false,
       default: () => ({
         container:
-          'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 rounded-md bg-white text-sm leading-snug outline-none max-h-10',
+          'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-sm leading-snug outline-none max-h-10',
         containerDisabled:
-          'cursor-default bg-gray-200 bg-opacity-50 !text-gray-400',
+          'bg-gray-200 bg-opacity-50 !text-gray-400 dark:!text-gray-800 !dark:text-gray-500 !cursor-default dark:opacity-25',
         containerOpen: '',
         containerOpenTop: '',
         containerActive: 'ring-1 ring-primary-400 border-primary-400',
         containerInvalid:
-          'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400',
+          'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500 dark:border-red-500 dark:ring-red-500 dark:focus:ring-red-500 dark:focus:border-red-500',
-        containerInvalidActive: 'ring-1 border-red-400 ring-red-400',
+        containerInvalidActive:
+          'ring-1 border-red-500 ring-red-500 dark:ring-1 dark:border-red-500 dark:ring-red-500',
         singleLabel:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 dark:text-white',
         multipleLabel:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 dark:text-white',
         search:
-          'w-full absolute inset-0 outline-none appearance-none box-border border-0 text-sm font-sans bg-white rounded-md pl-3.5',
+          'w-full absolute inset-0 outline-none appearance-none box-border border-0 text-sm font-sans bg-white rounded-md pl-3.5 border-transparent focus:border-transparent focus:ring-0 dark:bg-gray-700 dark:text-white',
         tags: 'grow shrink flex flex-wrap mt-1 pl-2',
         tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap',
         tagDisabled: 'pr-2 !bg-gray-400 text-white',
@@ -461,12 +462,12 @@ export default {
           'bg-multiselect-remove text-white bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
         tagsSearchWrapper: 'inline-block relative mx-1 mb-1 grow shrink h-full',
         tagsSearch:
-          'absolute inset-0 border-0 focus:outline-none !shadow-none !focus:shadow-none appearance-none p-0 text-sm font-sans box-border w-full',
+          'absolute inset-0 border-0 focus:outline-none !shadow-none !focus:shadow-none appearance-none p-0 sm:text-sm font-sans box-border w-full dark:bg-gray-700',
         tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
         placeholder:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 text-sm',
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 sm:text-sm dark:text-gray-500',
         caret:
-          'bg-multiselect-caret bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform',
+          'bg-multiselect-caret-black dark:bg-multiselect-caret-white bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform dark:text-white',
         caretOpen: 'rotate-180 pointer-events-auto',
         clear:
           'pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80',
@@ -475,7 +476,7 @@ export default {
         spinner:
           'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0',
         dropdown:
-          'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 translate-y-full border border-gray-300 mt-1 overflow-y-auto z-50 bg-white flex flex-col rounded-md',
+          'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 translate-y-full border border-gray-300 mt-1 overflow-y-auto z-50 bg-white dark:border-gray-600 flex flex-col rounded-md dark:bg-gray-800 dark:shadow-glass',
         dropdownTop:
           '-translate-y-full -top-2 bottom-auto flex-col-reverse rounded-md',
         dropdownHidden: 'hidden',
@@ -483,7 +484,7 @@ export default {
         optionsTop: 'flex-col-reverse',
         group: 'p-0 m-0',
         groupLabel:
-          'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
+          'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 dark:bg-gray-700 dark:text-gray-400 cursor-default leading-normal',
         groupLabelPointable: 'cursor-pointer',
         groupLabelPointed: 'bg-gray-300 text-gray-700',
         groupLabelSelected: 'bg-primary-600 text-white',
@@ -493,15 +494,18 @@ export default {
           'text-primary-100 bg-primary-600 bg-opacity-50 cursor-not-allowed',
         groupOptions: 'p-0 m-0',
         option:
-          'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3',
+          'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3 dark:text-gray-200',
-        optionPointed: 'text-gray-800 bg-gray-100',
+        optionPointed:
+          'text-gray-800 bg-gray-100 dark:text-white dark:bg-gray-700/30',
         optionSelected: 'text-white bg-primary-500',
-        optionDisabled: 'text-gray-300 cursor-not-allowed',
+        optionDisabled: 'text-gray-300 cursor-not-allowed dark:text-gray-400',
         optionSelectedPointed: 'text-white bg-primary-500 opacity-90',
         optionSelectedDisabled:
           'text-primary-100 bg-primary-500 bg-opacity-50 cursor-not-allowed',
-        noOptions: 'py-2 px-3 text-gray-600 bg-white',
+        noOptions:
-        noResults: 'py-2 px-3 text-gray-600 bg-white',
+          'py-2 px-3 text-gray-600 bg-white dark:bg-gray-700 dark:text-gray-200',
+        noResults:
+          'py-2 px-3 text-gray-600 bg-white dark:bg-gray-700 dark:text-gray-200',
         fakeInput:
           'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
         spacer: 'h-9 py-px box-content',

resources/scripts/components/base/base-editor/BaseEditor.vue

@@ -16,15 +16,13 @@
       text-left
       bg-white
       border border-gray-200
-      dark:border-gray-600
       rounded-md
       min-h-[200px]
       overflow-hidden
-      dark:bg-gray-700 dark:text-white
     "
   >
     <div v-if="editor" class="editor-content">
-      <div class="flex justify-end p-2 border-b border-gray-200 dark:border-gray-600 md:hidden">
+      <div class="flex justify-end p-2 border-b border-gray-200 md:hidden">
         <BaseDropdown width-class="w-48">
           <template #activator>
             <div
@@ -44,256 +42,6 @@
               <dots-vertical-icon class="w-6 h-6 text-gray-600" />
             </div>
           </template>
-          <div class="flex flex-wrap space-x-1 dark:text-white">
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bold') }"
-              @click="editor.chain().focus().toggleBold().run()"
-            >
-              <bold-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('italic') }"
-              @click="editor.chain().focus().toggleItalic().run()"
-            >
-              <italic-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('strike') }"
-              @click="editor.chain().focus().toggleStrike().run()"
-            >
-              <strikethrough-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('code') }"
-              @click="editor.chain().focus().toggleCode().run()"
-            >
-              <coding-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('paragraph') }"
-              @click="editor.chain().focus().setParagraph().run()"
-            >
-              <paragraph-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{
-                'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 1 }),
-              }"
-              @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
-            >
-              H1
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{
-                'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 2 }),
-              }"
-              @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-            >
-              H2
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{
-                'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 3 }),
-              }"
-              @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
-            >
-              H3
-            </span>
-
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bulletList') }"
-              @click="editor.chain().focus().toggleBulletList().run()"
-            >
-              <list-ul-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('orderedList') }"
-              @click="editor.chain().focus().toggleOrderedList().run()"
-            >
-              <list-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('blockquote') }"
-              @click="editor.chain().focus().toggleBlockquote().run()"
-            >
-              <quote-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('codeBlock') }"
-              @click="editor.chain().focus().toggleCodeBlock().run()"
-            >
-              <code-block-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('undo') }"
-              @click="editor.chain().focus().undo().run()"
-            >
-              <undo-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('redo') }"
-              @click="editor.chain().focus().redo().run()"
-            >
-              <redo-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-          </div>
-        </BaseDropdown>
-      </div>
-      <div class="hidden p-2 border-b border-gray-200 dark:border-gray-600 md:flex">
           <div class="flex flex-wrap space-x-1">
             <span
               class="
@@ -305,9 +53,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bold') }"
+              :class="{ 'bg-gray-200': editor.isActive('bold') }"
               @click="editor.chain().focus().toggleBold().run()"
             >
               <bold-icon class="h-3 cursor-pointer fill-current" />
@@ -322,9 +69,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('italic') }"
+              :class="{ 'bg-gray-200': editor.isActive('italic') }"
               @click="editor.chain().focus().toggleItalic().run()"
             >
               <italic-icon class="h-3 cursor-pointer fill-current" />
@@ -339,9 +85,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('strike') }"
+              :class="{ 'bg-gray-200': editor.isActive('strike') }"
               @click="editor.chain().focus().toggleStrike().run()"
             >
               <strikethrough-icon class="h-3 cursor-pointer fill-current" />
@@ -356,9 +101,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('code') }"
+              :class="{ 'bg-gray-200': editor.isActive('code') }"
               @click="editor.chain().focus().toggleCode().run()"
             >
               <coding-icon class="h-3 cursor-pointer fill-current" />
@@ -373,9 +117,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('paragraph') }"
+              :class="{ 'bg-gray-200': editor.isActive('paragraph') }"
               @click="editor.chain().focus().setParagraph().run()"
             >
               <paragraph-icon class="h-3 cursor-pointer fill-current" />
@@ -390,9 +133,10 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 1 }) }"
+              :class="{
+                'bg-gray-200': editor.isActive('heading', { level: 1 }),
+              }"
               @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
             >
               H1
@@ -407,9 +151,10 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 2 }) }"
+              :class="{
+                'bg-gray-200': editor.isActive('heading', { level: 2 }),
+              }"
               @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
             >
               H2
@@ -424,9 +169,10 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 3 }) }"
+              :class="{
+                'bg-gray-200': editor.isActive('heading', { level: 3 }),
+              }"
               @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
             >
               H3
@@ -442,9 +188,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bulletList') }"
+              :class="{ 'bg-gray-200': editor.isActive('bulletList') }"
               @click="editor.chain().focus().toggleBulletList().run()"
             >
               <list-ul-icon class="h-3 cursor-pointer fill-current" />
@@ -459,9 +204,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('orderedList') }"
+              :class="{ 'bg-gray-200': editor.isActive('orderedList') }"
               @click="editor.chain().focus().toggleOrderedList().run()"
             >
               <list-icon class="h-3 cursor-pointer fill-current" />
@@ -476,9 +220,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('blockquote') }"
+              :class="{ 'bg-gray-200': editor.isActive('blockquote') }"
               @click="editor.chain().focus().toggleBlockquote().run()"
             >
               <quote-icon class="h-3 cursor-pointer fill-current" />
@@ -493,9 +236,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('codeBlock') }"
+              :class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
               @click="editor.chain().focus().toggleCodeBlock().run()"
             >
               <code-block-icon class="h-3 cursor-pointer fill-current" />
@@ -510,9 +252,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('undo') }"
+              :class="{ 'bg-gray-200': editor.isActive('undo') }"
               @click="editor.chain().focus().undo().run()"
             >
               <undo-icon class="h-3 cursor-pointer fill-current" />
@@ -527,9 +268,238 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('redo') }"
+              :class="{ 'bg-gray-200': editor.isActive('redo') }"
+              @click="editor.chain().focus().redo().run()"
+            >
+              <redo-icon class="h-3 cursor-pointer fill-current" />
+            </span>
+          </div>
+        </BaseDropdown>
+      </div>
+      <div class="hidden p-2 border-b border-gray-200 md:flex">
+        <div class="flex flex-wrap space-x-1">
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('bold') }"
+            @click="editor.chain().focus().toggleBold().run()"
+          >
+            <bold-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('italic') }"
+            @click="editor.chain().focus().toggleItalic().run()"
+          >
+            <italic-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('strike') }"
+            @click="editor.chain().focus().toggleStrike().run()"
+          >
+            <strikethrough-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('code') }"
+            @click="editor.chain().focus().toggleCode().run()"
+          >
+            <coding-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('paragraph') }"
+            @click="editor.chain().focus().setParagraph().run()"
+          >
+            <paragraph-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('heading', { level: 1 }) }"
+            @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+          >
+            H1
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('heading', { level: 2 }) }"
+            @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+          >
+            H2
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('heading', { level: 3 }) }"
+            @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+          >
+            H3
+          </span>
+
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('bulletList') }"
+            @click="editor.chain().focus().toggleBulletList().run()"
+          >
+            <list-ul-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('orderedList') }"
+            @click="editor.chain().focus().toggleOrderedList().run()"
+          >
+            <list-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('blockquote') }"
+            @click="editor.chain().focus().toggleBlockquote().run()"
+          >
+            <quote-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
+            @click="editor.chain().focus().toggleCodeBlock().run()"
+          >
+            <code-block-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('undo') }"
+            @click="editor.chain().focus().undo().run()"
+          >
+            <undo-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('redo') }"
             @click="editor.chain().focus().redo().run()"
           >
             <redo-icon class="h-3 cursor-pointer fill-current" />
@@ -544,9 +514,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'left' }) }"
+            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'left' }) }"
             @click="editor.chain().focus().setTextAlign('left').run()"
           >
             <menu-alt2-icon class="h-5 cursor-pointer fill-current" />
@@ -561,9 +530,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'right' }) }"
+            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'right' }) }"
             @click="editor.chain().focus().setTextAlign('right').run()"
           >
             <menu-alt3-icon class="h-5 cursor-pointer fill-current" />
@@ -578,10 +546,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
             :class="{
-              'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'justify' }),
+              'bg-gray-200': editor.isActive({ textAlign: 'justify' }),
             }"
             @click="editor.chain().focus().setTextAlign('justify').run()"
           >
@@ -597,9 +564,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'center' }) }"
+            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'center' }) }"
             @click="editor.chain().focus().setTextAlign('center').run()"
           >
             <menu-center-icon class="h-5 cursor-pointer fill-current" />

tailwind.config.js

@@ -44,10 +44,15 @@ module.exports = {
         88: '22rem',
       },
       backgroundImage: (theme) => ({
-        'multiselect-caret': `url("${svgToDataUri(
+        'multiselect-caret-black': `url("${svgToDataUri(
-          `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="black">
             <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
-</svg>`
+          </svg>`,
+        )}")`,
+        'multiselect-caret-white': `url("${svgToDataUri(
+          `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
+            <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+          </svg>`,
         )}")`,
         'multiselect-spinner': `url("${svgToDataUri(
           `<svg viewBox="0 0 512 512" fill="${theme(