@richhtmleditor/mentions 1.1.1 → 1.1.3
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 +109 -109
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,109 +1,109 @@
|
|
|
1
|
-
# @richhtmleditor/mentions
|
|
2
|
-
|
|
3
|
-
@ mention autocomplete plugin for Rich HTML Editor. Type `@` to search and mention users, documents, or tags with an inline dropdown. Built on [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core).
|
|
4
|
-
|
|
5
|
-
**Current release: 1.1.
|
|
6
|
-
|
|
7
|
-
**Repository:** [github.com/rajkishorsahu89/richhtmleditor](https://github.com/rajkishorsahu89/richhtmleditor)
|
|
8
|
-
|
|
9
|
-
**Demo:** [richhtmleditor.vercel.app](https://richhtmleditor.vercel.app/) — [demo](https://richhtmleditor.vercel.app/demo) · [guide](https://richhtmleditor.vercel.app/guide) · [API](https://richhtmleditor.vercel.app/api)
|
|
10
|
-
|
|
11
|
-
### What's in 1.1.
|
|
12
|
-
|
|
13
|
-
- **`createMentionsPlugin`** — registers the @ trigger and autocomplete dropdown
|
|
14
|
-
- **Inline autocomplete** — type `@` followed by a query to search mentions
|
|
15
|
-
- **Async data source** — wire your user/document/tag API via `onSearch`
|
|
16
|
-
- **Keyboard navigation** — arrow keys to navigate, Enter to confirm, Escape to dismiss
|
|
17
|
-
- **Styled mention chips** — inserted mentions render as styled `<span>` elements with `data-mention-id`
|
|
18
|
-
|
|
19
|
-
> Community feature — no enterprise licence required.
|
|
20
|
-
|
|
21
|
-
**Keywords:** `richhtmleditor` `mentions` `autocomplete` `users` `tags` `wysiwyg`
|
|
22
|
-
|
|
23
|
-
## Install
|
|
24
|
-
|
|
25
|
-
```bash
|
|
26
|
-
npm install @richhtmleditor/mentions
|
|
27
|
-
# Requires @richhtmleditor/core (via framework wrapper or direct install).
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
## Usage
|
|
31
|
-
|
|
32
|
-
```ts
|
|
33
|
-
import { createEditor } from "@richhtmleditor/core";
|
|
34
|
-
import { createMentionsPlugin } from "@richhtmleditor/mentions";
|
|
35
|
-
|
|
36
|
-
const editor = createEditor({
|
|
37
|
-
element: host,
|
|
38
|
-
toolbar: { preset: "full" },
|
|
39
|
-
plugins: [
|
|
40
|
-
createMentionsPlugin({
|
|
41
|
-
onSearch: async (query) => {
|
|
42
|
-
const res = await fetch(`/api/users?q=${query}`);
|
|
43
|
-
return res.json(); // [{ id, label, avatar? }]
|
|
44
|
-
}
|
|
45
|
-
})
|
|
46
|
-
]
|
|
47
|
-
});
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### Angular
|
|
51
|
-
|
|
52
|
-
```ts
|
|
53
|
-
import { createMentionsPlugin } from "@richhtmleditor/mentions";
|
|
54
|
-
|
|
55
|
-
plugins = [
|
|
56
|
-
createMentionsPlugin({
|
|
57
|
-
onSearch: async (query) => fetchUsers(query)
|
|
58
|
-
})
|
|
59
|
-
];
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
```html
|
|
63
|
-
<richhtmleditor [plugins]="plugins" [toolbar]="{ preset: 'full' }" />
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
### Static mentions list
|
|
67
|
-
|
|
68
|
-
```ts
|
|
69
|
-
createMentionsPlugin({
|
|
70
|
-
items: [
|
|
71
|
-
{ id: "alice", label: "Alice" },
|
|
72
|
-
{ id: "bob", label: "Bob" },
|
|
73
|
-
{ id: "charlie", label: "Charlie" }
|
|
74
|
-
]
|
|
75
|
-
})
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
## API
|
|
79
|
-
|
|
80
|
-
### `createMentionsPlugin(options?)`
|
|
81
|
-
|
|
82
|
-
Returns an `EditorPlugin` that registers the @ mention trigger.
|
|
83
|
-
|
|
84
|
-
| Option | Type | Description |
|
|
85
|
-
| --- | --- | --- |
|
|
86
|
-
| `onSearch` | `(query: string) => Promise<MentionItem[]>` | Async search function for mention suggestions. |
|
|
87
|
-
| `items` | `MentionItem[]?` | Static list of mention items (used when `onSearch` is omitted). |
|
|
88
|
-
| `trigger` | `string?` | Trigger character (default: `"@"`). |
|
|
89
|
-
|
|
90
|
-
### `MentionItem`
|
|
91
|
-
|
|
92
|
-
| Field | Type | Description |
|
|
93
|
-
| --- | --- | --- |
|
|
94
|
-
| `id` | `string` | Unique identifier stored in `data-mention-id`. |
|
|
95
|
-
| `label` | `string` | Display name shown in dropdown and inserted chip. |
|
|
96
|
-
| `avatar` | `string?` | Optional avatar URL shown in the dropdown. |
|
|
97
|
-
|
|
98
|
-
## Related packages
|
|
99
|
-
|
|
100
|
-
- [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) — editor engine and plugins API.
|
|
101
|
-
- [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) — shared CSS.
|
|
102
|
-
- [`@richhtmleditor/comments`](https://www.npmjs.com/package/@richhtmleditor/comments) — review comments plugin.
|
|
103
|
-
- [`@richhtmleditor/spellcheck`](https://www.npmjs.com/package/@richhtmleditor/spellcheck) — spell check plugin.
|
|
104
|
-
- [`@richhtmleditor/angular`](https://www.npmjs.com/package/@richhtmleditor/angular) — Angular wrapper.
|
|
105
|
-
- [`@richhtmleditor/react`](https://www.npmjs.com/package/@richhtmleditor/react) — React wrapper.
|
|
106
|
-
|
|
107
|
-
## License
|
|
108
|
-
|
|
109
|
-
[MIT](./LICENSE)
|
|
1
|
+
# @richhtmleditor/mentions
|
|
2
|
+
|
|
3
|
+
@ mention autocomplete plugin for Rich HTML Editor. Type `@` to search and mention users, documents, or tags with an inline dropdown. Built on [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core).
|
|
4
|
+
|
|
5
|
+
**Current release: 1.1.3** — Depends on `@richhtmleditor/core` **^1.1.3**.
|
|
6
|
+
|
|
7
|
+
**Repository:** [github.com/rajkishorsahu89/richhtmleditor](https://github.com/rajkishorsahu89/richhtmleditor)
|
|
8
|
+
|
|
9
|
+
**Demo:** [richhtmleditor.vercel.app](https://richhtmleditor.vercel.app/) — [demo](https://richhtmleditor.vercel.app/demo) · [guide](https://richhtmleditor.vercel.app/guide) · [API](https://richhtmleditor.vercel.app/api)
|
|
10
|
+
|
|
11
|
+
### What's in 1.1.3
|
|
12
|
+
|
|
13
|
+
- **`createMentionsPlugin`** — registers the @ trigger and autocomplete dropdown
|
|
14
|
+
- **Inline autocomplete** — type `@` followed by a query to search mentions
|
|
15
|
+
- **Async data source** — wire your user/document/tag API via `onSearch`
|
|
16
|
+
- **Keyboard navigation** — arrow keys to navigate, Enter to confirm, Escape to dismiss
|
|
17
|
+
- **Styled mention chips** — inserted mentions render as styled `<span>` elements with `data-mention-id`
|
|
18
|
+
|
|
19
|
+
> Community feature — no enterprise licence required.
|
|
20
|
+
|
|
21
|
+
**Keywords:** `richhtmleditor` `mentions` `autocomplete` `users` `tags` `wysiwyg`
|
|
22
|
+
|
|
23
|
+
## Install
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @richhtmleditor/mentions
|
|
27
|
+
# Requires @richhtmleditor/core (via framework wrapper or direct install).
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
import { createEditor } from "@richhtmleditor/core";
|
|
34
|
+
import { createMentionsPlugin } from "@richhtmleditor/mentions";
|
|
35
|
+
|
|
36
|
+
const editor = createEditor({
|
|
37
|
+
element: host,
|
|
38
|
+
toolbar: { preset: "full" },
|
|
39
|
+
plugins: [
|
|
40
|
+
createMentionsPlugin({
|
|
41
|
+
onSearch: async (query) => {
|
|
42
|
+
const res = await fetch(`/api/users?q=${query}`);
|
|
43
|
+
return res.json(); // [{ id, label, avatar? }]
|
|
44
|
+
}
|
|
45
|
+
})
|
|
46
|
+
]
|
|
47
|
+
});
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Angular
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
import { createMentionsPlugin } from "@richhtmleditor/mentions";
|
|
54
|
+
|
|
55
|
+
plugins = [
|
|
56
|
+
createMentionsPlugin({
|
|
57
|
+
onSearch: async (query) => fetchUsers(query)
|
|
58
|
+
})
|
|
59
|
+
];
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<richhtmleditor [plugins]="plugins" [toolbar]="{ preset: 'full' }" />
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Static mentions list
|
|
67
|
+
|
|
68
|
+
```ts
|
|
69
|
+
createMentionsPlugin({
|
|
70
|
+
items: [
|
|
71
|
+
{ id: "alice", label: "Alice" },
|
|
72
|
+
{ id: "bob", label: "Bob" },
|
|
73
|
+
{ id: "charlie", label: "Charlie" }
|
|
74
|
+
]
|
|
75
|
+
})
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## API
|
|
79
|
+
|
|
80
|
+
### `createMentionsPlugin(options?)`
|
|
81
|
+
|
|
82
|
+
Returns an `EditorPlugin` that registers the @ mention trigger.
|
|
83
|
+
|
|
84
|
+
| Option | Type | Description |
|
|
85
|
+
| --- | --- | --- |
|
|
86
|
+
| `onSearch` | `(query: string) => Promise<MentionItem[]>` | Async search function for mention suggestions. |
|
|
87
|
+
| `items` | `MentionItem[]?` | Static list of mention items (used when `onSearch` is omitted). |
|
|
88
|
+
| `trigger` | `string?` | Trigger character (default: `"@"`). |
|
|
89
|
+
|
|
90
|
+
### `MentionItem`
|
|
91
|
+
|
|
92
|
+
| Field | Type | Description |
|
|
93
|
+
| --- | --- | --- |
|
|
94
|
+
| `id` | `string` | Unique identifier stored in `data-mention-id`. |
|
|
95
|
+
| `label` | `string` | Display name shown in dropdown and inserted chip. |
|
|
96
|
+
| `avatar` | `string?` | Optional avatar URL shown in the dropdown. |
|
|
97
|
+
|
|
98
|
+
## Related packages
|
|
99
|
+
|
|
100
|
+
- [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) — editor engine and plugins API.
|
|
101
|
+
- [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) — shared CSS.
|
|
102
|
+
- [`@richhtmleditor/comments`](https://www.npmjs.com/package/@richhtmleditor/comments) — review comments plugin.
|
|
103
|
+
- [`@richhtmleditor/spellcheck`](https://www.npmjs.com/package/@richhtmleditor/spellcheck) — spell check plugin.
|
|
104
|
+
- [`@richhtmleditor/angular`](https://www.npmjs.com/package/@richhtmleditor/angular) — Angular wrapper.
|
|
105
|
+
- [`@richhtmleditor/react`](https://www.npmjs.com/package/@richhtmleditor/react) — React wrapper.
|
|
106
|
+
|
|
107
|
+
## License
|
|
108
|
+
|
|
109
|
+
[MIT](./LICENSE)
|