The Native-First, High-Performance Markdown Plugin for JavaScript

Markdown text editor plugin that transforms a native textarea into a full editing suite. WYSIWYG and plain Markdown modes, live preview, RTL support, dark mode. Works with Django, HTMX, Laravel, React, and any stack.

The Philosophy: "Native-First"

Most editors break the standard web workflow. MarkdownEditor embraces it. Because it sits directly on top of a <textarea>, you don't need to learn a new way to handle data.

• No Data Binding Needed: Works with <form method="POST"> out of the box
• Standard Access: Use document.getElementById('editor').value just like a normal input.
• Backend Agnostic: Works with any backend (Python, Node.js, PHP, etc.) just like a normal form field

Key Features

🖼️ Advanced Image Upload (SEO Optimized)

Don't bloat your database with heavy Base64 strings. Configure our API to upload images directly to your server or S3 bucket. The editor receives the URL, keeping your Markdown files light and your site's SEO ranking high.

🔀 Hybrid & Plain Modes

Give your users the best of both worlds. Switch between a Visual (WYSIWYG) Hybrid mode for easy formatting and a Plain Markdown mode for distraction-free, raw syntax editing.

🌍 Global-Ready with RTL Support

Full native support for Right-to-Left (RTL) languages. Perfect for projects requiring Arabic, Urdu, or Farsi support with automatic text-direction alignment.

⚡ Performance at Scale

• Lightweight: A tiny ~116KB footprint that won't slow down your page load
• Large Document Support: Optimized to handle thousands of lines of text without input lag or browser freezing
• Smart Rendering: Debounced preview updates, cached style calculations, and conflict-free keyboard handling between list continuation and indentation — so Tab and Enter always do exactly one thing

♿ Accessible by Default

Full ARIA support is built in and requires no extra configuration. The toolbar is a proper role="toolbar" landmark, the preview pane is a labelled role="region", all SVG icons are hidden from screen readers, the preview toggle exposes its on/off state via aria-pressed, and disabled toolbar buttons use both disabled and aria-disabled so assistive technology is never misled. Modals return focus to the triggering button when closed.

🛡️ Zero CSS Conflicts

All editor styles are fully scoped to the .markdown-editor-wrapper element. Tailwind's global preflight (element resets for h1–h6, a, button, etc.) is excluded, so the editor can live alongside Bootstrap, Tailwind, or any other CSS framework on the same page without breaking a single style.

🔒 XSS Safe Preview

The rendered preview is sanitized via DOMPurify before being written to the DOM. Script tags, inline event handlers, and malicious URLs in crafted markdown input are stripped automatically — no configuration required.

Markdown Editor Demo

Quick Implementation

1. Installation

You can install it using NPM, import the JavaScript file directly, or use a CDN for rapid deployment.

Install via NPM

npm install markdown-text-editor

Using a CDN

Alternatifnya, sertakan tautan CDN berikut dalam HTML Anda

<script src="https://cdn.jsdelivr.net/npm/markdown-text-editor"></script>

2. Struktur HTML

Cukup tempatkan <textarea> di dalam formulir standar Anda. Tidak diperlukan pembungkus khusus.

1
2
3
4

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

3. Impor JS dan CSS dan inisialisasi plugin pada elemen textarea Anda

1
2
3
4
5
6

import MarkdownEditor from "markdown-text-editor";

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

4. Konfigurasi & Kustomisasi

Anda dapat sepenuhnya menyesuaikan perilaku dan antarmuka editor dengan meneruskan objek options. Jika Anda menghilangkan opsi, nilai default akan digunakan.

🛠 Kustomisasi Bilah Alat

Bilah alatnya bersifat modular. Anda dapat menciptakan pengalaman minimal atau power suite berfitur lengkap dengan memodifikasi array.

Alat yang Tersedia

💡 Kiat Penerapan:

