From 860247cf04f39954aa59558cf87aa9d32860b890 Mon Sep 17 00:00:00 2001 From: YUCLing Date: Sat, 23 Nov 2024 11:37:15 +0800 Subject: [PATCH 1/2] fix: tag input width when containing CJK chars --- .../js/src/common/components/TagSelectionModal.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/extensions/tags/js/src/common/components/TagSelectionModal.tsx b/extensions/tags/js/src/common/components/TagSelectionModal.tsx index 7b9366f7b8..76ea5fa455 100644 --- a/extensions/tags/js/src/common/components/TagSelectionModal.tsx +++ b/extensions/tags/js/src/common/components/TagSelectionModal.tsx @@ -135,6 +135,14 @@ export default class TagSelectionModal< return this.attrs.title; } + lengthWithCJK(text: string) { + let length = 0; + for (const char of text) { + length += /[\u4E00-\u9FFF\u3400-\u4DBF\uF900-\uFAFF]/.test(char) ? 2 : 1; + } + return length; + } + content() { if (this.loading || !this.tags) { return ; @@ -145,7 +153,9 @@ export default class TagSelectionModal< const secondaryCount = this.secondaryCount(); const tags = this.getFilteredTags(); - const inputWidth = Math.max(extractText(this.getInstruction(primaryCount, secondaryCount)).length, this.filter().length); + // 1 CJK character's width equals to 2ch, + // so we count 1 CJK character as 2 characters. + const inputWidth = Math.max(this.lengthWithCJK(extractText(this.getInstruction(primaryCount, secondaryCount))), this.lengthWithCJK(this.filter())); return [
From db8012c73ba6710d7cabbb9dccdd63458f83b705 Mon Sep 17 00:00:00 2001 From: YUCLing Date: Sat, 23 Nov 2024 14:30:49 +0800 Subject: [PATCH 2/2] chore: code format --- .../tags/js/src/common/components/TagSelectionModal.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/extensions/tags/js/src/common/components/TagSelectionModal.tsx b/extensions/tags/js/src/common/components/TagSelectionModal.tsx index 76ea5fa455..1f67f788c6 100644 --- a/extensions/tags/js/src/common/components/TagSelectionModal.tsx +++ b/extensions/tags/js/src/common/components/TagSelectionModal.tsx @@ -155,7 +155,10 @@ export default class TagSelectionModal< // 1 CJK character's width equals to 2ch, // so we count 1 CJK character as 2 characters. - const inputWidth = Math.max(this.lengthWithCJK(extractText(this.getInstruction(primaryCount, secondaryCount))), this.lengthWithCJK(this.filter())); + const inputWidth = Math.max( + this.lengthWithCJK(extractText(this.getInstruction(primaryCount, secondaryCount))), + this.lengthWithCJK(this.filter()) + ); return [