feat(mdviewer): add h4 and h5 support to block type selector and slash menu

Author: abose

src-mdviewer/src/components/editor.js

@@ -1121,6 +1121,8 @@ function handleMarkdownShortcutOnSpace(e, contentEl) {
         { regex: /^#$/, command: "formatBlock", value: "<h1>" },
         { regex: /^##$/, command: "formatBlock", value: "<h2>" },
         { regex: /^###$/, command: "formatBlock", value: "<h3>" },
+        { regex: /^####$/, command: "formatBlock", value: "<h4>" },
+        { regex: /^#####$/, command: "formatBlock", value: "<h5>" },
         { regex: /^[-*]$/, command: "insertUnorderedList" },
         { regex: /^1\.$/, command: "insertOrderedList" },
         { regex: /^>$/, command: "formatBlock", value: "<blockquote>" },

src-mdviewer/src/components/embedded-toolbar.js

@@ -124,6 +124,8 @@ function renderEditMode(level) {
             <option value="<h1>">${t("slash.heading1") || "Heading 1"}</option>
             <option value="<h2>">${t("slash.heading2") || "Heading 2"}</option>
             <option value="<h3>">${t("slash.heading3") || "Heading 3"}</option>
+            <option value="<h4>">${t("slash.heading4") || "Heading 4"}</option>
+            <option value="<h5>">${t("slash.heading5") || "Heading 5"}</option>
         </select>`;
 
     const textBtns = [
@@ -368,7 +370,7 @@ function updateFormatState(state) {
 
     if (blockTypeSelect && state.blockType) {
         const tagToValue = {
-            "H1": "<h1>", "H2": "<h2>", "H3": "<h3>",
+            "H1": "<h1>", "H2": "<h2>", "H3": "<h3>", "H4": "<h4>", "H5": "<h5>",
             "P": "<p>", "DIV": "<p>"
         };
         const val = tagToValue[state.blockType] || "<p>";

src-mdviewer/src/components/slash-menu.js

@@ -3,6 +3,8 @@ import {
   Heading1,
   Heading2,
   Heading3,
+  Heading4,
+  Heading5,
   List,
   ListOrdered,
   ListChecks,
@@ -37,6 +39,8 @@ const menuItems = [
   { labelKey: "slash.heading1", descKey: "slash.heading1_desc", icon: "heading-1", command: "formatBlock", value: "<h1>" },
   { labelKey: "slash.heading2", descKey: "slash.heading2_desc", icon: "heading-2", command: "formatBlock", value: "<h2>" },
   { labelKey: "slash.heading3", descKey: "slash.heading3_desc", icon: "heading-3", command: "formatBlock", value: "<h3>" },
+  { labelKey: "slash.heading4", descKey: "slash.heading4_desc", icon: "heading-4", command: "formatBlock", value: "<h4>" },
+  { labelKey: "slash.heading5", descKey: "slash.heading5_desc", icon: "heading-5", command: "formatBlock", value: "<h5>" },
   { labelKey: "slash.bullet_list", descKey: "slash.bullet_list_desc", icon: "list", command: "insertUnorderedList" },
   { labelKey: "slash.numbered_list", descKey: "slash.numbered_list_desc", icon: "list-ordered", command: "insertOrderedList" },
   { labelKey: "slash.task_list", descKey: "slash.task_list_desc", icon: "list-checks", command: "taskList" },
@@ -101,7 +105,7 @@ function getFrecencyScore(id) {
 }
 
 const shortcutHints = {
-  "slash.heading1": "# ", "slash.heading2": "## ", "slash.heading3": "### ",
+  "slash.heading1": "# ", "slash.heading2": "## ", "slash.heading3": "### ", "slash.heading4": "#### ", "slash.heading5": "##### ",
   "slash.bullet_list": "- ", "slash.numbered_list": "1. ",
   "slash.task_list": "- [ ] ", "slash.blockquote": "> ",
   "slash.code_block": "```", "slash.divider": "---",
@@ -189,7 +193,7 @@ function renderItems() {
   menu.innerHTML = html;
 
   createIcons({
-    icons: { Pilcrow, Heading1, Heading2, Heading3, List, ListOrdered, ListChecks, Quote, FileCode, Table, Minus, Workflow },
+    icons: { Pilcrow, Heading1, Heading2, Heading3, Heading4, Heading5, List, ListOrdered, ListChecks, Quote, FileCode, Table, Minus, Workflow },
     attrs: { class: "" },
   });
 

src-mdviewer/src/locales/en.json

@@ -59,6 +59,8 @@
     "heading1": "Heading 1",
     "heading2": "Heading 2",
     "heading3": "Heading 3",
+    "heading4": "Heading 4",
+    "heading5": "Heading 5",
     "bold": "Bold ({mod}+B)",
     "italic": "Italic ({mod}+I)",
     "strikethrough": "Strikethrough ({mod}+Shift+X)",
@@ -86,6 +88,10 @@
     "heading2_desc": "Medium heading",
     "heading3": "Heading 3",
     "heading3_desc": "Small heading",
+    "heading4": "Heading 4",
+    "heading4_desc": "Smaller heading",
+    "heading5": "Heading 5",
+    "heading5_desc": "Smallest heading",
     "bullet_list": "Bullet list",
     "bullet_list_desc": "Unordered list",
     "numbered_list": "Numbered list",