Lumaktaw sa pangunahing nilalaman

clepit_core

Ang clepit_core package ang native na Dart/Flutter na kambal ng @clepit/core: parehong JSON document model, pag-edit at read-only na pag-render mula sa isang codebase, para sa web, mobile, at desktop. Palitan ang mga dokumento: ang EditorData.toJson() dito ay nababasa ng TypeScript package at kabaligtaran.

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

I-install

Shell
flutter pub add clepit_core

Editor

Ang Editor ay isang buong editing surface: mga block tool, inline tool, toolbar, at paghawak ng selection. Tumatanggap din ang EditorController ng tools at inlineTools para limitahan o palawakin ang built-in na set, at inilalantad nito ang document, selection, at view API (EditorApi) para sa programmatic na pag-edit.

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

Iginuguhit ng Renderer ang dokumento nang read-only, walang editing chrome. Ang invalid o hindi kilalang block data ay nagre-render ng InvalidDataPlaceholder sa halip na mag-throw, kaya ang dokumento mula sa mas luma o mas bagong producer ay nakikitang bumababa sa halip na mag-crash ang view.

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

ClepitTheme

Dumadaloy ang styling sa ClepitTheme, isang ThemeExtension sa iyong ThemeData, kaya sinusunod ng editor at renderer ang theme ng iyong app sa light at dark. Ang mga per-render na override ay dumadaan sa RendererConfig.styles.

Galing sa @clepit/core

Umiiral ang parehong konsepto sa magkabilang panig; sumusunod ang mga pangalan sa kombensiyon ng bawat platform.

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