replace prism-editor (beta)

This commit is contained in:
kakkokari-gtyih 2023-10-24 01:28:33 +09:00
parent d5724362ba
commit 2728845949
5 changed files with 231 additions and 58 deletions

View File

@ -27,9 +27,9 @@
"@vitejs/plugin-vue": "4.4.0",
"@vue-macros/reactivity-transform": "0.3.23",
"@vue/compiler-sfc": "3.3.6",
"aiscript-vscode": "github:aiscript-dev/aiscript-vscode#v0.0.5",
"astring": "1.8.6",
"autosize": "6.0.1",
"aiscript-vscode": "github:aiscript-dev/aiscript-vscode#v0.0.5",
"broadcast-channel": "5.5.0",
"browser-image-resizer": "github:misskey-dev/browser-image-resizer#v2.2.1-misskey.3",
"buraha": "0.0.1",
@ -55,7 +55,6 @@
"mfm-js": "0.23.3",
"misskey-js": "workspace:*",
"photoswipe": "5.4.2",
"prismjs": "1.29.0",
"punycode": "2.3.0",
"querystring": "0.2.1",
"rollup": "4.1.4",
@ -76,7 +75,6 @@
"vanilla-tilt": "1.8.1",
"vite": "4.5.0",
"vue": "3.3.6",
"vue-prism-editor": "2.0.0-alpha.2",
"vuedraggable": "next"
},
"devDependencies": {

View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<!-- eslint-disable vue/no-v-html -->
<template>
<div class="codeBlockRoot" v-html="html"></div>
<div :class="['codeBlockRoot', { 'codeEditor': codeEditor }]" v-html="html"></div>
</template>
<script lang="ts" setup>
@ -17,6 +17,7 @@ import { getHighlighter } from '@/scripts/code-highlighter.js';
const props = defineProps<{
code: string;
lang?: string;
codeEditor?: boolean;
}>();
const highlighter = await getHighlighter();
@ -27,7 +28,7 @@ const html = computed(() => highlighter.codeToHtml(props.code, {
theme: 'dark-plus',
}));
async function fetchLanguage(to) {
async function fetchLanguage(to: string): Promise<void> {
const language = to as ShikiLang;
// Check for the loaded languages, and load the language if it's not loaded yet.
@ -48,9 +49,11 @@ async function fetchLanguage(to) {
}
}
watch(() => props.lang, async (to) => {
if (codeLang.value === to) return;
await fetchLanguage(to);
watch(() => props.lang, (to) => {
if (codeLang.value === to || !to) return;
return new Promise((resolve) => {
fetchLanguage(to).then(() => resolve);
});
}, { immediate: true, });
</script>
@ -66,4 +69,26 @@ watch(() => props.lang, async (to) => {
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
}
}
.codeBlockRoot.codeEditor {
min-width: 100%;
height: 100%;
& :deep(.shiki) {
padding: 12px;
margin: 0;
border-radius: 6px;
min-height: 130px;
pointer-events: none;
min-width: calc(100% - 24px);
height: 100%;
display: inline-block;
line-height: 1.5em;
font-size: 1em;
overflow: visible;
text-rendering: inherit;
text-transform: inherit;
white-space: pre-wrap;
}
}
</style>

View File

@ -0,0 +1,150 @@
<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="[$style.codeEditorRoot, { [$style.disabled]: disabled, [$style.focused]: focused }]">
<div :class="$style.codeEditorScroller">
<textarea
ref="inputEl"
v-model="vModel"
:class="[$style.textarea]"
:disabled="disabled"
:required="required"
:readonly="readonly"
autocomplete="off"
wrap="off"
spellcheck="false"
@focus="focused = true"
@blur="focused = false"
@keydown="onKeydown($event)"
@input="onInput"
></textarea>
<XCode :class="$style.codeEditorHighlighter" :codeEditor="true" :code="v" :lang="lang"/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, watch, toRefs, shallowRef } from 'vue';
import XCode from '@/components/MkCode.core.vue';
const props = withDefaults(defineProps<{
modelValue: string | null;
lang: string;
required?: boolean;
readonly?: boolean;
disabled?: boolean;
}>(), {
lang: 'js',
});
const emit = defineEmits<{
(ev: 'change', _ev: KeyboardEvent): void;
(ev: 'keydown', _ev: KeyboardEvent): void;
(ev: 'enter'): void;
(ev: 'update:modelValue', value: string): void;
}>();
const { modelValue } = toRefs(props);
const vModel = ref<string>(modelValue.value ?? '');
const v = ref<string>(modelValue.value ?? '');
const focused = ref(false);
const changed = ref(false);
const inputEl = shallowRef<HTMLTextAreaElement>();
const onInput = (ev) => {
v.value = ev.target?.value ?? v.value;
changed.value = true;
emit('change', ev);
};
const onKeydown = (ev: KeyboardEvent) => {
if (ev.isComposing || ev.key === 'Process' || ev.keyCode === 229) return;
emit('keydown', ev);
if (ev.code === 'Enter') {
emit('enter');
}
if (ev.key === 'Tab') {
const pos = inputEl.value?.selectionStart ?? 0;
const posEnd = inputEl.value?.selectionEnd ?? vModel.value.length;
vModel.value = vModel.value.slice(0, pos) + '\t' + vModel.value.slice(posEnd);
v.value = vModel.value;
inputEl.value?.setSelectionRange(pos + 1, pos + 1);
ev.preventDefault();
}
};
const updated = () => {
changed.value = false;
emit('update:modelValue', v.value);
};
watch(modelValue, newValue => {
v.value = newValue ?? '';
});
watch(v, () => {
updated();
});
</script>
<style lang="scss" module>
.codeEditorRoot {
min-width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
margin: 0;
padding: 0;
color: var(--fg);
border: solid 1px var(--panel);
transition: border-color 0.1s ease-out;
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
&:hover {
border-color: var(--inputBorderHover) !important;
}
}
.focused.codeEditorRoot {
border-color: var(--accent) !important;
border-radius: 6px;
}
.codeEditorScroller {
position: relative;
display: inline-block;
min-width: 100%;
height: 100%;
}
.textarea {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: inline-block;
appearance: none;
resize: none;
text-align: left;
color: transparent;
caret-color: rgb(225, 228, 232);
background-color: transparent;
border: 0;
outline: 0;
padding: 12px;
line-height: 1.5em;
font-size: 1em;
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
}
.textarea::selection {
color: #fff;
}
</style>

View File

@ -6,9 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkSpacer :contentMax="800">
<div :class="$style.root">
<div :class="$style.editor" class="_panel">
<PrismEditor v-model="code" class="_monospace" :class="$style.code" :highlight="highlighter" :lineNumbers="false"/>
<MkButton style="position: absolute; top: 8px; right: 8px;" primary @click="run()"><i class="ti ti-player-play"></i></MkButton>
<div class="_gaps_s">
<div :class="$style.editor" class="_panel">
<MkCodeEditor v-model="code" lang="aiscript"/>
</div>
<MkButton primary @click="run()"><i class="ti ti-player-play"></i></MkButton>
</div>
<MkContainer v-if="root && components.length > 1" :key="uiKey" :foldable="true">
@ -34,16 +36,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { onDeactivated, onUnmounted, Ref, ref, watch } from 'vue';
import 'prismjs';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism-okaidia.css';
import { PrismEditor } from 'vue-prism-editor';
import 'vue-prism-editor/dist/prismeditor.min.css';
import { Interpreter, Parser, utils } from '@syuilo/aiscript';
import MkContainer from '@/components/MkContainer.vue';
import MkButton from '@/components/MkButton.vue';
import MkCodeEditor from '@/components/MkCodeEditor.vue';
import { createAiScriptEnv } from '@/scripts/aiscript/api.js';
import * as os from '@/os.js';
import { $i } from '@/account.js';

View File

@ -757,9 +757,6 @@ importers:
photoswipe:
specifier: 5.4.2
version: 5.4.2
prismjs:
specifier: 1.29.0
version: 1.29.0
punycode:
specifier: 2.3.0
version: 2.3.0
@ -816,13 +813,10 @@ importers:
version: 1.8.1
vite:
specifier: 4.5.0
version: 4.5.0(@types/node@20.8.7)(sass@1.69.4)(terser@5.22.0)
version: 4.5.0(@types/node@20.8.7)(sass@1.69.4)
vue:
specifier: 3.3.6
version: 3.3.6(typescript@5.2.2)
vue-prism-editor:
specifier: 2.0.0-alpha.2
version: 2.0.0-alpha.2(vue@3.3.6)
vuedraggable:
specifier: next
version: 4.1.0(vue@3.3.6)
@ -994,7 +988,7 @@ importers:
version: 1.0.3
vitest:
specifier: 0.34.6
version: 0.34.6(happy-dom@10.0.3)(sass@1.69.4)(terser@5.22.0)
version: 0.34.6(happy-dom@10.0.3)(sass@1.69.4)
vitest-fetch-mock:
specifier: 0.2.2
version: 0.2.2(vitest@0.34.6)
@ -4273,7 +4267,7 @@ packages:
magic-string: 0.27.0
react-docgen-typescript: 2.2.2(typescript@5.2.2)
typescript: 5.2.2
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)(terser@5.22.0)
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)
dev: true
/@jridgewell/gen-mapping@0.3.2:
@ -4297,6 +4291,7 @@ packages:
dependencies:
'@jridgewell/gen-mapping': 0.3.2
'@jridgewell/trace-mapping': 0.3.18
dev: false
/@jridgewell/sourcemap-codec@1.4.14:
resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
@ -6368,7 +6363,7 @@ packages:
magic-string: 0.30.3
rollup: 3.29.4
typescript: 5.2.2
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)(terser@5.22.0)
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)
transitivePeerDependencies:
- encoding
- supports-color
@ -6574,7 +6569,7 @@ packages:
util: 0.12.5
util-deprecate: 1.0.2
watchpack: 2.4.0
ws: 8.14.2(bufferutil@4.0.7)(utf-8-validate@6.0.3)
ws: 8.14.2
transitivePeerDependencies:
- bufferutil
- encoding
@ -6755,7 +6750,7 @@ packages:
react: 18.2.0
react-docgen: 6.0.4
react-dom: 18.2.0(react@18.2.0)
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)(terser@5.22.0)
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)
transitivePeerDependencies:
- '@preact/preset-vite'
- encoding
@ -6895,7 +6890,7 @@ packages:
magic-string: 0.30.3
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)(terser@5.22.0)
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)
vue-docgen-api: 4.64.1(vue@3.3.6)
transitivePeerDependencies:
- '@preact/preset-vite'
@ -6926,7 +6921,7 @@ packages:
ts-dedent: 2.2.0
type-fest: 2.19.0
vue: 3.3.6(typescript@5.2.2)
vue-component-type-helpers: 1.8.19
vue-component-type-helpers: 1.8.20
transitivePeerDependencies:
- encoding
- supports-color
@ -7383,7 +7378,7 @@ packages:
dom-accessibility-api: 0.5.16
lodash: 4.17.21
redent: 3.0.0
vitest: 0.34.6(happy-dom@10.0.3)(sass@1.69.4)(terser@5.22.0)
vitest: 0.34.6(happy-dom@10.0.3)(sass@1.69.4)
dev: true
/@testing-library/user-event@14.4.3(@testing-library/dom@9.2.0):
@ -8191,7 +8186,7 @@ packages:
'@babel/plugin-transform-react-jsx-source': 7.19.6(@babel/core@7.22.11)
magic-string: 0.27.0
react-refresh: 0.14.0
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)(terser@5.22.0)
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)
transitivePeerDependencies:
- supports-color
dev: true
@ -8203,7 +8198,7 @@ packages:
vite: ^4.0.0
vue: ^3.2.25
dependencies:
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)(terser@5.22.0)
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)
vue: 3.3.6(typescript@5.2.2)
/@vitest/coverage-v8@0.34.6(vitest@0.34.6):
@ -8222,7 +8217,7 @@ packages:
std-env: 3.3.3
test-exclude: 6.0.0
v8-to-istanbul: 9.1.0
vitest: 0.34.6(happy-dom@10.0.3)(sass@1.69.4)(terser@5.22.0)
vitest: 0.34.6(happy-dom@10.0.3)(sass@1.69.4)
transitivePeerDependencies:
- supports-color
dev: true
@ -9385,6 +9380,7 @@ packages:
requiresBuild: true
dependencies:
node-gyp-build: 4.6.0
dev: false
/bullmq@4.12.5:
resolution: {integrity: sha512-llBh5ejISbtdvSgQOqwgoXOdagBTLFbgy8FoYc03nKVV+H1OqlUOsTVmlUh3Q1GapMVzRilMHBMHBPKaaE5Bjg==}
@ -11091,7 +11087,7 @@ packages:
/eslint-import-resolver-node@0.3.7:
resolution: {integrity: sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==}
dependencies:
debug: 3.2.7(supports-color@5.5.0)
debug: 3.2.7(supports-color@8.1.1)
is-core-module: 2.13.0
resolve: 1.22.3
transitivePeerDependencies:
@ -11120,7 +11116,7 @@ packages:
optional: true
dependencies:
'@typescript-eslint/parser': 6.8.0(eslint@8.52.0)(typescript@5.2.2)
debug: 3.2.7(supports-color@5.5.0)
debug: 3.2.7(supports-color@8.1.1)
eslint: 8.52.0
eslint-import-resolver-node: 0.3.7
transitivePeerDependencies:
@ -11142,7 +11138,7 @@ packages:
array.prototype.findlastindex: 1.2.2
array.prototype.flat: 1.3.1
array.prototype.flatmap: 1.3.1
debug: 3.2.7(supports-color@5.5.0)
debug: 3.2.7(supports-color@8.1.1)
doctrine: 2.1.0
eslint: 8.52.0
eslint-import-resolver-node: 0.3.7
@ -14960,6 +14956,7 @@ packages:
resolution: {integrity: sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==}
hasBin: true
requiresBuild: true
dev: false
/node-gyp@9.4.0:
resolution: {integrity: sha512-dMXsYP6gc9rRbejLXmTbVRYjAHw7ppswsKyMxuxJxxOHzluIO1rGp9TOQgjFJ+2MCqcOcQTOPB/8Xwhr+7s4Eg==}
@ -16211,6 +16208,7 @@ packages:
/prismjs@1.29.0:
resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
engines: {node: '>=6'}
dev: true
/private-ip@2.3.3:
resolution: {integrity: sha512-5zyFfekIVUOTVbL92hc8LJOtE/gyGHeREHkJ2yTyByP8Q2YZVoBqLg3EfYLeF0oVvGqtaEX2t2Qovja0/gStXw==}
@ -18249,6 +18247,7 @@ packages:
acorn: 8.10.0
commander: 2.20.3
source-map-support: 0.5.21
dev: false
/test-exclude@6.0.0:
resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
@ -18957,6 +18956,7 @@ packages:
requiresBuild: true
dependencies:
node-gyp-build: 4.6.0
dev: false
/util-deprecate@1.0.2:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
@ -19047,7 +19047,7 @@ packages:
core-util-is: 1.0.2
extsprintf: 1.3.0
/vite-node@0.34.6(@types/node@20.8.7)(sass@1.69.4)(terser@5.22.0):
/vite-node@0.34.6(@types/node@20.8.7)(sass@1.69.4):
resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
engines: {node: '>=v14.18.0'}
hasBin: true
@ -19057,7 +19057,7 @@ packages:
mlly: 1.4.0
pathe: 1.1.1
picocolors: 1.0.0
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)(terser@5.22.0)
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)
transitivePeerDependencies:
- '@types/node'
- less
@ -19073,7 +19073,7 @@ packages:
resolution: {integrity: sha512-p4D8CFVhZS412SyQX125qxyzOgIFouwOcvjZWk6bQbNPR1wtaEzFT6jZxAjf1dejlGqa6fqHcuCvQea6EWUkUA==}
dev: true
/vite@4.5.0(@types/node@20.8.7)(sass@1.69.4)(terser@5.22.0):
/vite@4.5.0(@types/node@20.8.7)(sass@1.69.4):
resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
@ -19106,7 +19106,6 @@ packages:
postcss: 8.4.31
rollup: 3.29.4
sass: 1.69.4
terser: 5.22.0
optionalDependencies:
fsevents: 2.3.2
@ -19117,12 +19116,12 @@ packages:
vitest: '>=0.16.0'
dependencies:
cross-fetch: 3.1.5
vitest: 0.34.6(happy-dom@10.0.3)(sass@1.69.4)(terser@5.22.0)
vitest: 0.34.6(happy-dom@10.0.3)(sass@1.69.4)
transitivePeerDependencies:
- encoding
dev: true
/vitest@0.34.6(happy-dom@10.0.3)(sass@1.69.4)(terser@5.22.0):
/vitest@0.34.6(happy-dom@10.0.3)(sass@1.69.4):
resolution: {integrity: sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==}
engines: {node: '>=v14.18.0'}
hasBin: true
@ -19175,8 +19174,8 @@ packages:
strip-literal: 1.0.1
tinybench: 2.5.0
tinypool: 0.7.0
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)(terser@5.22.0)
vite-node: 0.34.6(@types/node@20.8.7)(sass@1.69.4)(terser@5.22.0)
vite: 4.5.0(@types/node@20.8.7)(sass@1.69.4)
vite-node: 0.34.6(@types/node@20.8.7)(sass@1.69.4)
why-is-node-running: 2.2.2
transitivePeerDependencies:
- less
@ -19200,8 +19199,8 @@ packages:
resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==}
dev: false
/vue-component-type-helpers@1.8.19:
resolution: {integrity: sha512-1OANGSZK4pzHF4uc86usWi+o5Y0zgoDtqWkPg6Am6ot+jHSAmpOah59V/4N82So5xRgivgCxGgK09lBy1XNUfQ==}
/vue-component-type-helpers@1.8.20:
resolution: {integrity: sha512-eaAOlvn+mkv9jX54w9BDdM8/kLhh5FFFGB9niuypE6StBGKSBA8/XbkbsVIfaBnRdFtdVxD2BC/PmWlpWl+WvA==}
dev: true
/vue-demi@0.13.11(vue@3.3.6):
@ -19263,15 +19262,6 @@ packages:
vue: 3.3.6(typescript@5.2.2)
dev: true
/vue-prism-editor@2.0.0-alpha.2(vue@3.3.6):
resolution: {integrity: sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==}
engines: {node: '>=10'}
peerDependencies:
vue: ^3.0.0
dependencies:
vue: 3.3.6(typescript@5.2.2)
dev: false
/vue-template-compiler@2.7.14:
resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
dependencies:
@ -19566,6 +19556,19 @@ packages:
async-limiter: 1.0.1
dev: true
/ws@8.14.2:
resolution: {integrity: sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==}
engines: {node: '>=10.0.0'}
peerDependencies:
bufferutil: ^4.0.1
utf-8-validate: '>=5.0.2'
peerDependenciesMeta:
bufferutil:
optional: true
utf-8-validate:
optional: true
dev: true
/ws@8.14.2(bufferutil@4.0.7)(utf-8-validate@6.0.3):
resolution: {integrity: sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==}
engines: {node: '>=10.0.0'}
@ -19580,6 +19583,7 @@ packages:
dependencies:
bufferutil: 4.0.7
utf-8-validate: 6.0.3
dev: false
/xev@3.0.2:
resolution: {integrity: sha512-8kxuH95iMXzHZj+fwqfA4UrPcYOy6bGIgfWzo9Ji23JoEc30ge/Z++Ubkiuy8c0+M64nXmmxrmJ7C8wnuBhluw==}