JavaScript 用のネイティブファーストの高性能 Markdown プラグイン

ネイティブ テキストエリアを完全な編集スイートに変換するマークダウン テキスト エディター プラグイン。同期は必要ありません。 WYSIWYG およびプレーン Markdown モード、ライブ プレビュー、検索と置換、RTL サポート、ダーク モード。 Django、Laravel、Rails、Node.js、PHP、およびあらゆるスタックで動作します。

理念：「ネイティブファースト」

ほとんどのエディターは標準的な Web ワークフローを破っています。 MarkdownEditor はこれを採用しています。 <textarea> の最上位に直接配置されるため、データを処理する新しい方法を学ぶ必要はありません。

• データ バインディングは不要: すぐに <form method="POST"> で動作します。
• 標準アクセス: 通常の入力と同じように document.getElementById('editor').value を使用します。
• バックエンドに依存しない: 通常のフォーム フィールドと同様に、あらゆるバックエンド (Python、Node.js、PHP など) で動作します。

MarkdownEditor と EasyMDE / SimpleMDE の比較

ほとんどの JavaScript マークダウン エディター (EasyMDE、SimpleMDE、CodeMirror ベースのエディター) - <textarea> をカスタム要素に置き換えます。つまり、フォームの送信が中断され、.value は何も返さず、コンテンツを読み戻すためだけに追加のコードを記述する必要があります。 MarkdownEditor は とは異なります。既存のテキストエリアを拡張するものであり、置き換えることはありません。

フレームワークの統合

MarkdownEditor はネイティブ <textarea> を保持するため、追加のコードなしですべてのバックエンド フレームワークと統合されます。サーバーは、標準のフォーム フィールドから受け取る場合とまったく同じように、マークダウン コンテンツを受け取ります。

Django

class をテキストエリア ウィジェットに追加し、エディタを初期化します。request.POST['content'] は追加の手順なしで機能します。

1
2
3
4
5
6
7
8

# forms.py
class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['content']
        widgets = {
            'content': forms.Textarea(attrs={'class': 'markdown-editor'}),
        }

1
2

new MarkdownEditor('.markdown-editor');
// request.POST['content'] contains the markdown on submit

Laravel

f.text_area をクラスで使用します。$request->input('content') はマークダウンを直接受け取ります。

1
2

<textarea name="content" class="markdown-editor">{{ old('content') }}</textarea>
<script>new MarkdownEditor('.markdown-editor');</script>

ルビー・オン・レール

そのまま form_with で動作します。params[:content] にはマークダウンが含まれています。ターボ ドライブの場合は、DOMContentLoaded の代わりに turbo:load を使用します。

1
2
3
4
5
6

document.addEventListener('turbo:load', () => {
    document.querySelectorAll('.markdown-editor:not([data-mde-init])').forEach(el => {
        el.setAttribute('data-mde-init', 'true');
        new MarkdownEditor(el);
    });
});

Node.js / Express

req.body.content は、フォーム送信時にマークダウンを受け取ります。同期ステップやカスタム抽出はありません。

1
2
3

<textarea name="content" class="markdown-editor"></textarea>
<script src="https://cdn.jsdelivr.net/npm/markdown-text-editor"></script>
<script>new MarkdownEditor('.markdown-editor');</script>

PHP

$_POST['content'] は、標準のテキストエリアとまったく同じように機能します。これをドロップすれば、既存のフォーム処理を変更する必要はありません。

1
2
3
4
5
6

<form method="POST" action="save.php">
  <textarea name="content" class="markdown-editor"></textarea>
  <button type="submit">Save</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/markdown-text-editor"></script>
<script>new MarkdownEditor('.markdown-editor');</script>

主な特長

🖼️ 高度な画像アップロード (SEO に最適化)

重い Base64 文字列を使用してデータベースを肥大化させないでください。画像をサーバーまたは S3 バケットに直接アップロードするように API を設定します。エディターは URL を受け取り、Markdown ファイルを軽量に保ち、サイトの SEO ランキングを高く保ちます。

🔀 ハイブリッドモードとプレーンモード

両方の長所をユーザーに提供します。簡単な書式設定のためのビジュアル (WYSIWYG) ハイブリッド モードと、気を散らすことなく生の構文編集のためのプレーン マークダウン モードを切り替えます。

