fix: copilot not working (#3425)

apps/core/src/bootstrap/register-plugins.ts

@@ -2,6 +2,7 @@
 import 'ses';
 
 import * as AFFiNEComponent from '@affine/component';
+import { FormatQuickBar } from '@blocksuite/blocks';
 import * as BlockSuiteBlocksStd from '@blocksuite/blocks/std';
 import { DisposableGroup } from '@blocksuite/global/utils';
 import * as BlockSuiteGlobalUtils from '@blocksuite/global/utils';
@@ -12,6 +13,7 @@ import {
   headerItemsAtom,
   registeredPluginAtom,
   rootStore,
+  settingItemsAtom,
   windowItemsAtom,
 } from '@toeverything/plugin-infra/atom';
 import type {
@@ -96,8 +98,28 @@ const createGlobalThis = () => {
     document,
     navigator,
     userAgent: navigator.userAgent,
-    // todo: permission control
-    fetch: globalThis.fetch,
+    // todo(himself65): permission control
+    fetch: function (input: RequestInfo, init?: RequestInit) {
+      return globalThis.fetch(input, init);
+    },
+    setTimeout: function (callback: () => void, timeout: number) {
+      return globalThis.setTimeout(callback, timeout);
+    },
+    clearTimeout: function (id: number) {
+      return globalThis.clearTimeout(id);
+    },
+    // copilot uses these
+    crypto: globalThis.crypto,
+    CustomEvent: globalThis.CustomEvent,
+    Date: globalThis.Date,
+    Math: globalThis.Math,
+    URL: globalThis.URL,
+    URLSearchParams: globalThis.URLSearchParams,
+    Headers: globalThis.Headers,
+    TextEncoder: globalThis.TextEncoder,
+    TextDecoder: globalThis.TextDecoder,
+    Request: globalThis.Request,
+    Error: globalThis.Error,
 
     // fixme: use our own db api
     indexedDB: globalThis.indexedDB,
@@ -177,6 +199,20 @@ await Promise.all(
               ...items,
               [plugin]: callback as CallbackMap['window'],
             }));
+          } else if (part === 'setting') {
+            console.log('setting');
+            rootStore.set(settingItemsAtom, items => ({
+              ...items,
+              [plugin]: callback as CallbackMap['setting'],
+            }));
+          } else if (part === 'formatBar') {
+            console.log('1');
+            FormatQuickBar.customElements.push((page, getBlockRange) => {
+              console.log('2');
+              const div = document.createElement('div');
+              (callback as CallbackMap['formatBar'])(div, page, getBlockRange);
+              return div;
+            });
           } else {
             throw new Error(`Unknown part: ${part}`);
           }

apps/core/src/components/affine/setting-modal/general-setting/plugins/index.tsx

@@ -1,10 +1,38 @@
-import {
-  SettingHeader,
-  SettingWrapper,
-} from '@affine/component/setting-components';
+import { SettingHeader } from '@affine/component/setting-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { registeredPluginAtom } from '@toeverything/plugin-infra/atom';
+import {
+  registeredPluginAtom,
+  settingItemsAtom,
+} from '@toeverything/plugin-infra/atom';
 import { useAtomValue } from 'jotai';
+import type { FC, ReactNode } from 'react';
+import { useRef } from 'react';
+
+const PluginSettingWrapper: FC<{
+  id: string;
+  title?: ReactNode;
+}> = ({ title, id }) => {
+  const Setting = useAtomValue(settingItemsAtom)[id];
+  const disposeRef = useRef<(() => void) | null>(null);
+  return (
+    <div>
+      {title ? <div className="title">{title}</div> : null}
+      <div
+        ref={ref => {
+          if (ref && Setting) {
+            setTimeout(() => {
+              disposeRef.current = Setting(ref);
+            });
+          } else if (ref === null) {
+            setTimeout(() => {
+              disposeRef.current?.();
+            });
+          }
+        }}
+      />
+    </div>
+  );
+};
 
 export const Plugins = () => {
   const t = useAFFiNEI18N();
@@ -17,7 +45,7 @@ export const Plugins = () => {
         data-testid="plugins-title"
       />
       {allowedPlugins.map(plugin => (
-        <SettingWrapper key={plugin} title={plugin}></SettingWrapper>
+        <PluginSettingWrapper key={plugin} id={plugin} title={plugin} />
       ))}
     </>
   );