From 47558a6648ac6f53fb3c415fe353c45e21bb9b5d Mon Sep 17 00:00:00 2001 From: YAVIIGI <118232419+YAVIIGI@users.noreply.github.com> Date: Wed, 27 Dec 2023 20:57:43 +0900 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=8A=95=E7=A8=BF=E3=82=A6?= =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=83=89=E3=82=A6=E3=81=ABMFM=E8=A6=81?= =?UTF-8?q?=E7=B4=A0=E3=82=92=E8=BF=BD=E5=8A=A0=E3=81=99=E3=82=8B=E3=83=9C?= =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=81=AE=E8=BF=BD=E5=8A=A0=20(#12788)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * functionPicker の追加 * Update CHANGELOG.md * fix lint errors * Add addMfmFunction * add enableQuickAddMfmFunction setting * Update CHANGELOG.md issue 番号を追加 * Update index.d.ts * change 'functionPicker' to 'mfmFunctionPicker' * Change indent from 4 space to 1 tab --------- Co-authored-by: syuilo --- CHANGELOG.md | 3 +- locales/index.d.ts | 2 + locales/ja-JP.yml | 2 + .../frontend/src/components/MkPostForm.vue | 12 ++++ .../frontend/src/pages/settings/general.vue | 2 + .../src/scripts/mfm-function-picker.ts | 61 +++++++++++++++++++ packages/frontend/src/store.ts | 4 ++ 7 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 packages/frontend/src/scripts/mfm-function-picker.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 1f65f6278..199a420f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,8 +19,9 @@ - Fix: 自分のdirect noteがuser list timelineに追加されない ### Client -- Fix: 一部のモデログ(logYellowでの表示対象)について、表示の色が変わらない問題を修正 - Feat: AiScript専用のMFM構文`$[clickable.ev=EVENTNAME ...]`を追加。`Mk:C:mfm`のオプション`onClickEv`に関数を渡すと、クリック時に`EVENTNAME`を引数にして呼び出す +- Enhance: MFM入力補助ボタンを投稿フォームに表示できるように #12787 +- Fix: 一部のモデログ(logYellowでの表示対象)について、表示の色が変わらない問題を修正 - Fix: `fg`/`bg`MFMに長い単語を指定すると、オーバーフローされずはみ出る問題を修正 ### Server diff --git a/locales/index.d.ts b/locales/index.d.ts index 89bdddbdc..60e88a219 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -1184,6 +1184,8 @@ export interface Locale { "overwriteContentConfirm": string; "seasonalScreenEffect": string; "decorate": string; + "addMfmFunction": string; + "enableQuickAddMfmFunction": string; "_announcement": { "forExistingUsers": string; "forExistingUsersDescription": string; diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 7bc588929..3d31dcef4 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1181,6 +1181,8 @@ remainingN: "残り: {n}" overwriteContentConfirm: "現在の内容に上書きされますがよろしいですか？" seasonalScreenEffect: "季節に応じた画面の演出" decorate: "デコる" +addMfmFunction: "装飾を追加" +enableQuickAddMfmFunction: "高度なMFMのピッカーを表示する" _announcement: forExistingUsers: "既存ユーザーのみ" diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue index 5e7ca5539..3aacf4c2d 100644 --- a/packages/frontend/src/components/MkPostForm.vue +++ b/packages/frontend/src/components/MkPostForm.vue @@ -86,6 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-only +
@@ -126,6 +127,7 @@ import MkRippleEffect from '@/components/MkRippleEffect.vue'; import { miLocalStorage } from '@/local-storage.js'; import { claimAchievement } from '@/scripts/achievements.js'; import { emojiPicker } from '@/scripts/emoji-picker.js'; +import { mfmFunctionPicker } from '@/scripts/mfm-function-picker.js'; const modal = inject('modal'); @@ -182,6 +184,8 @@ const poll = ref<{ const useCw = ref(!!props.initialCw); const showPreview = ref(defaultStore.state.showPreview); watch(showPreview, () => defaultStore.set('showPreview', showPreview.value)); +const showAddMfmFunction = ref(defaultStore.state.enableQuickAddMfmFunction); +watch(showAddMfmFunction, () => defaultStore.set('enableQuickAddMfmFunction', showAddMfmFunction.value)); const cw = ref(props.initialCw ?? null); const localOnly = ref(props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly); const visibility = ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility) as typeof Misskey.noteVisibilities[number]); @@ -863,6 +867,14 @@ async function insertEmoji(ev: MouseEvent) { ); } +async function insertMfmFunction(ev: MouseEvent) { + mfmFunctionPicker( + ev.currentTarget ?? ev.target, + textareaEl.value, + text, + ); +} + function showActions(ev) { os.popupMenu(postFormActions.map(action => ({ text: action.title, diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index 826ede17e..3e5f5cb8c 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -48,6 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only {{ i18n.ts.collapseRenotes }} {{ i18n.ts.enableAdvancedMfm }} {{ i18n.ts.enableAnimatedMfm }} + {{ i18n.ts.enableQuickAddMfmFunction }} {{ i18n.ts.showGapBetweenNotesInTimeline }} {{ i18n.ts.loadRawImages }} @@ -268,6 +269,7 @@ const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect')); const showGapBetweenNotesInTimeline = computed(defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline')); const animatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm')); const advancedMfm = computed(defaultStore.makeGetterSetter('advancedMfm')); +const enableQuickAddMfmFunction = computed(defaultStore.makeGetterSetter('enableQuickAddMfmFunction')); const emojiStyle = computed(defaultStore.makeGetterSetter('emojiStyle')); const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer')); const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages')); diff --git a/packages/frontend/src/scripts/mfm-function-picker.ts b/packages/frontend/src/scripts/mfm-function-picker.ts new file mode 100644 index 000000000..465926fe0 --- /dev/null +++ b/packages/frontend/src/scripts/mfm-function-picker.ts @@ -0,0 +1,61 @@ +/* + * SPDX-FileCopyrightText: syuilo and other misskey contributors + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { Ref, nextTick } from 'vue'; +import * as os from '@/os.js'; +import { i18n } from '@/i18n.js'; +import { MFM_TAGS } from '@/const.js'; + +/** + * MFMの装飾のリストを表示する + */ +export function mfmFunctionPicker(src: any, textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref) { + return new Promise((res, rej) => { + os.popupMenu([{ + text: i18n.ts.addMfmFunction, + type: 'label', + }, ...getFunctionList(textArea, textRef)], src); + }); +} + +function getFunctionList(textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref) : object[] { + const ret: object[] = []; + MFM_TAGS.forEach(tag => { + ret.push({ + text: tag, + icon: 'ti ti-icons', + action: () => add(textArea, textRef, tag), + }); + }); + return ret; +} + +function add(textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref, type: string) { + const caretStart: number = textArea.selectionStart as number; + const caretEnd: number = textArea.selectionEnd as number; + + MFM_TAGS.forEach(tag => { + if (type === tag) { + if (caretStart === caretEnd) { + // 単純にFunctionを追加 + const trimmedText = `${textRef.value.substring(0, caretStart)}$[${type} ]${textRef.value.substring(caretEnd)}`; + textRef.value = trimmedText; + } else { + // 選択範囲を囲むようにFunctionを追加 + const trimmedText = `${textRef.value.substring(0, caretStart)}$[${type} ${textRef.value.substring(caretStart, caretEnd)}]${textRef.value.substring(caretEnd)}`; + textRef.value = trimmedText; + } + } + }); + + const nextCaretStart: number = caretStart + 3 + type.length; + const nextCaretEnd: number = caretEnd + 3 + type.length; + + // キャレットを戻す + nextTick(() => { + textArea.focus(); + textArea.setSelectionRange(nextCaretStart, nextCaretEnd); + }); +} diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 3f8a5f5a6..46634af96 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -219,6 +219,10 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: true, }, + enableQuickAddMfmFunction: { + where: 'device', + default: false, + }, loadRawImages: { where: 'device', default: false,