fix(core): editor popover covered header popover (#4342)

apps/core/src/components/page-detail-editor.css.ts

@@ -1,5 +1,14 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 
+/**
+ * Editor container element layer should be lower than header and after auto
+ * The zIndex of header is 2, defined in apps/core/src/components/pure/header/style.css.tsx
+ */
+export const editorContainer = style({
+  position: 'relative',
+  zIndex: 0, // it will create stacking context to limit layer of child elements and be lower than after auto zIndex
+});
+
 export const pluginContainer = style({
   height: '100%',
   width: '100%',

apps/core/src/components/page-detail-editor.tsx

@@ -32,7 +32,7 @@ import { pageSettingFamily } from '../atoms';
 import { fontStyleOptions, useAppSetting } from '../atoms/settings';
 import { BlockSuiteEditor as Editor } from './blocksuite/block-suite-editor';
 import * as styles from './page-detail-editor.css';
-import { pluginContainer } from './page-detail-editor.css';
+import { editorContainer, pluginContainer } from './page-detail-editor.css';
 import { TrashButtonGroup } from './pure/trash-button-group';
 
 export type OnLoadEditor = (page: Page, editor: EditorContainer) => () => void;
@@ -188,23 +188,27 @@ const PluginContentAdapter = memo<PluginContentAdapterProps>(
 interface LayoutPanelProps {
   node: LayoutNode;
   editorProps: PageDetailEditorProps;
+  depth: number;
 }
 
 const LayoutPanel = memo(function LayoutPanel(
   props: LayoutPanelProps
 ): ReactElement {
-  const node = props.node;
+  const { node, depth, editorProps } = props;
   const windowItems = useAtomValue(pluginWindowAtom);
   if (typeof node === 'string') {
     if (node === 'editor') {
-      return <EditorWrapper {...props.editorProps} />;
+      return <EditorWrapper {...editorProps} />;
     } else {
       const windowItem = windowItems[node];
       return <PluginContentAdapter pluginName={node} windowItem={windowItem} />;
     }
   } else {
     return (
-      <PanelGroup direction={node.direction}>
+      <PanelGroup
+        direction={node.direction}
+        className={depth === 0 ? editorContainer : undefined}
+      >
         <Panel
           defaultSize={node.splitPercentage}
           style={{
@@ -212,7 +216,11 @@ const LayoutPanel = memo(function LayoutPanel(
           }}
         >
           <Suspense>
-            <LayoutPanel node={node.first} editorProps={props.editorProps} />
+            <LayoutPanel
+              node={node.first}
+              editorProps={editorProps}
+              depth={depth + 1}
+            />
           </Suspense>
         </Panel>
         <PanelResizeHandle />
@@ -224,7 +232,11 @@ const LayoutPanel = memo(function LayoutPanel(
           }}
         >
           <Suspense>
-            <LayoutPanel node={node.second} editorProps={props.editorProps} />
+            <LayoutPanel
+              node={node.second}
+              editorProps={editorProps}
+              depth={depth + 1}
+            />
           </Suspense>
         </Panel>
       </PanelGroup>
@@ -244,7 +256,7 @@ export const PageDetailEditor = (props: PageDetailEditorProps) => {
   if (layout === 'editor') {
     return (
       <Suspense>
-        <PanelGroup direction="horizontal">
+        <PanelGroup direction="horizontal" className={editorContainer}>
           <Panel>
             <EditorWrapper {...props} />
           </Panel>
@@ -256,7 +268,7 @@ export const PageDetailEditor = (props: PageDetailEditorProps) => {
   return (
     <>
       <Suspense>
-        <LayoutPanel node={layout} editorProps={props} />
+        <LayoutPanel node={layout} editorProps={props} depth={0} />
       </Suspense>
     </>
   );

apps/storybook/src/stories/core.stories.tsx

@@ -53,6 +53,10 @@ SettingPage.play = async ({ canvasElement, step }) => {
       document.body.querySelector('[data-testid="language-menu-button"]')
     );
   });
+
+  // Menu button may have "pointer-events: none" style, await 100ms to avoid this weird situation.
+  await new Promise(resolve => window.setTimeout(resolve, 100));
+
   await step('click language menu button', async () => {
     await userEvent.click(
       document.body.querySelector(

packages/component/src/components/workspace/index.css.ts

@@ -65,6 +65,7 @@ globalStyle(`html[data-theme="dark"] ${appStyle}`, {
 
 export const mainContainerStyle = style({
   position: 'relative',
+  zIndex: 0, // it will create stacking context to limit layer of child elements and be lower than after auto zIndex
   width: 0,
   flex: 1,
   maxWidth: '100%',