Design Editor SDK

React 앱 안에 비주얼 에디터를 넣기 위한 SDK.

Preview package. 사용 방식, 컴포넌트 구성, import 경로 변경 가능.

Live Demo

제공 기능

• 문서 모델 기반 캔버스 렌더링
• 선택, 이동, 리사이즈, 텍스트 편집
• undo / redo history
• toolbar, layers panel, properties panel
• 커스텀 React 컴포넌트 등록

설치

pnpm add @design-editor/sdk react react-dom

아직 배포 전 preview 환경에서는 packages/demo의 workspace 사용 방식 기준.

빠른 사용

import "@design-editor/sdk/styles.css"

import { createEditor } from "@design-editor/sdk/createEditor"
import { EditorCanvas } from "@design-editor/sdk/EditorCanvas"
import { EditorProvider } from "@design-editor/sdk/EditorProvider"
import { EditorRoot } from "@design-editor/sdk/EditorRoot"
import { LayersPanel } from "@design-editor/sdk/LayersPanel"
import { PropertiesPanel } from "@design-editor/sdk/PropertiesPanel"
import { Toolbar } from "@design-editor/sdk/Toolbar"
import { useMemo } from "react"

export function App() {
	const editor = useMemo(() => {
		return createEditor({
			document: {
				id: "doc-root",
				children: [{ id: "page-1", name: "Page 1", children: [] }],
			},
			currentPageId: "page-1",
		})
	}, [])

	return (
		<EditorProvider editor={editor}>
			<EditorRoot>
				<Toolbar />
				<LayersPanel />
				<EditorCanvas />
				<PropertiesPanel />
			</EditorRoot>
		</EditorProvider>
	)
}

흐름은 단순함.

1. createEditor()로 editor 객체 생성
2. EditorProvider에 editor 전달
3. EditorCanvas와 패널 컴포넌트 배치

커스텀 컴포넌트

캔버스에서 렌더링할 React 컴포넌트는 components 옵션으로 등록.

const editor = createEditor({
	document,
	currentPageId: "page-1",
	components: {
		HeroCard: {
			component: HeroCard,
			displayName: "Hero Card",
			styles: heroCardStyles,
		},
	},
})

등록한 컴포넌트는 문서 노드의 tag 값으로 사용.

{
	id: "hero-card",
	type: "element",
	tag: "HeroCard",
	x: 64,
	y: 56,
	props: {
		title: "Launch readiness",
	},
	style: {
		width: 520,
		minHeight: 320,
	},
	children: [],
}

주요 import

Import path	용도
@design-editor/sdk/createEditor	editor 객체 생성
@design-editor/sdk/EditorProvider	React 트리에 editor 연결
@design-editor/sdk/EditorRoot	기본 editor layout wrapper
@design-editor/sdk/EditorCanvas	문서 캔버스 렌더링
@design-editor/sdk/Toolbar	기본 툴바
@design-editor/sdk/LayersPanel	문서 레이어 패널
@design-editor/sdk/PropertiesPanel	선택 노드 속성 패널
@design-editor/sdk/useEditor	editor 객체 접근 hook
@design-editor/sdk/styles.css	기본 editor 스타일

패키지 구성

Package	역할
@design-editor/sdk	앱에서 사용하는 SDK entry package
@design-editor/shell	상태, 액션, 툴, history runtime
@design-editor/canvas	캔버스 렌더링과 DOM geometry 측정
@design-editor/core	문서 모델, 공통 타입, serialization
@design-editor/components	기본 component registry
@design-editor/demo	SDK 사용 예시 앱

로컬 개발

pnpm install

# demo app
pnpm --filter @design-editor/demo dev

# build
pnpm --filter @design-editor/demo build
pnpm --filter @design-editor/sdk build

# checks
pnpm type-check
pnpm lint
pnpm test:unit
pnpm test:e2e

참고 문서

• SDK direction
• Editor runtime service migration
• Deployment