Merge branch 'md-preview' into 'main'

MDE preview See merge request reportcreator/reportcreator!809
Syslifters · Dec 20, 2024 · 8cdd59d · 8cdd59d
2 parents 28e0e0c + cb0561d
commit 8cdd59d
Show file tree

Hide file tree

Showing 12 changed files with 195 additions and 105 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,8 @@
 * Add button to generate random password to password fields
 * Shared notes: Default to markdown preview mode for readonly shares
 * Shared notes: Autofocus root note
+* UI: Hide markdown toolbar in preview mode
+* UI: Update UI to switch markdown editor view mode
 
 
 ## v2024.96 - 2024-12-04

diff --git a/packages/frontend/src/assets/mde-highlight.scss b/packages/frontend/src/assets/mde-highlight.scss
@@ -9,6 +9,10 @@
 .cm-focused .cm-selectionBackground { display: initial; background-color: rgba(var(--v-theme-codemirror-selection), 1) !important; }
 .cm-cursor { border-left-color: rgb(var(--v-theme-on-surface)); }
 
+.cm-gutters {
+  background-color: rgba(var(--v-theme-on-surface), 0.05);
+}
+
 
 /* inline markdown styles */
 .cm-content {

diff --git a/packages/frontend/src/components/DynamicInputField.vue b/packages/frontend/src/components/DynamicInputField.vue
@@ -120,6 +120,7 @@
                   v-if="props.collab?.comments"
                   density="comfortable"
                   v-bind="commentBtnAttrs"
+                  v-show="!mobile"
                 />
               </template>
             </v-card-item>
@@ -148,6 +149,7 @@
                   v-if="props.collab?.comments"
                   density="comfortable"
                   v-bind="commentBtnAttrs"
+                  v-show="!mobile"
                 />
                 <s-btn-icon
                   v-if="definition.items!.type === 'string'"
@@ -235,8 +237,9 @@
                           <v-icon
                             size="x-large"
                             class="draggable-handle" 
-                            :disabled="props.disabled || props.readonly"
                             icon="mdi-drag-horizontal" 
+                            :disabled="props.disabled || props.readonly"
+                            v-show="!mobile"
                           />
                           <btn-delete
                             :delete="() => emitInputList('delete', entryIdx as number)"
@@ -269,6 +272,7 @@
         <comment-btn
           v-if="props.collab?.comments && ![FieldDataType.MARKDOWN, FieldDataType.LIST, FieldDataType.OBJECT].includes(definition.type as any)"
           v-bind="commentBtnAttrs"
+          v-show="!mobile"
         />
       </div>
     </template>
@@ -308,6 +312,10 @@ const emit = defineEmits<{
   'update:markdownEditorMode': [value: MarkdownEditorMode];
 }>();
 
+
+const { mobile } = useDisplay();
+
+
 function getInitialValue(fieldDef: FieldDefinition, useDefault = true): any {
   if (fieldDef.default && useDefault) {
     return fieldDef.default;

diff --git a/packages/frontend/src/components/Markdown/FieldContent.vue b/packages/frontend/src/components/Markdown/FieldContent.vue
@@ -13,7 +13,6 @@
           ref="editorRef"
           v-intersect="onIntersect"
           class="mde-editor"
-          :class="{'mde-editor-side': props.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW}"
         />
       </v-col>
       <v-col 

diff --git a/packages/frontend/src/components/Markdown/Page.vue b/packages/frontend/src/components/Markdown/Page.vue
@@ -1,5 +1,5 @@
 <template>
-  <full-height-page class="mde">
+  <full-height-page class="mde" @click="focus()">
     <template #header>
       <markdown-toolbar v-if="editorView" v-bind="markdownToolbarAttrs" />
     </template>

diff --git a/packages/frontend/src/components/Markdown/Statusbar.vue b/packages/frontend/src/components/Markdown/Statusbar.vue
@@ -13,7 +13,7 @@
       <input ref="fileInput" type="file" multiple @change="e => onUploadFiles(e as InputEvent)" @click.stop :disabled="props.disabled || props.fileUploadInProgress" class="d-none" />
     </div>
     <v-spacer />
-    <div class="status-items">
+    <div class="status-items" v-if="!mobile">
       <span>lines: {{ lineCount }}</span>
       <span>words: {{ wordCount }}</span>
       <span>{{ currentLineNumber }}:{{ currentColNumber }}</span>
@@ -31,6 +31,8 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
+const { mobile } = useDisplay();
+
 const currentLineNumber = computed(() => props.editorState.doc.lineAt(props.editorState.selection.main.head).number);
 const currentColNumber = computed(() => {
   const pos = props.editorState.selection.main.head
@@ -74,6 +76,7 @@ async function onUploadFiles(event: InputEvent) {
   font-size: smaller;
   padding: 0.3em 1em;
   color: #959694;
+  overflow: hidden;
 
   .status-items {
     span {