Refactor list, fix display of heading list item

GitbookIO · Oct 31, 2024 · 30752f2 · 30752f2
1 parent 16a6b71
commit 30752f2
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 95 deletions.
diff --git a/packages/gitbook/src/components/DocumentView/Block.tsx b/packages/gitbook/src/components/DocumentView/Block.tsx
@@ -22,10 +22,8 @@ import { Heading } from './Heading';
 import { Hint } from './Hint';
 import { Images } from './Images';
 import { IntegrationBlock } from './Integration';
+import { List } from './List';
 import { ListItem } from './ListItem';
-import { ListOrdered } from './ListOrdered';
-import { ListTasks } from './ListTasks';
-import { ListUnordered } from './ListUnordered';
 import { BlockMath } from './Math';
 import { OpenAPI } from './OpenAPI';
 import { Paragraph } from './Paragraph';
@@ -65,11 +63,9 @@ export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
             case 'heading-3':
                 return <Heading {...props} block={block} />;
             case 'list-ordered':
-                return <ListOrdered {...props} block={block} />;
             case 'list-unordered':
-                return <ListUnordered {...props} block={block} />;
             case 'list-tasks':
-                return <ListTasks {...props} block={block} />;
+                return <List {...props} block={block} />;
             case 'list-item':
                 return <ListItem {...props} block={block} />;
             case 'code':

diff --git a/packages/gitbook/src/components/DocumentView/List.tsx b/packages/gitbook/src/components/DocumentView/List.tsx
@@ -0,0 +1,44 @@
+import {
+    DocumentBlockListOrdered,
+    DocumentBlockListTasks,
+    DocumentBlockListUnordered,
+} from '@gitbook/api';
+import assertNever from 'assert-never';
+
+import { BlockProps } from './Block';
+import { Blocks } from './Blocks';
+
+export function List(
+    props: BlockProps<
+        DocumentBlockListUnordered | DocumentBlockListOrdered | DocumentBlockListTasks
+    >,
+) {
+    const { block, style, ancestorBlocks, ...contextProps } = props;
+
+    return (
+        <Blocks
+            {...contextProps}
+            tag={getListTag(block.type)}
+            nodes={block.nodes}
+            ancestorBlocks={[...ancestorBlocks, block]}
+            style={['space-y-2', style]}
+        />
+    );
+}
+
+function getListTag(
+    type:
+        | DocumentBlockListUnordered['type']
+        | DocumentBlockListOrdered['type']
+        | DocumentBlockListTasks['type'],
+) {
+    switch (type) {
+        case 'list-ordered':
+            return 'ol';
+        case 'list-unordered':
+        case 'list-tasks':
+            return 'ul';
+        default:
+            assertNever(type);
+    }
+}
diff --git a/packages/gitbook/src/components/DocumentView/ListItem.tsx b/packages/gitbook/src/components/DocumentView/ListItem.tsx
@@ -34,8 +34,12 @@ export function ListItem(props: BlockProps<DocumentBlockListItem>) {
                 'min-h-[1lh]',
                 // flip heading hash icon if list item is a heading
                 'flip-heading-hash',
+                // remove margin-top for the first heading in a list
+                '[&:is(h2)>div]:mt-0',
+                '[&:is(h3)>div]:mt-0',
+                '[&:is(h4)>div]:mt-0',
             )}
-            style="space-y-2 flex flex-col"
+            style="space-y-2 flex flex-col flex-1"
         />
     );
 

diff --git a/packages/gitbook/src/components/DocumentView/ListOrdered.tsx b/packages/gitbook/src/components/DocumentView/ListOrdered.tsx
diff --git a/packages/gitbook/src/components/DocumentView/ListTasks.tsx b/packages/gitbook/src/components/DocumentView/ListTasks.tsx
diff --git a/packages/gitbook/src/components/DocumentView/ListUnordered.tsx b/packages/gitbook/src/components/DocumentView/ListUnordered.tsx
diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css
@@ -126,23 +126,6 @@
         @apply [&:is(h1,h2,h3,h4)>div:first-child]:[grid-area:1/2];
         @apply [&:is(h1,h2,h3,h4)>div:first-child]:ml-1;
     }
-
-    /*  bullet icons */
-    .bullet-dash {
-        @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjEiIHk9IjIuNSIgd2lkdGg9IjgiIGhlaWdodD0iMS41IiByeD0iMC42NiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==")];
-    }
-    .bullet-circleFilled {
-        @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjIiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIHJ4PSIzIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K")];
-    }
-    .bullet-circle {
-        @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjIuNzUiIHk9IjAuNzUiIHdpZHRoPSI1LjUiIGhlaWdodD0iNS41IiByeD0iMi43NSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPC9zdmc+Cg==")];
-    }
-    .bullet-squareFilled {
-        @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjIiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIHJ4PSIxIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K")];
-    }
-    .bullet-square {
-        @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxtYXNrIGlkPSJwYXRoLTEtaW5zaWRlLTFfOV80OCIgZmlsbD0id2hpdGUiPgo8cmVjdCB4PSIyIiB3aWR0aD0iNyIgaGVpZ2h0PSI3IiByeD0iMSIvPgo8L21hc2s+CjxyZWN0IHg9IjIiIHdpZHRoPSI3IiBoZWlnaHQ9IjciIHJ4PSIxIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMiIG1hc2s9InVybCgjcGF0aC0xLWluc2lkZS0xXzlfNDgpIi8+Cjwvc3ZnPgo=")];
-    }
 }
 
 @layer utilities {