versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: ♻️ Refactor suggestboxes to follow text cursor

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-20 17:51:06 -10:00
parent 7e47dafa18
commit 21fcdd8f64
No known key found for this signature in database
4 changed files with 170 additions and 171 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app.vue
View file

@ -76,4 +76,8 @@ body {
.os-scrollbar .os-scrollbar-handle {
background: #9999;
}
.os-scrollbar .os-scrollbar-handle:hover {
background: #6666;
}
</style>

126
components/composer/autocomplete-suggestbox.vue Normal file
View file

@ -0,0 +1,126 @@
<template>
<div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
left: `${x}px`,
top: `${y}px`,
width: `${width}px`,
}" v-show="topSuggestions && topSuggestions.length > 0">
<OverlayScrollbarsComponent class="w-full [&>div]:flex">
<div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
@click="emit('autocomplete', suggestion.key)"
:ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
:class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
<slot :suggestion="suggestion"></slot>
</div>
</OverlayScrollbarsComponent>
</div>
</template>
<script lang="ts" setup>
import { OverlayScrollbarsComponent } from "#imports";
const props = defineProps<{
currentlyTyping: string | null;
textarea: HTMLTextAreaElement | undefined;
suggestions: Array<{ key: string; value: unknown }>;
distanceFunction: (a: string, b: string) => number;
}>();
const suggestionRefs = ref<Element[]>([]);
// Allow the user to navigate the suggestions with the arrow keys
// and select a suggestion with the Tab or Enter key
const { Tab, ArrowRight, ArrowLeft, Enter } = useMagicKeys({
target: props.textarea,
passive: false,
onEventFired(e) {
if (
["Tab", "Enter", "ArrowRight", "ArrowLeft"].includes(e.key) &&
topSuggestions.value !== null
) {
e.preventDefault();
}
},
});
const topSuggestions = ref<Array<{ key: string; value: unknown }> | null>(null);
const selectedSuggestionIndex = ref<number | null>(null);
const x = ref(0);
const y = ref(0);
const width = ref(0);
const TOP_PADDING = 10;
useEventListener(props.textarea, "keyup", () => {
recalculatePosition();
});
const recalculatePosition = () => {
if (props.textarea) {
const target = props.textarea;
const position = target.selectionEnd;
// Get x, y position of the cursor in the textarea
const { top, left } = target.getBoundingClientRect();
const lineHeight = Number.parseInt(
getComputedStyle(target).lineHeight ?? "0",
10,
);
const lines = target.value.slice(0, position).split("\n");
const line = lines.length - 1;
x.value = left;
// Spawn one line below the cursor, so add +1
y.value = top + (line + 1) * lineHeight + TOP_PADDING;
width.value = target.clientWidth;
}
};
watchEffect(() => {
if (props.currentlyTyping !== null) {
topSuggestions.value = props.suggestions
.map((suggestion) => ({
...suggestion,
distance: props.distanceFunction(
props.currentlyTyping as string,
suggestion.key,
),
}))
.sort((a, b) => a.distance - b.distance)
.slice(0, 20);
} else {
topSuggestions.value = null;
}
if (ArrowRight?.value && topSuggestions.value !== null) {
selectedSuggestionIndex.value =
(selectedSuggestionIndex.value ?? -1) + 1;
if (selectedSuggestionIndex.value >= topSuggestions.value.length) {
selectedSuggestionIndex.value = 0;
}
suggestionRefs.value[selectedSuggestionIndex.value]?.scrollIntoView({
behavior: "smooth",
block: "nearest",
});
}
if (ArrowLeft?.value && topSuggestions.value !== null) {
selectedSuggestionIndex.value =
(selectedSuggestionIndex.value ?? topSuggestions.value.length) - 1;
if (selectedSuggestionIndex.value < 0) {
selectedSuggestionIndex.value = topSuggestions.value.length - 1;
}
suggestionRefs.value[selectedSuggestionIndex.value]?.scrollIntoView({
behavior: "smooth",
block: "nearest",
});
}
if ((Tab?.value || Enter?.value) && topSuggestions.value !== null) {
const suggestion =
topSuggestions.value[selectedSuggestionIndex.value ?? 0];
if (suggestion) {
emit("autocomplete", suggestion.key);
}
}
});
const emit = defineEmits<{
autocomplete: [suggestion: string];
}>();
</script>

