feat: publish local workspace (#1406)

apps/web/src/components/affine/enable-affine-cloud-modal/index.tsx

@@ -4,11 +4,9 @@ import { CloseIcon } from '@blocksuite/icons';
 import React from 'react';
 
 import { useCurrentUser } from '../../../hooks/current/use-current-user';
-import { AffineWorkspace } from '../../../shared';
 import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
 
 interface EnableAffineCloudModalProps {
-  workspace: AffineWorkspace;
   open: boolean;
   onConfirm: () => void;
   onClose: () => void;

apps/web/src/components/affine/workspace-setting-detail/panel/publish/index.tsx

@@ -7,24 +7,27 @@ import {
   Wrapper,
 } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
+import { Box } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { lockMutex } from '../../../../../atoms';
 import { useToggleWorkspacePublish } from '../../../../../hooks/affine/use-toggle-workspace-publish';
+import { transformWorkspace } from '../../../../../plugins';
 import {
   AffineOfficialWorkspace,
   AffineWorkspace,
   LocalWorkspace,
   RemWorkspaceFlavour,
 } from '../../../../../shared';
+import { apis } from '../../../../../shared/apis';
 import { Unreachable } from '../../../affine-error-eoundary';
 import { EnableAffineCloudModal } from '../../../enable-affine-cloud-modal';
+import { WorkspaceSettingDetailProps } from '../../index';
 
-export type PublishPanelProps = {
+export type PublishPanelProps = WorkspaceSettingDetailProps & {
   workspace: AffineOfficialWorkspace;
 };
 
-export type PublishPanelAffineProps = {
+export type PublishPanelAffineProps = WorkspaceSettingDetailProps & {
   workspace: AffineWorkspace;
 };
 
@@ -70,9 +73,7 @@ const PublishPanelAffine: React.FC<PublishPanelAffineProps> = ({
         </FlexWrapper>
         <Button
           onClick={async () => {
-            lockMutex(async () => {
+            await publishWorkspace(false);
-              return publishWorkspace(false);
-            });
           }}
           loading={false}
           type="danger"
@@ -97,51 +98,76 @@ const PublishPanelAffine: React.FC<PublishPanelAffineProps> = ({
         {t('Publish to web')}
       </Button>
       <EnableAffineCloudModal
-        workspace={workspace}
         open={open}
         onClose={() => {
           setOpen(false);
         }}
-        onConfirm={() => {
+        onConfirm={async () => {
-          lockMutex(async () => {
+          await publishWorkspace(true);
-            return publishWorkspace(true);
+          setOpen(false);
-          }).then(() => {
-            setOpen(false);
-          });
         }}
       />
     </>
   );
 };
 
-export type PublishPanelLocalProps = {
+export type PublishPanelLocalProps = WorkspaceSettingDetailProps & {
   workspace: LocalWorkspace;
 };
 
-const PublishPanelLocal: React.FC<PublishPanelLocalProps> = ({ workspace }) => {
+const PublishPanelLocal: React.FC<PublishPanelLocalProps> = ({
+  workspace,
+  onTransferWorkspace,
+}) => {
   const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
   return (
     <>
-      <Wrapper marginBottom="42px">{t('Publishing')}</Wrapper>
+      <Box
+        sx={{
+          marginBottom: '42px',
+        }}
+      >
+        {t('Publishing')}
+      </Box>
       <Button
         type="light"
         shape="circle"
-        onClick={async () => {
+        onClick={() => {
-          // fixme: regression
+          setOpen(true);
-          toast('You need to enable AFFiNE Cloud to use this feature.');
         }}
       >
         {t('Enable AFFiNE Cloud')}
       </Button>
+      <EnableAffineCloudModal
+        open={open}
+        onClose={() => {
+          setOpen(false);
+        }}
+        onConfirm={async () => {
+          const id = await transformWorkspace(
+            RemWorkspaceFlavour.LOCAL,
+            RemWorkspaceFlavour.AFFINE,
+            workspace
+          );
+          await apis.updateWorkspace({
+            id,
+            public: true,
+          });
+          // fixme: there imply that reload the whole page
+          onTransferWorkspace(id);
+          setOpen(false);
+        }}
+      />
     </>
   );
 };
 
-export const PublishPanel: React.FC<PublishPanelProps> = ({ workspace }) => {
+export const PublishPanel: React.FC<PublishPanelProps> = props => {
-  if (workspace.flavour === RemWorkspaceFlavour.AFFINE) {
+  if (props.workspace.flavour === RemWorkspaceFlavour.AFFINE) {
-    return <PublishPanelAffine workspace={workspace} />;
+    return <PublishPanelAffine {...props} workspace={props.workspace} />;
-  } else if (workspace.flavour === RemWorkspaceFlavour.LOCAL) {
+  } else if (props.workspace.flavour === RemWorkspaceFlavour.LOCAL) {
-    return <PublishPanelLocal workspace={workspace} />;
+    return <PublishPanelLocal {...props} workspace={props.workspace} />;
   }
   throw new Unreachable();
 };

apps/web/src/components/blocksuite/block-suite-editor/index.tsx

@@ -1,3 +1,5 @@
+import '@blocksuite/editor/themes/affine.css';
+
 import { config } from '@affine/env';
 import { BlockHub } from '@blocksuite/blocks';
 import { EditorContainer } from '@blocksuite/editor';

apps/web/src/pages/_app.tsx

@@ -1,4 +1,3 @@
-import '@blocksuite/editor/themes/affine.css';
 import '../styles/globals.css';
 
 import { config, setupGlobal } from '@affine/env';

apps/web/src/pages/workspace/[workspaceId]/setting.tsx

@@ -102,8 +102,9 @@ const SettingPage: NextPageWithLayout = () => {
     (targetWorkspaceId: string) => {
       router
         .replace({
-          pathname: `/workspace/[workspaceId]/all`,
+          pathname: `/workspace/[workspaceId]/setting`,
           query: {
+            ...router.query,
             workspaceId: targetWorkspaceId,
           },
         })

apps/web/src/providers/ThemeProvider.tsx

@@ -20,7 +20,14 @@ const ThemeInjector = React.memo<{
   return (
     <GlobalStyles
       styles={{
-        '#__next': globalThemeVariables(themeStyle) as any,
+        '#__next': {
+          ...globalThemeVariables(themeStyle),
+        },
+        html: {
+          fontFamily: themeStyle.font.family,
+          fontSize: themeStyle.font.base,
+          lineHeight: themeStyle.font.lineHeight,
+        },
       }}
     />
   );

apps/web/src/styles/globals.css

@@ -149,7 +149,6 @@ legend {
   border: 0;
   font-size: var(--affine-font-base);
   line-height: var(--affine-line-height);
-  color: var(--affine-text-color);
   font-family: var(--affine-font-family);
 }
 body {