save1

src/frontend/apps/impress/package.json

@@ -52,6 +52,7 @@
     "react-intersection-observer": "9.16.0",
     "react-select": "5.10.1",
     "styled-components": "6.1.18",
+    "tldraw": "3.13.1",
     "use-debounce": "10.0.4",
     "y-protocols": "1.0.6",
     "yjs": "*",

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

@@ -28,6 +28,7 @@ import { randomColor } from '../utils';
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
 import { CalloutBlock, DividerBlock } from './custom-blocks';
+import { DrawBlock } from './custom-blocks/DrawBlock';
 
 export const blockNoteSchema = withPageBreak(
   BlockNoteSchema.create({
@@ -35,6 +36,7 @@ export const blockNoteSchema = withPageBreak(
       ...defaultBlockSpecs,
       callout: CalloutBlock,
       divider: DividerBlock,
+      draw: DrawBlock,
     },
   }),
 );

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

@@ -15,6 +15,7 @@ import {
   getCalloutReactSlashMenuItems,
   getDividerReactSlashMenuItems,
 } from './custom-blocks';
+import { getDrawReactSlashMenuItems } from './custom-blocks/DrawBlock';
 
 export const BlockNoteSuggestionMenu = () => {
   const editor = useBlockNoteEditor<DocsBlockSchema>();
@@ -30,6 +31,7 @@ export const BlockNoteSuggestionMenu = () => {
             getPageBreakReactSlashMenuItems(editor),
             getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
             getDividerReactSlashMenuItems(editor, t, basicBlocksName),
+            getDrawReactSlashMenuItems(editor, t, basicBlocksName),
           ),
           query,
         ),

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DrawBlock.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { defaultProps, insertOrUpdateBlock } from '@blocknote/core';
+import { BlockTypeSelectItem, createReactBlockSpec } from '@blocknote/react';
+import { TFunction } from 'i18next';
+import React, { useEffect, useState } from 'react';
+import { css } from 'styled-components';
+import { Tldraw } from 'tldraw';
+import 'tldraw/tldraw.css';
+
+import { Box, BoxButton, Icon } from '@/components';
+
+import { DocsBlockNoteEditor } from '../../types';
+
+export const DrawBlock = createReactBlockSpec(
+  {
+    type: 'draw',
+    propSchema: {
+      textAlignment: defaultProps.textAlignment,
+      backgroundColor: defaultProps.backgroundColor,
+    },
+    content: 'inline',
+  },
+  {
+    render: ({ block, editor, contentRef }) => {
+      //const [openEmojiPicker, setOpenEmojiPicker] = useState(false);
+
+      // // Temporary: sets a yellow background color to a draw block when added by
+      // // the user, while keeping the colors menu on the drag handler usable for
+      // // this custom block.
+      // useEffect(() => {
+      //   if (
+      //     !block.content.length &&
+      //     block.props.backgroundColor === 'default'
+      //   ) {
+      //     editor.updateBlock(block, { props: { backgroundColor: 'yellow' } });
+      //   }
+      // }, [block, editor]);
+
+      return (
+        <Box style={{ width: '100%', height: 300 }}>
+          <Tldraw />
+        </Box>
+      );
+    },
+  },
+);
+
+export const getDrawReactSlashMenuItems = (
+  editor: DocsBlockNoteEditor,
+  t: TFunction<'translation', undefined>,
+  group: string,
+) => [
+  {
+    title: t('Draw'),
+    onItemClick: () => {
+      insertOrUpdateBlock(editor, {
+        type: 'draw',
+      });
+    },
+    aliases: ['draw'],
+    group,
+    icon: <Icon iconName="draw" $size="18px" />,
+    subtext: t('Add a draw block'),
+  },
+];
+
+export const getDrawFormattingToolbarItems = (
+  t: TFunction<'translation', undefined>,
+): BlockTypeSelectItem => ({
+  name: t('Draw'),
+  type: 'draw',
+  icon: () => <Icon iconName="lightbulb" $size="16px" />,
+  isSelected: (block) => block.type === 'draw',
+});