@oix1987/yjd 2.1.0 → 2.1.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/README.md +61 -4
- 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 +70 -3
- package/index.js +53 -11
- package/lib/core/editor.js +231 -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
|
@@ -151,6 +151,37 @@ new yjd('#editor', {
|
|
|
151
151
|
|
|
152
152
|
Omit `upload` to keep the base64 fallback.
|
|
153
153
|
|
|
154
|
+
### File attachments
|
|
155
|
+
|
|
156
|
+
Like `image`, but for any file. Uploads via `file.upload` and inserts a **file chip**
|
|
157
|
+
(icon + name + size) that serializes to a Markdown link `[name (size)](url)`. Works
|
|
158
|
+
from the toolbar (`file` button), paste, and drag-drop.
|
|
159
|
+
|
|
160
|
+
```js
|
|
161
|
+
new yjd('#editor', {
|
|
162
|
+
toolbar1: [{ group: 'insert', items: ['image', 'file'] }], // add the paperclip
|
|
163
|
+
file: {
|
|
164
|
+
upload: async (f) => ({ url: (await api.upload(f)).url, name: f.name }),
|
|
165
|
+
accept: '.pdf,.zip,.docx',
|
|
166
|
+
maxSize: 25 * 1024 * 1024,
|
|
167
|
+
},
|
|
168
|
+
});
|
|
169
|
+
// events: editor.on('file:upload' | 'file:uploaded' | 'file:error', cb)
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
### Enter-to-submit (comment boxes)
|
|
173
|
+
|
|
174
|
+
```js
|
|
175
|
+
new yjd('#comment', {
|
|
176
|
+
submit: {
|
|
177
|
+
onEnter: (html, editor) => post(html), // Enter sends; Shift+Enter = newline
|
|
178
|
+
},
|
|
179
|
+
});
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
When a mention/slash/emoji popup is open, Enter is left for the popup (it picks the
|
|
183
|
+
item, doesn't submit). Check it yourself with `editor.isMenuOpen()`.
|
|
184
|
+
|
|
154
185
|
### @mention / #task
|
|
155
186
|
|
|
156
187
|
```js
|
|
@@ -167,14 +198,29 @@ editor.on('mention:select', (item) => { /* … */ });
|
|
|
167
198
|
|
|
168
199
|
Inserts a token that serializes with its id:
|
|
169
200
|
`<span class="mention" data-id="u_123">@Ann</span>` → Markdown `@[Ann](u_123)`.
|
|
201
|
+
If a `source` item has no `avatar_url`, pass `icon` (inline SVG) for special entries
|
|
202
|
+
like “@all”. Menus are portaled to `<body>` but inherit the editor's `--rte-*` theme.
|
|
203
|
+
|
|
204
|
+
### Toolbar presets
|
|
170
205
|
|
|
171
|
-
|
|
206
|
+
```js
|
|
207
|
+
toolbar: 'full' // the default set
|
|
208
|
+
toolbar: 'compact' // bold/italic/underline · link · list · image · emoji
|
|
209
|
+
toolbar: { exclude: ['table','video','color'] } // defaults minus these
|
|
210
|
+
toolbar1: [{ group, items: [...] }] // or full custom groups
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
### fromTextarea (two-way + controller)
|
|
172
214
|
|
|
173
|
-
Enhance an existing form field
|
|
174
|
-
`input`/`change`
|
|
215
|
+
Enhance an existing form field. Binding is **two-way**: editor edits update
|
|
216
|
+
`textarea.value` (firing native `input`/`change`), and `textarea.value = …` from app
|
|
217
|
+
code updates the editor. The returned editor carries a controller.
|
|
175
218
|
|
|
176
219
|
```js
|
|
177
|
-
yjd.fromTextarea('#body', { format: 'markdown' }); // or 'html'
|
|
220
|
+
const ed = yjd.fromTextarea('#body', { format: 'markdown' }); // or 'html'
|
|
221
|
+
ed.setValue(md); // load content
|
|
222
|
+
ed.getValue(); // current content (per format)
|
|
223
|
+
ed.destroy(); // remove editor, restore textarea + last value
|
|
178
224
|
```
|
|
179
225
|
|
|
180
226
|
### renderStatic
|
|
@@ -187,6 +233,17 @@ import { renderStatic } from '@oix1987/yjd';
|
|
|
187
233
|
renderStatic(post.body_html, document.querySelector('#post'));
|
|
188
234
|
```
|
|
189
235
|
|
|
236
|
+
### Events & API notes
|
|
237
|
+
|
|
238
|
+
- **Events** (via `editor.on(name, cb)` / `editor.off(name, cb)`): `change`,
|
|
239
|
+
`image:upload` · `image:uploaded` · `image:error`, `file:upload` · `file:uploaded`
|
|
240
|
+
· `file:error`, `mention:select`, `content:overflow` (when `maxContentSize` exceeded).
|
|
241
|
+
- `editor.editor` is the public contentEditable element (attach your own listeners).
|
|
242
|
+
- **Markdown dialect** — GFM-ish: headings `#`–`######`, `**bold**`, `*italic*`,
|
|
243
|
+
`~~strike~~`, `` `code` ``, fenced ``` ``` ```, `>` quotes, `-`/`1.` lists,
|
|
244
|
+
pipe tables, `` images, `[text](url)` links, mentions `@[Name](id)` /
|
|
245
|
+
`#[Name](id)`, file chips `[name (size)](url)`.
|
|
246
|
+
|
|
190
247
|
## Styling
|
|
191
248
|
|
|
192
249
|
Theme via CSS custom properties:
|