clepit_core
clepit_core パッケージは @clepit/core のネイティブな Dart/Flutter の双子です。同じ JSON ドキュメントモデルで、1 つのコードベースから編集と読み取り専用レンダリングを提供し、Web、モバイル、デスクトップを対象にします。ドキュメントは交換可能です。ここでの 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 |