chore: bump BlockSuite version (#910)

Co-authored-by: QiShaoXuan <qishaoxuan777@gmail.com> Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com> Co-authored-by: DarkSky <darksky2048@gmail.com>
2026-02-12 12:28:42 +00:00 · 2023-02-10 03:09:05 +08:00
parent 18e1eecefc
commit d524fe3c6c
16 changed files with 276 additions and 210 deletions
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -12,10 +12,10 @@
    "@affine/component": "workspace:*",
    "@affine/datacenter": "workspace:*",
    "@affine/i18n": "workspace:*",
-    "@blocksuite/blocks": "0.4.0-alpha.2",
-    "@blocksuite/editor": "0.4.0-alpha.2",
+    "@blocksuite/blocks": "0.4.0-alpha.3",
+    "@blocksuite/editor": "0.4.0-alpha.3",
    "@blocksuite/icons": "^2.0.2",
-    "@blocksuite/store": "0.4.0-alpha.2",
+    "@blocksuite/store": "0.4.0-alpha.3",
    "@emotion/css": "^11.10.5",
    "@emotion/react": "^11.10.5",
    "@emotion/server": "^11.10.0",
--- a/packages/app/src/components/editor/index.tsx
+++ b/packages/app/src/components/editor/index.tsx
@@ -22,15 +22,26 @@ 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) {
+        throw new Error('Can not find toolWrapper');
+      }
+      blockHubElement = blockHub;
+      toolWrapper.appendChild(blockHub);
+    });
    editorContainer.current?.appendChild(editor);
    if (page.isEmpty) {
      const isFirstPage = workspace?.meta.pageMetas.length === 1;
--- a/packages/app/src/components/help-island/Icons.tsx
+++ b/packages/app/src/components/help-island/Icons.tsx
@@ -1,16 +1,16 @@
 export const HelpIcon = () => {
  return (
    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
      width="24"
      height="24"
+      viewBox="0 0 24 24"
      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fillRule="evenodd"
-        d="M12 3.8a8.2 8.2 0 1 0 0 16.4 8.2 8.2 0 0 0 0-16.4ZM2.2 12c0-5.412 4.388-9.8 9.8-9.8 5.412 0 9.8 4.388 9.8 9.8 0 5.412-4.388 9.8-9.8 9.8-5.412 0-9.8-4.388-9.8-9.8Zm9.978-3.18a1.448 1.448 0 0 0-1.61.948.8.8 0 1 1-1.51-.531 3.048 3.048 0 0 1 5.924 1.015c0 1.174-.87 1.945-1.48 2.351a6.082 6.082 0 0 1-1.275.642l-.027.01-.008.002-.003.001h-.002l-.254-.758.253.759a.8.8 0 0 1-.507-1.518h.001l.01-.004.055-.02a4.488 4.488 0 0 0 .869-.445c.513-.342.768-.696.768-1.02v-.002a1.449 1.449 0 0 0-1.204-1.43Zm-1.017 6.68a.8.8 0 0 1 .8-.8h.01a.8.8 0 1 1 0 1.6h-.01a.8.8 0 0 1-.8-.8Z"
        clipRule="evenodd"
+        d="M12.0041 3.8002C7.47536 3.8002 3.8041 7.47146 3.8041 12.0002C3.8041 13.311 4.1111 14.5479 4.65639 15.6449C4.92133 16.1779 4.91348 16.8471 4.85228 17.3998C4.7869 17.9901 4.63749 18.6238 4.47572 19.1908C4.3722 19.5537 4.26086 19.8987 4.1573 20.2002H12.0041C16.5328 20.2002 20.2041 16.5289 20.2041 12.0002C20.2041 7.47146 16.5328 3.8002 12.0041 3.8002ZM2.26631 20.6926L2.2668 20.6914L2.26948 20.685L2.28104 20.6567C2.29139 20.6312 2.30687 20.5928 2.32657 20.5429C2.36599 20.4431 2.42218 20.2979 2.48795 20.1192C2.61992 19.7607 2.78833 19.2734 2.93712 18.7519C3.08715 18.226 3.21054 17.6884 3.262 17.2236C3.31765 16.7212 3.2707 16.4518 3.22364 16.3571C2.57081 15.0438 2.2041 13.5637 2.2041 12.0002C2.2041 6.58781 6.59171 2.2002 12.0041 2.2002C17.4165 2.2002 21.8041 6.5878 21.8041 12.0002C21.8041 17.4126 17.4165 21.8002 12.0041 21.8002H3.0049C2.73745 21.8002 2.4876 21.6665 2.33922 21.444C2.19087 21.2215 2.16356 20.9395 2.26631 20.6926ZM11.9672 9.0502C11.4091 9.0502 10.9382 9.43186 10.8049 9.9496C10.6948 10.3775 10.2587 10.6351 9.83079 10.5249C9.40291 10.4148 9.14532 9.97867 9.25545 9.55079C9.56623 8.3433 10.6614 7.4502 11.9672 7.4502C13.5136 7.4502 14.7672 8.7038 14.7672 10.2502C14.7672 11.1058 14.3536 11.6751 13.8978 12.115C13.7108 12.2955 13.4978 12.4721 13.2997 12.6362C13.2705 12.6604 13.2416 12.6844 13.2132 12.7081C12.982 12.9004 12.7556 13.0932 12.5329 13.3159C12.2205 13.6283 11.7139 13.6283 11.4015 13.3159C11.0891 13.0035 11.0891 12.4969 11.4015 12.1845C11.6788 11.9072 11.9525 11.6756 12.19 11.478C12.2213 11.4519 12.2517 11.4267 12.2812 11.4022C12.4849 11.2332 12.6465 11.0991 12.7866 10.9638C13.0808 10.6799 13.1672 10.4992 13.1672 10.2502C13.1672 9.58745 12.6299 9.0502 11.9672 9.0502ZM11.9772 16.5502H11.9672C11.5254 16.5502 11.1672 16.192 11.1672 15.7502C11.1672 15.3084 11.5254 14.9502 11.9672 14.9502H11.9772C12.419 14.9502 12.7772 15.3084 12.7772 15.7502C12.7772 16.192 12.419 16.5502 11.9772 16.5502Z"
      />
    </svg>
  );
--- a/packages/app/src/components/help-island/index.tsx
+++ b/packages/app/src/components/help-island/index.tsx
@@ -2,85 +2,71 @@ import { useState } from 'react';
 import {
  StyledIsland,
  StyledIconWrapper,
-  StyledIslandWrapper,
-  StyledTransformIcon,
+  StyledAnimateWrapper,
+  StyledTriggerWrapper,
 } from './style';
 import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
-import { MuiGrow } from '@affine/component';
 import { Tooltip } from '@affine/component';
+
 import { useTranslation } from '@affine/i18n';
 import { useModal } from '@/providers/GlobalModalProvider';
-import { useTheme } from '@/providers/ThemeProvider';
-import useCurrentPageMeta from '@/hooks/use-current-page-meta';
+import { MuiFade } from '@affine/component';
 export type IslandItemNames = 'contact' | 'shortcuts';
 export const HelpIsland = ({
  showList = ['contact', 'shortcuts'],
 }: {
  showList?: IslandItemNames[];
 }) => {
-  const [showContent, setShowContent] = useState(false);
-  const { mode } = useTheme();
-  const { mode: editorMode } = useCurrentPageMeta() || {};
+  const [spread, setShowSpread] = useState(false);
  const { triggerShortcutsModal, triggerContactModal } = useModal();
-  const isEdgelessDark = mode === 'dark' && editorMode === 'edgeless';
  const { t } = useTranslation();
  return (
-    <>
-      <StyledIsland
-        className=""
-        onMouseEnter={() => {
-          setShowContent(true);
-        }}
-        onMouseLeave={() => {
-          setShowContent(false);
-        }}
-      >
-        <MuiGrow in={showContent}>
-          <StyledIslandWrapper>
-            {showList.includes('contact') && (
-              <Tooltip content={t('Contact Us')} placement="left-end">
-                <StyledIconWrapper
-                  data-testid="right-bottom-contact-us-icon"
-                  isEdgelessDark={isEdgelessDark}
-                  onClick={() => {
-                    setShowContent(false);
-                    triggerContactModal();
-                  }}
-                >
-                  <ContactIcon />
-                </StyledIconWrapper>
-              </Tooltip>
-            )}
-            {showList.includes('shortcuts') && (
-              <Tooltip content={t('Keyboard Shortcuts')} placement="left-end">
-                <StyledIconWrapper
-                  data-testid="shortcuts-icon"
-                  isEdgelessDark={isEdgelessDark}
-                  onClick={() => {
-                    setShowContent(false);
-                    triggerShortcutsModal();
-                  }}
-                >
-                  <KeyboardIcon />
-                </StyledIconWrapper>
-              </Tooltip>
-            )}
-          </StyledIslandWrapper>
-        </MuiGrow>
+    <StyledIsland
+      spread={spread}
+      onClick={() => {
+        setShowSpread(!spread);
+      }}
+    >
+      <StyledAnimateWrapper spread={spread}>
+        {showList.includes('contact') && (
+          <Tooltip content={t('Contact Us')} placement="left-end">
+            <StyledIconWrapper
+              data-testid="right-bottom-contact-us-icon"
+              onClick={() => {
+                setShowSpread(false);
+                triggerContactModal();
+              }}
+            >
+              <ContactIcon />
+            </StyledIconWrapper>
+          </Tooltip>
+        )}
+        {showList.includes('shortcuts') && (
+          <Tooltip content={t('Keyboard Shortcuts')} placement="left-end">
+            <StyledIconWrapper
+              data-testid="shortcuts-icon"
+              onClick={() => {
+                setShowSpread(false);
+                triggerShortcutsModal();
+              }}
+            >
+              <KeyboardIcon />
+            </StyledIconWrapper>
+          </Tooltip>
+        )}
+      </StyledAnimateWrapper>

-        <div style={{ position: 'relative' }}>
-          <StyledIconWrapper
-            isEdgelessDark={isEdgelessDark}
-            data-testid="faq-icon"
-          >
-            <HelpIcon />
-          </StyledIconWrapper>
-          <StyledTransformIcon in={showContent}>
-            <CloseIcon />
-          </StyledTransformIcon>
-        </div>
-      </StyledIsland>
-    </>
+      <MuiFade in={!spread} data-testid="faq-icon">
+        <StyledTriggerWrapper>
+          <HelpIcon />
+        </StyledTriggerWrapper>
+      </MuiFade>
+      <MuiFade in={spread}>
+        <StyledTriggerWrapper>
+          <CloseIcon />
+        </StyledTriggerWrapper>
+      </MuiFade>
+    </StyledIsland>
  );
 };

--- a/packages/app/src/components/help-island/style.ts
+++ b/packages/app/src/components/help-island/style.ts
@@ -1,71 +1,77 @@
-import { displayFlex, styled } from '@affine/component';
+import { displayFlex, positionAbsolute, styled } from '@affine/component';

-export const StyledIsland = styled('div')(({ theme }) => {
+export const StyledIsland = styled('div')<{
+  spread: boolean;
+}>(({ theme, spread }) => {
  return {
-    width: '32px',
-    height: '32px',
-    color: theme.colors.iconColor,
-    position: 'fixed',
-    right: '30px',
-    bottom: '30px',
-    borderRadius: '50%',
-    zIndex: theme.zIndex.popover,
-  };
-});
-export const StyledTransformIcon = styled('div', {
-  shouldForwardProp: prop => prop !== 'in',
-})<{ in: boolean }>(({ in: isIn, theme }) => ({
-  height: '32px',
-  width: '32px',
-  borderRadius: '50%',
-  position: 'absolute',
-  left: '0',
-  right: '0',
-  bottom: '0',
-  top: '0',
-  margin: 'auto',
-  ...displayFlex('center', 'center'),
-  opacity: isIn ? 1 : 0,
-  backgroundColor: isIn
-    ? theme.colors.hoverBackground
-    : theme.colors.pageBackground,
-}));
-export const StyledIconWrapper = styled('div')<{ isEdgelessDark: boolean }>(
-  ({ theme, isEdgelessDark }) => {
-    return {
-      color: isEdgelessDark
-        ? theme.colors.popoverBackground
-        : theme.colors.iconColor,
-      marginBottom: '24px',
-      ...displayFlex('center', 'center'),
-      cursor: 'pointer',
-      backgroundColor: isEdgelessDark
-        ? 'transparent'
-        : theme.colors.pageBackground,
-      borderRadius: '50%',
-      width: '32px',
-      height: '32px',
-      transition: 'background-color 0.3s',
-      position: 'relative',
-      ':hover': {
-        color: isEdgelessDark
-          ? theme.colors.iconColor
-          : theme.colors.primaryColor,
-        backgroundColor: theme.colors.hoverBackground,
-      },
-    };
-  }
-);
-
-export const StyledIslandWrapper = styled('div')(({ theme }) => {
-  return {
-    position: 'absolute',
-    bottom: '100%',
-    left: '0',
-    width: '100%',
-    color: theme.colors.iconColor,
+    transition: 'box-shadow 0.2s',
+    width: '44px',
+    position: 'relative',
+    boxShadow: spread
+      ? '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06)'
+      : 'unset',
+    padding: '0 4px 44px',
+    borderRadius: '10px',
+    backgroundColor: theme.colors.pageBackground,
    ':hover': {
-      color: theme.colors.popoverColor,
+      boxShadow:
+        '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06)',
+    },
+    '::after': {
+      content: '""',
+      width: '36px',
+      height: '1px',
+      background: spread ? theme.colors.borderColor : 'transparent',
+      ...positionAbsolute({
+        left: 0,
+        right: 0,
+        bottom: '44px',
+      }),
+      margin: 'auto',
+      transition: 'background 0.15s',
+    },
+  };
+});
+export const StyledIconWrapper = styled('div')(({ theme }) => {
+  return {
+    color: theme.colors.iconColor,
+    ...displayFlex('center', 'center'),
+    cursor: 'pointer',
+    backgroundColor: theme.colors.pageBackground,
+    borderRadius: '5px',
+    width: '36px',
+    height: '36px',
+    margin: '4px auto 4px',
+    transition: 'background-color 0.2s',
+    position: 'relative',
+    ':hover': {
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+    },
+  };
+});
+
+export const StyledAnimateWrapper = styled('div', {
+  shouldForwardProp: prop => prop !== 'spread',
+})<{ spread: boolean }>(({ spread }) => ({
+  height: spread ? '88px' : '0',
+  transition: 'height 0.2s cubic-bezier(0, 0, 0.55, 1.6)',
+  overflow: 'hidden',
+}));
+
+export const StyledTriggerWrapper = styled('div')(({ theme }) => {
+  return {
+    width: '36px',
+    height: '36px',
+    cursor: 'pointer',
+    backgroundColor: theme.colors.pageBackground,
+    color: theme.colors.iconColor,
+    borderRadius: '5px',
+    ...displayFlex('center', 'center'),
+    ...positionAbsolute({ left: '4px', bottom: '4px' }),
+    ':hover': {
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
    },
  };
 });
--- a/packages/app/src/components/workspace-layout/index.tsx
+++ b/packages/app/src/components/workspace-layout/index.tsx
@@ -1,7 +1,7 @@
 import HelpIsland from '@/components/help-island';
 import { WorkSpaceSliderBar } from '@/components/workspace-slider-bar';
 import { useRouter } from 'next/router';
-import { StyledPage, StyledWrapper } from './styles';
+import { StyledPage, StyledToolWrapper, StyledWrapper } from './styles';
 import { PropsWithChildren } from 'react';
 import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
 import { PageLoading } from '@/components/loading';
@@ -19,7 +19,14 @@ export const WorkspaceLayout = ({ children }: PropsWithChildren) => {
      <WorkSpaceSliderBar />
      <StyledWrapper>
        {children}
-        <HelpIsland showList={router.query.pageId ? undefined : ['contact']} />
+        <StyledToolWrapper>
+          <div id="toolWrapper" style={{ marginBottom: '12px' }}>
+            {/* Slot for block hub */}
+          </div>
+          <HelpIsland
+            showList={router.query.pageId ? undefined : ['contact']}
+          />
+        </StyledToolWrapper>
      </StyledWrapper>
    </StyledPage>
  );
--- a/packages/app/src/components/workspace-layout/styles.ts
+++ b/packages/app/src/components/workspace-layout/styles.ts
@@ -16,3 +16,12 @@ export const StyledWrapper = styled('div')(() => {
    position: 'relative',
  };
 });
+
+export const StyledToolWrapper = styled('div')(({ theme }) => {
+  return {
+    position: 'fixed',
+    right: '30px',
+    bottom: '30px',
+    zIndex: theme.zIndex.popover,
+  };
+});
--- a/packages/app/src/pages/temporary.css
+++ b/packages/app/src/pages/temporary.css
@@ -6,3 +6,10 @@
 .affine-default-page-block-container {
  width: 686px !important;
 }
+
+affine-block-hub {
+  position: unset !important;
+}
+.block-hub-menu-container {
+  position: unset !important;
+}
--- a/packages/component/package.json
+++ b/packages/component/package.json
@@ -8,7 +8,7 @@
  },
  "dependencies": {
    "@affine/i18n": "workspace:*",
-    "@blocksuite/editor": "0.4.0-alpha.2",
+    "@blocksuite/editor": "0.4.0-alpha.3",
    "@blocksuite/icons": "^2.0.2",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
--- a/packages/component/src/ui/mui.ts
+++ b/packages/component/src/ui/mui.ts
@@ -3,5 +3,6 @@ import MuiCollapse from '@mui/material/Collapse';
 import MuiSlide from '@mui/material/Slide';
 import MuiAvatar from '@mui/material/Avatar';
 import MuiGrow from '@mui/material/Grow';
+import MuiFade from '@mui/material/Fade';

-export { MuiBreadcrumbs, MuiCollapse, MuiSlide, MuiAvatar, MuiGrow };
+export { MuiBreadcrumbs, MuiCollapse, MuiSlide, MuiAvatar, MuiGrow, MuiFade };
--- a/packages/data-center/package.json
+++ b/packages/data-center/package.json
@@ -27,8 +27,8 @@
    "yjs": "^13.5.45"
  },
  "dependencies": {
-    "@blocksuite/blocks": "0.4.0-alpha.2",
-    "@blocksuite/store": "0.4.0-alpha.2",
+    "@blocksuite/blocks": "0.4.0-alpha.3",
+    "@blocksuite/store": "0.4.0-alpha.3",
    "debug": "^4.3.4",
    "encoding": "^0.1.13",
    "firebase": "^9.15.0",