fix: indent ordered list

Author: adamdehaven

sandbox/App.vue

@@ -7,7 +7,7 @@
       <MarkdownUi
         v-model="content"
         :editable="editable"
-        mode="read"
+        mode="split"
         theme="light"
         @cancel="cancelEdit"
         @mode="modeChanged"

sandbox/mock-document-response.ts

@@ -1,6 +1,6 @@
 export default {
   id: 'da315607-4d04-4a54-810d-45156b575932',
-  content: "# Markdown UI\n\nA markdown renderer and edit UI.\n\n## Formatting types\n\n### Code block and inline code\n\n```typescript\n// TODO: Fenced code blocks need default styles\nconst name = 'Adam'\n```\n\nThis sentence has \\`inlineCode\\` in the middle.\n\n### Emoji\n\n:smile: :rocket: :tada:\n\n### Link\n\n[link](https://github.com)\n\n### Tables\n\n| Column1 | Column2 | Column3 |\n| :--- | :--- | :--- |\n| Content | Content | Content |\n\n### Todo items\n\n- [x] Todo item checked\n- [ ] Another item not checked\n\n---\n\n### Diagrams\n\n#### Mermaid\n\n```mermaid\ngitGraph\n   commit\n   commit\n   branch develop\n   checkout develop\n   commit\n   commit\n   checkout main\n   merge develop\n   commit\n   commit\n```\n\n#### Plantuml\n\n```plantuml\nBob -> Alice : hello\n```\n\n#### DOT\n\n```dot\ndigraph example1 {\n    1 -> 2 -> { 4, 5 };\n    1 -> 3 -> { 6, 7 };\n}\n```\n",
+  content: "# Markdown UI\n\nA markdown renderer and edit UI.\n\n## Formatting types\n\n### Code block and inline code\n\n```typescript\n// TODO: Fenced code blocks need default styles\nconst name = 'Adam'\n```\n\nThis sentence has `inlineCode` in the middle.\n\n### Emoji\n\n:smile: :rocket: :tada:\n\n### Link\n\n[link](https://github.com)\n\n### Tables\n\n| Column1 | Column2 | Column3 |\n| :--- | :--- | :--- |\n| Content | Content | Content |\n\n### Todo items\n\n- [x] Todo item checked\n- [ ] Another item not checked\n\n---\n\n### Diagrams\n\n#### Mermaid\n\n```mermaid\ngitGraph\n   commit\n   commit\n   branch develop\n   checkout develop\n   commit\n   commit\n   checkout main\n   merge develop\n   commit\n   commit\n```\n\n#### Plantuml\n\n```plantuml\nBob -> Alice : hello\n```\n\n#### DOT\n\n```dot\ndigraph example1 {\n    1 -> 2 -> { 4, 5 };\n    1 -> 3 -> { 6, 7 };\n}\n```\n",
   parent_document_id: null,
   slug: 'markdown',
   title: 'markdown',

src/components/MarkdownContent.vue

@@ -91,14 +91,14 @@ $header-anchor-offset-top: calc(var(--kui-space-50, $kui-space-50) + 2px);
       font-family: var(--kui-font-family-code, $kui-font-family-code);
     }
 
-    // code blocks
-    pre,
-    code {
-      white-space: pre;
-      // width: 100%;
-      word-break: normal;
-      word-spacing: normal;
-      word-wrap: normal;
+    // Inline code within the content area
+    p code {
+      background: var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker);
+      border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
+      font-size: var(--kui-font-size-30, $kui-font-size-30);
+      padding: var(--kui-space-10, $kui-space-10) var(--kui-space-20, $kui-space-20);
+      white-space: break-spaces;
+      word-wrap: break-word;
     }
 
     pre {
@@ -111,6 +111,10 @@ $header-anchor-offset-top: calc(var(--kui-space-50, $kui-space-50) + 2px);
       overflow-wrap: break-word;
       overflow-x: auto;
       padding: var(--kui-space-70, $kui-space-70);
+      white-space: pre;
+      word-break: normal;
+      word-spacing: normal;
+      word-wrap: normal;
     }
 
     // Styles for fenced code block copy button in `src/composables/useMarkdownIt.ts`

src/components/MarkdownUi.vue

