DOM Structure

This page describes the default HTML structure generated by DefaultEditorDomInitializer.

Generated Markup

<div class="mo-editor" data-mo-editor>
    <div class="mo-editor__header" data-mo-editor-header>
        <div class="mo-editor__toolbar" data-mo-editor-toolbar></div>
    </div>

    <div class="mo-editor__body" data-mo-editor-body>
        <div class="mo-editor__input" data-mo-editor-input></div>

        <div class="mo-editor__preview" data-mo-editor-preview></div>
    </div>

    <div class="mo-editor__footer" data-mo-editor-footer>
        <div class="mo-editor__status" data-mo-editor-status></div>
    </div>

    <textarea
        hidden
        data-mo-editor-textarea
    ></textarea>
</div>

Slots

The editor uses data attributes to identify and resolve its internal DOM slots.

Attribute	Description
data-mo-editor	Editor root element
data-mo-editor-header	Header container
data-mo-editor-toolbar	Toolbar container
data-mo-editor-body	Main editor body
data-mo-editor-input	Markdown input container
data-mo-editor-preview	HTML preview container
data-mo-editor-footer	Footer container
data-mo-editor-status	Status container
data-mo-editor-textarea	Hidden textarea

Why data attributes?

Data attributes provide a stable contract between the editor core and the generated DOM structure.

Custom DOM Initializers can generate any HTML structure as long as the required editor slots are available.

CSS Classes

The default DOM Initializer generates a set of CSS classes that are used by the default stylesheet.

<div class="mo-editor" data-mo-editor>
    ...
</div>

These classes are provided for convenience and can be customized to match your own design system.

Customizing CSS Classes

The following configuration lists every CSS class slot available in the default DOM Initializer.

import {
    DefaultEditorDomInitializer,
    ModuloEditorCore,
    StarterKitPreset
} from "@lakamark/modulo-editor";

const editor = ModuloEditorCore
    .create()
    .withDomInitializer(new DefaultEditorDomInitializer({
        root: "mo-editor",
        header: "mo-editor__header",
        toolbar: "mo-editor__toolbar",
        toolbarButton: "mo-editor__toolbar-button",
        body: "mo-editor__body",
        input: "mo-editor__input",
        preview: "mo-editor__preview",
        footer: "mo-editor__footer",
        status: "mo-editor__status",
        textarea: "mo-editor__textarea",
        toolbarDropdown: 'mo-toolbar-dropdown',
        toolbarDropdownTrigger: 'mo-toolbar-dropdown__trigger',
        toolbarDropdownMenu: 'mo-toolbar-dropdown__menu',
        toolbarDropdownItem: 'mo-toolbar-dropdown__item'
    }))
    .fromTextarea('#editor')
    .usePreset(new StarterKitPreset())
    .build()

Customizing CSS classes allows you to integrate ModuloEditor with your own CSS architecture without creating a custom DOM Initializer.

WARNING

Do not remove or modify the data-mo-* attributes generated by the DOM Initializer.

ModuloEditor uses these attributes to resolve and connect its internal DOM slots.

Only CSS classes are intended to be customized.