📱(frontend) toolbar to the bottom when mobile

On mobile devices, the mobile toolbar is often
positioned above the Blocknote toolbar, making
it hard to access.
This commit adjusts the toolbar position to
the bottom of the screen for better accessibility
when using mobile devices.

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx

@@ -1,15 +1,26 @@
+import { FormattingToolbarExtension } from '@blocknote/core/extensions';
 import {
+  ExperimentalMobileFormattingToolbarController,
   FormattingToolbar,
   FormattingToolbarController,
   blockTypeSelectItems,
   getFormattingToolbarItems,
+  useBlockNoteEditor,
   useDictionary,
+  useExtensionState,
 } from '@blocknote/react';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Box } from '@/components';
 import { useConfig } from '@/core/config/api';
+import { useResponsiveStore } from '@/stores';
 
+import {
+  DocsBlockSchema,
+  DocsInlineContentSchema,
+  DocsStyleSchema,
+} from '../../types';
 import { CommentToolbarButton } from '../comments/CommentToolbarButton';
 import { getCalloutFormattingToolbarItems } from '../custom-blocks';
 
@@ -24,6 +35,7 @@ export const BlockNoteToolbar = () => {
   const [onConfirm, setOnConfirm] = useState<() => void | Promise<void>>();
   const { t } = useTranslation();
   const { data: conf } = useConfig();
+  const { isMobile, isTablet } = useResponsiveStore();
 
   const toolbarItems = useMemo(() => {
     let toolbarItems = getFormattingToolbarItems([
@@ -84,7 +96,13 @@ export const BlockNoteToolbar = () => {
 
   return (
     <>
-      <FormattingToolbarController formattingToolbar={formattingToolbar} />
+      {isMobile || isTablet ? (
+        <MobileFormattingToolbarController
+          formattingToolbar={formattingToolbar}
+        />
+      ) : (
+        <FormattingToolbarController formattingToolbar={formattingToolbar} />
+      )}
       {confirmOpen && (
         <ModalConfirmDownloadUnsafe
           onClose={() => setIsConfirmOpen(false)}
@@ -94,3 +112,39 @@ export const BlockNoteToolbar = () => {
     </>
   );
 };
+
+const MobileFormattingToolbarController = ({
+  formattingToolbar,
+}: {
+  formattingToolbar: () => React.ReactNode;
+}) => {
+  const editor = useBlockNoteEditor<
+    DocsBlockSchema,
+    DocsInlineContentSchema,
+    DocsStyleSchema
+  >();
+  const show = useExtensionState(FormattingToolbarExtension, {
+    editor,
+  });
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <Box
+      $margin="auto"
+      $position="absolute"
+      $css={`
+        & > div {
+        left: 50%;
+        transform: translate(0px, 0px) scale(1) translateX(-50%)!important;
+      }
+    `}
+    >
+      <ExperimentalMobileFormattingToolbarController
+        formattingToolbar={formattingToolbar}
+      />
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx

@@ -74,7 +74,9 @@ export function MarkdownButton() {
   };
 
   const show = useMemo(() => {
-    return !!selectedBlocks.find((block) => block.content !== undefined);
+    return (
+      selectedBlocks.filter((block) => block.content !== undefined).length !== 0
+    );
   }, [selectedBlocks]);
 
   if (!show || !editor.isEditable || !Components) {

src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx

@@ -180,6 +180,9 @@ export const cssEditor = css`
     & .bn-editor {
       padding-right: 36px;
     }
+    & .bn-toolbar {
+      max-width: 100vw;
+    }
   }
 
   @media screen and (width <= 560px) {