83 lines
1.6 KiB
JavaScript
83 lines
1.6 KiB
JavaScript
import { Node, InputRule } from '@tiptap/core';
|
|
import { initEmojiMap, getAllEmoji } from '~/emoji';
|
|
|
|
export default Node.create({
|
|
name: 'emoji',
|
|
|
|
inline: true,
|
|
|
|
group: 'inline',
|
|
|
|
draggable: true,
|
|
|
|
addAttributes() {
|
|
return {
|
|
moji: {
|
|
default: null,
|
|
parseHTML: (element) => element.textContent,
|
|
},
|
|
name: {
|
|
default: null,
|
|
parseHTML: (element) => element.dataset.name,
|
|
},
|
|
title: {
|
|
default: null,
|
|
},
|
|
unicodeVersion: {
|
|
default: '6.0',
|
|
parseHTML: (element) => element.dataset.unicodeVersion,
|
|
},
|
|
};
|
|
},
|
|
|
|
parseHTML() {
|
|
return [
|
|
{
|
|
tag: 'gl-emoji',
|
|
},
|
|
];
|
|
},
|
|
|
|
renderHTML({ node }) {
|
|
return [
|
|
'gl-emoji',
|
|
{
|
|
'data-name': node.attrs.name,
|
|
title: node.attrs.title,
|
|
'data-unicode-version': node.attrs.unicodeVersion,
|
|
},
|
|
node.attrs.moji,
|
|
];
|
|
},
|
|
|
|
addInputRules() {
|
|
const emojiInputRegex = /(?:^|\s)(:(\w+):)$/;
|
|
|
|
return [
|
|
new InputRule({
|
|
find: emojiInputRegex,
|
|
handler: ({ state, range: { from, to }, match }) => {
|
|
const [, , name] = match;
|
|
const emojis = getAllEmoji();
|
|
const emoji = emojis[name];
|
|
const { tr } = state;
|
|
|
|
if (emoji) {
|
|
tr.replaceWith(from, to, [
|
|
state.schema.text(' '),
|
|
this.type.create({ name, moji: emoji.e, unicodeVersion: emoji.u, title: emoji.d }),
|
|
]);
|
|
|
|
return tr;
|
|
}
|
|
|
|
return null;
|
|
},
|
|
}),
|
|
];
|
|
},
|
|
|
|
onCreate() {
|
|
initEmojiMap();
|
|
},
|
|
});
|