Feat/mobile mvp

demo/stories/mobile-editor/MobileEditor.stories.ts

@@ -0,0 +1,11 @@
+import type {StoryObj} from '@storybook/react';
+
+import {MobileEditor as component} from './MobileEditor';
+
+export const Story: StoryObj<typeof component> = {};
+Story.storyName = 'Mobile editor';
+
+export default {
+    title: 'Experiments / Mobile editor',
+    component,
+};

demo/stories/mobile-editor/MobileEditor.tsx

@@ -0,0 +1,34 @@
+import {memo} from 'react';
+
+import {MarkdownEditorView, useMarkdownEditor} from '../../../src';
+import {PlaygroundLayout} from '../../components/PlaygroundLayout';
+
+import {toolbarPreset} from './preset';
+
+export const MobileEditor = memo(() => {
+    const editor = useMarkdownEditor({
+        mobile: true,
+        wysiwygConfig: {
+            extensionOptions: {
+                commandMenu: undefined,
+            },
+        },
+    });
+
+    return (
+        <PlaygroundLayout
+            editor={editor}
+            view={({className}) => (
+                <MarkdownEditorView
+                    stickyToolbar
+                    settingsVisible={false}
+                    editor={editor}
+                    className={className}
+                    toolbarsPreset={toolbarPreset}
+                />
+            )}
+        />
+    );
+});
+
+MobileEditor.displayName = 'MobileEditor';

demo/stories/mobile-editor/preset.ts

@@ -0,0 +1,46 @@
+import {ActionName as Action} from 'src/bundle/config/action-names';
+import {ToolbarName as Toolbar} from 'src/modules/toolbars/constants';
+import {
+    boldItemMarkup,
+    boldItemView,
+    boldItemWysiwyg,
+    italicItemMarkup,
+    italicItemView,
+    italicItemWysiwyg,
+    strikethroughItemMarkup,
+    strikethroughItemView,
+    strikethroughItemWysiwyg,
+    underlineItemMarkup,
+    underlineItemView,
+    underlineItemWysiwyg,
+} from 'src/modules/toolbars/items';
+import type {ToolbarsPreset} from 'src/modules/toolbars/types';
+
+export const toolbarPreset: ToolbarsPreset = {
+    items: {
+        [Action.bold]: {
+            view: boldItemView,
+            wysiwyg: boldItemWysiwyg,
+            markup: boldItemMarkup,
+        },
+        [Action.italic]: {
+            view: italicItemView,
+            wysiwyg: italicItemWysiwyg,
+            markup: italicItemMarkup,
+        },
+        [Action.underline]: {
+            view: underlineItemView,
+            wysiwyg: underlineItemWysiwyg,
+            markup: underlineItemMarkup,
+        },
+        [Action.strike]: {
+            view: strikethroughItemView,
+            wysiwyg: strikethroughItemWysiwyg,
+            markup: strikethroughItemMarkup,
+        },
+    },
+    orders: {
+        [Toolbar.wysiwygMain]: [[Action.bold, Action.italic, Action.underline, Action.strike]],
+        [Toolbar.markupMain]: [[Action.bold, Action.italic, Action.underline, Action.strike]],
+    },
+};

src/bundle/Editor.ts

@@ -88,6 +88,7 @@ export interface EditorInt
     readonly preset: EditorPreset;
     readonly mdOptions: Readonly<MarkdownEditorMdOptions>;
     readonly directiveSyntax: DirectiveSyntaxContext;
+    readonly mobile: boolean;
 
     /** @internal used in demo for dev-tools */
     readonly _wysiwygView?: PMEditorView;
@@ -126,7 +127,7 @@ export type ChangeEditorModeOptions = {
 
 export type EditorOptions = Pick<
     MarkdownEditorOptions,
-    'md' | 'initial' | 'handlers' | 'experimental' | 'markupConfig' | 'wysiwygConfig'
+    'md' | 'initial' | 'handlers' | 'experimental' | 'markupConfig' | 'wysiwygConfig' | 'mobile'
 > & {
     logger: Logger2.ILogger;
     renderStorage: ReactRenderStorage;
@@ -165,6 +166,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
     #beforeEditorModeChange?: (
         options: Pick<ChangeEditorModeOptions, 'mode' | 'reason'>,
     ) => boolean | undefined;
+    #mobile: boolean;
 
     get _wysiwygView(): PMEditorView {
         // @ts-expect-error internal typing
@@ -336,6 +338,10 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
         return this.#enableNewImageSizeCalculation;
     }
 
+    get mobile(): boolean {
+        return this.#mobile;
+    }
+
     constructor(opts: EditorOptions) {
         const {logger} = opts;
 
@@ -353,6 +359,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
             experimental = {},
             markupConfig = {},
             wysiwygConfig = {},
+            mobile = false,
         } = opts;
 
         this.#logger = logger;
@@ -388,6 +395,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
         this.#prepareRawMarkup = experimental.prepareRawMarkup;
         this.#escapeConfig = wysiwygConfig.escapeConfig;
         this.#beforeEditorModeChange = experimental.beforeEditorModeChange;
+        this.#mobile = mobile;
     }
 
     // ---> implements CodeEditor

