fix: markdown container and heights

Kong · Dec 19, 2023 · ca16c07 · ca16c07
1 parent 6312b9a
commit ca16c07
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 32 deletions.
diff --git a/sandbox/App.vue b/sandbox/App.vue
@@ -62,3 +62,9 @@ onBeforeMount(async () => {
   content.value = originalContent.value
 })
 </script>
+
+<style lang="scss" scoped>
+.sandbox-container {
+  padding: $kui-space-0 $kui-space-70;
+}
+</style>
diff --git a/src/components/MarkdownContent.vue b/src/components/MarkdownContent.vue
@@ -9,7 +9,6 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { MIN_HEIGHT_DESKTOP } from '../constants'
 
 const props = defineProps({
   content: {
@@ -27,32 +26,28 @@ watch(() => props.content, (content: string): void => {
 
 <style lang="scss" scoped>
 // Computed component variables
-$header-anchor-offset-top: calc(var(--kui-space-50, $kui-space-50) + 1px);
+$header-anchor-offset-top: calc(var(--kui-space-50, $kui-space-50) + 2px);
 
 // Markdown Preview content styles
 .markdown-content {
-  background-color: var(--kui-color-background, $kui-color-background);
-  border: $kui-border-width-10 solid $kui-color-border;
-  border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
-  box-sizing: border-box; // Ensure the padding is calculated in the element's width
   color: var(--kui-color-text, $kui-color-text);
   flex: 1;
   font-family: var(--kui-font-family-text, $kui-font-family-text);
   font-size: var(--kui-font-size-30, $kui-font-size-30);
   font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
   line-height: var(--kui-line-height-40, $kui-line-height-40);
   margin: 0;
-  max-height: calc(100vh - 50px); // TODO: enable/disable for a scrollable container
-  min-height: v-bind('MIN_HEIGHT_DESKTOP');
-  overflow: auto; // TODO: enable/disable for a scrollable container
   padding: 0 var(--kui-space-70, $kui-space-70);
-  width: 100%;
+  width: calc(100% - (#{$kui-space-70} * 2)); // 100% width minus 2x padding
+  word-wrap: break-word;
 
   :deep() {
     font-size: $kui-font-size-40;
     line-height: $kui-line-height-40;
 
-    h1, h2, h3, h4, h5, h6 {
+    // Adjust h2-66 tags for scroll-to margin & padding
+    // Exclude the h1 header
+    h2, h3, h4, h5, h6 {
       margin-top: -$kui-space-20;
       padding-top: $kui-space-50;
       position: relative;

diff --git a/src/components/MarkdownToolbar.vue b/src/components/MarkdownToolbar.vue
@@ -79,6 +79,7 @@ import { computed, inject, ref } from 'vue'
 import type { Ref } from 'vue'
 import { TEXTAREA_ID, MODE_INJECTION_KEY, EDITABLE_INJECTION_KEY } from '../injection-keys'
 import { useActiveElement } from '@vueuse/core'
+import { TOOLBAR_HEIGHT } from '../constants'
 import type { MarkdownMode, FormatOption, TemplateOption, InlineFormat, MarkdownTemplate } from '../types'
 
 const textareaId: Ref<string> = inject(TEXTAREA_ID, ref(''))
@@ -134,11 +135,12 @@ const templateOptions: TemplateOption[] = [
 <style lang="scss" scoped>
 .markdown-ui-toolbar {
   align-items: center;
+  background-color: var(--kui-color-background, $kui-color-background);
   display: flex;
   gap: $kui-space-70;
+  height: v-bind('TOOLBAR_HEIGHT');
   justify-content: space-between;
   overflow-x: auto;
-  padding: $kui-space-0 $kui-space-30;
 
   .toolbar-left,
   .toolbar-right {

diff --git a/src/components/MarkdownUi.vue b/src/components/MarkdownUi.vue
@@ -3,7 +3,7 @@
     v-if="ready"
     :id="componentContainerId"
     class="kong-ui-public-markdown-ui"
-    :class="[`mode-${currentMode}`, { 'is-fullscreen': isFullscreen }]"
+    :class="[`mode-${currentMode}`, { 'fullscreen': isFullscreen }]"
   >
     <MarkdownToolbar
       @cancel="cancelChanges"
@@ -39,14 +39,14 @@
       </div>
       <div
         class="markdown-preview"
+        :class="[scrollableClass]"
         data-testid="markdown-preview"
       >
         <div
           class="markdown-content-container"
           data-testid="markdown-content-container"
         >
           <MarkdownContent
-            :class="[scrollableClass]"
             :content="htmlPreview ? markdownPreviewHtml : markdownHtml"
           />
         </div>
@@ -62,7 +62,7 @@ import MarkdownToolbar from './MarkdownToolbar.vue'
 import MarkdownContent from './MarkdownContent.vue'
 import composables from '../composables'
 import { TEXTAREA_ID, MODE_INJECTION_KEY, EDITABLE_INJECTION_KEY } from '../injection-keys'
-import { EDITOR_DEBOUNCE_TIMEOUT, MIN_HEIGHT_MOBILE, MIN_HEIGHT_DESKTOP } from '../constants'
+import { EDITOR_DEBOUNCE_TIMEOUT, TOOLBAR_HEIGHT } from '../constants'
 import { v4 as uuidv4 } from 'uuid'
 import type { MarkdownMode, InlineFormat, MarkdownTemplate, TextAreaInputEvent } from '../types'
 import formatHtml from 'html-format'
@@ -79,7 +79,7 @@ const props = defineProps({
   mode: {
     type: String as PropType<MarkdownMode>,
     default: 'view',
-    validator: (mode: string):boolean => ['view', 'edit'].includes(mode),
+    validator: (mode: string): boolean => ['view', 'edit'].includes(mode),
   },
   /** Optionally show the markdown editor */
   editable: {
@@ -101,7 +101,13 @@ const props = defineProps({
   theme: {
     type: String as PropType<'light' | 'dark'>,
     default: 'light',
-    validator: (theme: string):boolean => ['light', 'dark'].includes(theme),
+    validator: (theme: string): boolean => ['light', 'dark'].includes(theme),
+  },
+  /** The max height of the editor when not being displayed fullscreen. Defaults to 300, Minimum of 100. */
+  editorMaxHeight: {
+    type: Number,
+    default: 300,
+    validator: (height: number): boolean => height >= 100,
   },
   /** When the editor is in fullscreen mode, the top offset, in pixels */
   fullscreenOffsetTop: {
@@ -315,6 +321,10 @@ onUnmounted(() => {
   // Remove scrolling event listeners
   destroySyncScroll()
 })
+
+// Calculate the max height of the `.markdown-panes` when fullscreen is true. 100vh, minus the toolbar height, minus 10px padding.
+const fullscreenMarkdownPanesHeight = computed((): string => `calc(100vh - ${TOOLBAR_HEIGHT} - 10px)`)
+const markdownEditorMaxHeight = computed((): string => `${props.editorMaxHeight}px`)
 </script>
 
 <style lang="scss" scoped>
@@ -332,8 +342,7 @@ onUnmounted(() => {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: $kui-space-70;
-    padding: $kui-space-30;
+    gap: $kui-space-40;
     width: 100%;
 
     @media (min-width: $kui-breakpoint-phablet) {
@@ -342,32 +351,36 @@ onUnmounted(() => {
   }
 
   &.mode-edit {
+
     // Fullscreen mode only available when editing
-    &.is-fullscreen {
+    &.fullscreen {
       background: var(--kui-color-background, $kui-color-background);
       bottom: 0;
       height: 100%;
       left: 0;
       margin-top: v-bind('fullscreenOffsetTop');
-      overflow: auto;
       position: fixed;
       right: 0;
       top: 0;
       width: 100%;
       z-index: 1001;
 
-      :deep(.markdown-content) {
-        max-height: calc(100vh - 50px); // TODO: enable/disable for a scrollable container
+      .markdown-panes {
+        height: v-bind('fullscreenMarkdownPanesHeight');
       }
     }
 
     .markdown-panes {
+      height: v-bind('markdownEditorMaxHeight'); // max-height in edit mode
+
       .markdown-preview {
+        border: $kui-border-width-10 solid $kui-color-border;
+        border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
         // Hide the preview in edit mode on small screens
         display: none;
 
         @media (min-width: $kui-breakpoint-phablet) {
-          display: block;
+          display: flex;
         }
       }
     }
@@ -376,15 +389,21 @@ onUnmounted(() => {
   .markdown-editor,
   .markdown-preview {
     display: flex;
-    flex: 1;
+    flex: 1; // Each column takes up equal width
     flex-direction: column;
+    overflow-y: auto;
     width: 100%;
 
     @media (min-width: $kui-breakpoint-phablet) {
       width: 50%;
     }
   }
 
+  .markdown-preview {
+    background-color: var(--kui-color-background, $kui-color-background);
+    box-sizing: border-box; // Ensure the padding is calculated in the element's width
+  }
+
   .markdown-html-preview {
     :deep(pre) {
       font-family: $kui-font-family-code;
@@ -413,9 +432,7 @@ onUnmounted(() => {
     font-size: var(--kui-font-size-40, $kui-font-size-40); // needs to be at least 16px to prevent automatic zoom in on focus on mobile
     font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
     line-height: var(--kui-line-height-40, $kui-line-height-40);
-    max-height: calc(100vh - (#{$kui-space-70} * 2));
     max-width: 100%;
-    min-height: v-bind('MIN_HEIGHT_MOBILE');
     outline: none;
     padding: var(--kui-space-40, $kui-space-40) var(--kui-space-50, $kui-space-50);
     resize: vertical;
@@ -425,7 +442,6 @@ onUnmounted(() => {
 
     @media (min-width: $kui-breakpoint-phablet) {
       font-size: var(--kui-font-size-30, $kui-font-size-30);
-      min-height: v-bind('MIN_HEIGHT_DESKTOP');
     }
 
     &::placeholder {

diff --git a/src/constants.ts b/src/constants.ts
@@ -30,7 +30,5 @@ export const KEYBOARD_SHORTCUTS: Record<string, InlineFormat> = {
   u: 'underline',
 }
 
-/** Minimum editor and preview height, on mobile */
-export const MIN_HEIGHT_MOBILE: string = '300px'
-/** Minimum editor and preview height, on desktop */
-export const MIN_HEIGHT_DESKTOP: string = '120px'
+/** The height of the .markdown-ui-toolbar */
+export const TOOLBAR_HEIGHT: string = '40px'