feat: modify blockhub & help island interation (#960)

Co-authored-by: JimmFly <yangjinfei001@gmail.com>

apps/web/src/components/editor/index.tsx

@@ -22,27 +22,16 @@ export const Editor = ({ page, workspace, setEditor }: Props) => {
   const editorContainer = useRef<HTMLDivElement>(null);
   // const { currentWorkspace, currentPage, setEditor } = useAppState();
   useEffect(() => {
-    let blockHubElement: HTMLElement | null = null;
     const ret = () => {
       const node = editorContainer.current;
       while (node?.firstChild) {
         node.removeChild(node.firstChild);
       }
-
-      blockHubElement?.remove();
     };
 
     const editor = new EditorContainer();
     editor.page = page;
-    editor.createBlockHub().then(blockHub => {
-      const toolWrapper = document.querySelector('#toolWrapper');
-      if (!toolWrapper) {
-        // In an invitation page there is no toolWrapper, which contains helper icon and blockHub icon
-        return;
-      }
-      blockHubElement = blockHub;
-      toolWrapper.appendChild(blockHub);
-    });
+
     editorContainer.current?.appendChild(editor);
     if (page.isEmpty) {
       const isFirstPage = workspace?.meta.pageMetas.length === 1;

apps/web/src/components/help-island/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {
   StyledIsland,
   StyledIconWrapper,
@@ -11,6 +11,7 @@ import { Tooltip } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { useModal } from '@/store/globalModal';
 import { MuiFade } from '@affine/component';
+import { useAppState } from '@/providers/app-state-provider';
 export type IslandItemNames = 'contact' | 'shortcuts';
 export const HelpIsland = ({
   showList = ['contact', 'shortcuts'],
@@ -19,7 +20,23 @@ export const HelpIsland = ({
 }) => {
   const [spread, setShowSpread] = useState(false);
   const { triggerShortcutsModal, triggerContactModal } = useModal();
+  const { blockHub } = useAppState();
   const { t } = useTranslation();
+
+  useEffect(() => {
+    blockHub?.blockHubStatusUpdated.on(status => {
+      if (status) {
+        setShowSpread(false);
+      }
+    });
+    return () => {
+      blockHub?.blockHubStatusUpdated.dispose();
+    };
+  }, [blockHub]);
+
+  useEffect(() => {
+    spread && blockHub?.toggleMenu(false);
+  }, [blockHub, spread]);
   return (
     <StyledIsland
       spread={spread}