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'
 		}
 	}
 }

assets/js/components/tabs/TabContent.vue

@@ -1,5 +1,8 @@
 <template lang="html">
-	<div v-show="title == selectedTitle">
+	<div
+		v-show="title === selectedTitle"
+		class="tab-content"
+	>
 		<slot/>
 	</div>
 </template>
@@ -16,10 +19,16 @@ export default {
 	},
 	setup() {
 		const selectedTitle = inject('selectedTitle')
-
 		return {
 			selectedTitle
 		}
 	}
 }
 </script>
+
+<style>
+.tab-content {
+	padding: 20px;
+	border-radius: 5px;
+}
+</style>

assets/js/components/tabs/TabWrapper.vue

@@ -5,7 +5,7 @@
 				v-for="title in tabTitles"
 				:key="title"
 				:class="{ selected: title === selectedTitle }"
-				@click="selectedTitle = title"
+				@click="handleClick(title)"
 			>
 				{{ title }}
 			</li>
@@ -30,11 +30,11 @@ export default {
 			tabTitles
 		}
 	},
-	data: () => ({
-		selectedIndex: 0,
-		tabs: []
-	}),
-	created() {
+	methods: {
+		handleClick(title) {
+			this.selectedTitle = title
+			this.$emit('tabActivated', title)
+		}
 	},
 }
 </script>

assets/js/index.js

@@ -9,11 +9,11 @@ import { createApp } from 'vue'
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap/dist/js/bootstrap'
 
-import PrimeVue from 'primevue/config'
-import 'primevue/resources/primevue.min.css'
-//import 'primeicons/primeicons.css'
-import 'primevue/resources/themes/lara-dark-blue/theme.css'
 import { createPinia } from 'pinia'
+
+import VueHighLightJS from 'vue3-highlightjs'
+import 'vue3-highlightjs/styles/dracula.css'
+
 import Router from '@/router'
 import AppLink from '@/components/AppLink'
 import App from '@/App'
@@ -49,6 +49,6 @@ _paq.push(['enableLinkTracking']);
 createApp(App)
 	.component('AppLink', AppLink)
 	.use(createPinia())
+	.use(VueHighLightJS)
 	.use(Router)
-	.use(PrimeVue)
 	.mount('#app')