feat(bundle)!: rename editorType ––> editorMode (#260)

Renamed:
- type `MarkdownEditorType` ––> `MarkdownEditorMode`
- event name `editor.on('change-editor-type', ...)` ––> `editor.on('change-editor-mode', ...)`
- field of type `ToolbarActionData['editorType']` ––> `ToolbarActionData['editorMode']`
- field of interface `Editor.currentType` ––> `Editor.currentMode`
- method of interface `Editor.setEditorType(...)` ––> `Editor.setEditorMode(...)`
- prop of `useMarkdownEditor` hook: `initialEditorType` ––> `initialEditorMode`

demo/PMSelection.tsx

@@ -16,7 +16,7 @@ export function WysiwygSelection({editor, className}: WysiwygSelectionProps) {
         rerender();
     });
 
-    const view = editor?.currentType === 'wysiwyg' && editor._wysiwygView;
+    const view = editor?.currentMode === 'wysiwyg' && editor._wysiwygView;
 
     React.useLayoutEffect(() => {
         if (!editor) return undefined;
@@ -25,14 +25,14 @@ export function WysiwygSelection({editor, className}: WysiwygSelectionProps) {
             'rerender-toolbar',
             rerender,
         );
-        editor.on('change-editor-type', rerender);
+        editor.on('change-editor-mode', rerender);
         return () => {
             editor.off(
                 // @ts-expect-error TODO: add public event for selection change
                 'rerender-toolbar',
                 rerender,
             );
-            editor.off('change-editor-type', rerender);
+            editor.off('change-editor-mode', rerender);
         };
     }, [editor, rerender]);
 

demo/Playground.tsx

