From 9038592715c24be5f23bad1764beb3145dc0ff3c Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Tue, 10 Sep 2024 15:33:52 +0000
Subject: [PATCH] fix(core): disable append paragraph in shared page editor
 (#8191)

Disable append paragraph function for readonly or shared page editor.

### Before

![CleanShot 2024-09-10 at 22.26.04@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/3ab206a2-8e30-4212-9d5d-3073ec489644.png)
---
 .../blocksuite-editor-container.tsx           |  3 +-
 .../block-suite-editor/lit-adaper.tsx         |  6 ++-
 tests/affine-cloud/e2e/share-page.spec.ts     | 48 +++++++++++++++++++
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx
index 348ac8ba0a..64efa78a9c 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx
@@ -164,11 +164,12 @@ export const BlocksuiteEditorContainer = forwardRef<
   ]);
 
   const handleClickPageModeBlank = useCallback(() => {
+    if (shared || page.readonly) return;
     affineEditorContainerProxy.host?.std.command.exec(
       'appendParagraph' as never,
       {}
     );
-  }, [affineEditorContainerProxy]);
+  }, [affineEditorContainerProxy, page, shared]);
 
   return (
     <div
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
index 9044feabce..f10b2f5d52 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
@@ -223,7 +223,11 @@ export const BlocksuiteDocEditor = forwardRef<
           specs={specs}
           hasViewport={false}
         />
-        <div className={styles.docEditorGap} onClick={onClickBlank}></div>
+        <div
+          className={styles.docEditorGap}
+          data-testid="page-editor-blank"
+          onClick={onClickBlank}
+        ></div>
         {!shared && displayBiDirectionalLink ? (
           <BiDirectionalLinkPanel />
         ) : null}
diff --git a/tests/affine-cloud/e2e/share-page.spec.ts b/tests/affine-cloud/e2e/share-page.spec.ts
index 63c3ba6520..87a22ca91e 100644
--- a/tests/affine-cloud/e2e/share-page.spec.ts
+++ b/tests/affine-cloud/e2e/share-page.spec.ts
@@ -120,6 +120,54 @@ test('share page should have toc', async ({ page, browser }) => {
   }
 });
 
+test('append paragraph should be disabled in shared mode', async ({
+  page,
+  browser,
+}) => {
+  await page.reload();
+  await waitForEditorLoad(page);
+  await createLocalWorkspace(
+    {
+      name: 'test',
+    },
+    page
+  );
+  await enableCloudWorkspaceFromShareButton(page);
+  const title = getBlockSuiteEditorTitle(page);
+  await title.pressSequentially('TEST TITLE', {
+    delay: 50,
+  });
+
+  // enable share page and copy page link
+  await enableShare(page);
+  await page.getByTestId('share-menu-copy-link-button').click();
+  await page.getByTestId('share-link-menu-copy-page').click();
+
+  {
+    const context = await browser.newContext();
+    await skipOnboarding(context);
+    const url: string = await page.evaluate(() =>
+      navigator.clipboard.readText()
+    );
+    const page2 = await context.newPage();
+    await page2.goto(url);
+    await waitForEditorLoad(page2);
+
+    const paragraph = page2.locator('affine-paragraph');
+    const numParagraphs = await paragraph.count();
+
+    let error = null;
+    try {
+      await page2.locator('[data-testid=page-editor-blank]').click();
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeNull();
+
+    expect(await paragraph.count()).toBe(numParagraphs);
+  }
+});
+
 test('share page with default edgeless', async ({ page, browser }) => {
   await page.reload();
   await waitForEditorLoad(page);