• Pengurutan ulang: Tombol muncul sesuai urutan yang Anda cantumkan dalam larik
• Menghapus: Cukup hilangkan kunci apa pun (seperti gambar) dari array untuk menonaktifkan fitur tersebut sepenuhnya bagi pengguna
• Pengganti Asli: Jika Anda tidak memberikan placeholder di JS, plugin akan secara otomatis menggunakan atribut placeholder dari <textarea> HTML Anda

📊 Catatan Kaki (Bilah Status)

Footer berada di bawah editor dan menampilkan baris, kolom kursor, jumlah karakter dokumen, dan jumlah kata opsional — semuanya diperbarui secara real-time. Ini terlihat secara default dan setiap stat dapat diubah secara independen.

Contoh Penggunaan

 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. Mendapatkan, Mengatur, dan Mengirimkan Konten

Salah satu kekuatan inti MarkdownEditor adalah menjaga <textarea> tetap tersinkronisasi dengan sempurna. Baik Anda menggunakan kerangka kerja JavaScript modern atau backend tradisional seperti Django, PHP, atau Laravel, alur kerjanya tetap sederhana dan asli.

1. Cara Asli (Disarankan)

Karena editor menyempurnakan area teks standar, Anda dapat menggunakan metode DOM yang sudah dikenal. Ini adalah cara tercepat untuk berinteraksi dengan data Anda tanpa mempelajari API baru.

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. Menggunakan Referensi Variabel

Jika Anda memiliki referensi ke elemen textarea, Anda dapat menggunakannya secara langsung — tidak diperlukan API khusus perpustakaan.

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. Menetapkan dan membaca konten

Cara yang disarankan untuk menyetel konten awal adalah langsung di HTML <textarea> — ini bekerja secara alami dengan setiap kerangka backend (Django, Laravel, Rails, PHP, dll.) dan editor merendernya secara otomatis di init.

1
2

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

Untuk membaca atau memperbarui konten saat runtime, gunakan nilai textarea asli. Panggil editor.render() setelah pembaruan untuk menyegarkan pratinjau dan lapisan hibrid.

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. Menghancurkan editor — destroy()

Panggil editor.destroy() untuk menghapus pembungkus DOM editor dan mengembalikan <textarea> asli ke posisinya dalam dokumen. Berguna dalam aplikasi satu halaman saat melepas tampilan.

1
2
3
4

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

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

React terhadap perubahan dengan onChange

Teruskan callback onChange untuk mendapatkan notifikasi setiap ada perubahan konten. Menerima string penurunan harga saat ini.

1
2
3
4
5

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

Simpan otomatis draf dengan localStorage

Gunakan onChange untuk menyimpan draf pada setiap penekanan tombol. Pulihkan dengan mengisi terlebih dahulu area teks sebelum menginisialisasi editor.

 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. Pengiriman Formulir Otomatis yang Mudah

Karena MarkdownEditor dibangun langsung pada <textarea> asli, ia kompatibel dengan setiap kerangka backend (Django, Laravel, PHP, Ruby on Rails, dll.) langsung dari kotaknya.

Di sinilah filosofi “Pribumi-Pertama” bersinar. Anda tidak perlu menyinkronkan data secara manual sebelum mengirimkan formulir. Browser memperlakukan editor persis seperti kolom input standar.

 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>

Catatan: Inisialisasi plugin MarkdownEditor wajib dilakukan

Cukup gunakan <form> HTML standar. Atribut name pada textarea adalah apa yang akan digunakan server Anda untuk mengidentifikasi konten.

🚀 Mengapa ini merupakan Game-Changer untuk Backend

Karena editor mempertahankan perilaku <textarea> asli, server Anda menangani data sebagai string standar. Tidak diperlukan logika tambahan—tidak ada preventDefault() dan tidak ada konstruksi FormData manual.

💡 Mengapa ini disebut "Fitur Pembunuh":

Kebanyakan editor (seperti Quill, Editor.js, simpleMDE, easyMDE) menyimpan data dalam struktur JSON yang kompleks. Jika pengembang menggunakannya, mereka harus menulis ulang skema database dan logika renderingnya.

