§@gravity-ui/markdown-editor ·

§Markdown WYSIWYG 및 마크업 에디터

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

§🔧 주요 기능

• 기본 마크다운 및 YFM 구문 지원.
• ProseMirror 및 CodeMirror 엔진을 사용하여 확장 가능.
• 최대 유연성을 위한 WYSIWYG 및 마크업 모드 작업 기능.

§설치

npm install @gravity-ui/markdown-editor

§필수 종속성

패키지 사용을 시작하려면 프로젝트에 다음이 설치되어 있어야 합니다: @diplodoc/transform, react, react-dom, @gravity-ui/uikit, @gravity-ui/components 및 기타 몇 가지. 정확한 정보는 package.json의 peerDependencies 섹션을 확인하세요.

§시작하기

마크다운 에디터는 에디터 인스턴스를 생성하기 위한 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() {
      // 현재 콘텐츠를 마크다운 마크업으로 직렬화
      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 확장 기능 추가 방법
• 마크다운에 텍스트 바인딩 확장 기능 추가 방법

§개발

1. .nvmrc 파일에 지정된 버전의 Node.js 환경을 설치합니다. NVM 또는 유사한 도구 사용을 권장합니다.

2. pnpm을 설치합니다. 버전은 package.json의 "packageManager" 속성에 지정되어 있습니다.

   Corepack을 사용하거나 npm을 통해 설치할 수 있습니다: npm deps:global --force를 실행하세요.

3. 종속성 설치: pnpm i

4. 스토리북 개발 서버 실행: pnpm start

§i18n (국제화)

국제화를 설정하려면 configure를 사용하면 됩니다:

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

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

UIKit 및 기타 UI 라이브러리에서도 configure()를 호출하는 것을 잊지 마세요.

§기여

• 기여자 가이드라인