MNBEditor

Overview

Source layout

mnb-editor/
├─ mnb-editor.main.js          # high-level mount API and toolbar presets
├─ core/
│  ├─ editor-core.js           # MNBEditor class and runtime/editor logic
│  └─ toolkit.js               # tool helper wrappers
└─ tools/
   ├─ 01-undo.js
   ├─ 02-redo.js
   ├─ 03-logs.js
   ├─ ...
   └─ 66-print.js

Installation

The provided source is set up as directly imported modules. In the snapshot you shared, there is no package manifest or published package metadata, so the cleanest documented path is source-based integration.

Use the source files directly

<div id="editor"></div>
<script type="module">
  import { mountMNBEditor } from './mnb-editor.main.js';

  const editor = mountMNBEditor('#editor', {
    value: '<p>Hello MNBEditor</p>',
    placeholder: 'Start typing here...',
    toolbar: 'full',
    theme: 'light',
    width: 1200,
    height: 760,
  });

  window.editor = editor;
</script>

Entry points

mountMNBEditor(target, options)

Recommended application entry point. It resolves toolbar presets or custom tool lists, creates the core editor, applies dimensions, ruler visibility, branding, content limits, sticky toolbar offsets, and toolbar collapse behavior.

createEditor(target, options)

Lower-level entry point that creates a raw MNBEditor instance for custom integrations.

Toolbar presets

Quick start

import { mountMNBEditor } from './mnb-editor.main.js';

const editor = mountMNBEditor('#editor', {
  value: '<p>Hello world</p>',
  placeholder: 'Start typing here...',
  theme: 'light',
  toolbar: 'full',
  width: 1200,
  height: 760,
});

Core API

Commonly useful methods:

Tool authoring

import { buttonTool } from '../core/toolkit.js';

export default buttonTool({
  id: 'hello',
  label: 'Hello',
  icon: '👋',
  title: 'Insert greeting',
  async run(editor) {
    editor.insertText('Hello');
    editor.alert('Greeting inserted.', 'success');
  },
});

Common tool fields include id, label, title, icon, kind, group, groupLabel, area, toolbarLabel, toolbarVariant, options/items/choices, shortcut, run(editor, value), and onRendered(editor, element).

Fonts

MNBEditor supports default fonts, external web fonts, and uploaded local font files.

mountMNBEditor('#editor', {
  webFonts: [
    {
      label: 'Poppins',
      href: 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap',
      value: 'Poppins, sans-serif',
    },
  ],
});

Accepted uploaded formats: .ttf, .otf, .woff, .woff2.

Branding

mountMNBEditor('#editor', {
  branding: {
    text: 'My Product',
    href: 'https://example.com',
    target: '_blank',
    position: 'status-right',
  },
});

Branding can also be disabled with false, or set with a simple string. A floating pill-style badge is also supported.

Content limits

mountMNBEditor('#editor', {
  contentLimit: {
    max: 300,
    type: 'words',
    mode: 'soft',
    showCounter: true,
  },
});

type supports chars and words. mode supports hard and soft.

Views

Writing assistance

MNBEditor can expose two writing-help tools in the toolbar: an AI command for generation and rewriting workflows, and a spellcheck command for language-aware typo detection and correction.

AI assistance

The AI tool is implemented as a buttonTool(...) with the id ai-integration. When activated, it opens a modal where the user chooses a provider, action, temperature, optional prompt, and how the result should be inserted back into the document.

• If options.ai.endpoint is configured, the tool runs in backend mode and posts the request to your server endpoint.
• If no endpoint is configured, the tool runs in direct browser mode and calls the selected provider directly.
• The modal can optionally include the full document text as context in addition to the current selection.
• Results are inserted directly into the editor and then synced through history, status, and input updates.

mountMNBEditor('#editor', {
  ai: {
    endpoint: '',
    defaultProvider: 'openai',
    defaultAction: 'improve',
    defaultApplyMode: 'replace-selection',
    includeDocumentDefault: false,
    providers: [
      { label: 'Anthropic', value: 'anthropic' },
      { label: 'OpenAI', value: 'openai' },
      { label: 'Google', value: 'google' },
      { label: 'OpenRouter', value: 'openrouter' },
      { label: 'Fireworks', value: 'fireworks' },
      { label: 'Baseten', value: 'baseten' },
      { label: 'Ollama', value: 'ollama' },
    ],
  },
});

Spellchecker

The spellchecker is implemented as a selectTool(...) with the id spellcheck. Choosing a language immediately runs the spellcheck request and highlights misspelled words inline inside the editor surface.

• The tool posts the current plain text content to a spellcheck API endpoint together with the selected language code.
• Each accepted suggestion replaces the marked word and refreshes editor history, preview, and status state.
• Ignored words are unwrapped from the highlight layer without changing their text.
• The selected language is also applied to the editing surface so browser and assistive tools can inherit the document language.

selectTool({
  id: 'spellcheck',
  label: 'Spellcheck',
  value: 'en',
  usage: 'Choose spellcheck language from the dropdown. Selecting a language runs the PHP spellcheck API immediately.',
});

Tables

editor.insertTable(3, 4);
editor.addTableRow();
editor.addTableColumn();
editor.mergeCellRight();
editor.setTableBorderMode('outside');

The border mode is stored on table.dataset.borderMode, which lets your CSS interpret modes such as none, all, outside, inside, top, bottom, left, and right.

Practical notes

• Some formatting still relies on document.execCommand(...).
• Preview styles are isolated inside the iframe.
• Code view should stay in sync with visual mode.
• Select-style tools should provide options, items, or choices.

No license file or package metadata was included in the source snapshot, so add your own packaging and distribution details if you want to publish MNBEditor as a package.