feat(mobile): add bottom toolbar position

Author: iapolya

demo/stories/mobile-editor/MobileEditor.tsx

@@ -11,6 +11,9 @@ import {toolbarPreset} from './preset';
 export const MobileEditor = memo(() => {
     const editor = useMarkdownEditor({
         mobile: true,
+        initial: {
+            toolbarPosition: 'bottom',
+        },
     });
 
     return (

src/bundle/Editor.ts

@@ -29,6 +29,7 @@ import type {
     MarkdownEditorPreset as EditorPreset,
     MarkdownEditorMdOptions,
     MarkdownEditorOptions,
+    MarkdownEditorToolbarPosition,
     MarkdownEditorMarkupConfig as MarkupConfig,
     ParseInsertedUrlAsImage,
     RenderPreview,
@@ -64,6 +65,7 @@ export interface Editor extends Receiver<EventMap>, CommonEditor {
     readonly logger: Logger2.LogReceiver;
     readonly currentMode: EditorMode;
     readonly toolbarVisible: boolean;
+    readonly toolbarPosition?: 'top' | 'bottom';
 
     setEditorMode(mode: EditorMode, opts?: SetEditorModeOptions): void;
 
@@ -83,6 +85,7 @@ export interface EditorInt
     readonly logger: Logger2.ILogger;
     readonly currentMode: EditorMode;
     readonly toolbarVisible: boolean;
+    readonly toolbarPosition: MarkdownEditorToolbarPosition;
     readonly splitModeEnabled: boolean;
     readonly splitMode: SplitMode;
     readonly preset: EditorPreset;
@@ -141,6 +144,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
     #markup: MarkupString;
     #editorMode: EditorMode;
     #toolbarVisible: boolean;
+    #toolbarPosition: MarkdownEditorToolbarPosition;
     #splitModeEnabled: boolean;
     #splitMode: SplitMode;
     #renderPreview?: RenderPreview;
@@ -221,6 +225,10 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
         return this.#toolbarVisible;
     }
 
+    get toolbarPosition(): MarkdownEditorToolbarPosition {
+        return this.#toolbarPosition;
+    }
+
     get splitModeEnabled(): boolean {
         return this.#splitModeEnabled;
     }
@@ -364,6 +372,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
 
         this.#editorMode = initial.mode ?? 'wysiwyg';
         this.#toolbarVisible = initial.toolbarVisible ?? true;
+        this.#toolbarPosition = initial.toolbarPosition ?? 'top';
         this.#splitMode = (markupConfig.renderPreview && markupConfig.splitMode) ?? false;
         this.#splitModeEnabled = (this.#splitMode && initial.splitModeEnabled) ?? false;
         this.#renderPreview = markupConfig.renderPreview;

src/bundle/MarkdownEditorView.tsx

@@ -199,6 +199,7 @@ const EditorWrapper = forwardRef<HTMLDivElement, EditorWrapperProps>(
                                 settingsVisible={areSettingsVisible}
                                 toolbarConfig={wysiwygToolbarConfig}
                                 toolbarVisible={editor.toolbarVisible}
+                                toolbarPosition={editor.toolbarPosition}
                                 hiddenActionsConfig={wysiwygHiddenActionsConfig}
                                 className={b('editor', {mode: editorMode})}
                                 toolbarClassName={b('toolbar')}

src/bundle/WysiwygEditorView.tsx

@@ -11,6 +11,7 @@ import type {EditorInt} from './Editor';
 import {ToolbarView} from './ToolbarView';
 import {WysiwygEditorComponent} from './WysiwygEditorComponent';
 import type {WToolbarData, WToolbarItemData} from './toolbar/types';
+import type {MarkdownEditorToolbarPosition} from './types';
 
 import './WysiwygEditorView.scss';
 
@@ -23,21 +24,21 @@ export type WysiwygEditorViewProps = ClassNameProps &
         settingsVisible?: boolean;
         toolbarConfig: WToolbarData;
         toolbarVisible?: boolean;
+        toolbarPosition: MarkdownEditorToolbarPosition;
         stickyToolbar?: boolean;
         toolbarClassName?: string;
         hiddenActionsConfig?: WToolbarItemData[];
         children?: React.ReactNode;
         mobile?: boolean;
     };
 
-const toolbarPosition: 'top' | 'bottom' = 'bottom';
-
 export const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {
     const {
         editor,
         autofocus,
         settingsVisible,
         toolbarVisible,
+        toolbarPosition,
         toolbarConfig,
         hiddenActionsConfig,
         qa,

src/bundle/types.ts

@@ -17,6 +17,8 @@ export type MarkdownEditorMode = 'wysiwyg' | 'markup';
 export type MarkdownEditorPreset = 'zero' | 'commonmark' | 'default' | 'yfm' | 'full';
 export type MarkdownEditorSplitMode = false | 'horizontal' | 'vertical';
 
+export type MarkdownEditorToolbarPosition = 'top' | 'bottom';
+
 export type RenderPreviewParams = {
     getValue: () => MarkupString;
     mode: 'preview' | 'split';
@@ -51,6 +53,7 @@ export type MarkdownEditorInitialOptions = {
     mode?: MarkdownEditorMode;
     /** Default – true */
     toolbarVisible?: boolean;
+    toolbarPosition?: MarkdownEditorToolbarPosition;
     /**
      * Default – false
      *