From e16928f1b7a1accc6a9d959432b234ba61b315b4 Mon Sep 17 00:00:00 2001
From: Rias <hey@rias.be>
Date: Fri, 19 Jun 2026 11:15:26 +0200
Subject: [PATCH] Add H4-H6, strikethrough formatting & buttons

---
 README.md                 | 11 +++++----
 scripts/generate-types.js |  8 +++++++
 src/icons.js              | 18 ++++++++++++++
 src/overtype.d.ts         | 14 +++++++++++
 src/parser.js             |  4 ++--
 src/styles.js             | 43 ++++++++++++++++++++++++++++++++--
 src/themes.js             | 12 ++++++++++
 src/toolbar-buttons.js    | 49 +++++++++++++++++++++++++++++++++++++++
 test/overtype.test.js     |  5 +++-
 test/test-types.ts        | 27 ++++++++++++++++++++-
 10 files changed, 181 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index d261b50..64a9154 100644
--- a/README.md
+++ b/README.md
@@ -144,7 +144,7 @@ const [editor] = new OverType('#editor', {
   value: '# Document\n\nSelect text and use the toolbar!'
 });
 
-// Default toolbar: Bold, Italic, Code | Link | H1, H2, H3 | Lists, Tasks | Quote | View Mode
+// Default toolbar: Bold, Italic, Strikethrough, Code | Link | H1, H2, H3 | Lists, Tasks | Quote | View Mode
 ```
 
 **Custom Toolbar (v2.0):**
@@ -169,7 +169,7 @@ const [editor] = new OverType('#editor', {
   ]
 });
 
-// Available: bold, italic, code, link, h1, h2, h3, bulletList,
+// Available: bold, italic, strikethrough, code, link, h1, h2, h3, h4, h5, h6, bulletList,
 // orderedList, taskList, quote, separator, viewMode
 ```
 
@@ -203,7 +203,7 @@ document.querySelector('#bold-btn').addEventListener('click', () => {
 });
 ```
 
-Available actions include `toggleBold`, `toggleItalic`, `toggleCode`, `insertLink`, `toggleBulletList`, `toggleNumberedList`, `toggleQuote`, `toggleTaskList`, `insertHeader`, `toggleH1`/`H2`/`H3`, `getActiveFormats`, `hasFormat`, `expandSelection`, and `applyCustomFormat`. The same namespace is available as `window.markdownActions` and `OverType.markdownActions` in script-tag builds.
+Available actions include `toggleBold`, `toggleItalic`, `toggleStrikethrough`, `toggleCode`, `insertLink`, `toggleBulletList`, `toggleNumberedList`, `toggleQuote`, `toggleTaskList`, `insertHeader`, `toggleH1`/`H2`/`H3`/`H4`/`H5`/`H6`, `getActiveFormats`, `hasFormat`, `expandSelection`, and `applyCustomFormat`. The same namespace is available as `window.markdownActions` and `OverType.markdownActions` in script-tag builds.
 
 See [examples/custom-toolbar.html](examples/custom-toolbar.html) for complete examples.
 
@@ -345,6 +345,9 @@ const [editor] = new OverType('#editor', {
       h1: '#f95738',
       h2: '#ee964b',
       h3: '#3d8a51',
+      h4: '#0d3b66',
+      h5: '#5a7a9b',
+      h6: '#999999',
       strong: '#ee964b',
       em: '#f95738',
       link: '#0d3b66',
@@ -697,7 +700,7 @@ When no text is selected, Tab and Shift+Tab use normal browser focus navigation.
 
 ## Supported Markdown
 
-- **Headers** - `# H1`, `## H2`, `### H3`
+- **Headers** - `# H1` through `###### H6`
 - **Bold** - `**text**` or `__text__`
 - **Italic** - `*text*` or `_text_`
 - **Strikethrough** - `~~text~~` or `~text~` (GFM)
