Skip to main content

clepit_core

The clepit_core package is the native Dart/Flutter twin of @clepit/core: the same JSON document model, editing and read-only rendering from one codebase, targeting web, mobile, and desktop. Documents are interchangeable: EditorData.toJson() here parses with the TypeScript package and vice versa.

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

Install

Shell
flutter pub add clepit_core

Editor

Editor is a full editing surface: block tools, inline tools, toolbars, and selection handling. EditorController also takes tools and inlineTools to restrict or extend the built-in set, and exposes the document, selection, and view APIs (EditorApi) for programmatic edits.

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 draws a document read-only, with no editing chrome. Invalid or unknown block data renders an InvalidDataPlaceholder instead of throwing, so a document from an older or newer producer degrades visibly rather than crashing the view.

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

ClepitTheme

Styling flows through ClepitTheme, a ThemeExtension on your ThemeData, so the editor and renderer follow your app theme in light and dark. Per-render overrides go through RendererConfig.styles.

Coming from @clepit/core

The same concept exists on both sides; the names follow each platform conventions.

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