(enhance) コード入力をMkCodeEditorに変更 (#12682)

This commit is contained in:
かっこかり 2023-12-16 13:18:12 +09:00 committed by GitHub
parent b1a7dcb05b
commit 17065418cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 85 additions and 37 deletions

View file

@ -4,6 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div>
<div :class="$style.label" @click="focus"><slot name="label"></slot></div>
<div :class="[$style.codeEditorRoot, { [$style.focused]: focused }]"> <div :class="[$style.codeEditorRoot, { [$style.focused]: focused }]">
<div :class="$style.codeEditorScroller"> <div :class="$style.codeEditorScroller">
<textarea <textarea
@ -24,10 +26,16 @@ SPDX-License-Identifier: AGPL-3.0-only
<XCode :class="$style.codeEditorHighlighter" :codeEditor="true" :code="v" :lang="lang"/> <XCode :class="$style.codeEditorHighlighter" :codeEditor="true" :code="v" :lang="lang"/>
</div> </div>
</div> </div>
<div :class="$style.caption"><slot name="caption"></slot></div>
<MkButton v-if="manualSave && changed" primary :class="$style.save" @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch, toRefs, shallowRef, nextTick } from 'vue'; import { ref, watch, toRefs, shallowRef, nextTick } from 'vue';
import { debounce } from 'throttle-debounce';
import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n.js';
import XCode from '@/components/MkCode.core.vue'; import XCode from '@/components/MkCode.core.vue';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@ -36,6 +44,8 @@ const props = withDefaults(defineProps<{
required?: boolean; required?: boolean;
readonly?: boolean; readonly?: boolean;
disabled?: boolean; disabled?: boolean;
debounce?: boolean;
manualSave?: boolean;
}>(), { }>(), {
lang: 'js', lang: 'js',
}); });
@ -54,6 +64,8 @@ const focused = ref(false);
const changed = ref(false); const changed = ref(false);
const inputEl = shallowRef<HTMLTextAreaElement>(); const inputEl = shallowRef<HTMLTextAreaElement>();
const focus = () => inputEl.value?.focus();
const onInput = (ev) => { const onInput = (ev) => {
v.value = ev.target?.value ?? v.value; v.value = ev.target?.value ?? v.value;
changed.value = true; changed.value = true;
@ -100,16 +112,48 @@ const updated = () => {
emit('update:modelValue', v.value); emit('update:modelValue', v.value);
}; };
const debouncedUpdated = debounce(1000, updated);
watch(modelValue, newValue => { watch(modelValue, newValue => {
v.value = newValue ?? ''; v.value = newValue ?? '';
}); });
watch(v, () => { watch(v, newValue => {
if (!props.manualSave) {
if (props.debounce) {
debouncedUpdated();
} else {
updated(); updated();
}
}
}); });
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.label {
font-size: 0.85em;
padding: 0 0 8px 0;
user-select: none;
&:empty {
display: none;
}
}
.caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
&:empty {
display: none;
}
}
.save {
margin: 8px 0 0 0;
}
.codeEditorRoot { .codeEditorRoot {
min-width: 100%; min-width: 100%;
max-width: 100%; max-width: 100%;
@ -117,6 +161,7 @@ watch(v, () => {
overflow-y: hidden; overflow-y: hidden;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
border-radius: 6px;
padding: 0; padding: 0;
color: var(--fg); color: var(--fg);
border: solid 1px var(--panel); border: solid 1px var(--panel);
@ -157,9 +202,10 @@ watch(v, () => {
caret-color: rgb(225, 228, 232); caret-color: rgb(225, 228, 232);
background-color: transparent; background-color: transparent;
border: 0; border: 0;
border-radius: 6px;
outline: 0; outline: 0;
min-width: calc(100% - 24px); min-width: calc(100% - 24px);
height: calc(100% - 24px); height: 100%;
padding: 12px; padding: 12px;
line-height: 1.5em; line-height: 1.5em;
font-size: 1em; font-size: 1em;

View file

@ -15,9 +15,9 @@ 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" code tall spellcheck="false"> <MkCodeEditor v-model="script" lang="is">
<template #label>{{ i18n.ts._play.script }}</template> <template #label>{{ i18n.ts._play.script }}</template>
</MkTextarea> </MkCodeEditor>
<div class="_buttons"> <div class="_buttons">
<MkButton primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton> <MkButton primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
<MkButton @click="show"><i class="ti ti-eye"></i> {{ i18n.ts.show }}</MkButton> <MkButton @click="show"><i class="ti ti-eye"></i> {{ i18n.ts.show }}</MkButton>
@ -40,6 +40,7 @@ import * as os from '@/os.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js'; import { definePageMetadata } from '@/scripts/page-metadata.js';
import MkTextarea from '@/components/MkTextarea.vue'; import MkTextarea from '@/components/MkTextarea.vue';
import MkCodeEditor from '@/components/MkCodeEditor.vue';
import MkInput from '@/components/MkInput.vue'; import MkInput from '@/components/MkInput.vue';
import MkSelect from '@/components/MkSelect.vue'; import MkSelect from '@/components/MkSelect.vue';
import { useRouter } from '@/router.js'; import { useRouter } from '@/router.js';

View file

@ -26,9 +26,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkKeyValue> </MkKeyValue>
</FormSplit> </FormSplit>
<MkTextarea v-model="valueForEditor" tall code> <MkCodeEditor v-model="valueForEditor" lang="json5">
<template #label>{{ i18n.ts.value }} (JSON)</template> <template #label>{{ i18n.ts.value }} (JSON)</template>
</MkTextarea> </MkCodeEditor>
<MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> <MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
@ -52,7 +52,7 @@ import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js'; import { definePageMetadata } from '@/scripts/page-metadata.js';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkKeyValue from '@/components/MkKeyValue.vue'; import MkKeyValue from '@/components/MkKeyValue.vue';
import MkTextarea from '@/components/MkTextarea.vue'; import MkCodeEditor from '@/components/MkCodeEditor.vue';
import FormSplit from '@/components/form/split.vue'; import FormSplit from '@/components/form/split.vue';
import FormInfo from '@/components/MkInfo.vue'; import FormInfo from '@/components/MkInfo.vue';

View file

@ -7,15 +7,15 @@ 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 code style="tab-size: 2;"> <MkCodeEditor v-model="localCustomCss" manualSave lang="css">
<template #label>CSS</template> <template #label>CSS</template>
</MkTextarea> </MkCodeEditor>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch, computed } from 'vue'; import { ref, watch, computed } from 'vue';
import MkTextarea from '@/components/MkTextarea.vue'; import MkCodeEditor from '@/components/MkCodeEditor.vue';
import FormInfo from '@/components/MkInfo.vue'; import FormInfo from '@/components/MkInfo.vue';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { unisonReload } from '@/scripts/unison-reload.js'; import { unisonReload } from '@/scripts/unison-reload.js';

View file

@ -7,9 +7,9 @@ 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 code> <MkCodeEditor v-model="code" lang="is">
<template #label>{{ i18n.ts.code }}</template> <template #label>{{ i18n.ts.code }}</template>
</MkTextarea> </MkCodeEditor>
<div> <div>
<MkButton :disabled="code == null" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton> <MkButton :disabled="code == null" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup> <script lang="ts" setup>
import { nextTick, ref, computed } from 'vue'; import { nextTick, ref, computed } from 'vue';
import MkTextarea from '@/components/MkTextarea.vue'; import MkCodeEditor from '@/components/MkCodeEditor.vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormInfo from '@/components/MkInfo.vue'; import FormInfo from '@/components/MkInfo.vue';
import * as os from '@/os.js'; import * as os from '@/os.js';

View file

@ -5,9 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div class="_gaps_m"> <div class="_gaps_m">
<MkTextarea v-model="installThemeCode" code> <MkCodeEditor v-model="installThemeCode" lang="json5">
<template #label>{{ i18n.ts._theme.code }}</template> <template #label>{{ i18n.ts._theme.code }}</template>
</MkTextarea> </MkCodeEditor>
<div class="_buttons"> <div class="_buttons">
<MkButton :disabled="installThemeCode == null" inline @click="() => previewTheme(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton> <MkButton :disabled="installThemeCode == null" inline @click="() => previewTheme(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import MkTextarea from '@/components/MkTextarea.vue'; import MkCodeEditor from '@/components/MkCodeEditor.vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import { parseThemeCode, previewTheme, installTheme } from '@/scripts/install-theme.js'; import { parseThemeCode, previewTheme, installTheme } from '@/scripts/install-theme.js';
import * as os from '@/os.js'; import * as os from '@/os.js';

View file

@ -51,9 +51,9 @@ 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 code> <MkCodeEditor v-model="themeCode" lang="json5">
<template #label>{{ i18n.ts._theme.code }}</template> <template #label>{{ i18n.ts._theme.code }}</template>
</MkTextarea> </MkCodeEditor>
<MkButton primary @click="applyThemeCode">{{ i18n.ts.apply }}</MkButton> <MkButton primary @click="applyThemeCode">{{ i18n.ts.apply }}</MkButton>
</div> </div>
</MkFolder> </MkFolder>
@ -80,6 +80,7 @@ import { v4 as uuid } from 'uuid';
import JSON5 from 'json5'; import JSON5 from 'json5';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkCodeEditor from '@/components/MkCodeEditor.vue';
import MkTextarea from '@/components/MkTextarea.vue'; import MkTextarea from '@/components/MkTextarea.vue';
import MkFolder from '@/components/MkFolder.vue'; import MkFolder from '@/components/MkFolder.vue';