Passer au contenu principal

Référence API

Exports publics de @clepit/core. Chaque symbole ci-dessous fournit une signature typée et un exemple d'utilisation minimal.

Editor

La classe principale de l’éditeur. Editor expose deux méthodes statiques publiques : create (la fabrique principale) et destroy. La méthode create() retourne un objet EditorAPI par lequel toutes les méthodes d’instance sont accessibles après le montage de l’éditeur.

MéthodeSignatureDescription
Editor.createEditor.create(config: EditorConfig): EditorAPICréez une nouvelle instance d’éditeur et montez-la dans l’élément DOM avec le containerId fourni.
Editor.destroyEditor.destroy(containerId: string): voidLa méthode destroy() sur l’objet EditorAPI appelle Editor.destroy() pour cette instance.
MéthodeSignatureDescription
data.extractdata.extract(): EditorDataExtrayez les données de blocs actuelles d’une instance d’éditeur sous forme d’EditorData sûr pour JSON.
data.setdata.set(data: EditorData): voidRemplacez toute la liste de blocs par une nouvelle charge utile de données. Déclenche un nouveau rendu complet.
data.cleardata.clear(): voidEfface à la fois le contenu des blocs et les données d’état persistantes.
data.clearContentdata.clearContent(): voidSupprime uniquement les blocs, laissant les données du store intactes.
data.clearStoragedata.clearStorage(): voidEfface uniquement les données du store, sans toucher aux blocs actuels.
blocks.insertblocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number): HTMLElement | nullInsérez un bloc à l’index donné index. Accepte la même structure de données que le type de bloc cible.
blocks.convertblocks.convert(blockId: string, newType: BlockToolType): voidConvertissez un bloc en un nouveau type sur place.
blocks.removeblocks.remove(index: number): voidSupprimez le bloc à l’index donné index.
blocks.moveblocks.move(fromIndex: number, toIndex: number): voidDéplace un bloc d’un index à un autre.
blocks.updateblocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): voidMet à jour les données d’un bloc existant sur place. Le type reste inchangé.
blocks.getblocks.get(blockId: string): EditorData['blocks'][number] | nullRécupère un bloc par son ID. Retourne null si non trouvé.
blocks.getAllblocks.getAll(): EditorData['blocks']Retourne les données de tous les blocs sous forme de tableau.
blocks.countblocks.count(): numberRetourne le nombre de blocs dans l’éditeur.
focusfocus(): voidDéplace le focus dans l’éditeur, en se concentrant sur le premier bloc.
blurblur(): voidSupprime tout focus actif à l’intérieur de l’éditeur.
destroydestroy(): voidLa méthode destroy() sur l’objet EditorAPI appelle Editor.destroy() pour cette instance.
selection.getselection.get(): Selection | nullRetourne l’objet de sélection de la fenêtre ou null.
selection.setselection.set(selection: Selection): voidDéfinit la sélection de la fenêtre à l’objet Selection fourni.
selection.clearselection.clear(): voidSupprime toutes les plages de la sélection de la fenêtre.
ui.showBlockMenuui.showBlockMenu(block: HTMLElement): voidAffiche le menu de type de bloc pour l’élément DOM de bloc donné.
ui.hideBlockMenuui.hideBlockMenu(): voidMasque le menu de type de bloc s’il est ouvert.
ui.showToolbarui.showToolbar(x: number, y: number): voidAffiche la barre d’outils intégrée aux coordonnées de vue x, y fournies.
ui.hideToolbarui.hideToolbar(): voidMasque la barre d’outils intégrée si elle est visible.
view.getCurrentViewview.getCurrentView(containerId: string): EditorView | nullRetourne la vue courante (edit, preview ou json) pour le containerId donné.
view.switchViewview.switchView(containerId: string, view: EditorView): voidBascule l’éditeur vers une vue spécifiée : edit, preview ou json.

Exemple d’utilisation typique

TypeScript
import { Editor } from '@clepit/core';

const editor = Editor.create({
  containerId: 'editor',
  theme: 'auto',
  placeholder: 'Start writing...',
  minHeight: 300,
});

// Insert a block
editor.blocks.insert('paragraph', { html: 'Hello world' }, 0);

// Extract data
const data = editor.data.extract();

// Switch view
editor.view.switchView('editor', 'preview');

// Tear down
editor.destroy();

Renderer

Une classe qui convertit les données de blocs enregistrés en HTML en lecture seule dans un élément DOM. Cette classe possède une méthode statique publique : render().

MéthodeSignatureDescription
Renderer.renderRenderer.render(config: RendererConfig): HTMLElementRendez du JSON de blocs enregistré dans un conteneur sous forme de HTML en lecture seule. Utilisez ceci partout où vous voulez afficher du contenu sans options d’édition.

Exemple d’utilisation typique

TypeScript
import { Renderer } from '@clepit/core';

Renderer.render({
  containerId: 'output',
  data,
  theme: 'auto',
  margins: { bottom: 12, top: 0 },
});

StyleManager

Une classe centralisée qui gère le système de thèmes. Elle expose trois méthodes statiques publiques utiles pour les consommateurs : subscribe (pour les changements de thème au niveau du système d'exploitation), getResolvedTheme (pour lire le thème OS actuel) et injectStyles (pour injecter du CSS personnalisé).

MéthodeSignatureDescription
StyleManager.subscribeStyleManager.subscribe(cb: (theme: 'light' | 'dark') => void): () => voidAbonnez-vous aux modifications des tokens de thème à l’exécution. L’écouteur se déclenche chaque fois que theme ou themeOverrides change.
StyleManager.getResolvedThemeStyleManager.getResolvedTheme(): 'light' | 'dark'Lit le thème OS actuel ("light" ou "dark"). Retourne "light" si matchMedia est indisponible.
StyleManager.injectStylesStyleManager.injectStyles(styleId: string, styles: string): booleanInjecte une chaîne CSS dans document.head (utilisez un styleId unique). Retourne false si déjà présent, true sinon.

Exemple d’utilisation typique

TypeScript
import { StyleManager } from '@clepit/core';

// React to OS theme changes
const unsubscribe = StyleManager.subscribe(theme => {
  console.log('OS theme:', theme); // 'light' | 'dark'
});

// Read current OS theme
const current = StyleManager.getResolvedTheme();

// Inject custom CSS once
StyleManager.injectStyles('my-overrides', `
  .clepit-editor { font-family: 'Inter', sans-serif; }
`);

// Unsubscribe when done
unsubscribe();