kopia lustrzana https://github.com/elk-zone/elk
feat: render custom server emojis on editor (#579)
rodzic
847e64ef6d
commit
4d21d27f94
|
@ -1,5 +1,6 @@
|
|||
import type { Emoji } from 'masto'
|
||||
import { emojisArrayToObject } from '~/composables/utils'
|
||||
import { currentCustomEmojis } from '~/composables/emojis'
|
||||
|
||||
defineOptions({
|
||||
name: 'ContentRich',
|
||||
|
@ -11,11 +12,21 @@ const { content, emojis, markdown = true } = defineProps<{
|
|||
emojis?: Emoji[]
|
||||
}>()
|
||||
|
||||
const useEmojis = computed(() => {
|
||||
const result: Emoji[] = []
|
||||
if (emojis)
|
||||
result.push(...emojis)
|
||||
|
||||
result.push(...currentCustomEmojis.value.emojis)
|
||||
|
||||
return emojisArrayToObject(result)
|
||||
})
|
||||
|
||||
export default () => h(
|
||||
'span',
|
||||
{ class: 'content-rich' },
|
||||
contentToVNode(content, {
|
||||
emojis: emojisArrayToObject(emojis || []),
|
||||
emojis: useEmojis.value,
|
||||
markdown,
|
||||
}),
|
||||
)
|
||||
|
|
|
@ -4,6 +4,7 @@ import { updateCustomEmojis } from '~/composables/emojis'
|
|||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select', code: string): void
|
||||
(e: 'selectCustom', image: any): void
|
||||
}>()
|
||||
|
||||
const el = $ref<HTMLElement>()
|
||||
|
@ -22,8 +23,10 @@ async function openEmojiPicker() {
|
|||
const { Picker } = await import('emoji-mart')
|
||||
picker = new Picker({
|
||||
data: () => promise,
|
||||
onEmojiSelect(e: any) {
|
||||
emit('select', e.native || e.shortcodes)
|
||||
onEmojiSelect({ native, src, alt, name }: any) {
|
||||
native
|
||||
? emit('select', native)
|
||||
: emit('selectCustom', { src, alt, 'data-emoji-id': name })
|
||||
},
|
||||
theme: isDark.value ? 'dark' : 'light',
|
||||
custom: customEmojisData.value,
|
||||
|
|
|
@ -68,6 +68,9 @@ async function handlePaste(evt: ClipboardEvent) {
|
|||
function insertText(text: string) {
|
||||
editor.value?.chain().insertContent(text).focus().run()
|
||||
}
|
||||
function insertEmoji(image: any) {
|
||||
editor.value?.chain().focus().setEmoji(image).run()
|
||||
}
|
||||
|
||||
async function pickAttachments() {
|
||||
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
|
||||
border="t base"
|
||||
>
|
||||
<PublishEmojiPicker @select="insertText" />
|
||||
<PublishEmojiPicker @select="insertText" @select-custom="insertEmoji" />
|
||||
|
||||
<CommonTooltip placement="bottom" :content="$t('tooltip.add_media')">
|
||||
<button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
|
||||
|
|
|
@ -19,9 +19,10 @@ export function parseMastodonHTML(html: string, customEmojis: Record<string, Emo
|
|||
// custom emojis
|
||||
.replace(/:([\w-]+?):/g, (_, name) => {
|
||||
const emoji = customEmojis[name]
|
||||
if (emoji)
|
||||
return `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" data-emoji-id="${name}" />`
|
||||
return `:${name}:`
|
||||
|
||||
return emoji
|
||||
? `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" data-emoji-id="${name}" />`
|
||||
: `:${name}:`
|
||||
})
|
||||
.replace(EMOJI_REGEX, '<em-emoji native="$1" />')
|
||||
|
||||
|
@ -115,8 +116,9 @@ export function treeToText(input: Node): string {
|
|||
if ('children' in input)
|
||||
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'))
|
||||
return `:${input.attributes['data-emoji-id']}:`
|
||||
return ` :${input.attributes['data-emoji-id']}: `
|
||||
|
||||
return pre + body + post
|
||||
}
|
||||
|
|
|
@ -14,6 +14,7 @@ import { Plugin } from 'prosemirror-state'
|
|||
import type { Ref } from 'vue'
|
||||
import { HashSuggestion, MentionSuggestion } from './tiptap/suggestion'
|
||||
import { CodeBlockShiki } from './tiptap/shiki'
|
||||
import { Emoji } from './tiptap/emoji'
|
||||
|
||||
export interface UseTiptapOptions {
|
||||
content: Ref<string | undefined>
|
||||
|
@ -41,6 +42,13 @@ export function useTiptap(options: UseTiptapOptions) {
|
|||
Italic,
|
||||
Code,
|
||||
Text,
|
||||
Emoji,
|
||||
Emoji.configure({
|
||||
inline: true,
|
||||
HTMLAttributes: {
|
||||
class: 'custom-emoji',
|
||||
},
|
||||
}),
|
||||
Mention.configure({
|
||||
suggestion: MentionSuggestion,
|
||||
}),
|
||||
|
|
|
@ -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 }
|
||||
},
|
||||
}),
|
||||
]
|
||||
},
|
||||
})
|
|
@ -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`] = `""`;
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue