refactor: migrate to nuxt compatibilityVersion: 4 (#3298)
This commit is contained in:
Daniel Roe
GitHub
parent
46e4433e1c
commit
a3fbc056a9
342 changed files with 1200 additions and 2932 deletions
56
app/components/tiptap/TiptapCodeBlock.vue
Normal file
56
app/components/tiptap/TiptapCodeBlock.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<script setup lang="ts">
|
||||
import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
|
||||
|
||||
const { node, updateAttributes } = defineProps(nodeViewProps)
|
||||
|
||||
const languages = [
|
||||
'c',
|
||||
'cpp',
|
||||
'csharp',
|
||||
'css',
|
||||
'dart',
|
||||
'go',
|
||||
'html',
|
||||
'java',
|
||||
'javascript',
|
||||
'jsx',
|
||||
'kotlin',
|
||||
'python',
|
||||
'rust',
|
||||
'svelte',
|
||||
'swift',
|
||||
'tsx',
|
||||
'typescript',
|
||||
'vue',
|
||||
]
|
||||
|
||||
const selectedLanguage = computed({
|
||||
get() {
|
||||
return node.attrs.language
|
||||
},
|
||||
set(language) {
|
||||
updateAttributes({ language })
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NodeViewWrapper>
|
||||
<div relative my2>
|
||||
<select
|
||||
v-model="selectedLanguage"
|
||||
contenteditable="false"
|
||||
absolute top-1 right-1 rounded px2 op0 hover:op100 focus:op100 transition
|
||||
outline-none border="~ base"
|
||||
>
|
||||
<option :value="null">
|
||||
plain
|
||||
</option>
|
||||
<option v-for="(language, index) in languages" :key="index" :value="language">
|
||||
{{ language }}
|
||||
</option>
|
||||
</select>
|
||||
<pre class="code-block"><code><NodeViewContent /></code></pre>
|
||||
</div>
|
||||
</NodeViewWrapper>
|
||||
</template>
|
||||
103
app/components/tiptap/TiptapEmojiList.vue
Normal file
103
app/components/tiptap/TiptapEmojiList.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<script setup lang="ts">
|
||||
import type { CommandHandler } from '~/composables/command'
|
||||
import type { CustomEmoji, Emoji } from '~/composables/tiptap/suggestion'
|
||||
import { getEmojiMatchesInText } from '@iconify/utils/lib/emoji/replace/find'
|
||||
import { emojiFilename, emojiPrefix, emojiRegEx } from '~~/config/emojis'
|
||||
import { isCustomEmoji } from '~/composables/tiptap/suggestion'
|
||||
|
||||
const { items, command } = defineProps<{
|
||||
items: (CustomEmoji | Emoji)[]
|
||||
command: CommandHandler<any>
|
||||
isPending?: boolean
|
||||
}>()
|
||||
|
||||
const emojis = computed(() => {
|
||||
if (import.meta.server)
|
||||
return []
|
||||
|
||||
return items.map((item: CustomEmoji | Emoji) => {
|
||||
if (isCustomEmoji(item)) {
|
||||
return {
|
||||
title: item.shortcode,
|
||||
src: item.url,
|
||||
emoji: item,
|
||||
}
|
||||
}
|
||||
|
||||
const skin = item.skins.find(skin => skin.native !== undefined)
|
||||
const match = getEmojiMatchesInText(emojiRegEx, skin!.native)[0]
|
||||
const file = emojiFilename(match)
|
||||
|
||||
return {
|
||||
title: item.id,
|
||||
src: `/emojis/${emojiPrefix}/${file.filename}`,
|
||||
emoji: item,
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const selectedIndex = ref(0)
|
||||
|
||||
watch(() => items, () => {
|
||||
selectedIndex.value = 0
|
||||
})
|
||||
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
if (items.length === 0)
|
||||
return false
|
||||
|
||||
if (event.key === 'ArrowUp') {
|
||||
selectedIndex.value = ((selectedIndex.value + items.length) - 1) % items.length
|
||||
return true
|
||||
}
|
||||
else if (event.key === 'ArrowDown') {
|
||||
selectedIndex.value = (selectedIndex.value + 1) % items.length
|
||||
return true
|
||||
}
|
||||
else if (event.key === 'Enter') {
|
||||
selectItem(selectedIndex.value)
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
function selectItem(index: number) {
|
||||
const emoji = emojis.value[index]
|
||||
if (emoji)
|
||||
command(emoji)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
onKeyDown,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="isPending || items.length"
|
||||
relative bg-base text-base shadow border="~ base rounded"
|
||||
text-sm py-2 overflow-x-hidden overflow-y-auto max-h-100
|
||||
min-w-40 max-w-50
|
||||
>
|
||||
<template v-if="isPending">
|
||||
<div flex gap-1 items-center p2 animate-pulse>
|
||||
<div i-ri:loader-2-line animate-spin />
|
||||
<span>{{ $t('common.fetching') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="items.length">
|
||||
<CommonScrollIntoView
|
||||
v-for="(item, index) in emojis" :key="index"
|
||||
:active="index === selectedIndex"
|
||||
as="button"
|
||||
:class="index === selectedIndex ? 'bg-active' : 'text-secondary'"
|
||||
block m0 w-full text-left px2 py1
|
||||
@click="selectItem(index)"
|
||||
>
|
||||
<SearchEmojiInfo :emoji="item" />
|
||||
</CommonScrollIntoView>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else />
|
||||
</template>
|
||||
72
app/components/tiptap/TiptapHashtagList.vue
Normal file
72
app/components/tiptap/TiptapHashtagList.vue
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
import type { CommandHandler } from '~/composables/command'
|
||||
|
||||
const { items, command } = defineProps<{
|
||||
items: mastodon.v1.Tag[]
|
||||
command: CommandHandler<{ id: string }>
|
||||
isPending?: boolean
|
||||
}>()
|
||||
|
||||
const selectedIndex = ref(0)
|
||||
|
||||
watch(() => items, () => {
|
||||
selectedIndex.value = 0
|
||||
})
|
||||
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
if (items.length === 0)
|
||||
return false
|
||||
|
||||
if (event.key === 'ArrowUp') {
|
||||
selectedIndex.value = ((selectedIndex.value + items.length) - 1) % items.length
|
||||
return true
|
||||
}
|
||||
else if (event.key === 'ArrowDown') {
|
||||
selectedIndex.value = (selectedIndex.value + 1) % items.length
|
||||
return true
|
||||
}
|
||||
else if (event.key === 'Enter') {
|
||||
selectItem(selectedIndex.value)
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
function selectItem(index: number) {
|
||||
const item = items[index]
|
||||
if (item)
|
||||
command({ id: item.name })
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
onKeyDown,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="isPending || items.length" relative bg-base text-base shadow border="~ base rounded" text-sm py-2 overflow-x-hidden overflow-y-auto max-h-100>
|
||||
<template v-if="isPending">
|
||||
<div flex gap-1 items-center p2 animate-pulse>
|
||||
<div animate-spin preserve-3d>
|
||||
<div i-ri:loader-2-line />
|
||||
</div>
|
||||
<span>{{ $t('common.fetching') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="items.length">
|
||||
<CommonScrollIntoView
|
||||
v-for="(item, index) in items" :key="index"
|
||||
:active="index === selectedIndex"
|
||||
as="button"
|
||||
:class="index === selectedIndex ? 'bg-active' : 'text-secondary'"
|
||||
block m0 w-full text-left px2 py1
|
||||
@click="selectItem(index)"
|
||||
>
|
||||
<SearchHashtagInfo :hashtag="item" />
|
||||
</CommonScrollIntoView>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else />
|
||||
</template>
|
||||
72
app/components/tiptap/TiptapMentionList.vue
Normal file
72
app/components/tiptap/TiptapMentionList.vue
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<script setup lang="ts">
|
||||
import type { mastodon } from 'masto'
|
||||
import type { CommandHandler } from '~/composables/command'
|
||||
|
||||
const { items, command } = defineProps<{
|
||||
items: mastodon.v1.Account[]
|
||||
command: CommandHandler<{ id: string }>
|
||||
isPending?: boolean
|
||||
}>()
|
||||
|
||||
const selectedIndex = ref(0)
|
||||
|
||||
watch(() => items, () => {
|
||||
selectedIndex.value = 0
|
||||
})
|
||||
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
if (items.length === 0)
|
||||
return false
|
||||
|
||||
if (event.key === 'ArrowUp') {
|
||||
selectedIndex.value = ((selectedIndex.value + items.length) - 1) % items.length
|
||||
return true
|
||||
}
|
||||
else if (event.key === 'ArrowDown') {
|
||||
selectedIndex.value = (selectedIndex.value + 1) % items.length
|
||||
return true
|
||||
}
|
||||
else if (event.key === 'Enter') {
|
||||
selectItem(selectedIndex.value)
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
function selectItem(index: number) {
|
||||
const item = items[index]
|
||||
if (item)
|
||||
command({ id: item.acct })
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
onKeyDown,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="isPending || items.length" relative bg-base text-base shadow border="~ base rounded" text-sm py-2 overflow-x-hidden overflow-y-auto max-h-100>
|
||||
<template v-if="isPending">
|
||||
<div flex gap-1 items-center p2 animate-pulse>
|
||||
<div animate-spin preserve-3d>
|
||||
<div i-ri:loader-2-line />
|
||||
</div>
|
||||
<span>{{ $t('common.fetching') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="items.length">
|
||||
<CommonScrollIntoView
|
||||
v-for="(item, index) in items" :key="index"
|
||||
:active="index === selectedIndex"
|
||||
as="button"
|
||||
:class="index === selectedIndex ? 'bg-active' : 'text-secondary'"
|
||||
block m0 w-full text-left px2 py1
|
||||
@click="selectItem(index)"
|
||||
>
|
||||
<AccountInfo :account="item" />
|
||||
</CommonScrollIntoView>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else />
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue