feat(mobile): scroll toolbar action

Author: iapolya

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/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

@@ -1,6 +1,10 @@
 .g-md-toolbar {
     display: flex;
 
+    &_mobile {
+        overflow: auto;
+    }
+ 
     &__group-separator {
         margin: 6px 8px;
 

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;