✨(frontend) start the presentation from a block

Add a "Present" item to the block side menu that opens the presenter on
the slide containing that block. Map any block id (incl. nested or
divider ids) to its rendered content slide.

Closes #2470

Author: PanchoutNathan

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-presenter/hooks/useSlides.ts

@@ -163,6 +163,12 @@ const getRenderedSlideGroups = <T extends PresenterBlock>(
     stripLeadingEmptyParagraphsAfterDivider,
   );
 
+const hasBlockId = (blocks: PresenterBlock[], blockId: string): boolean =>
+  blocks.some(
+    (block) =>
+      block.id === blockId || hasBlockId(block.children ?? [], blockId),
+  );
+
 /**
  * Split a flat list of top-level blocks into slide groups.
  *
@@ -189,6 +195,67 @@ export const splitBlocksIntoSlides = <T extends PresenterBlock>(
   return nonEmpty.length > 0 ? nonEmpty : [[]];
 };
 
+/**
+ * Map a block id to the index of the rendered (non-empty) content slide it
+ * belongs to. Accepts a regular block id, a block nested under a divider, or a
+ * divider's own id. When the matching group is dropped at render time (e.g. an
+ * empty slide), falls back to the closest rendered slide: the one directly
+ * containing the block, else the following content slide, else the previous
+ * one. Returns 0 when the block is absent (and as the ultimate fallback).
+ */
+export const getContentSlideIndexForBlock = <T extends PresenterBlock>(
+  blocks: T[],
+  blockId: string,
+): number => {
+  const rawGroups = getRawSlideGroups(blocks);
+  const renderedGroups = getRenderedSlideGroups(blocks);
+  const nonEmptyGroups = renderedGroups
+    .map((group, index) => ({ group, index }))
+    .filter(({ group }) => group.blocks.length > 0);
+
+  const getClosestRenderedSlideIndex = (groupIndex: number) => {
+    const directSlideIndex = nonEmptyGroups.findIndex(
+      ({ index }) => index === groupIndex,
+    );
+
+    if (directSlideIndex !== -1) {
+      return directSlideIndex;
+    }
+
+    const followingSlideIndex = nonEmptyGroups.findIndex(
+      ({ index }) => index > groupIndex,
+    );
+
+    if (followingSlideIndex !== -1) {
+      return followingSlideIndex;
+    }
+
+    const previousSlideIndex = nonEmptyGroups.findLastIndex(
+      ({ index }) => index < groupIndex,
+    );
+
+    return previousSlideIndex !== -1 ? previousSlideIndex : 0;
+  };
+
+  const directGroupIndex = rawGroups.findIndex((group) =>
+    hasBlockId(group.blocks, blockId),
+  );
+
+  if (directGroupIndex !== -1) {
+    return getClosestRenderedSlideIndex(directGroupIndex);
+  }
+
+  const dividerGroupIndex = rawGroups.findIndex(
+    (group) => group.dividerId === blockId,
+  );
+
+  if (dividerGroupIndex === -1) {
+    return 0;
+  }
+
+  return getClosestRenderedSlideIndex(dividerGroupIndex);
+};
+
 /** Memoized {@link splitBlocksIntoSlides} for use during render. */
 export const useSlides = <T extends PresenterBlock>(blocks: T[]): T[][] => {
   return useMemo(() => splitBlocksIntoSlides(blocks), [blocks]);