Saltar al contenido principal

clepit_core

El paquete clepit_core es el gemelo nativo Dart/Flutter de @clepit/core: el mismo modelo de documento JSON, edición y renderizado de solo lectura desde una sola base de código, para web, móvil y escritorio. Los documentos son intercambiables: EditorData.toJson() aquí se lee con el paquete TypeScript y viceversa.

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

Instalar

Shell
flutter pub add clepit_core

Editor

Editor es una superficie de edición completa: herramientas de bloque, herramientas en línea, barras de herramientas y manejo de selección. EditorController también acepta tools e inlineTools para restringir o ampliar el conjunto integrado, y expone las API de documento, selección y vista (EditorApi) para ediciones programáticas.

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 dibuja un documento de solo lectura, sin adornos de edición. Los datos de bloque inválidos o desconocidos renderizan un InvalidDataPlaceholder en lugar de lanzar, así que un documento de un productor más antiguo o más nuevo se degrada visiblemente en vez de tumbar la vista.

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

ClepitTheme

El estilo fluye a través de ClepitTheme, una ThemeExtension sobre tu ThemeData, así que el editor y el renderizador siguen el tema de tu app en claro y oscuro. Las anulaciones por renderizado van por RendererConfig.styles.

Viniendo de @clepit/core

El mismo concepto existe en ambos lados; los nombres siguen las convenciones de cada plataforma.

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