markdown-text-editor 1.0.1 → 1.1.0

package/README.md

@@ -1,4 +1,4 @@
-## MarkdownEditor – Best JavaScript Markdown Editor Plugin
+# MarkdownEditor — The Native-First JavaScript Markdown Editor
 
 [![npm installs][npm_installs]](https://www.npmjs.com/package/markdown-text-editor)
 [![Jsdelivr hits][jsdelivr]](https://cdn.jsdelivr.net/npm/markdown-text-editor)
@@ -7,27 +7,123 @@
 [![Secured](https://img.shields.io/badge/Security-Passed-green)](https://snyk.io/test/github/nezanuha/markdown-text-editor)
 ![GitHub Repo stars](https://img.shields.io/github/stars/nezanuha/markdown-text-editor?style=flat)
 
+A lightweight, developer-friendly Markdown editor that transforms a standard HTML `<textarea>` into a feature-rich editing experience without breaking native form submission.
 
-Welcome to **MarkdownEditor**, the leading open source JavaScript markdown editor plugin. Enjoy a simple, powerful, and embeddable markdown editor with real-time preview, syntax highlighting, responsive design, and seamless integration for all web projects.
+> A native `<textarea>` can be enhanced into an advanced Markdown editor while still functioning like a standard textarea, allowing developers to submit its content through a normal form, retrieve the Markdown value using JavaScript via `id`, `name`, or any selector, and set the content programmatically with the editor automatically reflecting the changes.
 
-## Built With
+## 💡 The Concept: Native Power
 
-This Markdown editor is built using [frutjam](https://frutjam.com), a customizable Tailwind CSS UI library.
+Most advanced editors require complex APIs to get or set data. This editor stays true to the web: **if you know how to use a `<textarea>`, you know how to use this editor**.
 
-## Features
-- ✅ **Effortless Frutjam UI Integration**: Easily integrate the Frutjam UI library with automatic editor theme adjustments based on the selected theme.
-- ✅ **Actively Maintenaning**: The plugin receives regular updates to stay up to date. 
-- ✅ **User-Friendly**: It offers a WYSIWYG-style interface, making it great for non-technical users.  
-- ✅ **Simple Markdown _Get/Set_**: No complicated techniques are required to get and set the markdown content. You can use the <textarea> value or name attribute to get and set markdown content. 
-- ✅ **Responsive**: The editor is fully responsive, providing a seamless experience across all screen sizes.  
-- ✅ **RTL Support**: By default Right-to-Left (RTL) text is supported, making it ideal for languages like Arabic, Urdu, and Farsi.  
-- ✅ **Module Support**: Supports ESM, UMD, and CommonJS modules, making it easy to integrate with different module systems.
-- ✅ **Live Preview Mode**: Watch your markdown content render while you type, providing a real-time preview of formatting, links, images, and more.
-- ✅ **Automatic Dark Mode Support**: The editor follows your system's or website's dark mode settings, giving a seamless experience.
+It acts as a transparent layer over your native element. This means:
 
-## Documentation
+- **Automatic Form Submission**: Since it's a `<textarea>`, the content is automatically included in your POST requests
+- **No New Syntax**: Use standard JavaScript to get or set values
+- **Seamless Integration**: Works with any backend (Node, PHP, Python, etc.) just like a normal form field
 
-For full documentation, visit [Markdown Editor](https://frutjam.com/plugins/markdown-editor).
+## 🚀 Quick Start
+
+### 1. Installation
+
+#### NPM
+
+```bash
+npm install markdown-text-editor
+```
+
+——— OR ———
+
+#### CDN
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/markdown-text-editor@1.0.1/dist/markdown-text-editor.min.js"></script>
+```
+
+### 2. The HTML Structure
+
+Simply place a `<textarea>` inside your standard form. No special wrappers required.
+
+```html
+<form method="post" action="api/submit-form">
+  <input type="text" name="title" placeholder="Article Title">
+
+  <textarea id="markdown-editor" name="content"># Heading level 1</textarea>
+
+  <button type="submit">Submit Post</button>
+</form>
+```
+
+### 3. Initialization
+
+Works out of the box with any bundler (Vite, webpack, Rollup) or via CDN — no extra configuration needed. CSS is injected automatically, so a single import is all you need.
+
+```javascript
+import MarkdownEditor from "markdown-text-editor";
+
+// Plain mode (default) — raw Markdown syntax
+const editor = new MarkdownEditor('#markdown-editor');
+
+// Hybrid mode — WYSIWYG-inspired, renders formatting live as you type
+const editor = new MarkdownEditor('#markdown-editor', { mode: 'hybrid' });
+```
+
+## 🛠 Developer Workflow
+
+### Getting Content
+
+You don't need a custom library method to get the text. Just target the ID:
+
+```javascript
+const markdown = document.getElementById('markdown-editor').value;
+console.log(markdown);
+```
+
+### Setting Content
+
+The editor listens for changes. When you update the textarea value via JavaScript, the preview/editor UI updates automatically:
+
+```javascript
+const textarea = document.getElementById('markdown-editor');
+textarea.value = "## New Content Loaded via JS";
+
+// The editor UI reflects this immediately
+```
+
+## ✨ Features
+
+- 🔌 **Native Form Integration**: Works exactly like a standard `<textarea>`. No complex APIs—just use the `value` or `name` attribute to get or set content. It "just works" with standard HTML form submissions
+- 🖼️ **Advanced Image Upload**: Easily configure image uploads to your own server. Set your custom image paths via an API to ensure faster page loads and better SEO by avoiding heavy Base64 strings
+- 🔀 **Hybrid & Plain Modes**: Choose between a **Hybrid (WYSIWYG)** experience for visual editing or a Plain Markdown mode for a traditional coding feel
+- ⚡ **Real-time Live Preview**: Watch your Markdown render instantly as you type, including support for links, images, and complex formatting. Task list checkboxes in the preview pane are clickable and sync back to the markdown source instantly
+- ♿ **Accessible by Default**: Full ARIA support out of the box — toolbar landmark (`role="toolbar"`), labelled preview region, screen-reader-friendly tool buttons (SVGs marked `aria-hidden`), `aria-pressed` on the preview toggle, `aria-disabled` on inactive buttons, and correct focus restoration when modals close
+- 🛡️ **Zero CSS Conflicts**: Editor styles are fully scoped to the `.markdown-editor-wrapper` element and Tailwind's global preflight is excluded — no bleed into Bootstrap, Tailwind, or any other CSS framework on the same page
+- 🌍 **Built-in RTL Support**: Native support for Right-to-Left (RTL) languages like Arabic, Urdu, and Farsi, making it globally accessible
+- 🌙 **Adaptive Theming**: Features automatic Dark Mode support that follows your system or website settings for a seamless visual experience
+- 🎨 **Frutjam UI Ready**: Effortless integration with the **Frutjam** UI library, including automatic theme adjustments to match your UI components
+- 🚀 **High Performance**:
+    - **Lightweight**: Tiny bundle size (~116KB minified)
+    - **Heavy Content**: Optimized to handle long documents and large files without performance lag
+    - **Smart rendering**: Debounced preview updates, cached style calculations, and conflict-free keyboard handling between list continuation and indentation
+- 📱 **Fully Responsive**: A fluid UI that adapts perfectly to desktops, tablets, and smartphones
+- 📝 **Smart Editing**: GitHub-style automatic list continuation—press `Enter` and the editor handles the bullets/numbers for you. Supports ordered lists, unordered lists, and checklists
+- 🔄 **Undo / Redo**: Full history system using granular diffs — restores both text content and exact cursor position. Integrated with `Ctrl+Z`, `Ctrl+Y`, and `Ctrl+Shift+Z`
+- 🎛️ **Effortless Customization**: Quickly match your brand's look and feel using simple CSS variables
+- 📦 **Universal Module Support**: Compatible with **ESM**, **UMD**, and **CommonJS** — works with Vite, webpack, Rollup, or directly via CDN with no extra configuration
+- 🔄 **Actively Maintained**: Regularly updated with new features, optimizations, and community-driven improvements
+
+## 📖 Documentation
+
+For the complete API reference, advanced configuration, and styling guides, visit the official [Markdown Editor Documentation](https://frutjam.com/plugins/markdown-editor).
+
+## WYSIWYG (Hybrid) & Plain Mode Markdown Editing Experience
+
+### Hybrid Mode (WYSIWYG + Markdown): See how the editor combines WYSIWYG and Markdown editing in one interface
+
+![Hybrid mode WYSIWYG styled markdown editor](https://cdn.frutjam.com/media/plugins/hybrid-mode-markdown-editor.webp)
+
+### Plain Markdown Mode: Experience editing Markdown directly with full control over formatting
+
+![Plain mode markdown editor](https://cdn.frutjam.com/media/plugins/plain-mode-markdown-editor.webp)
 
 ---
 
@@ -54,4 +150,4 @@ If you like this project, consider giving it a star! 🌟
 ---
 
 [jsdelivr]: https://badgen.net/jsdelivr/hits/npm/markdown-text-editor
-[npm_installs]: https://badgen.net/npm/dt/markdown-text-editor
+[npm_installs]: https://badgen.net/npm/dt/markdown-text-editor