Integrate grist databases into docs (Panographix - HackDays 2025)

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to
 - ✨(frontend) add customization for translations #857
 - 📝(project) add troubleshoot doc #1066
 - 📝(project) add system-requirement doc #1066
+- ✨(frontend) Add a custom database block to the editor #1053
 
 ### Changed
 
@@ -28,7 +29,6 @@ and this project adheres to
 -🐛(frontend) fix meta title #1017
 -🔧(git) set LF line endings for all text files #1032
 
-
 ## [3.3.0] - 2025-05-06
 
 ### Added
@@ -54,21 +54,20 @@ and this project adheres to
 - ⬆️(docker) upgrade node images to alpine 3.21 #973
 
 ### Fixed
+
 - 🐛(y-provider) increase JSON size limits for transcription conversion #989
 
 ### Removed
 
 - 🔥(back) remove footer endpoint #948
 
-
 ## [3.2.1] - 2025-05-06
 
 ## Fixed
 
 - 🐛(frontend) fix list copy paste #943
 - 📝(doc) update contributing policy (commit signatures are now mandatory) #895
 
-
 ## [3.2.0] - 2025-05-05
 
 ## Added
@@ -79,7 +78,7 @@ and this project adheres to
 - ✨(settings) Allow configuring PKCE for the SSO #886
 - 🌐(i18n) activate chinese and spanish languages #884
 - 🔧(backend) allow overwriting the data directory #893
-- ➕(backend) add  `django-lasuite` dependency #839
+- ➕(backend) add `django-lasuite` dependency #839
 - ✨(frontend) advanced table features #908
 
 ## Changed
@@ -130,7 +129,6 @@ and this project adheres to
 - 🐛(backend) compute ancestor_links in get_abilities if needed #725
 - 🔒️(back) restrict access to document accesses #801
 
-
 ## [2.6.0] - 2025-03-21
 
 ## Added
@@ -149,7 +147,6 @@ and this project adheres to
 - 🔒️(back) throttle user list endpoint #636
 - 🔒️(back) remove pagination and limit to 5 for user list endpoint #636
 
-
 ## [2.5.0] - 2025-03-18
 
 ## Added
@@ -172,15 +169,14 @@ and this project adheres to
 ## Fixed
 
 - 🐛(frontend) SVG export #706
-- 🐛(frontend) remove scroll listener table content  #688
+- 🐛(frontend) remove scroll listener table content #688
 - 🔒️(back) restrict access to favorite_list endpoint #690
-- 🐛(backend) refactor to fix filtering on children 
-    and descendants views #695
+- 🐛(backend) refactor to fix filtering on children
+  and descendants views #695
 - 🐛(action) fix notify-argocd workflow #713
 - 🚨(helm) fix helmfile lint #736
 - 🚚(frontend) redirect to 401 page when 401 error #759
 
-
 ## [2.4.0] - 2025-03-06
 
 ## Added
@@ -195,7 +191,6 @@ and this project adheres to
 
 - 🐛(frontend) fix collaboration error #684
 
-
 ## [2.3.0] - 2025-03-03
 
 ## Added

src/frontend/apps/impress/.env

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_API_ORIGIN=
 NEXT_PUBLIC_SW_DEACTIVATED=
 NEXT_PUBLIC_PUBLISH_AS_MIT=true
+NEXT_PUBLIC_GRIST_API_KEY=

src/frontend/apps/impress/.env.development

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_API_ORIGIN=http://localhost:8071
 NEXT_PUBLIC_PUBLISH_AS_MIT=false
 NEXT_PUBLIC_SW_DEACTIVATED=true
+NEXT_PUBLIC_GRIST_API_KEY=

src/frontend/apps/impress/package.json

@@ -32,6 +32,7 @@
     "@react-pdf/renderer": "4.3.0",
     "@sentry/nextjs": "9.26.0",
     "@tanstack/react-query": "5.80.5",