🌍 RTL サポートによるグローバル対応

Right-to-Left (RTL) 言語の完全なネイティブ サポート。自動テキスト方向調整によるアラビア語、ウルドゥー語、 ペルシャ語のサポートが必要なプロジェクトに最適です。

⚡ 大規模なパフォーマンス

• 軽量: フットプリントが約 116 KB と小さいため、ページの読み込みが遅くなりません。
• 大規模ドキュメントのサポート: 入力遅延やブラウザのフリーズを発生させずに数千行のテキストを処理できるように最適化されています。
• スマート レンダリング: デバウンスされたプレビュー更新、キャッシュされたスタイル計算、リストの継続とインデント間の競合のないキーボード処理 - そのため、Tab と Enter は常に 1 つのことを実行します。

♿ デフォルトでアクセス可能

完全な ARIA サポートが組み込まれており、追加の構成は必要ありません。ツールバーは適切な role="toolbar" ランドマークであり、プレビュー ペインには role="region" というラベルが付けられ、すべての SVG アイコンはスクリーン リーダーから非表示になり、プレビュー トグルは aria-pressed を介してオン/オフ状態を公開し、無効化されたツールバー ボタンは disabled と aria-disabled の両方を使用するため、支援技術が誤解されることはありません。モーダルは、閉じるとトリガー ボタンにフォーカスを戻します。

🛡️ CSS 競合ゼロ

すべてのエディター スタイルは、.markdown-editor-wrapper 要素に完全にスコープされます。 Tailwind のグローバル プリフライト (h1 ～ h6、a、button などの要素のリセット) が除外されるため、エディターは単一のスタイルを壊すことなく、Bootstrap、Tailwind、またはその他の CSS フレームワークと同じページ上で共存できます。

🔒 XSS セーフプレビュー

レンダリングされたプレビューは、DOM に書き込まれる前に、DOMPurify によってサニタイズされます。細工されたマークダウン入力内のスクリプト タグ、インライン イベント ハンドラー、悪意のある URL は自動的に削除されます。構成は必要ありません。

マークダウン エディターのデモ

迅速な実装

1. インストール

NPM (バンドラー: Vite、webpack、Rollup など)

npm install markdown-text-editor

1
2

import MarkdownEditor from 'markdown-text-editor';
new MarkdownEditor('#markdown-editor');

CDN：ESモジュール

1
2
3
4

<script type="module">
  import MarkdownEditor from 'https://cdn.jsdelivr.net/npm/markdown-text-editor/dist/markdown-text-editor.es.js';
  new MarkdownEditor('#markdown-editor');
</script>

CDN: グローバル スクリプト タグ (IIFE)

インポートは必要ありません — MarkdownEditor はグローバル変数として自動的に使用可能です。

1
2
3
4
5
6
7
8
9

<form action="/api/save" method="POST">
  <textarea id="markdown-editor" name="content"># Hello World</textarea>
  <button type="submit">Save Content</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/markdown-text-editor"></script>
<script>
  new MarkdownEditor('#markdown-editor');
</script>

2. 設定と初期化

エディターをカスタマイズするには、オプション オブジェクトを渡します。すべてのオプションはオプションです。デフォルト値を使用する場合は省略します。

1
2
3
4

const editor = new MarkdownEditor('#markdown-editor', {
  placeholder: 'Write your markdown...',
  toolbar: ['heading', 'bold', 'italic', 'strikethrough', 'ul', 'ol', 'checklist', 'blockquote', 'link', 'preview'],
});

4. 設定とカスタマイズ

options オブジェクトを渡すことで、エディターの動作とインターフェイスを完全にカスタマイズできます。オプションを省略した場合はデフォルト値が使用されます。

🛠 ツールバーのカスタマイズ

ツールバーはモジュール式です。アレイを変更することで、最小限のエクスペリエンスまたはフル機能のパワー スイートを作成できます。

利用可能なツール

💡 実装のヒント:

