feat(texteditor): add minimize buttons to toolbars

Author: habibayman

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue

@@ -9,10 +9,14 @@
       <EditorToolbar
         v-if="!isMobile"
         v-on="sharedEventHandlers"
+        @minimize="emitMinimize"
       />
 
       <div v-else>
-        <MobileTopBar v-on="sharedEventHandlers" />
+        <MobileTopBar
+          v-on="sharedEventHandlers"
+          @minimize="emitMinimize"
+        />
         <MobileFormattingBar
           v-if="isFocused"
           v-on="sharedEventHandlers"
@@ -245,6 +249,13 @@
         imageHandler,
         sharedEventHandlers,
         editorMode: computed(() => props.mode),
+        emitMinimize: () => {
+          // force lose focus
+          if (editor.value) {
+            emit('minimize');
+            editor.value.commands.blur();
+          }
+        },
       };
     },
     props: {

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue

@@ -114,7 +114,7 @@
       />
     </div>
 
-    <ToolbarDivider v-if="visibleCategories.includes('scripts')" />
+    <ToolbarDivider v-if="visibleCategories.includes('script')" />
 
     <!-- Insert tools -->
     <div
@@ -271,6 +271,11 @@
         </template>
       </div>
     </div>
+    <ToolbarButton
+      :title="minimizeAction.title"
+      :icon="minimizeAction.icon"
+      @click="minimizeAction.handler"
+    />
   </div>
 
 </template>
@@ -303,10 +308,10 @@
       // TODO: Maybe these shouldnt be hardcoded?
       const OVERFLOW_BREAKPOINTS = {
         insert: 750,
-        script: 650,
-        lists: 550,
-        clearFormat: 450,
-        clipboard: 405,
+        script: 660,
+        lists: 600,
+        clearFormat: 500,
+        clipboard: 465,
       };
 
       // Categories that can overflow (in order of overflow priority)
@@ -321,7 +326,8 @@
         listActions,
         scriptActions,
         insertTools,
-      } = useToolbarActions();
+        minimizeAction,
+      } = useToolbarActions(emit);
 
       const { pasteOptions } = useDropdowns();
 
@@ -472,6 +478,7 @@
         listActions,
         scriptActions,
         insertTools,
+        minimizeAction,
         pasteOptions,
         copy$,
         textFormattingToolbar$,
@@ -495,14 +502,18 @@
   .toolbar {
     position: relative;
     display: flex;
-    gap: 4px;
+    gap: 6px;
     align-items: center;
-    padding: 8px 4px;
+    padding: 8px;
     background: #f8f9fa;
     border-bottom: 1px solid #e1e5e9;
     border-radius: 8px 8px 0 0;
   }
 
+  .toolbar > :last-child {
+    margin-left: auto;
+  }
+
   [role='group'] {
     display: flex;
     gap: 2px;
@@ -581,10 +592,4 @@
     }
   }
 
-  @media (max-width: 820px) {
-    .toolbar {
-      gap: 1px;
-    }
-  }
-
 </style>

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue

@@ -211,7 +211,7 @@
     gap: 8px;
     align-items: center;
     justify-content: space-between;
-    min-width: 80px;
+    min-width: 100px;
     padding: 6px 8px;
     font-size: 14px;
     color: #495057;

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileTopBar.vue

@@ -1,7 +1,7 @@
 <template>
 
   <div
-    class="top-bar"
+    class="toolbar top-bar"
     role="toolbar"
     aria-label="Editor controls"
   >
@@ -21,17 +21,24 @@
     </div>
 
     <div class="insert-container">
