diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts index e512cb92..08bb6a10 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts @@ -235,7 +235,7 @@ test.describe('Doc Export', () => { // Trigger slash menu to show menu await editor.click(); await editor.fill('/'); - await page.getByText('Add a quote block').click(); + await page.getByText('Quote or excerpt').click(); await expect( editor.locator('.bn-block-content[data-content-type="quote"]'), 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 e39bbf6f..0419195c 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 @@ -1,11 +1,10 @@ import { BlockNoteSchema, - Dictionary, defaultBlockSpecs, - locales, withPageBreak, } from '@blocknote/core'; import '@blocknote/core/fonts/inter.css'; +import * as locales from '@blocknote/core/locales'; import { BlockNoteView } from '@blocknote/mantine'; import '@blocknote/mantine/style.css'; import { useCreateBlockNote } from '@blocknote/react'; @@ -27,14 +26,13 @@ import { randomColor } from '../utils'; import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu'; import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar'; -import { DividerBlock, QuoteBlock } from './custom-blocks'; +import { DividerBlock } from './custom-blocks'; export const blockNoteSchema = withPageBreak( BlockNoteSchema.create({ blockSpecs: { ...defaultBlockSpecs, divider: DividerBlock, - quote: QuoteBlock, }, }), ); @@ -112,7 +110,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => { }, showCursorLabels: showCursorLabels as 'always' | 'activity', }, - dictionary: locales[lang as keyof typeof locales] as Dictionary, + dictionary: locales[lang as keyof typeof locales], uploadFile, schema: blockNoteSchema, }, 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 d15e1b5e..4c90ba5f 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,10 +11,7 @@ import { useTranslation } from 'react-i18next'; import { DocsBlockSchema } from '../types'; -import { - getDividerReactSlashMenuItems, - getQuoteReactSlashMenuItems, -} from './custom-blocks'; +import { getDividerReactSlashMenuItems } from './custom-blocks'; export const BlockNoteSuggestionMenu = () => { const editor = useBlockNoteEditor(); @@ -28,7 +25,6 @@ export const BlockNoteSuggestionMenu = () => { combineByGroup( 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/BlockNoteToolBar/BlockNoteToolbar.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx index 37632f7c..a250741f 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx @@ -6,12 +6,9 @@ import { useDictionary, } from '@blocknote/react'; import React, { JSX, useCallback, useMemo, useState } from 'react'; -import { useTranslation } from 'react-i18next'; import { useConfig } from '@/core/config/api'; -import { getQuoteFormattingToolbarItems } from '../custom-blocks'; - import { AIGroupButton } from './AIButton'; import { FileDownloadButton } from './FileDownloadButton'; import { MarkdownButton } from './MarkdownButton'; @@ -21,13 +18,11 @@ export const BlockNoteToolbar = () => { const dict = useDictionary(); const [confirmOpen, setIsConfirmOpen] = useState(false); const [onConfirm, setOnConfirm] = useState<() => void | Promise>(); - const { t } = useTranslation(); const { data: conf } = useConfig(); const toolbarItems = useMemo(() => { const toolbarItems = getFormattingToolbarItems([ ...blockTypeSelectItems(dict), - getQuoteFormattingToolbarItems(t), ]); const fileDownloadButtonIndex = toolbarItems.findIndex( (item) => @@ -51,7 +46,7 @@ export const BlockNoteToolbar = () => { } return toolbarItems as JSX.Element[]; - }, [dict, t]); + }, [dict]); const formattingToolbar = useCallback(() => { return ( 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 deleted file mode 100644 index f52a5c70..00000000 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/QuoteBlock.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { defaultProps, insertOrUpdateBlock } from '@blocknote/core'; -import { BlockTypeSelectItem, createReactBlockSpec } from '@blocknote/react'; -import { TFunction } from 'i18next'; - -import { Box, Icon } from '@/components'; -import { useCunninghamTheme } from '@/cunningham'; - -import { DocsBlockNoteEditor } from '../../types'; - -export const QuoteBlock = createReactBlockSpec( - { - type: 'quote', - propSchema: { - textAlignment: defaultProps.textAlignment, - }, - content: 'inline', - }, - { - render: (props) => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const { colorsTokens } = useCunninghamTheme(); - - return ( - - ); - }, - }, -); - -export const getQuoteReactSlashMenuItems = ( - editor: DocsBlockNoteEditor, - t: TFunction<'translation', undefined>, - group: string, -) => [ - { - title: t('Quote'), - onItemClick: () => { - insertOrUpdateBlock(editor, { - type: 'quote', - }); - }, - aliases: ['quote', 'blockquote', 'citation'], - group, - icon: , - subtext: t('Add a quote block'), - }, -]; - -export const getQuoteFormattingToolbarItems = ( - t: TFunction<'translation', undefined>, -): BlockTypeSelectItem => ({ - name: t('Quote'), - type: 'quote', - icon: () => , - isSelected: (block) => block.type === 'quote', -}); 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 0dbdc032..70bc3fae 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,2 +1 @@ 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 4daa8db4..8a96c86b 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 @@ -57,9 +57,6 @@ 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; } @@ -84,11 +81,19 @@ export const cssEditor = (readonly: boolean) => css` } } - .bn-editor { + & .bn-editor { color: var(--c--theme--colors--greyscale-700); + + /** + * Quotes + */ + blockquote { + border-left: 4px solid var(--c--theme--colors--greyscale-300); + font-style: italic; + } } - .bn-block-outer:not(:first-child) { + & .bn-block-outer:not(:first-child) { &:has(h1) { margin-top: 32px; } @@ -105,12 +110,6 @@ export const cssEditor = (readonly: boolean) => css` padding: 2px; border-radius: 4px; } - & .bn-inline-content { - width: 100%; - } - .bn-block-content[data-content-type='checkListItem'] > div { - width: 100%; - } @media screen and (width <= 768px) { & .bn-editor {