feat(mobile): refactoring

Author: iapolya

demo/stories/mobile-editor/MobileEditor.tsx

@@ -1,8 +1,5 @@
 import {memo} from 'react';
 
-import {ArrowUp} from '@gravity-ui/icons';
-import {Button, Icon} from '@gravity-ui/uikit';
-
 import {MarkdownEditorView, useMarkdownEditor} from '../../../src';
 import {PlaygroundLayout} from '../../components/PlaygroundLayout';
 
@@ -24,11 +21,6 @@ export const MobileEditor = memo(() => {
                     className={className}
                     toolbarsPreset={toolbarPreset}
                     mobile
-                    toolbarEnd={
-                        <Button view="action" pin="round-round">
-                            <Icon data={ArrowUp} size={16} />
-                        </Button>
-                    }
                 />
             )}
         />

src/bundle/MarkdownEditorView.tsx

@@ -1,5 +1,4 @@
 import {
-    type ReactNode,
     forwardRef,
     useCallback,
     useEffect,
@@ -68,7 +67,6 @@ const EditorWrapper = forwardRef<HTMLDivElement, EditorWrapperProps>(
             wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig,
             wysiwygToolbarConfig: initialWysiwygToolbarConfig,
             mobile = false,
-            toolbarEnd,
         },
         ref,
     ) => {
@@ -209,7 +207,6 @@ const EditorWrapper = forwardRef<HTMLDivElement, EditorWrapperProps>(
                                     {...settingsProps}
                                     settingsVisible={editor.toolbarVisible && settingsVisibleProp}
                                 />
-                                {toolbarEnd}
                             </WysiwygEditorView>
                         )}
                         {editorMode === 'markup' && (
@@ -277,7 +274,6 @@ type ViewProps = {
     enableSubmitInPreview?: boolean;
     hidePreviewAfterSubmit?: boolean;
     mobile?: boolean;
-    toolbarEnd?: ReactNode;
 };
 
 export type MarkdownEditorViewProps = ClassNameProps & ToolbarConfigs & ViewProps & QAProps & {};
@@ -314,7 +310,6 @@ export const MarkdownEditorView = forwardRef<HTMLDivElement, MarkdownEditorViewP
             wysiwygHiddenActionsConfig,
             wysiwygToolbarConfig,
             mobile = false,
-            toolbarEnd,
         } = props;
 
         const rerender = useUpdate();
@@ -400,7 +395,6 @@ export const MarkdownEditorView = forwardRef<HTMLDivElement, MarkdownEditorViewP
                         wysiwygHiddenActionsConfig={wysiwygHiddenActionsConfig}
                         wysiwygToolbarConfig={wysiwygToolbarConfig}
                         mobile={mobile}
-                        toolbarEnd={toolbarEnd}
                     />
 
                     {markupSplitMode && (

src/bundle/SelectPopup.scss renamed to src/bundle/PlatformPopup.scss

@@ -1,4 +1,4 @@
-.g-md-select-popup {
+.g-md-platform-popup {
     &__sheet {
         --g-sheet-content-padding: 0px;
 

src/bundle/SelectPopup.tsx renamed to src/bundle/PlatformPopup.tsx

@@ -4,17 +4,17 @@ import {Popup, type PopupProps, Sheet} from '@gravity-ui/uikit';
 
 import {cn} from '../classname';
 
-export type SelectPopupProps = Pick<PopupProps, 'placement' | 'open' | 'anchorElement'> & {
+export type PlatformPopupProps = Pick<PopupProps, 'placement' | 'open' | 'anchorElement'> & {
     children: ReactNode;
     mobile?: boolean;
     onClose?: () => void;
 };
 
-import './SelectPopup.scss';
+import './PlatformPopup.scss';
 
-const b = cn('select-popup');
+const b = cn('platform-popup');
 
-export const SelectPopup: FC<SelectPopupProps> = ({
+export const PlatformPopup: FC<PlatformPopupProps> = ({
     mobile,
     children,
     onClose,

src/bundle/WysiwygEditorView.tsx

@@ -30,8 +30,6 @@ export type WysiwygEditorViewProps = ClassNameProps &
         mobile?: boolean;
     };
 
-const toolbarPosition: 'top' | 'bottom' = 'bottom';
-
 export const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {
     const {
         editor,
@@ -45,7 +43,6 @@ export const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {
         toolbarClassName,
         children,
         stickyToolbar = true,
-        mobile,
     } = props;
 
     useRenderTime((time) => {
@@ -61,31 +58,27 @@ export const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {
         });
     });
 
-    const toolbar = toolbarVisible ? (
-        <ToolbarView
-            qa="g-md-toolbar"
-            editor={editor}
-            editorMode="wysiwyg"
-            toolbarEditor={editor}
-            stickyToolbar={stickyToolbar}
-            toolbarConfig={toolbarConfig}
-            toolbarFocus={() => editor.focus()}
-            hiddenActionsConfig={hiddenActionsConfig}
-            settingsVisible={settingsVisible}
-            className={b('toolbar', [toolbarClassName])}
-            mobile={mobile}
-        >
-            {children}
-        </ToolbarView>
-    ) : null;
-
     return (
         <div className={b({toolbar: toolbarVisible}, [className])} data-qa={qa}>
-            {toolbarPosition === 'top' && toolbar}
+            {toolbarVisible ? (
+                <ToolbarView
+                    qa="g-md-toolbar"
+                    editor={editor}
+                    editorMode="wysiwyg"
+                    toolbarEditor={editor}
+                    stickyToolbar={stickyToolbar}
+                    toolbarConfig={toolbarConfig}
+                    toolbarFocus={() => editor.focus()}
+                    hiddenActionsConfig={hiddenActionsConfig}
+                    settingsVisible={settingsVisible}
+                    className={b('toolbar', [toolbarClassName])}
+                >
+                    {children}
+                </ToolbarView>
+            ) : null}
             <WysiwygEditorComponent autofocus={autofocus} editor={editor} className={b('editor')}>
                 <ReactRendererComponent storage={editor.renderStorage} />
             </WysiwygEditorComponent>
-            {toolbarPosition === 'bottom' && toolbar}
         </div>
     );
 });

src/bundle/settings/index.tsx

@@ -21,13 +21,14 @@ import {noop} from '../../lodash';
 import {useBooleanState} from '../../react-utils/hooks';
 import {ToolbarTooltipDelay} from '../../toolbar';
 import {VERSION} from '../../version';
-import {SelectPopup} from '../SelectPopup';
 import type {MarkdownEditorMode, MarkdownEditorSplitMode} from '../types';
 
 import {MarkdownHints} from './MarkdownHints';
 
 import './index.scss';
 
+import {PlatformPopup} from '../PlatformPopup';
+
 const placement: PopupPlacement = ['bottom-end', 'top-end'];
 
 const bSettings = cn('editor-settings');
@@ -91,7 +92,7 @@ export const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(
                     >
                         <Icon data={Gear} />
                     </Button>
-                    <SelectPopup
+                    <PlatformPopup
                         mobile={mobile}
                         open={popupShown}
                         onClose={hidePopup}
@@ -104,7 +105,7 @@ export const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(
                             onClose={hidePopup}
                             className={bSettings('content')}
                         />
-                    </SelectPopup>
+                    </PlatformPopup>
                 </>
             )}
         </div>

src/toolbar/ToolbarListButton.tsx

@@ -3,7 +3,8 @@ import {Fragment, useEffect, useState} from 'react';
 import {ChevronDown} from '@gravity-ui/icons';
 import {HelpMark, Hotkey, Icon, Menu, Popover} from '@gravity-ui/uikit';
 
-import {SelectPopup} from '../bundle/SelectPopup';
+import {PlatformPopup} from 'src/bundle/PlatformPopup';
+
 import {cn} from '../classname';
 import {i18n} from '../i18n/common';
 import {isFunction} from '../lodash';
@@ -85,7 +86,7 @@ export function ToolbarListButton<E>({
             >
                 {buttonContent}
             </ToolbarButtonView>
-            <SelectPopup
+            <PlatformPopup
                 mobile={mobile}
                 open={popupOpen}
                 onClose={hide}
@@ -186,7 +187,7 @@ export function ToolbarListButton<E>({
                         })
                         .filter(Boolean)}
                 </Menu>
-            </SelectPopup>
+            </PlatformPopup>
             {popupItem
                 ? popupItem.renderPopup({
                       ...popupItem,