Merge branch 'main' into add-empty-row

gravity-ui · Dec 23, 2024 · fce3aa8 · fce3aa8
2 parents 8ed557d + 300bfdf
commit fce3aa8
Show file tree

Hide file tree

Showing 36 changed files with 2,226 additions and 121 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -12,7 +12,7 @@ const preview: Preview = {
         },
         options: {
             storySort: {
-                order: ['Playground', 'Docs', 'Extensions', ['Presets', '*'], '*'],
+                order: ['Playground', 'Docs', 'Extensions', 'Settings', ['Presets', '*'], '*'],
             },
         },
         controls: {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # Changelog
 
+## [14.9.0](https://github.com/gravity-ui/markdown-editor/compare/v14.8.0...v14.9.0) (2024-12-20)
+
+
+### Features
+
+* **markup:** smart re-indent on paste ([#530](https://github.com/gravity-ui/markdown-editor/issues/530)) ([15767d7](https://github.com/gravity-ui/markdown-editor/commit/15767d7d3b0334126e34149d811ce6b6d62909d2))
+* **toolbars:** restructured toolbar configuration and presets ([#509](https://github.com/gravity-ui/markdown-editor/issues/509)) ([3ebf14f](https://github.com/gravity-ui/markdown-editor/commit/3ebf14fd580ce29dc0133715cd2cb6bb6ea4ca8a))
+
+
+### Bug Fixes
+
+* **Link:** fixed pasting link to empty selection ([#528](https://github.com/gravity-ui/markdown-editor/issues/528)) ([bd52bee](https://github.com/gravity-ui/markdown-editor/commit/bd52bee93aceaf0af5bd9b8da284e93338b89a32))
+
 ## [14.8.0](https://github.com/gravity-ui/markdown-editor/compare/v14.7.0...v14.8.0) (2024-12-17)
 
 

diff --git a/README-ru.md b/README-ru.md
@@ -51,6 +51,7 @@ function Editor({onSubmit}) {
   return <MarkdownEditorView stickyToolbar autofocus toaster={toaster} editor={editor} />;
 }
 ```
+
 Полезные ссылки:
 - [Как подключить редактор в Create React App](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-install-create-react-app--docs)
 - [Как добавить предварительный просмотр для режима разметки](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-develop-preview--docs)
@@ -61,7 +62,13 @@ function Editor({onSubmit}) {
 - [Как добавить расширение GPT](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-gpt--docs)
 - [Как добавить расширение привязки текста в Markdown](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-develop-extension-with-popup--docs)
 
+### Разработка
+
+Для запуска Storybook в режиме разработки выполните следующую команду:
 
+```shell
+npm start
+```
 
 ### i18n
 
@@ -77,10 +84,7 @@ configure({
 
 Обязательно сделайте вызов `configure()` из [UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#i18n) и других UI-библиотек.
 
-## Разработка
 
-Для запуска Storybook в режиме разработки выполните следующую команду:
+### Участие в разработке
 
-```shell
-npm start
-```
+- [Информация для контрибьюетров](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-contributing--docs)
diff --git a/README.md b/README.md
@@ -61,6 +61,12 @@ Read more:
 - [How to add GPT extension](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-gpt--docs)
 - [How to add text binding extension in markdown](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-develop-extension-with-popup--docs)
 
+### Development
+To start the dev storybook
+
+```shell
+npm start
+```
 
 
 ### i18n
@@ -77,10 +83,6 @@ configure({
 
 Don't forget to call `configure()` from [UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#i18n) and other UI libraries.
 
-## Development
+### Contributing
 
-To start the dev storybook
-
-```shell
-npm start
-```
+- [Contributor Guidelines](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-contributing--docs)
diff --git a/demo/components/Playground.tsx b/demo/components/Playground.tsx
@@ -18,7 +18,6 @@ import {
     type UseMarkdownEditorProps,
     WysiwygPlaceholderOptions,
     logger,
-    markupToolbarConfigs,
     useMarkdownEditor,
     wysiwygToolbarConfigs,
 } from '../../src';
@@ -29,8 +28,8 @@ import {Math} from '../../src/extensions/additional/Math';
 import {Mermaid} from '../../src/extensions/additional/Mermaid';
 import {YfmHtmlBlock} from '../../src/extensions/additional/YfmHtmlBlock';
 import {getSanitizeYfmHtmlBlock} from '../../src/extensions/additional/YfmHtmlBlock/utils';
-import {cloneDeep} from '../../src/lodash';
 import type {CodeEditor} from '../../src/markup';
+import {ToolbarsPreset} from '../../src/modules/toolbars/types';
 import {VERSION} from '../../src/version';
 import {getPlugins} from '../defaults/md-plugins';
 import useYfmHtmlBlockStyles from '../hooks/useYfmHtmlBlockStyles';
@@ -52,19 +51,6 @@ const fileUploadHandler: FileUploadHandler = async (file) => {
     return {url: URL.createObjectURL(file)};
 };
 
-const mToolbarConfig = [
-    ...markupToolbarConfigs.mToolbarConfig,
-    [markupToolbarConfigs.mMermaidButton, markupToolbarConfigs.mYfmHtmlBlockButton],
-];
-mToolbarConfig[2].push(markupToolbarConfigs.mMathListItem);
-
-const wToolbarConfig = cloneDeep(wysiwygToolbarConfigs.wToolbarConfig);
-wToolbarConfig[2].push(wysiwygToolbarConfigs.wMathListItem);
-wToolbarConfig.push([
-    wysiwygToolbarConfigs.wMermaidItemData,
-    wysiwygToolbarConfigs.wYfmHtmlBlockItemData,
-]);
-
 const wCommandMenuConfig = wysiwygToolbarConfigs.wCommandMenuConfig.concat(
     wysiwygToolbarConfigs.wMathInlineItemData,
     wysiwygToolbarConfigs.wMathBlockItemData,
@@ -93,6 +79,7 @@ export type PlaygroundProps = {
     escapeConfig?: EscapeConfig;
     wysiwygCommandMenuConfig?: wysiwygToolbarConfigs.WToolbarItemData[];
     markupToolbarConfig?: ToolbarGroupData<CodeEditor>[];
+    toolbarsPreset?: ToolbarsPreset;
     onChangeEditorType?: (mode: MarkdownEditorMode) => void;
     onChangeSplitModeEnabled?: (splitModeEnabled: boolean) => void;
     directiveSyntax?: DirectiveSyntaxValue;
@@ -139,6 +126,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
         height,
         extraExtensions,
         extensionOptions,
+        toolbarsPreset,
         wysiwygToolbarConfig,
         wysiwygCommandMenuConfig,
         markupConfigExtensions,
@@ -177,6 +165,47 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
 
     const mdEditor = useMarkdownEditor(
         {
+            preset: 'full',
+            wysiwygConfig: {
+                escapeConfig,
+                placeholderOptions: placeholderOptions,
+                extensions: (builder) => {
+                    builder
+                        .use(Math, {
+                            loadRuntimeScript: () => {
+                                import(
+                                    /* webpackChunkName: "latex-runtime" */ '@diplodoc/latex-extension/runtime'
+                                );
+                                import(
+                                    // @ts-expect-error // no types for styles
+                                    /* webpackChunkName: "latex-styles" */ '@diplodoc/latex-extension/runtime/styles'
+                                );
+                            },
+                        })
+                        .use(Mermaid, {
+                            loadRuntimeScript: () => {
+                                import(
+                                    /* webpackChunkName: "mermaid-runtime" */ '@diplodoc/mermaid-extension/runtime'
+                                );
+                            },
+                        })
+                        .use(FoldingHeading)
+                        .use(YfmHtmlBlock, {
+                            useConfig: useYfmHtmlBlockStyles,
+                            sanitize: getSanitizeYfmHtmlBlock({options: defaultOptions}),
+                            head: `
+                        <base target="_blank" />
+                        <style>
+                            html, body {
+                                margin: 0;
+                                padding: 0;
+                            }
+                        </style
+                    `,
+                        });
+                    if (extraExtensions) builder.use(extraExtensions);
+                },
+            },
             allowHTML,
             linkify,
             linkifyTlds,
@@ -186,13 +215,9 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
             initialSplitModeEnabled: initialSplitModeEnabled,
             initialToolbarVisible: true,
             splitMode: splitModeOrientation,
-            escapeConfig: escapeConfig,
             needToSetDimensionsForUploadedImages,
             renderPreview: renderPreviewDefined ? renderPreview : undefined,
             fileUploadHandler,
-            wysiwygConfig: {
-                placeholderOptions: placeholderOptions,
-            },
             experimental: {
                 ...experimental,
                 directiveSyntax,
@@ -212,42 +237,6 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
                 extensions: markupConfigExtensions,
                 parseInsertedUrlAsImage,
             },
-            extraExtensions: (builder) => {
-                builder
-                    .use(Math, {
-                        loadRuntimeScript: () => {
-                            import(
-                                /* webpackChunkName: "latex-runtime" */ '@diplodoc/latex-extension/runtime'
-                            );
-                            import(
-                                // @ts-expect-error // no types for styles
-                                /* webpackChunkName: "latex-styles" */ '@diplodoc/latex-extension/runtime/styles'
-                            );
-                        },
-                    })
-                    .use(Mermaid, {
-                        loadRuntimeScript: () => {
-                            import(
-                                /* webpackChunkName: "mermaid-runtime" */ '@diplodoc/mermaid-extension/runtime'
-                            );
-                        },
-                    })
-                    .use(FoldingHeading)
-                    .use(YfmHtmlBlock, {
-                        useConfig: useYfmHtmlBlockStyles,
-                        sanitize: getSanitizeYfmHtmlBlock({options: defaultOptions}),
-                        head: `
-                        <base target="_blank" />
-                        <style>
-                            html, body {
-                                margin: 0;
-                                padding: 0;
-                            }
-                        </style
-                    `,
-                    });
-                if (extraExtensions) builder.use(extraExtensions);
-            },
         },
         [
             allowHTML,
@@ -397,8 +386,9 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
                         toaster={toaster}
                         className={b('editor-view')}
                         stickyToolbar={Boolean(stickyToolbar)}
-                        wysiwygToolbarConfig={wysiwygToolbarConfig ?? wToolbarConfig}
-                        markupToolbarConfig={markupToolbarConfig ?? mToolbarConfig}
+                        toolbarsPreset={toolbarsPreset}
+                        wysiwygToolbarConfig={wysiwygToolbarConfig}
+                        markupToolbarConfig={markupToolbarConfig}
                         settingsVisible={settingsVisible}
                         editor={mdEditor}
                         enableSubmitInPreview={enableSubmitInPreview}

diff --git a/demo/stories/css-variables/CSSVariables.stories.tsx b/demo/stories/css-variables/CSSVariables.stories.tsx
@@ -33,6 +33,6 @@ export const Story: StoryObj<typeof component> = {
 Story.storyName = 'Custom CSS Variables';
 
 export default {
-    title: 'Experiments / Custom CSS Variables',
+    title: 'Settings / Custom CSS Variables',
     component,
 };
diff --git a/demo/stories/presets/Preset.tsx b/demo/stories/presets/Preset.tsx
@@ -11,6 +11,7 @@ import {
     logger,
     useMarkdownEditor,
 } from '../../../src';
+import {ToolbarsPreset} from '../../../src/modules/toolbars/types';
 import type {FileUploadHandler} from '../../../src/utils/upload';
 import {VERSION} from '../../../src/version';
 // ---
@@ -41,6 +42,7 @@ export type PresetDemoProps = {
     splitModeOrientation?: 'horizontal' | 'vertical' | false;
     stickyToolbar?: boolean;
     height?: CSSProperties['height'];
+    toolbarsPreset?: ToolbarsPreset;
 };
 
 logger.setLogger({
@@ -60,6 +62,7 @@ export const Preset = React.memo<PresetDemoProps>((props) => {
         splitModeOrientation,
         stickyToolbar,
         height,
+        toolbarsPreset,
     } = props;
     const [editorMode, setEditorMode] = React.useState<MarkdownEditorMode>('wysiwyg');
     const [mdRaw, setMdRaw] = React.useState<MarkupString>('');
@@ -130,6 +133,7 @@ export const Preset = React.memo<PresetDemoProps>((props) => {
                 <div className={b('editor')} style={{height: height ?? 'initial'}}>
                     <MarkdownEditorView
                         autofocus
+                        toolbarsPreset={toolbarsPreset}
                         toaster={toaster}
                         className={b('editor-view')}
                         stickyToolbar={Boolean(stickyToolbar)}

diff --git a/demo/stories/presets/Presets.stories.tsx b/demo/stories/presets/Presets.stories.tsx
@@ -1,5 +1,23 @@
 import {StoryObj} from '@storybook/react';
 
+import {ActionName as Action} from '../../../src/bundle/config/action-names';
+import {ToolbarName as Toolbar} from '../../../src/modules/toolbars/constants';
+import {
+    boldItemView,
+    boldItemWysiwyg,
+    colorifyItemMarkup,
+    colorifyItemView,
+    colorifyItemWysiwyg,
+    italicItemMarkup,
+    italicItemView,
+    redoItemMarkup,
+    redoItemView,
+    redoItemWysiwyg,
+    undoItemMarkup,
+    undoItemView,
+    undoItemWysiwyg,
+} from '../../../src/modules/toolbars/items';
+
 import {Preset as component} from './Preset';
 
 export const Zero: StoryObj<typeof component> = {
@@ -22,6 +40,50 @@ export const Full: StoryObj<typeof component> = {
     args: {preset: 'full'},
 };
 
+export const Custom: StoryObj<typeof component> = {
+    args: {
+        toolbarsPreset: {
+            items: {
+                [Action.undo]: {
+                    view: undoItemView,
+                    wysiwyg: undoItemWysiwyg,
+                    markup: undoItemMarkup,
+                },
+                [Action.redo]: {
+                    view: redoItemView,
+                    wysiwyg: redoItemWysiwyg,
+                    markup: redoItemMarkup,
+                },
+                [Action.bold]: {
+                    view: boldItemView,
+                    wysiwyg: boldItemWysiwyg,
+                },
+                [Action.italic]: {
+                    view: italicItemView,
+                    markup: italicItemMarkup,
+                },
+                [Action.colorify]: {
+                    view: colorifyItemView,
+                    wysiwyg: colorifyItemWysiwyg,
+                    markup: colorifyItemMarkup,
+                },
+            },
+            orders: {
+                [Toolbar.wysiwygMain]: [
+                    [Action.colorify],
+                    [Action.bold],
+                    [Action.undo, Action.redo],
+                ],
+                [Toolbar.markupMain]: [
+                    [Action.colorify],
+                    [Action.italic],
+                    [Action.undo, Action.redo],
+                ],
+            },
+        },
+    },
+};
+
 export default {
     component,
     title: 'Extensions / Presets',

diff --git a/docs/how-to-add-editor-with-create-react-app.md b/docs/how-to-add-editor-with-create-react-app.md
@@ -1,4 +1,4 @@
-##### Install / Create react app
+##### Getting started / Create react app
 
 ## Installation Guide
 

diff --git a/docs/how-to-add-editor-with-nextjs.md b/docs/how-to-add-editor-with-nextjs.md
@@ -1,4 +1,4 @@
-##### Install / NextJS
+##### Getting started / NextJS
 
 ## Connection and Configuration
 This document provides instructions for configuring Webpack and Turbopack to avoid issues related to the 'fs' module and for connecting the editor on the nextjs client side.

diff --git a/docs/how-to-add-preview.md b/docs/how-to-add-preview.md
@@ -1,4 +1,4 @@
-##### Develop / Preview
+##### Getting started / Preview
 
 ## How to Add Preview for Markup Mode
 

diff --git a/docs/how-to-connect-gpt-extensions.md b/docs/how-to-connect-gpt-extensions.md
@@ -1,4 +1,4 @@
-##### Connect / GPT
+##### Extensions / GPT
 
 ## How to connect GPT extensions to editor