メインコンテンツへスキップ

パッケージ

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_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