Merge branch 'develop' into better-tutorial

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

@@ -5,21 +5,90 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <!-- eslint-disable vue/no-v-html -->
 <template>
-<code v-if="inline" :class="`language-${prismLang}`" style="overflow-wrap: anywhere;" v-html="html"></code>
-<pre v-else :class="`language-${prismLang}`"><code :class="`language-${prismLang}`" v-html="html"></code></pre>
+<div :class="['codeBlockRoot', { 'codeEditor': codeEditor }]" v-html="html"></div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import Prism from 'prismjs';
-import 'prismjs/themes/prism-okaidia.css';
+import { ref, computed, watch } from 'vue';
+import { BUNDLED_LANGUAGES } from 'shiki';
+import type { Lang as ShikiLang } from 'shiki';
+import { getHighlighter } from '@/scripts/code-highlighter.js';
 
 const props = defineProps<{
 	code: string;
 	lang?: string;
-	inline?: boolean;
+	codeEditor?: boolean;
 }>();
 
-const prismLang = computed(() => Prism.languages[props.lang] ? props.lang : 'js');
-const html = computed(() => Prism.highlight(props.code, Prism.languages[prismLang.value], prismLang.value));
+const highlighter = await getHighlighter();
+
+const codeLang = ref<ShikiLang | 'aiscript'>('js');
+const html = computed(() => highlighter.codeToHtml(props.code, {
+	lang: codeLang.value,
+	theme: 'dark-plus',
+}));
+
+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.
+	if (!highlighter.getLoadedLanguages().includes(language)) {
+		// Check if the language is supported by Shiki
+		const bundles = BUNDLED_LANGUAGES.filter((bundle) => {
+			// Languages are specified by their id, they can also have aliases (i. e. "js" and "javascript")
+			return bundle.id === language || bundle.aliases?.includes(language);
+		});
+		if (bundles.length > 0) {
+			await highlighter.loadLanguage(language);
+			codeLang.value = language;
+		} else {
+			codeLang.value = 'js';
+		}
+	} else {
+		codeLang.value = language;
+	}
+}
+
+watch(() => props.lang, (to) => {
+	if (codeLang.value === to || !to) return;
+	return new Promise((resolve) => {
+		fetchLanguage(to).then(() => resolve);
+	});
+}, { immediate: true, });
 </script>
