Package Exports

markdown-outline-editor
markdown-outline-editor/dist/index.esm.js
markdown-outline-editor/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (markdown-outline-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Markdown Outline Editor

A highly configurable React component for editing Markdown outlines with visual hierarchy, perfect for creating mind maps, documentation outlines, and structured content.

Features

Split-view editor with Markdown and visual outline views
Hierarchical heading structure (H1-H6) with visual indentation
Customizable colors, fonts, and styles
Keyboard shortcuts for efficient editing
Prevents invalid heading structures (no skipping levels)
Configurable options for UI elements and behavior
Internationalization (i18n) support with multiple languages
Fully typed with TypeScript

Installation

npm install markdown-outline-editor
# or
yarn add markdown-outline-editor

Basic Usage

import React from 'react';
import { MarkdownOutlineEditor } from 'markdown-outline-editor';

function App() {
  return (
    <div className="App">
      <h1>My Outline Editor</h1>
      <MarkdownOutlineEditor />
    </div>
  );
}

export default App;

Configuration

The component accepts a config prop with the following options:

import React from 'react';
import { MarkdownOutlineEditor } from 'markdown-outline-editor';

function App() {
  const editorConfig = {
    // Custom theme
    theme: {
      primaryColor: '#8A2BE2', // BlueViolet
      backgroundColor: '#F8F5FF',
      headingColors: {
        h1: '#6A0DAD', // Purple
        h2: '#8A2BE2', // BlueViolet
        h3: '#9370DB', // MediumPurple
        h4: '#B19CD9', // LightPurple
        h5: '#D8BFD8', // Thistle
        h6: '#E6E6FA', // Lavender
      },
    },
    
    // Editor options
    editorOptions: {
      showMarkdownEditor: true,
      showOutlineEditor: true,
      height: 600,
      allowMultipleH1: false,
    },
    
    // Default content (optional, will use i18n default if not provided)
    defaultMarkdown: '# My Outline\n\n## Section 1\n\n### Subsection 1.1',
    
    // Event handlers
    onChange: (markdown) => console.log('Content changed:', markdown),
    onSave: (markdown) => console.log('Saving content:', markdown),
    
    // Internationalization options
    i18n: {
      language: 'en', // 'en' or 'zh'
      onLanguageChange: (language) => console.log('Language changed to:', language),
    }
  };

  return (
    <div className="App">
      <MarkdownOutlineEditor config={editorConfig} />
    </div>
  );
}

export default App;

Configuration Options

Theme Options

Option	Type	Description
`backgroundColor`	string	Background color of the editor
`textColor`	string	Text color in the editor
`headingColors`	object	Colors for each heading level (h1-h6)
`headingBadgeColors`	object	Colors for heading badges (h1-h6)
`primaryColor`	string	Primary color for buttons and accents
`secondaryColor`	string	Secondary color for UI elements
`accentColor`	string	Accent color for highlights
`fontFamily`	string	Font family for text
`codeFontFamily`	string	Font family for code and Markdown
`fontSize`	string	Base font size
`headingFontSizes`	object	Font sizes for each heading level

Editor Options

Option	Type	Description
`showMarkdownEditor`	boolean	Show/hide the Markdown editor pane
`showOutlineEditor`	boolean	Show/hide the visual outline editor pane
`showToolbar`	boolean	Show/hide the heading toolbar
`showKeyboardShortcutsGuide`	boolean	Show/hide the keyboard shortcuts guide
`readOnly`	boolean	Make the editor read-only
`height`	number/string	Height of the editor
`width`	number/string	Width of the editor
`allowMultipleH1`	boolean	Allow multiple H1 headings
`preventHeadingSkipping`	boolean	Prevent skipping heading levels
`markdownEditorLabel`	string	Label for the Markdown editor
`outlineEditorLabel`	string	Label for the outline editor
`applyButtonLabel`	string	Label for the apply button
`headingLabels`	object	Labels for heading buttons (h1-h6)

Callbacks

Option	Type	Description
`onChange`	function	Called when content changes
`onSave`	function	Called when save button is clicked

Internationalization (i18n) Options

Option	Type	Description
`language`	string	Language code (e.g., 'en', 'zh')
`resources`	object	Custom translation resources
`onLanguageChange`	function	Called when language changes

Currently supported languages:

English ('en')
Chinese ('zh')

Using the Language Switcher

The component includes a built-in language switcher that can be used independently:

import React, { useState } from 'react';
import { MarkdownOutlineEditor, LanguageSwitcher } from 'markdown-outline-editor';

function App() {
  const [language, setLanguage] = useState('en');
  
  return (
    <div className="App">
      <div style={{ textAlign: 'right', marginBottom: '10px' }}>
        <LanguageSwitcher onChange={setLanguage} />
      </div>
      
      <MarkdownOutlineEditor 
        config={{
          i18n: {
            language,
            onLanguageChange: setLanguage
          }
        }}
      />
    </div>
  );
}

export default App;

Adding Custom Languages

You can add custom languages by providing additional resources in the i18n configuration:

const customFrenchTranslation = {
  editor: {
    markdownEditorLabel: 'Éditeur Markdown',
    outlineEditorLabel: 'Éditeur de plan visuel',
    applyButtonLabel: 'Appliquer au plan',
    saveButtonLabel: 'Enregistrer',
    // ... other translations
  },
  // ... other translation sections
};

<MarkdownOutlineEditor 
  config={{
    i18n: {
      language: 'fr',
      resources: {
        fr: {
          translation: customFrenchTranslation
        }
      }
    }
  }}
/>

Keyboard Shortcuts

Enter: Create a new line with the same heading level
Tab: Increase heading level (e.g., H2 → H3)
Shift+Tab: Decrease heading level (e.g., H3 → H2)
Ctrl/Cmd+Enter: Apply Markdown changes to the outline editor

License

MIT