React

설치

bash

npm install @newtil/editor react

사용

tsx

import "@newtil/editor";                        // Custom Element 등록 (필수, 래퍼보다 먼저)
import { NewtilEditor } from "@newtil/editor/react";

function App() {
  const [md, setMd] = useState("");
  return (
    <NewtilEditor
      value={md}
      onChange={(detail) => setMd(detail.markdown)}
      toolbar
      placeholder="여기에 입력..."
      style={{ minHeight: 420 }}
    />
  );
}

WARNING

import "@newtil/editor" 는 Custom Element 를 전역 등록한다. React 래퍼보다 먼저 import 해야 한다. Next.js 등 SSR 환경에서는 next/dynamic 의 ssr: false 로 불러온다.

Props

정본은 src/react/index.tsx 의 NewtilEditorProps.

Prop	타입	기본값	설명
`value`	`string`	—	마크다운. 바뀌면 `value` 속성으로 넘긴다(편집기가 낸 값과 같으면 무시)
`placeholder`	`string`	—	빈 편집기 안내
`readOnly`	`boolean`	`false`	읽기 전용
`toolbar`	`boolean`	`false`	상단 툴바
`floatingToolbar`	`boolean`	`true`	`false` 면 플로팅 툴바 숨김
`lang`	`string`	—	문자열 언어 `ko` \| `en`. 없으면 조상 `lang` → `<html lang>`
`messages`	`Partial<Messages>`	—	문자열 일부 덮어쓰기, 예: `{ emptyLineHint: "…" }`
`onImageUpload`	`(file: File) => Promise<string>`	—	이미지 업로드 훅(파일 선택·붙여넣기·끌어놓기)
`onDrawingSave`	`DrawingSaveHandler`	—	그림판 저장 훅 — 그림판 연동
`onDrawingLoad`	`DrawingLoadHandler`	—	그림판 불러오기 훅
`onChange`	`(detail: { markdown, html }) => void`	—	내용 변경
`onFocus`	`() => void`	—	포커스
`onBlur`	`() => void`	—	블러
`className`	`string`	—	호스트 요소의 class
`style`	`CSSProperties`	—	호스트 요소의 인라인 스타일

래퍼는 mode·empty-line-hint prop 이 없다. 필요하면 ref 의 element 로 직접 다룬다(element.mode = "source", element.setAttribute("empty-line-hint", "…")). modechange 이벤트도 element.addEventListener 로 받는다.

Ref

tsx

import { useRef } from "react";
import type { NewtilEditorRef } from "@newtil/editor/react";

function App() {
  const ref = useRef<NewtilEditorRef>(null);
  const save = () => console.log(ref.current?.markdown, ref.current?.html);
  return <NewtilEditor ref={ref} toolbar />;
}

필드	타입	설명
`markdown`	`string`	현재 마크다운
`html`	`string`	현재 HTML
`element`	`HTMLElement \| null`	`<newtil-editor>` DOM — 래퍼에 없는 속성·프로퍼티·이벤트는 여기로

이미지 · 그림판 훅

tsx

<NewtilEditor
  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;
  }}
  onDrawingSave={async ({ png, data, previousSrc }) => uploadDrawing(png, data, previousSrc)}
  onDrawingLoad={async (src) => fetchDrawingJson(src)}
/>

타입

import type {
  NewtilEditorProps, NewtilEditorRef, NewtilEditorChangeDetail, ImageUploadHandler,
  DrawingData, DrawingSaveInput, DrawingSaveHandler, DrawingLoadHandler,
} from "@newtil/editor/react";

React ​

설치 ​

사용 ​

Props ​

Ref ​

이미지 · 그림판 훅 ​

타입 ​

React

설치

사용

Props

Ref

이미지 · 그림판 훅

타입