• 並べ替え: ボタンは、配列にリストしたとおりの順序で表示されます。
• 削除: 配列からキー (image など) を省略するだけで、ユーザーに対してその機能を完全に無効にできます。
• ネイティブ フォールバック: JS で placeholder を指定しない場合、プラグインは HTML <textarea> の placeholder 属性を自動的に使用します。

📊 フッター (ステータスバー)

フッターはエディターの下にあり、 カーソルの行、列、 ドキュメントの文字数、 オプションで単語数が表示され、すべてリアルタイムで更新されます。これはデフォルトで表示され、各統計を個別に切り替えることができます。

使用例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// Default — line, col, and chars visible
new MarkdownEditor('#editor');

// Disable the footer entirely
new MarkdownEditor('#editor', { footer: false });

// Hide only character count
new MarkdownEditor('#editor', { footer: { chars: false } });

// Hide line and column, keep character count
new MarkdownEditor('#editor', { footer: { line: false, col: false } });

// Show only line number
new MarkdownEditor('#editor', { footer: { col: false, chars: false } });

// Enable word count alongside the defaults
new MarkdownEditor('#editor', { footer: { words: true } });

// Show word count only
new MarkdownEditor('#editor', { footer: { line: false, col: false, chars: false, words: true } });

5. コンテンツの取得、設定、送信

MarkdownEditor の主な強みの 1 つは、基礎となる <textarea> の完全な同期を維持できることです。最新の JavaScript フレームワークを使用している場合でも、Django、PHP、Laravel などの従来のバックエンドを使用している場合でも、ワークフローはシンプルかつネイティブのままです。

1. ネイティブの方法 (推奨)

エディターは標準のテキストエリアを拡張するため、使い慣れた DOM メソッドを使用できます。これは、新しい API を学習せずにデータを操作する最も速い方法です。

1
2
3
4
5

// Retrieve content via ID
const markdown = document.getElementById('markdown-editor').value;

// Set content via ID (The editor UI updates automatically)
document.getElementById('markdown-editor').value = "# New Heading Content";

2. 変数参照の使用

textarea 要素への参照がある場合は、それを直接使用できます。ライブラリ固有の API は必要ありません。

1
2
3
4
5
6
7

const textarea = document.getElementById('markdown-editor');

// Retrieve content
const markdown = textarea.value;

// Set content (the editor UI reflects this immediately)
textarea.value = "## Updated via JS";

3. 内容の設定と読み込み

初期コンテンツを設定する推奨方法は、<textarea> HTML 内で直接設定することです。これはあらゆるバックエンド フレームワーク (Django、Laravel、Rails、PHP など) で自然に動作し、エディターが init 時に自動的にレンダリングします。

1
2

<!-- Recommended: set content server-side -->
<textarea id="markdown-editor"># Hello World</textarea>

実行時にコンテンツを読み取りまたは更新するには、ネイティブの textarea 値を使用します。更新後に editor.render() を呼び出して、プレビュー層とハイブリッド層を更新します。

1
2
3
4
5
6
7
8

const textarea = document.getElementById('markdown-editor');

// Read
const markdown = textarea.value;

// Update at runtime
textarea.value = '# New content';
editor.render();

4. エディターの破棄 — destroy()

editor.destroy() を呼び出してエディタ DOM ラッパーを削除し、元の <textarea> をドキュメント内のその位置に復元します。単一ページのアプリケーションでビューをアンマウントするときに便利です。

1
2
3
4

const editor = new MarkdownEditor('#markdown-editor');

// Remove the editor and restore the plain textarea
editor.destroy();

onChange による変更への反応

onChange コールバックを渡して、コンテンツが変更されるたびに通知を受け取ります。現在のマークダウン文字列を受け取ります。

1
2
3
4
5

const editor = new MarkdownEditor('#markdown-editor', {
    onChange(value) {
        console.log('Content changed:', value.length, 'characters');
    }
});

localStorage によるドラフトの自動保存

onChange を使用して、キーストロークごとに下書きを保存します。エディタを初期化する前にテキストエリアを事前に入力して復元します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

const DRAFT_KEY = 'my-page-draft';

// Restore saved draft before init (only if textarea starts empty)
const textarea = document.getElementById('markdown-editor');
const saved = localStorage.getItem(DRAFT_KEY);
if (saved && !textarea.value) textarea.value = saved;

