feat: beforeEditorModeChange (experimental) (#341)

Author: beliarh

src/bundle/Editor.ts

@@ -104,7 +104,6 @@ export interface EditorInt
 
 type SetEditorModeOptions = Pick<ChangeEditorModeOptions, 'emit'>;
 
-/** @internal */
 type ChangeEditorModeOptions = {
     mode: EditorMode;
     reason: 'error-boundary' | 'settings' | 'manually';
@@ -157,6 +156,9 @@ export type EditorOptions = Pick<
      * You can use it to pre-process the value from the markup editor before it gets into the wysiwyg editor.
      */
     prepareRawMarkup?: (value: MarkupString) => MarkupString;
+    experimental_beforeEditorModeChange?: (
+        options: Pick<ChangeEditorModeOptions, 'mode' | 'reason'>,
+    ) => boolean | undefined;
     splitMode?: SplitMode;
     renderPreview?: RenderPreview;
     preset: EditorPreset;
@@ -188,6 +190,9 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
     #fileUploadHandler?: FileUploadHandler;
     #needToSetDimensionsForUploadedImages: boolean;
     #prepareRawMarkup?: (value: MarkupString) => MarkupString;
+    #beforeEditorModeChange?: (
+        options: Pick<ChangeEditorModeOptions, 'mode' | 'reason'>,
+    ) => boolean | undefined;
 
     get _wysiwygView(): PMEditorView {
         // @ts-expect-error internal typing
@@ -349,6 +354,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
         );
         this.#prepareRawMarkup = opts.prepareRawMarkup;
         this.#escapeConfig = opts.escapeConfig;
+        this.#beforeEditorModeChange = opts.experimental_beforeEditorModeChange;
     }
 
     // ---> implements CodeEditor
@@ -385,8 +391,14 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
 
     changeEditorMode({emit = true, ...opts}: ChangeEditorModeOptions): void {
         if (this.#editorMode === opts.mode) return;
+
+        if (this.#beforeEditorModeChange?.({mode: opts.mode, reason: opts.reason}) === false) {
+            return;
+        }
+
         this.currentMode = opts.mode;
         this.emit('rerender', null);
+
         if (emit) {
             this.emit('change-editor-mode', opts);
         }

src/bundle/settings/index.tsx

@@ -32,7 +32,9 @@ const placement: PopupPlacement = ['bottom-end', 'top-end'];
 const bSettings = cn('editor-settings');
 const bContent = cn('settings-content');
 
-export type EditorSettingsProps = SettingsContentProps & {renderPreviewButton?: boolean};
+export type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {
+    renderPreviewButton?: boolean;
+};
 
 export const EditorSettings = React.memo<EditorSettingsProps>(function EditorSettings(props) {
     const {className, onShowPreviewChange, showPreview, renderPreviewButton} = props;
@@ -79,14 +81,15 @@ export const EditorSettings = React.memo<EditorSettingsProps>(function EditorSet
                 placement={placement}
                 onClose={hidePopup}
             >
-                <SettingsContent {...props} className={bSettings('content')} />
+                <SettingsContent {...props} onClose={hidePopup} className={bSettings('content')} />
             </Popup>
         </div>
     );
 });
 
 type SettingsContentProps = ClassNameProps & {
     mode: EditorMode;
+    onClose: () => void;
     onModeChange: (mode: EditorMode) => void;
     onShowPreviewChange: (showPreview: boolean) => void;
     showPreview: boolean;
@@ -101,6 +104,7 @@ const mdHelpPlacement: PopupPlacement = ['bottom', 'bottom-end', 'right-start',
 
 const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent({
     mode,
+    onClose,
     onModeChange,
     toolbarVisibility,
     onToolbarVisibilityChange,
@@ -115,14 +119,20 @@ const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent
             <Menu size="l" className={bContent('mode')}>
                 <Menu.Item
                     active={mode === 'wysiwyg'}
-                    onClick={() => onModeChange('wysiwyg')}
+                    onClick={() => {
+                        onModeChange('wysiwyg');
+                        onClose();
+                    }}
                     icon={<Icon data={WysiwygModeIcon} />}
                 >
                     {i18n('settings_wysiwyg')}
                 </Menu.Item>
                 <Menu.Item
                     active={mode === 'markup'}
-                    onClick={() => onModeChange('markup')}
+                    onClick={() => {
+                        onModeChange('markup');
+                        onClose();
+                    }}
                     icon={<Icon data={LogoMarkdown} />}
                 >
                     {i18n('settings_markup')}