md-editor – A custom Markdown editor

This standalone Markdown editor is a custom web component for Algroveon-Mini-SSG, a static site generator I developed featuring a browser-based admin interface. While it was created for this specific use case, it can also be integrated into other projects. It focuses on a sleek editor interface with typical functions for headings, indentation, formatting, and preview.

Core Features

Toolbar: Bold, Italic, H1–H3, Link, Image, List, Horizontal Rule. All actions work with the current cursor context: if text is selected, it is wrapped; if nothing is selected, a placeholder is inserted. Prefixes (headings, lists) can be removed with a second click – e.g., # Title becomes Title again.

Split Live Preview: A single click splits the editor vertically – raw text on the left, rendered HTML via marked.js on the right. The preview updates with every keystroke.

Frontmatter Handling: A --- block at the beginning of a file is recognized as YAML frontmatter and displayed as a separate block in the preview – rather than being rendered as Markdown. This is crucial for use within a Static Site Generator.

Fullscreen Mode: Activated via toolbar button or Escape. It uses position: fixed to cover the entire viewport – all other open instances are deactivated in the process.

Keyboard Shortcuts: Ctrl/Cmd+B (Bold), Ctrl/Cmd+I (Italic), Tab (Indentation with two spaces instead of losing focus).

API

Integration via CSS selector or direct element reference:

const editor = new MdEditor('#container', { value: '# Hello' });
editor.on('change', value => console.log(value));
editor.getValue();
editor.setValue('# New content');
editor.destroy();

Theming

All colors are CSS Custom Properties on .mde. Three modes are supported: Dark (default), Light (.mde-light), and Auto (.mde-auto, follows prefers-color-scheme). Colors, radius, and fonts can be customized without modifying the JavaScript code.

Integration into Algroveon-Mini-SSG

The editor runs as a Git submodule under admin_ui/md-editor/ in Algroveon-Mini-SSG. There, it handles the editing of all Markdown files. HTML and YAML files retain their previous editors. The scope of use is intentionally clearly limited, but it still holds potential for more.