// Save on every change
const editor = new MarkdownEditor('#markdown-editor', {
    onChange(value) {
        localStorage.setItem(DRAFT_KEY, value);
    }
});

// Clear draft after successful form submission
document.querySelector('form').addEventListener('submit', () => {
    localStorage.removeItem(DRAFT_KEY);
});

4. 簡単な自動フォーム送信

MarkdownEditor はネイティブ <textarea> 上に直接構築されているため、すぐにあらゆるバックエンド フレームワーク (Django、Laravel、PHP、Ruby on Rails など) と互換性があります。

ここで「ネイティブファースト」の哲学が光ります。フォームを送信する前にデータを手動で同期する必要はありません。ブラウザはエディタを標準の入力フィールドとまったく同じように扱います。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<form method="POST" action="/api/submit">
  <textarea id="markdown-editor" name="content" class="h-48" rows="5">
    # Initial Content
  </textarea>

  <button type="submit">Submit to Server</button>
</form>

<script>
  // Just initialize it. That's it.
  new MarkdownEditor('#markdown-editor');
</script>

注: MarkdownEditor プラグインの初期化は必須です

標準の HTML <form> を使用するだけです。テキストエリアの name 属性は、サーバーがコンテンツを識別するために使用するものです。

🚀 バックエンドにとって大きな変革となる理由

エディターはネイティブの <textarea> の動作を保持するため、サーバーはデータを標準文字列として処理します。追加のロジックは必要ありません。preventDefault() や手動の FormData 構築は必要ありません。

💡 これが「キラー機能」である理由:

ほとんどのエディター (Quill、Editor.js、simpleMDE、easyMDE など) は、データを複雑な JSON 構造で保存します。開発者がこれらを使用する場合、データベース スキーマとレンダリング ロジックを書き直す必要があります。

MarkdownEditor を使用すると、開発者は古い Web サイトを使用して、プレーンな <textarea> をエディタに置き換えることができます。バックエンドはそれが変更されたことさえ認識しません。いつもと同じ生のテキストを受け取るだけですが、ユーザーは 10 倍優れたエクスペリエンスを得ることができます。

構成オプション

🖼️ 高度な画像アップロード

遅くてメモリを大量に消費する Base64 文字列に依存するのではなく、画像のアップロードをネイティブに処理することは、パフォーマンスと SEO の両方において大きなメリットとなります。

構成オプション

画像ツールは、サーバーへの直接アップロードを処理するための fileInput 構成をサポートしています。

• accept: 許可される画像形式の配列を定義します (例: 「webp」、「avif」)
• uploadUrl: File オブジェクトが POST 経由で送信されるバックエンド エンドポイントを指定します。
• params: 画像ファイルと一緒に追加データ (CSRF トークン、ユーザー ID、フォルダー名など) を送信するためのオプションのオブジェクト

使用例（フルコンフィグ）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

const options = {
  placeholder: 'Start writing...',
  toolbar: [
    'link',
    {
      image: {
        fileInput: {
            accept: ['webp', 'avif'], // restrict the image upload format
            uploadUrl: '/api/upload', // Your upload endpoint
            params: {
                _token: 'your_csrf_token_here', // Essential for Laravel/Django
                folder: 'blog_posts'
            }
        },
        // Supports boolean: true/false OR object: { required: true }
        altInput: { required: true }
      }
    },
    'preview'
  ],
}
const editor = new MarkdownEditor('#markdown-editor', options);

📡 サーバー統合の詳細

1. リクエスト

エディターは、POST リクエストを multipart/form-data として送信します。デフォルトでは、次のものが含まれます。

• image_file: 実際のファイル オブジェクト
• image_alt: ユーザーが入力した代替テキスト
• ...さらに、params オブジェクトで定義されたカスタム データ

2. 必要な対応

アップロードが成功したことを確認し、画像をエディタに挿入するには、サーバーが次の JSON 構造を返す必要があります。

1
2
3
4

{
  "success": true,
  "image_path": "https://cdn.yourdomain.com/uploads/image.webp"
}

注: アップロードした画像の URL には必ずキー image_path を使用してください。

画像代替テキストの検証 (altInput)

