fix: disallow media description exceeding limits (#1854)

components/publish/PublishAttachment.vue

@@ -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>

components/publish/PublishCharacterCounter.vue

@@ -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>

components/publish/PublishWidget.vue

@@ -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"
           >