Markdown Editor for Vaadin

A powerful markdown editor and viewer component for Vaadin applications, built on the Toast UI Editor.

Overview

This addon provides two complementary components for working with markdown content in Vaadin:

• MarkdownEditor: A feature-rich editor for writing and previewing markdown
• MarkdownViewer: A read-only viewer for displaying rendered markdown

Features

MarkdownEditor

• WYSIWYG & Markdown View: Switch between visual preview and markdown editing
• Preview Modes: Choose between vertical split and tab-based views
• Theme Support: Auto-detecting light/dark theme with fallback option
• Form Integration: Full Vaadin binding support via bindValue()

MarkdownViewer

• Read-Only Display: Perfect for rendering user-submitted or stored markdown
• Theme Support: Seamless light/dark theme integration

Installation

Maven (pom.xml)

<dependency>
    <groupId>org.vaadin.addons.antlerflow</groupId>
    <artifactId>markdown-editor</artifactId>
    <version>${markdown-editor.version}</version>
</dependency>

Quick Start

Basic Editor Example

import org.vaadin.addons.antlerflow.markdowneditor.MarkdownEditor;
import org.vaadin.addons.antlerflow.markdowneditor.PreviewStyle;

MarkdownEditor editor = new MarkdownEditor("My Document");
editor.setWidthFull();
editor.setPreviewStyle(PreviewStyle.VERTICAL);
editor.setPlaceholder("Enter your markdown here...");

add(editor);

Basic Viewer Example

import org.vaadin.addons.antlerflow.markdowneditor.MarkdownViewer;

MarkdownViewer viewer = new MarkdownViewer("Document Preview");
viewer.setValue("# Hello World\n\nThis is **markdown** content.");

add(viewer);

Form Integration

MarkdownEditor editor = new MarkdownEditor("Document Content");
editor.setWidthFull();

// Bind to a value signal or property
ValueSignal<String> contentSignal = new ValueSignal<>("");
editor.bindValue(contentSignal, contentSignal::set);

// Access the content
String markdown = editor.getValue();

Theme Support

Both components automatically detect and respond to the application's theme (light or dark). The theme is determined by:

1. The theme attribute on the document root element
2. CSS classes (dark-theme, light-theme) on the document root
3. System preference (via prefers-color-scheme media query if enabled)

Enabling System Preference Fallback

editor.setUsePrefersColorSchemeFallback(true);
viewer.setUsePrefersColorSchemeFallback(true);

License

Licensed under the Apache License 2.0. See the LICENSE file for details.

Contributing

Contributions are welcome! Please ensure:

• Code follows the existing style conventions
• Changes include appropriate documentation
• Frontend changes compile without TypeScript errors
• Java changes compile without warnings

Support

For issues, feature requests, or questions, please refer to the project's issue tracker.

Credits

Built by Antler Flow for the Vaadin community.

Toast UI Editor is provided by NHN Cloud.