Skip to content

Commit 7f2a21c

Browse files
committed
🔥(frontend) remove Quote custom block
Last Blocknote upgrade included a Quote block, better to use their built-in one.
1 parent 4ad9179 commit 7f2a21c

File tree

7 files changed

+16
-97
lines changed

7 files changed

+16
-97
lines changed

src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ test.describe('Doc Export', () => {
235235
// Trigger slash menu to show menu
236236
await editor.click();
237237
await editor.fill('/');
238-
await page.getByText('Add a quote block').click();
238+
await page.getByText('Quote or excerpt').click();
239239

240240
await expect(
241241
editor.locator('.bn-block-content[data-content-type="quote"]'),

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import {
22
BlockNoteSchema,
3-
Dictionary,
43
defaultBlockSpecs,
5-
locales,
64
withPageBreak,
75
} from '@blocknote/core';
86
import '@blocknote/core/fonts/inter.css';
7+
import * as locales from '@blocknote/core/locales';
98
import { BlockNoteView } from '@blocknote/mantine';
109
import '@blocknote/mantine/style.css';
1110
import { useCreateBlockNote } from '@blocknote/react';
@@ -27,14 +26,13 @@ import { randomColor } from '../utils';
2726

2827
import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
2928
import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
30-
import { DividerBlock, QuoteBlock } from './custom-blocks';
29+
import { DividerBlock } from './custom-blocks';
3130

3231
export const blockNoteSchema = withPageBreak(
3332
BlockNoteSchema.create({
3433
blockSpecs: {
3534
...defaultBlockSpecs,
3635
divider: DividerBlock,
37-
quote: QuoteBlock,
3836
},
3937
}),
4038
);
@@ -112,7 +110,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
112110
},
113111
showCursorLabels: showCursorLabels as 'always' | 'activity',
114112
},
115-
dictionary: locales[lang as keyof typeof locales] as Dictionary,
113+
dictionary: locales[lang as keyof typeof locales],
116114
uploadFile,
117115
schema: blockNoteSchema,
118116
},

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,7 @@ import { useTranslation } from 'react-i18next';
1111

1212
import { DocsBlockSchema } from '../types';
1313

14-
import {
15-
getDividerReactSlashMenuItems,
16-
getQuoteReactSlashMenuItems,
17-
} from './custom-blocks';
14+
import { getDividerReactSlashMenuItems } from './custom-blocks';
1815

1916
export const BlockNoteSuggestionMenu = () => {
2017
const editor = useBlockNoteEditor<DocsBlockSchema>();
@@ -28,7 +25,6 @@ export const BlockNoteSuggestionMenu = () => {
2825
combineByGroup(
2926
getDefaultReactSlashMenuItems(editor),
3027
getPageBreakReactSlashMenuItems(editor),
31-
getQuoteReactSlashMenuItems(editor, t, basicBlocksName),
3228
getDividerReactSlashMenuItems(editor, t, basicBlocksName),
3329
),
3430
query,

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,9 @@ import {
66
useDictionary,
77
} from '@blocknote/react';
88
import React, { JSX, useCallback, useMemo, useState } from 'react';
9-
import { useTranslation } from 'react-i18next';
109

1110
import { useConfig } from '@/core/config/api';
1211

13-
import { getQuoteFormattingToolbarItems } from '../custom-blocks';
14-
1512
import { AIGroupButton } from './AIButton';
1613
import { FileDownloadButton } from './FileDownloadButton';
1714
import { MarkdownButton } from './MarkdownButton';
@@ -21,13 +18,11 @@ export const BlockNoteToolbar = () => {
2118
const dict = useDictionary();
2219
const [confirmOpen, setIsConfirmOpen] = useState(false);
2320
const [onConfirm, setOnConfirm] = useState<() => void | Promise<void>>();
24-
const { t } = useTranslation();
2521
const { data: conf } = useConfig();
2622

2723
const toolbarItems = useMemo(() => {
2824
const toolbarItems = getFormattingToolbarItems([
2925
...blockTypeSelectItems(dict),
30-
getQuoteFormattingToolbarItems(t),
3126
]);
3227
const fileDownloadButtonIndex = toolbarItems.findIndex(
3328
(item) =>
@@ -51,7 +46,7 @@ export const BlockNoteToolbar = () => {
5146
}
5247

5348
return toolbarItems as JSX.Element[];
54-
}, [dict, t]);
49+
}, [dict]);
5550

5651
const formattingToolbar = useCallback(() => {
5752
return (

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

Lines changed: 0 additions & 68 deletions
This file was deleted.
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
export * from './DividerBlock';
2-
export * from './QuoteBlock';

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

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,6 @@ export const cssEditor = (readonly: boolean) => css`
5757
.bn-side-menu[data-block-type='heading'][data-level='3'] {
5858
height: 35px;
5959
}
60-
.bn-side-menu[data-block-type='quote'] {
61-
height: 46px;
62-
}
6360
.bn-side-menu[data-block-type='divider'] {
6461
height: 38px;
6562
}
@@ -84,11 +81,19 @@ export const cssEditor = (readonly: boolean) => css`
8481
}
8582
}
8683
87-
.bn-editor {
84+
& .bn-editor {
8885
color: var(--c--theme--colors--greyscale-700);
86+
87+
/**
88+
* Quotes
89+
*/
90+
blockquote {
91+
border-left: 4px solid var(--c--theme--colors--greyscale-300);
92+
font-style: italic;
93+
}
8994
}
9095
91-
.bn-block-outer:not(:first-child) {
96+
& .bn-block-outer:not(:first-child) {
9297
&:has(h1) {
9398
margin-top: 32px;
9499
}
@@ -105,12 +110,6 @@ export const cssEditor = (readonly: boolean) => css`
105110
padding: 2px;
106111
border-radius: 4px;
107112
}
108-
& .bn-inline-content {
109-
width: 100%;
110-
}
111-
.bn-block-content[data-content-type='checkListItem'] > div {
112-
width: 100%;
113-
}
114113
115114
@media screen and (width <= 768px) {
116115
& .bn-editor {

0 commit comments

Comments
 (0)