Dengan MarkdownEditor, pengembang dapat mengambil situs web lama, mengganti <textarea> biasa dengan editor Anda, dan backend bahkan tidak mengetahui perubahannya. Itu hanya menerima teks mentah yang sama seperti biasanya, tetapi pengguna mendapatkan pengalaman 10x lebih baik.

Opsi Konfigurasi

🖼️ Unggah gambar tingkat lanjut

Menangani unggahan gambar secara asli—daripada mengandalkan string Base64 yang lambat dan banyak memori—merupakan kemenangan yang signifikan baik untuk performa maupun SEO.

Opsi Konfigurasi

Alat gambar mendukung konfigurasi fileInput untuk menangani unggahan server langsung.

• accept: Menentukan array format gambar yang diperbolehkan (misalnya, 'webp', 'avif')
• uploadUrl: Tentukan titik akhir backend tempat objek File akan dikirim melalui POST
• params: Objek opsional untuk mengirim data tambahan (seperti token CSRF, ID pengguna, atau nama folder) bersama file gambar

Contoh penggunaan (Konfigurasi Lengkap)

 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);

📡 Detail Integrasi Server

1. Permintaan

Editor mengirimkan permintaan POST sebagai multipart/form-data. Secara default, ini mencakup:

• image_file: Objek file sebenarnya
• image_alt: Teks alternatif yang dimasukkan oleh pengguna
• ...ditambah data khusus apa pun yang ditentukan dalam objek params

2. Respon yang Diperlukan

Untuk mengonfirmasi keberhasilan upload dan menyisipkan gambar ke editor, server Anda harus mengembalikan struktur JSON berikut:

1
2
3
4

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

Catatan: Pastikan Anda menggunakan kunci image_path untuk URL gambar yang diunggah.

Validasi Teks Alt Gambar (altInput)

Untuk memastikan konten Anda tetap dapat diakses dan SEO-friendly, MarkdownEditor menerapkan validasi teks alternatif secara default. Anda dapat mengonfigurasi perilaku ini menggunakan singkatan boolean atau objek detail.

• Perilaku Default: Jika altInput tidak ditentukan, defaultnya adalah { diperlukan: true }
• Terapkan Aksesibilitas: Pengguna akan dilarang menyisipkan gambar sampai deskripsi alternatif diberikan

Contoh Konfigurasi:

1. Default (Tidak perlu konfigurasi)

1
2
3
4

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

2. Singkatan (Nonaktifkan Validasi)

Jika Anda ingin mengizinkan gambar tanpa deskripsi, cukup setel boolean ke false.

1
2
3

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

3. Berbasis objek (Eksplisit)

1
2
3
4
5

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

Penggunaan Gambar Standar (Tanpa fileInput):

Jika fileInput tidak dikonfigurasi, editor akan menggunakan modal sederhana berbasis URL secara default. Ini ideal jika sebagian besar pengguna Anda terhubung ke host gambar eksternal.

1
2
3
4
5
6
7
8

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

💡 Mengapa menggunakan params?

Dalam kerangka kerja seperti Laravel atau Django, Anda tidak dapat mengunggah berkas tanpa token CSRF. Dengan menambahkan _token ke objek params, permintaan Anda akan melewati middleware keamanan backend dengan lancar, mempertahankan filosofi "Zero Logic" untuk pengontrol sisi server Anda.

🔀 Mode Pengeditan

MarkdownEditor menawarkan dua cara berbeda untuk menulis dan memformat konten Anda. Anda dapat beralih antara tampilan tradisional yang berfokus pada sintaksis atau pengalaman modern yang mengutamakan visual.

Konfigurasi

Anda dapat menentukan mode awal menggunakan properti mode selama inisialisasi.