コンテンツがアクセス可能で SEO フレンドリーであることを保証するために、MarkdownEditor はデフォルトで代替テキストの検証を強制します。この動作は、ブール値の省略表現または詳細オブジェクトを使用して構成できます。

• デフォルトの動作: altInput が定義されていない場合、デフォルトの { required: true } になります。
• アクセシビリティを強制する: 代替説明が提供されるまで、ユーザーは画像を挿入できません。

構成例:

1. デフォルト (設定は必要ありません)

1
2
3
4

// Alt text is REQUIRED by default
image: {
  fileInput: { uploadUrl: '/api/upload' }
}

2. 省略表現 (検証を無効にする)

説明のない画像を許可したい場合は、ブール値を false に設定するだけです。

1
2
3

image: {
  altInput: false // Users can now skip the alt text field
}

3. オブジェクトベース (明示的)

1
2
3
4
5

image: {
    altInput: {
        required: false // Disables alt text validation — users can skip the alt field
    }
}

標準的な画像の使用法 (fileInput なし):

fileInput が構成されていない場合、エディターはデフォルトで単純な URL ベースのモーダルを使用します。これは、ユーザーが主に外部イメージ ホストにリンクしている場合に最適です。

1
2
3
4
5
6
7
8

const options = {
  toolbar: [
    'link',
    'image',
    'preview'
  ],
}
const editor = new MarkdownEditor('#markdown-editor', options);

💡 params を使用する理由?

Laravel や Django などのフレームワークでは、CSRF トークンがないとファイルをアップロードできません。 _token を params オブジェクトに追加すると、リクエストはバックエンドのセキュリティ ミドルウェアをシームレスに通過し、サーバー側コントローラーの「ゼロ ロジック」哲学が維持されます。

🔀 編集モード

MarkdownEditor は、コンテンツを記述してフォーマットする 2 つの異なる方法を提供します。従来の構文重視のビューと、視覚重視の最新のエクスペリエンスを切り替えることができます。

構成

初期化中に mode プロパティを使用して開始モードを定義できます。

