Merge branch 'develop' into vue3

src/client/pages/my-settings/index.vue

@@ -21,6 +21,9 @@
 			<mk-button @click="readAllUnreadNotes">{{ $t('markAsReadAllUnreadNotes') }}</mk-button>
 			<mk-button @click="readAllMessagingMessages">{{ $t('markAsReadAllTalkMessages') }}</mk-button>
 		</div>
+		<div class="_content">
+			<mk-button @click="configure">{{ $t('notificationSetting') }}</mk-button>
+		</div>
 	</section>
 
 	<x-import-export class="_vMargin"/>
@@ -108,6 +111,24 @@ export default defineComponent({
 		readAllNotifications() {
 			this.$root.api('notifications/mark-all-as-read');
 		},
+
+		async configure() {
+			this.$root.new(await import('../../components/notification-setting-window.vue').then(m => m.default), {
+				includingTypes: this.$store.state.i.includingNotificationTypes,
+				showGlobalToggle: false,
+			}).$on('ok', async ({ includingTypes: value }: any) => {
+				await this.$root.api('i/update', {
+					includingNotificationTypes: value,
+				}).then(i => {
+					this.$store.state.i.includingNotificationTypes = i.includingNotificationTypes;
+				}).catch(err => {
+					this.$root.dialog({
+						type: 'error',
+						text: err.message
+					});
+				});
+			});
+		}
 	}
 });
 </script>

src/client/pages/page-editor/page-editor.vue

@@ -76,7 +76,7 @@
 	<mk-container :body-togglable="true" :expanded="true">
 		<template #header><fa :icon="faCode"/> {{ $t('script') }}</template>
 		<div>
-			<prism-editor v-model="script" :line-numbers="false" language="js"/>
+			<prism-editor class="_code" v-model="script" :highlight="highlighter" :line-numbers="false"/>
 		</div>
 	</mk-container>
 </div>
@@ -85,9 +85,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import * as XDraggable from 'vuedraggable';
-import "prismjs";
+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 { PrismEditor } from 'vue-prism-editor';
+import 'vue-prism-editor/dist/prismeditor.min.css';
 import { faICursor, faPlus, faMagic, faCog, faCode, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { faSave, faStickyNote, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import { v4 as uuid } from 'uuid';
@@ -416,7 +420,11 @@ export default defineComponent({
 
 		removeEyeCatchingImage() {
 			this.eyeCatchingImageId = null;
-		}
+		},
+
+		highlighter(code) {
+			return highlight(code, languages.js, 'javascript');
+		},
 	}
 });
 </script>

src/client/pages/scratchpad.vue

@@ -3,7 +3,7 @@
 	<teleport to="#_teleport_header"><fa :icon="faTerminal"/>{{ $t('scratchpad') }}</teleport>
 
 	<div class="_panel">
-		<prism-editor v-model="code" :line-numbers="false" language="js"/>
+		<prism-editor class="_code" v-model="code" :highlight="highlighter" :line-numbers="false"/>
 		<mk-button style="position: absolute; top: 8px; right: 8px;" @click="run()" primary><fa :icon="faPlay"/></mk-button>
 	</div>
 
@@ -23,9 +23,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faTerminal, faPlay } from '@fortawesome/free-solid-svg-icons';
-import "prismjs";
+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 { PrismEditor } from 'vue-prism-editor';
+import 'vue-prism-editor/dist/prismeditor.min.css';
 import { AiScript, parse, utils, values } from '@syuilo/aiscript';
 import MkContainer from '../components/ui/container.vue';
 import MkButton from '../components/ui/button.vue';
@@ -118,7 +122,11 @@ export default defineComponent({
 					text: e
 				});
 			}
-		}
+		},
+
+		highlighter(code) {
+			return highlight(code, languages.js, 'javascript');
+		},
 	}
 });
 </script>