跳到主要内容

clepit_core

clepit_core 包是 @clepit/core 的原生 Dart/Flutter 孪生:同一个 JSON 文档模型,一个代码库同时提供编辑和只读渲染,面向 Web、移动端和桌面端。文档可互换:这里的 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

样式通过 ClepitTheme 流动,它是 ThemeData 上的一个 ThemeExtension,因此编辑器和渲染器在明暗两种模式下都跟随应用主题。按渲染的覆写通过 RendererConfig.styles 传入。

从 @clepit/core 迁移

两侧的概念一一对应;命名遵循各自平台的习惯。

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