Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages 1 Activity

fix: disallow media description exceeding limits (#1854)

Browse source
This commit is contained in:
Zaidhaan 2023-03-06 21:12:31 +08:00 committed by GitHub
parent 8fd697126b
commit cb0b7b58bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
components/publish/PublishAttachment.vue
View file

@ -15,6 +15,9 @@ const emit = defineEmits<{
(evt: 'setDescription', description: string): void
}>()
// from https://github.com/mastodon/mastodon/blob/dfa984/app/models/media_attachment.rb#L40
const maxDescriptionLength = 1500
const isEditDialogOpen = ref(false)
const description = ref(props.attachment.description ?? '')
const toggleApply = () => {
@ -55,7 +58,10 @@ const toggleApply = () => {
</h1>
<div flex flex-col gap-2>
<textarea v-model="description" p-3 h-50 bg-base rounded-2 border-strong border-1 md:w-100 />
<button btn-outline @click="toggleApply">
<div flex flex-row-reverse>
<PublishCharacterCounter :length="description.length" :max="maxDescriptionLength" />
</div>
<button btn-outline :disabled="description.length > maxDescriptionLength" @click="toggleApply">
{{ $t('action.apply') }}
</button>
</div>

12
components/publish/PublishCharacterCounter.vue Normal file
View file

@ -0,0 +1,12 @@
<script setup lang="ts">
const props = defineProps<{
max: number
length: number
}>()
</script>
<template>
<div dir="ltr" pointer-events-none pe-1 pt-2 text-sm tabular-nums text-secondary flex gap="0.5" :class="{ 'text-rose-500': length > max }">
{{ length ?? 0 }}<span text-secondary-light>/</span><span text-secondary-light>{{ max }}</span>
</div>
</template>

12
components/publish/PublishWidget.vue
View file

@ -97,6 +97,10 @@ const characterCount = $computed(() => {
return length
})
const isExceedingCharacterLimit = $computed(() => {
return characterCount > characterLimit.value
})
const postLanguageDisplay = $computed(() => languagesNameList.find(i => i.code === (draft.params.language || preferredLanguage))?.nativeName)
async function handlePaste(evt: ClipboardEvent) {
@ -292,9 +296,7 @@ defineExpose({
<div flex-auto />
<div dir="ltr" pointer-events-none pe-1 pt-2 text-sm tabular-nums text-secondary flex gap="0.5" :class="{ 'text-rose-500': characterCount > characterLimit }">
{{ characterCount ?? 0 }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
</div>
<PublishCharacterCounter :max="characterLimit" :length="characterCount" />
<CommonTooltip placement="top" :content="$t('tooltip.change_language')">
<CommonDropdown placement="bottom" auto-boundary-max-size>
@ -337,12 +339,12 @@ defineExpose({
</button>
</CommonTooltip>
<CommonTooltip v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!isPublishDisabled">
<CommonTooltip v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!(isPublishDisabled || isExceedingCharacterLimit)">
<button
btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center
md:w-fit
class="publish-button"
:aria-disabled="isPublishDisabled"
:aria-disabled="isPublishDisabled || isExceedingCharacterLimit"
aria-describedby="publish-tooltip"
@click="publish"
>