§@gravity-ui/markdown-editor ·

§Markdown 所见即所得 (WYSIWYG) 和标记编辑器

MarkdownEditor 是一个强大的 Markdown 编辑工具，它结合了 WYSIWYG（所见即所得）和标记模式。这意味着您可以在方便的可视化模式下创建和编辑内容，同时还能完全控制标记。

§🔧 主要功能

• 支持基础 Markdown 和 YFM 语法。
• 通过使用 ProseMirror 和 CodeMirror 引擎实现可扩展性。
• 支持 WYSIWYG 和标记模式，以实现最大的灵活性。

§安装

npm install @gravity-ui/markdown-editor

§所需依赖

请注意，要开始使用该包，您的项目还必须安装以下依赖：@diplodoc/transform、react、react-dom、@gravity-ui/uikit、@gravity-ui/components 以及其他一些。请查看 package.json 的 peerDependencies 部分以获取准确信息。

§入门

Markdown 编辑器提供了一个 React hook 来创建编辑器实例，以及一个用于渲染视图的组件。
要设置样式和主题，请参阅 UIKit 文档。

import React from 'react';
import {useMarkdownEditor, MarkdownEditorView} from '@gravity-ui/markdown-editor';

function Editor({onSubmit}) {
  const editor = useMarkdownEditor({allowHTML: false});

  React.useEffect(() => {
    function submitHandler() {
      // 将当前内容序列化为 markdown 标记
      const value = editor.getValue();
      onSubmit(value);
    }

    editor.on('submit', submitHandler);
    return () => {
      editor.off('submit', submitHandler);
    };
  }, [onSubmit]);

  return <MarkdownEditorView stickyToolbar autofocus editor={editor} />;
}

阅读更多：

• 如何在 Create React App 中集成编辑器
• 如何为标记模式添加预览
• 如何添加 HTML 扩展
• 如何添加 Latex 扩展
• 如何添加 Mermaid 扩展
• 如何编写扩展
• 如何添加 GPT 扩展
• 如何在 markdown 中添加文本绑定扩展

§开发

1. 安装 Nodejs 环境，版本在 .nvmrc 文件中指定。我们推荐使用 NVM 或类似工具。

2. 安装 pnpm，版本在 package.json 的 "packageManager" 属性中指定。

   您可以使用 Corepack，或者直接通过 npm 安装：运行 npm deps:global --force。

3. 安装依赖：pnpm i

4. 运行 storybook 开发服务器：pnpm start

§i18n（国际化）

要设置国际化，您只需使用 configure 函数：

import {configure} from '@gravity-ui/markdown-editor';

configure({
  lang: 'ru',
});

别忘了从 UIKit 和其他 UI 库调用 configure()。

§贡献

• 贡献者指南