Merge branch 'shiki' of https://github.com/kakkokari-gtyih/misskey into pr/12102

CHANGELOG.md

@@ -24,6 +24,9 @@
 - Feat: プラグイン・テーマを外部サイトから直接インストールできるようになりました
 	- 外部サイトでの実装が必要です。詳細は Misskey Hub をご覧ください
 	  https://misskey-hub.net/docs/advanced/publish-on-your-website.html
+- Enhance: コードのシンタックスハイライトエンジンをShikiに変更
+  - AiScriptのシンタックスハイライトに対応
+  - MFMでAiScriptをハイライトする場合、コードブロックの開始部分を ` ```is ` もしくは ` ```aiscript ` としてください
 - Enhance: データセーバー有効時はアニメーション付きのアバター画像が停止するように
 - Enhance: プラグインを削除した際には、使用されていたアクセストークンも同時に削除されるようになりました
 - Enhance: プラグインで`Plugin:register_note_view_interruptor`を用いてnoteの代わりにnullを返却することでノートを非表示にできるようになりました

packages/frontend/package.json

@@ -31,6 +31,7 @@
 		"autosize": "6.0.1",
 		"aiscript-vscode": "github:aiscript-dev/aiscript-vscode#v0.0.4",
 		"broadcast-channel": "5.5.1",
+		"aiscript-vscode": "github:aiscript-dev/aiscript-vscode#v0.0.5",
 		"browser-image-resizer": "github:misskey-dev/browser-image-resizer#v2.2.1-misskey.3",
 		"buraha": "0.0.1",
 		"canvas-confetti": "1.6.1",
@@ -55,7 +56,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 +76,6 @@
 		"vanilla-tilt": "1.8.1",
 		"vite": "4.5.0",
 		"vue": "3.3.7",
