on-codemerge

Four editors on one kernel + SDK. JSON doc is the source of truth. Toolbar, popups, and menus live in a core-owned SDK — plugins register into it, they do not own chrome.

| Product | Import | Document | UI | | ------------ | ----------------------- | ---------------------------- | ------------------------------------- | | WYSIWYG | on-codemerge | Prose JSON (marks, atoms, …) | ContentEditable + widgets | | JSON | on-codemerge/json | JSON tree | Shell — Tree / Raw | | Markdown | on-codemerge/markdown | Prose JSON (MD block subset) | Shell — dual-pane source + preview | | Code | on-codemerge/code | Plain text (code_source) | Shell — gutter + structural highlight |

Documentation · Editors · Plugins · Integrate · npm

Low-level packages (optional — most apps only need on-codemerge): @codemerge/kernel, @codemerge/sdk, @codemerge/hunspell, @codemerge/collaboration-server. See Publishing packages. This repo is pnpm-only (install, scripts, release). Do not mix standalone @codemerge/sdk with on-codemerge in one app bundle.

Features

• Four editor surfaces — WYSIWYG, JSON workspace, Markdown dual-pane, Code source (same package)
• JSON document model — getJSON / setJSON as SoT; HTML and Markdown are import/export boundaries
• Core-owned UI — editor.toolbar, editor.ui.popup, context menu, notify; plugins only register
• Plugin packs — createDefaultPlugins() or lean createCorePlugins()
• Published pages — getPublishedHTML / getPublishedDocument + dist/public.js runtimes (WYSIWYG / Markdown)
• Source contour — shared gutter + structural highlight for JSON Raw, Markdown source, and Code
• i18n — lazy locale packs (en bundled; ru, de, fr, … on demand)
• Chrome modes — sticky toolbar (bar) or page-embed float (page)
• TypeScript-first — typed Editor + @codemerge/sdk / kernel packages

Installation

npm install on-codemerge
# or
pnpm add on-codemerge
# or
yarn add on-codemerge

Quick start

WYSIWYG (on-codemerge)

import 'on-codemerge/index.css';
import 'on-codemerge/public.css';
import { Editor, createDefaultPlugins, insertText } from 'on-codemerge';

const host = document.getElementById('editor')!;
const editor = new Editor(host, {
  plugins: createDefaultPlugins(),
});

editor.run(insertText('Hello'));
console.log(editor.getJSON());

Lean essentials only:

import { Editor, createCorePlugins } from 'on-codemerge';

const editor = new Editor(host, {
  plugins: createCorePlugins(),
});

Published preview:

const html = editor.getPublishedHTML();
// pair with on-codemerge/public.css + dist/public.js when runtimes are needed

JSON (on-codemerge/json)

Tree + Raw for configuration / API payloads. Interchange via getText / setText.

import 'on-codemerge/index.css';
import { Editor, createDefaultPlugins } from 'on-codemerge/json';

const editor = new Editor(document.getElementById('json')!, {
  chrome: 'bar',
  plugins: createDefaultPlugins(),
});

editor.setText('{"hello":true}');

Markdown (on-codemerge/markdown)

Dual-pane source + HTML preview (callouts, mermaid, …).

import 'on-codemerge/index.css';
import 'on-codemerge/public.css';
import { Editor, createDefaultPlugins } from 'on-codemerge/markdown';

const editor = new Editor(document.getElementById('md')!, {
  chrome: 'bar',
  plugins: createDefaultPlugins(),
});

editor.setText('# Hello\n');

Code (on-codemerge/code)

Plain-text source with line gutter and structural highlight (comments, strings, numbers, …).

import 'on-codemerge/index.css';
import { Editor, createDefaultPlugins } from 'on-codemerge/code';

const editor = new Editor(document.getElementById('code')!, {
  chrome: 'bar',
  plugins: createDefaultPlugins(),
});

editor.setText('const x = 1;\n');

Full comparison: Editors guide.

Docs & demos

| | | | ------------------- | --------------------------------------------------------------------------------------------------------------------------- | | Docs site | https://s00d.github.io/on-codemerge/ | | Editors | guide/editors | | Editor API | guide/editor | | SDK | guide/sdk | | Migrate v1 → v2 | guide/migration | | demo stand | demo/ — WYSIWYG / JSON / Markdown / Code / Forms / Charts / Calendar / Tables — cd demo && pnpm i && pnpm dev |

Plugins use core.* and editor.toolbar / ctx.popup — do not deep-import the kernel from app code.

Package surface

| Import | Role | | ------------------------- | ---------------------------------------------------- | | on-codemerge | WYSIWYG Editor, plugin factories, IO helpers | | on-codemerge/json | JSON workspace Editor + createDefaultPlugins | | on-codemerge/markdown | Markdown dual-pane Editor + createDefaultPlugins | | on-codemerge/code | Code source Editor + createDefaultPlugins | | on-codemerge/sdk | definePlugin, h / mount, toolbar/popup types | | on-codemerge/index.css | Editor chrome | | on-codemerge/public.css | Published page styles | | on-codemerge/public.js | Published page runtimes |

License

MIT