Refactor Writefull toolbar (#28911)

GitOrigin-RevId: 1d8a3addc9046dc67c0cca20d5cf4fba35d132d1

services/web/frontend/js/features/source-editor/components/toolbar/button-menu.tsx

@@ -13,6 +13,7 @@ export const ToolbarButtonMenu: FC<
     id: string
     label: string
     icon: React.ReactNode
+    disabled?: boolean
     disablePopover?: boolean
     altCommand?: (view: EditorView) => void
   }>
@@ -21,6 +22,7 @@ export const ToolbarButtonMenu: FC<
   id,
   label,
   altCommand,
+  disabled,
   disablePopover,
   children,
 }) {
@@ -39,11 +41,16 @@ export const ToolbarButtonMenu: FC<
       type="button"
       className="ol-cm-toolbar-button"
       aria-label={label}
+      aria-disabled={disabled}
       onMouseDown={event => {
         event.preventDefault()
         event.stopPropagation()
       }}
       onClick={event => {
+        if (disabled) {
+          event.preventDefault()
+          return
+        }
         if (event.altKey && altCommand && open === false) {
           emitToolbarEvent(view, id)
           event.preventDefault()

services/web/frontend/js/features/source-editor/components/toolbar/overflow.tsx

@@ -12,8 +12,16 @@ export const ToolbarOverflow: FC<
     overflowOpen: boolean
     setOverflowOpen: (open: boolean) => void
     overflowRef?: React.Ref<HTMLDivElement>
+    popoverClassName?: string
   }>
-> = ({ overflowed, overflowOpen, setOverflowOpen, overflowRef, children }) => {
+> = ({
+  overflowed,
+  overflowOpen,
+  setOverflowOpen,
+  overflowRef,
+  popoverClassName,
+  children,
+}) => {
   const { t } = useTranslation()
   const buttonRef = useRef<HTMLButtonElement>(null)
   const keyboardInputRef = useRef(false)
@@ -104,7 +112,11 @@ export const ToolbarOverflow: FC<
           ref={overflowRef}
           role="toolbar"
         >
-          <div className="ol-cm-toolbar-overflow">{children}</div>
+          <div
+            className={classnames(popoverClassName, 'ol-cm-toolbar-overflow')}
+          >
+            {children}
+          </div>
         </OLPopover>
       </OLOverlay>
     </>