feat: add outline plugin (#3624)

Co-authored-by: codert <codert.sn@gmail.com>

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

@@ -17,7 +17,7 @@ import { contentLayoutAtom, rootStore } from '@toeverything/infra/atom';
 import clsx from 'clsx';
 import { useAtomValue, useSetAtom } from 'jotai';
 import type { CSSProperties, ReactElement } from 'react';
-import { memo, Suspense, useCallback, useMemo } from 'react';
+import { memo, startTransition, Suspense, useCallback, useMemo } from 'react';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
 import { pageSettingFamily } from '../atoms';
@@ -140,12 +140,14 @@ const PluginContentAdapter = memo<PluginContentAdapterProps>(
         ref={useCallback(
           (ref: HTMLDivElement | null) => {
             if (ref) {
-              const div = document.createElement('div');
-              const cleanup = windowItem(div);
-              ref.appendChild(div);
-              addCleanup(pluginName, () => {
-                cleanup();
-                ref.removeChild(div);
+              startTransition(() => {
+                const div = document.createElement('div');
+                const cleanup = windowItem(div);
+                ref.appendChild(div);
+                addCleanup(pluginName, () => {
+                  cleanup();
+                  ref.removeChild(div);
+                });
               });
             }
           },
@@ -181,7 +183,12 @@ const LayoutPanel = memo(function LayoutPanel(
         }}
         direction={node.direction}
       >
-        <Panel defaultSize={node.splitPercentage}>
+        <Panel
+          defaultSize={node.splitPercentage}
+          style={{
+            maxWidth: node.maxWidth?.[0],
+          }}
+        >
           <Suspense>
             <LayoutPanel node={node.first} editorProps={props.editorProps} />
           </Suspense>
@@ -191,6 +198,7 @@ const LayoutPanel = memo(function LayoutPanel(
           defaultSize={100 - node.splitPercentage}
           style={{
             overflow: 'scroll',
+            maxWidth: node.maxWidth?.[1],
           }}
         >
           <Suspense>