From f9e34e910126be4f22b5b6a98cfbdada9d4518bd Mon Sep 17 00:00:00 2001
From: Alexander Onnikov <Alexander.Onnikov@gmail.com>
Date: Wed, 11 Oct 2023 18:53:43 +0700
Subject: [PATCH] UBER-1020 Add H3 heading for editors (#3825)

Signed-off-by: Alexander Onnikov <alexander.onnikov@xored.com>
---
 .../src/components/TextEditorStyleToolbar.svelte    |  8 ++++++++
 packages/text-editor/src/components/extensions.ts   |  2 +-
 .../text-editor/src/components/icons/Header3.svelte | 13 +++++++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 packages/text-editor/src/components/icons/Header3.svelte

diff --git a/packages/text-editor/src/components/TextEditorStyleToolbar.svelte b/packages/text-editor/src/components/TextEditorStyleToolbar.svelte
index 4c2ecb0926..db70460751 100644
--- a/packages/text-editor/src/components/TextEditorStyleToolbar.svelte
+++ b/packages/text-editor/src/components/TextEditorStyleToolbar.svelte
@@ -27,6 +27,7 @@
   import CodeBlock from './icons/CodeBlock.svelte'
   import Header1 from './icons/Header1.svelte'
   import Header2 from './icons/Header2.svelte'
+  import Header3 from './icons/Header3.svelte'
   import IconTable from './icons/IconTable.svelte'
   import Italic from './icons/Italic.svelte'
   import Link from './icons/Link.svelte'
@@ -214,6 +215,13 @@
         showTooltip={{ label: getEmbeddedLabel('H2') }}
         on:click={getHeaderToggler(2)}
       />
+      <StyleButton
+        icon={Header3}
+        size={formatButtonSize}
+        selected={textEditor.isActive('heading', { level: 3 })}
+        showTooltip={{ label: getEmbeddedLabel('H3') }}
+        on:click={getHeaderToggler(3)}
+      />
     {/if}
     {#if category === TextFormatCategory.TextDecoration}
       <StyleButton
diff --git a/packages/text-editor/src/components/extensions.ts b/packages/text-editor/src/components/extensions.ts
index 716ff1945f..18baf4f2b2 100644
--- a/packages/text-editor/src/components/extensions.ts
+++ b/packages/text-editor/src/components/extensions.ts
@@ -43,7 +43,7 @@ export const taskListExtensions = [
   })
 ]
 
-export const supportedHeadingLevels: Level[] = [1, 2]
+export const supportedHeadingLevels: Level[] = [1, 2, 3]
 
 export const defaultExtensions: AnyExtension[] = [
   StarterKit.configure({
diff --git a/packages/text-editor/src/components/icons/Header3.svelte b/packages/text-editor/src/components/icons/Header3.svelte
new file mode 100644
index 0000000000..16e321e914
--- /dev/null
+++ b/packages/text-editor/src/components/icons/Header3.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8 8C8 7.44772 7.55228 7 7 7C6.44772 7 6 7.44772 6 8V24C6 24.5523 6.44772 25 7 25C7.55228 25 8 24.5523 8 24V17H17V24C17 24.5523 17.4477 25 18 25C18.5523 25 19 24.5523 19 24V8C19 7.44772 18.5523 7 18 7C17.4477 7 17 7.44772 17 8V15H8V8Z"
+  />
+  <path
+    d="M24.5983 16.8163C24.7929 16.7503 25.0009 16.7332 25.2037 16.7667C25.4065 16.8002 25.5979 16.8832 25.761 17.0083C25.9241 17.1334 26.0538 17.2969 26.1387 17.4841C26.2235 17.6714 26.2608 17.8766 26.2474 18.0818C26.234 18.2869 26.1701 18.4855 26.0616 18.6601C25.953 18.8347 25.8031 18.9798 25.6251 19.0825C25.6021 19.0958 25.5799 19.11 25.5585 19.125H25.0001C24.5168 19.125 24.1251 19.5168 24.1251 20C24.1251 20.4832 24.5168 20.875 25.0001 20.875H25.5586C25.5799 20.89 25.6021 20.9042 25.6252 20.9175C25.8032 21.0202 25.9531 21.1653 26.0617 21.3399C26.1702 21.5145 26.234 21.7131 26.2475 21.9182C26.2609 22.1234 26.2236 22.3286 26.1387 22.5159C26.0539 22.7031 25.9242 22.8665 25.7611 22.9917C25.598 23.1168 25.4066 23.1998 25.2038 23.2333C25.001 23.2668 24.793 23.2497 24.5984 23.1837C24.4037 23.1176 24.2283 23.0045 24.0878 22.8545C23.9473 22.7045 23.8459 22.5221 23.7927 22.3235C23.6677 21.8567 23.1879 21.5797 22.7211 21.7048C22.2543 21.8299 21.9773 22.3097 22.1024 22.7765C22.2301 23.253 22.4733 23.6907 22.8106 24.0508C23.1478 24.4109 23.5687 24.6822 24.0358 24.8408C24.503 24.9994 25.0021 25.0403 25.4888 24.9599C25.9756 24.8796 26.435 24.6804 26.8264 24.3801C27.2178 24.0797 27.5291 23.6875 27.7327 23.2381C27.9364 22.7887 28.026 22.2961 27.9937 21.8038C27.9615 21.3115 27.8083 20.8347 27.5478 20.4158C27.4558 20.2679 27.3515 20.1289 27.2362 20C27.3514 19.8711 27.4557 19.732 27.5477 19.5842C27.8082 19.1652 27.9614 18.6885 27.9937 18.1962C28.0259 17.7039 27.9363 17.2113 27.7327 16.7619C27.5291 16.3125 27.2178 15.9203 26.8264 15.6199C26.435 15.3196 25.9755 15.1204 25.4888 15.0401C25.002 14.9597 24.5029 15.0006 24.0358 15.1592C23.5686 15.3178 23.1477 15.5891 22.8105 15.9492C22.4732 16.3093 22.23 16.747 22.1023 17.2235C21.9772 17.6903 22.2542 18.1701 22.721 18.2952C23.1878 18.4203 23.6676 18.1433 23.7927 17.6765C23.8459 17.4779 23.9472 17.2955 24.0877 17.1455C24.2283 16.9955 24.4036 16.8824 24.5983 16.8163Z"
+  />
+</svg>