• plain (Default): Lingkungan penurunan harga yang bersih dan berkinerja tinggi tempat sintaksis (seperti **bold** atau # heading) terlihat. Ideal untuk pengembang dan penganut penurunan harga
• hibrida: Pengalaman yang terinspirasi WYSIWYG yang menampilkan pemformatan (Tebal, Miring, Judul) secara real-time saat Anda mengetik, sambil tetap mempertahankan struktur penurunan harga yang mendasarinya.

Pelaksanaan:

 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'
});

Pratinjau Mode Hibrid dan Biasa:

Hybrid Mode

Pemformatan visual ditampilkan secara real-time saat Anda mengetik.

Mode Biasa (Default)

Berfokus pada sintaks penurunan harga mentah untuk pengalaman yang ringan.

⌨️ Pintasan Papan Ketik

Tindakan pemformatan umum dapat dipicu langsung dari keyboard tanpa menyentuh toolbar. Setiap pintasan juga ditampilkan di tooltip tombol toolbar yang sesuai.

🔍 Temukan & Mengganti

Panel temukan dan ganti bawaan tersedia di dalam editor — tidak diperlukan ekstensi browser atau alat terpisah.

• Tekan Ctrl + F (atau ⌘ F) untuk membuka panel Temukan
• Tekan Ctrl + H (atau ⌘ H) untuk membuka Temukan & Ganti panel
• Penelusuran tidak peka huruf besar-kecil dan menampilkan penghitung pertandingan langsung (misalnya 3 dari 12)
• Navigasikan kecocokan dengan tombol ▲ / ▼ atau Enter / Shift + Enter
• Ganti menggantikan kecocokan yang disorot saat ini; Ganti Semua menggantikan setiap kejadian sekaligus
• Tekan Escape untuk menutup panel dan mengembalikan fokus ke editor

Panel mengapung di sudut kanan atas area konten editor dan tidak mengganggu penulisan.

🌙 Tema

MarkdownEditor secara otomatis mewarisi temanya dari halaman sekitarnya — tidak diperlukan konfigurasi. Editor membaca data-theme dari leluhur terdekat saat inisialisasi, sehingga tetap sinkron dengan tema situs Anda.

Bagaimana tema diselesaikan (urutan prioritas)

1. Opsi tema — penggantian eksplisit yang diteruskan pada objek opsi
2. data-theme pada <textarea> — disetel langsung pada elemen
3. data-theme pada leluhur mana pun — mis. <html>, <body>, atau pembungkus <div>

Tema yang tersedia

'light' (default), 'dark', 'snowberry', 'darkberry'

Opsi 1 — mewarisi dari <html> atau leluhur mana pun (konfigurasi nol)

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>

Opsi 2 — atur data-theme langsung di <textarea>

1
2
3
4

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

Opsi 3 — opsi tema eksplisit (mengganti semuanya)

1
2
3

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

🎨 Tema Khusus melalui Variabel CSS

Anda dapat sepenuhnya menyesuaikan tampilan editor dengan mengganti variabel CSS-nya pada elemen .markdown-editor-wrapper atau pemilih [data-theme] mana pun. Semua warna menggunakan ruang warna OKLCH untuk hasil yang seragam.

Contoh tema khusus

Ganti variabel apa pun di .markdown-editor-wrapper setelah editor menginisialisasi, atau tentukan blok [data-theme] khusus di stylesheet Anda:

 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' });

• Pratinjau Waktu Nyata: Lihat penurunan harga yang ditampilkan secara instan saat Anda mengetik.
• Penyorotan Sintaks: Peningkatan keterbacaan dengan kode yang jelas dan format penurunan harga.
• Integrasi Mudah: Integrasikan secara lancar ke dalam proyek web apa pun dengan penyiapan minimal.
• Bilah Alat yang Dapat Disesuaikan: Konfigurasikan dan susun ulang opsi bilah alat secara dinamis seperti huruf tebal, miring, dan lainnya.

Fitur

Contoh Konfigurasi Lengkap

Gunakan contoh komprehensif ini untuk menginisialisasi MarkdownEditor dengan semua fitur utama, termasuk pengurutan toolbar khusus dan penanganan unggahan gambar tingkat lanjut.

 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();