@oix1987/yjd 2.1.0 → 2.1.2
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 +92 -7
- package/dist/core.esm.js +1 -1
- package/dist/core.esm.js.map +1 -1
- package/dist/rich-editor.esm.js +1 -1
- package/dist/rich-editor.esm.js.map +1 -1
- package/dist/rich-editor.min.js +1 -1
- package/dist/rich-editor.min.js.map +1 -1
- package/index.d.ts +75 -5
- package/index.js +3 -52
- package/lib/core/editor.js +309 -11
- package/lib/modules/mention.js +33 -5
- package/lib/modules/slash-menu.js +6 -4
- package/lib/modules/toolbar.js +28 -0
- package/lib/serialize.js +7 -0
- package/lib/styles.css +81 -6
- package/lib/styles.css.js +1 -1
- package/lib/styles.min.css +1 -1
- package/lib/ui/icons.js +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -27,12 +27,16 @@ Every preset is built from the same `/core` entry — pick a profile, tree-shake
|
|
|
27
27
|
| Preset | Includes | Size |
|
|
28
28
|
|---|---|---|
|
|
29
29
|
| Minimal | bold · italic · underline · link | **~16 KB** |
|
|
30
|
-
|
|
|
30
|
+
| Comment box | bold · italic · link · list · image · mention + `fromTextarea` | **~26 KB** |
|
|
31
31
|
| Basic | + strike · headings · lists · align | **~25 KB** |
|
|
32
32
|
| Standard | + colour · image · table · find · code view | **~38 KB** |
|
|
33
|
-
| Full | everything
|
|
33
|
+
| Full (all-in-one) | everything, CSS inlined | **~64 KB** |
|
|
34
34
|
|
|
35
|
-
>
|
|
35
|
+
> All figures are measured gzip. Tree-shake from the `/core` entry to land near the
|
|
36
|
+
> top of the table; the all-in-one default (`import yjd from '@oix1987/yjd'`) is the
|
|
37
|
+
> ~64 KB row because it registers every format/module and inlines the CSS. For
|
|
38
|
+
> comparison, Quill 2 is ~60 KB. The standalone stylesheet is ~10 KB gzip — link it
|
|
39
|
+
> once (and skip `StylesLoader`) to keep it out of the JS.
|
|
36
40
|
|
|
37
41
|
## Install
|
|
38
42
|
|
|
@@ -93,6 +97,30 @@ new Editor('#editor', {
|
|
|
93
97
|
<link rel="stylesheet" href="@oix1987/yjd/lib/styles.min.css">
|
|
94
98
|
```
|
|
95
99
|
|
|
100
|
+
### Lightweight comment box (~26 KB)
|
|
101
|
+
|
|
102
|
+
`Editor.fromTextarea`, `renderStatic` and the Markdown/JSON helpers all live in
|
|
103
|
+
`/core`, so a comment box pulls only the formats/modules you register — not the
|
|
104
|
+
whole editor. Link the stylesheet (don't import `StylesLoader`) to keep CSS out
|
|
105
|
+
of the JS.
|
|
106
|
+
|
|
107
|
+
```js
|
|
108
|
+
import { Editor, registry, Bold, Italic, Link, List, Image, Mention, Toolbar, History }
|
|
109
|
+
from '@oix1987/yjd/core';
|
|
110
|
+
|
|
111
|
+
[['formats/bold', Bold], ['formats/italic', Italic], ['formats/link', Link],
|
|
112
|
+
['formats/list', List], ['formats/image', Image],
|
|
113
|
+
['modules/mention', Mention], ['modules/toolbar', Toolbar], ['modules/history', History]]
|
|
114
|
+
.forEach(([k, v]) => registry.register(k, v));
|
|
115
|
+
|
|
116
|
+
const ed = Editor.fromTextarea('#comment', {
|
|
117
|
+
format: 'markdown',
|
|
118
|
+
toolbar1: [{ group: 'insert', items: ['bold', 'italic', 'link', 'list', 'image', 'emoji'] }],
|
|
119
|
+
mention: { source: (q) => fetchUsers(q) },
|
|
120
|
+
submit: { onEnter: (html) => post(html) },
|
|
121
|
+
});
|
|
122
|
+
```
|
|
123
|
+
|
|
96
124
|
## Options
|
|
97
125
|
|
|
98
126
|
| Option | Type | Description |
|
|
@@ -151,6 +179,37 @@ new yjd('#editor', {
|
|
|
151
179
|
|
|
152
180
|
Omit `upload` to keep the base64 fallback.
|
|
153
181
|
|
|
182
|
+
### File attachments
|
|
183
|
+
|
|
184
|
+
Like `image`, but for any file. Uploads via `file.upload` and inserts a **file chip**
|
|
185
|
+
(icon + name + size) that serializes to a Markdown link `[name (size)](url)`. Works
|
|
186
|
+
from the toolbar (`file` button), paste, and drag-drop.
|
|
187
|
+
|
|
188
|
+
```js
|
|
189
|
+
new yjd('#editor', {
|
|
190
|
+
toolbar1: [{ group: 'insert', items: ['image', 'file'] }], // add the paperclip
|
|
191
|
+
file: {
|
|
192
|
+
upload: async (f) => ({ url: (await api.upload(f)).url, name: f.name }),
|
|
193
|
+
accept: '.pdf,.zip,.docx',
|
|
194
|
+
maxSize: 25 * 1024 * 1024,
|
|
195
|
+
},
|
|
196
|
+
});
|
|
197
|
+
// events: editor.on('file:upload' | 'file:uploaded' | 'file:error', cb)
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
### Enter-to-submit (comment boxes)
|
|
201
|
+
|
|
202
|
+
```js
|
|
203
|
+
new yjd('#comment', {
|
|
204
|
+
submit: {
|
|
205
|
+
onEnter: (html, editor) => post(html), // Enter sends; Shift+Enter = newline
|
|
206
|
+
},
|
|
207
|
+
});
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
When a mention/slash/emoji popup is open, Enter is left for the popup (it picks the
|
|
211
|
+
item, doesn't submit). Check it yourself with `editor.isMenuOpen()`.
|
|
212
|
+
|
|
154
213
|
### @mention / #task
|
|
155
214
|
|
|
156
215
|
```js
|
|
@@ -167,14 +226,29 @@ editor.on('mention:select', (item) => { /* … */ });
|
|
|
167
226
|
|
|
168
227
|
Inserts a token that serializes with its id:
|
|
169
228
|
`<span class="mention" data-id="u_123">@Ann</span>` → Markdown `@[Ann](u_123)`.
|
|
229
|
+
If a `source` item has no `avatar_url`, pass `icon` (inline SVG) for special entries
|
|
230
|
+
like “@all”. Menus are portaled to `<body>` but inherit the editor's `--rte-*` theme.
|
|
231
|
+
|
|
232
|
+
### Toolbar presets
|
|
170
233
|
|
|
171
|
-
|
|
234
|
+
```js
|
|
235
|
+
toolbar: 'full' // the default set
|
|
236
|
+
toolbar: 'compact' // bold/italic/underline · link · list · image · emoji
|
|
237
|
+
toolbar: { exclude: ['table','video','color'] } // defaults minus these
|
|
238
|
+
toolbar1: [{ group, items: [...] }] // or full custom groups
|
|
239
|
+
```
|
|
172
240
|
|
|
173
|
-
|
|
174
|
-
|
|
241
|
+
### fromTextarea (two-way + controller)
|
|
242
|
+
|
|
243
|
+
Enhance an existing form field. Binding is **two-way**: editor edits update
|
|
244
|
+
`textarea.value` (firing native `input`/`change`), and `textarea.value = …` from app
|
|
245
|
+
code updates the editor. The returned editor carries a controller.
|
|
175
246
|
|
|
176
247
|
```js
|
|
177
|
-
yjd.fromTextarea('#body', { format: 'markdown' }); // or 'html'
|
|
248
|
+
const ed = yjd.fromTextarea('#body', { format: 'markdown' }); // or 'html'
|
|
249
|
+
ed.setValue(md); // load content
|
|
250
|
+
ed.getValue(); // current content (per format)
|
|
251
|
+
ed.destroy(); // remove editor, restore textarea + last value
|
|
178
252
|
```
|
|
179
253
|
|
|
180
254
|
### renderStatic
|
|
@@ -187,6 +261,17 @@ import { renderStatic } from '@oix1987/yjd';
|
|
|
187
261
|
renderStatic(post.body_html, document.querySelector('#post'));
|
|
188
262
|
```
|
|
189
263
|
|
|
264
|
+
### Events & API notes
|
|
265
|
+
|
|
266
|
+
- **Events** (via `editor.on(name, cb)` / `editor.off(name, cb)`): `change`,
|
|
267
|
+
`image:upload` · `image:uploaded` · `image:error`, `file:upload` · `file:uploaded`
|
|
268
|
+
· `file:error`, `mention:select`, `content:overflow` (when `maxContentSize` exceeded).
|
|
269
|
+
- `editor.editor` is the public contentEditable element (attach your own listeners).
|
|
270
|
+
- **Markdown dialect** — GFM-ish: headings `#`–`######`, `**bold**`, `*italic*`,
|
|
271
|
+
`~~strike~~`, `` `code` ``, fenced ``` ``` ```, `>` quotes, `-`/`1.` lists,
|
|
272
|
+
pipe tables, `` images, `[text](url)` links, mentions `@[Name](id)` /
|
|
273
|
+
`#[Name](id)`, file chips `[name (size)](url)`.
|
|
274
|
+
|
|
190
275
|
## Styling
|
|
191
276
|
|
|
192
277
|
Theme via CSS custom properties:
|