From 56c1a8123f165ade26ee4a0b3d2b491f7b3cc32c Mon Sep 17 00:00:00 2001
From: seaerchin <jiachin@open.gov.sg>
Date: Thu, 25 Jul 2024 16:10:24 +0800
Subject: [PATCH] fix: heading extension

override input rules so we map # -> h<n# +1>
---
 .../form-builder/renderers/TipTapEditor.tsx   | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/TipTapEditor.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/TipTapEditor.tsx
index be66cd5363..45715bb0b2 100644
--- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/TipTapEditor.tsx
+++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/TipTapEditor.tsx
@@ -1,5 +1,6 @@
 import type { BoxProps } from "@chakra-ui/react"
 import type { ControlProps } from "@jsonforms/core"
+import type { Level } from "@tiptap/extension-heading"
 import type { JSONContent } from "@tiptap/react"
 import { Box, VStack } from "@chakra-ui/react"
 import { Blockquote } from "@tiptap/extension-blockquote"
@@ -21,7 +22,7 @@ import { Subscript } from "@tiptap/extension-subscript"
 import { Superscript } from "@tiptap/extension-superscript"
 import { Text } from "@tiptap/extension-text"
 import Underline from "@tiptap/extension-underline"
-import { EditorContent, useEditor } from "@tiptap/react"
+import { EditorContent, textblockTypeInputRule, useEditor } from "@tiptap/react"
 
 import { MenuBar } from "~/components/PageEditor/MenuBar"
 
@@ -30,6 +31,8 @@ interface TiptapEditorProps extends BoxProps {
   handleChange: (content: JSONContent) => void
 }
 
+const HEADING_LEVELS: Level[] = [2, 3, 4, 5, 6] as const
+
 export function TiptapEditor({ data, handleChange }: TiptapEditorProps) {
   const editor = useEditor({
     extensions: [
@@ -48,8 +51,25 @@ export function TiptapEditor({ data, handleChange }: TiptapEditorProps) {
       Dropcursor,
       Gapcursor,
       HardBreak,
-      Heading.configure({
-        levels: [2, 3, 4, 6],
+      Heading.extend({
+        // NOTE: Have to override the default input rules
+        // because we should map the number of `#` into
+        // a h<num # + 1>.
+        // eg: # -> h2
+        //     ## -> h3
+        addInputRules() {
+          return HEADING_LEVELS.map((level) => {
+            return textblockTypeInputRule({
+              find: new RegExp(`^(#{1,${level - 1}})\\s$`),
+              type: this.type,
+              getAttributes: {
+                level,
+              },
+            })
+          })
+        },
+      }).configure({
+        levels: HEADING_LEVELS,
       }),
       History,
       HorizontalRule.extend({