Remirror로 5분만에 위지윅 에디터 만들기!

varcode·2022년 5월 29일
1

React

목록 보기
1/1
post-thumbnail

Remirror CodeSandbox Example

Remirror 공식문서 소개글

Remirror는 ProseMirror의 래퍼 라이브러리로 , ProseMirror를 사용하기 쉽게 만들고, React와 ProseMirror 통합을 제공하는 라이브러리입니다.

ProseMirror는 서식 있는 텍스트 편집기를 빌드하기 위한 툴킷입니다.
Draft.JS와 같은 즉시 사용 가능한 솔루션이 아닙니다
이는 ProseMirror가 러닝커브가 높다는 것을 의미합니다. 학습할 개념과 용어가 많고 논리 방식으로 코드베이스를 구성하는 것이 어려울 수 있습니다.

Remirror는 스키마, 명령 및 플러그인과 같은 다양한 ProseMirror 개념을 추상화하는 확장 기능을 제공하므로 관련 기능들을 그룹화하는 것이 훨씬 간단합니다.

레고와 같은 Remirror를 생각하면 지침에 따라 즉시 사용 가능한 스타일 편집기를 구성하거나 명령, 도우미 및 후크를 통해 훨씬 더 맞춤화된 것의 기초로 사용할 수 있습니다.

이것은 우리가 ProseMirror로 알려진 강력함과 유연성을 유지하면서 "즉시 사용 가능한" 및 "맞춤형" 경험을 모두 제공할 수 있음을 의미합니다.

이글에서는 "즉시 사용 가능한" 에디터를 알아보도록 하겠습니다.
이 방법 외에도 커스터마이징 하여 자신만의 에디터를 구축할 수도 있습니다.

설치

npx create-react-app cra-remirror --template typescript
cd cra-remirror

npm i remirror @remirror/react @remirror/pm @emotion/react @emotion/styled @remirror/react-editors

WYSIWYG Editor 생성

import { WysiwygEditor } from '@remirror/react-editors/wysiwyg';

function App () {
  return (
    <div style={{ padding: 16 }}>
      <WysiwygEditor placeholder='Enter text...' />
    </div>
  );
};

export default App;

에디터 상태값 추출 방법

데이터베이스에 저장할 수 있는 에디터에서 상태를 추출하는 방법을 살펴보겠습니다.

단순성을 위해 Remirror는 onChange핸들러를 허용하는 두 가지 구성 요소를 제공하며
이러한 핸들러는 문서 상태가 수정될 때마다 호출됩니다.

  • OnChangeJSON(권장)
    • 문서 상태 의 JSON 객체onChange로 핸들러를 제공합니다 .
  • OnChangeHTML
    • 문서 상태를 나타내는 HTML 문자열onChange을 핸들러에 제공합니다 .

on-change.d.ts의 interface 정의입니다.

import type { RemirrorJSON } from '@remirror/core';
export interface OnChangeJSONProps {
    onChange: (json: RemirrorJSON) => void;
}
export declare const OnChangeJSON: ({ onChange }: OnChangeJSONProps) => null;
export interface OnChangeHTMLProps {
    onChange: (html: string) => void;
}
export declare const OnChangeHTML: ({ onChange }: OnChangeHTMLProps) => null;

JSON 객체 추출 방법입니다.

추출한 객체는 테스트를 위해 로컬 스토리지에 저장하였습니다.

import React, { useCallback } from 'react';
import type { RemirrorJSON } from 'remirror';
import { OnChangeJSON } from '@remirror/react';
import { WysiwygEditor } from '@remirror/react-editors/wysiwyg';

const STORAGE_KEY = 'remirror-editor-content';

interface MyEditorProps {
  onChange: (json: RemirrorJSON) => void;
}

function MyEditor({ onChange }: MyEditorProps) {
  return (
    <div style={{ padding: 16 }}>
      <WysiwygEditor placeholder="Enter text...">
        <OnChangeJSON onChange={onChange} />
      </WysiwygEditor>
    </div>
  );
}

export default function App() {
  const handleEditorChange = useCallback((json: RemirrorJSON) => {
    // Store the JSON in localstorage
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(json));
  }, []);

  return <MyEditor onChange={handleEditorChange} />;
}
  • 입력한 텍스트 내용
  • 로컬 스토리지에 저장된 Remirror json

HTML 추출 방법입니다.

import React, { useCallback } from 'react';
import type { RemirrorJSON } from 'remirror';
import { OnChangeHTML } from '@remirror/react';
import { WysiwygEditor } from '@remirror/react-editors/wysiwyg';

interface MyEditorProps {
  onChangeHtml: (html: string) => void;
}

function MyEditor({ onChangeJson, onChangeHtml }: MyEditorProps) {
  return (
    <div style={{ padding: 16 }}>
      <WysiwygEditor placeholder="Enter text...">
        <OnChangeHTML onChange={onChangeHtml} />
      </WysiwygEditor>
    </div>
  );
}

export default function App() {
  const handleEditorChangeHTML = useCallback((html: string) => {
    console.log(html);
  }, []);

  return (
    <MyEditor
      onChangeHtml={handleEditorChangeHTML}
    />
  );
}

결과

  • editor
  • console.log

Reference

Remirror 공식문서

profile
백엔드와 Rust가 취미인 프론트엔드 개발자

0개의 댓글