Add button for headings

src/components/DocumentView/Block.tsx

@@ -45,7 +45,7 @@ export function Block<T>(props: BlockProps<T>) {
         case 'expandable':
             return <Expandable {...props} {...contextProps} />;
         case 'table':
-            return <Table {...props} {...contextProps} />
+            return <Table {...props} {...contextProps} />;
         default:
             return <div className={tcls(style)}>Unsupported block {block.type}</div>;
     }

src/components/DocumentView/Heading.tsx

@@ -1,4 +1,5 @@
 import { tcls } from '@/lib/tailwind';
+import IconHash from '@geist-ui/icons/hash';
 import { BlockProps } from './Block';
 import { Inlines } from './Inlines';
 
@@ -7,8 +8,54 @@ export function Heading(props: BlockProps<any>) {
 
     const headingStyle = STYLES[block.type];
 
+    const id = block.meta?.id ?? '';
+
     return (
-        <headingStyle.tag className={tcls(headingStyle.className, style)}>
+        <headingStyle.tag
+            id={id}
+            className={tcls(headingStyle.className, 'group', 'relative', style)}
+        >
+            <div
+                className={tcls(
+                    'absolute',
+                    ' -ml-8',
+                    'hidden',
+                    'items-center',
+                    'border-0',
+                    'opacity-0',
+                    'group-hover:opacity-100',
+                    'group-focus:opacity-100',
+                    'lg:flex',
+                    headingStyle.lineHeight,
+                )}
+            >
+                <a
+                    href={`#${id}`}
+                    aria-label="Direct link to heading"
+                    className={tcls(
+                        'flex',
+                        'h-6',
+                        'w-6',
+                        'items-center',
+                        'justify-center',
+                        'rounded-md',
+                        'text-slate-400',
+                        'shadow-sm',
+                        'ring-1',
+                        'ring-slate-900/5',
+                        'hover:text-slate-700',
+                        'hover:shadow',
+                        'hover:ring-slate-900/10',
+                        'dark:bg-slate-700',
+                        'dark:text-slate-300',
+                        'dark:shadow-none',
+                        'dark:ring-0',
+                    )}
+                >
+                    <IconHash className={tcls('w-4', 'h-4')} />
+                </a>
+            </div>
+
             <Inlines {...contextProps} nodes={block.nodes} />
         </headingStyle.tag>
     );
@@ -17,14 +64,17 @@ export function Heading(props: BlockProps<any>) {
 const STYLES = {
     'heading-1': {
         tag: 'h2',
+        lineHeight: 'h-9',
         className: ['text-3xl', 'font-semibold'],
     },
     'heading-2': {
         tag: 'h3',
+        lineHeight: 'h-8',
         className: ['text-2xl', 'font-semibold'],
     },
     'heading-3': {
         tag: 'h4',
+        lineHeight: 'h-6',
         className: ['text-base', 'font-semibold'],
     },
 };

src/components/DocumentView/Table/Table.tsx

@@ -1,5 +1,5 @@
-import { BlockProps } from "../Block";
-import { ViewCards } from "./ViewCards";
+import { BlockProps } from '../Block';
+import { ViewCards } from './ViewCards';
 
 export interface TableViewProps<View> extends BlockProps<any> {
     view: View;
@@ -13,7 +13,6 @@ export function Table(props: BlockProps<any>) {
         case 'cards':
             return <ViewCards view={block.data.view} {...props} />;
         default:
-            return <div>Unsupported view {block.data.view.type}</div>
+            return <div>Unsupported view {block.data.view.type}</div>;
     }
 }
-

src/components/DocumentView/Table/ViewCards.tsx

@@ -1,12 +1,9 @@
-import { TableViewProps } from "./Table";
-
+import { TableViewProps } from './Table';
 
 export function ViewCards(props: TableViewProps<any>) {
-
     return (
         <div>
             <div>Cards!</div>
         </div>
-    )
+    );
 }
-

src/lib/document.ts

@@ -29,11 +29,11 @@ export function getDocumentSections(document: any): DocumentSection[] {
             if (block.type === 'heading-1') {
                 depth = 1;
             }
-
             const title = getNodeText(block);
+            const id = block.meta?.id ?? title;
 
             sections.push({
-                id: block.data.id ?? title, // TODO: use slugify
+                id,
                 title,
                 depth: block.type === 'heading-1' ? 1 : depth > 0 ? 2 : 1,
             });