syntax highlight working

This commit is contained in:
tracer 2022-05-12 19:29:14 +02:00
parent e27c93c5c0
commit 8a4a694b86
9 changed files with 384 additions and 515 deletions

View File

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

View File

@ -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>

View File

@ -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>

View File

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

View File

@ -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;

View File

@ -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"
}
}

View File

@ -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;
use Rector\Symfony\Set\SensiolabsSetList;
use Rector\Symfony\Set\SymfonySetList;
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
return static function (RectorConfig $rectorConfig): void {
$rectorConfig->paths(paths: [
__DIR__ . '/src'
]);
// register a single rule
$rectorConfig->rule(rectorClass: InlineConstructorDefaultToPropertyRector::class);
$containerConfigurator->import(DoctrineSetList::ANNOTATIONS_TO_ATTRIBUTES);
$containerConfigurator->import(SymfonySetList::ANNOTATIONS_TO_ATTRIBUTES);
$containerConfigurator->import(SensiolabsSetList::FRAMEWORK_EXTRA_61);
//$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
]);
};

View File

@ -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",

753
yarn.lock

File diff suppressed because it is too large Load Diff