コード入力ボックスでTabを入力できるように (#12671)

This commit is contained in:
1STEP621 2023-12-15 17:18:31 +09:00 committed by GitHub
parent eacc2040a1
commit c41924399b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 16 additions and 6 deletions

View file

@ -91,6 +91,16 @@ const onKeydown = (ev: KeyboardEvent) => {
if (ev.code === 'Enter') { if (ev.code === 'Enter') {
emit('enter'); emit('enter');
} }
if (props.code && ev.key === 'Tab') {
const pos = inputEl.value?.selectionStart ?? 0;
const posEnd = inputEl.value?.selectionEnd ?? v.value.length;
v.value = v.value.slice(0, pos) + '\t' + v.value.slice(posEnd);
nextTick(() => {
inputEl.value?.setSelectionRange(pos + 1, pos + 1);
});
ev.preventDefault();
}
}; };
const updated = () => { const updated = () => {

View file

@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts._play.summary }}</template> <template #label>{{ i18n.ts._play.summary }}</template>
</MkTextarea> </MkTextarea>
<MkButton primary @click="selectPreset">{{ i18n.ts.selectFromPresets }}<i class="ti ti-chevron-down"></i></MkButton> <MkButton primary @click="selectPreset">{{ i18n.ts.selectFromPresets }}<i class="ti ti-chevron-down"></i></MkButton>
<MkTextarea v-model="script" class="_monospace" tall spellcheck="false"> <MkTextarea v-model="script" code tall spellcheck="false">
<template #label>{{ i18n.ts._play.script }}</template> <template #label>{{ i18n.ts._play.script }}</template>
</MkTextarea> </MkTextarea>
<div class="_buttons"> <div class="_buttons">

View file

@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkKeyValue> </MkKeyValue>
</FormSplit> </FormSplit>
<MkTextarea v-model="valueForEditor" tall class="_monospace"> <MkTextarea v-model="valueForEditor" tall code>
<template #label>{{ i18n.ts.value }} (JSON)</template> <template #label>{{ i18n.ts.value }} (JSON)</template>
</MkTextarea> </MkTextarea>

View file

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps_m"> <div class="_gaps_m">
<FormInfo warn>{{ i18n.ts.customCssWarn }}</FormInfo> <FormInfo warn>{{ i18n.ts.customCssWarn }}</FormInfo>
<MkTextarea v-model="localCustomCss" manualSave tall class="_monospace" style="tab-size: 2;"> <MkTextarea v-model="localCustomCss" manualSave tall code style="tab-size: 2;">
<template #label>CSS</template> <template #label>CSS</template>
</MkTextarea> </MkTextarea>
</div> </div>

View file

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps_m"> <div class="_gaps_m">
<FormInfo warn>{{ i18n.ts._plugin.installWarn }}</FormInfo> <FormInfo warn>{{ i18n.ts._plugin.installWarn }}</FormInfo>
<MkTextarea v-model="code" tall> <MkTextarea v-model="code" tall code>
<template #label>{{ i18n.ts.code }}</template> <template #label>{{ i18n.ts.code }}</template>
</MkTextarea> </MkTextarea>

View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div class="_gaps_m"> <div class="_gaps_m">
<MkTextarea v-model="installThemeCode"> <MkTextarea v-model="installThemeCode" code>
<template #label>{{ i18n.ts._theme.code }}</template> <template #label>{{ i18n.ts._theme.code }}</template>
</MkTextarea> </MkTextarea>

View file

@ -51,7 +51,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts.editCode }}</template> <template #label>{{ i18n.ts.editCode }}</template>
<div class="_gaps_m"> <div class="_gaps_m">
<MkTextarea v-model="themeCode" tall> <MkTextarea v-model="themeCode" tall code>
<template #label>{{ i18n.ts._theme.code }}</template> <template #label>{{ i18n.ts._theme.code }}</template>
</MkTextarea> </MkTextarea>
<MkButton primary @click="applyThemeCode">{{ i18n.ts.apply }}</MkButton> <MkButton primary @click="applyThemeCode">{{ i18n.ts.apply }}</MkButton>