feat(core): add private anchor link for sharing (#6966)

close AFF-1085
2026-07-14 08:36:22 +08:00 · 2024-05-16 13:35:01 +00:00
parent 3799b65f73
commit 10015c59b7
9 changed files with 162 additions and 41 deletions
@@ -142,3 +142,8 @@ export const journalShareButton = style({
  height: 32,
  padding: '0px 8px',
 });
+export const shortcutStyle = style({
+  fontSize: cssVar('fontXs'),
+  color: cssVar('textSecondaryColor'),
+  fontWeight: 400,
+});
@@ -1,15 +1,15 @@
-import { Button } from '@affine/component/ui/button';
+import { MenuIcon, MenuItem } from '@affine/component';
 import { Divider } from '@affine/component/ui/divider';
 import { ExportMenuItems } from '@affine/core/components/page-list';
+import { useExportPage } from '@affine/core/hooks/affine/use-export-page';
+import { useSharingUrl } from '@affine/core/hooks/affine/use-share-url';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { LinkIcon } from '@blocksuite/icons';
+import { CopyIcon } from '@blocksuite/icons';
 import { DocService, useLiveData, useService } from '@toeverything/infra';

-import { useExportPage } from '../../../../hooks/affine/use-export-page';
 import * as styles from './index.css';
 import type { ShareMenuProps } from './share-menu';
-import { useSharingUrl } from './use-share-url';

 export const ShareExport = ({
  workspaceMetadata: workspace,
@@ -26,6 +26,7 @@ export const ShareExport = ({
  });
  const exportHandler = useExportPage(currentPage);
  const currentMode = useLiveData(doc.mode$);
+  const isMac = environment.isBrowser && environment.isMacOs;

  return (
    <>
@@ -52,15 +53,24 @@ export const ShareExport = ({
            {t['com.affine.share-menu.share-privately.description']()}
          </div>
          <div>
-            <Button
+            <MenuItem
              className={styles.shareLinkStyle}
-              onClick={onClickCopyLink}
-              icon={<LinkIcon />}
-              type="plain"
+              onSelect={onClickCopyLink}
+              block
              disabled={!sharingUrl}
+              preFix={
+                <MenuIcon>
+                  <CopyIcon fontSize={16} />
+                </MenuIcon>
+              }
+              endFix={
+                <div className={styles.shortcutStyle}>
+                  {isMac ? '⌘ + ⌥ + C' : 'Ctrl + Shift + C'}
+                </div>
+              }
            >
              {t['com.affine.share-menu.copy-private-link']()}
-            </Button>
+            </MenuItem>
          </div>
        </div>
      ) : null}
@@ -1,6 +1,8 @@
 import { Button } from '@affine/component/ui/button';
 import { Divider } from '@affine/component/ui/divider';
 import { Menu } from '@affine/component/ui/menu';
+import { useRegisterCopyLinkCommands } from '@affine/core/hooks/affine/use-register-copy-link-commands';
+import { useIsActiveView } from '@affine/core/modules/workbench';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { WebIcon } from '@blocksuite/icons';
@@ -65,6 +67,13 @@ const LocalShareMenu = (props: ShareMenuProps) => {
 const CloudShareMenu = (props: ShareMenuProps) => {
  const t = useAFFiNEI18N();

+  // only enable copy link commands when the view is active and the workspace is cloud
+  const isActiveView = useIsActiveView();
+  useRegisterCopyLinkCommands({
+    workspaceId: props.workspaceMetadata.id,
+    docId: props.currentPage.id,
+    isActiveView,
+  });
  return (
    <Menu
      items={<ShareMenuContent {...props} />}
@@ -9,7 +9,9 @@ import {
 import { PublicLinkDisableModal } from '@affine/component/disable-public-link';
 import { Button } from '@affine/component/ui/button';
 import { Menu, MenuItem, MenuTrigger } from '@affine/component/ui/menu';
+import { useSharingUrl } from '@affine/core/hooks/affine/use-share-url';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { ServerConfigService } from '@affine/core/modules/cloud';
 import { ShareService } from '@affine/core/modules/share-doc';
 import { mixpanel } from '@affine/core/utils';
 import { WorkspaceFlavour } from '@affine/env/workspace';
@@ -29,11 +31,9 @@ import { cssVar } from '@toeverything/theme';
 import { Suspense, useEffect, useMemo, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';

-import { ServerConfigService } from '../../../../modules/cloud';
 import { CloudSvg } from '../cloud-svg';
 import * as styles from './index.css';
 import type { ShareMenuProps } from './share-menu';
-import { useSharingUrl } from './use-share-url';

 export const LocalSharePage = (props: ShareMenuProps) => {
  const t = useAFFiNEI18N();
@@ -1,69 +0,0 @@
-import { toast } from '@affine/component';
-import { getAffineCloudBaseUrl } from '@affine/core/modules/cloud/services/fetch';
-import { mixpanel } from '@affine/core/utils';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useCallback, useMemo } from 'react';
-
-type UrlType = 'share' | 'workspace';
-
-type UseSharingUrl = {
-  workspaceId: string;
-  pageId: string;
-  urlType: UrlType;
-};
-
-const useGenerateUrl = ({ workspaceId, pageId, urlType }: UseSharingUrl) => {
-  // to generate a private url like https://app.affine.app/workspace/123/456
-  // to generate a public url like https://app.affine.app/share/123/456
-  // or https://app.affine.app/share/123/456?mode=edgeless
-
-  const baseUrl = getAffineCloudBaseUrl();
-
-  const url = useMemo(() => {
-    // baseUrl is null when running in electron and without network
-    if (!baseUrl) return null;
-
-    try {
-      return new URL(
-        `${baseUrl}/${urlType}/${workspaceId}/${pageId}`
-      ).toString();
-    } catch (e) {
-      return null;
-    }
-  }, [baseUrl, pageId, urlType, workspaceId]);
-
-  return url;
-};
-
-export const useSharingUrl = ({
-  workspaceId,
-  pageId,
-  urlType,
-}: UseSharingUrl) => {
-  const t = useAFFiNEI18N();
-  const sharingUrl = useGenerateUrl({ workspaceId, pageId, urlType });
-
-  const onClickCopyLink = useCallback(() => {
-    if (sharingUrl) {
-      navigator.clipboard
-        .writeText(sharingUrl)
-        .then(() => {
-          toast(t['Copied link to clipboard']());
-        })
-        .catch(err => {
-          console.error(err);
-        });
-      mixpanel.track('ShareLinkCopied', {
-        module: urlType === 'share' ? 'public share' : 'private share',
-        type: 'link',
-      });
-    } else {
-      toast('Network not available');
-    }
-  }, [sharingUrl, t, urlType]);
-
-  return {
-    sharingUrl,
-    onClickCopyLink,
-  };
-};
@@ -1,4 +1,5 @@
 import type { BlockElement } from '@blocksuite/block-std';
+import type { Disposable } from '@blocksuite/global/utils';
 import type {
  AffineEditorContainer,
  EdgelessEditor,
@@ -101,6 +102,7 @@ export const BlocksuiteEditorContainer = forwardRef<
  { page, mode, className, style, defaultSelectedBlockId, customRenderers },
  ref
 ) {
+  const [scrolled, setScrolled] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);
  const docRef = useRef<PageEditor>(null);
  const edgelessRef = useRef<EdgelessEditor>(null);
@@ -208,27 +210,61 @@ export const BlocksuiteEditorContainer = forwardRef<
  const blockElement = useBlockElementById(rootRef, defaultSelectedBlockId);

  useEffect(() => {
-    if (blockElement) {
-      affineEditorContainerProxy.updateComplete
-        .then(() => {
-          if (mode === 'page') {
-            blockElement.scrollIntoView({
-              behavior: 'smooth',
-              block: 'center',
-            });
-          }
-          const selectManager = affineEditorContainerProxy.host?.selection;
-          if (!blockElement.path.length || !selectManager) {
-            return;
-          }
-          const newSelection = selectManager.create('block', {
-            path: blockElement.path,
-          });
-          selectManager.set([newSelection]);
-        })
-        .catch(console.error);
-    }
-  }, [blockElement, affineEditorContainerProxy, mode]);
+    let disposable: Disposable | undefined = undefined;
+
+    // update the hash when the block is selected
+    const handleUpdateComplete = () => {
+      const selectManager = affineEditorContainerProxy?.host?.selection;
+      if (!selectManager) return;
+
+      disposable = selectManager.slots.changed.on(() => {
+        const selectedBlock = selectManager.find('block');
+        const selectedId = selectedBlock?.blockId;
+
+        const newHash = selectedId ? `#${selectedId}` : '';
+        //TODO: use activeView.history which is in workbench instead of history.replaceState
+        history.replaceState(null, '', `${window.location.pathname}${newHash}`);
+
+        // Dispatch a custom event to notify the hash change
+        const hashChangeEvent = new CustomEvent('hashchange-custom', {
+          detail: { hash: newHash },
+        });
+        window.dispatchEvent(hashChangeEvent);
+      });
+    };
+
+    // scroll to the block element when the block id is provided and the page is first loaded
+    const handleScrollToBlock = (blockElement: BlockElement) => {
+      if (mode === 'page') {
+        blockElement.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+        });
+      }
+      const selectManager = affineEditorContainerProxy.host?.selection;
+      if (!blockElement.path.length || !selectManager) {
+        return;
+      }
+      const newSelection = selectManager.create('block', {
+        path: blockElement.path,
+      });
+      selectManager.set([newSelection]);
+      setScrolled(true);
+    };
+
+    affineEditorContainerProxy.updateComplete
+      .then(() => {
+        if (blockElement && !scrolled) {
+          handleScrollToBlock(blockElement);
+        }
+        handleUpdateComplete();
+      })
+      .catch(console.error);
+
+    return () => {
+      disposable?.dispose();
+    };
+  }, [blockElement, affineEditorContainerProxy, mode, scrolled]);

  return (
    <div