+
+<style scoped lang="scss">
+.codeBlockRoot :deep(.shiki) {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: .3em;
+
+	& pre,
+	& code {
+		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/MkCode.vue

@@ -4,11 +4,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<XCode :code="code" :lang="lang" :inline="inline"/>
+	<Suspense>
+		<template #fallback>
+			<MkLoading v-if="!inline ?? true" />
+		</template>
+		<code v-if="inline" :class="$style.codeInlineRoot">{{ code }}</code>
+		<XCode v-else :code="code" :lang="lang"/>
+	</Suspense>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
+import MkLoading from '@/components/global/MkLoading.vue';
 
 defineProps<{
 	code: string;
@@ -18,3 +25,15 @@ defineProps<{
 
 const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'));
 </script>
+
+<style module lang="scss">
+.codeInlineRoot {
+	display: inline-block;
+	font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
+	overflow-wrap: anywhere;
+	color: #D4D4D4;
+	background: #1E1E1E;
+	padding: .1em;
+	border-radius: .3em;
+}
+</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/components/MkDateSeparatedList.vue

@@ -42,6 +42,7 @@ export default defineComponent({
 
 	setup(props, { slots, expose }) {
 		const $style = useCssModule(); // カスタムレンダラなので使っても大丈夫
+
 		function getDateText(time: string) {
 			const date = new Date(time).getDate();
 			const month = new Date(time).getMonth() + 1;
@@ -121,6 +122,7 @@ export default defineComponent({
 			el.style.top = `${el.offsetTop}px`;
 			el.style.left = `${el.offsetLeft}px`;
 		}
+
 		function onLeaveCanceled(el: HTMLElement) {
 			el.style.top = '';
 			el.style.left = '';

packages/frontend/src/components/MkDialog.vue

@@ -160,6 +160,7 @@ async function ok() {
 function cancel() {
 	done(true);
 }
+
 /*
 function onBgClick() {
 	if (props.cancelableByBgClick) cancel();

packages/frontend/src/components/MkDrive.vue

@@ -505,6 +505,7 @@ function appendFile(file: Misskey.entities.DriveFile) {
 function appendFolder(folderToAppend: Misskey.entities.DriveFolder) {
 	addFolder(folderToAppend);
 }
+
 /*
 function prependFile(file: Misskey.entities.DriveFile) {
 	addFile(file, true);

packages/frontend/src/components/MkFoldableSection.vue

@@ -84,6 +84,7 @@ onMounted(() => {
 			return getParentBg(el.parentElement);
 		}
 	}
+
 	const rawBg = getParentBg(el.value);
 	const _bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
 	_bg.setAlpha(0.85);

packages/frontend/src/components/MkMenu.vue

@@ -145,11 +145,13 @@ const onGlobalMousedown = (event: MouseEvent) => {
 };
 
 let childCloseTimer: null | number = null;
+
 function onItemMouseEnter(item) {
 	childCloseTimer = window.setTimeout(() => {
 		closeChild();
 	}, 300);
 }
+
 function onItemMouseLeave(item) {
 	if (childCloseTimer) window.clearTimeout(childCloseTimer);
 }

packages/frontend/src/components/MkNote.vue

@@ -191,9 +191,11 @@ let note = $ref(deepClone(props.note));
 // plugin
 if (noteViewInterruptors.length > 0) {
 	onMounted(async () => {
-		let result = deepClone(note);
+		let result:Misskey.entities.Note | null = deepClone(note);
 		for (const interruptor of noteViewInterruptors) {
 			result = await interruptor.handler(result);
+
+			if (result === null) return isDeleted.value = true;
 		}
 		note = result;
 	});

packages/frontend/src/components/MkNoteDetailed.vue

@@ -230,9 +230,11 @@ let note = $ref(deepClone(props.note));
 // plugin
 if (noteViewInterruptors.length > 0) {
 	onMounted(async () => {
-		let result = deepClone(note);
+		let result:Misskey.entities.Note | null = deepClone(note);
 		for (const interruptor of noteViewInterruptors) {
 			result = await interruptor.handler(result);
+
+			if (result === null) return isDeleted.value = true;
 		}
 		note = result;
 	});
@@ -497,6 +499,7 @@ function blur() {
 }
 
 const repliesLoaded = ref(false);
+
 function loadReplies() {
 	repliesLoaded.value = true;
 	os.api('notes/children', {
@@ -508,6 +511,7 @@ function loadReplies() {
 }
 
 const conversationLoaded = ref(false);
+
 function loadConversation() {
 	conversationLoaded.value = true;
 	os.api('notes/conversation', {

packages/frontend/src/components/MkPagination.vue

@@ -87,6 +87,7 @@ function arrayToEntries(entities: MisskeyEntity[]): [string, MisskeyEntity][] {
 function concatMapWithArray(map: MisskeyEntityMap, entities: MisskeyEntity[]): MisskeyEntityMap {
 	return new Map([...map, ...arrayToEntries(entities)]);
 }
+
 </script>
 <script lang="ts" setup>
 import { infoImageUrl } from '@/instance.js';

packages/frontend/src/components/MkPostFormAttaches.vue

@@ -59,6 +59,7 @@ function toggleSensitive(file) {
 		emit('changeSensitive', file, !file.isSensitive);
 	});
 }
+
 async function rename(file) {
 	const { canceled, result } = await os.inputText({
 		title: i18n.ts.enterFileName,

packages/frontend/src/components/global/MkPageHeader.tabs.vue

@@ -134,9 +134,11 @@ async function enter(el: HTMLElement) {
 
 	setTimeout(renderTab, 170);
 }
+
 function afterEnter(el: HTMLElement) {
 	//el.style.width = '';
 }
+
 async function leave(el: HTMLElement) {
 	const elementWidth = el.getBoundingClientRect().width;
 	el.style.width = elementWidth + 'px';
@@ -145,6 +147,7 @@ async function leave(el: HTMLElement) {
 	el.style.width = '0';
 	el.style.paddingLeft = '0';
 }
+
 function afterLeave(el: HTMLElement) {
 	el.style.width = '';
 }