1
0
mirror of https://github.com/elk-zone/elk synced 2024-12-11 21:28:06 +09:00
elk/composables/tiptap.ts

139 lines
3.7 KiB
TypeScript
Raw Normal View History

import type { Editor } from '@tiptap/vue-3'
import type { Ref } from 'vue'
2022-11-26 11:01:50 +09:00
import Bold from '@tiptap/extension-bold'
import Code from '@tiptap/extension-code'
import Document from '@tiptap/extension-document'
import HardBreak from '@tiptap/extension-hard-break'
2023-01-11 06:16:56 +09:00
import History from '@tiptap/extension-history'
import Italic from '@tiptap/extension-italic'
import Mention from '@tiptap/extension-mention'
import Paragraph from '@tiptap/extension-paragraph'
import Placeholder from '@tiptap/extension-placeholder'
import Text from '@tiptap/extension-text'
import { Extension, useEditor } from '@tiptap/vue-3'
import { Plugin } from 'prosemirror-state'
2023-01-16 20:40:47 +09:00
import { TiptapPluginCustomEmoji } from './tiptap/custom-emoji'
import { TiptapPluginEmoji } from './tiptap/emoji'
import { TiptapPluginCodeBlockShiki } from './tiptap/shiki'
import { TiptapEmojiSuggestion, TiptapHashtagSuggestion, TiptapMentionSuggestion } from './tiptap/suggestion'
export interface UseTiptapOptions {
2023-01-04 19:21:18 +09:00
content: Ref<string>
2022-11-30 07:47:24 +09:00
placeholder: Ref<string | undefined>
2022-11-25 23:07:31 +09:00
onSubmit: () => void
onFocus: () => void
onPaste: (event: ClipboardEvent) => void
autofocus: boolean
}
export function useTiptap(options: UseTiptapOptions) {
2024-02-25 01:46:14 +09:00
if (import.meta.server)
return { editor: ref<Editor | undefined>() }
const {
autofocus,
content,
placeholder,
} = options
const editor = useEditor({
content: content.value,
extensions: [
Document,
Paragraph,
2022-11-26 11:01:50 +09:00
HardBreak,
Bold,
Italic,
Code,
Text,
2023-01-16 20:40:47 +09:00
TiptapPluginEmoji,
TiptapPluginCustomEmoji.configure({
inline: true,
HTMLAttributes: {
class: 'custom-emoji',
},
}),
Mention.configure({
renderHTML({ options, node }) {
return ['span', { 'data-type': 'mention', 'data-id': node.attrs.id }, `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`]
},
2023-01-16 20:40:47 +09:00
suggestion: TiptapMentionSuggestion,
}),
Mention
.extend({ name: 'hashtag' })
.configure({
renderHTML({ options, node }) {
return ['span', { 'data-type': 'hashtag', 'data-id': node.attrs.id }, `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`]
},
2023-01-16 20:40:47 +09:00
suggestion: TiptapHashtagSuggestion,
}),
Mention
.extend({ name: 'emoji' })
.configure({
2023-01-16 20:40:47 +09:00
suggestion: TiptapEmojiSuggestion,
}),
Placeholder.configure({
placeholder: () => placeholder.value!,
}),
TiptapPluginCodeBlockShiki,
2023-01-11 06:16:56 +09:00
History.configure({
depth: 10,
}),
Extension.create({
name: 'api',
addKeyboardShortcuts() {
return {
'Mod-Enter': () => {
2022-11-25 23:07:31 +09:00
options.onSubmit()
return true
},
}
},
onFocus() {
options.onFocus()
},
addProseMirrorPlugins() {
return [
new Plugin({
props: {
handleDOMEvents: {
paste(view, event) {
options.onPaste(event)
},
},
},
}),
]
},
}),
],
onUpdate({ editor }) {
content.value = editor.getHTML()
},
editorProps: {
attributes: {
class: 'content-editor content-rich',
},
},
parseOptions: {
preserveWhitespace: 'full',
},
autofocus,
editable: true,
})
2022-11-26 03:10:17 +09:00
watch(content, (value) => {
if (editor.value?.getHTML() === value)
return
editor.value?.commands.setContent(value || '', false)
})
watch(placeholder, () => {
editor.value?.view.dispatch(editor.value?.state.tr)
})
2022-11-26 03:10:17 +09:00
return {
editor,
}
}