markdown-text-editor 0.0.1-beta.1 → 0.0.3-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +18 -4
- package/README.md +13 -35
- package/dist/index.js +1 -5505
- package/dist/index.js.map +1 -1
- package/dist/markdown-text-editor.js +2 -0
- package/dist/markdown-text-editor.js.map +1 -0
- package/package.json +11 -6
- package/dist/main.js +0 -2
- package/dist/main.js.map +0 -1
- package/dist/markdownEditor.js +0 -5490
- package/dist/markdownEditor.js.map +0 -1
package/LICENSE
CHANGED
|
@@ -1,7 +1,21 @@
|
|
|
1
|
-
|
|
1
|
+
MIT License
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Copyright (c) 2025 nezanuha
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
6
11
|
|
|
7
|
-
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
#
|
|
1
|
+
# markdownEditor Plugin Documentation
|
|
2
2
|
|
|
3
|
-
This document explains how to use the **
|
|
3
|
+
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.
|
|
4
4
|
|
|
5
5
|
## Table of Contents
|
|
6
6
|
- [Installation](#installation)
|
|
@@ -17,17 +17,17 @@ To install the plugin in your project, you can include the plugin JavaScript fil
|
|
|
17
17
|
|
|
18
18
|
1. **Install via NPM** (for bundling tools like Webpack):
|
|
19
19
|
```
|
|
20
|
-
npm install
|
|
20
|
+
npm install markdown-text-editor
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## Usage
|
|
24
24
|
|
|
25
25
|
|
|
26
|
-
Import the `markdownEditor` class from
|
|
26
|
+
Import the `markdownEditor` class from markdown-text-editor:
|
|
27
27
|
|
|
28
28
|
|
|
29
29
|
```
|
|
30
|
-
import { markdownEditor } from "
|
|
30
|
+
import { markdownEditor } from "markdown-text-editor";
|
|
31
31
|
```
|
|
32
32
|
|
|
33
33
|
### Basic Example:
|
|
@@ -41,9 +41,9 @@ To initialize the Markdown editor, you need an empty container (like a `div`) in
|
|
|
41
41
|
|
|
42
42
|
#### JavaScript:
|
|
43
43
|
```javascript
|
|
44
|
-
import {
|
|
44
|
+
import { markdownEditor } from 'markdown-text-editor';
|
|
45
45
|
|
|
46
|
-
const editor = new
|
|
46
|
+
const editor = new markdownEditor('editor-container', {
|
|
47
47
|
placeholder: 'Write your markdown...',
|
|
48
48
|
toolbar: ['bold', 'italic'], // Define the tools you want in the toolbar
|
|
49
49
|
});
|
|
@@ -57,7 +57,7 @@ You can specify which formatting options you want in the toolbar. The plugin sup
|
|
|
57
57
|
|
|
58
58
|
For example:
|
|
59
59
|
```javascript
|
|
60
|
-
const editor = new
|
|
60
|
+
const editor = new markdownEditor('editor-container', {
|
|
61
61
|
placeholder: 'Start writing...',
|
|
62
62
|
toolbar: ['bold', 'italic', 'strikethrough', 'preview'],
|
|
63
63
|
});
|
|
@@ -82,7 +82,7 @@ The toolbar can be customized to include the following options (you can add more
|
|
|
82
82
|
Example:
|
|
83
83
|
|
|
84
84
|
```javascript
|
|
85
|
-
const editor = new
|
|
85
|
+
const editor = new markdownEditor('editor-container', {
|
|
86
86
|
placeholder: 'Your markdown here...',
|
|
87
87
|
toolbar: ['italic', 'bold'], // Shows italic first, then bold
|
|
88
88
|
});
|
|
@@ -106,7 +106,7 @@ const editor = new MarkdownEditor('editor-container', {
|
|
|
106
106
|
|
|
107
107
|
<script src="dist/markdown-editor-plugin.js"></script>
|
|
108
108
|
<script>
|
|
109
|
-
const editor = new
|
|
109
|
+
const editor = new markdownEditor('editor-container', {
|
|
110
110
|
placeholder: 'Type some markdown...',
|
|
111
111
|
toolbar: ['bold', 'italic'] // Toolbar order: bold first, then italic
|
|
112
112
|
});
|
|
@@ -120,9 +120,9 @@ const editor = new MarkdownEditor('editor-container', {
|
|
|
120
120
|
To use the plugin with Webpack, import the plugin and initialize it as shown below:
|
|
121
121
|
|
|
122
122
|
```javascript
|
|
123
|
-
import { markdownEditor } from '
|
|
123
|
+
import { markdownEditor } from 'markdown-editor';
|
|
124
124
|
|
|
125
|
-
const editor = new
|
|
125
|
+
const editor = new markdownEditor('editor-container', {
|
|
126
126
|
placeholder: 'Write markdown...',
|
|
127
127
|
toolbar: ['bold', 'italic'], // Custom toolbar options
|
|
128
128
|
});
|
|
@@ -135,28 +135,6 @@ You can modify the appearance of the editor and toolbar using Tailwind utility c
|
|
|
135
135
|
- The toolbar and editor area are styled with Tailwind by default.
|
|
136
136
|
- You can override these classes in your custom Tailwind config to suit your design.
|
|
137
137
|
|
|
138
|
-
## Folder Structure
|
|
139
|
-
|
|
140
|
-
Here’s a suggested folder structure for your project:
|
|
141
|
-
|
|
142
|
-
```
|
|
143
|
-
/src
|
|
144
|
-
/components
|
|
145
|
-
/editor
|
|
146
|
-
Toolbar.js - Handles toolbar creation
|
|
147
|
-
MarkdownEditor.js - Main editor logic
|
|
148
|
-
/tools
|
|
149
|
-
BoldTool.js - Logic for Bold tool
|
|
150
|
-
ItalicTool.js - Logic for Italic tool
|
|
151
|
-
/styles
|
|
152
|
-
main.css - Includes Tailwind CSS
|
|
153
|
-
main.js - Entry point, initializes the editor
|
|
154
|
-
/webpack.config.js - Webpack configuration
|
|
155
|
-
/dist
|
|
156
|
-
markdown-editor-plugin.js - Generated JS file (bundled)
|
|
157
|
-
markdown-editor-plugin.css - Generated CSS file
|
|
158
|
-
```
|
|
159
|
-
|
|
160
138
|
## Conclusion
|
|
161
139
|
|
|
162
|
-
This **
|
|
140
|
+
This **markdownEditor Plugin** allows easy setup of markdown editing with dynamic toolbar controls, making it flexible and reusable for various projects.
|