markdown-text-editor 1.7.0 → 1.9.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 nezanuha
+Copyright (c) 2026 nezanuha
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,6 +1,6 @@
-# MarkdownEditor — Lightweight JavaScript Markdown Editor with WYSIWYG & Plain Mode
+# Markdown Text Editor
 
-### The Native-First JavaScript Markdown Editor
+### Toolbar, live preview and WYSIWYG on the textarea you already have
 
 [![npm installs][npm_installs]](https://www.npmjs.com/package/markdown-text-editor)
 [![Jsdelivr hits][jsdelivr]](https://cdn.jsdelivr.net/npm/markdown-text-editor)
@@ -13,27 +13,34 @@ A lightweight, embeddable JavaScript Markdown editor that transforms a standard
 
 A native-first Markdown editor built on a standard textarea. No data binding, no API — just drop it in and your forms keep working as-is.
 
+**Works standalone.** No Frutjam, no Tailwind, no framework required, the styles are bundled.
+
+![Hybrid mode: headings, bold text and list markers styled live inside the textarea while the Markdown syntax stays visible](https://cdn.frutjam.com/media/plugins/hybrid-mode-markdown-editor.webp)
+
+<sub>Hybrid mode. Text is styled as you type and the Markdown stays where it is, because this is your `<textarea>`, not a copy of it.</sub>
+
 > **No complex APIs. No data binding. No JSON schemas.** Just a `<textarea>` that types Markdown and submits like any normal form field — enhanced with a rich toolbar, live preview, and WYSIWYG hybrid mode.
 
 ## ⭐ Why developers choose this over EasyMDE / SimpleMDE
 
-Most JavaScript markdown editors (EasyMDE, SimpleMDE, CodeMirror-based editors) replace your `<textarea>` with a custom element — which means you have to write extra code to extract the value before form submission, sync state manually, and learn a new API just to read or set content.
+Most JavaScript markdown editors (EasyMDE, SimpleMDE, CodeMirror-based editors) hide your `<textarea>` and edit a copy, writing the value back when the form is submitted. That holds up until something else needs the field: a `required` input the browser cannot focus blocks the submit entirely, and `.value` or `FormData` read before submit returns an empty string, which breaks htmx, Turbo, Livewire, autosave and unsaved-changes guards.
 
 **MarkdownEditor is different.** It sits transparently on top of your existing `<textarea>`:
 
 | Feature | MarkdownEditor | EasyMDE / SimpleMDE |
 |---|---|---|
-| Native `<textarea>` preserved | ✅ | ❌ Replaced |
-| Form submission works as-is | ✅ | ❌ Requires extra JS |
-| Get/set value via `.value` | ✅ | ❌ Custom API needed |
+| Native `<textarea>` preserved | ✅ | ❌ Hidden, edited as a copy |
+| Works with `required` fields | ✅ | ❌ Browser blocks the submit |
+| `.value` correct before submit | ✅ | ❌ Empty until the form submits |
+| Serialises with `FormData`, htmx, Turbo | ✅ | ❌ Needs the editor's own API |
 | WYSIWYG hybrid mode | ✅ | ❌ |
-| CSP-compatible (no inline JS) | ✅ | ❌ |
-| Zero CSS conflicts | ✅ | ❌ |
-| RTL support | ✅ | ❌ |
+| Inline event handlers (CSP) | ✅ None | Some |
+| RTL support | ✅ Built in | Via CodeMirror's `direction` option |
 | Built-in Find & Replace | ✅ | ❌ |
 | Swap the markdown parser | ✅ | ❌ |
 | Keyboard shortcuts | ✅ | Partial |
 | Dark mode / theming | ✅ | Limited |
+| Bundle size, gzipped | 54 KB | 107 KB (JS + CSS) |
 
 ## 🚀 Quick Start
 
@@ -89,13 +96,14 @@ That's it. Form submission, `.value` access, and all native textarea behaviour w
 - 🔄 **Undo / Redo** — Full diff-based history with exact cursor restoration. Works with `Ctrl+Z`, `Ctrl+Y`, `Ctrl+Shift+Z`
 - ♿ **Accessible by Default** — `role="toolbar"`, `aria-pressed`, `aria-disabled`, `disabled`, screen-reader-friendly SVGs, and correct focus restoration on modal close
 - 🛡️ **XSS Safe** — Preview output sanitized via [DOMPurify](https://github.com/cure53/DOMPurify) before rendering, including the output of a custom renderer
-- 🛡️ **CSP Compatible** — No inline event handlers. Works with strict Content Security Policy headers
+- 🛡️ **No inline scripts** — No inline event handlers and no `eval`, so `script-src` needs no exception. The stylesheet is currently injected as a `<style>` element, which a strict `style-src` blocks ([#42](https://github.com/nezanuha/markdown-text-editor/issues/42))
 - 🌍 **RTL Support** — Native Right-to-Left support for Arabic, Urdu, Farsi, and other RTL languages
 - 🌙 **Dark Mode & Theming** — Inherits `data-theme` from any ancestor element. Built-in light, dark, snowberry, and darkberry themes. Fully customizable via CSS variables
+- 🧩 **Custom Tools** — Add your own toolbar button with `{ custom: { title, icon, action } }`, or extend `MarkdownEditor.Tool` when it builds its own markup. Keyboard shortcuts, translation and teardown work exactly as they do for the built-ins. No fork, no patching
 - 🎛️ **Modular Toolbar** — Pick exactly which tools appear and in what order
 - 🟦 **TypeScript Ready** — Definitions ship with the package. Options, toolbar entries and variable shapes are all checked, so a mistyped tool name is a compile error rather than a silently missing button
 - 📦 **Universal Module Support** — ESM, CommonJS, UMD, and IIFE. Works with Vite, webpack, Rollup, or directly via `<script src>` CDN — no configuration needed
-- 🚀 **High Performance** — ~52KB gzipped (245KB minified). Debounced preview, cached layout calculations, conflict-free Tab/Enter handling for large documents
+- 🚀 **High Performance** — ~54KB gzipped (253KB minified). Debounced preview, cached layout calculations, conflict-free Tab/Enter handling for large documents
 
 ## 🛠 Developer Workflow
 
@@ -133,6 +141,46 @@ const editor = new MarkdownEditor('#markdown-editor', {
 });
 ```
 
+### Add your own toolbar button
+
+Most tools are just a title, an icon and a function. No class, no fork:
+
+```javascript
+new MarkdownEditor('#markdown-editor', {
+    toolbar: ['bold', 'italic', {
+        custom: {
+            title: 'Callout',            // tooltip, and the .callout-btn class
+            icon: '<svg>…</svg>',
+            shortcut: 'Ctrl+Shift+C',    // optional, shown in the tooltip
+            action(editor) {
+                editor.insertText('> [!NOTE]\n> ');
+            }
+        }
+    }, 'preview']
+});
+```
+
+Use `editor.insertText(text, caretOffset, trailingLength)` rather than writing to the textarea yourself — it replaces the selection, restores focus, moves the caret, re-renders the preview, fires `onChange`, and keeps undo working.
+
+A tool that builds its own markup, such as a dropdown or a dialog, extends the base class instead:
+
+```javascript
+class EmbedTool extends MarkdownEditor.Tool {
+    constructor(editor) {
+        super(editor, 'Embed video');
+        this.button = this.createButton('<svg>…</svg>');
+    }
+    applySyntax(event) {
+        // MarkdownEditor.modal is the same dialog the link and image tools use
+        const dialog = MarkdownEditor.modal(event, 'fj:max-w-sm', '…', 'Embed');
+    }
+}
+
+new MarkdownEditor('#markdown-editor', { toolbar: ['bold', EmbedTool, 'preview'] });
+```
+
+Two helpers exist for tools that need them: `editor.renderMarkdown(md)` returns sanitized HTML exactly as the preview does, and `editor.createToolbar(textarea, ['bold', 'italic'])` builds a real toolbar bound to another textarea, for a tool collecting rich text in its own dialog.
+
 ### Tear down in SPAs
 
 ```javascript
@@ -149,7 +197,7 @@ useEffect(() => {
 }, []);
 ```
 
-Use `defaultValue`, not `value`. The editor writes to the textarea directly, so a controlled binding (or Vue's `:value`) would overwrite what the user is typing. Full React and Vue examples are in the [documentation](https://frutjam.com/community/plugins/markdown-editor).
+Use `defaultValue`, not `value`. The editor writes to the textarea directly, so a controlled binding (or Vue's `:value`) would overwrite what the user is typing. Full React and Vue examples are in the [documentation](https://frutjam.com/plugins/markdown-editor).
 
 The same two rules cover Svelte, Angular and anything else: don't bind the value, and call `destroy()` on unmount. In Angular, `onChange` fires outside the zone, so wrap it in `zone.run()` for change detection to notice.