feat(mobile): scroll toolbar action

Author: iapolya

src/bundle/MarkdownEditorView.tsx

@@ -66,7 +66,7 @@ const EditorWrapper = forwardRef<HTMLDivElement, EditorWrapperProps>(
             unsetShowPreview,
             wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig,
             wysiwygToolbarConfig: initialWysiwygToolbarConfig,
-            mobile = false,
+            mobile,
         },
         ref,
     ) => {
@@ -309,7 +309,7 @@ export const MarkdownEditorView = forwardRef<HTMLDivElement, MarkdownEditorViewP
             toolbarsPreset,
             wysiwygHiddenActionsConfig,
             wysiwygToolbarConfig,
-            mobile = false,
+            mobile,
         } = props;
 
         const rerender = useUpdate();

src/bundle/MarkupEditorView.tsx

@@ -47,7 +47,7 @@ export const MarkupEditorView = memo<MarkupEditorViewProps>((props) => {
         toolbarClassName,
         children,
         stickyToolbar = true,
-        mobile = false,
+        mobile,
     } = props;
     useRenderTime((time) => {
         globalLogger.metrics({

src/bundle/WysiwygEditorView.tsx

@@ -43,6 +43,7 @@ export const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {
         toolbarClassName,
         children,
         stickyToolbar = true,
+        mobile,
     } = props;
 
     useRenderTime((time) => {
@@ -72,6 +73,7 @@ export const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {
                     hiddenActionsConfig={hiddenActionsConfig}
                     settingsVisible={settingsVisible}
                     className={b('toolbar', [toolbarClassName])}
+                    mobile={mobile}
                 >
                     {children}
                 </ToolbarView>

src/bundle/useMarkdownEditor.ts

@@ -31,7 +31,7 @@ export function useMarkdownEditor(
             markupConfig = {},
             wysiwygConfig = {},
             logger = new Logger2(),
-            mobile = false,
+            mobile,
         } = props;
 
         const preset: MarkdownEditorPreset = props.preset ?? 'full';

src/toolbar/FlexToolbar.tsx

@@ -54,8 +54,9 @@ export function FlexToolbar<E>(props: FlexToolbarProps<E>) {
             data,
             availableWidth: width,
             hiddenActions: filteredHiddenAction,
+            mobile,
         });
-    }, [data, width, hiddenActions]);
+    }, [data, hiddenActions, mobile, width]);
 
     return (
         <div ref={ref} className={b(null, [className])}>

src/toolbar/Toolbar.scss

@@ -6,4 +6,8 @@
 
         border-left: 1px solid var(--g-color-line-generic);
     }
+
+    &_mobile {
+        overflow: auto;
+    }
 }

src/toolbar/Toolbar.tsx

@@ -17,7 +17,7 @@ export type ToolbarProps<E> = ToolbarBaseProps<E> & {
 
 export function Toolbar<E>({editor, data, className, focus, onClick, mobile}: ToolbarProps<E>) {
     return (
-        <div className={b(null, [className])}>
+        <div className={b({mobile}, [className])}>
             {data.map<React.ReactNode>((group, index) => {
                 const isLastGroup = index === data.length - 1;
 

src/toolbar/flexible.tsx

@@ -20,16 +20,25 @@ export type ShrinkToolbarDataParams<E> = {
     data: ToolbarData<E>;
     availableWidth: number;
     hiddenActions?: ToolbarItemData<E>[];
+    mobile?: boolean;
 };
 
 export function shrinkToolbarData<E>({
     availableWidth,
     data,
     hiddenActions = [],
+    mobile,
 }: ShrinkToolbarDataParams<E>): {
     data: ToolbarData<E>;
     dots?: ToolbarItemData<E>[];
 } {
+    if (mobile) {
+        return {
+            data,
+            dots: hiddenActions.length ? hiddenActions : undefined,
+        };
+    }
+
     const fittingData: ToolbarData<E> = [];
     const dotsData: ToolbarItemData<E>[] = [];
     let currentWidth = 0;