feat!: markdown-editor@15 (#604)

* feat(deps)!: move lodash from peerDependencies to dependencies

* feat(deps): upd gravity-ui/icons to v2.12.0

* feat(deps): upd gravity-ui/i18n to v1.7.0

* test(deps): update jest to v29.7.0

* feat: update typescript to v5.7.3

* feat!: removed deprecated properties from MarkdownEditorOptions type (#580)

* feat!: removed deprecated properties (#583)

* feat(package)!: drop typesVersions and improve exports (#585)

* feat(build)!: use new jsx transform (#586)

* feat(deps): update ProseMirror and CodeMirror packages (#589)

* feat(deps): update lezer packages (#590)

* feat(deps): updated @diplodoc/transform and related packages (#591)

* feat!: update esm and cjs build (#592)

* build: bump gulp-utils to v1.0.1

* feat(types)!: updated MarkdownSerializer types (#596)

* feat(presets): fixed commonmark-specs preset

* feat!: change re-exports from `src/plugins`

* feat!: update uikit to v7

* feat(bundle)!: remove toaster from MarkdownEditorView props

* fix(core): fixed circularr dependencies

---------

Co-authored-by: Sergey Makhnatkin <[email protected]>

Author: d3m1d0v

.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,
@@ -75,14 +74,7 @@ export type PlaygroundProps = {
     onChangeEditorType?: (mode: MarkdownEditorMode) => void;
     onChangeSplitModeEnabled?: (splitModeEnabled: boolean) => void;
     directiveSyntax?: DirectiveSyntaxValue;
-} & Pick<
-    UseMarkdownEditorProps,
-    | 'needToSetDimensionsForUploadedImages'
-    | 'extraExtensions'
-    | 'renderPreview'
-    | 'extensionOptions'
-    | 'experimental'
-> &
+} & Pick<UseMarkdownEditorProps, 'experimental' | 'wysiwygConfig'> &
     Pick<
         MarkdownEditorViewProps,
         | 'markupHiddenActionsConfig'
@@ -99,7 +91,7 @@ logger.setLogger({
     ...console,
 });
 
-export const Playground = React.memo<PlaygroundProps>((props) => {
+export const Playground = memo<PlaygroundProps>((props) => {
     const {
         initial,
         initialEditor,
@@ -116,8 +108,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
         stickyToolbar,
         renderPreviewDefined,
         height,
-        extraExtensions,
-        extensionOptions,
+        wysiwygConfig,
         toolbarsPreset,
         wysiwygToolbarConfig,
         wysiwygCommandMenuConfig,
@@ -126,16 +117,13 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
         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]);
 
@@ -193,39 +181,44 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
                         </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 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
             splitModeOrientation,
             renderPreviewDefined,
             renderPreview,
-            extraExtensions,
-            needToSetDimensionsForUploadedImages,
+            experimental?.needToSetDimensionsForUploadedImages,
             initial,
             experimental?.enableNewImageSizeCalculation,
             experimental?.needToSetDimensionsForUploadedImages,
@@ -300,7 +292,6 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
             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();