Try it. Read the code.

import { Editor } from '@barocss/editor-core';
import { DataStore } from '@barocss/datastore';
import { createSchema, getMinimalSchemaDefinition } from '@barocss/schema';
import { createCoreExtensions, BoldExtension, ItalicExtension } from '@barocss/extensions';
import { RendererRegistry, intoRegistry, define, defineMark, element, data, slot } from '@barocss/dsl';
import { EditorViewDOM } from '@barocss/editor-view-dom';

export function mountEditor(container: HTMLElement) {
  const registry = new RendererRegistry({ global: false });
  intoRegistry(registry, () => {
    define('document', element('div', { style: { whiteSpace: 'pre-wrap' } }, [slot('content')]));
    define('paragraph', element('p', {}, [slot('content')]));
    define('inline-text', element('span', {}, [data('text', '')]));
    defineMark('bold', element('strong', {}, [data('text')]));
    defineMark('italic', element('em', {}, [data('text')]));
  });
  const schema = createSchema('quick-start', getMinimalSchemaDefinition());
  const editor = new Editor({
    schema, dataStore: new DataStore(undefined, schema), editable: true,
    extensions: [...createCoreExtensions(), BoldExtension, ItalicExtension],
  });
  editor.loadDocument({ stype: 'document', content: [
    { stype: 'paragraph', content: [{ stype: 'inline-text', text: 'Start writing here.' }] },
  ]});
  const view = new EditorViewDOM(editor, { container, registry });
  view.render();
  return () => {
    view.destroy();
    editor.destroy();
  };
}