feat: add databases behind feature flag (#12323)

Author: Dschoordsch

package.json

@@ -165,12 +165,14 @@
     "@tiptap/extension-details": "3.9.1",
     "@tiptap/extension-document": "3.9.1",
     "@tiptap/extension-drag-handle": "3.9.1",
+    "@tiptap/extension-heading": "^3.9.0",
     "@tiptap/extension-image": "3.9.1",
     "@tiptap/extension-link": "3.9.1",
     "@tiptap/extension-list": "3.9.1",
     "@tiptap/extension-mention": "3.9.1",
     "@tiptap/extension-node-range": "3.9.1",
     "@tiptap/extension-table": "3.9.1",
+    "@tiptap/extension-text": "^3.9.0",
     "@tiptap/extensions": "3.9.1",
     "@tiptap/html": "3.9.1",
     "@tiptap/pm": "3.9.1",

packages/client/components/DashNavList/LeftNavPageLink.tsx

@@ -1,3 +1,4 @@
+import StorageIcon from '@mui/icons-material/Storage'
 import graphql from 'babel-plugin-relay/macro'
 import {useState} from 'react'
 import {useFragment} from 'react-relay'
@@ -61,6 +62,7 @@ export const LeftNavPageLink = (props: Props) => {
         currentPageAncestorDepth
         userSortOrder
         sortOrder # used implicityly in store traversal by useDraggingPage
+        isDatabase
       }
     `,
     pageRef
@@ -74,7 +76,8 @@ export const LeftNavPageLink = (props: Props) => {
     isDraggingLastChild,
     teamId,
     isPrivate,
-    currentPageAncestorDepth
+    currentPageAncestorDepth,
+    isDatabase
   } = page
   const {viewer: viewerAccess} = access
 
@@ -165,11 +168,17 @@ export const LeftNavPageLink = (props: Props) => {
             }
           }}
         >
-          <ExpandPageChildrenButton
-            showChildren={showChildren}
-            expandChildPages={expandChildPages}
-            draggingPageId={isSelf ? null : draggingPageId}
-          />
+          {isDatabase ? (
+            <div className='flex size-6 shrink-0 items-center justify-center rounded-sm bg-slate-200 text-slate-600 group-data-highlighted:bg-slate-300'>
+              <StorageIcon className='size-5' />
+            </div>
+          ) : (
+            <ExpandPageChildrenButton
+              showChildren={showChildren}
+              expandChildPages={expandChildPages}
+              draggingPageId={isSelf ? null : draggingPageId}
+            />
+          )}
           <LeftNavItem>
             <span className='pl-1'>{title || '<Untitled>'}</span>
           </LeftNavItem>

packages/client/components/DashNavList/PageActions.tsx

@@ -32,11 +32,12 @@ export const PageActions = (props: Props) => {
         access {
           viewer
         }
+        isDatabase
       }
     `,
     pageRef
   )
-  const {id: pageId, access} = page
+  const {id: pageId, access, isDatabase} = page
   const {viewer: viewerAccess} = access
   const history = useHistory()
   const [executeArchive] = useArchivePageMutation()
@@ -122,7 +123,9 @@ export const PageActions = (props: Props) => {
           </Menu>
         </div>
       )}
-      <LeftNavItemButton Icon={AddIcon} onClick={addChildPage} tooltip='Add a page inside' />
+      {!isDatabase && (
+        <LeftNavItemButton Icon={AddIcon} onClick={addChildPage} tooltip='Add a page inside' />
+      )}
     </LeftNavItemButtons>
   )
 }

packages/client/hooks/useTipTapDatabaseEditor.ts

@@ -0,0 +1,41 @@
+import type {HocuspocusProvider} from '@hocuspocus/provider'
+import Collaboration from '@tiptap/extension-collaboration'
+import {Document} from '@tiptap/extension-document'
+import Heading from '@tiptap/extension-heading'
+import Text from '@tiptap/extension-text'
+import {useEditor} from '@tiptap/react'
+import {useRef} from 'react'
+import {Database} from '../tiptap/extensions/database/Database'
+import {usePageLinkPlaceholder} from './usePageLinkPlaceholder'
+
+export const useTipTapDatabaseEditor = (provider: HocuspocusProvider) => {
+  const placeholderRef = useRef<string | undefined>(undefined)
+
+  const editor = useEditor(
+    {
+      content: '',
+      extensions: [
+        Document.extend({
+          content: 'heading database'
+        }),
+        Collaboration.configure({
+          document: provider?.document
+        }),
+        Text,
+        Heading.configure({
+          levels: [1]
+        }),
+        Database.configure({
+          document: provider?.document
+        })
+      ],
+      autofocus: true,
+      editable: true
+    },
+    [provider]
+  )
+
+  usePageLinkPlaceholder(editor!, placeholderRef)
+
+  return {editor}
+}

packages/client/hooks/useTipTapPageEditor.ts

@@ -58,11 +58,15 @@ export const useTipTapPageEditor = (
     graphql`
       fragment useTipTapPageEditor_viewer on User @inline {
         preferredName
+        organizations {
+          hasDatabases: featureFlag(featureName: "Databases")
+        }
       }
     `,
     viewerRef
   )
   const preferredName = user?.preferredName
