mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 06:03:22 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
Philipp Kühn 2021-01-19 12:50:09 +01:00 committed by Hans Pagel
parent 19c3599605
commit 008fd9b519
2 changed files with 58 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,45 +31,47 @@ export default {
Paragraph,
Text,
Mention.configure({
items: query => {
return ['Hans', 'Philipp', 'Kris'].filter(item => item.startsWith(query))
},
render: () => {
let component
let popup
suggestionOptions: {
items: query => {
return ['Hans', 'Philipp', 'Kris'].filter(item => item.startsWith(query))
},
render: () => {
let component
let popup
return {
onStart: props => {
component = new VueRenderer(MentionList, {
parent: this,
propsData: props,
})
return {
onStart: props => {
component = new VueRenderer(MentionList, {
parent: this,
propsData: props,
})
popup = tippy('body', {
getReferenceClientRect: () => props.clientRect,
appendTo: () => document.body,
content: component.element,
showOnCreate: true,
interactive: true,
trigger: 'manual',
placement: 'top-start',
})
},
onUpdate(props) {
component.updateProps(props)
popup = tippy('body', {
getReferenceClientRect: () => props.clientRect,
appendTo: () => document.body,
content: component.element,
showOnCreate: true,
interactive: true,
trigger: 'manual',
placement: 'top-start',
})
},
onUpdate(props) {
component.updateProps(props)
popup[0].setProps({
getReferenceClientRect: () => props.clientRect,
})
},
onKeyDown(props) {
return component.vm.onKeyDown(props)
},
onExit() {
popup[0].destroy()
component.destroy()
},
}
popup[0].setProps({
getReferenceClientRect: () => props.clientRect,
})
},
onKeyDown(props) {
return component.vm.onKeyDown(props)
},
onExit() {
popup[0].destroy()
component.destroy()
},
}
},
},
}),
],

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

@ -1,13 +1,21 @@
import { Node } from '@tiptap/core'
import Suggestion, { SuggestionOptions } from '@tiptap/suggestion'
export type MentionOptions = Omit<SuggestionOptions, 'editor'>
export type MentionOptions = {
HTMLAttributes: {
[key: string]: any,
},
suggestionOptions: Omit<SuggestionOptions, 'editor'>,
}
export const Mention = Node.create({
name: 'mention',
defaultOptions: <MentionOptions>{
char: '@',
HTMLAttributes: {},
suggestionOptions: {
char: '@',
},
},
group: 'inline',
@ -27,6 +35,15 @@ export const Mention = Node.create({
id: element.getAttribute('data-mention'),
}
},
renderHTML: attributes => {
if (!attributes.id) {
return {}
}
return {
'data-mention': attributes.id,
}
},
},
}
},
@ -47,7 +64,7 @@ export const Mention = Node.create({
return [
Suggestion({
editor: this.editor,
...this.options,
...this.options.suggestionOptions,
command: ({ range, attributes }) => {
this.editor
.chain()