feat: improve editor performance (#14429)

#### PR Dependency Tree


* **PR #14429** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* HTML import now splits lines on <br> into separate paragraphs while
preserving inline formatting.

* **Bug Fixes**
* Paste falls back to inserting after the first paragraph when no
explicit target is found.

* **Style**
  * Improved page-mode viewport styling for consistent content layout.

* **Tests**
* Added snapshot tests for <br>-based paragraph splitting; re-enabled an
e2e drag-page test.

* **Chores**
* Deferred/deduplicated font loading, inline text caching,
drag-handle/pointer optimizations, and safer inline render
synchronization.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/backend/server/src/__tests__/e2e/apps/flavors.spec.ts

@@ -1,13 +1,28 @@
 import { getCurrentUserQuery } from '@affine/graphql';
 
+import { JobExecutor } from '../../../base/job/queue/executor';
 import { DatabaseDocReader, DocReader } from '../../../core/doc';
 import { createApp } from '../create-app';
 import { e2e } from '../test';
 
-e2e('should init doc service', async t => {
+type TestFlavor = 'doc' | 'graphql' | 'sync' | 'renderer' | 'front';
+
+const createFlavorApp = async (flavor: TestFlavor) => {
   // @ts-expect-error override
-  globalThis.env.FLAVOR = 'doc';
-  await using app = await createApp();
+  globalThis.env.FLAVOR = flavor;
+  return await createApp({
+    tapModule(module) {
+      module.overrideProvider(JobExecutor).useValue({
+        onConfigInit: async () => {},
+        onConfigChanged: async () => {},
+        onModuleDestroy: async () => {},
+      });
+    },
+  });
+};
+
+e2e('should init doc service', async t => {
+  await using app = await createFlavorApp('doc');
 
   const res = await app.GET('/info').expect(200);
   t.is(res.body.flavor, 'doc');
@@ -16,9 +31,7 @@ e2e('should init doc service', async t => {
 });
 
 e2e('should init graphql service', async t => {
-  // @ts-expect-error override
-  globalThis.env.FLAVOR = 'graphql';
-  await using app = await createApp();
+  await using app = await createFlavorApp('graphql');
 
   const res = await app.GET('/info').expect(200);
 
@@ -29,27 +42,21 @@ e2e('should init graphql service', async t => {
 });
 
 e2e('should init sync service', async t => {
-  // @ts-expect-error override
-  globalThis.env.FLAVOR = 'sync';
-  await using app = await createApp();
+  await using app = await createFlavorApp('sync');
 
   const res = await app.GET('/info').expect(200);
   t.is(res.body.flavor, 'sync');
 });
 
 e2e('should init renderer service', async t => {
-  // @ts-expect-error override
-  globalThis.env.FLAVOR = 'renderer';
-  await using app = await createApp();
+  await using app = await createFlavorApp('renderer');
 
   const res = await app.GET('/info').expect(200);
   t.is(res.body.flavor, 'renderer');
 });
 
 e2e('should init front service', async t => {
-  // @ts-expect-error override
-  globalThis.env.FLAVOR = 'front';
-  await using app = await createApp();
+  await using app = await createFlavorApp('front');
 
   const res = await app.GET('/info').expect(200);
   t.is(res.body.flavor, 'front');

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

@@ -1,6 +1,6 @@
 import { cssVar } from '@toeverything/theme';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const mainContainer = style({
   containerType: 'inline-size',
@@ -47,6 +47,12 @@ export const affineDocViewport = style({
   },
 });
 
+export const pageModeViewportContentBox = style({});
+globalStyle(`${pageModeViewportContentBox} >:first-child`, {
+  display: 'table !important',
+  minWidth: '100%',
+});
+
 export const scrollbar = style({
   marginRight: '4px',
 });

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

@@ -347,7 +347,8 @@ const DetailPageImpl = memo(function DetailPageImpl() {
                 className={clsx(
                   'affine-page-viewport',
                   styles.affineDocViewport,
-                  styles.editorContainer
+                  styles.editorContainer,
+                  { [styles.pageModeViewportContentBox]: mode === 'page' }
                 )}
               >
                 <PageDetailEditor onLoad={onLoad} readonly={readonly} />