sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: truncate image descriptions (#7699)

Browse Source 
* move truncate function to separate file to reuse it

* truncate image descriptions

* show image description limit in UI

* correctly treat null

Co-authored-by: nullobsi <me@nullob.si>

* make truncate Unicode-aware

The strings that truncate returns should now be valid Unicode.

PostgreSQL also counts Unicode Code Points instead of bytes so this
should be correct.

* move truncate to internal, validate in API

Truncating could also be done in src/services/drive/add-file.ts or
src/services/drive/upload-from-url.ts but those would also affect
local images. But local images should result in a hard error if the
image comment is too long.

* avoid overwriting

Co-authored-by: nullobsi <me@nullob.si>
This commit is contained in:
Johann150
2021-09-29 18:44:22 +02:00
committed by GitHub
parent c5e5a9b8ef
commit 414f1d1158
7 changed files with 51 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/client/components/media-caption.vue
View File

@@ -3,10 +3,13 @@
<div class="container">
<div class="fullwidth top-caption">
<div class="mk-dialog">
<header v-if="title"><Mfm :text="title"/></header>
<header>
<Mfm v-if="title" class="title" :text="title"/>
<span class="text-count" :class="{ over: remainingLength < 0 }">{{ remainingLength }}</span>
</header>
<textarea autofocus v-model="inputValue" :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
<div class="buttons" v-if="(showOkButton || showCancelButton)">
<MkButton inline @click="ok" primary>{{ $ts.ok }}</MkButton>
<MkButton inline @click="ok" primary :disabled="remainingLength < 0">{{ $ts.ok }}</MkButton>
<MkButton inline @click="cancel" >{{ $ts.cancel }}</MkButton>
</div>
</div>
@@ -26,10 +29,12 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { length } from 'stringz';
import MkModal from '@client/components/ui/modal.vue';
import MkButton from '@client/components/ui/button.vue';
import bytes from '@client/filters/bytes';
import number from '@client/filters/number';
import { DB_MAX_IMAGE_COMMENT_LENGTH } from '@/misc/hard-limits';
export default defineComponent({
components: {
@@ -79,6 +84,13 @@ export default defineComponent({
document.removeEventListener('keydown', this.onKeydown);
},
computed: {
remainingLength(): number {
if (typeof this.inputValue != "string") return DB_MAX_IMAGE_COMMENT_LENGTH;
return DB_MAX_IMAGE_COMMENT_LENGTH - length(this.inputValue);
}
},
methods: {
bytes,
number,
@@ -156,8 +168,18 @@ export default defineComponent({
> header {
margin: 0 0 8px 0;
font-weight: bold;
font-size: 20px;
position: relative;
> .title {
font-weight: bold;
font-size: 20px;
}
> .text-count {
opacity: 0.7;
position: absolute;
right: 0;
}
}
> .buttons {