fix: rearrange toolbar icons by marks, nodes and history

gbicou · Mar 30, 2023 · 1841fef · 1841fef
1 parent 2c9ea5b
commit 1841fef
Showing 1 changed file with 27 additions and 11 deletions.
diff --git a/src/tiptap-editor.vue b/src/tiptap-editor.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="tiptap-editor" :class="{ disabled: props.disabled }">
     <div class="tiptap-editor__toolbar">
+      <!-- marks -->
+
       <v-button
         v-tooltip="t('wysiwyg_options.bold') + ' - ' + translateShortcut(['meta', 'b'])"
         small
@@ -45,6 +47,21 @@
         <v-icon name="format_underline" />
       </v-button>
 
+      <v-button
+        v-tooltip="t('wysiwyg_options.codeblock') + ' - ' + translateShortcut(['meta', 'e'])"
+        small
+        icon
+        :disabled="props.disabled"
+        :active="editor.isActive('code')"
+        @click="editor.chain().focus().toggleCode().run()"
+      >
+        <v-icon name="code" />
+      </v-button>
+
+      <div class="divider" />
+
+      <!-- nodes -->
+
       <v-button
         v-tooltip="t('wysiwyg_options.bullist') + ' - ' + translateShortcut(['meta', 'shift', '8'])"
         small
@@ -78,17 +95,6 @@
         <v-icon name="format_quote" />
       </v-button>
 
-      <v-button
-        v-tooltip="t('wysiwyg_options.codeblock') + ' - ' + translateShortcut(['meta', 'e'])"
-        small
-        icon
-        :disabled="props.disabled"
-        :active="editor.isActive('code')"
-        @click="editor.chain().focus().toggleCode().run()"
-      >
-        <v-icon name="code" />
-      </v-button>
-
       <v-button
         v-tooltip="t('wysiwyg_options.hr')"
         small
@@ -101,6 +107,8 @@
 
       <div class="spacer" />
 
+      <!-- history -->
+
       <v-button
         v-tooltip="t('wysiwyg_options.undo') + ' - ' + translateShortcut(['meta', 'z'])"
         small
@@ -180,6 +188,14 @@
       margin-left: 2px;
     }
 
+    .divider {
+      width: 2px;
+      height: 24px;
+      background: var(--border-normal);
+      margin: 0 4px;
+      opacity: 0.5;
+    }
+
     .spacer {
       flex-grow: 1;
     }