syntax highlight working

assets/js/components/pages/edit.vue

@@ -3,18 +3,21 @@
 		v-if="!isLoading"
 		class="box p-3"
 	>
-		<tab-wrapper>
+		<tab-wrapper @tabActivated="tabActivated">
 			<tab-content title="Visual Editor">
 				<div class="editor mt-2">
-					<!-- *** disbaled = true? -->
-					<VueEditor v-model="page.content"/>
+					<VueEditor
+						v-model="page.content"
+						:editor-options="editorOptions"
+						:disabled="isVueEditorDisabled"
+					/>
 				</div>
 			</tab-content>
 			<tab-content title="Raw Content">
 				<div>
 					<textarea
 						v-model="page.content"
-						class="p-fluid"
+						class="p-fluid pages-editor-raw"
 					/>
 				</div>
 			</tab-content>
@@ -37,7 +40,12 @@
 import axios from 'axios'
 
 // Basic Use - Covers most scenarios
+// https://github.com/davidroyer/vue2-editor => docs apply for version 3, too
 import { VueEditor } from 'vue3-editor'
+
+import hljs from 'highlightjs'
+import 'highlightjs/styles/dracula.css'
+
 import TabWrapper from '@/components/tabs/TabWrapper'
 import TabContent from '@/components/tabs/TabContent'
 
@@ -50,11 +58,19 @@ export default {
 	},
 	data: () => ({
 		page: null,
-		isLoading: true
+		isLoading: true,
+		isVueEditorDisabled: false,
+		editorOptions: {
+			modules: {
+				syntax: {
+					highlight: (text) => hljs.highlightAuto(text).value
+				}
+			},
+			theme: 'snow'
+		}
 	}),
 	beforeMount() {
 		const { slug } = this.$route.params
-		console.log(`slug: ${slug}`)
 
 		axios
 			.get(`/api/pages?slug=${slug}`)
@@ -65,12 +81,17 @@ export default {
 	},
 	methods: {
 		saveContent() {
-			console.log(this.page)
 			axios
 				.put(`/api/pages/${this.page.id}`, this.page)
-				.then((response) => {
-					console.log(`resp:${response}`)
+				.then(() => {
+					this.$router.push({
+						name: 'Pages',
+						params: { slug: this.page.slug }
+					})
 				})
+		},
+		tabActivated(name) {
+			this.isVueEditorDisabled = name === 'Raw Content'
 		}
 	}
 }