feat: render custom server emojis on editor (#579)

This commit is contained in:
Joaquín Sánchez 2022-12-27 19:38:57 +01:00 committed by GitHub
parent 847e64ef6d
commit 4d21d27f94
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 144 additions and 9 deletions

View file

@ -1,5 +1,6 @@
import type { Emoji } from 'masto' import type { Emoji } from 'masto'
import { emojisArrayToObject } from '~/composables/utils' import { emojisArrayToObject } from '~/composables/utils'
import { currentCustomEmojis } from '~/composables/emojis'
defineOptions({ defineOptions({
name: 'ContentRich', name: 'ContentRich',
@ -11,11 +12,21 @@ const { content, emojis, markdown = true } = defineProps<{
emojis?: Emoji[] emojis?: Emoji[]
}>() }>()
const useEmojis = computed(() => {
const result: Emoji[] = []
if (emojis)
result.push(...emojis)
result.push(...currentCustomEmojis.value.emojis)
return emojisArrayToObject(result)
})
export default () => h( export default () => h(
'span', 'span',
{ class: 'content-rich' }, { class: 'content-rich' },
contentToVNode(content, { contentToVNode(content, {
emojis: emojisArrayToObject(emojis || []), emojis: useEmojis.value,
markdown, markdown,
}), }),
) )

View file

@ -4,6 +4,7 @@ import { updateCustomEmojis } from '~/composables/emojis'
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'select', code: string): void (e: 'select', code: string): void
(e: 'selectCustom', image: any): void
}>() }>()
const el = $ref<HTMLElement>() const el = $ref<HTMLElement>()
@ -22,8 +23,10 @@ async function openEmojiPicker() {
const { Picker } = await import('emoji-mart') const { Picker } = await import('emoji-mart')
picker = new Picker({ picker = new Picker({
data: () => promise, data: () => promise,
onEmojiSelect(e: any) { onEmojiSelect({ native, src, alt, name }: any) {
emit('select', e.native || e.shortcodes) native
? emit('select', native)
: emit('selectCustom', { src, alt, 'data-emoji-id': name })
}, },
theme: isDark.value ? 'dark' : 'light', theme: isDark.value ? 'dark' : 'light',
custom: customEmojisData.value, custom: customEmojisData.value,

View file

@ -68,6 +68,9 @@ async function handlePaste(evt: ClipboardEvent) {
function insertText(text: string) { function insertText(text: string) {
editor.value?.chain().insertContent(text).focus().run() editor.value?.chain().insertContent(text).focus().run()
} }
function insertEmoji(image: any) {
editor.value?.chain().focus().setEmoji(image).run()
}
async function pickAttachments() { async function pickAttachments() {
const files = await fileOpen([ const files = await fileOpen([
@ -277,7 +280,7 @@ defineExpose({
v-if="shouldExpanded" flex="~ gap-2 1" m="l--1" pt-2 justify="between" max-full v-if="shouldExpanded" flex="~ gap-2 1" m="l--1" pt-2 justify="between" max-full
border="t base" border="t base"
> >
<PublishEmojiPicker @select="insertText" /> <PublishEmojiPicker @select="insertText" @select-custom="insertEmoji" />
<CommonTooltip placement="bottom" :content="$t('tooltip.add_media')"> <CommonTooltip placement="bottom" :content="$t('tooltip.add_media')">
<button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments"> <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">

View file

@ -19,9 +19,10 @@ export function parseMastodonHTML(html: string, customEmojis: Record<string, Emo
// custom emojis // custom emojis
.replace(/:([\w-]+?):/g, (_, name) => { .replace(/:([\w-]+?):/g, (_, name) => {
const emoji = customEmojis[name] const emoji = customEmojis[name]
if (emoji)
return `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" data-emoji-id="${name}" />` return emoji
return `:${name}:` ? `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" data-emoji-id="${name}" />`
: `:${name}:`
}) })
.replace(EMOJI_REGEX, '<em-emoji native="$1" />') .replace(EMOJI_REGEX, '<em-emoji native="$1" />')
@ -115,8 +116,9 @@ export function treeToText(input: Node): string {
if ('children' in input) if ('children' in input)
body = (input.children as Node[]).map(n => treeToText(n)).join('') body = (input.children as Node[]).map(n => treeToText(n)).join('')
// add spaces around emoji to prevent parsing errors: 2 or more consecutive emojis will not be parsed
if (input.name === 'img' && input.attributes.class?.includes('custom-emoji')) if (input.name === 'img' && input.attributes.class?.includes('custom-emoji'))
return `:${input.attributes['data-emoji-id']}:` return ` :${input.attributes['data-emoji-id']}: `
return pre + body + post return pre + body + post
} }

View file

@ -14,6 +14,7 @@ import { Plugin } from 'prosemirror-state'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { HashSuggestion, MentionSuggestion } from './tiptap/suggestion' import { HashSuggestion, MentionSuggestion } from './tiptap/suggestion'
import { CodeBlockShiki } from './tiptap/shiki' import { CodeBlockShiki } from './tiptap/shiki'
import { Emoji } from './tiptap/emoji'
export interface UseTiptapOptions { export interface UseTiptapOptions {
content: Ref<string | undefined> content: Ref<string | undefined>
@ -41,6 +42,13 @@ export function useTiptap(options: UseTiptapOptions) {
Italic, Italic,
Code, Code,
Text, Text,
Emoji,
Emoji.configure({
inline: true,
HTMLAttributes: {
class: 'custom-emoji',
},
}),
Mention.configure({ Mention.configure({
suggestion: MentionSuggestion, suggestion: MentionSuggestion,
}), }),

108
composables/tiptap/emoji.ts Normal file
View file

@ -0,0 +1,108 @@
import {
Node,
mergeAttributes,
nodeInputRule,
} from '@tiptap/core'
export interface EmojiOptions {
inline: boolean
allowBase64: boolean
HTMLAttributes: Record<string, any>
}
declare module '@tiptap/core' {
interface Commands<ReturnType> {
emoji: {
/**
* Add an emoji.
*/
setEmoji: (options: { src: string; alt?: string; title?: string }) => ReturnType
}
}
}
export const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
export const Emoji = Node.create<EmojiOptions>({
name: 'custom-emoji',
addOptions() {
return {
inline: false,
allowBase64: false,
HTMLAttributes: {},
}
},
inline() {
return this.options.inline
},
group() {
return this.options.inline ? 'inline' : 'block'
},
draggable: false,
addAttributes() {
return {
'src': {
default: null,
},
'alt': {
default: null,
},
'title': {
default: null,
},
'width': {
default: null,
},
'height': {
default: null,
},
'data-emoji-id': {
default: null,
},
}
},
parseHTML() {
return [
{
tag: this.options.allowBase64
? 'img[src]'
: 'img[src]:not([src^="data:"])',
},
]
},
renderHTML({ HTMLAttributes }) {
return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
},
addCommands() {
return {
setEmoji: options => ({ commands }) => {
return commands.insertContent({
type: this.name,
attrs: options,
})
},
}
},
addInputRules() {
return [
nodeInputRule({
find: inputRegex,
type: this.type,
getAttributes: (match) => {
const [,, alt, src, title] = match
return { src, alt, title }
},
}),
]
},
})

View file

@ -52,7 +52,7 @@ exports[`html-parse > custom emoji > html 1`] = `
" "
`; `;
exports[`html-parse > custom emoji > text 1`] = `"Daniel Roe :nuxt:"`; exports[`html-parse > custom emoji > text 1`] = `"Daniel Roe :nuxt:"`;
exports[`html-parse > empty > html 1`] = `""`; exports[`html-parse > empty > html 1`] = `""`;