feat: enhance ToolbarButtons with improved heading selection and styling

apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx

@@ -1,4 +1,5 @@
-import { NodeViewWrapper } from '@tiptap/react'
+import { NodeViewProps, NodeViewWrapper } from '@tiptap/react'
+import { Node } from '@tiptap/core'
 import { 
   Loader2, Video, Upload, X, HelpCircle, 
   Maximize2, Minimize2, ArrowLeftRight, 
@@ -133,23 +134,30 @@ interface VideoBlockObject {
   size: VideoSize
 }
 
-interface VideoBlockProps {
+interface VideoBlockAttrs {
-  node: {
-    attrs: {
   blockObject: VideoBlockObject | LegacyVideoBlockObject | null
+}
+
+interface VideoBlockExtension {
+  options: {
+    activity: {
+      activity_uuid: string
     }
   }
-  extension: {
+}
+
+interface ExtendedNodeViewProps extends Omit<NodeViewProps, 'extension'> {
+  extension: Node & {
     options: {
       activity: {
         activity_uuid: string
       }
     }
   }
-  updateAttributes: (attrs: { blockObject: VideoBlockObject | null }) => void
 }
 
-function VideoBlockComponent({ node, extension, updateAttributes }: VideoBlockProps) {
+function VideoBlockComponent(props: ExtendedNodeViewProps) {
+  const { node, extension, updateAttributes } = props
   const org = useOrg() as Organization | null
   const course = useCourse() as Course | null
   const editorState = useEditorProvider() as EditorState

apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx

@@ -116,14 +116,24 @@ export const ToolbarButtons = ({ editor, props }: any) => {
         <ListBulletIcon />
       </ToolBtn>
       <ToolSelect
-        onChange={(e) =>
+        value={
-          editor
+          editor.isActive('heading', { level: 1 }) ? "1" :
-            .chain()
+          editor.isActive('heading', { level: 2 }) ? "2" :
-            .focus()
+          editor.isActive('heading', { level: 3 }) ? "3" :
-            .toggleHeading({ level: parseInt(e.target.value) })
+          editor.isActive('heading', { level: 4 }) ? "4" :
-            .run()
+          editor.isActive('heading', { level: 5 }) ? "5" :
+          editor.isActive('heading', { level: 6 }) ? "6" : "0"
         }
+        onChange={(e) => {
+          const value = e.target.value;
+          if (value === "0") {
+            editor.chain().focus().setParagraph().run();
+          } else {
+            editor.chain().focus().toggleHeading({ level: parseInt(value) }).run();
+          }
+        }}
       >
+        <option value="0">Paragraph</option>
         <option value="1">Heading 1</option>
         <option value="2">Heading 2</option>
         <option value="3">Heading 3</option>
@@ -351,13 +361,31 @@ const ToolSelect = styled.select`
   display: flex;
   background: rgba(217, 217, 217, 0.185);
   border-radius: 6px;
-  width: 100px;
+  width: 120px;
   border: none;
   height: 25px;
-  padding: 5px;
+  padding: 2px 5px;
   font-size: 11px;
   font-family: 'DM Sans';
   margin-right: 5px;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 5px center;
+  background-size: 12px;
+  padding-right: 20px;
+
+  &:hover {
+    background-color: rgba(217, 217, 217, 0.3);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(217, 217, 217, 0.5);
+  }
 `
 
 const TableMenuWrapper = styled.div`