feat: markdown editor UX improvements

ux/src/components/EditorMarkdown.vue

@@ -119,7 +119,21 @@
         textarea(ref='cmRef')
     transition(name='editor-markdown-preview')
       .editor-markdown-preview(v-if='state.previewShown')
-        .editor-markdown-preview-toolbar Render Preview
+        .editor-markdown-preview-toolbar
+          strong: em {{ t('editor.renderPreview') }}
+          q-separator.q-ml-md.q-mr-sm(vertical, inset)
+          q-btn(
+            icon='mdi-arrow-vertical-lock'
+            padding='xs sm'
+            flat
+            )
+            q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.toggleScrollLock') }}
+          q-btn(
+            icon='mdi-eye-off-outline'
+            padding='xs sm'
+            flat
+            )
+            q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.togglePreviewPane') }}
         .editor-markdown-preview-content.contents(ref='editorPreviewContainer')
           div(
             ref='editorPreview'
@@ -421,12 +435,13 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
   }
   &-toolbar {
     background-color: $primary;
+    border-left: 40px solid darken($primary, 5%);
     color: #FFF;
     height: 32px;
   }
   &-sidebar {
     background-color: $dark-4;
-    border-top: 32px solid $primary;
+    border-top: 32px solid darken($primary, 10%);
     color: #FFF;
     width: 56px;
     display: flex;

ux/src/components/PageHeader.vue

@@ -104,6 +104,15 @@
         aria-label='Print'
         )
         q-tooltip Print
+    q-btn.q-mr-sm.acrylic-btn(
+      v-if='editorStore.isActive'
+      icon='las la-question-circle'
+      flat
+      color='grey'
+      :href='siteStore.docsBase + `/editor/${editorStore.editor}`'
+      target='_blank'
+      type='a'
+      )
     template(v-if='editorStore.isActive || editorStore.hasPendingChanges')
       q-btn.acrylic-btn.q-mr-sm(
         flat

ux/src/i18n/locales/en.json

@@ -1716,5 +1716,8 @@
   "profile.cvdProtanopia": "Protanopia",
   "profile.cvdTritanopia": "Tritanopia",
   "profile.cvdDeuteranopia": "Deuteranopia",
-  "profile.accessibility": "Accessibility"
+  "profile.accessibility": "Accessibility",
+  "editor.toggleScrollLock": "Toggle Scroll Lock",
+  "editor.togglePreviewPane": "Toggle Preview Pane",
+  "editor.renderPreview": "Render Preview"
 }