Add level 4 and 5 headings

alineacms · Nov 30, 2023 · 491bd2e · 491bd2e
1 parent 613c97e
commit 491bd2e
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 4 deletions.
diff --git a/src/input/richtext/RichTextToolbar.tsx b/src/input/richtext/RichTextToolbar.tsx
@@ -32,7 +32,9 @@ enum Styles {
   paragraph = 'Normal text',
   h1 = 'Heading 1',
   h2 = 'Heading 2',
-  h3 = 'Heading 3'
+  h3 = 'Heading 3',
+  h4 = 'Heading 4',
+  h5 = 'Heading 5'
 }
 
 export type RichTextToolbarProps = {
@@ -54,6 +56,10 @@ export const RichTextToolbar = forwardRef(function RichTextToolbar(
     ? 'h2'
     : editor.isActive('heading', {level: 3})
     ? 'h3'
+    : editor.isActive('heading', {level: 4})
+    ? 'h4'
+    : editor.isActive('heading', {level: 5})
+    ? 'h5'
     : 'paragraph'
 
   function handleLink() {
@@ -94,8 +100,8 @@ export const RichTextToolbar = forwardRef(function RichTextToolbar(
             .insertContent({
               type: 'text',
               text:
-                picked.description ||
-                (link as UrlReference).description ||
+                picked.title ||
+                (link as UrlReference).title ||
                 (link as UrlReference).url ||
                 '',
               marks: [{type: 'link', attrs}]
@@ -144,6 +150,16 @@ export const RichTextToolbar = forwardRef(function RichTextToolbar(
               >
                 <Typo.H3 flat>Heading 3</Typo.H3>
               </DropdownMenu.Item>
+              <DropdownMenu.Item
+                onClick={() => exec().setHeading({level: 4}).run()}
+              >
+                <Typo.H4 flat>Heading 4</Typo.H4>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                onClick={() => exec().setHeading({level: 5}).run()}
+              >
+                <Typo.H5 flat>Heading 5</Typo.H5>
+              </DropdownMenu.Item>
             </DropdownMenu.Items>
           </DropdownMenu.Root>
           <div className={styles.root.separator()} />

diff --git a/src/ui/Typo.module.scss b/src/ui/Typo.module.scss
@@ -61,6 +61,19 @@
   }
 }
 
+.h5 {
+  min-width: 0;
+  font-size: 11.5px;
+  font-weight: bold;
+  margin-bottom: 3px;
+  white-space: pre-line;
+  text-rendering: optimizeLegibility;
+  @extend .hyphenate;
+  &.is-flat {
+    margin-bottom: 0;
+  }
+}
+
 .p {
   font-size: 14px;
   line-height: 1.6;

diff --git a/src/ui/util/CreateTypo.tsx b/src/ui/util/CreateTypo.tsx
@@ -13,12 +13,13 @@ import {GenericStyles, Styler} from './Styler.js'
 type TypoStyles =
   | {
       root: Styler
-      h1: Styler
       link: Styler
       small: Styler
+      h1: Styler
       h2: Styler
       h3: Styler
       h4: Styler
+      h5: Styler
       p: Styler
       hyphenate: Styler
       monospace: Styler
@@ -108,6 +109,21 @@ export function createTypo(
     )
   }
 
+  function H5Component(
+    props: PropsWithAs<TypoProps, 'h5'>,
+    ref: Ref<HTMLHeadingElement>
+  ) {
+    const {as: Type = 'h5', flat, light, ...rest} = props
+    return (
+      <Type
+        ref={ref}
+        id={idFor(rest.children)}
+        {...rest}
+        className={styles.h5.mergeProps(rest)({flat, light})}
+      />
+    )
+  }
+
   function PComponent(
     props: PropsWithAs<TypoProps, 'p'>,
     ref: Ref<HTMLHeadingElement>
@@ -169,6 +185,7 @@ export function createTypo(
     H2: forwardRefWithAs<TypoProps, 'h2'>(H2Component),
     H3: forwardRefWithAs<TypoProps, 'h3'>(H3Component),
     H4: forwardRefWithAs<TypoProps, 'h4'>(H4Component),
+    H5: forwardRefWithAs<TypoProps, 'h5'>(H5Component),
     P: forwardRefWithAs<TypoProps, 'p'>(PComponent),
     Link: LinkComponent,
     link: styles.link,