fix: tabs if already indented

Author: adamdehaven

src/components/MarkdownContent.vue

@@ -2,13 +2,19 @@
   <!-- eslint-disable vue/no-v-html -->
   <div
     class="markdown-content"
+    :class="`mode-${mode}`"
     v-html="markdownContent"
   />
   <!-- eslint-enable vue/no-v-html -->
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, inject } from 'vue'
+import type { Ref } from 'vue'
+import { MODE_INJECTION_KEY } from '@/injection-keys'
+import type { MarkdownMode } from '@/types'
+
+const mode: Ref<MarkdownMode> = inject(MODE_INJECTION_KEY, ref('read'))
 
 const props = defineProps({
   content: {
@@ -39,11 +45,14 @@ $header-anchor-offset-top: calc(var(--kui-space-50, $kui-space-50) + 2px);
   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-width: 900px;
-  padding: 0 var(--kui-space-70, $kui-space-70);
-  width: calc(100% - (#{$kui-space-70} * 2)); // 100% width minus 2x padding
+  padding: var(--kui-space-40, $kui-space-40) var(--kui-space-70, $kui-space-70);
   word-wrap: break-word;
 
+  &.mode-read {
+    // Remove left and right padding in read mode
+    padding: var(--kui-space-0, $kui-space-0);
+  }
+
   :deep() {
     font-size: var(--kui-font-size-40, $kui-font-size-40);
     line-height: var(--kui-line-height-40, $kui-line-height-40);
@@ -68,9 +77,10 @@ $header-anchor-offset-top: calc(var(--kui-space-50, $kui-space-50) + 2px);
         transition: opacity 0.2s ease-in-out;
         user-select: none;
 
-        &:hover {
-          opacity: 1;
-        }
+        // TODO: Re-enable opacity and add left padding to `.markdown-content` if you want to see the header links on hover
+        // &:hover {
+        //   opacity: 1;
+        // }
       }
 
       &:hover {
@@ -106,7 +116,7 @@ $header-anchor-offset-top: calc(var(--kui-space-50, $kui-space-50) + 2px);
       border-radius: var(--kui-border-radius-40, $kui-border-radius-40);
       font-family: var(--kui-font-family-code, $kui-font-family-code);
       font-size: var(--kui-font-size-30, $kui-font-size-30);
-      line-height: var(--kui-line-height-50, $kui-line-height-50);
+      line-height: var(--kui-line-height-30, $kui-line-height-30);
       margin: var(--kui-space-0, $kui-space-0);
       overflow-wrap: break-word;
       overflow-x: auto;

src/components/toolbar/MarkdownToolbar.vue

@@ -33,8 +33,6 @@
       </div>
 
       <template v-if="editable && mode !== 'read'">
-        <div class="toolbar-divider" />
-
         <InfoTooltip
           v-for="option in formatOptions"
           :key="option.label"
@@ -176,7 +174,7 @@ import type { MarkdownMode, FormatOption, TemplateOption, InlineFormat, Markdown
 import IconButton from '@/components/toolbar/IconButton.vue'
 import InfoTooltip from '@/components/toolbar/InfoTooltip.vue'
 import TooltipShortcut from '@/components/toolbar/TooltipShortcut.vue'
-import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, MarkIcon, CodeIcon, CodeblockIcon, TableIcon, TasklistIcon, ListUnorderedIcon, ListOrderedIcon, MarkdownIcon, HtmlIcon, BlockquoteIcon, ExpandIcon, CollapseIcon } from '@kong/icons'
+import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, /* SubscriptIcon, SuperscriptIcon, MarkIcon, */ CodeIcon, CodeblockIcon, TableIcon, TasklistIcon, ListUnorderedIcon, ListOrderedIcon, MarkdownIcon, HtmlIcon, BlockquoteIcon, ExpandIcon, CollapseIcon } from '@kong/icons'
 
 const mode: Ref<MarkdownMode> = inject(MODE_INJECTION_KEY, ref('read'))
 const editable: Ref<boolean> = inject(EDITABLE_INJECTION_KEY, ref(false))

src/composables/useMarkdownActions.ts

@@ -481,14 +481,22 @@ export default function useMarkdownActions(
         }
       }
 
+      let indentationSpaces = ''
+      // If newline template is not needed, check if we should keep the indentation level
+      if (newLineContent === NEW_LINE_CHARACTER) {
+        Array.from(Array(lastLine.length - lastLine.trimStart().length).keys()).forEach(() => (indentationSpaces += ' '))
+      }
+
       // Update the raw markdown content
-      rawMarkdown.value = removeNewLineTemplate ? rawMarkdown.value.substring(0, selectedText.start - lastLine.length) + rawMarkdown.value.substring(selectedText.end) : startText + newLineContent + rawMarkdown.value.substring(selectedText.end)
+      rawMarkdown.value = removeNewLineTemplate
+        ? rawMarkdown.value.substring(0, selectedText.start - lastLine.length) + rawMarkdown.value.substring(selectedText.end)
+        : (startText + newLineContent + indentationSpaces + rawMarkdown.value.substring(selectedText.end))
 
       // Always focus back on the textarea
       await focusTextarea()
 
       // Update the cursor position
-      textarea.selectionEnd = removeNewLineTemplate ? selectedText.start - templateLength : selectedText.start + newLineContent.length
+      textarea.selectionEnd = removeNewLineTemplate ? selectedText.start - templateLength : selectedText.start + newLineContent.length + indentationSpaces.length
     } catch (err) {
       console.warn('insertNewLine', err)
     }