markdown-text-editor 0.0.20-beta.2 → 0.0.21-beta.3

package/README.md

@@ -1,98 +1,142 @@
-# MarkdownEditor Plugin Documentation
+## MarkdownEditor Plugin Documentation
 
-This document explains how to use the **MarkdownEditor Plugin**, a customizable, reusable markdown editor with toolbar functionality that allows options like **bold** and **italic** formatting. Users can dynamically set which tools to display and in what order. The plugin is built with Tailwind CSS for styling and provides easy integration into any project.
+Welcome to the documentation for the **MarkdownEditor Plugin** – an **open source project** offering the **best, simple, embeddable JavaScript Markdown editor plugin or library**. This powerful tool provides **real-time preview**, **syntax highlighting**, and **easy integration** into your projects. Whether you’re building a blog, note-taking app, or any content-rich website, this plugin delivers a robust and customizable markdown editing experience.
+
+---
 
 ## Table of Contents
+
+- [Overview](#overview)
 - [Installation](#installation)
 - [Usage](#usage)
 - [Configuration Options](#configuration-options)
-- [Toolbar Options](#toolbar-options)
-- [Methods](#methods)
-- [Example Usage](#example-usage)
+- [Toolbar Customization](#toolbar-customization)
+- [Example Implementations](#example-implementations)
+- [Contribution Guidelines](#contribute)
 - [License](#license)
 
-## Installation
+---
 
-To install the plugin in your project, you can include the plugin JavaScript file and its associated styles.
+## Overview
 
-1. **Install via NPM** (for bundling tools like Webpack):
-   ```
-   npm install markdown-text-editor
-   ```
+The MarkdownEditor Plugin is designed to be the **best, simple, and embeddable JavaScript markdown editor plugin** available. It is an open source project that boasts:
 
-## Usage
+- **Real-time Preview:** See your markdown rendered instantly as you type.
+- **Syntax Highlighting:** Enhanced readability with clear code and markdown formatting.
+- **Easy Integration:** Seamlessly integrate into any web project with minimal setup.
+- **Customizable Toolbar:** Dynamically configure and reorder toolbar options like **bold**, **italic**, and more.
+
+Built with **Tailwind CSS** for modern styling, this plugin is perfect for developers seeking a lightweight yet feature-rich markdown editor.
+
+---
+
+## Installation
 
+Integrating the MarkdownEditor Plugin into your project is straightforward. You can install it using NPM, import the JavaScript file directly, or use a CDN for rapid deployment.
 
-Import the `MarkdownEditor` class from markdown-text-editor:
+### Install via NPM
 
+For projects utilizing bundling tools like Webpack, run:
 
+```bash
+npm install markdown-text-editor
 ```
+
+---
+
+## Usage
+
+After installation, import the `MarkdownEditor` class from the package:
+
+```javascript
 import MarkdownEditor from "markdown-text-editor";
 ```
 
-## Basic Example:
+### Basic Initialization
 
-To initialize the Markdown editor, you need to add `textarea` tag in your HTML and initialize the editor by passing the container's ID or class and options.
+To get started, include a `<textarea>` element in your HTML and initialize the editor by targeting its container:
+
+#### HTML
 
-### HTML:
 ```html
 <textarea class="editor-container"></textarea>
 ```
 
-### CSS Setup
+#### JavaScript
+
+```javascript
+const editor = new MarkdownEditor('.editor-container', {
+    placeholder: 'Write your markdown...',
+    toolbar: ['preview', 'bold', 'italic'], // Customize toolbar options as needed
+});
+```
+
+---
+
+## CSS Setup
 
-#### Using TailwindCSS
+### Using TailwindCSS
 
-If you are using **TailwindCSS**, add the following configuration to your `tailwind.config.js` file:
+If you’re leveraging **TailwindCSS**, add the following configuration to your `tailwind.config.js`:
 
 ```javascript
 // tailwind.config.js
 module.exports = {
   content: [
-    // './src/**/*.{html,js}',
     'node_modules/markdown-text-editor/**/*.js',
-  ]
-}
+    // Add your project paths here
+  ],
+};
 ```
 
-#### Without TailwindCSS
-If you are not using TailwindCSS, you can directly import the CSS file into your project:
+### Without TailwindCSS
+
+For projects not using TailwindCSS, simply import the CSS file directly:
 
 ```javascript
 import 'markdown-text-editor/dist/markdown-text-editor.css';
 ```
 
-#### Using CDN
-For projects using a CDN, you can include the following links:
+### Using a CDN
 
-**JavaScript:**
-```javascript
+Alternatively, include the following CDN links in your HTML:
+
+#### JavaScript:
+
+```html
 <script src="https://cdn.jsdelivr.net/npm/markdown-text-editor/dist/markdown-text-editor.js"></script>
 ```
 
-**CSS:**
-```javascript
+#### CSS:
+
+```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markdown-text-editor/dist/markdown-text-editor.min.css">
 ```
 
+---
 
-#### Using a bundler e.g. Webpack:
-```javascript
-import MarkdownEditor from 'markdown-text-editor';
+## Configuration Options
 
-const editor = new MarkdownEditor('.editor-container', {
-    placeholder: 'Write your markdown...',
-    toolbar: ['preview', 'bold', 'italic'], // Define the tools you want in the toolbar
-});
-```
+Customize your Markdown editor by passing an `options` object during initialization. Below are some key configuration options:
+
+| Option        | Type     | Default                      | Description                                               |
+|---------------|----------|------------------------------|-----------------------------------------------------------|
+| `placeholder` | `string` | `'Write your markdown...'`   | Sets the placeholder text for the textarea.             |
+| `toolbar`     | `array`  | `['bold', 'italic', 'strikethrough']` | Determines which tools appear in the toolbar and their order. |
 
-This will create a markdown editor with a toolbar at the top and a preview area below the text input.
+---
 
-### Dynamic Toolbar:
+## Toolbar Customization
 
-You can specify which formatting options you want in the toolbar. The plugin supports different tools that can be reordered.
+Tailor the toolbar to suit your needs by choosing which formatting options to include. The MarkdownEditor Plugin supports several tools, including:
+
+- **`bold`**: Enables bold text formatting.
+- **`italic`**: Enables italic text formatting.
+- **`strikethrough`**: Allows text to be struck through.
+- **`preview`**: Toggles the real-time markdown preview.
+
+**Example:**
 
-**For example:**
 ```javascript
 const editor = new MarkdownEditor('.editor-container', {
     placeholder: 'Start writing...',
@@ -100,82 +144,66 @@ const editor = new MarkdownEditor('.editor-container', {
 });
 ```
 
-## Configuration Options
+---
 
-You can customize the Markdown editor by passing an `options` object when initializing it.
+## Example Implementations
 
-| Option      | Type     | Default                    | Description                                         |
-|-------------|----------|----------------------------|-----------------------------------------------------|
-| `placeholder` | `string` | `'Write your markdown...'` | The placeholder text for the textarea.               |
-| `toolbar`   | `array`  | `['bold', 'italic', 'strikethrough']`        | The tools to display in the toolbar and their order. |
+### Full HTML Example
 
-## Toolbar Options
-
-The toolbar can be customized to include the following options (you can add more tools as needed):
-
-- `bold`: Adds a bold button to the toolbar.
-- `italic`: Adds an italic button to the toolbar.
-
-Example:
-
-```javascript
-const editor = new MarkdownEditor('.editor-container', {
-    placeholder: 'Your markdown here...',
-    toolbar: ['preview', 'italic', 'bold'], // Shows italic first, then bold
-});
-```
-
-## Example Usage
-
-### Full Example:
+Below is a complete HTML example demonstrating how to integrate the MarkdownEditor Plugin into your project:
 
 ```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Markdown Editor Example</title>
-    <link rel="stylesheet" href="dist/markdown-editor-plugin.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Markdown Editor Example</title>
+  <link rel="stylesheet" href="dist/markdown-editor-plugin.css">
 </head>
 <body>
-  <textarea class="editor"></textarea>
-
-    <script src="dist/markdown-editor-plugin.js"></script>
-    <script>
-        const editor = new MarkdownEditor('.editor-container', {
-            placeholder: 'Type some markdown...',
-            toolbar: ['preview', 'bold', 'italic'] // Toolbar order: bold first, then italic
-        });
-    </script>
+  <textarea class="editor-container"></textarea>
+
+  <script src="dist/markdown-editor-plugin.js"></script>
+  <script>
+    const editor = new MarkdownEditor('.editor-container', {
+      placeholder: 'Type your markdown...',
+      toolbar: ['preview', 'bold', 'italic']
+    });
+  </script>
 </body>
 </html>
 ```
 
-### Webpack Example:
+### Webpack Integration Example
 
-To use the plugin with Webpack, import the plugin and initialize it as shown below:
+For projects using Webpack, import and initialize the editor as follows:
 
 ```javascript
 import MarkdownEditor from 'markdown-text-editor';
 
 const editor = new MarkdownEditor('.editor-container', {
     placeholder: 'Write markdown...',
-    toolbar: ['preview', 'bold', 'italic'],  // Custom toolbar options
+    toolbar: ['preview', 'bold', 'italic'],
 });
 ```
 
-### Customizing Styles with Tailwind:
+### Customizing Styles with TailwindCSS
+
+Customize the appearance of the editor using Tailwind utility classes. The plugin’s default styling can be easily overridden in your custom Tailwind configuration.
+
+---
+
+## Contribute
 
-You can modify the appearance of the editor and toolbar using Tailwind utility classes. For example:
+Contributions to this **open source project** are highly encouraged! If you have bug fixes, feature enhancements, or new ideas, please consider opening an issue or submitting a pull request. Your help will ensure that this **best, simple, embeddable JavaScript markdown editor plugin** continues to evolve and serve the community with **real-time preview** and **syntax highlighting** capabilities.
 
-- The toolbar and editor area are styled with Tailwind by default.
-- You can override these classes in your custom Tailwind config to suit your design.
+---
 
-## Contribute to the Project
+## License
 
-If you're interested in improving this editor, I welcome contributions! Feel free to open issues or submit pull requests with bug fixes, features, or enhancements. Your contributions will help keep the project active and thriving.
+This project is released under the [MIT License](LICENSE).
 
-Thank you for your support and consideration. Let’s continue to improve Markdown editing together!
+---
 
-## A Product of Nezanuha
+Thank you for choosing the MarkdownEditor Plugin – your reliable, feature-rich solution for seamless markdown editing and content creation with **easy integration**. Happy coding!