feat: adapt remaining markdown actions to monaco

ux/src/components/PageHeader.vue

@@ -106,8 +106,8 @@
         aria-label='Print'
         )
         q-tooltip Print
+    template(v-if='editorStore.isActive')
       q-btn.q-mr-sm.acrylic-btn(
-      v-if='editorStore.isActive'
         icon='las la-question-circle'
         flat
         color='grey'
@@ -115,6 +115,13 @@
         target='_blank'
         type='a'
       )
+      q-btn.q-mr-sm.acrylic-btn(
+        icon='las la-cog'
+        flat
+        color='grey'
+        :aria-label='t(`editor.settings`)'
+        @click='openEditorSettings'
+      )
     template(v-if='editorStore.isActive || editorStore.hasPendingChanges')
       q-btn.acrylic-btn.q-mr-sm(
         flat
@@ -210,6 +217,10 @@ const editUrl = computed(() => {
 
 // METHODS
 
+function openEditorSettings () {
+  EVENT_BUS.emit('openEditorSettings')
+}
+
 async function discardChanges () {
   // Is it the home page in create mode?
   if (editorStore.mode === 'create' && pageStore.path === '' && pageStore.locale === 'en') {

ux/src/css/app.scss

@@ -240,11 +240,5 @@ body::-webkit-scrollbar-thumb {
 // ------------------------------------------------------------------
 
 @import './animation.scss';
-
 @import 'v-network-graph/lib/style.css';
-
 @import './page-contents.scss';
-
-// @import '~codemirror/lib/codemirror.css';
-// @import '~codemirror/theme/elegant.css';
-// @import '~codemirror/theme/material-ocean.css';

ux/src/css/codemirror.scss

-.cm-s-wikijs-dark.CodeMirror {
-  background: $dark-6;
-  color: #e0e0e0;
-}
-.cm-s-wikijs-dark div.CodeMirror-selected {
-  background: $teal-8;
-}
-.cm-s-wikijs-dark .cm-matchhighlight {
-  background: $teal-8;
-}
-.cm-s-wikijs-dark .CodeMirror-line::selection, .cm-s-wikijs-dark .CodeMirror-line > span::selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::selection {
-  background: $blue-8;
-}
-.cm-s-wikijs-dark .CodeMirror-line::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::-moz-selection {
-  background: $blue-8;
-}
-.cm-s-wikijs-dark .CodeMirror-gutters {
-  background: $dark-3;
-  border-right: 1px solid $dark-2;
-}
-.cm-s-wikijs-dark .CodeMirror-guttermarker {
-  color: #ac4142;
-}
-.cm-s-wikijs-dark .CodeMirror-guttermarker-subtle {
-  color: #505050;
-}
-.cm-s-wikijs-dark .CodeMirror-linenumber {
-  color: $blue-grey-7;
-}
-.cm-s-wikijs-dark .CodeMirror-cursor {
-  border-left: 1px solid #b0b0b0;
-}
-.cm-s-wikijs-dark span.cm-comment {
-  color: $orange-8;
-}
-.cm-s-wikijs-dark span.cm-atom {
-  color: #aa759f;
-}
-.cm-s-wikijs-dark span.cm-number {
-  color: #aa759f;
-}
-.cm-s-wikijs-dark span.cm-property, .cm-s-wikijs-dark span.cm-attribute {
-  color: #90a959;
-}
-.cm-s-wikijs-dark span.cm-keyword {
-  color: #ac4142;
-}
-.cm-s-wikijs-dark span.cm-string {
-  color: #f4bf75;
-}
-.cm-s-wikijs-dark span.cm-variable {
-  color: #90a959;
-}
-.cm-s-wikijs-dark span.cm-variable-2 {
-  color: #6a9fb5;
-}
-.cm-s-wikijs-dark span.cm-def {
-  color: #d28445;
-}
-.cm-s-wikijs-dark span.cm-bracket {
-  color: #e0e0e0;
-}
-.cm-s-wikijs-dark span.cm-tag {
-  color: #ac4142;
-}
-.cm-s-wikijs-dark span.cm-link {
-  color: #aa759f;
-}
-.cm-s-wikijs-dark span.cm-error {
-  background: #ac4142;
-  color: #b0b0b0;
-}
-.cm-s-wikijs-dark .CodeMirror-activeline-background {
-  background: $dark-4;
-}
-.cm-s-wikijs-dark .CodeMirror-matchingbracket {
-  text-decoration: underline;
-  color: white !important;
-}
-
-.cm-s-wikijs-dark .CodeMirror-foldmarker {
-  margin-left: 10px;
-  display: inline-block;
-  background-color: rgba($amber-8, .3);
-  padding: 8px 5px;
-  color: $amber-5;
-  border-radius: 5px;
-  text-shadow: none;
-}
-
-.cm-s-wikijs-dark .CodeMirror-buttonmarker {
-  display: inline-block;
-  background-color: rgba($blue-5, .3);
-  border: 1px solid $blue-8;
-  padding: 1px 10px;
-  color: $blue-2 !important;
-  border-radius: 5px;
-  margin-left: 5px;
-  cursor: pointer;
-}

ux/src/css/page-contents.scss

@@ -61,10 +61,6 @@
     }
   }
 
-  * + h1, * + h2, * + h3 {
-    border-top: 1px solid #DDD;
-  }
-
   h1 {
     font-size: 3em;
     font-weight: 500;
@@ -396,19 +392,7 @@
   }
 
   ul:not(.tabset-tabs):not(.contains-task-list) {
-    list-style: none;
-    > li::before {
-      position: absolute;
-      left: -1.1rem;
-      content: '\25b8';
-      color: mc('grey', '600');
-      width: 1.35rem;
-
-      @at-root .is-rtl & {
-        right: -1.1rem;
-        content: '\25C3';
-      }
-    }
+    list-style: square;
   }
   ol, ul:not(.tabset-tabs) {
     > li {

ux/src/i18n/locales/en.json

@@ -1548,6 +1548,7 @@
   "editor.select.cannotChange": "This cannot be changed once the page is created.",
   "editor.select.customView": "or create a custom view?",
   "editor.select.title": "Which editor do you want to use for this page?",
+  "editor.settings": "Editor Settings",
   "editor.tableEditor.title": "Table Editor",
   "editor.togglePreviewPane": "Toggle Preview Pane",
   "editor.toggleScrollSync": "Toggle Scroll Sync",