@@ -5,7 +5,7 @@ import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';
 
 import {MarkupString, logger} from '../src';
 import {
-    MarkdownEditorType,
+    MarkdownEditorMode,
     MarkdownEditorView,
     markupToolbarConfigs,
     useMarkdownEditor,
@@ -54,7 +54,7 @@ export type PlaygroundProps = {
     initial?: MarkupString;
     allowHTML?: boolean;
     settingsVisible?: boolean;
-    initialEditor?: MarkdownEditorType;
+    initialEditor?: MarkdownEditorMode;
     breaks?: boolean;
     linkify?: boolean;
     linkifyTlds?: string | string[];
@@ -90,7 +90,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
         renderPreviewDefined,
         height,
     } = props;
-    const [editorType, setEditorType] = React.useState<MarkdownEditorType>(
+    const [editorMode, setEditorMode] = React.useState<MarkdownEditorMode>(
         initialEditor ?? 'wysiwyg',
     );
     const [mdRaw, setMdRaw] = React.useState<MarkupString>(initial || '');
@@ -120,7 +120,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
         linkifyTlds,
         initialMarkup: mdRaw,
         breaks: breaks ?? true,
-        initialEditorType: editorType,
+        initialEditorMode: editorMode,
         initialSplitModeEnabled: initialSplitModeEnabled,
         initialToolbarVisible: true,
         splitMode: splitModeOrientation,
@@ -166,10 +166,10 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
         function onChange() {
             setMdRaw(mdEditor.getValue());
         }
-        function onChangeEditorType({type}: {type: MarkdownEditorType}) {
-            setEditorType(type);
+        function onChangeEditorType({mode}: {mode: MarkdownEditorMode}) {
+            setEditorMode(mode);
         }
-        const onToolbarAction = ({id, editorType: type}: ToolbarActionData) => {
+        const onToolbarAction = ({id, editorMode: type}: ToolbarActionData) => {
             console.info(`The '${id}' action is performed in the ${type}-editor.`);
         };
         function onChangeSplitModeEnabled({splitModeEnabled}: {splitModeEnabled: boolean}) {
@@ -183,7 +183,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
         mdEditor.on('submit', onSubmit);
         mdEditor.on('change', onChange);
         mdEditor.on('toolbar-action', onToolbarAction);
-        mdEditor.on('change-editor-type', onChangeEditorType);
+        mdEditor.on('change-editor-mode', onChangeEditorType);
         mdEditor.on('change-split-mode-enabled', onChangeSplitModeEnabled);
         mdEditor.on('change-toolbar-visibility', onChangeToolbarVisibility);
 
@@ -192,7 +192,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
             mdEditor.off('submit', onSubmit);
             mdEditor.off('change', onChange);
             mdEditor.off('toolbar-action', onToolbarAction);
-            mdEditor.off('change-editor-type', onChangeEditorType);
+            mdEditor.off('change-editor-mode', onChangeEditorType);
             mdEditor.off('change-split-mode-enabled', onChangeSplitModeEnabled);
             mdEditor.off('change-toolbar-visibility', onChangeToolbarVisibility);
         };
@@ -283,7 +283,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
             <hr />
 
             <div className={b('preview')}>
-                {editorType === 'wysiwyg' && <pre className={b('markup')}>{mdRaw}</pre>}
+                {editorMode === 'wysiwyg' && <pre className={b('markup')}>{mdRaw}</pre>}
             </div>
         </div>
     );

demo/ProseMirrorDevTools.tsx

@@ -16,13 +16,13 @@ export function WysiwygDevTools({editor}: WysiwygDevToolsProps) {
         rerender();
     });
 
-    const view = editor?.currentType === 'wysiwyg' && editor._wysiwygView;
+    const view = editor?.currentMode === 'wysiwyg' && editor._wysiwygView;
 
     React.useLayoutEffect(() => {
         if (!editor) return undefined;
-        editor.on('change-editor-type', rerender);
+        editor.on('change-editor-mode', rerender);
         return () => {
-            editor.off('change-editor-type', rerender);
+            editor.off('change-editor-mode', rerender);
         };
     }, [editor, rerender]);
 

demo/editor-in-editor/EditorInEditorExtension/index.tsx

@@ -108,7 +108,7 @@ type YfmEditorProps = {
 function InnerEditor({initialContent, toaster}: YfmEditorProps) {
     const mdEditor = useMarkdownEditor({
         initialMarkup: initialContent,
-        initialEditorType: 'wysiwyg',
+        initialEditorMode: 'wysiwyg',
         initialToolbarVisible: true,
         linkify: true,
         breaks: true,

demo/editor-in-editor/index.tsx

@@ -17,7 +17,7 @@ const b = block('playground');
 
 export const PlaygroundEditorInEditor: React.FC = () => {
     const mdEditor = useMarkdownEditor({
-        initialEditorType: 'wysiwyg',
+        initialEditorMode: 'wysiwyg',
         initialToolbarVisible: true,
         allowHTML: false,
         linkify: true,

src/bundle/Editor.ts

@@ -13,7 +13,7 @@ import {CodeEditor, Editor as MarkupEditor} from '../markup/editor';
 import {Emitter, Receiver, SafeEventEmitter} from '../utils/event-emitter';
 import type {FileUploadHandler} from '../utils/upload';
 
-export type EditorType = 'wysiwyg' | 'markup';
+export type EditorMode = 'wysiwyg' | 'markup';
 export type SplitMode = false | 'horizontal' | 'vertical';
 export type RenderPreview = ({
     getValue,
@@ -24,7 +24,7 @@ export type RenderPreview = ({
 }) => ReactNode;
 
 export type ToolbarActionData = {
-    editorType: EditorType;
+    editorMode: EditorMode;
     id: string;
     attrs?: {[key: string]: any};
 };
@@ -36,7 +36,7 @@ interface EventMap {
 
     'toolbar-action': ToolbarActionData;
 
-    'change-editor-type': {type: EditorType};
+    'change-editor-mode': {mode: EditorMode};
     'change-toolbar-visibility': {visible: boolean};
     'change-split-mode-enabled': {splitModeEnabled: boolean};
 }
@@ -49,10 +49,10 @@ interface EventMapInt extends EventMap {
 }
 
 export interface Editor extends Receiver<EventMap>, CommonEditor {
-    readonly currentType: EditorType;
+    readonly currentMode: EditorMode;
     readonly toolbarVisible: boolean;
 
-    setEditorType(type: EditorType): void;
+    setEditorMode(mode: EditorMode): void;
 
     moveCursor(position: 'start' | 'end' | {line: number}): void;
 
@@ -67,7 +67,7 @@ export interface EditorInt
         Receiver<EventMapInt>,
         ActionStorage,
         CodeEditor {
-    readonly currentType: EditorType;
+    readonly currentMode: EditorMode;
     readonly toolbarVisible: boolean;
     readonly splitModeEnabled: boolean;
     readonly splitMode: SplitMode;
@@ -85,9 +85,9 @@ export interface EditorInt
 
     readonly renderPreview?: RenderPreview;
 
-    changeEditorType(opts: ChangeEditorTypeOptions): void;
+    changeEditorMode(opts: ChangeEditorModeOptions): void;
 
-    setEditorType(type: EditorType): void;
+    setEditorMode(mode: EditorMode): void;
 
     moveCursor(position: 'start' | 'end' | {line: number}): void;
 
@@ -99,8 +99,8 @@ export interface EditorInt
 }
 
 /** @internal */
-type ChangeEditorTypeOptions = {
-    type: EditorType;
+type ChangeEditorModeOptions = {
+    mode: EditorMode;
     reason: 'error-boundary' | 'settings' | 'manually';
 };
 
@@ -110,7 +110,7 @@ export type EditorOptions = Pick<
 > & {
     initialMarkup?: MarkupString;
     /** @default 'wysiwyg' */
-    initialEditorType?: EditorType;
+    initialEditorMode?: EditorMode;
     /** @default true */
     initialToolbarVisible?: boolean;
     /** @default false
@@ -137,7 +137,7 @@ export type EditorOptions = Pick<
 /** @internal */
 export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorInt {
     #markup: MarkupString;
-    #editorType: EditorType;
+    #editorMode: EditorMode;
     #toolbarVisible: boolean;
     #splitModeEnabled: boolean;
     #splitMode: SplitMode;
@@ -160,14 +160,14 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
         return this.#wysiwygEditor?.view;
     }
 
-    get currentType(): EditorType {
-        return this.#editorType;
+    get currentMode(): EditorMode {
+        return this.#editorMode;
     }
 
-    private set currentType(newType: EditorType) {
-        switch (newType) {
+    private set currentMode(newMode: EditorMode) {
+        switch (newMode) {
             case 'markup': {
-                this.#editorType = newType;
+                this.#editorMode = newMode;
                 if (this.#wysiwygEditor) {
                     const markupEditorValue = this.#markupEditor?.getValue();
                     const wysiwygEditorValue = this.#wysiwygEditor.getValue();
@@ -184,7 +184,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
                 break;
             }
             case 'wysiwyg': {
-                this.#editorType = newType;
+                this.#editorMode = newMode;
                 if (this.#markupEditor) {
                     const value = this.#markupEditor.getValue();
                     this.#markup = this.#prepareRawMarkup?.(value) ?? value;
@@ -195,7 +195,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
                 break;
             }
             default:
-                throw new Error('Unknown editor type: ' + newType);
+                throw new Error('Unknown editor mode: ' + newMode);
         }
         setTimeout(() => {
             this.currentEditor.focus();
@@ -219,14 +219,14 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
     }
 
     get currentEditor(): CommonEditor {
-        const type = this.currentType;
-        switch (type) {
+        const mode = this.currentMode;
+        switch (mode) {
             case 'markup':
                 return this.markupEditor;
             case 'wysiwyg':
                 return this.wysiwygEditor;
             default:
-                throw new Error('Unknown editor type: ' + type);
+                throw new Error('Unknown editor mode: ' + mode);
         }
     }
 
@@ -280,7 +280,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
 
     constructor(opts: EditorOptions) {
         super({onError: logger.error.bind(logger)});
-        this.#editorType = (opts.initialEditorType as EditorType) ?? 'wysiwyg';
+        this.#editorMode = opts.initialEditorMode ?? 'wysiwyg';
         this.#toolbarVisible = Boolean(opts.initialToolbarVisible);
         this.#splitMode = (opts.renderPreview && opts.splitMode) ?? false;
         this.#splitModeEnabled = (this.#splitMode && opts.initialSplitModeEnabled) ?? false;
@@ -330,16 +330,16 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
         this.#wysiwygEditor = undefined;
     }
 
-    setEditorType(type: EditorType): void {
-        this.changeEditorType({type, reason: 'manually'});
+    setEditorMode(mode: EditorMode): void {
+        this.changeEditorMode({mode, reason: 'manually'});
     }
 
-    changeEditorType(opts: ChangeEditorTypeOptions): void {
-        if (this.#editorType === opts.type) return;
-        this.currentType = opts.type;
+    changeEditorMode(opts: ChangeEditorModeOptions): void {
+        if (this.#editorMode === opts.mode) return;
+        this.currentMode = opts.mode;
         this.emit('rerender', null);
         if (opts.reason !== 'error-boundary') {
-            this.emit('change-editor-type', opts);
+            this.emit('change-editor-mode', opts);
         }
     }
 
@@ -395,9 +395,9 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
     }
 
     private moveCursorToLine(line: number): void {
-        const type = this.currentType;
+        const mode = this.currentMode;
 
-        switch (type) {
+        switch (mode) {
             case 'markup': {
                 const lineNumber = line + 1;
                 const view = this.markupEditor.cm;
@@ -423,7 +423,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
                 break;
             }
             default:
-                throw new Error('Unknown editor type: ' + type);
+                throw new Error('Unknown editor mode: ' + mode);
         }
     }