From af09b108d18290764403f08bc024ea88295aee65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samy=20Pess=C3=A9?= <samypesse@gmail.com>
Date: Sun, 29 Oct 2023 15:16:35 -0400
Subject: [PATCH] Add button for headings

---
 bun.lockb                                     | Bin 169967 -> 169967 bytes
 src/components/DocumentView/Block.tsx         |   2 +-
 src/components/DocumentView/Heading.tsx       |  52 +++++++++++++++++-
 src/components/DocumentView/Table/Table.tsx   |   7 +--
 .../DocumentView/Table/ViewCards.tsx          |   7 +--
 src/lib/document.ts                           |   4 +-
 6 files changed, 59 insertions(+), 13 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index 4a850f42ab72e6a54c4142821fa01d925dd4a164..65200496452f590dbd5c6e33eed9f0d55d91e26f 100755
GIT binary patch
delta 36
ucmV+<0NelXuL|$43b2)<0{|dQgP5bYn4<w5A_oCpF)lDJGPk_N0W;DYc@8T8

delta 36
pcmaFAp6mU3t_@QcGdEQ2X`Zoo`;5hmvP$es3}CQ*&rwF>O8_qe4k-Wt

diff --git a/src/components/DocumentView/Block.tsx b/src/components/DocumentView/Block.tsx
index 01456640f..f4f694277 100644
--- a/src/components/DocumentView/Block.tsx
+++ b/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>;
     }
diff --git a/src/components/DocumentView/Heading.tsx b/src/components/DocumentView/Heading.tsx
index 5911ba300..eed1a21e1 100644
--- a/src/components/DocumentView/Heading.tsx
+++ b/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'],
     },
 };
diff --git a/src/components/DocumentView/Table/Table.tsx b/src/components/DocumentView/Table/Table.tsx
index deaa32921..a50ffaa6a 100644
--- a/src/components/DocumentView/Table/Table.tsx
+++ b/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>;
     }
 }
-
diff --git a/src/components/DocumentView/Table/ViewCards.tsx b/src/components/DocumentView/Table/ViewCards.tsx
index e0f54121d..b3c5aaa5d 100644
--- a/src/components/DocumentView/Table/ViewCards.tsx
+++ b/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>
-    )
+    );
 }
-
diff --git a/src/lib/document.ts b/src/lib/document.ts
index 29028e56d..bbf9402f2 100644
--- a/src/lib/document.ts
+++ b/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,
             });