feat(QuoteBlock): assets do not unregister on switch off (#975)

* feat(QuoteBlock): assets do not unregister on switch off * fix review
Frontify · Dec 5, 2024 · 609001d · 609001d
1 parent 538cdba
commit 609001d
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 23 deletions.
diff --git a/packages/quote-block/src/CustomIcon.tsx b/packages/quote-block/src/CustomIcon.tsx
@@ -1,11 +1,9 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { useBlockAssets } from '@frontify/app-bridge';
 import { type CustomIconProps } from './types';
 
-export const CustomIcon = ({ style, customIconId, appBridge }: CustomIconProps) => {
-    const { blockAssets } = useBlockAssets(appBridge);
-    const customIconUrl = blockAssets?.[customIconId]?.[0]?.genericUrl;
+export const CustomIcon = ({ style, customIcon }: CustomIconProps) => {
+    const customIconUrl = customIcon?.genericUrl;
 
     return customIconUrl ? <img style={style} alt="Quote Icon" src={customIconUrl} /> : null;
 };
diff --git a/packages/quote-block/src/QuoteBlock.tsx b/packages/quote-block/src/QuoteBlock.tsx
@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { useBlockSettings, useEditorState } from '@frontify/app-bridge';
+import { useBlockAssets, useBlockSettings, useEditorState } from '@frontify/app-bridge';
 import {
     AutoformatPlugin,
     BoldPlugin,
@@ -21,7 +21,7 @@ import {
     convertToRteValue,
     toRgbaString,
 } from '@frontify/guideline-blocks-settings';
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 import '@frontify/guideline-blocks-settings/styles';
 import '@frontify/fondue/style';
 import 'tailwindcss/tailwind.css';
@@ -45,6 +45,29 @@ export const QuoteBlock: FC<BlockProps> = ({ appBridge }) => {
     const [blockSettings, setBlockSettings] = useBlockSettings<Settings>(appBridge);
     const isEditing = useEditorState(appBridge);
 
+    const { blockAssets, deleteAssetIdsFromKey } = useBlockAssets(appBridge);
+    const customLeftIcon = blockAssets?.[CUSTOM_QUOTE_STYLE_LEFT_ID]?.[0];
+    const customRightIcon = blockAssets?.[CUSTOM_QUOTE_STYLE_RIGHT_ID]?.[0];
+
+    useEffect(() => {
+        if (!isEditing) {
+            return;
+        }
+        if (!blockSettings.isCustomQuoteStyleRight && customRightIcon) {
+            deleteAssetIdsFromKey(CUSTOM_QUOTE_STYLE_RIGHT_ID, [customRightIcon.id]);
+        }
+        if (!blockSettings.isCustomQuoteStyleLeft && customLeftIcon) {
+            deleteAssetIdsFromKey(CUSTOM_QUOTE_STYLE_LEFT_ID, [customLeftIcon.id]);
+        }
+    }, [
+        blockSettings.isCustomQuoteStyleLeft,
+        blockSettings.isCustomQuoteStyleRight,
+        customRightIcon,
+        customLeftIcon,
+        deleteAssetIdsFromKey,
+        isEditing,
+    ]);
+
     const isQuotationMarkType = blockSettings.type !== QuoteType.Indentation;
     const isFullWidth =
         blockSettings.quotationMarksAnchoring !== QuotationMarksAnchoring.HugText && isQuotationMarkType;
@@ -89,12 +112,11 @@ export const QuoteBlock: FC<BlockProps> = ({ appBridge }) => {
                 <div className={getWrapperClasses()}>
                     {isQuotationMarkType && (
                         <QuoteBlockIcon
-                            appBridge={appBridge}
                             color={iconColor}
                             isCustomSize={blockSettings.isCustomSize}
                             sizeValue={sizeValue}
                             sizeChoice={blockSettings.sizeChoice}
-                            customIconId={CUSTOM_QUOTE_STYLE_LEFT_ID}
+                            customIcon={customLeftIcon}
                             quoteStyle={
                                 blockSettings.isCustomQuoteStyleLeft
                                     ? QuoteStyle.Custom
@@ -128,12 +150,11 @@ export const QuoteBlock: FC<BlockProps> = ({ appBridge }) => {
                     </div>
                     {isQuotationMarkType && (
                         <QuoteBlockIcon
-                            appBridge={appBridge}
                             color={iconColor}
                             isCustomSize={blockSettings.isCustomSize}
                             sizeValue={sizeValue}
                             sizeChoice={blockSettings.sizeChoice}
-                            customIconId={CUSTOM_QUOTE_STYLE_RIGHT_ID}
+                            customIcon={customRightIcon}
                             quoteStyle={
                                 blockSettings.isCustomQuoteStyleRight
                                     ? QuoteStyle.Custom

diff --git a/packages/quote-block/src/QuoteBlockIcon.tsx b/packages/quote-block/src/QuoteBlockIcon.tsx
@@ -5,11 +5,10 @@ import 'tailwindcss/tailwind.css';
 import '@frontify/guideline-blocks-settings/styles';
 import { QuoteSize, type QuoteStyle, quoteSizeMap } from './types';
 import { quoteIconMap } from './utilities';
-import { type AppBridgeBlock } from '@frontify/app-bridge';
+import { Asset } from '@frontify/app-bridge';
 
 export type QuoteBlockIconProps = {
-    customIconId: string;
-    appBridge: AppBridgeBlock;
+    customIcon: Asset | undefined;
     quoteStyle: QuoteStyle;
     color: string;
     isCustomSize?: boolean;
@@ -18,14 +17,13 @@ export type QuoteBlockIconProps = {
 };
 
 export const QuoteBlockIcon: FC<QuoteBlockIconProps> = ({
-    customIconId,
+    customIcon,
     quoteStyle,
     color,
     isCustomSize,
     sizeValue,
     sizeChoice,
-    appBridge,
 }) => {
     const size = isCustomSize ? (sizeValue ?? '') : quoteSizeMap[sizeChoice ?? QuoteSize.LargeSize];
-    return quoteIconMap(size, color, customIconId, appBridge)[quoteStyle];
+    return quoteIconMap(size, color, customIcon)[quoteStyle];
 };
diff --git a/packages/quote-block/src/types.ts b/packages/quote-block/src/types.ts
@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { type AppBridgeBlock } from '@frontify/app-bridge';
+import { type Asset } from '@frontify/app-bridge';
 import { type Color } from '@frontify/fondue';
 import { type CSSProperties } from 'react';
 
@@ -82,6 +82,5 @@ export enum QuotationMarksAnchoring {
 
 export type CustomIconProps = {
     style: CSSProperties;
-    customIconId: string;
-    appBridge: AppBridgeBlock;
+    customIcon: Asset | undefined;
 };
diff --git a/packages/quote-block/src/utilities.tsx b/packages/quote-block/src/utilities.tsx
@@ -13,15 +13,14 @@ import { IconSingleQuoteDown } from './foundation/IconSingleQuoteDown';
 import { IconSingleQuoteUp } from './foundation/IconSingleQuoteUp';
 import { type QuoteStyle } from './types';
 import { CustomIcon } from './CustomIcon';
-import { type AppBridgeBlock } from '@frontify/app-bridge';
+import { Asset } from '@frontify/app-bridge';
 
 export const ICON_CLASS_NAME = 'tw-flex tw-items-center tw-justify-center tw-fill-current';
 
 export const quoteIconMap = (
     size: string,
     color: string,
-    customIconId: string,
-    appBridge: AppBridgeBlock
+    customIcon: Asset | undefined
 ): Record<QuoteStyle, ReactElement | null> => {
     const style: CSSProperties = {
         color,
@@ -43,7 +42,7 @@ export const quoteIconMap = (
         HookBracketLeft: <IconHookBracketLeft style={style} />,
         HookBracketRight: <IconHookBracketRight style={style} />,
         None: null,
-        Custom: <CustomIcon customIconId={customIconId} style={style} appBridge={appBridge} />,
+        Custom: <CustomIcon customIcon={customIcon} style={style} />,
     };
 };