tiny-markdown-editor 0.1.8 → 0.1.10
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/README.md +75 -58
- package/dist/tiny-mde.js +7 -1
- package/dist/tiny-mde.min.js +1 -1
- package/dist/tiny-mde.tiny.js +1 -1
- package/globals.d.ts +172 -0
- package/lib/TinyMDE.js +62 -62
- package/lib/TinyMDECommandBar.js +14 -21
- package/lib/grammar.js +9 -16
- package/lib/index.js +3 -20
- package/lib/svg/svg.js +1 -7
- package/lib/tiny.js +2 -13
- package/package.json +6 -3
package/README.md
CHANGED
|
@@ -1,22 +1,26 @@
|
|
|
1
1
|
# tiny-markdown-editor
|
|
2
|
+
|
|
2
3
|
TinyMDE: A tiny, low-dependency<sup>(1)</sup> embeddable HTML/JavaScript Markdown editor.
|
|
3
4
|
|
|
4
|
-
<sup>(1)</sup>: TinyMDE's runtime only depends on `core-js` for polyfills to support older browsers.
|
|
5
|
+
<sup>(1)</sup>: TinyMDE's runtime only depends on `core-js` for polyfills to support older browsers.
|
|
5
6
|
|
|
6
7
|
Visit the [demo page](https://jefago.github.io/tiny-markdown-editor/) to see TinyMDE in action.
|
|
7
8
|
|
|
8
9
|
## Overview
|
|
9
|
-
|
|
10
|
+
|
|
11
|
+
TinyMDE is an in-browser markdown editor that allows editing Markdown files with in-line formatting previews (bold, italic, headings, code etc.) as well as a toolbar with familiar point-and-click or keyboard shortcut interaction.
|
|
10
12
|
|
|
11
13
|
TinyMDE can be used as a drop-in text area replacement.
|
|
12
14
|
|
|
13
|
-
## Motivation
|
|
15
|
+
## Motivation
|
|
16
|
+
|
|
14
17
|
TinyMDE was motivated by wanting to improve on [EasyMDE](https://github.com/Ionaru/easy-markdown-editor) which is extremely flexible but had two shortcomings:
|
|
15
18
|
|
|
16
19
|
- EasyMDE depends on [Code Mirror](https://codemirror.net/) for editing and formatting. CodeMirror is a full fledged and customizable in-browser code editor, and has a price: EasyMDE's JS file is 280kb in size. TinyMDE is less than 70kb (less than a quarter of EasyMDE's size), the "tiny" version without the toolbar even below 60kb!
|
|
17
20
|
- CodeMirror doesn't work well on mobile, at least not for writing prose: mobile phone OS auto-correction functionality, which many people rely on to quickly type on mobile, is not supported by CodeMirror.
|
|
18
21
|
|
|
19
22
|
## Install TinyMDE
|
|
23
|
+
|
|
20
24
|
You can install TinyMDE from NPM (e.g., if you want to use it in a bundled JS application using Webpack or Rollup), use a hosted version, or self-host the JavaScript and CSS files.
|
|
21
25
|
|
|
22
26
|
### Install TinyMDE from NPM
|
|
@@ -43,56 +47,71 @@ Bundle the JavaScript with your favorite bundler like Webpack or Rollup to ensur
|
|
|
43
47
|
You can simply include the JavaScript and CSS files from Unpkg on your website, using the following code:
|
|
44
48
|
|
|
45
49
|
```html
|
|
46
|
-
<script src="https://unpkg.com/tiny-markdown-editor
|
|
47
|
-
<link
|
|
50
|
+
<script src="https://unpkg.com/tiny-markdown-editor/dist/tiny-mde.min.js"></script>
|
|
51
|
+
<link
|
|
52
|
+
rel="stylesheet"
|
|
53
|
+
type="text/css"
|
|
54
|
+
href="https://unpkg.com/tiny-markdown-editor/dist/tiny-mde.min.css"
|
|
55
|
+
/>
|
|
48
56
|
```
|
|
49
57
|
|
|
50
58
|
### Self-host
|
|
59
|
+
|
|
51
60
|
To self-host TinyMDE, follow these steps:
|
|
52
61
|
|
|
53
62
|
- [Download and build TinyMDE](#build-tinymde). Alternatively, download the newest [release](https://github.com/jefago/tiny-markdown-editor/releases) and unpack the archive.
|
|
54
63
|
- Copy the output JS and CSS files `tiny-mde.min.js` and `tiny-mde.min.css` from the `dist` directory to your website's directory.
|
|
55
64
|
- Include these files on your website:
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
65
|
+
```html
|
|
66
|
+
<script src="tiny-mde.min.js"></script>
|
|
67
|
+
<link rel="stylesheet" type="text/css" href="tiny-mde.min.css" />
|
|
68
|
+
```
|
|
60
69
|
|
|
61
70
|
## Creating an editor and toolbar on your page
|
|
71
|
+
|
|
62
72
|
### Simple creation
|
|
73
|
+
|
|
63
74
|
To create a simple editor as child of an HTML `div` element with the ID `editor`, use the following HTML / JS code:
|
|
64
75
|
|
|
65
76
|
```html
|
|
66
77
|
<div id="editor"></div>
|
|
67
78
|
<script type="text/javascript">
|
|
68
|
-
var tinyMDE = new TinyMDE.Editor({element:
|
|
79
|
+
var tinyMDE = new TinyMDE.Editor({ element: "editor" });
|
|
69
80
|
</script>
|
|
70
81
|
```
|
|
71
82
|
|
|
72
83
|
### Command bar creation
|
|
84
|
+
|
|
73
85
|
To create a toolbar (command bar) along with the editor, create another container div (here called `toolbar`), and instantiate editor and toolbar as follows:
|
|
74
86
|
|
|
75
87
|
```html
|
|
76
88
|
<div id="toolbar"></div>
|
|
77
89
|
<div id="editor"></div>
|
|
78
90
|
<script type="text/javascript">
|
|
79
|
-
var tinyMDE = new TinyMDE.Editor({element:
|
|
80
|
-
var commandBar = new TinyMDE.CommandBar({
|
|
91
|
+
var tinyMDE = new TinyMDE.Editor({ element: "editor" });
|
|
92
|
+
var commandBar = new TinyMDE.CommandBar({
|
|
93
|
+
element: "toolbar",
|
|
94
|
+
editor: tinyMDE,
|
|
95
|
+
});
|
|
81
96
|
</script>
|
|
82
97
|
```
|
|
83
98
|
|
|
84
99
|
### Creation from a textarea
|
|
100
|
+
|
|
85
101
|
TinyMDE can be used as a drop-in textarea replacement. This means that when TinyMDE is passed a textarea, the editor will act as if the user is directly editing the textarea: The editor is initialized with the content of the textarea, and changing text in the editor changes the textarea's content. The easiest code to do so is as follows:
|
|
86
102
|
|
|
87
103
|
```html
|
|
88
|
-
<div class="txtcontainer"
|
|
104
|
+
<div class="txtcontainer">
|
|
105
|
+
<textarea id="txt">This is some **Markdown** formatted text</textarea>
|
|
106
|
+
</div>
|
|
89
107
|
<script type="text/javascript">
|
|
90
|
-
var tinyMDE = new TinyMDE.Editor({textarea:
|
|
108
|
+
var tinyMDE = new TinyMDE.Editor({ textarea: "txt" });
|
|
91
109
|
</script>
|
|
92
110
|
```
|
|
93
111
|
|
|
94
112
|
Please note:
|
|
95
|
-
|
|
113
|
+
|
|
114
|
+
- The editor doesn't quite _replace_ the textarea. The textarea just gets hidden, and the editor content is mirrored in the textarea. If you programmatically change the contents of the textarea, the editor would get out of sync.
|
|
96
115
|
- The editor element will be inserted in the DOM as a sibling of the textarea element. In order to size and format the editor element properly, apply styles to the parent element of the textarea (in the example above, `div.txtcontainer`).
|
|
97
116
|
|
|
98
117
|
## Configure TinyMDE
|
|
@@ -101,11 +120,11 @@ Please note:
|
|
|
101
120
|
|
|
102
121
|
`TinyMDE.Editor` takes as argument a key-value object with the following possible attributes:
|
|
103
122
|
|
|
104
|
-
| Attribute
|
|
105
|
-
|
|
|
106
|
-
| `element`
|
|
107
|
-
| `content`
|
|
108
|
-
| `textarea`
|
|
123
|
+
| Attribute | Description |
|
|
124
|
+
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
125
|
+
| `element` | The DOM element under which the TinyMDE DOM element will be created. The `element` attribute can be given as either an ID or the DOM element itself (i.e., the result of a call to `document.getElementById()`). |
|
|
126
|
+
| `content` | The initial content of the editor, given as a string. May contain newlines. |
|
|
127
|
+
| `textarea` | The textarea that will be linked to the editor. The textarea can be given as an ID or as the DOM element itself (i.e., the result of a call to `document.getElementById()`). The content of the editor will be reflected in the value of the textarea at any given point in time. If `textarea` is given and `content` isn't, then the editor content will be initialized to the textarea's value. If `textarea` is given and `element` isn't, then the editor element will be created as the next sibling of the textarea element. |
|
|
109
128
|
|
|
110
129
|
If neither `element` not `textarea` are given, the editor element will be created as the last child element of the `body` element (probably not what you want in most cases, so you probably want to pass at least one of `element` or `textarea`).
|
|
111
130
|
|
|
@@ -115,12 +134,11 @@ If neither `content` nor `textarea` are given, the content of the editor is init
|
|
|
115
134
|
|
|
116
135
|
`TinyMDE.Editor` takes as argument a key-value object with the following possible attributes:
|
|
117
136
|
|
|
118
|
-
| Attribute
|
|
119
|
-
|
|
|
120
|
-
| `element`
|
|
121
|
-
| `editor`
|
|
122
|
-
| `commands`
|
|
123
|
-
|
|
137
|
+
| Attribute | Description |
|
|
138
|
+
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
139
|
+
| `element` | The DOM element under which the command bar DOM element will be created. The `element` attribute can be given as either an ID or the DOM element itself (i.e., the result of a call to `document.getElementById()`). If `element` is not given, the commandbar will be created as the last child of the `body` element (probably not what you want in most cases). |
|
|
140
|
+
| `editor` | The editor object that this command bar will be linked to (i.e., the return value of `new TinyMDE.Editor()`). |
|
|
141
|
+
| `commands` | The list of commands to show. See [below](#customizing-commands). |
|
|
124
142
|
|
|
125
143
|
### Customizing commands
|
|
126
144
|
|
|
@@ -132,13 +150,13 @@ In order to customize the commands shown on the command bar, pass an array to th
|
|
|
132
150
|
|
|
133
151
|
If an entry of the `commands` array is an object, you can either customize one of the existing commands (e.g., use a different icon or keyboard shortcut for the `bold` command), or use a completely custom command. An object entry of the `commands` array can contain the following attributes:
|
|
134
152
|
|
|
135
|
-
| Attribute
|
|
136
|
-
|
|
|
137
|
-
| `name`
|
|
138
|
-
| `title`
|
|
139
|
-
| `innerHTML`
|
|
140
|
-
| `action`
|
|
141
|
-
| `hotkey`
|
|
153
|
+
| Attribute | Description |
|
|
154
|
+
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
155
|
+
| `name` _mandatory_ | A string that is unique within the scope of this CommandBar instance that identifies the command. If one of the default commands (`bold`, `italic`, `strikethrough`, `code`, `h1`, `h2`, `ul`, `ol`, `blockquote`, `hr`, `insertLink`, or `insertImage`) is given as the `name` attribute, then the command is initialized with all the default values of the default commands and they can be overridden by specifying additional attributes. In other words, `{ name: 'bold' }` as a command array entry behaves the same as `'bold'`. If the `name` attribute is set to a string other than one of the default command, a custom command can be defined. |
|
|
156
|
+
| `title` | The title of the command, shown as a tooltip on hover. Defaults to be the same as `name`. |
|
|
157
|
+
| `innerHTML` | The HTML content of the command button. In the default styling, the content will have a space of 18x18 CSS pixels. |
|
|
158
|
+
| `action` | For custom commands, you need to set the `action` attribute to a function taking the Editor object as a parameter, for example: `action: editor => { editor.setContent('Test')}`. |
|
|
159
|
+
| `hotkey` | A keyboard shortcut for the command. The keyboard shortcut needs to be a string containing a key (e.g., 'A' or '1'), preceded by one or more modifier keys (`Ctrl`, `Shift`, `Alt`, `Cmd`, `Win`, `Option`), each separated with `-`. Examples: `Alt-I`, `Ctrl-Shift-3`. There are two convenience modifier keys that are recognized for easy cross-platform development: `Mod` is set to `Cmd` on macOS / iOS / iPadOS and `Ctrl` elsewhere (e.g., `Mod-B` as a shortcut for the `bold` command ends up as either `Ctrl` + `B` or `⌘` + `B`); `Mod2` is set to `Option` on macOS / iOS / iPadOS and `Alt` elsewhere. |
|
|
142
160
|
|
|
143
161
|
The default array of commands is as follows: `['bold', 'italic', 'strikethrough', '|', 'code', '|', 'h1', 'h2', '|', 'ul', 'ol', '|', 'blockquote', 'hr', '|', 'insertLink', 'insertImage']`.
|
|
144
162
|
|
|
@@ -146,15 +164,15 @@ The default array of commands is as follows: `['bold', 'italic', 'strikethrough'
|
|
|
146
164
|
|
|
147
165
|
Here are some methods of the Editor object that might be useful in general interaction or custom CommandBar commands:
|
|
148
166
|
|
|
149
|
-
| Method
|
|
150
|
-
|
|
|
151
|
-
| `getContent()`
|
|
152
|
-
| `setContent(content)`
|
|
153
|
-
| `getSelection(
|
|
154
|
-
| `setSelection(focus, anchor)`
|
|
155
|
-
| `paste(text, anchor, focus)`
|
|
156
|
-
| `wrapSelection(pre, post, anchor, focus)` | Wraps the current selection (if `anchor` and `focus` are `null` or omitted) or a specific selection (if `anchor` and `focus` are given) in the strings `pre` and `post`. For example, `wrapSelection('[', '](https://www.github.com)')` will wrap the selection with a link to GitHub.
|
|
157
|
-
| `addEventListener(type, listener`)
|
|
167
|
+
| Method | Description |
|
|
168
|
+
| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
169
|
+
| `getContent()` | Returns the content of the editor as a string. |
|
|
170
|
+
| `setContent(content)` | Sets the content of the editor to the string `content`. |
|
|
171
|
+
| `getSelection(getAnchor)` | Gets the current selection / cursor position inside the editor. The parameter `getAnchor` (defaults to false) determines if the anchor (starting point) of the selection should be returned—if `getAnchor` is false (or omitted), the focus (end point) is returned, otherwise the starting point. If the selection is not inside the editor, `null` is returned. The method returns an object with the attributes `row` and `col` which contain the zero-based row (line) and column number of the selection position. |
|
|
172
|
+
| `setSelection(focus, anchor)` | Sets the selection within the editor. The parameters `focus` and `offset` are both of the format returned by `getSelection()` (containing attributes `row` and `col`). If `anchor` is `null` or omitted, a single-point selection (cursor position) will be set. |
|
|
173
|
+
| `paste(text, anchor, focus)` | Pastes / inserts text over either the current selection (if `anchor` and `focus` are null or omitted) or a specific range (if `anchor` and `focus` are passed in in the format as returned by `getSelection()`). |
|
|
174
|
+
| `wrapSelection(pre, post, anchor, focus)` | Wraps the current selection (if `anchor` and `focus` are `null` or omitted) or a specific selection (if `anchor` and `focus` are given) in the strings `pre` and `post`. For example, `wrapSelection('[', '](https://www.github.com)')` will wrap the selection with a link to GitHub. |
|
|
175
|
+
| `addEventListener(type, listener`) | Adds an [event listener](#event-listeners) to the editor. `type` is a string denoting the type (`change` or `selection`), and `listener` is a function which takes one parameter, the event. |
|
|
158
176
|
|
|
159
177
|
### Event listeners
|
|
160
178
|
|
|
@@ -164,20 +182,20 @@ There are two event listener types that can be registered on the editor: `change
|
|
|
164
182
|
|
|
165
183
|
A `change` event is fired any time the content of the editor changes. The event object passed to the listener function contains the following properties:
|
|
166
184
|
|
|
167
|
-
| Attribute
|
|
168
|
-
|
|
|
169
|
-
| `content`
|
|
170
|
-
| `linesDirty`
|
|
185
|
+
| Attribute | Description |
|
|
186
|
+
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
187
|
+
| `content` | The current content as a string. |
|
|
188
|
+
| `linesDirty` | An array of booleans, which for each line contains `true` if the line might have changed in terms of either its content or its block type since the last change, and `false` if the line is guaranteed to not have changed. |
|
|
171
189
|
|
|
172
190
|
#### `selection` event
|
|
173
191
|
|
|
174
192
|
A `selection` event is fired any time the selection within the editor changes. The event object passed to the listener function contains the following properties:
|
|
175
193
|
|
|
176
|
-
| Attribute
|
|
177
|
-
|
|
|
178
|
-
| `focus`
|
|
179
|
-
| `anchor`
|
|
180
|
-
| `commandState`
|
|
194
|
+
| Attribute | Description |
|
|
195
|
+
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
196
|
+
| `focus` | The focus (end point) of the current selection, in the format as returned by `getSelection()` (two attributes `row` and `col` denoting the zero based row and column). |
|
|
197
|
+
| `anchor` | The anchor (start point) of the current selection, in the format as returned by `getSelection()` (two attributes `row` and `col` denoting the zero based row and column). |
|
|
198
|
+
| `commandState` | An array which contains an attribute for every default command name `bold`, `italic`, `strikethrough`, `code`, `h1`, `h2`, `ul`, `ol`, `blockquote`, `hr`, `insertLink`, and `insertImage`). The value of each attribute is one of `true`, `false`, or `null`. The value is `true` if the command is currently active (e.g., if the cursor is within a bold stretch of text, then the state for `bold` will be `true`). The value is `false` if the command is currently inactive but could be activated (e.g., if the selection encompasses a stretch of text that could be bolded, then the state for `bold` will be `false`). The value is `null` if the command is currently not applicable (e.g., if the cursor is within a code block where inline formatting is not available, the state will be `null` for `bold`). |
|
|
181
199
|
|
|
182
200
|
### Styling TinyMDE
|
|
183
201
|
|
|
@@ -204,13 +222,13 @@ The main toolbar element has the class `TMCommandBar`. Buttons have the class `T
|
|
|
204
222
|
Building TinyMDE is pretty straight forward:
|
|
205
223
|
|
|
206
224
|
1. Clone this repository:
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
225
|
+
```bash
|
|
226
|
+
git clone git@github.com:jefago/tiny-markdown-editor.git
|
|
227
|
+
```
|
|
210
228
|
2. In the repository directory, run the build script:
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
229
|
+
```bash
|
|
230
|
+
npm run build
|
|
231
|
+
```
|
|
214
232
|
|
|
215
233
|
The build output is in the `dist` directory. You will find the following files there:
|
|
216
234
|
|
|
@@ -218,4 +236,3 @@ The build output is in the `dist` directory. You will find the following files t
|
|
|
218
236
|
- `tiny-mde.js`: Debug version of the editor. The JS file is not minified and contains a sourcemap. It is not recommended to use this in production settings, since the file is large.
|
|
219
237
|
- `tiny-mde.min.js`: Minified JS file for most use cases. Simply copy this to your project to use it.
|
|
220
238
|
- `tiny-mde.tiny.js`: Minified and stripped-down JS file. Contains only the editor itself, not the toolbar.
|
|
221
|
-
|