Démarrer

L'éditeur se monte dans un élément et prend la main dessus. Le document estnon contrôlé par conception : reconstruire la vue à chaque rendu détruirait le caret et l'historique, donc le contenu initial est lu une seule fois au montage et l'éditeur en est ensuite propriétaire.

Vanilla

Le chemin de référence : les liaisons de frameworks font exactement ceci.

import { Editor, createDoc } from '@nbe/core';
import { EditorView } from '@nbe/dom';
import '@nbe/dom/style.css';

const editor = new Editor({ doc: createDoc() });
const view = new EditorView(document.getElementById('app')!, editor);

// tout changement passe par ici
editor.on((change) => console.log(change.ops));

React

import { BlockEditor } from '@nbe/react';
import '@nbe/dom/style.css';

export function App() {
  return <BlockEditor onChange={(doc) => save(doc)} />;
}

Le hook useEditor() est disponible si vous voulez fournir le conteneur vous-même ; il renvoie { editor, ref }.

Vue

<script setup lang="ts">
import { BlockEditor } from '@nbe/vue';
import '@nbe/dom/style.css';
</script>

<template>
  <BlockEditor @change="save" />
</template>

Svelte

La liaison Svelte est une action, pas un composant : c'est la forme idiomatique pour un élément dont un tiers possède le contenu.

<script lang="ts">
  import { blockEditor } from '@nbe/svelte';
  import '@nbe/dom/style.css';
</script>

<div use:blockEditor={{ onChange: save }}></div>