🚧(frontend) Improve present mode

src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts

@@ -180,6 +180,12 @@ export const createDoc = async (
     expect(responseUpdateDoc.ok()).toBeTruthy();
   }
 
+  // Wait for the editor to be mounted before handing control back, so callers
+  // that immediately type or open features don't race the editor load.
+  await expect(
+    page.locator('.--docs--editor-container .ProseMirror'),
+  ).toBeVisible({ timeout: 10000 });
+
   return randomDocs;
 };
 

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

@@ -51,6 +51,7 @@ import { DocsBlockNoteEditor } from '../types';
 import { randomColor, sanitizeColor } from '../utils';
 
 import BlockNoteAI from './AI';
+import { BlockNoteSideMenu } from './BlockNoteSideMenu';
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
 import { CalloutBlock, PdfBlock, UploadLoaderBlock } from './custom-blocks';
@@ -292,6 +293,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         editor={editor}
         formattingToolbar={false}
         slashMenu={false}
+        sideMenu={false}
         theme="light"
         comments={false}
         aria-label={t('Document editor')}
@@ -303,6 +305,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         )}
         <BlockNoteSuggestionMenu aiAllowed={aiBlockNoteAllowed} />
         <BlockNoteToolbar aiAllowed={aiBlockNoteAllowed} />
