From 14cc3a56bf2fa1df4edefc1abbce5bd3c07a5852 Mon Sep 17 00:00:00 2001
From: Fangdun Tsai <fundon@pindash.io>
Date: Thu, 26 Dec 2024 12:10:57 +0800
Subject: [PATCH] fix(component): fix lit portal not re-rendering in inline
 links case

---
 .../src/lit-react/lit-portal/lite-portal.tsx  | 25 ++++++++++---------
 .../bi-directional-link-panel.tsx             |  2 +-
 .../block-suite-editor/lit-adaper.tsx         |  2 +-
 .../specs/custom/spec-patchers.tsx            |  8 ++++--
 4 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/component/src/lit-react/lit-portal/lite-portal.tsx b/packages/frontend/component/src/lit-react/lit-portal/lite-portal.tsx
index 1f7249355c801..bcf68db34c4ad 100644
--- a/packages/frontend/component/src/lit-react/lit-portal/lite-portal.tsx
+++ b/packages/frontend/component/src/lit-react/lit-portal/lite-portal.tsx
@@ -13,10 +13,9 @@ type PortalEvent = {
 type PortalListener = (event: PortalEvent) => void;
 
 export function createLitPortalAnchor(callback: (event: PortalEvent) => void) {
-  const id = nanoid();
   return html`<lit-react-portal
     .notify=${callback}
-    portalId=${id}
+    portalId=${nanoid()}
   ></lit-react-portal>`;
 }
 
@@ -119,24 +118,26 @@ export const useLitPortalFactory = () => {
           }
 
           const prevId = event.previousPortalId;
-          // Ignore first `willUpdate`
-          if (!prevId) {
-            return;
-          }
 
-          // No re-rendering allowed
-          // Used in `pdf embed view` scenario
-          if (!rerendering) {
+          // Ignores first `willUpdate`
+          if (!prevId) {
             return;
           }
 
           setPortals(portals => {
             const portal = portals.find(p => p.id === prevId);
-            if (!portal) return portals;
+            if (!portal) return [...portals];
 
+            // Updates `ID`
             portal.id = id;
-            portal.portal.key = id;
-            portal.portal.children = element;
+
+            // Re-rendering
+            //  true: `inline link`
+            //  false: `pdf embed view`
+            if (rerendering) {
+              portal.portal = ReactDOM.createPortal(element, target, id);
+            }
+
             return [...portals];
           });
         });
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.tsx
index 9225fa6fac65f..e45e5b7875dd1 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.tsx
@@ -357,7 +357,7 @@ export const BiDirectionalLinkPanel = () => {
       {
         <>
           {portals.map(p => (
-            <Fragment key={p.id}>{p.portal}</Fragment>
+            <Fragment key={p.portal.key}>{p.portal}</Fragment>
           ))}
         </>
       }
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 0da7345fdfd93..f9fd1acff59fc 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
@@ -194,7 +194,7 @@ const usePatchSpecs = (shared: boolean, mode: DocMode) => {
       () => (
         <>
           {portals.map(p => (
-            <Fragment key={p.id}>{p.portal}</Fragment>
+            <Fragment key={p.portal.key}>{p.portal}</Fragment>
           ))}
         </>
       ),
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx
index 0b2af7822ce54..26798f5275234 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx
@@ -604,7 +604,10 @@ export function patchForMobile() {
 }
 
 export function patchForAttachmentEmbedViews(
-  reactToLit: (element: ElementOrFactory) => TemplateResult
+  reactToLit: (
+    element: ElementOrFactory,
+    rerendering?: boolean
+  ) => TemplateResult
 ): ExtensionType {
   return {
     setup: di => {
@@ -626,7 +629,8 @@ export function patchForAttachmentEmbedViews(
           reactToLit(
             <AttachmentPreviewErrorBoundary key={model.id}>
               <PDFViewerEmbedded {...buildAttachmentProps(model)} />
-            </AttachmentPreviewErrorBoundary>
+            </AttachmentPreviewErrorBoundary>,
+            false
           ),
       }));
     },