+  const hasDatabases = !!user?.organizations?.find((org) => org?.hasDatabases)
   const atmosphere = useAtmosphere()
   const placeholderRef = useRef<string | undefined>(undefined)
   const editor = useEditor(
@@ -95,7 +99,9 @@ export const useTipTapPageEditor = (
         TaskItem.configure({
           nested: true
         }),
-        SlashCommand.configure({}),
+        SlashCommand.configure({
+          Database: hasDatabases
+        }),
         Focus,
         ImageUpload.configure({
           editorWidth: ElementWidth.REFLECTION_CARD - 16 * 2,

packages/client/hooks/useTipTapReflectionEditor.ts

@@ -52,7 +52,8 @@ export const useTipTapReflectionEditor = (
           Insights: false,
           Table: false,
           Details: false,
-          'Create page': false
+          'Create page': false,
+          Database: false
         }),
         ClearOnSubmit,
         Focus,

packages/client/modules/pages/DatabaseEditor.tsx

@@ -0,0 +1,26 @@
+import type {HocuspocusProvider} from '@hocuspocus/provider'
+import {useEffect} from 'react'
+import type {useTipTapPageEditor_viewer$key} from '../../__generated__/useTipTapPageEditor_viewer.graphql'
+import {TipTapEditor} from '../../components/promptResponse/TipTapEditor'
+import {useTipTapDatabaseEditor} from '../../hooks/useTipTapDatabaseEditor'
+import {cn} from '../../ui/cn'
+
+interface Props {
+  provider: HocuspocusProvider
+  isEditable: boolean
+  viewerRef: useTipTapPageEditor_viewer$key | null
+}
+
+export const DatabaseEditor = (props: Props) => {
+  const {provider, isEditable} = props
+  const {editor} = useTipTapDatabaseEditor(provider)
+  useEffect(() => {
+    editor?.setEditable(isEditable)
+  }, [editor, isEditable])
+  if (!editor) return <div>No editor</div>
+  return (
+    <>
+      <TipTapEditor editor={editor} className={cn('page-editor flex w-full px-6 delay-300')} />
+    </>
+  )
+}

packages/client/modules/pages/Page.tsx

@@ -4,6 +4,7 @@ import type {Page_page$key} from '../../__generated__/Page_page.graphql'
 import type {useTipTapPageEditor_viewer$key} from '../../__generated__/useTipTapPageEditor_viewer.graphql'
 import useAtmosphere from '../../hooks/useAtmosphere'
 import {usePageProvider} from '../../hooks/usePageProvider'
+import {DatabaseEditor} from './DatabaseEditor'
 import {PageEditor} from './PageEditor'
 import {PageHeader} from './PageHeader'
 import {PageHeaderPublic} from './PageHeaderPublic'
@@ -26,12 +27,13 @@ export const Page = (props: Props) => {
           viewer
           public
         }
+        isDatabase
       }
     `,
     pageRef
   )
 
-  const {id: pageId, access} = page
+  const {id: pageId, access, isDatabase} = page
   const {viewer: viewerAccess, public: publicAccess} = access
   const {provider, synced} = usePageProvider(pageId)
   const atmosphere = useAtmosphere()
@@ -44,7 +46,12 @@ export const Page = (props: Props) => {
     <div className='relative flex w-full flex-col items-center bg-white'>
       {isPublic ? <PageHeaderPublic /> : <PageHeader pageRef={page} />}
       <div className='relative flex min-h-screen w-full max-w-[960px] justify-center bg-white pt-28 pb-10'>
-        {synced && <PageEditor viewerRef={viewerRef} isEditable={isEditable} provider={provider} />}
+        {synced &&
+          (isDatabase ? (
+            <DatabaseEditor viewerRef={viewerRef} isEditable={isEditable} provider={provider} />
+          ) : (
+            <PageEditor viewerRef={viewerRef} isEditable={isEditable} provider={provider} />
+          ))}
       </div>
     </div>
   )

packages/client/package.json

@@ -71,6 +71,7 @@
     "@sereneinserenade/tiptap-search-and-replace": "^0.1.1",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^4.0.0",
+    "@tanstack/react-table": "^8.21.3",
     "@types/history": "^4.7.0",
     "cleave.js": "^1.6.0",
     "clsx": "^1.2.1",

packages/client/shared/tiptap/extensions/PageLinkBlockBase.ts

@@ -5,6 +5,7 @@ export type PageLinkBlockAttributes = {
   title: string
   canonical?: boolean
   isMoving?: boolean
+  database?: boolean
 }
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -49,6 +50,16 @@ export const PageLinkBlockBase = Node.create({
             'data-canonical': attributes.canonical ? '' : undefined
           }
         }
+      },
+      database: {
+        parseHTML: (element) => {
+          return element.getAttribute('data-database') === '' ? true : false
+        },
+        renderHTML: (attributes) => {
+          return {
+            'data-database': attributes.database ? '' : undefined
+          }
+        }
       }
     }
   },