+    "ag-grid-react": "^33.3.1",
     "canvg": "4.0.3",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",

src/frontend/apps/impress/src/api/config.ts

@@ -20,3 +20,5 @@ export const backendUrl = () =>
  */
 export const baseApiUrl = (apiVersion: string = '1.0') =>
   `${backendUrl()}/api/v${apiVersion}/`;
+
+export const gristApiUrl = () => 'http://localhost:8484/api/';

src/frontend/apps/impress/src/api/gristApi.ts

@@ -0,0 +1,16 @@
+import { gristApiUrl } from './config';
+
+export const gristFetchApi = async (input: string, init?: RequestInit) => {
+  const apiUrl = `${gristApiUrl()}${input}`;
+  const bearerToken = `Bearer ${process.env.NEXT_PUBLIC_GRIST_API_KEY}`;
+
+  const headers = {
+    'Content-Type': 'application/json',
+    Authorization: bearerToken,
+  };
+
+  return await fetch(apiUrl, {
+    ...init,
+    headers,
+  });
+};

src/frontend/apps/impress/src/api/index.ts

@@ -1,6 +1,7 @@
 export * from './APIError';
 export * from './config';
 export * from './fetchApi';
+export * from './gristApi';
 export * from './helpers';
 export * from './types';
 export * from './utils';

src/frontend/apps/impress/src/components/DropButton.tsx

