fix: the client removed the data problem caused by iconContent (#32)

qinluhe · web-flow · commit 3317454f14ac · 2025-01-21T14:18:12.000+08:00
diff --git a/src/components/_shared/view-icon/PageIcon.tsx b/src/components/_shared/view-icon/PageIcon.tsx
@@ -1,15 +1,15 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { ViewIcon, ViewIconType, ViewLayout } from '@/application/types';
 import { ReactComponent as BoardSvg } from '@/assets/board.svg';
 import { ReactComponent as CalendarSvg } from '@/assets/calendar.svg';
 import { ReactComponent as DocumentSvg } from '@/assets/document.svg';
 import { ReactComponent as GridSvg } from '@/assets/grid.svg';
 import { ReactComponent as ChatSvg } from '@/assets/chat_ai.svg';
-import { isFlagEmoji } from '@/utils/emoji';
+import { getIcon, isFlagEmoji } from '@/utils/emoji';
 import DOMPurify from 'dompurify';
 import { renderColor } from '@/utils/color';
 
-function PageIcon ({
+function PageIcon({
   view,
   className,
   iconSize,
@@ -21,9 +21,10 @@ function PageIcon ({
   className?: string;
   iconSize?: number;
 }) {
+  const [iconContent, setIconContent] = React.useState<string | undefined>(undefined);
 
   const emoji = useMemo(() => {
-    if (view.icon && view.icon.ty === ViewIconType.Emoji && view.icon.value) {
+    if(view.icon && view.icon.ty === ViewIconType.Emoji && view.icon.value) {
       return view.icon.value;
     }
 
@@ -34,10 +35,26 @@ function PageIcon ({
     return emoji ? isFlagEmoji(emoji) : false;
   }, [emoji]);
 
+  useEffect(() => {
+    if(view.icon && view.icon.ty === ViewIconType.Icon && view.icon.value) {
+      try {
+        const json = JSON.parse(view.icon.value);
+        const id = `${json.groupName}/${json.iconName}`;
+
+        void getIcon(id).then((item) => {
+          setIconContent(item?.content.replaceAll('black', renderColor(json.color)).replace('<svg', '<svg width="100%" height="100%"'));
+        });
+      } catch(e) {
+        console.error(e, view.icon);
+      }
+    } else {
+      setIconContent(undefined);
+    }
+  }, [view.icon]);
+
   const icon = useMemo(() => {
-    if (view.icon && view.icon.ty === ViewIconType.Icon && view.icon.value) {
-      const json = JSON.parse(view.icon.value);
-      const cleanSvg = DOMPurify.sanitize(json.iconContent.replaceAll('black', renderColor(json.color)).replace('<svg', '<svg width="100%" height="100%"'), {
+    if(iconContent) {
+      const cleanSvg = DOMPurify.sanitize(iconContent, {
         USE_PROFILES: { svg: true, svgFilters: true },
       });
 
@@ -52,19 +69,19 @@ function PageIcon ({
         }}
       />;
     }
-  }, [view.icon, iconSize, className]);
+  }, [iconContent, iconSize, className]);
 
-  if (emoji) {
+  if(emoji) {
     return <>
       <span className={`${isFlag ? 'icon' : ''} ${className || ''}`}>{emoji}</span>
     </>;
   }
 
-  if (icon) {
+  if(icon) {
     return icon;
   }
 
-  switch (view.layout) {
+  switch(view.layout) {
     case ViewLayout.AIChat:
       return <ChatSvg className={className} />;
     case ViewLayout.Grid:
diff --git a/src/components/app/outline/ViewItem.tsx b/src/components/app/outline/ViewItem.tsx
@@ -21,7 +21,7 @@ const popoverProps: Origins = {
   },
 };
 
-function ViewItem ({ view, width, level = 0, renderExtra, expandIds, toggleExpand, onClickView }: {
+function ViewItem({ view, width, level = 0, renderExtra, expandIds, toggleExpand, onClickView }: {
   view: View;
   width: number;
   level?: number;
@@ -58,7 +58,7 @@ function ViewItem ({ view, width, level = 0, renderExtra, expandIds, toggleExpan
   }, [isExpanded, level, toggleExpand, viewId]);
 
   const renderItem = useMemo(() => {
-    if (!view) return null;
+    if(!view) return null;
     const { layout } = view;
 
     return (
@@ -71,7 +71,7 @@ function ViewItem ({ view, width, level = 0, renderExtra, expandIds, toggleExpan
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
         onClick={() => {
-          if (layout === ViewLayout.AIChat) return;
+          if(layout === ViewLayout.AIChat) return;
           onClickView?.(viewId);
         }}
         className={
@@ -129,7 +129,7 @@ function ViewItem ({ view, width, level = 0, renderExtra, expandIds, toggleExpan
     }</div>;
   }, [toggleExpand, onClickView, isExpanded, expandIds, level, renderExtra, view?.children, width]);
 
-  const handleChangeIcon = useCallback(async (icon: { ty: ViewIconType, value: string }) => {
+  const handleChangeIcon = useCallback(async(icon: { ty: ViewIconType, value: string }) => {
 
     try {
       await updatePage?.(view.view_id, {
@@ -140,7 +140,7 @@ function ViewItem ({ view, width, level = 0, renderExtra, expandIds, toggleExpan
       setIconPopoverAnchorEl(null);
 
       // eslint-disable-next-line
-    } catch (e: any) {
+    } catch(e: any) {
       notify.error(e);
     }
   }, [updatePage, view.extra, view.name, view.view_id]);
@@ -169,14 +169,13 @@ function ViewItem ({ view, width, level = 0, renderExtra, expandIds, toggleExpan
           }}
           popoverProps={popoverProps}
           onSelectIcon={(icon) => {
-            if (icon.ty === ViewIconType.Icon) {
+            if(icon.ty === ViewIconType.Icon) {
               void handleChangeIcon({
                 ty: ViewIconType.Icon,
                 value: JSON.stringify({
                   color: icon.color,
                   groupName: icon.value.split('/')[0],
                   iconName: icon.value.split('/')[1],
-                  iconContent: icon.content,
                 }),
               });
               return;
diff --git a/src/components/editor/components/blocks/callout/CalloutIcon.tsx b/src/components/editor/components/blocks/callout/CalloutIcon.tsx
@@ -4,17 +4,18 @@ import { ViewIconType } from '@/application/types';
 import ChangeIconPopover from '@/components/_shared/view-icon/ChangeIconPopover';
 import { CalloutNode } from '@/components/editor/editor.type';
 import { renderColor } from '@/utils/color';
-import { isFlagEmoji } from '@/utils/emoji';
+import { getIcon, isFlagEmoji } from '@/utils/emoji';
 import DOMPurify from 'dompurify';
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useReadOnly, useSlateStatic } from 'slate-react';
 import { Element } from 'slate';
 
-function CalloutIcon ({ block: node }: { block: CalloutNode; className: string }) {
+function CalloutIcon({ block: node }: { block: CalloutNode; className: string }) {
   const ref = useRef<HTMLButtonElement>(null);
   const editor = useSlateStatic();
   const readOnly = useReadOnly() || editor.isElementReadOnly(node as unknown as Element);
   const blockId = node.blockId;
+  const [iconContent, setIconContent] = React.useState<string | undefined>(undefined);
 
   const [open, setOpen] = React.useState(false);
   const handleChangeIcon = useCallback((icon: {
@@ -28,12 +29,11 @@ function CalloutIcon ({ block: node }: { block: CalloutNode; className: string }
     const iconType = icon.ty === ViewIconType.Icon ? 'icon' : 'emoji';
     let value;
 
-    if (icon.ty === ViewIconType.Icon) {
+    if(icon.ty === ViewIconType.Icon) {
       value = JSON.stringify({
         color: icon.color,
         groupName: icon.value.split('/')[0],
         iconName: icon.value.split('/')[1],
-        iconContent: icon.content,
       });
 
     } else {
@@ -51,7 +51,7 @@ function CalloutIcon ({ block: node }: { block: CalloutNode; className: string }
   const data = node.data;
 
   const emoji = useMemo(() => {
-    if (data.icon && data.icon_type !== 'icon') {
+    if(data.icon && data.icon_type !== 'icon') {
       return data.icon;
     }
 
@@ -62,10 +62,25 @@ function CalloutIcon ({ block: node }: { block: CalloutNode; className: string }
     return emoji ? isFlagEmoji(emoji) : false;
   }, [emoji]);
 
+  useEffect(() => {
+    if(data.icon && data.icon_type === 'icon') {
+      try {
+        const json = JSON.parse(data.icon);
+        const id = `${json.groupName}/${json.iconName}`;
+
+        void getIcon(id).then((item) => {
+          setIconContent(item?.content.replaceAll('black', renderColor(json.color)).replace('<svg', '<svg width="100%" height="100%"'));
+        });
+      } catch(e) {
+        console.error(e, data.icon);
+      }
+    } else {
+      setIconContent(undefined);
+    }
+  }, [data.icon, data.icon_type]);
   const icon = useMemo(() => {
-    if (data.icon && data.icon_type === 'icon') {
-      const json = JSON.parse(data.icon);
-      const cleanSvg = DOMPurify.sanitize(json.iconContent.replaceAll('black', renderColor(json.color)).replace('<svg', '<svg width="100%" height="100%"'), {
+    if(iconContent) {
+      const cleanSvg = DOMPurify.sanitize(iconContent, {
         USE_PROFILES: { svg: true, svgFilters: true },
       });
 
@@ -78,16 +93,17 @@ function CalloutIcon ({ block: node }: { block: CalloutNode; className: string }
           __html: cleanSvg,
         }}
       />;
+
     }
 
     return null;
-  }, [data.icon, data.icon_type]);
+  }, [iconContent]);
 
   return (
     <>
       <span
         onClick={() => {
-          if (readOnly) return;
+          if(readOnly) return;
           setOpen(true);
         }}
         data-testid="callout-icon-button"
diff --git a/src/components/view-meta/AddIconCover.tsx b/src/components/view-meta/AddIconCover.tsx
@@ -42,13 +42,13 @@ function AddIconCover({
           onClick={e => {
             setIconAnchorEl(e.currentTarget);
           }}
-          startIcon={<AddIcon/>}
+          startIcon={<AddIcon />}
         >{t('document.plugins.cover.addIcon')}</Button>}
         {!hasCover && <Button
           size={'small'}
           color={'inherit'}
           onClick={onAddCover}
-          startIcon={<AddCover/>}
+          startIcon={<AddCover />}
         >{t('document.plugins.cover.addCover')}</Button>}
 
       </div>
@@ -62,14 +62,13 @@ function AddIconCover({
         iconEnabled={true}
         onSelectIcon={(icon) => {
           setIconAnchorEl(null);
-          if (icon.ty === ViewIconType.Icon) {
+          if(icon.ty === ViewIconType.Icon) {
             onUpdateIcon?.({
               ty: ViewIconType.Icon,
               value: JSON.stringify({
                 color: icon.color,
                 groupName: icon.value.split('/')[0],
                 iconName: icon.value.split('/')[1],
-                iconContent: icon.content,
               }),
             });
             return;
