From 534085439f9892bec1523919a49b308f5542fe82 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Mon, 10 Mar 2025 16:55:07 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20divider=20blocks=20?= =?UTF-8?q?to=20the=20editor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add a custom block to add a divider in the editor. --- .../doc-editor/components/BlockNoteEditor.tsx | 3 +- .../components/BlockNoteSuggestionMenu.tsx | 6 +- .../components/custom-blocks/DividerBlock.tsx | 55 +++++++++++++++++++ .../components/custom-blocks/QuoteBlock.tsx | 1 - .../components/custom-blocks/index.ts | 1 + .../src/features/docs/doc-editor/styles.tsx | 14 +++-- 6 files changed, 73 insertions(+), 7 deletions(-) create mode 100644 src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DividerBlock.tsx diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx index 44e61324..ba7ada83 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx @@ -27,12 +27,13 @@ import { randomColor } from '../utils'; import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu'; import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar'; -import { QuoteBlock } from './custom-blocks'; +import { DividerBlock, QuoteBlock } from './custom-blocks'; export const blockNoteSchema = withPageBreak( BlockNoteSchema.create({ blockSpecs: { ...defaultBlockSpecs, + divider: DividerBlock, quote: QuoteBlock, }, }), diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx index 58aad20e..d15e1b5e 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx @@ -11,7 +11,10 @@ import { useTranslation } from 'react-i18next'; import { DocsBlockSchema } from '../types'; -import { getQuoteReactSlashMenuItems } from './custom-blocks'; +import { + getDividerReactSlashMenuItems, + getQuoteReactSlashMenuItems, +} from './custom-blocks'; export const BlockNoteSuggestionMenu = () => { const editor = useBlockNoteEditor(); @@ -26,6 +29,7 @@ export const BlockNoteSuggestionMenu = () => { getDefaultReactSlashMenuItems(editor), getPageBreakReactSlashMenuItems(editor), getQuoteReactSlashMenuItems(editor, t, basicBlocksName), + getDividerReactSlashMenuItems(editor, t, basicBlocksName), ), query, ), diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DividerBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DividerBlock.tsx new file mode 100644 index 00000000..a5a352f9 --- /dev/null +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/DividerBlock.tsx @@ -0,0 +1,55 @@ +import { insertOrUpdateBlock } from '@blocknote/core'; +import { createReactBlockSpec } from '@blocknote/react'; +import { TFunction } from 'i18next'; + +import { Box, Text } from '@/components'; +import { useCunninghamTheme } from '@/cunningham'; + +import { DocsBlockNoteEditor } from '../../types'; + +export const DividerBlock = createReactBlockSpec( + { + type: 'divider', + propSchema: {}, + content: 'none', + }, + { + render: () => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const { colorsTokens } = useCunninghamTheme(); + + return ( + + ); + }, + }, +); + +export const getDividerReactSlashMenuItems = ( + editor: DocsBlockNoteEditor, + t: TFunction<'translation', undefined>, + group: string, +) => [ + { + title: t('Divider'), + onItemClick: () => { + insertOrUpdateBlock(editor, { + type: 'divider', + }); + }, + aliases: ['divider', 'hr', 'horizontal rule', 'line', 'separator'], + group, + icon: ( + + remove + + ), + subtext: t('Add a horizontal line'), + }, +]; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/QuoteBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/QuoteBlock.tsx index 5624450a..cc72379a 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/QuoteBlock.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/QuoteBlock.tsx @@ -13,7 +13,6 @@ export const QuoteBlock = createReactBlockSpec( type: 'quote', propSchema: { textAlignment: defaultProps.textAlignment, - textColor: defaultProps.textColor, }, content: 'inline', }, diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts index e101ddd8..0dbdc032 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts @@ -1 +1,2 @@ +export * from './DividerBlock'; export * from './QuoteBlock'; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx index 2aed7a93..96bab77d 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx @@ -10,10 +10,6 @@ export const cssEditor = (readonly: boolean) => css` pointer-events: none; } - .bn-side-menu[data-block-type='quote'] { - height: 46px; - } - .collaboration-cursor-custom__base { position: relative; } @@ -49,6 +45,9 @@ export const cssEditor = (readonly: boolean) => css` clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); } + /** + * Side menu + */ .bn-side-menu[data-block-type='heading'][data-level='1'] { height: 50px; } @@ -58,6 +57,13 @@ export const cssEditor = (readonly: boolean) => css` .bn-side-menu[data-block-type='heading'][data-level='3'] { height: 35px; } + .bn-side-menu[data-block-type='quote'] { + height: 46px; + } + .bn-side-menu[data-block-type='divider'] { + height: 38px; + } + h1 { font-size: 1.875rem; }