diff --git a/scripts/generate-types.js b/scripts/generate-types.js
index c97f55f..198043e 100755
--- a/scripts/generate-types.js
+++ b/scripts/generate-types.js
@@ -337,6 +337,7 @@ export default OverType;
 export const markdownActions: {
   toggleBold(textarea: HTMLTextAreaElement): void;
   toggleItalic(textarea: HTMLTextAreaElement): void;
+  toggleStrikethrough(textarea: HTMLTextAreaElement): void;
   toggleCode(textarea: HTMLTextAreaElement): void;
   insertLink(textarea: HTMLTextAreaElement, options?: { url?: string; text?: string }): void;
   toggleBulletList(textarea: HTMLTextAreaElement): void;
@@ -347,6 +348,9 @@ export const markdownActions: {
   toggleH1(textarea: HTMLTextAreaElement): void;
   toggleH2(textarea: HTMLTextAreaElement): void;
   toggleH3(textarea: HTMLTextAreaElement): void;
+  toggleH4(textarea: HTMLTextAreaElement): void;
+  toggleH5(textarea: HTMLTextAreaElement): void;
+  toggleH6(textarea: HTMLTextAreaElement): void;
   getActiveFormats(textarea: HTMLTextAreaElement): string[];
   hasFormat(textarea: HTMLTextAreaElement, format: string): boolean;
   expandSelection(textarea: HTMLTextAreaElement, options?: object): void;
@@ -359,12 +363,16 @@ export const markdownActions: {
 export const toolbarButtons: {
   bold: ToolbarButton;
   italic: ToolbarButton;
+  strikethrough: ToolbarButton;
   code: ToolbarButton;
   separator: ToolbarButton;
   link: ToolbarButton;
   h1: ToolbarButton;
   h2: ToolbarButton;
   h3: ToolbarButton;
+  h4: ToolbarButton;
+  h5: ToolbarButton;
+  h6: ToolbarButton;
   bulletList: ToolbarButton;
   orderedList: ToolbarButton;
   taskList: ToolbarButton;
diff --git a/src/icons.js b/src/icons.js
index 240cbc9..31ab4d5 100644
--- a/src/icons.js
+++ b/src/icons.js
@@ -14,6 +14,12 @@ export const italicIcon = `<svg viewBox="0 0 18 18">
   <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="8" x2="10" y1="14" y2="4"></line>
 </svg>`;
 
+export const strikethroughIcon = `<svg viewBox="0 0 18 18">
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" x1="15.5" x2="2.5" y1="8.5" y2="9.5"></line>
+  <path fill="currentColor" d="M9.007,8C6.542,7.791,6,7.519,6,6.5,6,5.792,7.283,5,9,5c1.571,0,2.765.679,2.969,1.309a1,1,0,0,0,1.9-.617C13.356,4.106,11.354,3,9,3,6.2,3,4,4.538,4,6.5a3.2,3.2,0,0,0,.5,1.843Z"></path>
+  <path fill="currentColor" d="M8.984,10C11.457,10.208,12,10.479,12,11.5c0,0.708-1.283,1.5-3,1.5-1.571,0-2.765-.679-2.969-1.309a1,1,0,1,0-1.9.617C4.644,13.894,6.646,15,9,15c2.8,0,5-1.538,5-3.5a3.2,3.2,0,0,0-.5-1.843Z"></path>
+</svg>`;
+
 export const h1Icon = `<svg viewBox="0 0 18 18">
   <path fill="currentColor" d="M10,4V14a1,1,0,0,1-2,0V10H3v4a1,1,0,0,1-2,0V4A1,1,0,0,1,3,4V8H8V4a1,1,0,0,1,2,0Zm6.06787,9.209H14.98975V7.59863a.54085.54085,0,0,0-.605-.60547h-.62744a1.01119,1.01119,0,0,0-.748.29688L11.645,8.56641a.5435.5435,0,0,0-.022.8584l.28613.30762a.53861.53861,0,0,0,.84717.0332l.09912-.08789a1.2137,1.2137,0,0,0,.2417-.35254h.02246s-.01123.30859-.01123.60547V13.209H12.041a.54085.54085,0,0,0-.605.60547v.43945a.54085.54085,0,0,0,.605.60547h4.02686a.54085.54085,0,0,0,.605-.60547v-.43945A.54085.54085,0,0,0,16.06787,13.209Z"></path>
 </svg>`;
@@ -26,6 +32,18 @@ export const h3Icon = `<svg viewBox="0 0 18 18">
   <path fill="currentColor" d="M16.65186,12.30664a2.6742,2.6742,0,0,1-2.915,2.68457,3.96592,3.96592,0,0,1-2.25537-.6709.56007.56007,0,0,1-.13232-.83594L11.64648,13c.209-.34082.48389-.36328.82471-.1543a2.32654,2.32654,0,0,0,1.12256.33008c.71484,0,1.12207-.35156,1.12207-.78125,0-.61523-.61621-.86816-1.46338-.86816H13.2085a.65159.65159,0,0,1-.68213-.41895l-.05518-.10937a.67114.67114,0,0,1,.14307-.78125l.71533-.86914a8.55289,8.55289,0,0,1,.68213-.7373V8.58887a3.93913,3.93913,0,0,1-.748.05469H11.9873a.54085.54085,0,0,1-.605-.60547V7.59863a.54085.54085,0,0,1,.605-.60547h3.75146a.53773.53773,0,0,1,.60547.59375v.17676a1.03723,1.03723,0,0,1-.27539.748L14.74854,10.0293A2.31132,2.31132,0,0,1,16.65186,12.30664ZM9,3A.99974.99974,0,0,0,8,4V8H3V4A1,1,0,0,0,1,4V14a1,1,0,0,0,2,0V10H8v4a1,1,0,0,0,2,0V4A.99974.99974,0,0,0,9,3Z"></path>
 </svg>`;
 
+export const h4Icon = `<svg viewBox="0 0 18 18">
+  <path fill="currentColor" d="M10,4V14a1,1,0,0,1-2,0V10H3v4a1,1,0,0,1-2,0V4A1,1,0,0,1,3,4V8H8V4a1,1,0,0,1,2,0Zm7.05371,7.96582v.38477c0,.39648-.165.60547-.46191.60547h-.47314v1.29785a.54085.54085,0,0,1-.605.60547h-.69336a.54085.54085,0,0,1-.605-.60547V12.95605H11.333a.5412.5412,0,0,1-.60547-.60547v-.15332a1.199,1.199,0,0,1,.22021-.748l2.56348-4.05957a.7819.7819,0,0,1,.72607-.39648h1.27637a.54085.54085,0,0,1,.605.60547v3.7627h.33008A.54055.54055,0,0,1,17.05371,11.96582ZM14.28125,8.7207h-.022a4.18969,4.18969,0,0,1-.38525.81348l-1.188,1.80469v.02246h1.5293V9.60059A7.04058,7.04058,0,0,1,14.28125,8.7207Z"></path>
+</svg>`;
+
+export const h5Icon = `<svg viewBox="0 0 18 18">
+  <path fill="currentColor" d="M16.74023,12.18555a2.75131,2.75131,0,0,1-2.91553,2.80566,3.908,3.908,0,0,1-2.25537-.68164.54809.54809,0,0,1-.13184-.8252L11.73438,13c.209-.34082.48389-.36328.8252-.1543a2.23757,2.23757,0,0,0,1.1001.33008,1.01827,1.01827,0,0,0,1.1001-.96777c0-.61621-.53906-.97949-1.25439-.97949a2.15554,2.15554,0,0,0-.64893.09961,1.15209,1.15209,0,0,1-.814.01074l-.12109-.04395a.64116.64116,0,0,1-.45117-.71484l.231-3.00391a.56666.56666,0,0,1,.62744-.583H15.541a.54085.54085,0,0,1,.605.60547v.43945a.54085.54085,0,0,1-.605.60547H13.41748l-.04395.72559a1.29306,1.29306,0,0,1-.04395.30859h.022a2.39776,2.39776,0,0,1,.57227-.07715A2.53266,2.53266,0,0,1,16.74023,12.18555ZM9,3A.99974.99974,0,0,0,8,4V8H3V4A1,1,0,0,0,1,4V14a1,1,0,0,0,2,0V10H8v4a1,1,0,0,0,2,0V4A.99974.99974,0,0,0,9,3Z"></path>
+</svg>`;
+
+export const h6Icon = `<svg viewBox="0 0 18 18">
+  <path fill="currentColor" d="M14.51758,9.64453a1.85627,1.85627,0,0,0-1.24316.38477H13.252a1.73532,1.73532,0,0,1,1.72754-1.4082,2.66491,2.66491,0,0,1,.5498.06641c.35254.05469.57227.01074.70508-.40723l.16406-.5166a.53393.53393,0,0,0-.373-.75977,4.83723,4.83723,0,0,0-1.17773-.14258c-2.43164,0-3.7627,2.17773-3.7627,4.43359,0,2.47559,1.60645,3.69629,3.19043,3.69629A2.70585,2.70585,0,0,0,16.96,12.19727,2.43861,2.43861,0,0,0,14.51758,9.64453Zm-.23047,3.58691c-.67187,0-1.22168-.81445-1.22168-1.45215,0-.47363.30762-.583.72559-.583.96875,0,1.27734.59375,1.27734,1.12207A.82182.82182,0,0,1,14.28711,13.23145ZM10,4V14a1,1,0,0,1-2,0V10H3v4a1,1,0,0,1-2,0V4A1,1,0,0,1,3,4V8H8V4a1,1,0,0,1,2,0Z"></path>
+</svg>`;
+
 export const linkIcon = `<svg viewBox="0 0 18 18">
   <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7" x2="11" y1="7" y2="11"></line>
   <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z"></path>
diff --git a/src/overtype.d.ts b/src/overtype.d.ts
index dd9c207..a795b8d 100644
--- a/src/overtype.d.ts
+++ b/src/overtype.d.ts
@@ -12,6 +12,9 @@ export interface PreviewColors {
     h1?: string;
     h2?: string;
     h3?: string;
+    h4?: string;
+    h5?: string;
+    h6?: string;
     hr?: string;
     link?: string;
     strong?: string;
@@ -33,6 +36,9 @@ export interface Theme {
     h1?: string;
     h2?: string;
     h3?: string;
+    h4?: string;
+    h5?: string;
+    h6?: string;
     hoverBg?: string;
     hr?: string;
     link?: string;
@@ -245,6 +251,7 @@ export default OverType;
 export const markdownActions: {
   toggleBold(textarea: HTMLTextAreaElement): void;
   toggleItalic(textarea: HTMLTextAreaElement): void;
+  toggleStrikethrough(textarea: HTMLTextAreaElement): void;
   toggleCode(textarea: HTMLTextAreaElement): void;
   insertLink(textarea: HTMLTextAreaElement, options?: { url?: string; text?: string }): void;
   toggleBulletList(textarea: HTMLTextAreaElement): void;
@@ -255,6 +262,9 @@ export const markdownActions: {
   toggleH1(textarea: HTMLTextAreaElement): void;
   toggleH2(textarea: HTMLTextAreaElement): void;
   toggleH3(textarea: HTMLTextAreaElement): void;
+  toggleH4(textarea: HTMLTextAreaElement): void;
+  toggleH5(textarea: HTMLTextAreaElement): void;
+  toggleH6(textarea: HTMLTextAreaElement): void;
   getActiveFormats(textarea: HTMLTextAreaElement): string[];
   hasFormat(textarea: HTMLTextAreaElement, format: string): boolean;
   expandSelection(textarea: HTMLTextAreaElement, options?: object): void;
@@ -267,12 +277,16 @@ export const markdownActions: {
 export const toolbarButtons: {
   bold: ToolbarButton;
   italic: ToolbarButton;
+  strikethrough: ToolbarButton;
   code: ToolbarButton;
   separator: ToolbarButton;
   link: ToolbarButton;
   h1: ToolbarButton;
   h2: ToolbarButton;
   h3: ToolbarButton;
+  h4: ToolbarButton;
+  h5: ToolbarButton;
+  h6: ToolbarButton;
   bulletList: ToolbarButton;
   orderedList: ToolbarButton;
   taskList: ToolbarButton;
diff --git a/src/parser.js b/src/parser.js
index d023eb0..4b7ff8a 100644
--- a/src/parser.js
+++ b/src/parser.js
@@ -80,12 +80,12 @@ export class MarkdownParser {
   }
 
   /**
-   * Parse headers (h1-h3 only)
+   * Parse headers (h1-h6)
    * @param {string} html - HTML line to parse
    * @returns {string} Parsed HTML with header styling
    */
   static parseHeader(html) {
-    return html.replace(/^(#{1,3})\s(.+)$/, (match, hashes, content) => {
+    return html.replace(/^(#{1,6})\s(.+)$/, (match, hashes, content) => {
       const level = hashes.length;
       content = this.parseInlineElements(content);
       return `<h${level}><span class="syntax-marker">${hashes} </span>${content}</h${level}>`;
diff --git a/src/styles.js b/src/styles.js
index ced71df..73064c7 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -296,11 +296,23 @@ export function generateStyles(options = {}) {
     .overtype-wrapper .overtype-preview .h3 { 
       color: var(--h3, #3d8a51) !important; 
     }
+    .overtype-wrapper .overtype-preview .h4 {
+      color: var(--h4, #0d3b66) !important;
+    }
+    .overtype-wrapper .overtype-preview .h5 {
+      color: var(--h5, #5a7a9b) !important;
+    }
+    .overtype-wrapper .overtype-preview .h6 {
+      color: var(--h6, #999999) !important;
+    }
 
     /* Semantic headers - flatten in edit mode */
     .overtype-wrapper .overtype-preview h1,
     .overtype-wrapper .overtype-preview h2,
-    .overtype-wrapper .overtype-preview h3 {
+    .overtype-wrapper .overtype-preview h3,
+    .overtype-wrapper .overtype-preview h4,
+    .overtype-wrapper .overtype-preview h5,
+    .overtype-wrapper .overtype-preview h6 {
       font-size: inherit !important;
       font-weight: bold !important;
       margin: 0 !important;
@@ -319,6 +331,15 @@ export function generateStyles(options = {}) {
     .overtype-wrapper .overtype-preview h3 { 
       color: var(--h3, #3d8a51) !important; 
     }
+    .overtype-wrapper .overtype-preview h4 {
+      color: var(--h4, #0d3b66) !important;
+    }
+    .overtype-wrapper .overtype-preview h5 {
+      color: var(--h5, #5a7a9b) !important;
+    }
+    .overtype-wrapper .overtype-preview h6 {
+      color: var(--h6, #999999) !important;
+    }
 
     /* Lists - remove styling in edit mode */
     .overtype-wrapper .overtype-preview ul,
@@ -718,7 +739,10 @@ export function generateStyles(options = {}) {
     /* Headers - restore proper sizing in preview mode */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1,
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2,
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3,
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h4,
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h5,
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h6 {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
       font-weight: 600 !important;
       margin: 0 !important;
@@ -741,6 +765,21 @@ export function generateStyles(options = {}) {
       color: var(--preview-h3, var(--preview-h3-default)) !important;
     }
 
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h4 {
+      font-size: 1em !important;
+      color: var(--preview-h4, var(--preview-h4-default)) !important;
+    }
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h5 {
+      font-size: 0.83em !important;
+      color: var(--preview-h5, var(--preview-h5-default)) !important;
+    }
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h6 {
+      font-size: 0.67em !important;
+      color: var(--preview-h6, var(--preview-h6-default)) !important;
+    }
+
     /* Lists - restore list styling in preview mode */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview ul {
       display: block !important;
diff --git a/src/themes.js b/src/themes.js
index 50d30b9..52207f1 100644
--- a/src/themes.js
+++ b/src/themes.js
@@ -17,6 +17,9 @@ export const solar = {
     h1: '#f95738',               // Tomato - h1 headers
     h2: '#ee964b',               // Sandy Brown - h2 headers
     h3: '#3d8a51',               // Forest green - h3 headers
+    h4: '#0d3b66',               // Yale Blue - h4 headers
+    h5: '#5a7a9b',               // Muted blue - h5 headers
+    h6: '#999999',               // Gray - h6 headers
     strong: '#ee964b',           // Sandy Brown - bold text
     em: '#f95738',               // Tomato - italic text
     del: '#ee964b',              // Sandy Brown - deleted text (same as strong)
@@ -46,6 +49,9 @@ export const solar = {
     h1: 'inherit',
     h2: 'inherit',
     h3: 'inherit',
+    h4: 'inherit',
+    h5: 'inherit',
+    h6: 'inherit',
     strong: 'inherit',
     em: 'inherit',
     link: '#0d3b66',
@@ -71,6 +77,9 @@ export const cave = {
     h1: '#d4a5ff',               // Rich lavender - h1 headers
     h2: '#f6ae2d',               // Hunyadi Yellow - h2 headers
     h3: '#9fcfec',               // Brighter blue - h3 headers
+    h4: '#c5dde8',               // Light blue-gray - h4 headers
+    h5: '#9fcfec',               // Brighter blue - h5 headers
+    h6: '#7a8c98',               // Muted gray-blue - h6 headers
     strong: '#f6ae2d',           // Hunyadi Yellow - bold text
     em: '#9fcfec',               // Brighter blue - italic text
     del: '#f6ae2d',              // Hunyadi Yellow - deleted text (same as strong)
@@ -100,6 +109,9 @@ export const cave = {
     h1: 'inherit',
     h2: 'inherit',
     h3: 'inherit',
+    h4: 'inherit',
+    h5: 'inherit',
+    h6: 'inherit',
     strong: 'inherit',
     em: 'inherit',
     link: '#9fcfec',
diff --git a/src/toolbar-buttons.js b/src/toolbar-buttons.js
index c3e8514..5bd372b 100644
--- a/src/toolbar-buttons.js
+++ b/src/toolbar-buttons.js
@@ -38,6 +38,18 @@ export const toolbarButtons = {
     }
   },
 
+  strikethrough: {
+    name: 'strikethrough',
+    actionId: 'toggleStrikethrough',
+    icon: icons.strikethroughIcon,
+    title: 'Strikethrough',
+    isActive: ({ activeFormats }) => activeFormats.includes('strikethrough'),
+    action: ({ editor }) => {
+      markdownActions.toggleStrikethrough(editor.textarea);
+      editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+  },
+
   code: {
     name: 'code',
     actionId: 'toggleCode',
@@ -102,6 +114,42 @@ export const toolbarButtons = {
     }
   },
 
+  h4: {
+    name: 'h4',
+    actionId: 'toggleH4',
+    icon: icons.h4Icon,
+    title: 'Heading 4',
+    isActive: ({ activeFormats }) => activeFormats.includes('header-4'),
+    action: ({ editor }) => {
+      markdownActions.toggleH4(editor.textarea);
+      editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+  },
+
+  h5: {
+    name: 'h5',
+    actionId: 'toggleH5',
+    icon: icons.h5Icon,
+    title: 'Heading 5',
+    isActive: ({ activeFormats }) => activeFormats.includes('header-5'),
+    action: ({ editor }) => {
+      markdownActions.toggleH5(editor.textarea);
+      editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+  },
+
+  h6: {
+    name: 'h6',
+    actionId: 'toggleH6',
+    icon: icons.h6Icon,
+    title: 'Heading 6',
+    isActive: ({ activeFormats }) => activeFormats.includes('header-6'),
+    action: ({ editor }) => {
+      markdownActions.toggleH6(editor.textarea);
+      editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+  },
+
   bulletList: {
     name: 'bulletList',
     actionId: 'toggleBulletList',
@@ -191,6 +239,7 @@ export const toolbarButtons = {
 export const defaultToolbarButtons = [
   toolbarButtons.bold,
   toolbarButtons.italic,
+  toolbarButtons.strikethrough,
   toolbarButtons.code,
   toolbarButtons.separator,
   toolbarButtons.link,
diff --git a/test/overtype.test.js b/test/overtype.test.js
index 1a5f87c..1580ab8 100644
--- a/test/overtype.test.js
+++ b/test/overtype.test.js
@@ -51,7 +51,10 @@ console.log('\n📝 Parser Tests\n');
     { input: '# Title', expected: '<div><h1><span class="syntax-marker"># </span>Title</h1></div>' },
     { input: '## Subtitle', expected: '<div><h2><span class="syntax-marker">## </span>Subtitle</h2></div>' },
     { input: '### Section', expected: '<div><h3><span class="syntax-marker">### </span>Section</h3></div>' },
-    { input: '#### Too Deep', expected: '<div>#### Too Deep</div>' }
+    { input: '#### Detail', expected: '<div><h4><span class="syntax-marker">#### </span>Detail</h4></div>' },
+    { input: '##### Fine Print', expected: '<div><h5><span class="syntax-marker">##### </span>Fine Print</h5></div>' },
+    { input: '###### Caption', expected: '<div><h6><span class="syntax-marker">###### </span>Caption</h6></div>' },
+    { input: '####### Too Deep', expected: '<div>####### Too Deep</div>' }
   ];
   
   tests.forEach(test => {
diff --git a/test/test-types.ts b/test/test-types.ts
index 91eaca3..de85383 100644
--- a/test/test-types.ts
+++ b/test/test-types.ts
@@ -1,6 +1,13 @@
 // Test file to verify TypeScript definitions work correctly
 // Run: npx tsc --noEmit test-types.ts
-import OverType, { Theme, Options, Stats, OverType as OverTypeInstance } from '../src/overtype';
+import OverType, {
+  Theme,
+  Options,
+  Stats,
+  OverType as OverTypeInstance,
+  markdownActions,
+  toolbarButtons
+} from '../src/overtype';
 
 // Test basic initialization - constructor returns array
 const editors1: OverTypeInstance[] = new OverType('#editor');
@@ -93,6 +100,9 @@ const customTheme: Theme = {
     h1: '#000000',
     h2: '#111111',
     h3: '#222222',
+    h4: '#333333',
+    h5: '#444444',
+    h6: '#555555',
     strong: '#444444',
     em: '#555555',
     link: '#0066cc',
@@ -114,6 +124,21 @@ const customTheme: Theme = {
 };
 OverType.setTheme(customTheme);
 
+// Test formatting additions exposed from markdown-actions and toolbar buttons
+const formattingTextarea = document.createElement('textarea');
+markdownActions.toggleStrikethrough(formattingTextarea);
+markdownActions.toggleH4(formattingTextarea);
+markdownActions.toggleH5(formattingTextarea);
+markdownActions.toggleH6(formattingTextarea);
+
+const formattingButtons = [
+  toolbarButtons.strikethrough,
+  toolbarButtons.h4,
+  toolbarButtons.h5,
+  toolbarButtons.h6
+];
+formattingButtons.forEach(button => console.log(button.name));
+
 // Test accessing built-in themes
 const solarTheme: Theme = OverType.themes.solar;
 const caveTheme: Theme = OverType.themes.cave;