fix(text-editor): put most used controls in the toolbar first

Since the toolbar can truncate actions that are not fitting into the available space, we need to make sure that we have the frequently used actions displayed first.
Lundalogik · Jun 11, 2024 · 1061c72 · 1061c72
1 parent 5335ab7
commit 1061c72
Showing 1 changed file with 25 additions and 23 deletions.
diff --git a/src/components/text-editor/prosemirror-adapter/menu/menu-items.ts b/src/components/text-editor/prosemirror-adapter/menu/menu-items.ts
@@ -46,18 +46,23 @@ const textEditorMenuItems: Array<
         selected: false,
     },
     {
-        value: EditorMenuTypes.Code,
-        text: 'Code',
-        commandText: `${mod} \``,
-        icon: '-lime-text-code',
+        value: EditorMenuTypes.Link,
+        text: 'Link',
+        icon: '-lime-text-link',
+        iconOnly: true,
+    },
+    { separator: true },
+    {
+        value: EditorMenuTypes.BulletList,
+        text: 'Bullet list',
+        icon: '-lime-text-bulleted-list',
         iconOnly: true,
         selected: false,
     },
     {
-        value: EditorMenuTypes.CodeBlock,
-        text: 'Code Block',
-        commandText: `${mod} ${shift} C`,
-        icon: '-lime-text-code-block',
+        value: EditorMenuTypes.OrderedList,
+        text: 'Numbered list',
+        icon: '-lime-text-ordered-list',
         iconOnly: true,
         selected: false,
     },
@@ -88,32 +93,29 @@ const textEditorMenuItems: Array<
     },
     { separator: true },
     {
-        value: EditorMenuTypes.BulletList,
-        text: 'Bullet list',
-        icon: '-lime-text-bulleted-list',
+        value: EditorMenuTypes.Blockquote,
+        text: 'Blockquote',
+        icon: '-lime-text-blockquote',
         iconOnly: true,
         selected: false,
     },
+    { separator: true },
     {
-        value: EditorMenuTypes.OrderedList,
-        text: 'Numbered list',
-        icon: '-lime-text-ordered-list',
+        value: EditorMenuTypes.Code,
+        text: 'Code',
+        commandText: `${mod} \``,
+        icon: '-lime-text-code',
         iconOnly: true,
         selected: false,
     },
     {
-        value: EditorMenuTypes.Blockquote,
-        text: 'Blockquote',
-        icon: '-lime-text-blockquote',
+        value: EditorMenuTypes.CodeBlock,
+        text: 'Code Block',
+        commandText: `${mod} ${shift} C`,
+        icon: '-lime-text-code-block',
         iconOnly: true,
         selected: false,
     },
-    {
-        value: EditorMenuTypes.Link,
-        text: 'Link',
-        icon: '-lime-text-link',
-        iconOnly: true,
-    },
 ];
 
 export const getTextEditorMenuItems = () => cloneDeep(textEditorMenuItems);