diff --git a/plugins/emoji-assets/assets/icons.svg b/plugins/emoji-assets/assets/icons.svg index 58c541bc08..8ffb293a20 100644 --- a/plugins/emoji-assets/assets/icons.svg +++ b/plugins/emoji-assets/assets/icons.svg @@ -1,8 +1,6 @@ - - - - + + diff --git a/plugins/emoji-resources/src/components/EmojiButton.svelte b/plugins/emoji-resources/src/components/EmojiButton.svelte index 8866d64496..9315152357 100644 --- a/plugins/emoji-resources/src/components/EmojiButton.svelte +++ b/plugins/emoji-resources/src/components/EmojiButton.svelte @@ -38,8 +38,7 @@ class="hulyPopupEmoji-button" class:preview class:selected - class:skins={skins !== undefined && skins.length === 5} - class:constructor={skins !== undefined && skins.length > 5} + class:skins={skins !== undefined} data-skins={skins?.length} {disabled} on:touchstart @@ -74,15 +73,15 @@ width: 1.75rem; height: 1.75rem; font-size: 1.5rem; - border-radius: 0.75rem; + border-radius: 0.25rem; } &.preview { - margin: 0; - padding: 0; - width: 1.25rem; - height: 1.25rem; + margin: 0rem; + padding: 0.25rem; + width: 1.5rem; + height: 1.5rem; font-size: 1.25rem; - border-radius: 0.375rem; + border-radius: 0.25rem; } span { transform: translateY(1%); @@ -114,7 +113,6 @@ &.skins:not(.preview) { position: relative; - border: 1px dashed var(--theme-button-border); &:hover { &::after { @@ -129,32 +127,5 @@ } } } - &.constructor:not(.preview) { - position: relative; - border: 1px dashed var(--theme-button-border); - - &:hover { - &::before { - content: ''; - position: absolute; - top: -0.25rem; - right: -0.25rem; - width: 1rem; - height: 1rem; - border-radius: 50%; - background-color: var(--global-focus-BorderColor); - } - &::after { - content: attr(data-skins); - position: absolute; - top: 0.25rem; - right: 0.25rem; - font-size: 0.625rem; - font-weight: 700; - color: #fff; - transform: translate(50%, -50%); - } - } - } } diff --git a/plugins/emoji-resources/src/components/EmojiPopup.svelte b/plugins/emoji-resources/src/components/EmojiPopup.svelte index 40d09b8f69..9055bc1406 100644 --- a/plugins/emoji-resources/src/components/EmojiPopup.svelte +++ b/plugins/emoji-resources/src/components/EmojiPopup.svelte @@ -328,8 +328,8 @@ width: 100%; height: 100%; min-width: 0; - min-height: 28.5rem; - max-height: 28.5rem; + min-height: 29rem; + max-height: 29rem; user-select: none; :global(.mobile-theme) & { diff --git a/plugins/emoji/src/utils.ts b/plugins/emoji/src/utils.ts index 5ae947e4d5..620c6ddb2a 100644 --- a/plugins/emoji/src/utils.ts +++ b/plugins/emoji/src/utils.ts @@ -22,7 +22,7 @@ export const emojiRegex = EMOJI_REGEX export const emojiGlobalRegex = new RegExp(EMOJI_REGEX.source, EMOJI_REGEX.flags + 'g') export const emoticonRegex = new RegExp(`(?:^|\\s)(${EMOTICON_REGEX.source})$`) -export const emoticonGlobalRegex = new RegExp(`(? prevStartIndex && text[matchStart - 1] !== ' ') { + continue + } + if (matchEnd < text.length) { + if (index === matches.length - 1 && text[matchEnd] !== ' ') continue + if ( + index < matches.length - 1 && + text.indexOf(matches[index + 1], matchEnd) > matchEnd && + text[matchEnd] !== ' ' + ) { + continue + } + } + result.push({ index: matchStart, text: match }) + } + return result +} + export const EmojiExtension = EmojiNode.extend({ addOptions () { return { @@ -80,19 +116,25 @@ export const EmojiExtension = EmojiNode.extend({ }) return [ new PasteRule({ - find: shortcodeGlobalRegex, + find: (text: string, event?: ClipboardEvent | null) => { + return detectPasteEmojis(text, shortcodeGlobalRegex) + }, handler: ({ state, range, match, commands }) => { handleEmoji(state, range, match, commands, shortCodeFn) } }), new PasteRule({ - find: emojiGlobalRegex, + find: (text: string, event?: ClipboardEvent | null) => { + return detectPasteEmojis(text, emojiGlobalRegex) + }, handler: ({ state, range, match, commands }) => { handleEmoji(state, range, match, commands, (emoji: string | undefined) => emoji) } }), new PasteRule({ - find: emoticonGlobalRegex, + find: (text: string, event?: ClipboardEvent | null) => { + return detectPasteEmojis(text, emoticonGlobalRegex) + }, handler: ({ state, range, match, commands }) => { handleEmoji(state, range, match, commands, emoticonFn) }