# Markdown Editor for Vaadin A powerful markdown editor and viewer component for Vaadin applications, built on the [Toast UI Editor](https://github.com/nhn/tui.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) ```xml org.vaadin.addons.antlerflow markdown-editor ${markdown-editor.version} ``` ## Quick Start ### Basic Editor Example ```java 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 ```java 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 ```java MarkdownEditor editor = new MarkdownEditor("Document Content"); editor.setWidthFull(); // Bind to a value signal or property ValueSignal 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 ```java editor.setUsePrefersColorSchemeFallback(true); viewer.setUsePrefersColorSchemeFallback(true); ``` ## License Licensed under the Apache License 2.0. See the [LICENSE](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](https://vaadin.com/directory) for the Vaadin community. Toast UI Editor is provided by [NHN Cloud](https://github.com/nhn/tui.editor).