-      <button
-        class="insert-button"
-        title="Insert content"
-        aria-label="Insert content menu"
-        :aria-expanded="isInsertMenuOpen"
-        aria-haspopup="menu"
-        aria-controls="insert-menu"
-        @click="isInsertMenuOpen = !isInsertMenuOpen"
-      >
-        +
-      </button>
+      <div class="topbar-actions">
+        <button
+          class="insert-button"
+          title="Insert content"
+          aria-label="Insert content menu"
+          :aria-expanded="isInsertMenuOpen"
+          aria-haspopup="menu"
+          aria-controls="insert-menu"
+          @click="isInsertMenuOpen = !isInsertMenuOpen"
+        >
+          +
+        </button>
+        <ToolbarButton
+          :title="minimizeAction.title"
+          :icon="minimizeAction.icon"
+          @click="minimizeAction.handler"
+        />
+      </div>
 
       <div
         v-if="isInsertMenuOpen"
@@ -76,7 +83,7 @@
       const isInsertMenuOpen = ref(false);
       const dropdown = ref(null);
 
-      const { historyActions, insertTools } = useToolbarActions(emit);
+      const { historyActions, insertTools, minimizeAction } = useToolbarActions(emit);
 
       const handleClickOutside = event => {
         if (
@@ -100,6 +107,7 @@
       return {
         historyActions,
         insertTools,
+        minimizeAction,
         isInsertMenuOpen,
         dropdown,
       };
@@ -113,7 +121,8 @@
 
   .top-bar {
     display: flex;
-    flex-shrink: 0;
+
+    /* flex-shrink: 0; */
     align-items: center;
     justify-content: space-between;
     padding: 0.5rem;
@@ -125,25 +134,35 @@
     gap: 0.25rem;
   }
 
+  .topbar-actions {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+
   .insert-container {
     position: relative;
   }
 
   .insert-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 36px;
     min-width: 44px;
     height: 36px;
     min-height: 44px;
-    font-size: 1.6rem;
+    font-size: 2.5rem;
     color: #666666;
     cursor: pointer;
+    opacity: 0.8;
   }
 
   .insert-dropdown {
     position: absolute;
     top: calc(100% + 8px);
     right: 0;
-    z-index: 10;
+    z-index: 2;
     width: 200px;
     padding: 0.5rem 0;
     background: white;

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/PasteDropdown.vue

@@ -262,8 +262,8 @@
   }
 
   .toolbar-icon {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
     opacity: 0.7;
   }
 
@@ -306,8 +306,8 @@
   }
 
   .dropdown-arrow {
-    width: 12px;
-    height: 12px;
+    width: 15px;
+    height: 15px;
     opacity: 0.9;
   }
 
@@ -340,7 +340,6 @@
       BlinkMacSystemFont,
       'Segoe UI',
       sans-serif;
-    font-size: 14px;
     line-height: 140%;
     color: #000000;
     cursor: pointer;
@@ -359,8 +358,8 @@
   }
 
   .dropdown-item-icon {
-    width: 16px;
-    height: 16px;
+    width: 18px;
+    height: 18px;
     opacity: 0.7;
   }
 

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/ToolbarButton.vue

@@ -133,8 +133,8 @@
   }
 
   .toolbar-icon {
-    width: 21px;
-    height: 21px;
+    width: 1.7rem;
+    height: 1.7rem;
     opacity: 0.7;
   }
 

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useToolbarActions.js

@@ -241,6 +241,10 @@ export function useToolbarActions(emit) {
     }
   };
 
+  const handleMinimize = () => {
+    emit('minimize');
+  };
+
   // Helper function to check if a mark is active
   const isMarkActive = markName => {
     return editor?.value?.isActive(markName) || false;
@@ -393,6 +397,13 @@ export function useToolbarActions(emit) {
     },
   ]);
 
+  const minimizeAction = {
+    name: 'minimize',
+    title: 'Minimize Toolbar',
+    icon: require('../../assets/icon-unfold.svg'),
+    handler: handleMinimize,
+  };
+
   return {
     // Individual handlers
     handleUndo,
@@ -422,5 +433,6 @@ export function useToolbarActions(emit) {
     listActions,
     scriptActions,
     insertTools,
+    minimizeAction,
   };
 }