diff --git a/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts index 27250623..620fb854 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts @@ -121,7 +121,7 @@ test.describe('Language', () => { LANGUAGE_CODE: 'en-us', }); - await createDoc(page, 'doc-toolbar', browserName, 1); + await createDoc(page, 'doc-translations-slash', browserName, 1); const { editor, suggestionMenu } = await openSuggestionMenu({ page }); await expect( diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/AI/AIUI.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/AI/AIUI.tsx index cea52921..8d814961 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/AI/AIUI.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/AI/AIUI.tsx @@ -4,6 +4,7 @@ import { getAIExtension, getDefaultAIMenuItems, } from '@blocknote/xl-ai'; +import '@blocknote/xl-ai/style.css'; import { useTranslation } from 'react-i18next'; import { css } from 'styled-components'; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/AI/index.ts b/src/frontend/apps/impress/src/features/docs/doc-editor/components/AI/index.ts index fe820022..c50a690b 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/AI/index.ts +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/AI/index.ts @@ -1,2 +1,25 @@ -export * from './AIUI'; -export * from './useAI'; +/** + * To import AI modules you must import from the index file. + * This is to ensure that the AI modules are only loaded when + * the application is not published as MIT. + */ +import * as XLAI from '@blocknote/xl-ai'; +import * as localesAI from '@blocknote/xl-ai/locales'; + +import * as AIUI from './AIUI'; +import * as useAI from './useAI'; + +let modulesAI = undefined; +if (process.env.NEXT_PUBLIC_PUBLISH_AS_MIT === 'false') { + modulesAI = { + ...XLAI, + ...AIUI, + localesAI: localesAI, + ...useAI, + }; +} + +type ModulesAI = typeof XLAI & + typeof AIUI & { localesAI: typeof localesAI } & typeof useAI; + +export default modulesAI as ModulesAI; 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 08154b37..5baa69a7 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 @@ -12,9 +12,6 @@ import * as locales from '@blocknote/core/locales'; import { BlockNoteView } from '@blocknote/mantine'; import '@blocknote/mantine/style.css'; import { useCreateBlockNote } from '@blocknote/react'; -import { AIMenuController } from '@blocknote/xl-ai'; -import { en as aiEn } from '@blocknote/xl-ai/locales'; -import '@blocknote/xl-ai/style.css'; import { HocuspocusProvider } from '@hocuspocus/provider'; import { useEffect, useMemo, useRef } from 'react'; import { useTranslation } from 'react-i18next'; @@ -39,7 +36,7 @@ import { cssEditor } from '../styles'; import { DocsBlockNoteEditor } from '../types'; import { randomColor } from '../utils'; -import { AIMenu, useAI } from './AI'; +import BlockNoteAI from './AI'; import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu'; import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar'; import { cssComments, useComments } from './comments/'; @@ -49,6 +46,11 @@ import { PdfBlock, UploadLoaderBlock, } from './custom-blocks'; + +const AIMenu = BlockNoteAI?.AIMenu; +const AIMenuController = BlockNoteAI?.AIMenuController; +const useAI = BlockNoteAI?.useAI; +const localesAI = BlockNoteAI?.localesAI; import { InterlinkingLinkInlineContent, InterlinkingSearchInlineContent, @@ -87,7 +89,6 @@ interface BlockNoteEditorProps { export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => { const { user } = useAuth(); const { setEditor } = useEditorStore(); - const { t } = useTranslation(); const { themeTokens } = useCunninghamTheme(); const { isSynced: isConnectedToCollabServer } = useProviderStore(); const refEditorContainer = useRef(null); @@ -96,14 +97,14 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => { const showComments = canSeeComment; useSaveDoc(doc.id, provider.document, isConnectedToCollabServer); - const { i18n } = useTranslation(); + const { i18n, t } = useTranslation(); let lang = i18n.resolvedLanguage; if (!lang || !(lang in locales)) { lang = 'en'; } const { uploadFile, errorAttachment } = useUploadFile(doc.id); - const aiExtension = useAI(doc.id); + const aiExtension = useAI?.(doc.id); const collabName = user?.full_name || user?.email; const cursorName = collabName || t('Anonymous'); @@ -173,7 +174,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => { ...(multiColumnLocales && { multi_column: multiColumnLocales[lang as keyof typeof multiColumnLocales], - ai: aiEn, + ai: localesAI?.[lang as keyof typeof localesAI], }), }, pasteHandler: ({ event, defaultPasteHandler }) => { @@ -209,7 +210,15 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => { uploadFile, schema: blockNoteSchema, }, - [cursorName, lang, provider, uploadFile, threadStore, resolveUsers], + [ + aiExtension, + cursorName, + lang, + provider, + uploadFile, + threadStore, + resolveUsers, + ], ); useHeadings(editor); @@ -252,7 +261,9 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => { comments={showComments} aria-label={t('Document editor')} > - {aiExtension && } + {aiExtension && AIMenuController && AIMenu && ( + + )} 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 35d60549..58f414cc 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 @@ -8,7 +8,6 @@ import { useBlockNoteEditor, useDictionary, } from '@blocknote/react'; -import { getAISlashMenuItems } from '@blocknote/xl-ai'; import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -20,6 +19,7 @@ import { DocsStyleSchema, } from '../types'; +import BlockNoteAI from './AI'; import { getCalloutReactSlashMenuItems, getPdfReactSlashMenuItems, @@ -30,6 +30,8 @@ import XLMultiColumn from './xl-multi-column'; const getMultiColumnSlashMenuItems = XLMultiColumn?.getMultiColumnSlashMenuItems; +const getAISlashMenuItems = BlockNoteAI?.getAISlashMenuItems; + export const BlockNoteSuggestionMenu = () => { const editor = useBlockNoteEditor< DocsBlockSchema, @@ -54,7 +56,9 @@ export const BlockNoteSuggestionMenu = () => { getMultiColumnSlashMenuItems?.(editor) || [], getPdfReactSlashMenuItems(editor, t, fileBlocksName), getCalloutReactSlashMenuItems(editor, t, basicBlocksName), - conf?.AI_FEATURE_ENABLED ? getAISlashMenuItems(editor) : [], + conf?.AI_FEATURE_ENABLED && getAISlashMenuItems + ? getAISlashMenuItems(editor) + : [], ); const index = combinedMenu.findIndex( 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 7fc4cf2c..0b4d9c63 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 @@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next'; import { useConfig } from '@/core/config/api'; -import { AIToolbarButton } from '../AI'; +import BlockNoteAI from '../AI'; import { CommentToolbarButton } from '../comments/CommentToolbarButton'; import { getCalloutFormattingToolbarItems } from '../custom-blocks'; @@ -18,6 +18,8 @@ import { FileDownloadButton } from './FileDownloadButton'; import { MarkdownButton } from './MarkdownButton'; import { ModalConfirmDownloadUnsafe } from './ModalConfirmDownloadUnsafe'; +const AIToolbarButton = BlockNoteAI?.AIToolbarButton; + export const BlockNoteToolbar = () => { const dict = useDictionary(); const [confirmOpen, setIsConfirmOpen] = useState(false); @@ -69,7 +71,7 @@ export const BlockNoteToolbar = () => { const formattingToolbar = useCallback(() => { return ( - {conf?.AI_FEATURE_ENABLED && } + {conf?.AI_FEATURE_ENABLED && AIToolbarButton && }