feat(core): add outline viewer for share page (#8190)

packages/frontend/core/src/components/blocksuite/outline-viewer/index.tsx

@@ -11,7 +11,7 @@ export const EditorOutlineViewer = ({
 }: {
   editor: AffineEditorContainer | null;
   show: boolean;
-  openOutlinePanel: () => void;
+  openOutlinePanel?: () => void;
 }) => {
   const outlineViewerRef = useRef<OutlineViewer | null>(null);
 
@@ -34,7 +34,10 @@ export const EditorOutlineViewer = ({
   if (outlineViewerRef.current.editor !== editor) {
     outlineViewerRef.current.editor = editor;
   }
-  if (outlineViewerRef.current.toggleOutlinePanel !== openOutlinePanel) {
+  if (
+    outlineViewerRef.current.toggleOutlinePanel !== openOutlinePanel &&
+    openOutlinePanel
+  ) {
     outlineViewerRef.current.toggleOutlinePanel = openOutlinePanel;
   }
 

packages/frontend/core/src/pages/workspace/share/share-page.tsx

@@ -1,5 +1,6 @@
 import { Scrollable } from '@affine/component';
 import { AppFallback } from '@affine/core/components/affine/app-container';
+import { EditorOutlineViewer } from '@affine/core/components/blocksuite/outline-viewer';
 import { PageDetailEditor } from '@affine/core/components/page-detail-editor';
 import { SharePageNotFoundError } from '@affine/core/components/share-page-not-found-error';
 import { AppContainer, MainContainer } from '@affine/core/components/workspace';
@@ -112,7 +113,8 @@ const SharePageInner = ({
   const [workspace, setWorkspace] = useState<Workspace | null>(null);
   const [page, setPage] = useState<Doc | null>(null);
   const [editor, setEditor] = useState<Editor | null>(null);
-  const [_, setActiveBlocksuiteEditor] = useActiveBlocksuiteEditor();
+  const [editorContainer, setActiveBlocksuiteEditor] =
+    useActiveBlocksuiteEditor();
 
   useEffect(() => {
     // create a workspace for share page
@@ -229,6 +231,10 @@ const SharePageInner = ({
                     </Scrollable.Viewport>
                     <Scrollable.Scrollbar />
                   </Scrollable.Root>
+                  <EditorOutlineViewer
+                    editor={editorContainer}
+                    show={publishMode === 'page'}
+                  />
                   <SharePageFooter />
                 </div>
               </div>