diff --git a/README-ru.md b/README-ru.md new file mode 100644 index 00000000..6c8269e5 --- /dev/null +++ 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 · [![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 ; +} +``` +Полезные ссылки: +- [Как подключить редактор в 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 index 003baf43..bfbea225 100644 --- 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 index 9c72f370..1e283707 100644 --- 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; }, },