src/bundle/MarkdownEditorView.tsx

@@ -160,6 +160,7 @@ const EditorWrapper = forwardRef<HTMLDivElement, EditorWrapperProps>(
             splitModeEnabled: editor.splitModeEnabled,
             stickyToolbar,
             toolbarVisibility: editor.toolbarVisible && !showPreview,
+            mobile: editor.mobile,
         };
 
         const areSettingsVisible =

src/bundle/PlatformPopup.scss

@@ -0,0 +1,9 @@
+.g-md-platform-popup {
+    &__sheet {
+        --g-sheet-content-padding: 0px;
+
+        .g-md-settings-content {
+            width: auto;
+        }
+    }
+}

src/bundle/PlatformPopup.tsx

@@ -0,0 +1,43 @@
+import type {FC, ReactNode} from 'react';
+
+import {Popup, type PopupProps, Sheet} from '@gravity-ui/uikit';
+
+import {cn} from '../classname';
+
+export type PlatformPopupProps = Pick<PopupProps, 'placement' | 'open' | 'anchorElement'> & {
+    children: ReactNode;
+    mobile?: boolean;
+    onClose?: () => void;
+};
+
+import './PlatformPopup.scss';
+
+const b = cn('platform-popup');
+
+export const PlatformPopup: FC<PlatformPopupProps> = ({
+    mobile,
+    children,
+    onClose,
+    anchorElement,
+    placement,
+    open = false,
+}) => {
+    if (mobile) {
+        return (
+            <Sheet visible={open} onClose={onClose} className={b('sheet')}>
+                {children}
+            </Sheet>
+        );
+    }
+
+    return (
+        <Popup
+            anchorElement={anchorElement}
+            open={open}
+            onOpenChange={onClose}
+            placement={placement}
+        >
+            {children}
+        </Popup>
+    );
+};

src/bundle/ToolbarView.tsx