@@ -88,8 +88,8 @@ const props = defineProps({
   /** The number of spaces to insert on tab. Defaults to 2, max of 10 */
   tabSize: {
     type: Number,
-    default: 2,
-    validator: (size: number): boolean => size >= 2 && size <= 10,
+    default: 4,
+    validator: (size: number): boolean => size >= 2 && size <= 6,
   },
   /** MermaidJs is heavy; allow it opting-out by passing false. Defaults to true. */
   mermaid: {

src/components/toolbar/MarkdownToolbar.vue

@@ -235,9 +235,12 @@ const formatOptions: FormatOption[] = [
   { label: 'Italic', action: 'italic', keys: ['I'], icon: ItalicIcon },
   { label: 'Underline', action: 'underline', keys: ['U'], icon: UnderlineIcon },
   { label: 'Strikethrough', action: 'strikethrough', keys: ['Shift', 'X'], icon: StrikethroughIcon },
-  { label: 'Subscript', action: 'subscript', icon: SubscriptIcon },
-  { label: 'Superscript', action: 'superscript', icon: SuperscriptIcon },
-  { label: 'Mark', action: 'mark', icon: MarkIcon },
+  // Hidden for now
+  // { label: 'Subscript', action: 'subscript', icon: SubscriptIcon },
+  // Hidden for now
+  // { label: 'Superscript', action: 'superscript', icon: SuperscriptIcon },
+  // Hidden for now
+  // { label: 'Mark', action: 'mark', icon: MarkIcon },
   { label: 'Code', action: 'code', keys: ['Shift', 'C'], icon: CodeIcon },
 ]
 

src/composables/useMarkdownActions.ts

@@ -222,7 +222,14 @@ export default function useMarkdownActions(
       const startText = rawMarkdown.value.substring(0, selectedText.start)
 
       // When removing tabs, ensure string starts with two spaces; or a list item that is already indented. If not, exit
-      if (action === 'remove' && (!startText.endsWith(spaces) && !startText.endsWith('  ' + MARKDOWN_TEMPLATE_UL))) {
+      if (
+        action === 'remove' &&
+        !startText.endsWith(spaces) &&
+        // Not an unordered list
+        !startText.endsWith('  ' + MARKDOWN_TEMPLATE_UL) &&
+        // Not an ordered list
+        !/ {2}\d{1,}\. $/.test(startText)
+      ) {
         return
       }
 
@@ -241,8 +248,14 @@ export default function useMarkdownActions(
         // If text starts with an inline template
         if (startText.endsWith(MARKDOWN_TEMPLATE_UL)) {
           rawMarkdown.value = action === 'add' ? rawMarkdown.value.substring(0, selectedText.start - MARKDOWN_TEMPLATE_UL.length) + spaces + MARKDOWN_TEMPLATE_UL + rawMarkdown.value.substring(selectedText.end) : rawMarkdown.value.substring(0, selectedText.start - spaces.length - MARKDOWN_TEMPLATE_UL.length) + MARKDOWN_TEMPLATE_UL + rawMarkdown.value.substring(selectedText.end)
-        } else if (startText.endsWith(MARKDOWN_TEMPLATE_OL)) {
-          rawMarkdown.value = action === 'add' ? rawMarkdown.value.substring(0, selectedText.start - MARKDOWN_TEMPLATE_OL.length) + spaces + MARKDOWN_TEMPLATE_OL + rawMarkdown.value.substring(selectedText.end) : rawMarkdown.value.substring(0, selectedText.start - spaces.length - MARKDOWN_TEMPLATE_OL.length) + MARKDOWN_TEMPLATE_OL + rawMarkdown.value.substring(selectedText.end)
+        } else if (/\d{1,}\. $/.test(startText.split(NEW_LINE_CHARACTER).pop() || '')) {
+          // Remove the `1` in the ordered list template
+          const numberSuffix = MARKDOWN_TEMPLATE_OL.replace('1', '')
+
+          const listNumber = Number((startText.split(NEW_LINE_CHARACTER).at(-2) || startText.split(NEW_LINE_CHARACTER).pop() || '').trimStart().split(numberSuffix)[0]) + 1
+          console.log('listNumber', listNumber)
+
+          rawMarkdown.value = action === 'add' ? rawMarkdown.value.substring(0, selectedText.start - MARKDOWN_TEMPLATE_OL.length) + spaces + MARKDOWN_TEMPLATE_OL + rawMarkdown.value.substring(selectedText.end) : rawMarkdown.value.substring(0, selectedText.start - spaces.length - (listNumber + numberSuffix).length) + (listNumber + numberSuffix) + rawMarkdown.value.substring(selectedText.end)
         } else {
           rawMarkdown.value = action === 'add' ? startText + spaces + rawMarkdown.value.substring(selectedText.end) : rawMarkdown.value.substring(0, selectedText.start - spaces.length) + rawMarkdown.value.substring(selectedText.end)
         }