-		"vue-prism-editor": "2.0.0-alpha.2",
 		"vuedraggable": "next"
 	},
 	"devDependencies": {

packages/frontend/src/components/MkCode.core.vue

@@ -5,30 +5,31 @@ 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>
 import { ref, computed, watch } from 'vue';
-import { getHighlighter } from '@/scripts/code-highlighter.js';
 import { BUNDLED_LANGUAGES } from 'shiki';
-import type { Lang } from 'shiki';
+import type { Lang as ShikiLang } from 'shiki';
+import { getHighlighter } from '@/scripts/code-highlighter.js';
 
 const props = defineProps<{
 	code: string;
 	lang?: string;
+	codeEditor?: boolean;
 }>();
 
 const highlighter = await getHighlighter();
 
-const lang = ref<Lang | 'aiscript'>('js');
+const codeLang = ref<ShikiLang | 'aiscript'>('js');
 const html = computed(() => highlighter.codeToHtml(props.code, {
-	lang: lang.value,
+	lang: codeLang.value,
 	theme: 'dark-plus',
 }));
 
-async function fetchLanguage(to) {
+async function fetchLanguage(to: string): Promise<void> {
-	const language = to as Lang;
+	const language = to as ShikiLang;
 
 	// Check for the loaded languages, and load the language if it's not loaded yet.
 	if (!highlighter.getLoadedLanguages().includes(language)) {
@@ -39,18 +40,20 @@ async function fetchLanguage(to) {
 		});
 		if (bundles.length > 0) {
 			await highlighter.loadLanguage(language);
-			lang.value = language;
+			codeLang.value = language;
 		} else {
-			lang.value = 'js';
+			codeLang.value = 'js';
 		}
 	} else {
-		lang.value = language;
+		codeLang.value = language;
 	}
 }
 
-watch(() => props.lang, async (to) => {
+watch(() => props.lang, (to) => {
-	if (lang.value === to) return;
+	if (codeLang.value === to || !to) return;
-	await fetchLanguage(to);
+	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;
+	}
+}
 </style>

packages/frontend/src/components/MkCodeEditor.vue

@@ -0,0 +1,166 @@
+<!--
+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, nextTick } 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') {
+		const pos = inputEl.value?.selectionStart ?? 0;
+		const posEnd = inputEl.value?.selectionEnd ?? vModel.value.length;
+		if (pos === posEnd) {
+			const lines = vModel.value.slice(0, pos).split('\n');
+			const currentLine = lines[lines.length - 1];
+			const currentLineSpaces = currentLine.match(/^\s+/);
+			const posDelta = currentLineSpaces ? currentLineSpaces[0].length : 0;
+			ev.preventDefault();
+			vModel.value = vModel.value.slice(0, pos) + '\n' + (currentLineSpaces ? currentLineSpaces[0] : '') + vModel.value.slice(pos);
+			v.value = vModel.value;
+			nextTick(() => {
+				inputEl.value?.setSelectionRange(pos + 1 + posDelta, pos + 1 + posDelta);
+			});
+		}
+		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;
+		nextTick(() => {
+			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>

packages/frontend/src/pages/scratchpad.vue

@@ -4,11 +4,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkSpacer :contentMax="800">
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+
+	<MkSpacer :contentMax="800">
 		<div :class="$style.root">
+			<div class="_gaps_s">
 				<div :class="$style.editor" class="_panel">
-			<PrismEditor v-model="code" class="_monospace" :class="$style.code" :highlight="highlighter" :lineNumbers="false"/>
+					<MkCodeEditor v-model="code" lang="aiscript"/>
-			<MkButton style="position: absolute; top: 8px; right: 8px;" primary @click="run()"><i class="ti ti-player-play"></i></MkButton>
+				</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">
@@ -29,21 +34,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 				{{ 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();
 });

packages/frontend/src/scripts/code-highlighter.ts

@@ -3,11 +3,11 @@ import { setWasm, setCDN, Highlighter, getHighlighter as _getHighlighter } from
 setWasm('/assets/shiki/dist/onig.wasm');
 setCDN('/assets/shiki/');
 
-let _highlighter: Highlighter;
+let _highlighter: Highlighter | null = null;
 
-export async function getHighlighter() {
+export async function getHighlighter(): Promise<Highlighter> {
 	if (!_highlighter) {
-		await initHighlighter();
+		return await initHighlighter();
 	}
 	return _highlighter;
 }
@@ -26,4 +26,6 @@ export async function initHighlighter() {
 	});
 
 	_highlighter = highlighter;
+
+	return highlighter;
 }

pnpm-lock.yaml

@@ -674,8 +674,8 @@ importers:
         specifier: 3.3.7
         version: 3.3.7
       aiscript-vscode:
-        specifier: github:aiscript-dev/aiscript-vscode#v0.0.4
+        specifier: github:aiscript-dev/aiscript-vscode#v0.0.5
-        version: github.com/aiscript-dev/aiscript-vscode/fb6534cc7984c28b02c511c07c2dc4b9ef1b71b3
+        version: github.com/aiscript-dev/aiscript-vscode/a8fa5bb41885391cdb6a6e3165eaa6e4868da86e
       astring:
         specifier: 1.8.6
         version: 1.8.6
@@ -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
@@ -820,9 +817,6 @@ importers:
       vue:
         specifier: 3.3.7
         version: 3.3.7(typescript@5.2.2)
-      vue-prism-editor:
-        specifier: 2.0.0-alpha.2
-        version: 2.0.0-alpha.2(vue@3.3.7)
       vuedraggable:
         specifier: next
         version: 4.1.0(vue@3.3.7)
@@ -16240,6 +16234,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==}
@@ -19301,15 +19296,6 @@ packages:
       vue: 3.3.7(typescript@5.2.2)
     dev: true
 
-  /vue-prism-editor@2.0.0-alpha.2(vue@3.3.7):
-    resolution: {integrity: sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      vue: ^3.0.0
-    dependencies:
-      vue: 3.3.7(typescript@5.2.2)
-    dev: false
-
   /vue-template-compiler@2.7.14:
     resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
     dependencies:
@@ -19771,10 +19757,10 @@ packages:
       readable-stream: 3.6.0
     dev: false
 
-  github.com/aiscript-dev/aiscript-vscode/fb6534cc7984c28b02c511c07c2dc4b9ef1b71b3:
+  github.com/aiscript-dev/aiscript-vscode/a8fa5bb41885391cdb6a6e3165eaa6e4868da86e:
-    resolution: {tarball: https://codeload.github.com/aiscript-dev/aiscript-vscode/tar.gz/fb6534cc7984c28b02c511c07c2dc4b9ef1b71b3}
+    resolution: {tarball: https://codeload.github.com/aiscript-dev/aiscript-vscode/tar.gz/a8fa5bb41885391cdb6a6e3165eaa6e4868da86e}
     name: aiscript-vscode
-    version: 0.0.4
+    version: 0.0.5
     engines: {vscode: ^1.83.0}
     dev: false