@@ -69,6 +69,7 @@ export function ToolbarView<T>({
                 focus={toolbarFocus}
                 dotsTitle={i18n('more_action')}
                 onClick={(id, attrs) => editor.emit('toolbar-action', {id, attrs, editorMode})}
+                mobile={editor.mobile}
             />
             {children}
         </div>

src/bundle/WysiwygEditorView.tsx

@@ -43,6 +43,7 @@ export const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {
         children,
         stickyToolbar = true,
     } = props;
+
     useRenderTime((time) => {
         globalLogger.metrics({
             component: 'wysiwyg-editor',
@@ -55,6 +56,7 @@ export const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {
             duration: time,
         });
     });
+
     return (
         <div className={b({toolbar: toolbarVisible}, [className])} data-qa={qa}>
             {toolbarVisible ? (

src/bundle/settings/index.tsx

@@ -10,7 +10,6 @@ import {
     HelpMark,
     Icon,
     Menu,
-    Popup,
     type PopupPlacement,
     type QAProps,
 } from '@gravity-ui/uikit';
@@ -22,6 +21,7 @@ import {noop} from '../../lodash';
 import {useBooleanState} from '../../react-utils/hooks';
 import {ToolbarTooltipDelay} from '../../toolbar';
 import {VERSION} from '../../version';
+import {PlatformPopup} from '../PlatformPopup';
 import type {MarkdownEditorMode, MarkdownEditorSplitMode} from '../types';
 
 import {MarkdownHints} from './MarkdownHints';
@@ -39,8 +39,14 @@ export type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {
 };
 
 export const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(props) {
-    const {className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible} =
-        props;
+    const {
+        className,
+        onShowPreviewChange,
+        showPreview,
+        renderPreviewButton,
+        settingsVisible,
+        mobile,
+    } = props;
     const [chevronElement, setChevronElement] = useState<HTMLButtonElement | null>(null);
     const [popupShown, , hidePopup, togglePopup] = useBooleanState(false);
 
@@ -85,19 +91,20 @@ export const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(
                     >
                         <Icon data={Gear} />
                     </Button>
-                    <Popup
+                    <PlatformPopup
+                        mobile={mobile}
                         open={popupShown}
+                        onClose={hidePopup}
                         anchorElement={chevronElement}
                         placement={placement}
-                        onOpenChange={hidePopup}
                     >
                         <SettingsContent
                             {...props}
                             qa="g-md-settings-content"
                             onClose={hidePopup}
                             className={bSettings('content')}
                         />
-                    </Popup>
+                    </PlatformPopup>
                 </>
             )}
         </div>
@@ -119,6 +126,7 @@ type SettingsContentProps = ClassNameProps &
         splitMode?: MarkdownEditorSplitMode;
         splitModeEnabled?: boolean;
         onSplitModeChange?: (splitModeEnabled: boolean) => void;
+        mobile?: boolean;
     };
 
 const mdHelpPlacement: PopupPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];
@@ -136,6 +144,7 @@ const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent
     showPreview,
     settingsVisible,
     qa,
+    mobile,
 }) {
     const isSettingsArray = Array.isArray(settingsVisible);
     const showModeSetting = isSettingsArray ? settingsVisible?.includes('mode') : true;
@@ -167,23 +176,25 @@ const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent
                         iconStart={<Icon data={LogoMarkdown} />}
                     >
                         {i18n('settings_markup')}
-                        <HelpMark
-                            popoverProps={{
-                                placement: mdHelpPlacement,
-                                modal: false,
-                            }}
-                            className={bContent('mode-help')}
-                        >
-                            <div
-                                onClick={(e) => {
-                                    // stop clicks propagation
-                                    // because otherwise click in MarkdownHints handled as click on MenuItem
-                                    e.stopPropagation();
+                        {!mobile && (
+                            <HelpMark
+                                popoverProps={{
+                                    placement: mdHelpPlacement,
+                                    modal: false,
                                 }}
+                                className={bContent('mode-help')}
                             >
-                                <MarkdownHints />
-                            </div>
-                        </HelpMark>
+                                <div
+                                    onClick={(e) => {
+                                        // stop clicks propagation
+                                        // because otherwise click in MarkdownHints handled as click on MenuItem
+                                        e.stopPropagation();
+                                    }}
+                                >
+                                    <MarkdownHints />
+                                </div>
+                            </HelpMark>
+                        )}
                     </Menu.Item>
                 </Menu>
             )}

src/bundle/types.ts

@@ -210,4 +210,6 @@ export type MarkdownEditorOptions = {
     /** Options for wysiwyg mode */
     wysiwygConfig?: MarkdownEditorWysiwygConfig;
     logger?: Logger2.ILogger;
+    /** Mobile view */
+    mobile?: boolean;
 };

src/bundle/useMarkdownEditor.ts

@@ -7,6 +7,7 @@ import {Logger2, globalLogger} from '../logger';
 import {DirectiveSyntaxContext} from '../utils/directive';
 
 import {EditorImpl, type EditorInt} from './Editor';
+import {wSelectionMenuConfigByPreset} from './config';
 import type {
     MarkdownEditorInstance,
     MarkdownEditorMode,
@@ -30,6 +31,7 @@ export function useMarkdownEditor(
             markupConfig = {},
             wysiwygConfig = {},
             logger = new Logger2(),
+            mobile,
         } = props;
 
         const preset: MarkdownEditorPreset = props.preset ?? 'full';
@@ -42,7 +44,13 @@ export function useMarkdownEditor(
         const directiveSyntax = new DirectiveSyntaxContext(experimental.directiveSyntax);
 
         const extensions: Extension = (builder) => {
-            const extensionOptions = wysiwygConfig.extensionOptions;
+            const extensionOptions = wysiwygConfig.extensionOptions ?? {};
+
+            if (mobile) {
+                extensionOptions.selectionContext = {
+                    config: wSelectionMenuConfigByPreset.zero,
+                };
+            }
 
             builder.use(BundlePreset, {
                 ...extensionOptions,
@@ -65,6 +73,7 @@ export function useMarkdownEditor(
                 needToSetDimensionsForUploadedImages:
                     experimental.needToSetDimensionsForUploadedImages,
                 enableNewImageSizeCalculation: experimental.enableNewImageSizeCalculation,
+                mobile,
             });
             {
                 const extraExtensions = wysiwygConfig.extensions;