Merge branch 'main' into add-empty-row

gravity-ui · Dec 19, 2024 · fd08ec7 · fd08ec7
2 parents 1850ec4 + bd52bee
commit fd08ec7
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 14 deletions.
diff --git a/README-ru.md b/README-ru.md
@@ -0,0 +1,86 @@
+![Markdown Editor](https://github.com/user-attachments/assets/0b4e5f65-54cf-475f-9c68-557a4e9edb46)
+
+# @gravity-ui/markdown-editor &middot; [![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)
+
+
+
+### 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-библиотек.
+
+## Разработка
+
+Для запуска Storybook в режиме разработки выполните следующую команду:
+
+```shell
+npm start
+```
diff --git a/README.md b/README.md
@@ -52,14 +52,14 @@ 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)
 
 
 

diff --git a/src/extensions/markdown/Link/paste-plugin.ts b/src/extensions/markdown/Link/paste-plugin.ts
@@ -1,4 +1,4 @@
-import {Plugin, TextSelection} from 'prosemirror-state';
+import {Plugin, TextSelection, type Transaction} from 'prosemirror-state';
 
 import type {ExtensionDeps, Parser} from '../../../core';
 import {isNodeSelection, isTextSelection} from '../../../utils/selection';
@@ -14,28 +14,48 @@ export function linkPasteEnhance({markupParser: parser}: ExtensionDeps) {
                 paste(view, e): boolean {
                     const {state, dispatch} = view;
                     const sel = state.selection;
+                    let tr: Transaction | null = null;
+
                     if (
                         isTextSelection(sel) ||
                         (isNodeSelection(sel) && sel.node.type === imageType(state.schema))
                     ) {
                         const {$from, $to} = sel;
-                        if ($from.pos !== $to.pos && $from.sameParent($to)) {
+                        if ($from.pos === $to.pos) {
                             const url = getUrl(e.clipboardData, parser);
                             if (url) {
-                                const tr = state.tr.addMark(
+                                const linkMarkType = linkType(state.schema);
+                                tr = state.tr.replaceSelectionWith(
+                                    state.schema.text(url, [
+                                        ...$from
+                                            .marks()
+                                            .filter((mark) => mark.type !== linkMarkType),
+                                        linkMarkType.create({[LinkAttr.Href]: url}),
+                                    ]),
+                                    false,
+                                );
+                            }
+                        } else if ($from.sameParent($to)) {
+                            const url = getUrl(e.clipboardData, parser);
+                            if (url) {
+                                tr = state.tr.addMark(
                                     $from.pos,
                                     $to.pos,
                                     linkType(state.schema).create({
                                         [LinkAttr.Href]: url,
                                     }),
                                 );
-                                dispatch(tr.setSelection(TextSelection.create(tr.doc, $to.pos)));
-                                e.preventDefault();
-                                return true;
+                                tr.setSelection(TextSelection.create(tr.doc, $to.pos));
                             }
                         }
                     }
 
+                    if (tr) {
+                        dispatch(tr.scrollIntoView());
+                        e.preventDefault();
+                        return true;
+                    }
+
                     return false;
                 },
             },