feat!: markdown-editor@15

.babelrc

@@ -10,7 +10,9 @@
             }
         ],
         "@babel/preset-typescript",
-        "@babel/preset-react"
+        ["@babel/preset-react", {
+            "runtime": "automatic"
+        }]
     ],
     "plugins": []
 }

.storybook/preview.ts

@@ -2,9 +2,10 @@ import type {Preview} from '@storybook/react';
 import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
 import {withThemeProvider} from '../demo/hocs/withThemeProvider';
 import {withLang} from '../demo/hocs/withLang';
+import {withToaster} from '../demo/hocs/withToaster';
 
 const preview: Preview = {
-    decorators: [withThemeProvider, withLang],
+    decorators: [withThemeProvider, withLang, withToaster],
     parameters: {
         jsx: {showFunctions: true}, // To show functions in sources
         viewport: {

README-ru.md

@@ -30,7 +30,6 @@ npm install @gravity-ui/markdown-editor
 ```tsx
 import React from 'react';
 import {useMarkdownEditor, MarkdownEditorView} from '@gravity-ui/markdown-editor';
-import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';
 
 function Editor({onSubmit}) {
   const editor = useMarkdownEditor({allowHTML: false});
@@ -48,7 +47,7 @@ function Editor({onSubmit}) {
     };
   }, [onSubmit]);
 
-  return <MarkdownEditorView stickyToolbar autofocus toaster={toaster} editor={editor} />;
+  return <MarkdownEditorView stickyToolbar autofocus editor={editor} />;
 }
 ```
 

README.md

@@ -30,7 +30,6 @@ To set up styling and theme see [UIKit docs](https://github.com/gravity-ui/uikit
 ```tsx
 import React from 'react';
 import {useMarkdownEditor, MarkdownEditorView} from '@gravity-ui/markdown-editor';
-import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';
 
 function Editor({onSubmit}) {
   const editor = useMarkdownEditor({allowHTML: false});
@@ -48,7 +47,7 @@ function Editor({onSubmit}) {
     };
   }, [onSubmit]);
 
-  return <MarkdownEditorView stickyToolbar autofocus toaster={toaster} editor={editor} />;
+  return <MarkdownEditorView stickyToolbar autofocus editor={editor} />;
 }
 ```
 Read more:

demo/.eslintrc

@@ -1,3 +1,3 @@
 {
-    "extends": "@gravity-ui/eslint-config/client"
+    "extends": ["@gravity-ui/eslint-config/client", "plugin:react/jsx-runtime"]
 }

demo/components/PMSelection.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import {useLayoutEffect} from 'react';
 
 import {EditorView} from 'prosemirror-view';
 import {useEffectOnce, useUpdate} from 'react-use';
@@ -23,7 +23,7 @@ export function WysiwygSelection({editor, className}: WysiwygSelectionProps) {
 
     const view = editor?.currentMode === 'wysiwyg' && editor._wysiwygView;
 
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (!editor) return undefined;
         editor.on(
             // @ts-expect-error TODO: add public event for selection change

demo/components/Playground.tsx

@@ -1,8 +1,7 @@
-import React, {CSSProperties, useCallback, useEffect, useState} from 'react';
+import {CSSProperties, memo, useCallback, useEffect, useState} from 'react';
 
 import {defaultOptions} from '@diplodoc/transform/lib/sanitize';
 import {Button, DropdownMenu} from '@gravity-ui/uikit';
-import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';
 
 import {
     type DirectiveSyntaxValue,
@@ -39,7 +38,7 @@
 import {SplitModePreview} from './SplitModePreview';
 
 const fileUploadHandler: FileUploadHandler = async (file) => {
     console.info('[Playground] Uploading file: ' + file.name);
     await randomDelay(1000, 3000);
     return {url: URL.createObjectURL(file)};
 };
@@ -75,14 +74,7 @@
     onChangeEditorType?: (mode: MarkdownEditorMode) => void;
     onChangeSplitModeEnabled?: (splitModeEnabled: boolean) => void;
     directiveSyntax?: DirectiveSyntaxValue;
-} & Pick<
-    UseMarkdownEditorProps,
-    | 'needToSetDimensionsForUploadedImages'
-    | 'extraExtensions'
-    | 'renderPreview'
-    | 'extensionOptions'
-    | 'experimental'
-> &
+} & Pick<UseMarkdownEditorProps, 'experimental' | 'wysiwygConfig'> &
     Pick<
         MarkdownEditorViewProps,
         | 'markupHiddenActionsConfig'
@@ -94,12 +86,12 @@
     >;
 
 logger.setLogger({
     metrics: console.info,
     action: (data) => console.info(`Action: ${data.action}`, data),
     ...console,
 });
 
-export const Playground = React.memo<PlaygroundProps>((props) => {
+export const Playground = memo<PlaygroundProps>((props) => {
     const {
         initial,
         initialEditor,
@@ -116,8 +108,7 @@
         stickyToolbar,
         renderPreviewDefined,
         height,
-        extraExtensions,
-        extensionOptions,
+        wysiwygConfig,
         toolbarsPreset,
         wysiwygToolbarConfig,
         wysiwygCommandMenuConfig,
@@ -126,21 +117,18 @@
         placeholderOptions,
         enableSubmitInPreview,
         hidePreviewAfterSubmit,
-        needToSetDimensionsForUploadedImages,
         experimental,
         directiveSyntax,
     } = props;
-    const [editorMode, setEditorMode] = React.useState<MarkdownEditorMode>(
-        initialEditor ?? 'wysiwyg',
-    );
-    const [mdRaw, setMdRaw] = React.useState<MarkupString>(initial || '');
+    const [editorMode, setEditorMode] = useState<MarkdownEditorMode>(initialEditor ?? 'wysiwyg');
+    const [mdRaw, setMdRaw] = useState<MarkupString>(initial || '');
 
-    React.useEffect(() => {
+    useEffect(() => {
         updateLocation(mdRaw);
     }, [mdRaw]);
 
     const renderPreview = useCallback<RenderPreview>(
         ({getValue, md, directiveSyntax}) => (
             <SplitModePreview
                 getValue={getValue}
                 allowHTML={md.html}
@@ -193,39 +181,44 @@
                         </style
                     `,
                         });
-                    if (extraExtensions) builder.use(extraExtensions);
+                    if (wysiwygConfig?.extensions) builder.use(wysiwygConfig.extensions);
+                },
+                extensionOptions: {
+                    commandMenu: {actions: wysiwygCommandMenuConfig ?? wCommandMenuConfig},
+                    imgSize: {
+                        parseInsertedUrlAsImage,
+                    },
+                    ...wysiwygConfig?.extensionOptions,
                 },
             },
-            allowHTML,
-            linkify,
-            linkifyTlds,
-            initialMarkup: mdRaw,
-            breaks: breaks ?? true,
-            initialEditorMode: editorMode,
-            initialSplitModeEnabled: initialSplitModeEnabled,
-            initialToolbarVisible: true,
-            splitMode: splitModeOrientation,
-            needToSetDimensionsForUploadedImages,
-            renderPreview: renderPreviewDefined ? renderPreview : undefined,
-            fileUploadHandler,
+            md: {
+                html: allowHTML,
+                linkify,
+                linkifyTlds,
+                breaks: breaks ?? true,
+            },
+            initial: {
+                markup: mdRaw,
+                mode: editorMode,
+                toolbarVisible: true,
+                splitModeEnabled: initialSplitModeEnabled,
+            },
+            handlers: {
+                uploadFile: fileUploadHandler,
+            },
             experimental: {
                 ...experimental,
                 directiveSyntax,
-                preserveEmptyRows: preserveEmptyRows,
-            },
-            prepareRawMarkup: prepareRawMarkup
-                ? (value) => '**prepare raw markup**\n\n' + value
-                : undefined,
-            extensionOptions: {
-                commandMenu: {actions: wysiwygCommandMenuConfig ?? wCommandMenuConfig},
-                imgSize: {
-                    parseInsertedUrlAsImage,
-                },
-                ...extensionOptions,
+                preserveEmptyRows,
+                prepareRawMarkup: prepareRawMarkup
+                    ? (value) => '**prepare raw markup**\n\n' + value
+                    : undefined,
             },
             markupConfig: {
                 extensions: markupConfigExtensions,
                 parseInsertedUrlAsImage,
+                renderPreview,
+                splitMode: splitModeOrientation,
             },
         },
         [
@@ -236,8 +229,7 @@
             splitModeOrientation,
             renderPreviewDefined,
             renderPreview,
-            extraExtensions,
-            needToSetDimensionsForUploadedImages,
+            experimental?.needToSetDimensionsForUploadedImages,
             initial,
             experimental?.enableNewImageSizeCalculation,
             experimental?.needToSetDimensionsForUploadedImages,
@@ -264,14 +256,14 @@
             setEditorMode(mode);
         }
         const onToolbarAction = ({id, editorMode: type}: ToolbarActionData) => {
             console.info(`The '${id}' action is performed in the ${type}-editor.`);
         };
         function onChangeSplitModeEnabled({splitModeEnabled}: {splitModeEnabled: boolean}) {
             props.onChangeSplitModeEnabled?.(splitModeEnabled);
             console.info(`Split mode enabled: ${splitModeEnabled}`);
         }
         function onChangeToolbarVisibility({visible}: {visible: boolean}) {
             console.info('Toolbar visible: ' + visible);
         }
 
         mdEditor.on('cancel', onCancel);
@@ -291,7 +283,7 @@
             mdEditor.off('change-split-mode-enabled', onChangeSplitModeEnabled);
             mdEditor.off('change-toolbar-visibility', onChangeToolbarVisibility);
         };
     }, [mdEditor]);
 
     return (
         <PlaygroundLayout
@@ -300,7 +292,6 @@
             view={({className}) => (
                 <MarkdownEditorView
                     autofocus
-                    toaster={toaster}
                     className={className}
                     stickyToolbar={Boolean(stickyToolbar)}
                     toolbarsPreset={toolbarsPreset}

demo/components/PlaygroundLayout.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import {StrictMode, useEffect} from 'react';
 
 import {useUpdate} from 'react-use';
 
@@ -49,14 +49,14 @@ export const PlaygroundLayout: React.FC<PlaygroundLayoutProps> = function Playgr
 
             <hr />
 
-            <React.StrictMode>
+            <StrictMode>
                 <div className={b('editor')} style={{height: props.viewHeight ?? 'initial'}}>
                     {props.view({className: b('editor-view')})}
 
                     <WysiwygDevTools editor={editor} />
                     <WysiwygSelection editor={editor} className={b('pm-selection')} />
                 </div>
-            </React.StrictMode>
+            </StrictMode>
 
             <hr />
 

demo/components/PlaygroundMini.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import {memo} from 'react';
 
 import {getInitialMd} from '../utils/getInitialMd';
 
@@ -25,7 +25,7 @@ export type PlaygroundMiniProps = Pick<
     | 'directiveSyntax'
 > & {withDefaultInitialContent?: boolean};
 
-export const PlaygroundMini = React.memo<PlaygroundMiniProps>(
+export const PlaygroundMini = memo<PlaygroundMiniProps>(
     ({withDefaultInitialContent, initial, ...props}) => (
         <Playground
             {...props}

demo/components/ProseMirrorDevTools.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import {useEffect, useLayoutEffect} from 'react';
 
 import {applyDevTools, removeDevTools} from 'prosemirror-dev-toolkit';
 import {EditorView} from 'prosemirror-view';
@@ -18,7 +18,7 @@ export function WysiwygDevTools({editor}: WysiwygDevToolsProps) {
 
     const view = editor?.currentMode === 'wysiwyg' && editor._wysiwygView;
 
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (!editor) return undefined;
         editor.on('change-editor-mode', rerender);
         return () => {
@@ -36,7 +36,7 @@ type ProseMirrorDevToolsProps = {
 };
 
 function ProseMirrorDevTools({view}: ProseMirrorDevToolsProps) {
-    React.useEffect(() => {
+    useEffect(() => {
         applyDevTools(view);
         return () => {
             removeDevTools();

demo/components/SplitModePreview.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 
 import transform from '@diplodoc/transform';
 import {useThemeValue} from '@gravity-ui/uikit';
@@ -55,7 +55,7 @@
                 setHtml(res.html);
                 setMeta(res.meta);
             }, 200),
         [getValue, allowHTML, breaks, plugins, linkify, linkifyTlds, needToSanitizeHtml, theme],
     );
 
     useEffect(() => {

demo/defaults/content.ts

@@ -47,7 +47,7 @@ Easily connect to your React app with a hook:
 \`\`\`plaintext
 import React from 'react';
 import { useMarkdownEditor, MarkdownEditorView } from '@gravity-ui/markdown-editor';
-import { toaster } from '@gravity-ui/uikit/toaster-singleton-react-18';
+import { toaster } from '@gravity-ui/uikit/toaster-singleton';
 
 function Editor({ onSubmit }) {
   const editor = useMarkdownEditor({ allowHTML: false });
@@ -65,7 +65,7 @@ function Editor({ onSubmit }) {
     };
   }, [onSubmit]);
 
-  return <MarkdownEditorView stickyToolbar autofocus toaster={toaster} editor={editor} />;
+  return <MarkdownEditorView stickyToolbar autofocus editor={editor} />;
 }
 \`\`\`
 

demo/hocs/withLang.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {configure} from '@gravity-ui/uikit';
 import type {Decorator} from '@storybook/react';
 

demo/hocs/withThemeProvider.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {ThemeProvider} from '@gravity-ui/uikit';
 import type {Decorator} from '@storybook/react';
 

demo/hocs/withToaster.tsx

@@ -0,0 +1,13 @@
+import {ToasterProvider} from '@gravity-ui/uikit';
+import {toaster} from '@gravity-ui/uikit/toaster-singleton';
+import type {Decorator} from '@storybook/react';
+
+import '@gravity-ui/uikit/styles/styles.scss';
+
+export const withToaster: Decorator = (StoryItem, context) => {
+    return (
+        <ToasterProvider toaster={toaster}>
+            <StoryItem {...context} />
+        </ToasterProvider>
+    );
+};

demo/stories/css-variables/CSSVariables.tsx

@@ -1,12 +1,10 @@
-import React from 'react';
-
-import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';
+import {memo} from 'react';
 
 import {MarkdownEditorView, useMarkdownEditor} from '../../../src';
 import {PlaygroundLayout} from '../../components/PlaygroundLayout';
 import {markup} from '../../defaults/content';
 
-export const CustomCSSVariablesDemo = React.memo((styles) => {
+export const CustomCSSVariablesDemo = memo((styles) => {
     const editor = useMarkdownEditor({initial: {markup}});
 
     return (
@@ -19,7 +17,6 @@ export const CustomCSSVariablesDemo = React.memo((styles) => {
                     stickyToolbar
                     settingsVisible
                     editor={editor}
-                    toaster={toaster}
                     className={className}
                 />
             )}