본문 내용으로 건너뛰기

clepit_core

clepit_core 패키지는 @clepit/core의 네이티브 Dart/Flutter 쌍둥이입니다. 같은 JSON 문서 모델로 하나의 코드베이스에서 편집과 읽기 전용 렌더링을 제공하며 웹, 모바일, 데스크톱을 대상으로 합니다. 문서는 서로 호환됩니다. 여기의 EditorData.toJson()은 TypeScript 패키지에서 파싱되고 그 반대도 마찬가지입니다.

pub.dev: clepit_core · npm: @clepit/core

설치

Shell
flutter pub add clepit_core

Editor

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에서 넘어온 경우

같은 개념이 양쪽에 존재하며, 이름은 각 플랫폼의 관례를 따릅니다.

TypeScriptDart
EditorEditor
RendererRenderer
StyleManagerThemeExtension<ClepitTheme> + ThemeData
ToolBlockTool / InlineTool
Block<T>sealed class Block
EditorAPIEditorApi + BlocksApi, SelectionApi