• plain (デフォルト): 構文 (**bold** や #Heading など) が表示されるクリーンで高パフォーマンスの Markdown 環境。開発者やマークダウン純粋主義者に最適
• ハイブリッド: WYSIWYG にインスピレーションを得たエクスペリエンスで、基礎となる Markdown 構造を維持しながら、入力時に書式設定 (太字、斜体、見出し) をリアルタイムでレンダリングします。

実装：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// Default initialization (Plain Mode)
new MarkdownEditor('#markdown-editor');

// Explicit Plain Mode
new MarkdownEditor('#markdown-editor', {
    mode: 'plain'
});

// Hybrid (Visual) Mode
new MarkdownEditor('#markdown-editor', {
    mode: 'hybrid'
});

ハイブリッド モードとプレーン モードのプレビュー:

ハイブリッドモード

視覚的な書式設定は、入力中にリアルタイムでレンダリングされます。

プレーンモード (デフォルト)

軽量なエクスペリエンスを実現するために、生の Markdown 構文に焦点を当てています。

⌨️ キーボード ショートカット

一般的な書式設定アクションは、ツールバーに触れずにキーボードから直接トリガーできます。各ショートカットは、対応するツールバー ボタンのツールチップにも表示されます。

🔍 見つけて交換する

組み込みの検索および置換パネルはエディタ内で使用できます。ブラウザ拡張機能や別個のツールは必要ありません。

• Ctrl + F (または ⌘ F) を押して、検索パネルを開きます。
• Ctrl + H (または ⌘ H) を押して、検索と検索 を開きます。パネルを交換します。
• 検索では大文字と小文字が区別されず、ライブ一致カウンターが表示されます (例: 3 of 12)。
• ▲ / ▼ ボタンまたは Enter / Shift + Enter を使用して一致に移動します。
• 置換は、現在ハイライト表示されている一致を置換します。 [すべて置換] では、すべての出現箇所を一度に置換します。
• Escape を押してパネルを閉じ、エディタにフォーカスを戻します。

パネルはエディターのコンテンツ領域の右上隅にフロートしており、書き込みを中断しません。

🌙 テーマ

MarkdownEditor は周囲のページからテーマを自動的に継承します。設定は必要ありません。エディターは初期化時に最も近い祖先から data-theme を読み取るため、すぐに使えるサイトのテーマとの同期が保たれます。

テーマの解決方法（優先順位）

1. theme オプション - オプション オブジェクトで渡される明示的なオーバーライド
2. <textarea> の data-theme — 要素に直接設定
3. 任意の祖先 上の data-theme — 例: <html>、<body>、またはラッパー <div>

利用可能なテーマ

'light' (デフォルト)、'dark'、'snowberry'、'darkberry'

オプション 1 — <html> または任意の祖先から継承 (ゼロ構成)

1
2
3
4
5
6

<html data-theme="dark">
  ...
  <textarea id="markdown-editor"></textarea>
  <script>
    new MarkdownEditor('#markdown-editor'); // picks up dark automatically
  </script>

オプション 2 — data-theme を <textarea> に直接設定します

1
2
3
4

<textarea id="markdown-editor" data-theme="dark"></textarea>
<script>
  new MarkdownEditor('#markdown-editor');
</script>

オプション 3 — 明示的な theme オプション (すべてをオーバーライドします)

1
2
3

new MarkdownEditor('#markdown-editor', {
    theme: 'dark'
});

🎨 CSS変数によるカスタムテーマ

.markdown-editor-wrapper 要素または任意の [data-theme] セレクターで CSS 変数をオーバーライドすることで、エディターの外観を完全にカスタマイズできます。すべての色は、知覚的に均一な結果を得るために OKLCH カラー スペース を使用します。

カスタムテーマの例

エディターの初期化後に .markdown-editor-wrapper の変数をオーバーライドするか、スタイルシートでカスタム [data-theme] ブロックを定義します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/* Override individual variables */
.markdown-editor-wrapper {
    --color-primary: oklch(60% 0.2 30);   /* orange accent */
    --border-radius: 0.5rem;
}

/* Or define a full custom theme */
[data-theme="brand"] .markdown-editor-wrapper,
.markdown-editor-wrapper[data-theme="brand"] {
    --color-base:       oklch(15% 0.01 250);
    --color-on-base:    oklch(95% 0 0);
    --color-primary:    oklch(65% 0.22 145);   /* green */
    --color-on-primary: oklch(10% 0 0);
    --color-accent:     oklch(75% 0.18 60);
    --color-neutral:    oklch(80% 0 0);
    --border-radius:    0.75rem;
}

new MarkdownEditor('#markdown-editor', { theme: 'brand' });

• リアルタイム プレビュー: 入力すると即座にマークダウンがレンダリングされるのを確認します。
• 構文のハイライト: 明確なコードとマークダウン形式により読みやすさが向上しました。
• 簡単な統合: 最小限のセットアップであらゆる Web プロジェクトにシームレスに統合できます。
• カスタマイズ可能なツールバー: 太字、斜体などのツールバー オプションを動的に構成および並べ替えます。

特徴

完全な構成例

この包括的な例を使用して、カスタム ツールバーの順序付けや高度な画像アップロード処理など、すべての主要な機能を備えた MarkdownEditor を初期化します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

const editor = new MarkdownEditor('#markdown-editor', {
    mode: 'hybrid',
    placeholder: 'Start writing...',
    footer: {
        line: true,
        col: true,
        chars: true,
        words: true,
    },
    onChange(value) {
        console.log('Content updated:', value.length, 'characters');
    },
    toolbar: [
        'heading', 'bold', 'italic', 'strikethrough', 'blockquote',
        'ul', 'ol', 'checklist',
        'code', 'codeblock', 'hr', 'table',
        {
            image: {
                fileInput: {
                    accept: ['webp', 'avif', 'png'],
                    uploadUrl: '/api/upload'
                }
            }
        },
        'link', 'undo', 'redo', 'indent', 'outdent', 'preview'
    ],
});

// Read content natively
const markdown = document.getElementById('markdown-editor').value;

// Update content programmatically (dispatch input to keep preview in sync)
// const ta = document.getElementById('markdown-editor');
// ta.value = '# New content';
// ta.dispatchEvent(new Event('input', { bubbles: true }));

// destroy() when the view unmounts (SPAs)
// editor.destroy();