Merge branch 'main' into bug-fixes

.storybook/preview.ts

@@ -12,7 +12,7 @@ const preview: Preview = {
         },
         options: {
             storySort: {
-                order: ['Playground', 'Docs', 'Extensions', ['Presets', '*'], '*'],
+                order: ['Playground', 'Docs', 'Extensions', 'Settings', ['Presets', '*'], '*'],
             },
         },
         controls: {

CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## [14.8.0](https://github.com/gravity-ui/markdown-editor/compare/v14.7.0...v14.8.0) (2024-12-17)
+
+
+### Features
+
+* **build:** added a sideEffects property for tree shaking package ([#522](https://github.com/gravity-ui/markdown-editor/issues/522)) ([03b3962](https://github.com/gravity-ui/markdown-editor/commit/03b39624c32adde84adae74c4e320ce389d0eddb))
+
+## [14.7.0](https://github.com/gravity-ui/markdown-editor/compare/v14.6.0...v14.7.0) (2024-12-17)
+
+
+### Features
+
+* **bundle:** added empty row placeholder ([#506](https://github.com/gravity-ui/markdown-editor/issues/506)) ([dc049af](https://github.com/gravity-ui/markdown-editor/commit/dc049af1c5d3a1016406afec3237b85bad2211c0))
+
+
+### Bug Fixes
+
+* **Checkbox:** added parse dom rules and fixed pasting of checkboxes ([#523](https://github.com/gravity-ui/markdown-editor/issues/523)) ([a7c23b5](https://github.com/gravity-ui/markdown-editor/commit/a7c23b59af7f2d7a8fd52e3cdb927468854f6c09))
+
+## [14.6.0](https://github.com/gravity-ui/markdown-editor/compare/v14.5.1...v14.6.0) (2024-12-10)
+
+
+### Features
+
+* **bundle:** update view of text color action item in toolbar ([#514](https://github.com/gravity-ui/markdown-editor/issues/514)) ([54ac0d3](https://github.com/gravity-ui/markdown-editor/commit/54ac0d36499e572844e42cfff8f7781387731b00))
+
+
+### Bug Fixes
+
+* **Cursor:** input-rules does not work when cursor in virtual selection (GapCursorSelection) ([#515](https://github.com/gravity-ui/markdown-editor/issues/515)) ([9126756](https://github.com/gravity-ui/markdown-editor/commit/9126756fe5e241c6ab2badec4689b1df8f0009c3))
+* **deps:** bumped @lezer/markdown to fix large text hang ([#512](https://github.com/gravity-ui/markdown-editor/issues/512)) ([8a8fce8](https://github.com/gravity-ui/markdown-editor/commit/8a8fce8ff5f9603f6e755264fc474c03a36d6bb7))
+* Gpt extension render ([#519](https://github.com/gravity-ui/markdown-editor/issues/519)) ([89c9881](https://github.com/gravity-ui/markdown-editor/commit/89c9881331df2b0fae5968258a29b9c9eed179ef))
+
 ## [14.5.1](https://github.com/gravity-ui/markdown-editor/compare/v14.5.0...v14.5.1) (2024-12-02)
 
 

README-ru.md

@@ -0,0 +1,90 @@
+![Markdown Editor](https://github.com/user-attachments/assets/0b4e5f65-54cf-475f-9c68-557a4e9edb46)
+
+# @gravity-ui/markdown-editor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/markdown-editor)](https://www.npmjs.com/package/@gravity-ui/markdown-editor) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/markdown-editor/ci.yml?branch=main&label=CI)](https://github.com/gravity-ui/markdown-editor/actions/workflows/ci.yml?query=branch:main) [![Release](https://img.shields.io/github/actions/workflow/status/gravity-ui/markdown-editor/release.yml?branch=main&label=Release)](https://github.com/gravity-ui/markdown-editor/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/md-editor/)
+
+## Редактор Markdown с поддержкой режимов WYSIWYG и Markup
+
+`MarkdownEditor` — эффективный инструмент для работы с Markdown, сочетающий режимы WYSIWYG и Markup. Он позволяет создавать и редактировать контент в удобном визуальном режиме с полным контролем над разметкой.
+
+### 🔧 Основные характеристики
+
+- Поддержка базового синтаксиса Markdown и [YFM](https://ydocs.tech).
+- Расширяемость за счет использования движков ProseMirror и CodeMirror.
+- Возможность работы в режимах WYSIWYG и Markup для максимальной гибкости.
+
+## Установка
+
+```shell
+npm install @gravity-ui/markdown-editor
+```
+
+### Необходимые зависимости
+
+Для начала работы с пакетом в проекте необходимо предварительно установить следующие зависимости: `@diplodoc/transform`, `react`, `react-dom` и др. Подробную информацию можно найти в разделе `peerDependencies` файла `package.json`.
+
+## Начало работы
+
+`MarkdownEditor` поставляется в виде React-хука для создания экземпляра редактора и компонента для рендеринга представления.
+Для настройки стиля и темы см. [документацию UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles).
+
+```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});
+
+  React.useEffect(() => {
+    function submitHandler() {
+      // Serialize current content to markdown markup
+      const value = editor.getValue();
+      onSubmit(value);
+    }
+
+    editor.on('submit', submitHandler);
+    return () => {
+      editor.off('submit', submitHandler);
+    };
+  }, [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)
+- [Как добавить расширение HTML](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-html-block--docs)
+- [Как добавить расширение Latex](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-latex-extension--docs)
+- [Как добавить расширение Mermaid](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-mermaid-extension--docs)
+- [Как создать собственное расширение](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-develop-extension-creation--docs)
+- [Как добавить расширение 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
+
+Для настройки интернационализации используйте `configure`:
+
+```typescript
+import {configure} from '@gravity-ui/markdown-editor';
+
+configure({
+  lang: 'ru',
+});
+```
+
+Обязательно сделайте вызов `configure()` из [UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#i18n) и других UI-библиотек.
+
+
+### Участие в разработке
+
+- [Информация для контрибьюетров](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-contributing--docs)

README.md

@@ -52,15 +52,21 @@ function Editor({onSubmit}) {
 }
 ```
 Read more:
-- [How to connect the editor in the Create React App](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-add-editor-with-create-react-app.md)
-- [How to add preview for markup mode](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-add-preview.md)
-- [How to add HTML extension](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-connect-html-extension.md)
-- [How to add Latex extension](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-connect-latex-extension.md)
-- [How to add Mermaid extension](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-connect-mermaid-extension.md)
-- [How to write extension](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-create-extension.md)
-- [How to add GPT extension](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-connect-gpt-extensions.md)
-- [How to add text binding extension in markdown](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-add-text-binding-extension-in-markdown.md)
+- [How to connect the editor in the Create React App](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-install-create-react-app--docs)
+- [How to add preview for markup mode](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-develop-preview--docs)
+- [How to add HTML extension](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-html-block--docs)
+- [How to add Latex extension](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-latex-extension--docs)
+- [How to add Mermaid extension](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-mermaid-extension--docs)
+- [How to write extension](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-develop-extension-creation--docs)
+- [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)

demo/components/Playground.tsx

@@ -16,8 +16,8 @@ import {
     type RenderPreview,
     type ToolbarGroupData,
     type UseMarkdownEditorProps,
+    WysiwygPlaceholderOptions,
     logger,
-    markupToolbarConfigs,
     useMarkdownEditor,
     wysiwygToolbarConfigs,
 } from '../../src';
@@ -28,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';
@@ -51,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,
@@ -79,6 +66,7 @@ export type PlaygroundProps = {
     breaks?: boolean;
     linkify?: boolean;
     linkifyTlds?: string | string[];
+    placeholderOptions?: WysiwygPlaceholderOptions;
     sanitizeHtml?: boolean;
     prepareRawMarkup?: boolean;
     splitModeOrientation?: 'horizontal' | 'vertical' | false;
@@ -90,6 +78,7 @@ export type PlaygroundProps = {
     escapeConfig?: EscapeConfig;
     wysiwygCommandMenuConfig?: wysiwygToolbarConfigs.WToolbarItemData[];
     markupToolbarConfig?: ToolbarGroupData<CodeEditor>[];
+    toolbarsPreset?: ToolbarsPreset;
     onChangeEditorType?: (mode: MarkdownEditorMode) => void;
     onChangeSplitModeEnabled?: (splitModeEnabled: boolean) => void;
     directiveSyntax?: DirectiveSyntaxValue;
@@ -135,10 +124,12 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
         height,
         extraExtensions,
         extensionOptions,
+        toolbarsPreset,
         wysiwygToolbarConfig,
         wysiwygCommandMenuConfig,
         markupConfigExtensions,
         markupToolbarConfig,
+        placeholderOptions,
         escapeConfig,
         enableSubmitInPreview,
         hidePreviewAfterSubmit,
@@ -172,6 +163,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,
@@ -181,7 +213,6 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
             initialSplitModeEnabled: initialSplitModeEnabled,
             initialToolbarVisible: true,
             splitMode: splitModeOrientation,
-            escapeConfig: escapeConfig,
             needToSetDimensionsForUploadedImages,
             renderPreview: renderPreviewDefined ? renderPreview : undefined,
             fileUploadHandler,
@@ -203,42 +234,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,
@@ -388,8 +383,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}

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,
 };