+        <BlockNoteSideMenu />
         {showComments && <FloatingComposerController />}
         {showComments && !isCommentSideBarOpen && <FloatingThreadController />}
         {threadsSidebarTarget &&

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

@@ -0,0 +1,86 @@
+import { SideMenuExtension } from '@blocknote/core/extensions';
+import {
+  BlockColorsItem,
+  RemoveBlockItem,
+  SideMenu,
+  SideMenuController,
+  TableColumnHeaderItem,
+  TableRowHeaderItem,
+  useBlockNoteEditor,
+  useComponentsContext,
+  useDictionary,
+  useExtensionState,
+} from '@blocknote/react';
+import { useTranslation } from 'react-i18next';
+
+import { getContentSlideIndexForBlock } from '@/docs/doc-presenter/hooks/useSlides';
+import { usePresenterStore } from '@/docs/doc-presenter/stores';
+import type { PresenterBlock } from '@/docs/doc-presenter/types';
+import { useResponsiveStore } from '@/stores';
+
+import type { DocsBlockNoteEditor } from '../types';
+
+const PresentBlockItem = () => {
+  const { t } = useTranslation();
+  const Components = useComponentsContext();
+  const editor: DocsBlockNoteEditor = useBlockNoteEditor();
+  const block = useExtensionState(SideMenuExtension, {
+    editor,
+    selector: (state) => state?.block,
+  });
+  const openPresenter = usePresenterStore((state) => state.open);
+  const { isMobile } = useResponsiveStore();
+
+  // Hidden on mobile (no presenter there) and until a block is targeted
+  // (no drag handle hovered yet).
+  if (Components === undefined || block === undefined || isMobile) {
+    return null;
+  }
+
+  return (
+    <Components.Generic.Menu.Item
+      className="bn-menu-item"
+      onClick={() => {
+        const contentSlideIndex = getContentSlideIndexForBlock(
+          editor.document as PresenterBlock[],
+          block.id,
+        );
+
+        // Overlay slide 0 is the generated title slide; content slides start
+        // at index 1, hence the +1 on the 0-based content-slide index.
+        openPresenter(contentSlideIndex + 1);
+      }}
+    >
+      {t('Present')}
+    </Components.Generic.Menu.Item>
+  );
+};
+
+const DocsDragHandleMenu = () => {
+  const Components = useComponentsContext();
+  const dict = useDictionary();
+
+  if (Components === undefined) {
+    return null;
+  }
+
+  return (
+    <Components.Generic.Menu.Dropdown className="bn-menu-dropdown bn-drag-handle-menu">
+      <RemoveBlockItem>{dict.drag_handle.delete_menuitem}</RemoveBlockItem>
+      <PresentBlockItem />
+      <BlockColorsItem>{dict.drag_handle.colors_menuitem}</BlockColorsItem>
+      <TableRowHeaderItem>
+        {dict.drag_handle.header_row_menuitem}
+      </TableRowHeaderItem>
+      <TableColumnHeaderItem>
+        {dict.drag_handle.header_column_menuitem}
+      </TableColumnHeaderItem>
+    </Components.Generic.Menu.Dropdown>
+  );
+};
+
+const DocsSideMenu = () => <SideMenu dragHandleMenu={DocsDragHandleMenu} />;
+
+export const BlockNoteSideMenu = () => (
+  <SideMenuController sideMenu={DocsSideMenu} />
+);

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

@@ -152,14 +152,32 @@ export const DocsEditorStyle = createGlobalStyle`
     /**
     * Divider
     */
-    [data-content-type='divider'] hr {
-      background: #d3d2cf;
-      margin: 1rem 0;
+    .bn-block-content[data-content-type='divider'] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 28px;
+      padding: 0;
+    }
+    .bn-block-content[data-content-type='divider'] hr {
+      flex: 1 1 100%;
       width: 100%;
-      border: 1px solid #d3d2cf;
+      height: 1px;
+      margin: 0;
+      border: 0;
+      border-radius: 11px;
+      background: var(--c--contextuals--border--surface--primary);
+    }
+    .bn-block-content[data-content-type='divider'].ProseMirror-selectednode hr {
+      height: 9.5px;
+      outline: 0 !important;
+      box-shadow: none;
+      border: 4px solid
+        var(--c--contextuals--border--semantic--brand--tertiary);
+      background: var(--c--contextuals--border--semantic--brand--secondary);
     }
     .bn-side-menu[data-block-type='divider'] {
-      height: 38px;
+      height: 28px;
     }
 
     /**

src/frontend/apps/impress/src/features/docs/doc-export/__tests__/utilsPrint.test.ts

@@ -0,0 +1,70 @@
+import { afterEach, describe, expect, test } from 'vitest';
+
+import { wrapInterlinksWithAnchor, wrapMediaWithLink } from '../utils_print';
+
+describe('print DOM helpers', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  test('wraps media links only inside the provided root', () => {
+    document.body.innerHTML = `
+      <main>
+        <div id="outside" data-content-type="video" data-url="https://example.com/outside.mp4" data-name="outside.mp4">
+          <div class="bn-file-block-content-wrapper"></div>
+        </div>
+        <div id="root">
+          <div id="inside" data-content-type="audio" data-url="https://example.com/inside.mp3" data-name="inside.mp3">
+            <div class="bn-file-block-content-wrapper"></div>
+          </div>
+        </div>
+      </main>
+    `;
+
+    const root = document.getElementById('root');
+    if (!root) {
+      throw new Error('missing root');
+    }
+
+    const cleanup = wrapMediaWithLink(root);
+
+    const inside = document.getElementById('inside');
+    const outside = document.getElementById('outside');
+
+    expect(inside?.firstElementChild?.shadowRoot?.textContent).toContain(
+      'inside.mp3',
+    );
+    expect(outside?.firstElementChild?.shadowRoot).toBeNull();
+
+    cleanup();
+
+    expect(inside?.firstElementChild?.shadowRoot).toBeNull();
+  });
+
+  test('wraps interlinks only inside the provided root', () => {
+    document.body.innerHTML = `
+      <main>
+        <span class="--docs--interlinking-link-inline-content" data-href="https://example.com/outside">outside</span>
+        <div id="root">
+          <span class="--docs--interlinking-link-inline-content" data-href="https://example.com/inside">inside</span>
+        </div>
+      </main>
+    `;
+
+    const root = document.getElementById('root');
+    if (!root) {
+      throw new Error('missing root');
+    }
+
+    const cleanup = wrapInterlinksWithAnchor(root);
+
+    expect(root.querySelector('a[data-print-link]')?.textContent).toBe(
+      'inside',
+    );
+    expect(document.querySelectorAll('a[data-print-link]')).toHaveLength(1);
+
+    cleanup();
+
+    expect(document.querySelectorAll('a[data-print-link]')).toHaveLength(0);
+  });
+});

src/frontend/apps/impress/src/features/docs/doc-export/utils_print.ts

@@ -175,7 +175,7 @@ function appendPrintOnlyStyles() {
 /**
  * Wraps media elements with links to their source URLs for printing.
  */
-function wrapMediaWithLink() {
+export function wrapMediaWithLink(root: ParentNode = document) {
   const createdShadowWrapper: HTMLElement[] = [];
 
   const prependLink = (
@@ -222,7 +222,7 @@ function wrapMediaWithLink() {
     createdShadowWrapper.push(shadowWrapper);
   };
 
-  document
+  root
     .querySelectorAll(
       '[data-content-type="pdf"], [data-content-type="file"], [data-content-type="audio"], [data-content-type="video"]',
     )
@@ -251,14 +251,14 @@ function wrapMediaWithLink() {
  * Wraps interlink inline content with anchor tags for printing,
  * so they appear as clickable links in the printed PDF.
  */
-function wrapInterlinksWithAnchor() {
+export function wrapInterlinksWithAnchor(root: ParentNode = document) {
   const wrappedElements: Array<{
     el: Element;
     anchor: HTMLAnchorElement;
     parent: Node;
   }> = [];
 
-  document
+  root
     .querySelectorAll('.--docs--interlinking-link-inline-content[data-href]')
     .forEach((el) => {
       const href = el.getAttribute('data-href');

src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx

@@ -32,6 +32,7 @@ import {
   useDocUtils,
   useDuplicateDoc,
 } from '@/docs/doc-management';
+import { usePresenterStore } from '@/docs/doc-presenter/stores';
 import { useAuth } from '@/features/auth';
 import { useFocusStore, useResponsiveStore } from '@/stores';
 
@@ -82,14 +83,6 @@ const ModalExport =
       )
     : null;
 
-const PresenterOverlay = dynamic(
-  () =>
-    import('@/docs/doc-presenter').then((mod) => ({
-      default: mod.PresenterOverlay,
-    })),
-  { ssr: false },
-);
-
 interface DocToolBoxProps {
   doc: Doc;
 }
@@ -108,11 +101,13 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const [isModalShareOpen, setIsModalShareOpen] = useState(false);
   const [isModalHistoryOpen, setIsModalHistoryOpen] = useState(false);
   const [isModalLeaveOpen, setIsModalLeaveOpen] = useState(false);
-  const [isPresenterOpen, setIsPresenterOpen] = useState(false);
 
   const { restoreFocus, addLastFocus } = useFocusStore();
   const { isMobile } = useResponsiveStore();
   const copyDocLink = useCopyDocLink(doc.id);
+  // Deep-link (#2397) and slide/URL sync live in PresenterRoot; here we only
+  // trigger the manual "Present" action.
+  const openPresenter = usePresenterStore((state) => state.open);
   const { mutate: duplicateDoc } = useDuplicateDoc({
     onSuccess: (data) => {
       void router.push(`/docs/${data.id}`);
@@ -148,9 +143,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       label: t('Present'),
       icon: <Present width={24} height={24} aria-hidden="true" />,
       callback: () => {
-        requestAnimationFrame(() => {
-          setIsPresenterOpen(true);
-        });
+        openPresenter(0);
       },
       isHidden: Boolean(doc.deleted_at) || isMobile,
       testId: `docs-actions-present-${doc.id}`,
@@ -315,14 +308,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
           doc={doc}
         />
       )}
-      {isPresenterOpen && (
-        <PresenterOverlay
-          doc={doc}
-          onClose={() => {
-            setIsPresenterOpen(false);
-          }}
-        />
-      )}
     </>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-presenter/__tests__/PresenterFloatingBar.spec.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test, vi } from 'vitest';
+
+import { PresenterFloatingBar } from '../components/PresenterFloatingBar';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+const noop = () => undefined;
+
+describe('PresenterFloatingBar', () => {
+  test('opens the grouped actions dropdown from the toolbar button', async () => {
+    render(
+      <PresenterFloatingBar
+        index={0}
+        total={3}
+        isFullscreen={false}
+        isExportingPdf={false}
+        onPrev={noop}
+        onNext={noop}
+        onCopyLink={noop}
+        onExportPdf={noop}
+        onToggleFullscreen={noop}
+        onClose={noop}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole('button', { name: 'More options' }));
+
+    expect(
+      screen.getByRole('menuitem', { name: 'Copy link to slide' }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole('menuitem', { name: 'Download PDF' }),
+    ).toBeVisible();
+  });
+});