Zum Hauptinhalt springen

clepit_core

Das Paket clepit_core ist der native Dart/Flutter-Zwilling von @clepit/core: dasselbe JSON-Dokumentmodell, Bearbeitung und Nur-Lese-Rendering aus einer Codebasis, für Web, Mobil und Desktop. Dokumente sind austauschbar: EditorData.toJson() hier wird vom TypeScript-Paket gelesen und umgekehrt.

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

Installation

Shell
flutter pub add clepit_core

Editor

Editor ist eine vollständige Bearbeitungsfläche: Blockwerkzeuge, Inline-Werkzeuge, Werkzeugleisten und Auswahlbehandlung. EditorController nimmt außerdem tools und inlineTools, um den eingebauten Satz einzuschränken oder zu erweitern, und stellt die Dokument-, Auswahl- und Ansichts-APIs (EditorApi) für programmatische Bearbeitungen bereit.

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 zeichnet ein Dokument schreibgeschützt, ohne Bearbeitungs-Chrome. Ungültige oder unbekannte Blockdaten rendern einen InvalidDataPlaceholder statt zu werfen, sodass ein Dokument eines älteren oder neueren Erzeugers sichtbar degradiert, statt die Ansicht abstürzen zu lassen.

Dart
Renderer(
  config: RendererConfig(data: document),
);

ClepitTheme

Das Styling fließt durch ClepitTheme, eine ThemeExtension auf Ihrem ThemeData, sodass Editor und Renderer dem App-Theme in Hell und Dunkel folgen. Überschreibungen pro Rendering laufen über RendererConfig.styles.

Von @clepit/core kommend

Dasselbe Konzept existiert auf beiden Seiten; die Namen folgen den Konventionen der jeweiligen Plattform.

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