✨(app-impress) add basic blocknotes editor

Create PadEditor, the parent component for the editors.
We integrate the BlockNoteEditor into the PadEditor.

src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx

@@ -0,0 +1,25 @@
+import { BlockNoteView, useCreateBlockNote } from '@blocknote/react';
+import '@blocknote/react/style.css';
+import React from 'react';
+import { WebrtcProvider } from 'y-webrtc';
+import * as Y from 'yjs';
+
+const doc = new Y.Doc();
+const provider = new WebrtcProvider('my-document-id4', doc, {
+  signaling: ['ws://localhost:4444'],
+});
+
+export const BlockNoteEditor = () => {
+  const editor = useCreateBlockNote({
+    collaboration: {
+      provider,
+      fragment: doc.getXmlFragment('document-store'),
+      user: {
+        name: 'My Username',
+        color: '#ff0000',
+      },
+    },
+  });
+
+  return <BlockNoteView editor={editor} />;
+};

src/frontend/apps/impress/src/features/pads/pad/components/PadEditor.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Card, Text } from '@/components';
+
+import { Pad } from '../types';
+
+import { BlockNoteEditor } from './BlockNoteEditor';
+
+interface PadEditorProps {
+  pad: Pad;
+}
+
+export const PadEditor = ({ pad }: PadEditorProps) => {
+  return (
+    <Card className="m-b p-b" $height="100%">
+      <Text as="h2">{pad.name}</Text>
+      <BlockNoteEditor />
+    </Card>
+  );
+};

src/frontend/apps/impress/src/features/pads/pad/components/PadInfo.tsx

@@ -1,89 +0,0 @@
-import { DateTime, DateTimeFormatOptions } from 'luxon';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import IconGroup from '@/assets/icons/icon-group2.svg';
-import { Box, Card, Text } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
-
-import { Pad } from '../types';
-
-const format: DateTimeFormatOptions = {
-  month: '2-digit',
-  day: '2-digit',
-  year: 'numeric',
-};
-
-interface PadInfoProps {
-  pad: Pad;
-}
-
-export const PadInfo = ({ pad }: PadInfoProps) => {
-  const { t } = useTranslation();
-  const { colorsTokens } = useCunninghamTheme();
-  const { i18n } = useTranslation();
-
-  const created_at = DateTime.fromISO(pad.created_at)
-    .setLocale(i18n.language)
-    .toLocaleString(format);
-
-  const updated_at = DateTime.fromISO(pad.updated_at)
-    .setLocale(i18n.language)
-    .toLocaleString(format);
-
-  return (
-    <>
-      <Card className="m-b" style={{ paddingBottom: 0 }}>
-        <Box className="m-b" $direction="row" $align="center" $gap="1.5rem">
-          <IconGroup
-            width={44}
-            color={colorsTokens()['primary-text']}
-            aria-label={t('icon group')}
-            style={{
-              flexShrink: 0,
-              alignSelf: 'start',
-            }}
-          />
-          <Box>
-            <Text as="h3" $weight="bold" $size="1.25rem" className="mt-0">
-              {t('Members of “{{padName}}“', {
-                padName: pad.name,
-              })}
-            </Text>
-            <Text $size="m">
-              {t('Add people to the “{{padName}}“ group.', {
-                padName: pad.name,
-              })}
-            </Text>
-          </Box>
-        </Box>
-        <Box
-          className="p-s"
-          $gap="3rem"
-          $direction="row"
-          $justify="start"
-          $css={`
-            border-top: 1px solid ${colorsTokens()['card-border']};
-            padding-left: 1.5rem;
-          `}
-        >
-          <Text $size="s" as="p">
-            {t('{{count}} member', { count: pad.accesses.length })}
-          </Text>
-          <Text $size="s" $display="inline" as="p">
-            {t('Created at')}&nbsp;
-            <Text $weight="bold" $display="inline">
-              {created_at}
-            </Text>
-          </Text>
-          <Text $size="s" $display="inline" as="p">
-            {t('Last update at')}&nbsp;
-            <Text $weight="bold" $display="inline">
-              {updated_at}
-            </Text>
-          </Text>
-        </Box>
-      </Card>
-    </>
-  );
-};

src/frontend/apps/impress/src/features/pads/pad/components/index.ts

@@ -1 +1 @@
-export * from './PadInfo';
+export * from './PadEditor';

src/frontend/apps/impress/src/pages/pads/[id].tsx

@@ -5,7 +5,7 @@ import { ReactElement } from 'react';
 
 import { Box } from '@/components';
 import { TextErrors } from '@/components/TextErrors';
-import { PadInfo, usePad } from '@/features/pads/pad';
+import { PadEditor, usePad } from '@/features/pads/pad';
 import { PadLayout } from '@/layouts';
 import { NextPageWithLayout } from '@/types/next';
 
@@ -46,7 +46,7 @@ const Pad = ({ id }: PadProps) => {
     );
   }
 
-  return <PadInfo pad={pad} />;
+  return <PadEditor pad={pad} />;
 };
 
 Page.getLayout = function getLayout(page: ReactElement) {