sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MkCodeのパースエンジンをShikiに変更 (#12102)

Browse Source 
* (swap) prism -> shiki

* fix styles

* (bump) aiscript-vscode to v0.0.5

* refactor

* replace prism-editor (beta)

* Update scratchpad.vue

* (enhance) MkCodeEditor自動インデント改行

* (fix) lint

* (add) scratchpad: MkStickyContainer

* Update CHANGELOG.md

* clean up

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
かっこかり
2023-10-29 14:12:40 +09:00
committed by GitHub
parent feedad7d8b
commit 1a8243f1ca
12 changed files with 380 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
packages/frontend/src/pages/scratchpad.vue
View File

@@ -4,46 +4,46 @@ 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>
<MkStickyContainer>
<template #header><MkPageHeader/></template>
<MkContainer v-if="root && components.length > 1" :key="uiKey" :foldable="true">
<template #header>UI</template>
<div :class="$style.ui">
<MkAsUi :component="root" :components="components" size="small"/>
<MkSpacer :contentMax="800">
<div :class="$style.root">
<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>
<MkContainer :foldable="true" class="">
<template #header>{{ i18n.ts.output }}</template>
<div :class="$style.logs">
<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
<MkContainer v-if="root && components.length > 1" :key="uiKey" :foldable="true">
<template #header>UI</template>
<div :class="$style.ui">
<MkAsUi :component="root" :components="components" size="small"/>
</div>
</MkContainer>
<MkContainer :foldable="true" class="">
<template #header>{{ i18n.ts.output }}</template>
<div :class="$style.logs">
<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
</div>
</MkContainer>
<div class="">
{{ i18n.ts.scratchpadDescription }}
</div>
</MkContainer>
<div class="">
{{ i18n.ts.scratchpadDescription }}
</div>
</div>
</MkSpacer>
</MkSpacer>
</MkStickyContainer>
</template>
<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';
@@ -152,10 +152,6 @@ async function run() {
}
}
function highlighter(code) {
return highlight(code, languages.js, 'javascript');
}
onDeactivated(() => {
if (aiscript) aiscript.abort();
});