elk/composables/tiptap/emoji.ts

119 lines
2.6 KiB
TypeScript
Raw Normal View History

import type { ExtendedRegExpMatchArray, InputRuleFinder, nodeInputRule } from '@tiptap/core'
import type { NodeType } from '@tiptap/pm/model'
import {
InputRule,
Node,
callOrReturn,
mergeAttributes,
nodePasteRule,
} from '@tiptap/core'
import { emojiRegEx, getEmojiAttributes } from '~/config/emojis'
function wrapHandler<T extends (...args: any[]) => any>(handler: T): T {
return <T>((...args: any[]) => {
try {
return handler(...args)
}
catch (e) {
return null
}
})
}
function createEmojiRule<NR extends typeof nodeInputRule | typeof nodePasteRule>(nodeRule: NR,
type: Parameters<NR>[0]['type']): ReturnType<NR>[] {
const rule = nodeRule({
find: emojiRegEx as RegExp,
type,
getAttributes: (match: ExtendedRegExpMatchArray) => {
const [native] = match
return getEmojiAttributes(native)
},
}) as ReturnType<NR>
// Error catch for unsupported emoji
rule.handler = wrapHandler(rule.handler.bind(rule))
return [rule]
}
2023-01-16 11:40:47 +00:00
export const TiptapPluginEmoji = Node.create({
2022-12-27 19:13:50 +00:00
name: 'em-emoji',
2022-12-27 19:13:50 +00:00
inline: () => true,
group: () => 'inline',
draggable: false,
2022-12-27 19:13:50 +00:00
parseHTML() {
return [
{
tag: 'img.iconify-emoji',
2022-12-27 19:13:50 +00:00
},
]
},
addAttributes() {
return {
alt: {
default: null,
},
src: {
default: null,
},
class: {
2022-12-27 20:42:58 +00:00
default: null,
},
}
},
2022-12-27 19:13:50 +00:00
renderHTML(args) {
return ['img', mergeAttributes(this.options.HTMLAttributes, args.HTMLAttributes)]
},
addCommands() {
return {
insertEmoji: code => ({ commands }) => {
return commands.insertContent({
type: this.name,
attrs: getEmojiAttributes(code),
})
},
}
},
addInputRules() {
function emojiInputRule(config: {
find: InputRuleFinder
type: NodeType
getAttributes?:
| Record<string, any>
| ((match: ExtendedRegExpMatchArray) => Record<string, any>)
| false
| null
}) {
return new InputRule({
find: config.find,
handler: ({ state, range, match }) => {
const attributes = callOrReturn(config.getAttributes, undefined, match) || {}
const { tr } = state
const start = range.from
const end = range.to
tr.insert(start, config.type.create(attributes)).delete(
tr.mapping.map(start),
tr.mapping.map(end),
)
tr.scrollIntoView()
},
})
}
return createEmojiRule(emojiInputRule, this.type)
},
addPasteRules() {
return createEmojiRule(nodePasteRule, this.type)
},
})