mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-24 19:59:02 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

docs: update content

Browse Source
This commit is contained in:
Hans Pagel 2021-01-20 16:56:25 +01:00
parent e11a4749b1
commit 271f77f6f4
5 changed files with 62 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/src/demos/Nodes/Mention/index.vue
View File

@ -34,9 +34,11 @@ export default {
HTMLAttributes: {
class: 'mention',
},
suggestionOptions: {
suggestion: {
items: query => {
return ['Hans', 'Philipp', 'Kris'].filter(item => item.startsWith(query))
return [
'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
].filter(item => item.startsWith(query)).slice(0, 5)
},
render: () => {
let component
@ -56,7 +58,7 @@ export default {
showOnCreate: true,
interactive: true,
trigger: 'manual',
placement: 'top-start',
placement: 'bottom-start',
})
},
onUpdate(props) {
@ -79,7 +81,7 @@ export default {
}),
],
content: `
<p>Hello <span data-mention="Hans"></span> and <span data-mention="Philipp"></span> and <span data-mention="Kris"></span>!</p>
<p>Hi <span data-mention="Winona Ryder"></span> and <span data-mention="Axl Rose"></span>! Don’t forget the daily stand up at 8 AM.</p>
`,
})
},

18
docs/src/docPages/api/nodes/mention.md
View File

@ -9,6 +9,24 @@ npm install @tiptap/extension-mention
yarn add @tiptap/extension-mention
```
## Settings
| Option | Type | Default | Description |
| -------------- | -------- | -------------------------- | ---------------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
| suggestion | `Object` | `{ char: '@', command: … ` | [Suggestion utility](/api/utilities/suggestion) |
## Settings for suggestions
| Option | Type | Default | Description |
| --------------- | ---------- | -------------- | ----------------------------------------------------------- |
| char | `String` | `'@'` | The character that triggers the autocomplete popup. |
| allowSpaces | `Boolean` | `false` | Allows or disallows spaces in suggested items. |
| startOfLine | `Boolean` | `false` | Trigger the autocomplete popup at the start of a line only. |
| decorationTag | `String` | `'span'` | The HTML tag that should be rendered for the suggestion. |
| decorationClass | `String` | `'suggestion'` | A CSS class that should be added to the suggestion. |
| command | `Function` | `() => {}'` | Executed when a suggestion is selected. |
| items | `Function` | `() => {}` | Pass an array of filtered suggestions, can be async. |
| render | `Function` | `() => ({})` | A render function for the autocomplete popup. |
## Source code
[packages/extension-mention/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-mention/)

25
docs/src/docPages/api/utilities/suggestion.md Normal file
View File

@ -0,0 +1,25 @@
# Suggestion
TODO
## Settings
| Option | Type | Default | Description |
| --------------- | ---------- | -------------- | ----------------------------------------------------------- |
| char | `String` | `'@'` | The character that triggers the autocomplete popup. |
| allowSpaces | `Boolean` | `false` | Allows or disallows spaces in suggested items. |
| startOfLine | `Boolean` | `false` | Trigger the autocomplete popup at the start of a line only. |
| decorationTag | `String` | `'span'` | The HTML tag that should be rendered for the suggestion. |
| decorationClass | `String` | `'suggestion'` | A CSS class that should be added to the suggestion. |
| command | `Function` | `() => {}'` | Executed when a suggestion is selected. |
| items | `Function` | `() => {}` | Pass an array of filtered suggestions, can be async. |
| render | `Function` | `() => ({})` | A render function for the autocomplete popup. |
## Render
TODO
## Source code
[packages/suggestion/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/suggestion/)
## Usage
* [`Emoji`](/api/nodes/emoji)
* [`Hashtag`](/api/nodes/hashtag)
* [`Mention`](/api/nodes/mention)

15
docs/src/links.yaml
View File

@ -113,7 +113,7 @@
link: /api/nodes/list-item
- title: Mention
link: /api/nodes/mention
type: draft
type: new
- title: OrderedList
link: /api/nodes/ordered-list
- title: Paragraph
@ -155,9 +155,9 @@
- title: Extensions
link: /api/extensions
items:
- title: Annotation
link: /api/extensions/annotation
type: draft
# - title: Annotation
# link: /api/extensions/annotation
# type: draft
- title: Collaboration
link: /api/extensions/collaboration
type: pro
@ -186,7 +186,12 @@
link: /api/schema
- title: Keyboard Shortcuts
link: /api/keyboard-shortcuts
- title: Utilities
link: /api/utilities
redirect: /api/utilities/suggestion
items:
- title: Suggestion
link: /api/utilities/suggestion
- title: Links
items:

6
packages/extension-mention/src/mention.ts
View File

@ -5,7 +5,7 @@ export type MentionOptions = {
HTMLAttributes: {
[key: string]: any,
},
suggestionOptions: Omit<SuggestionOptions, 'editor'>,
suggestion: Omit<SuggestionOptions, 'editor'>,
}
export const Mention = Node.create({
@ -13,7 +13,7 @@ export const Mention = Node.create({
defaultOptions: <MentionOptions>{
HTMLAttributes: {},
suggestionOptions: {
suggestion: {
char: '@',
command: ({ editor, range, attributes }) => {
editor
@ -76,7 +76,7 @@ export const Mention = Node.create({
return [
Suggestion({
editor: this.editor,
...this.options.suggestionOptions,
...this.options.suggestion,
}),
]
},