Adjust toolbar snippets for emphasis and tables

Author: freddiefujiwara

src/components/MarkdownToolbar.test.js

@@ -69,20 +69,24 @@ describe("MarkdownToolbar", () => {
     textarea.setSelectionRange(5, 5);
 
     container.querySelector('[data-action="bold"]').click();
-    expect(textarea.value).toBe("Hello****");
-    expect(textarea.selectionStart).toBe(7);
+    expect(textarea.value).toBe("Hello**");
+    expect(textarea.selectionStart).toBe(6);
 
     container.querySelector('[data-action="code"]').click();
-    expect(textarea.value).toBe("Hello**``**");
-    expect(textarea.selectionStart).toBe(8);
+    expect(textarea.value).toBe("Hello*``*");
+    expect(textarea.selectionStart).toBe(7);
 
     container.querySelector('[data-action="table"]').click();
-    expect(textarea.value).toBe("Hello**`|`**");
-    expect(textarea.selectionStart).toBe(9);
+    expect(textarea.value).toBe("Hello*`|`*");
+    expect(textarea.selectionStart).toBe(8);
+
+    container.querySelector('[data-action="table-divider"]').click();
+    expect(textarea.value).toBe("Hello*`||-`*");
+    expect(textarea.selectionStart).toBe(10);
 
     container.querySelector('[data-action="strike"]').click();
-    expect(textarea.value).toBe("Hello**`|~~~~`**");
-    expect(textarea.selectionStart).toBe(11);
+    expect(textarea.value).toBe("Hello*`||-~~~~`*");
+    expect(textarea.selectionStart).toBe(12);
 
     app.unmount();
   });

src/components/MarkdownToolbar.vue

@@ -175,10 +175,10 @@ defineExpose(
           class="px-3 py-2 rounded-lg border border-slate-200 bg-white text-sm font-semibold shadow-sm"
           data-action="bold"
           @mousedown.prevent
-          @touchstart.prevent.stop="handleSnippetAction('****', 2)"
-          @click="handleSnippetAction('****', 2)"
+          @touchstart.prevent.stop="handleSnippetAction('**', 1)"
+          @click="handleSnippetAction('**', 1)"
         >
-          ****
+          **
         </button>
         <button
           type="button"
@@ -210,6 +210,16 @@ defineExpose(
         >
           |
         </button>
+        <button
+          type="button"
+          class="px-3 py-2 rounded-lg border border-slate-200 bg-white text-sm font-semibold shadow-sm"
+          data-action="table-divider"
+          @mousedown.prevent
+          @touchstart.prevent.stop="handleSnippetAction('|-', 2)"
+          @click="handleSnippetAction('|-', 2)"
+        >
+          |-
+        </button>
         <button
           type="button"
           class="px-3 py-2 rounded-lg border border-slate-200 bg-white text-sm font-semibold shadow-sm"