diff options
Diffstat (limited to 'packages/frontend/src/pages/chat')
| -rw-r--r-- | packages/frontend/src/pages/chat/XMessage.vue | 25 | ||||
| -rw-r--r-- | packages/frontend/src/pages/chat/room.vue | 15 |
2 files changed, 21 insertions, 19 deletions
diff --git a/packages/frontend/src/pages/chat/XMessage.vue b/packages/frontend/src/pages/chat/XMessage.vue index 1a80f6fef1..b72583214b 100644 --- a/packages/frontend/src/pages/chat/XMessage.vue +++ b/packages/frontend/src/pages/chat/XMessage.vue @@ -14,6 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only ref="text" class="_selectable" :text="message.text" + :parsedNotes="parsed" :i="$i" :nyaize="'respect'" :enableEmojiMenu="true" @@ -21,19 +22,19 @@ SPDX-License-Identifier: AGPL-3.0-only /> <MkMediaList v-if="message.file" :mediaList="[message.file]" :class="$style.file"/> </MkFukidashi> - <MkUrlPreview v-for="url in urls" :key="url" :url="url" :showAsQuote="!message.fromUser.rejectQuotes" style="margin: 8px 0;"/> + <SkUrlPreviewGroup :sourceNodes="parsed" :showAsQuote="!message.fromUser.rejectQuotes" style="margin: 8px 0;"/> <div :class="$style.footer"> <button class="_textButton" style="color: currentColor;" @click="showMenu"><i class="ti ti-dots-circle-horizontal"></i></button> <MkTime :class="$style.time" :time="message.createdAt"/> <MkA v-if="isSearchResult && 'toRoom' in message && message.toRoom != null" :to="`/chat/room/${message.toRoomId}`">{{ message.toRoom.name }}</MkA> <MkA v-if="isSearchResult && 'toUser' in message && message.toUser != null && isMe" :to="`/chat/user/${message.toUserId}`">@{{ message.toUser.username }}</MkA> </div> - <TransitionGroup - :enterActiveClass="prefer.s.animation ? $style.transition_reaction_enterActive : ''" - :leaveActiveClass="prefer.s.animation ? $style.transition_reaction_leaveActive : ''" - :enterFromClass="prefer.s.animation ? $style.transition_reaction_enterFrom : ''" - :leaveToClass="prefer.s.animation ? $style.transition_reaction_leaveTo : ''" - :moveClass="prefer.s.animation ? $style.transition_reaction_move : ''" + <SkTransitionGroup + :enterActiveClass="$style.transition_reaction_enterActive" + :leaveActiveClass="$style.transition_reaction_leaveActive" + :enterFromClass="$style.transition_reaction_enterFrom" + :leaveToClass="$style.transition_reaction_leaveTo" + :moveClass="$style.transition_reaction_move" tag="div" :class="$style.reactions" > <div v-for="record in message.reactions" :key="record.reaction + record.user.id" :class="[$style.reaction, record.user.id === $i.id ? $style.reactionMy : null]" @click="onReactionClick(record)"> @@ -45,21 +46,19 @@ SPDX-License-Identifier: AGPL-3.0-only :class="$style.reactionIcon" /> </div> - </TransitionGroup> + </SkTransitionGroup> </div> </div> </template> <script lang="ts" setup> import { computed, defineAsyncComponent, provide } from 'vue'; -import * as mfm from '@transfem-org/sfm-js'; +import * as mfm from 'mfm-js'; import * as Misskey from 'misskey-js'; import { url } from '@@/js/config.js'; import { isLink } from '@@/js/is-link.js'; import type { MenuItem } from '@/types/menu.js'; import type { NormalizedChatMessage } from './room.vue'; -import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js'; -import MkUrlPreview from '@/components/MkUrlPreview.vue'; import { ensureSignin } from '@/i.js'; import { misskeyApi } from '@/utility/misskey-api.js'; import { i18n } from '@/i18n.js'; @@ -73,6 +72,8 @@ import MkReactionIcon from '@/components/MkReactionIcon.vue'; import { prefer } from '@/preferences.js'; import { DI } from '@/di.js'; import { getHTMLElementOrNull } from '@/utility/get-dom-node-or-null.js'; +import SkTransitionGroup from '@/components/SkTransitionGroup.vue'; +import SkUrlPreviewGroup from '@/components/SkUrlPreviewGroup.vue'; const $i = ensureSignin(); @@ -82,7 +83,7 @@ const props = defineProps<{ }>(); const isMe = computed(() => props.message.fromUserId === $i.id); -const urls = computed(() => props.message.text ? extractUrlFromMfm(mfm.parse(props.message.text)) : []); +const parsed = computed(() => props.message.text ? mfm.parse(props.message.text) : []); provide(DI.mfmEmojiReactCallback, (reaction) => { if ($i.policies.chatAvailability !== 'available') return; diff --git a/packages/frontend/src/pages/chat/room.vue b/packages/frontend/src/pages/chat/room.vue index 5afda5682f..6505e172dd 100644 --- a/packages/frontend/src/pages/chat/room.vue +++ b/packages/frontend/src/pages/chat/room.vue @@ -31,12 +31,12 @@ SPDX-License-Identifier: AGPL-3.0-only <MkButton :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore">{{ i18n.ts.loadMore }}</MkButton> </div> - <TransitionGroup - :enterActiveClass="prefer.s.animation ? $style.transition_x_enterActive : ''" - :leaveActiveClass="prefer.s.animation ? $style.transition_x_leaveActive : ''" - :enterFromClass="prefer.s.animation ? $style.transition_x_enterFrom : ''" - :leaveToClass="prefer.s.animation ? $style.transition_x_leaveTo : ''" - :moveClass="prefer.s.animation ? $style.transition_x_move : ''" + <SkTransitionGroup + :enterActiveClass="$style.transition_x_enterActive" + :leaveActiveClass="$style.transition_x_leaveActive" + :enterFromClass="$style.transition_x_enterFrom" + :leaveToClass="$style.transition_x_leaveTo" + :moveClass="$style.transition_x_move" tag="div" class="_gaps" > <div v-for="item in timeline.toReversed()" :key="item.id"> @@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only <span>{{ item.prevText }} <i class="ti ti-chevron-down"></i></span> </div> </div> - </TransitionGroup> + </SkTransitionGroup> </div> <div v-if="user && (!user.canChat || user.host !== null)"> @@ -111,6 +111,7 @@ import { useRouter } from '@/router.js'; import { useMutationObserver } from '@/use/use-mutation-observer.js'; import MkInfo from '@/components/MkInfo.vue'; import { makeDateSeparatedTimelineComputedRef } from '@/utility/timeline-date-separate.js'; +import SkTransitionGroup from '@/components/SkTransitionGroup.vue'; const $i = ensureSignin(); const router = useRouter(); |