feat(client): typography block enhancements

[Paulson-Robert]

No description provided.

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

feat(client): typography block enhancements

---

PR Type

Enhancement

---

Description

• Added BlockSettingsMask component for typography settings.

• Enhanced DeleteDuplicateMask with tooltip and icon button updates.

• Integrated BlockSettingsMask into Screen component for text blocks.

• Created TextSettingsMask for font style and size adjustments.

---

Changes walkthrough 📝

Relevant files

Enhancement

BlockSettingsMask.tsx Added `BlockSettingsMask` component for typography settings packages/client/src/components/designer/BlockSettingsMask.tsx Introduced BlockSettingsMask component for typography settings. Handles visibility and positioning for text block settings. Includes logic for overflow handling and style calculations. +142/-0  DeleteDuplicateMask.tsx Enhanced `DeleteDuplicateMask` with tooltips and icon buttons packages/client/src/components/designer/DeleteDuplicateMask.tsx Replaced buttons with icon buttons for duplicate and delete actions. Added tooltips for better user guidance. Updated positioning logic for the new button dimensions. +42/-38  Screen.tsx Integrated `BlockSettingsMask` into `Screen` component      packages/client/src/components/designer/Screen.tsx Integrated BlockSettingsMask for selected text blocks. Ensures it is displayed alongside DeleteDuplicateMask. +4/-0      TextSettingsMask.tsx Added `TextSettingsMask` for font style and size                  packages/client/src/components/designer/settings-mask/TextSettingsMask.tsx Created TextSettingsMask for font style and size adjustments. Includes validation and state synchronization with the store. Provides UI for font selection and size input. +161/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /review

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Possible Issue The getStyle function in BlockSettingsMask calculates positioning but does not handle cases where selectedElement or selectedElementSize might be null, which could lead to runtime errors. const getStyle = () => { // get position of page root block element const screenElementSize = screenEle.getBoundingClientRect(); // get position of selected block element const selectedElement = getBlockElement(designer.selected); const selectedElementSize = selectedElement.getBoundingClientRect(); // check for overflow const hasLeftOverflow = screenElementSize.left === selectedElementSize.left && selectedElementSize.width < STYLED_FONT_STYLE_INPUT_WIDTH + STYLED_FONT_SIZE_INPUT_WIDTH; const hasRightOverflow = screenElementSize.right === selectedElementSize.right && selectedElementSize.width < STYLED_FONT_STYLE_INPUT_WIDTH + STYLED_FONT_SIZE_INPUT_WIDTH; const leftValue = size.left - 12; let left: string; if (hasRightOverflow) { left = `${ leftValue - (STYLED_FONT_STYLE_INPUT_WIDTH + STYLED_FONT_SIZE_INPUT_WIDTH - selectedElementSize.width) + 8 }px`; } else if (hasLeftOverflow) { left = `${size.left - 8}px`; } else { left = `${leftValue}px`; } const top = size.top + size.height; return { top, left }; }; Validation Logic The onChange function in TextSettingsMask logs an error for invalid paths but does not prevent further execution, which might lead to unintended behavior. const onChange = ( path: string, newValue: string | number, isValid: boolean, ) => { // validate the path if (!path) { console.log('Invalid path passed!'); return; } // update the value setValue({ ...value, [path]: newValue }); // check if the value is valid if (isValid) { // update the store state.dispatch({ message: ActionMessages.SET_BLOCK_DATA, payload: { id: block.id, path: `style.${path}`, value: path === 'fontSize' ? `${newValue}px` : newValue, }, }); } Overflow Handling The overflow handling logic in DeleteDuplicateMask might not account for edge cases where selectedElementSize or screenElementSize are undefined, potentially causing errors. const selectedElementSize = selectedElement.getBoundingClientRect(); // check for overflow const hasLeftOverflow = screenElementSize.left === selectedElementSize.left && selectedElementSize.width < STYLED_BUTTON_GROUP_ICON_BUTTON_WIDTH * 2; const hasRightOverflow = screenElementSize.right === selectedElementSize.right && selectedElementSize.width < STYLED_BUTTON_GROUP_ICON_BUTTON_WIDTH * 2; const leftValue = size.left + size.width - STYLED_BUTTON_GROUP_ICON_BUTTON_WIDTH * 2 - 12; let left: string; if (hasRightOverflow) { left = `${ leftValue - (STYLED_BUTTON_GROUP_ICON_BUTTON_WIDTH * 2 - selectedElementSize.width) + 8 }px`; } else if (hasLeftOverflow) { left = `${size.left - 8}px`; } else { left = `${leftValue}px`; } const top = size.top - STYLED_BUTTON_GROUP_ICON_BUTTON_HEIGHT * 2;

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Add null check for selected element Ensure that the getBlockElement function returns a valid element before calling getBoundingClientRect to avoid potential runtime errors when selectedElement is null or undefined. packages/client/src/components/designer/BlockSettingsMask.tsx [100] -const selectedElementSize = selectedElement.getBoundingClientRect(); +const selectedElementSize = selectedElement?.getBoundingClientRect(); Suggestion importance[1-10]: 9 __ Why: Adding a null check for selectedElement before calling getBoundingClientRect is crucial to prevent potential runtime errors when selectedElement is null or undefined. This suggestion directly addresses a possible issue in the code and improves its robustness.	High
	Handle undefined block style gracefully Add a fallback or error handling mechanism for cases where block.data.style is undefined to prevent potential runtime errors. packages/client/src/components/designer/settings-mask/TextSettingsMask.tsx [76] -const blockStyle: any = block.data.style; +const blockStyle: any = block.data?.style || {}; Suggestion importance[1-10]: 9 __ Why: Adding a fallback for block.data.style prevents potential runtime errors when block.data or style is undefined. This is a significant improvement to the code's stability and error handling.	High
	Validate newValue before updating state Validate the newValue in the onChange function to ensure it is not null or undefined before updating the state and dispatching actions. packages/client/src/components/designer/settings-mask/TextSettingsMask.tsx [101] -setValue({ ...value, [path]: newValue }); +if (newValue !== null && newValue !== undefined) { + setValue({ ...value, [path]: newValue }); +} Suggestion importance[1-10]: 8 __ Why: Validating newValue before updating the state ensures that invalid or undefined values do not propagate, which could lead to unexpected behavior. This suggestion improves the reliability of the onChange function.	Medium

[johbaxter]

Looks good Paulson ty

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-02-19

Added

• Enhanced typography block with new settings mask for font style and size adjustments.
• Introduced tooltips and updated UI for delete and duplicate actions in designer.

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'