103
components/composer/emoji-suggestbox.vue
View file

@ -1,100 +1,29 @@
<template>
<Suggestbox class="max-h-40 overflow-auto !w-auto !flex-row">
<div v-for="(emoji, index) in topEmojis" :key="emoji.shortcode" @click="emit('autocomplete', emoji.shortcode)"
:ref="el => { if (el) emojiRefs[index] = el as Element }" :title="emoji.shortcode"
:class="['flex', 'justify-center', 'shrink-0', 'items-center', 'p-2', 'size-12', 'hover:bg-dark-900/70', { 'bg-primary-500': index === selectedEmojiIndex }]">
<img :src="emoji.url" class="w-full h-full object-contain"
:alt="`Emoji with shortcode ${emoji.shortcode}`" />
</div>
</Suggestbox>
<AutocompleteSuggestbox :currently-typing="currentlyTypingEmoji" :textarea="textarea" :suggestions="emojis"
:distance-function="distance">
<template #default="{ suggestion }">
<Avatar :src="(suggestion.value as Emoji).url" class="w-full h-full [&>img]:object-contain rounded"
:alt="`Emoji with shortcode ${(suggestion.value as Emoji).shortcode}`" />
</template>
</AutocompleteSuggestbox>
</template>
<script lang="ts" setup>
import type { Emoji } from "@lysand-org/client/types";
import { distance } from "fastest-levenshtein";
import Suggestbox from "./suggestbox.vue";
const props = defineProps<{
import Avatar from "../avatars/avatar.vue";
import AutocompleteSuggestbox from "./autocomplete-suggestbox.vue";
defineProps<{
currentlyTypingEmoji: string | null;
textarea: HTMLTextAreaElement | undefined;
}>();
const emojiRefs = ref<Element[]>([]);
const { Tab, ArrowRight, ArrowLeft, Enter } = useMagicKeys({
target: props.textarea,
passive: false,
onEventFired(e) {
if (
["Tab", "Enter", "ArrowRight", "ArrowLeft"].includes(e.key) &&
topEmojis.value !== null
) {
e.preventDefault();
}
},
});
const identity = useCurrentIdentity();
const topEmojis = ref<Emoji[] | null>(null);
const selectedEmojiIndex = ref<number | null>(null);
watchEffect(() => {
if (!identity.value) {
return;
}
if (props.currentlyTypingEmoji !== null) {
topEmojis.value = identity.value.emojis
.map((emoji) => ({
...emoji,
distance: distance(
props.currentlyTypingEmoji as string,
emoji.shortcode,
),
}))
.sort((a, b) => a.distance - b.distance)
.slice(0, 20);
} else {
topEmojis.value = null;
}
if (ArrowRight?.value && topEmojis.value !== null) {
selectedEmojiIndex.value = (selectedEmojiIndex.value ?? -1) + 1;
if (selectedEmojiIndex.value >= topEmojis.value.length) {
selectedEmojiIndex.value = 0;
}
emojiRefs.value[selectedEmojiIndex.value]?.scrollIntoView({
behavior: "smooth",
block: "nearest",
});
}
if (ArrowLeft?.value && topEmojis.value !== null) {
selectedEmojiIndex.value =
(selectedEmojiIndex.value ?? topEmojis.value.length) - 1;
if (selectedEmojiIndex.value < 0) {
selectedEmojiIndex.value = topEmojis.value.length - 1;
}
emojiRefs.value[selectedEmojiIndex.value]?.scrollIntoView({
behavior: "smooth",
block: "nearest",
});
}
if ((Tab?.value || Enter?.value) && topEmojis.value !== null) {
const emoji = topEmojis.value[selectedEmojiIndex.value ?? 0];
if (emoji) {
emit("autocomplete", emoji.shortcode);
}
}
});
// When currentlyTypingEmoji changes, reset the selected emoji index
watch(
() => props.currentlyTypingEmoji,
() => {
selectedEmojiIndex.value = null;
},
const emojis = computed(
() =>
identity.value?.emojis.map((emoji) => ({
key: emoji.shortcode,
value: emoji,
})) ?? [],
);
const emit = defineEmits<{
autocomplete: [emoji: string];
}>();
</script>

108
components/composer/mention-suggestbox.vue
View file

@ -1,102 +1,42 @@
<template>
<Suggestbox class="max-h-40 overflow-auto !w-auto !flex-row">
<div v-for="(user, index) in topUsers" :key="user.username" @click="emit('autocomplete', user.acct)"
:ref="el => { if (el) userRefs[index] = el as Element }" :title="user.acct"
:class="['flex', 'justify-center', 'shrink-0', 'items-center', 'p-2', 'size-12', 'hover:bg-dark-900/70', { 'bg-primary-500': index === selectedUserIndex }]">
<img :src="user.avatar" class="w-full h-full object-contain" :alt="`User ${user.acct}`" />
</div>
</Suggestbox>
<AutocompleteSuggestbox :currently-typing="currentlyTypingMention" :textarea="textarea" :suggestions="mentions"
:distance-function="distance">
<template #default="{ suggestion }">
<Avatar :src="(suggestion.value as Account).avatar" class="w-full h-full rounded"
:alt="`User ${(suggestion.value as Account).acct}`" />
</template>
</AutocompleteSuggestbox>
</template>
<script lang="ts" setup>
import type { Account } from "@lysand-org/client/types";
import { distance } from "fastest-levenshtein";
import Suggestbox from "./suggestbox.vue";
import Avatar from "../avatars/avatar.vue";
import AutocompleteSuggestbox from "./autocomplete-suggestbox.vue";
const props = defineProps<{
currentlyTypingMention: string | null;
textarea: HTMLTextAreaElement | undefined;
}>();
const userRefs = ref<Element[]>([]);
const { Tab, ArrowRight, ArrowLeft, Enter } = useMagicKeys({
target: props.textarea,
passive: false,
onEventFired(e) {
if (
["Tab", "Enter", "ArrowRight", "ArrowLeft"].includes(e.key) &&
topUsers.value !== null
) {
e.preventDefault();
}
},
});
const topUsers = ref<Account[] | null>(null);
const selectedUserIndex = ref<number | null>(null);
const client = useClient();
const mentions = ref<{ key: string; value: Account }[]>([]);
watch(
[ArrowRight, ArrowLeft, Tab, Enter, () => props.currentlyTypingMention],
async () => {
if (props.currentlyTypingMention !== null) {
const users = await client.value.searchAccount(
props.currentlyTypingMention,
{ limit: 20 },
);
topUsers.value = users.data
.map((user) => ({
...user,
distance: distance(
props.currentlyTypingMention as string,
user.username,
),
}))
.sort((a, b) => a.distance - b.distance)
.slice(0, 20);
} else {
topUsers.value = null;
}
if (ArrowRight?.value && topUsers.value !== null) {
selectedUserIndex.value = (selectedUserIndex.value ?? -1) + 1;
if (selectedUserIndex.value >= topUsers.value.length) {
selectedUserIndex.value = 0;
}
userRefs.value[selectedUserIndex.value]?.scrollIntoView({
behavior: "smooth",
block: "nearest",
});
}
if (ArrowLeft?.value && topUsers.value !== null) {
selectedUserIndex.value =
(selectedUserIndex.value ?? topUsers.value.length) - 1;
if (selectedUserIndex.value < 0) {
selectedUserIndex.value = topUsers.value.length - 1;
}
userRefs.value[selectedUserIndex.value]?.scrollIntoView({
behavior: "smooth",
block: "nearest",
});
}
if ((Tab?.value || Enter?.value) && topUsers.value !== null) {
const user = topUsers.value[selectedUserIndex.value ?? 0];
if (user) {
emit("autocomplete", user.username);
}
}
},
);
// When currentlyTypingMention changes, reset the selected user index
watch(
() => props.currentlyTypingMention,
() => {
selectedUserIndex.value = null;
async (value) => {
if (!value) {
return;
}
const users = await client.value.searchAccount(value, { limit: 20 });
mentions.value = users.data
.map((user) => ({
key: user.username,
value: user,
distance: distance(value, user.username),
}))
.sort((a, b) => a.distance - b.distance)
.slice(0, 20);
},
);
const emit = defineEmits<{
autocomplete: [username: string];
}>();
</script>