feat: new logger implementation (#646)

Author: d3m1d0v

demo/components/Playground.tsx

@@ -1,11 +1,12 @@
-import {type CSSProperties, memo, useCallback, useEffect, useState} from 'react';
+import {type CSSProperties, memo, useCallback, useEffect, useMemo, useState} from 'react';
 
 import {defaultOptions} from '@diplodoc/transform/lib/sanitize';
 import {Button, DropdownMenu} from '@gravity-ui/uikit';
 
 import {
     type DirectiveSyntaxValue,
     type FileUploadHandler,
+    Logger2,
     type MarkdownEditorMode,
     MarkdownEditorView,
     type MarkdownEditorViewProps,
@@ -29,6 +30,7 @@ import {getSanitizeYfmHtmlBlock} from '../../src/extensions/additional/YfmHtmlBl
 import type {CodeEditor} from '../../src/markup';
 import type {ToolbarsPreset} from '../../src/modules/toolbars/types';
 import {getPlugins} from '../defaults/md-plugins';
+import {useLogs} from '../hooks/useLogs';
 import useYfmHtmlBlockStyles from '../hooks/useYfmHtmlBlockStyles';
 import {randomDelay} from '../utils/delay';
 import {parseInsertedUrlAsImage} from '../utils/imageUrl';
@@ -86,9 +88,12 @@ export type PlaygroundProps = {
     >;
 
 logger.setLogger({
-    metrics: console.info,
-    action: (data) => console.info(`Action: ${data.action}`, data),
-    ...console,
+    log: (...data) => console.log('[Deprecated logger]', ...data),
+    info: (...data) => console.info('[Deprecated logger]', ...data),
+    warn: (...data) => console.warn('[Deprecated logger]', ...data),
+    error: (...data) => console.error('[Deprecated logger]', ...data),
+    metrics: (...data) => console.info('[Deprecated logger]', ...data),
+    action: (data) => console.info(`[Deprecated logger] Action: ${data.action}`, data),
 });
 
 export const Playground = memo<PlaygroundProps>((props) => {
@@ -142,8 +147,12 @@ export const Playground = memo<PlaygroundProps>((props) => {
         [sanitizeHtml],
     );
 
+    const logger = useMemo(() => new Logger2().nested({env: 'playground'}), []);
+    useLogs(logger);
+
     const mdEditor = useMarkdownEditor(
         {
+            logger,
             preset: 'full',
             wysiwygConfig: {
                 placeholderOptions: placeholderOptions,

demo/hooks/useLogs.ts

@@ -0,0 +1,14 @@
+import {useMemo} from 'react';
+
+import type {Logger2} from '../../src';
+
+export function useLogs(logger: Logger2.LogReceiver) {
+    useMemo(() => {
+        logger.on('log', (data) => console.log('Log:', data.msg, data));
+        logger.on('warn', (data) => console.warn('Warn:', data.msg, data));
+        logger.on('error', (data) => console.error('Error:', data.error, data));
+        logger.on('event', (data) => console.info('Event:', data.event, data));
+        logger.on('action', (data) => console.info('Action:', data.action, data));
+        logger.on('metrics', (data) => console.info('Metrics:', data.component, data));
+    }, [logger]);
+}

demo/stories/ghost/Ghost.tsx

@@ -1,17 +1,12 @@
 import cloneDeep from 'lodash/cloneDeep';
 
-import {MarkdownEditorView, logger, markupToolbarConfigs, useMarkdownEditor} from '../../../src';
+import {MarkdownEditorView, markupToolbarConfigs, useMarkdownEditor} from '../../../src';
 import {PlaygroundLayout} from '../../components/PlaygroundLayout';
+import {useLogs} from '../../hooks/useLogs';
 
 import {initialMdContent} from './content';
 import {ghostPopupExtension, ghostPopupToolbarItem} from './ghostExtension';
 
-logger.setLogger({
-    metrics: console.info,
-    action: (data) => console.info(`Action: ${data.action}`, data),
-    ...console,
-});
-
 const mToolbarConfig = cloneDeep(markupToolbarConfigs.mToolbarConfig);
 mToolbarConfig.unshift([ghostPopupToolbarItem]);
 
@@ -21,6 +16,8 @@ export const Ghost = () => {
         markupConfig: {extensions: [ghostPopupExtension]},
     });
 
+    useLogs(editor.logger);
+
     return (
         <PlaygroundLayout
             editor={editor}

demo/stories/gpt/GPT.tsx

@@ -5,7 +5,6 @@ import cloneDeep from 'lodash/cloneDeep';
 import {
     MarkdownEditorView,
     gptExtension,
-    logger,
     mGptExtension,
     mGptToolbarItem,
     markupToolbarConfigs,
@@ -14,16 +13,11 @@ import {
     wysiwygToolbarConfigs,
 } from '../../../src';
 import {PlaygroundLayout} from '../../components/PlaygroundLayout';
+import {useLogs} from '../../hooks/useLogs';
 
 import {initialMdContent} from './content';
 import {gptWidgetProps} from './gptWidgetOptions';
 
-logger.setLogger({
-    metrics: console.info,
-    action: (data) => console.info(`Action: ${data.action}`, data),
-    ...console,
-});
-
 const wToolbarConfig = cloneDeep(wysiwygToolbarConfigs.wToolbarConfig);
 wToolbarConfig.unshift([wGptItemData]);
 
@@ -62,6 +56,8 @@ export const GPT = memo(() => {
         },
     });
 
+    useLogs(editor.logger);
+
     return (
         <PlaygroundLayout
             editor={editor}

demo/stories/presets/Preset.tsx

@@ -6,7 +6,6 @@ import {
     MarkdownEditorView,
     type MarkupString,
     type RenderPreview,
-    logger,
     useMarkdownEditor,
 } from '../../../src';
 import type {ToolbarsPreset} from '../../../src/modules/toolbars/types';
@@ -17,6 +16,7 @@ import {WysiwygSelection} from '../../components/PMSelection';
 import {WysiwygDevTools} from '../../components/ProseMirrorDevTools';
 import {SplitModePreview} from '../../components/SplitModePreview';
 import {plugins} from '../../defaults/md-plugins';
+import {useLogs} from '../../hooks/useLogs';
 import {block} from '../../utils/cn';
 import {randomDelay} from '../../utils/delay';
 import {parseInsertedUrlAsImage} from '../../utils/imageUrl';
@@ -43,12 +43,6 @@ export type PresetDemoProps = {
     toolbarsPreset?: ToolbarsPreset;
 };
 
-logger.setLogger({
-    metrics: console.info,
-    action: (data) => console.info(`Action: ${data.action}`, data),
-    ...console,
-});
-
 export const Preset = memo<PresetDemoProps>((props) => {
     const {
         preset,
@@ -109,6 +103,8 @@ export const Preset = memo<PresetDemoProps>((props) => {
         },
     });
 
+    useLogs(mdEditor.logger);
+
     useEffect(() => {
         function onChange() {
             setMdRaw(mdEditor.getValue());

src/bundle/Editor.ts

@@ -15,7 +15,7 @@ import type {TransformFn} from '../core/markdown/ProseMirrorTransformer';
 import type {DynamicModifiers} from '../core/types/dynamicModifiers';
 import type {ReactRenderStorage, RenderStorage} from '../extensions';
 import {i18n} from '../i18n/bundle';
-import {logger} from '../logger';
+import {type Logger2, globalLogger} from '../logger';
 import {createCodemirror} from '../markup';
 import {getAutocompleteConfig} from '../markup/codemirror/autocomplete';
 import {type CodeEditor, Editor as MarkupEditor} from '../markup/editor';
@@ -61,6 +61,7 @@ interface EventMapInt extends EventMap {
 }
 
 export interface Editor extends Receiver<EventMap>, CommonEditor {
+    readonly logger: Logger2.LogReceiver;
     readonly currentMode: EditorMode;
     readonly toolbarVisible: boolean;
 
@@ -79,6 +80,7 @@ export interface EditorInt
         Receiver<EventMapInt>,
         ActionStorage,
         CodeEditor {
+    readonly logger: Logger2.ILogger;
     readonly currentMode: EditorMode;
     readonly toolbarVisible: boolean;
     readonly splitModeEnabled: boolean;
@@ -126,6 +128,7 @@ export type EditorOptions = Pick<
     MarkdownEditorOptions,
     'md' | 'initial' | 'handlers' | 'experimental' | 'markupConfig' | 'wysiwygConfig'
 > & {
+    logger: Logger2.ILogger;
     renderStorage: ReactRenderStorage;
     preset: EditorPreset;
     directiveSyntax: DirectiveSyntaxContext;
@@ -134,6 +137,7 @@ export type EditorOptions = Pick<
 
 /** @internal */
 export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorInt {
+    #logger: Logger2.ILogger;
     #markup: MarkupString;
     #editorMode: EditorMode;
     #toolbarVisible: boolean;
@@ -167,6 +171,10 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
         return this.#wysiwygEditor?.view;
     }
 
+    get logger(): Logger2.ILogger {
+        return this.#logger;
+    }
+
     get currentMode(): EditorMode {
         return this.#editorMode;
     }
@@ -255,6 +263,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
                 this.#preset === 'zero' || this.#preset === 'commonmark' ? this.#preset : 'default';
             this.#wysiwygEditor = new WysiwygEditor({
                 mdPreset,
+                logger: this.logger.nested({mode: 'wysiwyg'}),
                 initialContent: this.#markup,
                 extensions: this.#extensions,
                 pmTransformers: this.#pmTransformers,
@@ -275,6 +284,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
             this.#markupEditor = new MarkupEditor(
                 createCodemirror({
                     doc: this.#markup,
+                    logger: this.logger.nested({mode: 'markup'}),
                     placeholder: this.#markupConfig.placeholder ?? i18n('markup_placeholder'),
                     onCancel: () => this.emit('cancel', null),
                     onSubmit: () => this.emit('submit', null),
@@ -326,7 +336,14 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
     }
 
     constructor(opts: EditorOptions) {
-        super({onError: logger.error.bind(logger)});
+        const {logger} = opts;
+
+        super({
+            onError: (error) => {
+                logger.error(error);
+                globalLogger.error(error);
+            },
+        });
 
         const {
             md = {},
@@ -337,8 +354,11 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
             wysiwygConfig = {},
         } = opts;
 
+        this.#logger = logger;
         this.#modifiers = experimental.preserveMarkupFormatting
-            ? createDynamicModifiers(new MarkupManager())
+            ? createDynamicModifiers(
+                  new MarkupManager(this.logger.nested({module: 'markup-manager'})),
+              )
             : undefined;
 
         this.#editorMode = initial.mode ?? 'wysiwyg';
@@ -408,6 +428,13 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
             return;
         }
 
+        this.logger.event({
+            event: 'mode-change',
+            prevMode: this.#editorMode,
+            nextMode: opts.mode,
+            reason: opts.reason,
+        });
+
         this.currentMode = opts.mode;
         this.emit('rerender', null);
 

src/bundle/MarkdownEditorView.tsx

@@ -14,7 +14,7 @@ import {useEnsuredForwardedRef, useKey, useUpdate} from 'react-use';
 
 import {type ClassNameProps, cn} from '../classname';
 import {i18n} from '../i18n/bundle';
-import {logger} from '../logger';
+import {globalLogger} from '../logger';
 import type {ToolbarsPreset} from '../modules/toolbars/types';
 import {useBooleanState, useSticky} from '../react-utils';
 import {isMac} from '../utils';
@@ -241,7 +241,8 @@ export const MarkdownEditorView = forwardRef<HTMLDivElement, MarkdownEditorViewP
         return (
             <ErrorBoundary
                 onError={(e) => {
-                    logger.error(e);
+                    globalLogger.error(e);
+                    editor.logger.error(e);
                 }}
                 fallbackRender={({error, resetErrorBoundary}) => {
                     toaster.add({

src/bundle/MarkupEditorView.tsx

@@ -2,7 +2,7 @@ import {memo} from 'react';
 
 import {type ClassNameProps, cn} from '../classname';
 import {ReactRendererComponent} from '../extensions';
-import {logger} from '../logger';
+import {globalLogger} from '../logger';
 import {useRenderTime} from '../react-utils/hooks';
 
 import type {EditorInt} from './Editor';
@@ -44,7 +44,12 @@ export const MarkupEditorView = memo<MarkupEditorViewProps>((props) => {
         stickyToolbar = true,
     } = props;
     useRenderTime((time) => {
-        logger.metrics({
+        globalLogger.metrics({
+            component: 'markup-editor',
+            event: 'render',
+            duration: time,
+        });
+        editor.logger.metrics({
             component: 'markup-editor',
             event: 'render',
             duration: time,

src/bundle/MarkupManager.ts

@@ -1,6 +1,7 @@
 import type {Node} from 'prosemirror-model';
 import {v4} from 'uuid';
 
+import type {Logger2} from '../logger';
 import {SafeEventEmitter} from '../utils';
 
 export interface IMarkupManager {
@@ -12,11 +13,6 @@ export interface IMarkupManager {
     on<K extends keyof Events>(event: K, listener: (value: Events[K]) => void): void;
 }
 
-export interface Logger {
-    log(message: string): void;
-    error(message: string): void;
-}
-
 interface Events {
     markupChanged: {id: string; rawMarkup: string};
     nodeChanged: {id: string; node: Node};
@@ -28,9 +24,9 @@ export class MarkupManager extends SafeEventEmitter<Events> implements IMarkupMa
     private _nodes: Map<string, Node> = new Map();
     private _namespace: string;
 
-    private readonly logger?: Logger;
+    private readonly logger: Logger2.ILogger;
 
-    constructor(logger?: Logger) {
+    constructor(logger: Logger2.ILogger) {
         super();
         this.logger = logger;
         this._namespace = v4();
@@ -41,27 +37,27 @@ export class MarkupManager extends SafeEventEmitter<Events> implements IMarkupMa
      */
     setMarkup(id: string, rawMarkup: string): void {
         if (typeof rawMarkup !== 'string') {
-            this.logger?.error('[MarkupManager] rawMarkup must be a string');
+            this.logger.warn('[MarkupManager] rawMarkup must be a string');
             return;
         }
         this._markups.set(id, rawMarkup);
 
         this.emit('markupChanged', {id, rawMarkup});
-        this.logger?.log(`[MarkupManager] Raw markup for ID ${id} set successfully`);
+        this.logger.log(`[MarkupManager] Raw markup for ID ${id} set successfully`);
     }
 
     /**
      * Set a node for a specific id
      */
     setNode(id: string, node: Node): void {
         if (!node) {
-            this.logger?.error('[MarkupManager] Node must be a valid ProseMirror Node');
+            this.logger.warn('[MarkupManager] Node must be a valid ProseMirror Node');
             return;
         }
         this._nodes.set(id, node);
 
         this.emit('nodeChanged', {id, node});
-        this.logger?.log(`[MarkupManager] Node for ID ${id} set successfully`);
+        this.logger.log(`[MarkupManager] Node for ID ${id} set successfully`);
     }
 
     /**
@@ -90,6 +86,6 @@ export class MarkupManager extends SafeEventEmitter<Events> implements IMarkupMa
         this._nodes.clear();
 
         this.emit('reset', {});
-        this.logger?.log('[MarkupManager] MarkupManager has been reset');
+        this.logger.log('[MarkupManager] MarkupManager has been reset');
     }
 }