curse/Curse
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey.git synced 2026-03-21 03:30:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): mfmFunctionPickerを使用して挿入する際のハンドリングを改善 (#17018)

Browse Source 
* fix(frontend): mfmFunctionPickerを使用して絵文字を挿入する際のハンドリングを改善

* fix

* Update MkPostForm.vue

* Update Changelog

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
かっこかり
2026-01-08 21:08:27 +09:00
committed by GitHub
parent cd973b252a
commit ece4efcefe
4 changed files with 40 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/frontend/src/components/MkPostForm.vue
View File

@@ -1166,17 +1166,41 @@ async function insertEmoji(ev: MouseEvent) {
},
() => {
textAreaReadOnly.value = false;
nextTick(() => focus());
nextTick(() => {
if (textareaEl.value) {
textareaEl.value.focus();
textareaEl.value.setSelectionRange(pos, posEnd);
}
});
},
);
}
async function insertMfmFunction(ev: MouseEvent) {
if (textareaEl.value == null) return;
let pos = textareaEl.value.selectionStart ?? 0;
let posEnd = textareaEl.value.selectionEnd ?? text.value.length;
mfmFunctionPicker(
ev.currentTarget ?? ev.target,
textareaEl.value,
text,
(tag) => {
if (pos === posEnd) {
text.value = `${text.value.substring(0, pos)}$[${tag} ]${text.value.substring(pos)}`;
pos += tag.length + 3;
posEnd = pos;
} else {
text.value = `${text.value.substring(0, pos)}$[${tag} ${text.value.substring(pos, posEnd)}]${text.value.substring(posEnd)}`;
pos += tag.length + 3;
posEnd = pos;
}
},
() => {
nextTick(() => {
if (textareaEl.value) {
textareaEl.value.focus();
textareaEl.value.setSelectionRange(pos, posEnd);
}
});
},
);
}

2
packages/frontend/src/os.ts
View File

@@ -654,6 +654,7 @@ export function popupMenu(items: (MenuItem | null)[], anchorElement?: HTMLElemen
align?: string;
width?: number;
onClosing?: () => void;
onClosed?: () => void;
}): Promise<void> {
if (!(anchorElement instanceof HTMLElement)) {
anchorElement = null;
@@ -672,6 +673,7 @@ export function popupMenu(items: (MenuItem | null)[], anchorElement?: HTMLElemen
resolve();
dispose();
returnFocusTo = null;
options?.onClosed?.();
},
closing: () => {
options?.onClosing?.();

48
packages/frontend/src/utility/mfm-function-picker.ts
View File

@@ -3,55 +3,27 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { nextTick } from 'vue';
import { MFM_TAGS } from '@@/js/const.js';
import type { Ref } from 'vue';
import type { MenuItem } from '@/types/menu.js';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
/**
* MFMの装飾のリストを表示する
*/
export function mfmFunctionPicker(anchorElement: HTMLElement | EventTarget | null, textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>) {
export function mfmFunctionPicker(anchorElement: HTMLElement | EventTarget | null, onChosen: (tag: string) => void, onClosed?: () => void) {
os.popupMenu([{
text: i18n.ts.addMfmFunction,
type: 'label',
}, ...getFunctionList(textArea, textRef)], anchorElement);
}
function getFunctionList(textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>): MenuItem[] {
return MFM_TAGS.map(tag => ({
}, ...MFM_TAGS.map(tag => ({
text: tag,
icon: 'ti ti-icons',
action: () => add(textArea, textRef, tag),
}));
}
function add(textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>, 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);
action: () => {
onChosen(tag);
},
}))], anchorElement, {
onClosed: () => {
if (onClosed) onClosed();
},
});
}