refactor: replace editor container with editor host (#10328)

### TL;DR
Refactored editor access to use `EditorHost` instead of `AffineEditorContainer` and updated mode access through `DocModeProvider`.

### What changed?
- Changed editor property types from `AffineEditorContainer` to `EditorHost` across multiple components
- Updated mode access to use `DocModeProvider` service instead of direct editor mode access
- Modified editor references to use `editor.host` where appropriate
- Updated scroll and highlight utilities to work with `EditorHost`

### How to test?
1. Open a document in both page and edgeless modes
2. Verify outline panel functionality works as expected
3. Test outline viewer navigation and highlighting
4. Confirm mobile outline menu operates correctly
5. Check that frame panel and TOC features work in all modes

### Why make this change?
This change improves architectural consistency by using `EditorHost` directly and accessing mode through the proper service provider. This makes the code more maintainable and follows better dependency practices by using the correct abstraction levels.

packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx

@@ -310,7 +310,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
               />
             </Scrollable.Root>
             <EditorOutlineViewer
-              editor={editorContainer}
+              editor={editorContainer?.host ?? null}
               show={mode === 'page' && !isSideBarOpen}
               openOutlinePanel={openOutlinePanel}
             />
@@ -350,7 +350,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
       <ViewSidebarTab tabId="outline" icon={<TocIcon />}>
         <Scrollable.Root className={styles.sidebarScrollArea}>
           <Scrollable.Viewport>
-            <EditorOutlinePanel editor={editorContainer} />
+            <EditorOutlinePanel editor={editorContainer?.host ?? null} />
           </Scrollable.Viewport>
           <Scrollable.Scrollbar />
         </Scrollable.Root>
@@ -359,7 +359,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
       <ViewSidebarTab tabId="frame" icon={<FrameIcon />}>
         <Scrollable.Root className={styles.sidebarScrollArea}>
           <Scrollable.Viewport>
-            <EditorFramePanel editor={editorContainer} />
+            <EditorFramePanel editor={editorContainer?.host ?? null} />
           </Scrollable.Viewport>
           <Scrollable.Scrollbar />
         </Scrollable.Root>

packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/frame.tsx

@@ -1,34 +1,30 @@
+import type { EditorHost } from '@blocksuite/affine/block-std';
 import { FramePanel } from '@blocksuite/affine/blocks';
-import type { AffineEditorContainer } from '@blocksuite/affine/presets';
 import { useCallback, useEffect, useRef } from 'react';
 
 import * as styles from './frame.css';
 
 // A wrapper for FramePanel
-export const EditorFramePanel = ({
-  editor,
-}: {
-  editor: AffineEditorContainer | null;
-}) => {
+export const EditorFramePanel = ({ editor }: { editor: EditorHost | null }) => {
   const framePanelRef = useRef<FramePanel | null>(null);
 
   const onRefChange = useCallback(
     (container: HTMLDivElement | null) => {
-      if (editor?.host && container && container.children.length === 0) {
+      if (editor && container && container.children.length === 0) {
         framePanelRef.current = new FramePanel();
-        framePanelRef.current.host = editor.host;
+        framePanelRef.current.host = editor;
         framePanelRef.current.fitPadding = [20, 20, 20, 20];
         container.append(framePanelRef.current);
       }
     },
-    [editor?.host]
+    [editor]
   );
 
   useEffect(() => {
-    if (editor?.host && framePanelRef.current) {
-      framePanelRef.current.host = editor.host;
+    if (editor && framePanelRef.current) {
+      framePanelRef.current.host = editor;
     }
-  }, [editor?.host]);
+  }, [editor]);
 
   return <div className={styles.root} ref={onRefChange} />;
 };

packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/outline.tsx

@@ -1,4 +1,4 @@
-import type { AffineEditorContainer } from '@blocksuite/affine/presets';
+import type { EditorHost } from '@blocksuite/affine/block-std';
 import { OutlinePanel } from '@blocksuite/affine/presets';
 import { useCallback, useEffect, useRef } from 'react';
 
@@ -8,7 +8,7 @@ import * as styles from './outline.css';
 export const EditorOutlinePanel = ({
   editor,
 }: {
-  editor: AffineEditorContainer | null;
+  editor: EditorHost | null;
 }) => {
   const outlinePanelRef = useRef<OutlinePanel | null>(null);
 

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

@@ -268,7 +268,7 @@ const SharePageInner = ({
                 <Scrollable.Scrollbar />
               </Scrollable.Root>
               <EditorOutlineViewer
-                editor={editorContainer}
+                editor={editorContainer?.host ?? null}
                 show={publishMode === 'page'}
               />
               {!BUILD_CONFIG.isElectron && <SharePageFooter />}