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
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
(권장)onChange
로 핸들러를 제공합니다 .OnChangeHTML
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;
추출한 객체는 테스트를 위해 로컬 스토리지에 저장하였습니다.
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} />;
}
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}
/>
);
}
Reference