@@ -1,4 +1,5 @@
 import {
+  CSSProperties,
   PropsWithChildren,
   ReactNode,
   useEffect,
@@ -38,6 +39,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
 export interface DropButtonProps {
   button: ReactNode;
   buttonCss?: BoxProps['$css'];
+  buttonStyle?: CSSProperties;
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
   label?: string;
@@ -46,6 +48,7 @@ export interface DropButtonProps {
 export const DropButton = ({
   button,
   buttonCss,
+  buttonStyle,
   isOpen = false,
   onOpenChange,
   children,
@@ -77,6 +80,7 @@ export const DropButton = ({
           ${buttonCss};
         `}
         className="--docs--drop-button"
+        style={buttonStyle}
       >
         {button}
       </StyledButton>

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -10,6 +10,7 @@ import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
 import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as Y from 'yjs';
@@ -27,13 +28,16 @@ import { randomColor } from '../utils';
 
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
-import { CalloutBlock, DividerBlock } from './custom-blocks';
+import { CalloutBlock, DatabaseBlock, DividerBlock } from './custom-blocks';
+
+ModuleRegistry.registerModules([AllCommunityModule]);
 
 export const blockNoteSchema = withPageBreak(
   BlockNoteSchema.create({
     blockSpecs: {
       ...defaultBlockSpecs,
       callout: CalloutBlock,
+      database: DatabaseBlock,
       divider: DividerBlock,
     },
   }),

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx

@@ -13,13 +13,15 @@ import { DocsBlockSchema } from '../types';
 
 import {
   getCalloutReactSlashMenuItems,
+  getDatabaseReactSlashMenuItems,
   getDividerReactSlashMenuItems,
 } from './custom-blocks';
 
 export const BlockNoteSuggestionMenu = () => {
   const editor = useBlockNoteEditor<DocsBlockSchema>();
   const { t } = useTranslation();
   const basicBlocksName = useDictionary().slash_menu.page_break.group;
+  const advancedBlocksName = useDictionary().slash_menu.table.group;
 
   const getSlashMenuItems = useMemo(() => {
     return async (query: string) =>
@@ -29,12 +31,13 @@ export const BlockNoteSuggestionMenu = () => {
             getDefaultReactSlashMenuItems(editor),
             getPageBreakReactSlashMenuItems(editor),
             getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
+            getDatabaseReactSlashMenuItems(editor, t, advancedBlocksName),
             getDividerReactSlashMenuItems(editor, t, basicBlocksName),
           ),
           query,
         ),
       );
-  }, [basicBlocksName, editor, t]);
+  }, [basicBlocksName, advancedBlocksName, editor, t]);
 
   return (
     <SuggestionMenuController

src/frontend/apps/impress/src/features/docs/doc-editor/components/DatabaseSelector.tsx

@@ -0,0 +1,134 @@
+import { Button } from '@openfun/cunningham-react';
+import React from 'react';
+import styled from 'styled-components';
+
+import { Box, Icon, Text } from '@/components';
+import { DatabaseSourceSelector } from '@/docs/doc-editor/components/DatabaseSourceSelector';
+import { useGristCreateDocAndTable } from '@/features/grist/useGristCreateTable';
+
+import { useDocStore } from '../../doc-management';
+
+type DatabaseSelectorProps = {
+  onDatabaseSelected: (args: { documentId: string; tableId: string }) => void;
+  allowCreateSource?: boolean;
+};
+
+export const DatabaseSelector = ({
+  onDatabaseSelected,
+  allowCreateSource = false,
+}: DatabaseSelectorProps) => {
+  const { createTable } = useGristCreateDocAndTable();
+  const { currentDoc } = useDocStore();
+
+  const handleCreateNewDatabase = () => {
+    if (!currentDoc) {
+      console.error('No current document found to create a new database.');
+      return;
+    }
+    createTable(currentDoc.title ?? currentDoc.id)
+      .then(({ documentId, tableId }) => {
+        onDatabaseSelected({ documentId, tableId });
+      })
+      .catch((error) => {
+        console.error('Error creating new database:', error);
+      });
+  };
+
+  return (
+    <Wrapper>
+      <Box
+        style={{
+          width: 40,
+          height: 40,
+          borderRadius: 20,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: 'rgb(133, 184, 255)',
+        }}
+      >
+        <Icon iconName="storage" color="rgb(62, 152, 255)" />
+      </Box>
+      <Title>Source de données</Title>
+      {allowCreateSource && (
+        <Description>Choisissez votre méthode de création</Description>
+      )}
+      <OptionsWrapper>
+        {allowCreateSource && (
+          <>
+            <Option>
+              <Box
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <Box>
+                  <OptionTitle>
+                    Créer une nouvelle base de données vide
+                  </OptionTitle>
+                  <Description>
+                    Partir d&apos;une base de données vierge
+                  </Description>
+                </Box>
+                <Button
+                  onClick={handleCreateNewDatabase}
+                  icon={<Icon iconName="add" $color="white" />}
+                ></Button>
+              </Box>
+            </Option>
+            <Text style={{ fontWeight: 600, fontSize: 14 }}>ou</Text>
+          </>
+        )}
+        <Option>
+          <Box style={{ marginBottom: 10 }}>
+            <OptionTitle>
+              Sélectionner une base de données existante
+            </OptionTitle>
+            <Description>
+              Connecter une base de données Grist déjà créée
+            </Description>
+          </Box>
+          <DatabaseSourceSelector onSourceSelected={onDatabaseSelected} />
+        </Option>
+      </OptionsWrapper>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled(Box)`
+  border: 2px solid rgb(160, 207, 255);
+  background-color: rgb(230, 243, 255);
+  border-radius: 4px;
+  width: 100%;
+  padding: 16px;
+  align-items: center;
+  gap: 10px;
+`;
+
+const Title = styled(Text)`
+  font-weight: 800;
+  font-size: 18px;
+`;
+
+const Description = styled(Text)`
+  color: rgb(110, 110, 110);
+  font-size: 14px;
+`;
+
+const OptionTitle = styled(Text)`
+  font-weight: 600;
+  font-size: 14px;
+`;
+
+const Option = styled(Box)`
+  width: 100%;
+  border: 1px solid rgb(180, 180, 180);
+  border-radius: 4px;
+  padding: 8px 16px;
+`;
+
+const OptionsWrapper = styled(Box)`
+  width: 100%;
+  gap: 5px;
+  align-items: center;
+`;