Steps

Here we are importing the CBlockNoteView component from @xwiki/platform-blocknote-headless and using it inside our own.

This will render a complete BlockNote editor, along with the customizations that are proper to Cristal (handling of internal links, custom blocks, etc.).

Many properties are available to customize the editor further, adding realtime capabilities or being notified when the editor's content changes.

<script setup lang="ts">
import { collaborationManagerProviderName } from "@xwiki/cristal-collaboration-api";
import {
  BlocknoteEditor as CBlockNoteView,
  DEFAULT_MACROS,
} from "@xwiki/cristal-editors-blocknote-headless";
import type {
  CollaborationInitializer,
  CollaborationManagerProvider,
  User,
} from "@xwiki/cristal-collaboration-api";
import { createMacro } from "../../../blocknote-react/dist";

const collaborationManager = container
  .get<CollaborationManagerProvider>(collaborationManagerProviderName)
  .get();

const collaborationProvider = await collaborationManager.get();
</script>

<template>
  <CBlockNoteView
    :editor-props="{
      lang: 'en',
      // Optional
      blockNoteOptions: {
        // ...
      },
      // Optional
      onChange(editor) {
        // Get the entire document from the editor
        console.log(editor.document);
      },
      // Optional
      theme: 'dark',
    }"
    :container="container"
    :collaboration-provider="collaborationProvider /* Optional */"
    :macros="[]"
    :editor-content="{
      blocks: [
        {
          type: 'paragraph',
          content: [
            {
              type: 'text',
              content: 'Hello world!',
              styles: { bold: true },
            },
          ],
          styles: {
            textColor: '#123456',
          },
        },
      ],
    }"
    @instant-change="console.log('Something changed inside the editor!')"
    @debounced-change="
      console.log(
        'Something changed inside the editor (only triggered once a few delay passed after the user stopped typing)',
      )
    "
  />
</template>

Related

BlockNote Headless