zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

fix: disallow media description exceeding limits (#1854)

zio/stable
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 (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 isEditDialogOpen = ref(false)
const description = ref(props.attachment.description ?? '') const description = ref(props.attachment.description ?? '')
const toggleApply = () => { const toggleApply = () => {
@ -55,7 +58,10 @@ const toggleApply = () => {
</h1> </h1>
<div flex flex-col gap-2> <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 /> <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') }} {{ $t('action.apply') }}
</button> </button>
</div> </div>

12
components/publish/PublishCharacterCounter.vue 100644
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 return length
}) })
const isExceedingCharacterLimit = $computed(() => {
return characterCount > characterLimit.value
})
const postLanguageDisplay = $computed(() => languagesNameList.find(i => i.code === (draft.params.language || preferredLanguage))?.nativeName) const postLanguageDisplay = $computed(() => languagesNameList.find(i => i.code === (draft.params.language || preferredLanguage))?.nativeName)
async function handlePaste(evt: ClipboardEvent) { async function handlePaste(evt: ClipboardEvent) {
@ -292,9 +296,7 @@ defineExpose({
<div flex-auto /> <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 }"> <PublishCharacterCounter :max="characterLimit" :length="characterCount" />
{{ characterCount ?? 0 }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
</div>
<CommonTooltip placement="top" :content="$t('tooltip.change_language')"> <CommonTooltip placement="top" :content="$t('tooltip.change_language')">
<CommonDropdown placement="bottom" auto-boundary-max-size> <CommonDropdown placement="bottom" auto-boundary-max-size>
@ -337,12 +339,12 @@ defineExpose({
</button> </button>
</CommonTooltip> </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 <button
btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center
md:w-fit md:w-fit
class="publish-button" class="publish-button"
:aria-disabled="isPublishDisabled" :aria-disabled="isPublishDisabled || isExceedingCharacterLimit"
aria-describedby="publish-tooltip" aria-describedby="publish-tooltip"
@click="publish" @click="publish"
> >