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

assets/styles/app.scss

@@ -31,6 +31,8 @@ html, body{
 @import 'bootstrap/dist/css/bootstrap.css';
 @import 'bootsdark/dist/bootsdark.min.css';
 
+
+@import 'quill/dist/quill.core.css';
 // customize some Bootstrap variables
 
 
@@ -54,6 +56,22 @@ $mango: #FF8040;
   border-color: $primary;
 }
 
+.pages-editor-raw {
+  width: 100%;
+  height: 650px !important;
+  background-color: black;
+  color: white;
+}
+
+.ql-container {
+  overflow-y: scroll;
+  height: 650px !important;
+}
+
+.ql-syntax {
+  background-color: #222222;
+}
+
 .wrapper {
   clear: both;
   position: sticky;

package.json

@@ -1,7 +1,8 @@
 {
     "devDependencies": {
-        "@popperjs/core": "^2.11.5",
-        "@symfony/webpack-encore": "^1.7.0",
+        "@hotwired/stimulus": "^3.0.0",
+        "@symfony/stimulus-bridge": "^3.0.0",
+        "@symfony/webpack-encore": "^2.0.0",
         "core-js": "^3.0.0",
         "file-loader": "^6.0.0",
         "jquery": "^3.6.0",
@@ -11,7 +12,7 @@
         "sass-loader": "^12.0.0",
         "ts-loader": "^9.0.0",
         "typescript": "^4.6.4",
-        "vue-loader": "16",
+        "vue-loader": "^17.0.0",
         "webpack-manifest-plugin": "^5.0.0",
         "webpack-notifier": "^1.6.0"
     },
@@ -35,6 +36,7 @@
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-vue": "^8.7.1",
         "fork-awesome": "^1.2.0",
+        "highlightjs": "^9.16.2",
         "husky": "^7.0.4",
         "less": "^4.1.2",
         "marked": "^4.0.15",
@@ -44,6 +46,7 @@
         "vue": "3",
         "vue-navigation-bar": "^5.0.0",
         "vue-router": "4",
-        "vue3-editor": "^0.1.1"
+        "vue3-editor": "^0.1.1",
+        "vue3-highlightjs": "^1.0.5"
     }
 }

rector.php

@@ -3,21 +3,28 @@
 declare(strict_types=1);
 
 use Rector\CodeQuality\Rector\Class_\InlineConstructorDefaultToPropertyRector;
-use Rector\Core\Configuration\Option;
+use Rector\Config\RectorConfig;
+use Rector\Doctrine\Set\DoctrineSetList;
 use Rector\Set\ValueObject\LevelSetList;
-use Symfony\Flex\Configurator\ContainerConfigurator;
-
-return static function (ContainerConfigurator $containerConfigurator): void {
-	// region Symfony Container
-	$parameters = $containerConfigurator->parameters();
-	$parameters->set(
-		Option::SYMFONY_CONTAINER_XML_PATH_PARAMETER,
-		__DIR__ . '/var/cache/dev/App_KernelDevDebugContainer.xml'
-	);
-	// endregion
+use Rector\Symfony\Set\SensiolabsSetList;
+use Rector\Symfony\Set\SymfonySetList;
 
+return static function (RectorConfig $rectorConfig): void {
+	$rectorConfig->paths(paths: [
+		__DIR__ . '/src'
+	]);
 	
-	$containerConfigurator->import(DoctrineSetList::ANNOTATIONS_TO_ATTRIBUTES);
-	$containerConfigurator->import(SymfonySetList::ANNOTATIONS_TO_ATTRIBUTES);
-	$containerConfigurator->import(SensiolabsSetList::FRAMEWORK_EXTRA_61);
+	// register a single rule
+	$rectorConfig->rule(rectorClass: InlineConstructorDefaultToPropertyRector::class);
+	
+	//$rectorConfig->rule(rectorClass: DoctrineSetList::ANNOTATIONS_TO_ATTRIBUTES);
+	//$rectorConfig->rule(rectorClass: SymfonySetList::ANNOTATIONS_TO_ATTRIBUTES);
+	//$rectorConfig->rule(rectorClass: SensiolabsSetList::FRAMEWORK_EXTRA_61);
+	// define sets of rules
+	$rectorConfig->sets(sets: [
+		LevelSetList::UP_TO_PHP_81,
+		DoctrineSetList::ANNOTATIONS_TO_ATTRIBUTES,
+		SymfonySetList::ANNOTATIONS_TO_ATTRIBUTES,
+		SensiolabsSetList::FRAMEWORK_EXTRA_61
+	]);
 };

symfony.lock

@@ -559,15 +559,15 @@
         "version": "1.14",
         "recipe": {
             "repo": "github.com/symfony/recipes",
-            "branch": "master",
+            "branch": "main",
             "version": "1.10",
-            "ref": "2858aeed7e1d81a45365c049eb533cc8827e380b"
+            "ref": "91f4d29f5ebbd2fcccc71ca55a17d14a17b308e8"
         },
         "files": [
-            "assets/index.js",
+            "assets/app.js",
             "assets/bootstrap.js",
             "assets/controllers.json",
-            "assets/controllers/counter_controller.js",
+            "assets/controllers/hello_controller.js",
             "assets/styles/app.css",
             "config/packages/webpack_encore.yaml",
             "package.json",