§@gravity-ui/markdown-editor ·

§Markdown wysiwyg 및 마크업 에디터

MarkdownEditor는 WYSIWYG(What You See Is What You Get) 모드와 마크업 모드를 결합한 강력한 Markdown 작업 도구입니다. 즉, 편리한 시각적 모드에서 콘텐츠를 생성하고 편집할 수 있을 뿐만 아니라 마크업을 완벽하게 제어할 수도 있습니다.

§🔧 주요 기능

• 기본 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 훅과 뷰 렌더링을 위한 컴포넌트로 제공됩니다. 스타일링 및 테마 설정은 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. .nvmrc 파일에 지정된 버전의 Node.js 환경을 설치합니다. 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()를 호출하는 것을 잊지 마세요.

§기여

• 기여자 가이드라인