From 30752f2d606bb05056fb2d70c5ef72c965759382 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Wed, 30 Oct 2024 16:49:46 +0100 Subject: [PATCH] Refactor list, fix display of heading list item --- .../src/components/DocumentView/Block.tsx | 8 +--- .../src/components/DocumentView/List.tsx | 44 +++++++++++++++++++ .../src/components/DocumentView/ListItem.tsx | 6 ++- .../components/DocumentView/ListOrdered.tsx | 23 ---------- .../src/components/DocumentView/ListTasks.tsx | 25 ----------- .../components/DocumentView/ListUnordered.tsx | 23 ---------- .../src/components/RootLayout/globals.css | 17 ------- 7 files changed, 51 insertions(+), 95 deletions(-) create mode 100644 packages/gitbook/src/components/DocumentView/List.tsx delete mode 100644 packages/gitbook/src/components/DocumentView/ListOrdered.tsx delete mode 100644 packages/gitbook/src/components/DocumentView/ListTasks.tsx delete mode 100644 packages/gitbook/src/components/DocumentView/ListUnordered.tsx diff --git a/packages/gitbook/src/components/DocumentView/Block.tsx b/packages/gitbook/src/components/DocumentView/Block.tsx index 87ec13f51..d38553bf3 100644 --- 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(props: BlockProps) { case 'heading-3': return ; case 'list-ordered': - return ; case 'list-unordered': - return ; case 'list-tasks': - return ; + return ; case 'list-item': return ; case 'code': diff --git a/packages/gitbook/src/components/DocumentView/List.tsx b/packages/gitbook/src/components/DocumentView/List.tsx new file mode 100644 index 000000000..00f5da1f5 --- /dev/null +++ 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 ( + + ); +} + +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 index 3eb0f022f..8274d4117 100644 --- 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) { '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 deleted file mode 100644 index ad4ef0a3b..000000000 --- a/packages/gitbook/src/components/DocumentView/ListOrdered.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { DocumentBlockListOrdered } from '@gitbook/api'; - -import { BlockProps } from './Block'; -import { Blocks } from './Blocks'; - -export function ListOrdered(props: BlockProps) { - const { block, style, ancestorBlocks, ...contextProps } = props; - - return ( - li>div_div]:mt-0', - style, - ]} - /> - ); -} diff --git a/packages/gitbook/src/components/DocumentView/ListTasks.tsx b/packages/gitbook/src/components/DocumentView/ListTasks.tsx deleted file mode 100644 index 3db02eab0..000000000 --- a/packages/gitbook/src/components/DocumentView/ListTasks.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { DocumentBlockListTasks, DocumentBlockListUnordered } from '@gitbook/api'; - -import { BlockProps } from './Block'; -import { Blocks } from './Blocks'; - -export function ListTasks(props: BlockProps) { - const { block, style, ancestorBlocks, ...contextProps } = props; - - return ( - li]:pl-[.25ch]', - //remove any spacing when using heading as list item - '[&>li>div_div]:mt-0', - 'space-y-2', - style, - ]} - /> - ); -} diff --git a/packages/gitbook/src/components/DocumentView/ListUnordered.tsx b/packages/gitbook/src/components/DocumentView/ListUnordered.tsx deleted file mode 100644 index 8c68a0f5a..000000000 --- a/packages/gitbook/src/components/DocumentView/ListUnordered.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { DocumentBlockListUnordered } from '@gitbook/api'; - -import { BlockProps } from './Block'; -import { Blocks } from './Blocks'; - -export function ListUnordered(props: BlockProps) { - const { block, style, ancestorBlocks, ...contextProps } = props; - - return ( - li>div_div]:mt-0', - style, - ]} - /> - ); -} diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css index d64820543..4b5f7b3df 100644 --- 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 {