clepit_core
clepit_core 패키지는 @clepit/core의 네이티브 Dart/Flutter 쌍둥이입니다. 같은 JSON 문서 모델로 하나의 코드베이스에서 편집과 읽기 전용 렌더링을 제공하며 웹, 모바일, 데스크톱을 대상으로 합니다. 문서는 서로 호환됩니다. 여기의 EditorData.toJson()은 TypeScript 패키지에서 파싱되고 그 반대도 마찬가지입니다.
pub.dev: clepit_core · npm: @clepit/core
설치
Shell
flutter pub add clepit_coreEditor
Editor는 완전한 편집 표면입니다. 블록 도구, 인라인 도구, 툴바, 선택 처리를 갖췄습니다. EditorController는 내장 세트를 제한하거나 확장하는 tools와 inlineTools도 받으며, 프로그래밍 방식 편집을 위해 문서, 선택, 뷰 API(EditorApi)를 노출합니다.
Dart
import 'package:clepit_core/clepit_core.dart';
final controller = EditorController(
initial: EditorData.fromJson(documentJson),
);
Editor(
controller: controller,
config: EditorConfig(
onChange: (data) => save(data),
),
);Renderer
Renderer는 편집 장식 없이 문서를 읽기 전용으로 그립니다. 유효하지 않거나 알 수 없는 블록 데이터는 예외를 던지는 대신 InvalidDataPlaceholder를 렌더링하므로, 더 오래되거나 더 새로운 생산자의 문서가 뷰를 죽이는 대신 눈에 보이게 성능이 저하됩니다.
Dart
Renderer(
config: RendererConfig(data: document),
);ClepitTheme
스타일은 ThemeData의 ThemeExtension인 ClepitTheme를 통해 흐르므로, 에디터와 렌더러는 라이트와 다크에서 앱 테마를 따릅니다. 렌더링별 재정의는 RendererConfig.styles로 전달합니다.
@clepit/core에서 넘어온 경우
같은 개념이 양쪽에 존재하며, 이름은 각 플랫폼의 관례를 따릅니다.
| TypeScript | Dart |
|---|---|
| Editor | Editor |
| Renderer | Renderer |
| StyleManager | ThemeExtension<ClepitTheme> + ThemeData |
| Tool | BlockTool / InlineTool |
| Block<T> | sealed class Block |
| EditorAPI | EditorApi + BlocksApi, SelectionApi |