moda-editor - React·Vue·Svelte·Vanilla 멀티 프레임워크 리치 텍스트 에디터 | ModaOlive Tools

불변 JSON AST 문서와 트랜잭션 기반 업데이트로 만드는, 프레임워크 비의존 헤드리스 리치 텍스트 에디터.

moda-editor는 문서 모델·트랜잭션·셀렉션·입력 바인딩 같은 모든 에디터 로직을 순수 TypeScript 코어(createEditor)에 두고, 각 프레임워크 어댑터는 얇은 반응형 바인딩만 담당합니다. 5개 렌더러가 같은 DOM 계약(.me-*)을 만들어 어디서든 동작이 같습니다.

스타터 번들 하나로 서식·제목·인용구·목록·할일·표·코드 블록·링크· 이미지·정렬·히스토리까지 갖추고, Extension/Plugin/InputRule로 무한 확장할 수 있습니다.

라이브 데모

CDN에서 불러온 실제 코어로 동작합니다. 툴바의 각 버튼은editor.commands.*호출 하나와 1:1로 대응되며(툴팁에 API 이름 표시), 편집할 때마다 아래 패널에 HTML 직렬화와 문서 JSON이 실시간으로 출력됩니다. 하단에는editor.on()으로 구독한 이벤트가 흘러가는 것을 볼 수 있습니다.

환경별 패키지

3단계로 시작하기

1. 1

   패키지 설치

   npm i @moda-editor/react처럼 어댑터를 설치하거나, CDN <script> 한 줄로 코어를 로드합니다.

2. 2

   extensions 전달

   starterExtensions() 하나면 스키마·커맨드·키맵·입력 규칙·히스토리가 다 들어갑니다. doc으로 초기 문서 JSON을 넘길 수 있습니다.

3. 3

   렌더링·조작

   어댑터는 <EditorView> 하나면 끝. 툴바는 editor.commands.*에 연결하고, vanilla는 mountEditor(el, options)로 배선합니다.

// npm i @moda-editor/react
import { EditorView, starterExtensions, useEditor } from "@moda-editor/react";
import "@moda-editor/react/styles.css";

function App() {
  const { editor, state } = useEditor({
    doc: myDoc,                       // DocNode JSON (없으면 빈 문서)
    extensions: starterExtensions(),  // 스타터 스키마·커맨드·키맵·히스토리
  });

  return (
    <>
      <button onClick={() => editor.commands.toggleBold()}>B</button>
      <button onClick={() => editor.commands.setHeading(2)}>H2</button>
      <EditorView editor={editor} />
    </>
  );
}
// state는 불변 EditorState — === 비교로 렌더 필요 여부 결정

EditorState는 불변 — 변경 전까지 같은 참조를 반환하므로 React useSyncExternalStore의 스냅샷 계약이 구조적으로 보장됩니다.

기능별 사용법 — 무엇을 쓰면 되나

모든 기능은 코어의 커맨드·옵션으로 동작하고 어댑터는 전달만 합니다. 라이브 데모의 툴바 버튼에 마우스를 올리면 대응 API가 툴팁으로 표시됩니다.

자주 쓰는 레시피

복사해서 바로 쓸 수 있는 코드 조각입니다.

<button onClick={() => editor.commands.toggleBold()}>B</button>
<button onClick={() => editor.commands.setHeading(2)}>H2</button>
<button onClick={() => editor.commands.toggleTaskList()}>할일</button>
<button onClick={() => editor.commands.undo()}>↶</button>

// false 반환 = 현재 셀렉션에서 적용 불가 → 버튼 비활성화 신호로 사용

editor.on("update", ({ state, prevState }) => {
  if (state.doc === prevState.doc) return;  // 셀렉션만 바뀐 경우 스킵
  scheduleSave(serializeToHTML(state.doc, editor.schema));
});

// 또는 문서 JSON을 그대로 저장
const payload = JSON.stringify(state.doc);

import { createEditor, createDoc, parseHTML, starterExtensions }
  from "@moda-editor/core";

const extensions = starterExtensions();
const boot = createEditor({ extensions });
const doc = createDoc(parseHTML(savedHtml, boot.schema));

const editor = createEditor({ extensions, doc });

useEditor({
  extensions: starterExtensions(),
  onImageUpload: async (file) => {
    const form = new FormData();
    form.append("file", file);
    const res = await fetch("/api/upload", { method: "POST", body: form });
    return (await res.json()).url;   // 에디터가 src로 삽입
  },
});

function CodeBlockView({ node, editor, path, content }: NodeViewProps) {
  return (
    <div className="my-codeblock">
      <select onChange={(e) =>
        editor.commands.setCodeLanguageAt(path, e.target.value)} />
      {content}   {/* 편집 영역 — 반드시 렌더해야 함 */}
    </div>
  );
}

<EditorView editor={editor} nodeViews={{ codeBlock: CodeBlockView }} />

editor.on("transaction", ({ tr, state }) => console.log(tr.steps));
editor.on("paste", ({ html, text }) => console.log("붙여넣기:", text));
editor.on("blur",  () => saveDraft());
editor.on("destroy", () => cleanup());

// 외부에서 만든 에디터를 뷰에 공유
const editor = createEditor({ extensions: starterExtensions() });
<EditorView editor={editor} />   // 구독은 뷰가 처리

프레임워크가 달라도 동작은 하나

React·Vue·Svelte·Vanilla 렌더러는 모두 같은 DOM 계약(.me-*클래스)을 만들고, 공용 컨포먼스 스펙(runWidgetConformance)으로 검증됩니다. 한 플랫폼에서 익힌 API와 CSS 변수(--me-*)가 다른 플랫폼에서도 그대로 통합니다.

문서·소스

• 플랫폼별 가이드 — React / Vue 3 / Vue 2.7 / Svelte 5 / Vanilla
• 기능 가이드 — 커스텀 노드 뷰(nodeViews), 검색 가능한 목록 예시
• 테마 — --me-* CSS 변수, 마이그레이션 매핑 문서