@wuild/flowmd

v1.0.0

Published

a year ago

FlowMD - A modern WYSIWYG Markdown Editor built with ProseMirror

0High
0Medium
0Low

wuild

markdown editor wysiwyg prosemirror rich-text text-editor markdown-editor flowmd

FlowMD

A modern, extensible WYSIWYG Markdown Editor built with ProseMirror, following the CommonMark specification.

Features

WYSIWYG Editing: Real-time visual markdown editing with instant preview
CommonMark Compliant: Follows the CommonMark specification for markdown syntax
Extensible Plugin System: Easy to extend with custom functionality without modifying the core codebase
Rich Formatting: Support for bold, italic, strikethrough, underline, inline code
Advanced Elements: Headers, blockquotes, lists, tables, images, links
Code Blocks: Syntax highlighting with highlight.js
Dual Mode: Switch between visual editor and source code view
Keyboard Shortcuts: Full keyboard navigation and shortcuts
Responsive: Works on desktop and mobile devices

Demo Image

Installation

npm install flowmd

Basic Usage

import { FlowMD } from 'flowmd';
import 'flowmd/flowmd.css';

// Initialize editor
const editor = new FlowMD(document.getElementById('editor'), {
  placeholder: 'Start writing...',
  theme: 'auto',
  toolbar: 'bold,italic,|,heading,blockquote,|,image,link',
  onChange: (markdown) => {
    console.log('Content changed:', markdown);
  }
});

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/flowmd/dist/flowmd.css">
</head>
<body>
  <div id="editor"></div>
  <script src="node_modules/flowmd/dist/flowmd.umd.js"></script>
  <script>
    new FlowMD.FlowMD(document.getElementById('editor'));
  </script>
</body>
</html>

Configuration Options

interface EditorOptions {
  placeholder?: string;
  onChange?: (markdown: string) => void;
  toolbar?: string; // e.g., "bold,italic,|,heading,blockquote"
  theme?: 'light' | 'dark' | 'auto';
  floatingToolbar?: boolean;
  minHeight?: string;
  maxHeight?: string;
  height?: string;
  autoResize?: boolean;
  debug?: boolean;
}

Keyboard Shortcuts

Ctrl+B / Cmd+B: Bold text
Ctrl+I / Cmd+I: Italic text
Ctrl+U / Cmd+U: Underline text
Ctrl+** / **Cmd+: Inline code
Ctrl+K / Cmd+K: Insert link
Ctrl+Shift+I / Cmd+Shift+I: Insert image
Ctrl+Shift+M / Cmd+Shift+M: Toggle source view
Ctrl+Alt+1-6 / Cmd+Alt+1-6: Headings 1-6
Ctrl+Alt+0 / Cmd+Alt+0: Paragraph
Ctrl+Shift+7 / Cmd+Shift+7: Ordered list
Ctrl+Shift+8 / Cmd+Shift+8: Bullet list
Ctrl+Shift+9 / Cmd+Shift+9: Blockquote

API Reference

Methods

getMarkdown() - Get current markdown content
setContent(markdown: string) - Set editor content
focus() - Focus the editor
destroy() - Clean up the editor

Events

The onChange callback is triggered whenever the content changes:

const editor = new FlowMD(element, {
  onChange: (markdown) => {
    // Handle content changes
    console.log(markdown);
  }
});

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run linting
npm run lint

# Run type checking
npm run type-check

# Format code
npm run format

# Check code quality (lint, format, type-check)
npm run code-quality

Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Coding Standards

Follow the CommonMark specification for markdown syntax implementation
Use the existing style in main.scss for styling components
Utilize the plugin system for adding new features instead of modifying core files
Follow consistent naming conventions:
- Use camelCase for variables and functions
- Use PascalCase for classes and components
- Use kebab-case for file names
Write clear and concise documentation for all components, functions, and modules
Include JSDoc comments for all public APIs
Ensure all code passes linting, formatting, and type checking before submitting

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

Built with ProseMirror
Syntax highlighting by highlight.js
Markdown parsing by markdown-it