diff --git a/packages/quote-block/src/CustomIcon.tsx b/packages/quote-block/src/CustomIcon.tsx index 388833b39..4840d0c32 100644 --- 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 ? Quote Icon : null; }; diff --git a/packages/quote-block/src/QuoteBlock.tsx b/packages/quote-block/src/QuoteBlock.tsx index 392aa70a0..3d80dcbeb 100644 --- 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 = ({ appBridge }) => { const [blockSettings, setBlockSettings] = useBlockSettings(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 = ({ appBridge }) => {
{isQuotationMarkType && ( = ({ appBridge }) => {
{isQuotationMarkType && ( = ({ - 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 index f214a44af..f068a9961 100644 --- 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 index 0ebbe0b29..6775cf774 100644 --- 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 => { const style: CSSProperties = { color, @@ -43,7 +42,7 @@ export const quoteIconMap = ( HookBracketLeft: , HookBracketRight: , None: null, - Custom: , + Custom: , }; };