Skip to content

feat: add grid block with two-column layout to block editor#34789

Open
fmontes wants to merge 294 commits intomainfrom
issue-33882-grid-block
Open

feat: add grid block with two-column layout to block editor#34789
fmontes wants to merge 294 commits intomainfrom
issue-33882-grid-block

Conversation

@fmontes
Copy link
Member

@fmontes fmontes commented Feb 26, 2026

Summary

  • Adds a new gridBlock TipTap node with two-column layout, following the same pure-node pattern as tables (no Angular components needed)
  • Each column (gridColumn) supports independent nested blocks (paragraphs, headings, images, lists, etc.)
  • Includes CSS Grid styling with dashed borders, focus highlighting, and drag support
  • Integrates into the slash menu as "Grid (2 columns)" and supports Tab/Shift-Tab column navigation

Test plan

  • Open block editor, type / and search for "Grid" — should see "Grid (2 columns)"
  • Select it — should insert a two-column grid with dashed borders
  • Type in each column independently — content should stay in its column
  • Add headings, images, lists inside columns — should work normally
  • Tab between columns — should navigate left→right, Shift-Tab right→left
  • Drag the grid block — should move the entire grid
  • Backspace in a column — should not delete the column itself

🤖 Generated with Claude Code

fmontes and others added 30 commits December 12, 2025 19:39
@fmontes
refactor(dot-content-type): update HTTP client imports for improved t…
37efc47 
…esting setup in unit tests
@fmontes
refactor(dot-content-type): enhance unit tests for content type compo…
22b4619 
…nent with improved prop binding and lazy loading validation
@fmontes
refactor(dot-content-type): integrate ControlValueAccessor with FormC…
f19c1cc 
…ontrol for enhanced form handling in unit tests
@fmontes
refactor(dot-content-type): clean up and organize unit test imports a…
b2f5f3c 
…nd structure for better readability
@fmontes
refactor(dot-content-type): remove redundant unit tests and streamlin…
34a6e67 
…e test cases for clarity and efficiency
@fmontes
refactor(dot-content-type): improve clarity of unit tests by standard…
110fde4 
…izing indentation and formatting for better readability
@fmontes
refactor(dot-content-type): add detailed documentation comments for c…
96ff09b 
…omponent properties and methods to improve code clarity and maintainability
@fmontes
feat(dot-site): add dot-site component for site selection with lazy l…
ea7eff4 
…oading and filtering capabilities
@fmontes
feat(dot-content-type): enhance select component with onShow event an…
6f2f20c 
…d virtual scroller initialization for improved user experience
@fmontes
fix(dot-content-type): adjust virtual scroll options by adding autoSi…
a931dc7 
…ze and minHeight properties for better layout control
@fmontes
feat(dot-starter): initialize selectedContentType with detailed struc…
1ff296c 
…ture for content type management
@fmontes
feat(dot-content-type): implement pinned option functionality to enha…
4794ea6 
…nce content type selection experience
@fmontes
feat(dot-site): implement pinned option in site selection for improve…
c4ade77 
…d user experience and enhance dropdown options management
@fmontes
test(dot-site): enhance unit tests for DotSiteComponent with comprehe…
31097a9 
…nsive scenarios including lazy loading, filtering, and pinned option functionality
@fmontes
feat(dot-site): refactor site selection components to utilize DotSite…
76b6b92 
… for improved consistency and functionality across the application
@fmontes
test(dot-site): enhance unit tests for DotSiteComponent by refining i…
9ed03ad 
…nput bindings and adding output emission tests for improved coverage
@fmontes
test(dot-site): simplify unit tests for DotSiteComponent by removing …
2e2c46d 
…unnecessary disabled input binding and focusing on FormControl state
@fmontes
test(dot-site): streamline unit tests for DotSiteComponent by removin…
998c8c5 
…g unused provideNoopAnimations and maintaining essential testing utilities
@fmontes
test(dot-content-type): improve unit tests for DotContentTypeComponen…
1508b2f 
…t by refining input handling, enhancing output emissions, and ensuring proper state management during filtering and lazy loading
@fmontes
feat(dot-content-type): enhance DotContentTypeComponent by refining s…
8874b6f 
…elect options and improving event handling for better user interaction
@fmontes
refactor(dot-content-type, dot-site): update constructor comments to …
2a784f9 
…clarify synchronization with ControlValueAccessor and state fetching for content and site objects
@fmontes
feat(dot-content-type, dot-site): implement OnDestroy lifecycle hook …
098ea07 
…to clear debounce timeout for improved resource management
@fmontes
test(dot-content-type, dot-site): enhance unit tests to verify conten…
43e781c 
…t and site fetching logic, ensuring no duplicate API calls for already loaded items
@fmontes
refactor(dot-content-type, dot-site): simplify component templates an…
3d06d44 
…d improve state management by removing unnecessary logic and enhancing readability
@fmontes
feat(dot-themes): implement DotThemesService and DotThemeComponent wi…
96594fa 
…th improved API integration and unit tests
@fmontes
feat(dot-theme): add DotThemeComponent with theme selection functiona…
f741950 
…lity, including lazy loading, filtering, and improved state management
@fmontes
refactor(dot-template-props): replace DotThemeSelectorDropdown with D…
3e0e7ce 
…otThemeComponent for improved theme selection integration
@fmontes
refactor(dot-theme-selector): remove DotThemeSelectorDropdown compone…
358feab 
…nt and its associated files to streamline theme selection process
@rjvelazco
fix: DotIframe & DotIframeDialog styles
1b0b213
@hmoreras
speify the correct path so dotAdmin run in the docker image
8ca2d86
hmoreras and others added 15 commits February 26, 2026 16:34
@hmoreras
lint errors
5722ff6
@fmontes @claude
refactor: replace all SCSS with plain CSS in block editor
9a8713e 
Remove all 25 SCSS files from the block editor and replace with plain
CSS using CSS custom properties and literal values. All selectors are
fully flattened (no CSS nesting) for compatibility with Angular view
encapsulation. ProseMirror DOM styles are inlined in the main component
CSS with ::ng-deep selectors.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@fmontes
Merge branch 'issue-33882-primeng-update' into issue-33882-grid-block
a79d2a9
@fmontes @claude
style: apply vertical rhythm to block editor typography
ccf03e8 
Align all vertical spacing to a 1.5rem (24px) baseline grid derived
from 1rem font-size and 1.5 line-height. All margins and paddings now
use multiples of the base unit: 0.75rem, 1.5rem, or 3rem.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@fmontes @claude
feat: add backspace to delete empty grid block from inside
deeba82 
When both columns are empty and the user presses Backspace, the entire
grid block is replaced with an empty paragraph. If either column has
content, normal backspace behavior is preserved.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@fmontes @claude
feat: add column resize with drag handle to grid block
61e6a2a 
Add a ProseMirror plugin that creates resize handles between grid columns,
allowing users to drag and snap to quarter-based layouts (25/75, 50/50, 75/25).

- Switch grid block from CSS Grid to flexbox for resize support
- Store column layout as columns attribute (data-columns) with CSS
  custom properties driving flex-basis on each column
- Add overlay-based drag preview that bypasses ProseMirror DOM management
- Add setGridColumns command for programmatic layout changes
- Undo/redo works automatically via ProseMirror history

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@fmontes @claude
feat: switch grid block columns to 12-column grid system
589d14e 
Replace the 3-snap quarter-based layout (25/50/75) with a 12-column
grid that supports 11 valid splits from [1,11] to [11,1]. The columns
attribute changes from a space-separated string to a number array.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@fmontes @claude
fix: hide placeholder text inside grid block
dc36e7b 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@fmontes @claude
style: remove image max-width and max-height inside grid block columns
abdaefd 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@fmontes @claude
style: fix context menu spacing between label and shortcut
95db020 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@fmontes @claude
feat: add grid block support to React SDK block editor renderer
d89a490 
Add GridBlock and GridColumn to BlockEditorDefaultBlocks enum and
implement GridBlock renderer component that converts 12-column
values to CSS grid percentages. Also fix type safety issues in
grid-block.node.ts (null guard for JSON.parse, Array.isArray guard).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@fmontes @claude
feat: add grid block support to Angular SDK block editor renderer
7233eef 
Create DotGridBlock component that renders a CSS grid container
with columns based on the 12-column system. Register it in the
block editor item component template and imports.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@fmontes @claude
feat: add grid block support to Velocity storyblock renderer
a280320 
Add gridBlock handler that computes column percentages from the
12-column system and renders a CSS grid container. Each gridColumn
child recursively renders its nested content.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@fmontes @claude
refactor: extract grid block into external gridBlock.vtl template
89a2328 
Move inline grid block rendering from render.vtl into a separate
gridBlock.vtl file, following the same #set/$item + #parse pattern
used by dotImage, dotContent, dotVideo, and table blocks.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@fmontes @claude
fix: use 12-column CSS grid in gridBlock.vtl to avoid $math dependency
1e90a64 
Replace percentage calculation via $math tool with a 12-column CSS grid
using repeat(12, 1fr) and grid-column: span N. This eliminates potential
issues with $math tool availability in the rendering context and avoids
type coercion problems with JSONArray values.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Base automatically changed from issue-33882-primeng-update to main February 27, 2026 23:03
@fmontes fmontes requested a review from Copilot February 28, 2026 03:20
Copilot AI reviewed Feb 28, 2026
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR introduces a new two-column grid block for the block editor and concurrently migrates significant portions of the UI from PrimeFlex/legacy PrimeNG APIs to Tailwind CSS and newer PrimeNG components, including moving the app bootstrap to ApplicationConfig.

Changes:

  • Adds new Dot Apps resolvers/components structure and updates related templates/styles for Tailwind + PrimeNG changes.
  • Migrates multiple portlets from TabViewModule/Dropdown/InputTextarea/Calendar to TabsModule/Select/Textarea/DatePicker and replaces PrimeFlex utilities with Tailwind classes.
  • Moves dotcms-ui to standalone-style bootstrapping via app.config.ts and updates global styles/postcss for Tailwind.

Reviewed changes

Copilot reviewed 197 out of 2028 changed files in this pull request and generated 7 comments.

Show a summary per file
File Description
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/dot-edit-content.component.scss Removes legacy edit content styles (likely part of broader styling migration).
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/dot-edit-content.component.html Removes legacy edit content template (refactor/migration).
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-whats-changed/dot-whats-changed.component.ts Removes legacy “what’s changed” component implementation.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-whats-changed/dot-whats-changed.component.scss Removes styles for removed “what’s changed” component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-whats-changed/dot-whats-changed.component.html Removes template for removed “what’s changed” component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-form-selector/dot-form-selector.component.ts Removes legacy form selector component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-form-selector/dot-form-selector.component.scss Removes styles for removed form selector component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-form-selector/dot-form-selector.component.html Removes template for removed form selector component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-workflows-actions/dot-edit-page-workflows-actions.component.html Removes workflows actions template (refactor/migration).
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-view-as-controller/dot-edit-page-view-as-controller.component.ts Removes view-as controller component (refactor/migration).
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-view-as-controller/dot-edit-page-view-as-controller.component.scss Removes styles for removed view-as controller component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-view-as-controller/dot-edit-page-view-as-controller.component.html Removes template for removed view-as controller component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-toolbar/dot-edit-page-toolbar.component.ts Removes legacy edit page toolbar component (refactor/migration).
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-toolbar/dot-edit-page-toolbar.component.scss Removes styles for removed edit page toolbar component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-toolbar/dot-edit-page-toolbar.component.html Removes template for removed edit page toolbar component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-state-controller/dot-edit-page-state-controller.component.scss Removes styles for removed state controller component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-state-controller/dot-edit-page-state-controller.component.html Removes template for removed state controller component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-state-controller/components/dot-edit-page-lock-info/dot-edit-page-lock-info.component.ts Removes lock info component implementation.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-state-controller/components/dot-edit-page-lock-info/dot-edit-page-lock-info.component.spec.ts Removes lock info unit tests.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-state-controller/components/dot-edit-page-lock-info/dot-edit-page-lock-info.component.scss Removes lock info styles.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-state-controller/components/dot-edit-page-lock-info/dot-edit-page-lock-info.component.html Removes lock info template.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component.ts Removes legacy palette component (refactor/migration).
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component.scss Removes styles for removed palette component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette.component.html Removes template for removed palette component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette-input-filter/dot-palette-input-filter.component.ts Removes legacy palette input filter component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette-input-filter/dot-palette-input-filter.component.spec.ts Removes palette input filter tests.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette-input-filter/dot-palette-input-filter.component.scss Removes palette input filter styles.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette-input-filter/dot-palette-input-filter.component.html Removes palette input filter template.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette-contentlets/dot-palette-contentlets.component.ts Removes legacy palette contentlets component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette-contentlets/dot-palette-contentlets.component.scss Removes styles for removed palette contentlets component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette-contentlets/dot-palette-contentlets.component.html Removes template for removed palette contentlets component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette-content-type/dot-palette-content-type.component.ts Removes legacy palette content type component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette-content-type/dot-palette-content-type.component.scss Removes styles for removed content type component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette-content-type/dot-palette-content-type.component.html Removes template for removed content type component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-edit-page-info/dot-edit-page-info.component.ts Removes legacy edit page info component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-edit-page-info/dot-edit-page-info.component.spec.ts Removes edit page info tests.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-edit-page-info/dot-edit-page-info.component.scss Removes edit page info styles.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-edit-page-info/dot-edit-page-info.component.html Removes edit page info template.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-block-editor-sidebar/dot-block-editor-sidebar.component.ts Removes legacy block editor sidebar component.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-block-editor-sidebar/dot-block-editor-sidebar.component.scss Removes styles for removed sidebar.
core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-block-editor-sidebar/dot-block-editor-sidebar.component.html Removes template for removed sidebar.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts Drops component SCSS usage (Tailwind migration).
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.spec.ts Updates event triggering to match PrimeNG button changes.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.scss Removes loop editor SCSS in favor of utility classes.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.html Replaces PrimeFlex/custom SCSS layout with Tailwind + <p-button>.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/store/dot-container-properties.store.ts Updates content type pagination param + adjusts store flags.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.ts Migrates TabView→Tabs and debounces form status updates.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/dot-container-properties.component.scss Removes component SCSS (utility-first migration).
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-history/dot-container-history.component.scss Switches spacing to shared SCSS module token.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.ts Migrates TabView→Tabs; introduces active tab state.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.spec.ts Expands providers to satisfy new dependency graph.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.scss Removes SCSS styling (utility-first migration).
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.html Replaces <p-tabView> with <p-tabs> structure.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-code/dot-container-code.component.ts Migrates tabs; hardens contentTypes handling; adjusts tab click logic.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-code/dot-container-code.component.scss Removes SCSS styling (utility-first migration).
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.ts Drops component SCSS reference.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.scss Removes SCSS styling.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.html Replaces DataView markup with Tailwind utility layout.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.ts Adds selection-change handler; updates dialog options; includes status chip.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.spec.ts Updates tests for menu querying and action trigger changes.
core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/container-list.component.scss Removes SCSS styling (utility-first migration).
core-web/apps/dotcms-ui/src/app/portlets/dot-categories/dot-categories-permissions/dot-categories-permissions.component.spec.ts Refactors tests to Spectator and adds route/service providers.
core-web/apps/dotcms-ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.scss Moves to shared tokens; replaces PrimeFlex patterns with Tailwind equivalents.
core-web/apps/dotcms-ui/src/app/portlets/dot-categories/dot-categories-list/dot-categories-list.component.html Updates spacing and PrimeFlex class equivalents.
core-web/apps/dotcms-ui/src/app/portlets/dot-categories/dot-categories-create-edit/dot-categories-create-edit.component.ts Migrates TabView→Tabs.
core-web/apps/dotcms-ui/src/app/portlets/dot-categories/dot-categories-create-edit/dot-categories-create-edit.component.scss Uses shared SCSS modules for colors/spacing.
core-web/apps/dotcms-ui/src/app/portlets/dot-categories/dot-categories-create-edit/dot-categories-create-edit.component.html Replaces <p-tabView> with <p-tabs> layout.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/shared/mocks.ts Adds typed mock data for apps.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/services/dot-apps-list-resolver/dot-apps-list-resolver.service.ts Adds new apps list resolver (service-layer refactor).
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/services/dot-apps-list-resolver/dot-apps-list-resolver.service.spec.ts Adds unit test for the new apps list resolver.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/services/dot-apps-configuration-resolver/dot-apps-configuration-resolver.service.ts Switches apps service import to data-access.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/services/dot-apps-configuration-resolver/dot-apps-configuration-resolver.service.spec.ts Updates resolver spec mocks/ParamMap typing and expectations.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/services/dot-apps-configuration-detail-resolver/dot-apps-configuration-detail-resolver.service.ts Switches apps service import to data-access.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/services/dot-apps-configuration-detail-resolver/dot-apps-configuration-detail-resolver.service.spec.ts Updates ParamMap typing and removes any usage where possible.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps.routes.ts Rewires routes to new components/services paths; uses data-access DotAppsService.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-list.component.scss Updates styling tokens and replaces legacy icon/layout patterns.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-list.component.html Removes license gating markup; uses state-driven displayed apps and store-managed dialog.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-list-resolver.service.ts Removes legacy enterprise-aware resolver.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-list-resolver.service.spec.ts Removes legacy resolver spec.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-card/dot-apps-card.component.ts Migrates to signal-based input()/output() API; removes DotIcon usage.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-card/dot-apps-card.component.spec.ts Updates tests for signal inputs and new warning icon markup.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-card/dot-apps-card.component.scss Switches to shared tokens; refactors header styling.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-card/dot-apps-card.component.html Refactors card header markup and warning icon; introduces signal input usage.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-import-export-dialog/dot-apps-import-export-dialog.component.scss Removes SCSS spacing rule (likely replaced by utility/classes).
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-import-export-dialog/dot-apps-import-export-dialog.component.html Migrates from dot-dialog to PrimeNG p-dialog with password/fileupload controls.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration/dot-apps-configuration.component.scss Removes legacy SCSS (migrated to new component location).
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-list.component.ts Removes legacy configuration list component (migrated).
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-list.component.scss Removes legacy configuration list styles.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration/dot-apps-configuration/dot-apps-configuration-item/dot-apps-configuration-item.component.scss Removes legacy item styles (migrated).
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-item/dot-apps-configuration-item.component.html Removes legacy item template (migrated).
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration-header/dot-apps-configuration-header.component.html Removes legacy header template (migrated).
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration-detail/dot-apps-configuration-detail.component.scss Removes legacy detail styles (migrated).
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration/dot-apps-configuration.component.scss Adds new Tailwind/token-based configuration styles.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration/dot-apps-configuration.component.html Updates configuration template to use store-driven state and store-managed dialog.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-list.component.ts Adds new signal-input based configuration list component.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-list.component.spec.ts Updates tests for signal inputs.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-list.component.scss Adds tokenized styles for new configuration list component.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-list.component.html Refactors template to use function-form signal inputs.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-item/dot-apps-configuration-item.component.ts Migrates to signal inputs/outputs; updates confirm delete etc.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-item/dot-apps-configuration-item.component.spec.ts Updates tests for new path + signal input patterns.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-item/dot-apps-configuration-item.component.scss Adds tokenized item styles for new location.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration/dot-apps-configuration-list/dot-apps-configuration-item/dot-apps-configuration-item.component.html Adds template using new PrimeNG button APIs and signal site input.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/dot-apps-configuration-detail.component.ts Updates imports/paths; uses data-access DotAppsService; relocates components.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/dot-apps-configuration-detail.component.scss Adds tokenized configuration detail styles.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/dot-apps-configuration-detail.component.html Simplifies header rendering condition.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/components/dot-apps-configuration-header/dot-apps-configuration-header.component.ts Migrates to signal input + state signal; introduces toggleShowMore.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/components/dot-apps-configuration-header/dot-apps-configuration-header.component.spec.ts Updates import path and addresses change detection issues in spec.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/components/dot-apps-configuration-header/dot-apps-configuration-header.component.scss Tokenizes colors/spacing; refactors avatar spacing.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/components/dot-apps-configuration-header/dot-apps-configuration-header.component.html Adds new header template using signal input and show-more signal state.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/components/dot-apps-configuration-detail-generated-string-field/dot-apps-configuration-detail-generated-string-field.component.spec.ts Disables flaky confirm-popup tests via xit.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/components/dot-apps-configuration-detail-generated-string-field/dot-apps-configuration-detail-generated-string-field.component.html Replaces PrimeFlex classes with Tailwind; removes confirmPopup host.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/components/dot-apps-configuration-detail-form/dot-apps-configuration-detail-form.component.ts Migrates Dropdown/Textarea modules to Select/Textarea; initializes form group.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/components/dot-apps-configuration-detail-form/dot-apps-configuration-detail-form.component.spec.ts Updates tests to use Select and adjusts checkbox/textarea expectations.
core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/components/dot-apps-configuration-detail-form/dot-apps-configuration-detail-form.component.scss Tokenizes styling; removes some nested code styling/spacing.
core-web/apps/dotcms-ui/src/app/modules.ts Replaces legacy PrimeNG modules with new ones (Tabs/Select/Textarea/DatePicker).
core-web/apps/dotcms-ui/src/app/components.ts Removes DotDialog/ThemeSelector from lists; reshuffles MainCoreLegacy into standalone list.
core-web/apps/dotcms-ui/src/app/app.module.ts Removes NgModule bootstrap in favor of standalone ApplicationConfig.
core-web/apps/dotcms-ui/src/app/app.config.ts Adds standalone ApplicationConfig bootstrap providers and module provider imports.
core-web/apps/dotcms-ui/src/app/app.component.ts Adds graceful config load fallback and default color initialization.
core-web/apps/dotcms-ui/src/app/api/services/guards/pages-guard.service.spec.ts Replaces removed mock import with local mock class.
core-web/apps/dotcms-ui/src/app/api/services/guards/ema-app/edit-page.guard.ts Removes guard implementation.
core-web/apps/dotcms-ui/src/app/api/services/guards/ema-app/edit-page.guard.spec.ts Removes guard tests.
core-web/apps/dotcms-ui/src/app/api/services/dot-templates/dot-templates.service.spec.ts Updates API expectations for new filtered response/pagination shape.
core-web/apps/dotcms-ui/project.json Updates global styles list; removes PrimeFlex/PrimeNG CSS; adds Prism theme + new style.css.
core-web/apps/dotcms-ui/.postcssrc.json Adds Tailwind PostCSS plugin config.
core-web/apps/dotcms-block-editor/src/styles.css Adds Tailwind imports for block editor app stylesheet.
core-web/apps/dotcms-block-editor/src/app/app.module.ts Adds theme provider + DotMessageService; updates providers.
core-web/apps/dotcms-block-editor/project.json Switches to consolidated styles and adjusts bundle budgets.
core-web/apps/dotcms-block-editor/.postcssrc.json Adds Tailwind PostCSS plugin config.
core-web/apps/dotcms-binary-field-builder/project.json Removes primeng.min.css and some theme SCSS includes.
core-web/apps/dotcms-binary-field-builder/jest.config.ts Enables isolatedModules for jest-preset-angular.
core-web/apps/dotcdn/src/app/app.module.ts Migrates Dropdown/Textarea/TabView to Select/Textarea/Tabs.
core-web/apps/dotcdn/src/app/app.component.html Updates tabs/select markup to new PrimeNG components.
core-web/apps/dotcdn/project.json Removes primeng.min.css from styles.
core-web/apps/dotcdn/jest.config.ts Enables isolatedModules for jest-preset-angular.
core-web/README.MD Removes deprecated dotcms-field-elements entry from repo overview.
core-web/AGENTS.md Updates Nx agent usage guidance and command conventions.
core-web/.vscode/extensions.json Cleans up comments/formatting in extension recommendations.
core-web/.cursor/rules/nx-rules.mdc Removes Cursor-specific Nx rules file.
core-web/.cursor/mcp.json Switches Cursor MCP server config to PrimeNG MCP.
core-web/.claude/settings.json Adds Claude plugins config for Nx agent integration.
COMMIT_MESSAGE.txt Adds commit message template describing PrimeFlex→Tailwind refactor.
.mcp.json Adds MCP server definitions (chrome-devtools/primeng/angular-cli).
.cursor/rules/frontend-context.mdc Updates frontend stack docs to reflect Tailwind + PrimeNG and PrimeFlex deprecation.
.cursor/mcp.json Adds PrimeNG and Angular CLI MCP servers while keeping Nx MCP.
.claude/agents/dotcms-typescript-reviewer.md Renames agent and references updated agent naming in docs.
.claude/agents/dotcms-test-reviewer.md Renames agent and references updated agent naming in docs.
.claude/agents/dotcms-team-router.md Renames agent and updates description references.
.claude/agents/dotcms-issue-validator.md Renames agent metadata.
.claude/agents/dotcms-file-classifier.md Renames agent metadata and updates agent name references.
.claude/agents/dotcms-duplicate-detector.md Renames agent metadata.
.claude/agents/dotcms-code-researcher.md Renames agent metadata.
.claude/agents/dotcms-angular-reviewer.md Renames agent metadata and references updated agent naming.

@github-actions github-actions bot added Area : Backend PR changes Java/Maven backend code Area : Frontend PR changes Angular/TypeScript frontend code Area : SDK PR changes SDK libraries labels Feb 28, 2026
@fmontes fmontes requested a review from Copilot February 28, 2026 03:49
Copilot AI reviewed Feb 28, 2026
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 94 out of 95 changed files in this pull request and generated 10 comments.

Comments suppressed due to low confidence (1)

core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dot-content-drive-toolbar/dot-content-drive-toolbar.component.html:14

  • Same issue here: [class] overwrites the element’s entire class list, so the static classes (grid items-center w-full ...) can be lost. Use [ngClass] to add these grid-cols values without overriding other classes.

fmontes and others added 3 commits February 27, 2026 22:08
@fmontes @claude
revert: remove unrelated portlet changes from grid block branch
323c993 
Reverts changes to dot-analytics and dot-content-drive portlets that
were not part of the grid block feature work.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@fmontes
format check
21d7cdd
@fmontes
fix issues
477ea88
@claude
Copy link
Contributor

claude bot commented Mar 3, 2026 •
edited
Loading

Claude finished @fmontes's task —— View job

Grid Block PR Security & Design Review

🔴 Critical Security Issue

XSS Vulnerability in Velocity Template (gridBlock.vtl:24)

The Velocity template properly validates and escapes the span value to prevent XSS injection:

## Validate span is a number between 1 and 12 to prevent XSS injection
#if($rawSpan && $rawSpan.toString().matches("^[0-9]+$") && $rawSpan >= 1 && $rawSpan <= 12)
#set($span = $rawSpan)
#else
#set($span = 6)
#end

✅ This XSS concern has been properly addressed. The template validates that span values are numeric (1-12) and falls back to safe defaults, preventing injection attacks.

Frontend Validation Analysis

The frontend implementations also properly validate column arrays:

React SDK (GridBlock.tsx:23-28):

const cols = rawCols.length === 2 && 
    rawCols.every((v: unknown) => typeof v === 'number' && Number.isFinite(v))
    ? rawCols : [6, 6];

Angular SDK (grid-block.component.ts:41-45):

const cols = rawCols.length === 2 && 
    rawCols.every((v: unknown) => typeof v === 'number' && Number.isFinite(v))
    ? rawCols : [6, 6];

Both implementations validate that columns are exactly 2 finite numbers and fall back to [6, 6].

Design & Implementation Issues

  1. Grid Constraint Logic (grid-resize.plugin.ts:8-12):

    • The snapToGrid function properly constrains columns to 1-11 range
    • Correctly ensures the two columns sum to 12

  2. DOM Position Finding (grid-resize.plugin.ts:17-43):

    • Robust error handling with try-catch blocks
    • Proper boundary checking for document positions

  3. Navigation Logic (Tab/Shift-Tab in grid-block.node.ts:157-242):

    • Complex but thorough column index detection
    • Proper cursor positioning between columns

  4. Empty Grid Deletion (grid-block.node.ts:118-156):

    • Correctly detects when both columns are empty paragraphs
    • Safely replaces grid with empty paragraph

Minor Issues

  • React Component has unused children prop in interface (noted by Copilot)
  • Column validation is duplicated across React/Angular - could be extracted to shared utility
  • CSS Grid vs percentage styling: Frontend uses percentages while backend uses grid-column: span N - both work but inconsistent

Summary

The implementation is secure and well-designed. The critical XSS vulnerability flagged by Copilot has been properly addressed with input validation and sanitization. The grid resizing, navigation, and rendering logic is robust with good error handling and fallbacks.

zJaaal
zJaaal reviewed Mar 4, 2026
View reviewed changes
...libs/block-editor/src/lib/components/dot-editor-count-bar/dot-editor-count-bar.component.css
Comment on lines +6 to +8
margin-top: 1rem;
gap: 0.65rem;
font-size: 0.875rem;
Copy link
Contributor

@zJaaal zJaaal Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should use vars here

...s/dot-bubble-menu/components/dot-image-editor-popover/dot-image-editor-popover.component.css
Copy link
Contributor

@zJaaal zJaaal Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to reuse our vars on the spacing and rem values?

...nts/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.css
Copy link
Contributor

@zJaaal zJaaal Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check if we can reuse our vars for the spacing and rem values

core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/dot-bubble-menu.component.css
Copy link
Contributor

@zJaaal zJaaal Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check if we can reuse our vars for the spacing and rem values

core-web/libs/block-editor/src/lib/elements/dot-context-menu/dot-context-menu.component.css
Copy link
Contributor

@zJaaal zJaaal Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The ng-deep pseudoselector is potentially leaking the styles to the global scope, consider wrapping them around the host

Copy link
Contributor

@zJaaal zJaaal Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check if we can reuse our vars for the spacing and rem values

core-web/libs/block-editor/src/lib/shared/components/empty-message/empty-message.component.css
Comment on lines +6 to +7
padding: 16px;
height: 240px;
Copy link
Contributor

@zJaaal zJaaal Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using rem values and Check if we can reuse our vars for the spacing and rem values

...ponents/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.css
Copy link
Contributor

@zJaaal zJaaal Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using rem values and Check if we can reuse our vars for the spacing and rem values

...itor/src/lib/shared/components/suggestion-loading-list/suggestion-loading-list.component.css
Copy link
Contributor

@zJaaal zJaaal Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using rem values and Check if we can reuse our vars for the spacing and rem values

core-web/libs/block-editor/src/lib/shared/components/suggestions/suggestions.component.css
Copy link
Contributor

@zJaaal zJaaal Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using rem values and Check if we can reuse our vars for the spacing and rem values

.../sdk/react/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/GridBlock.tsx
Comment on lines +22 to +30
const BlockEditorBlockComponent = blockEditorBlock;
const rawCols = Array.isArray(node.attrs?.columns) ? node.attrs.columns : [6, 6];
const cols =
rawCols.length === 2 &&
rawCols.every((v: unknown) => typeof v === 'number' && Number.isFinite(v))
? rawCols
: [6, 6];
const pct1 = (cols[0] / 12) * 100;
const pct2 = (cols[1] / 12) * 100;
Copy link
Contributor

@zJaaal zJaaal Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need to centralize this whole calculation and reuse it, we can use UVE library for that

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@zJaaal zJaaal zJaaal left review comments

Copilot code review Copilot Copilot left review comments

At least 2 approving reviews are required to merge this pull request.

Assignees

No one assigned

Labels

Area : Backend PR changes Java/Maven backend code Area : Frontend PR changes Angular/TypeScript frontend code Area : SDK PR changes SDK libraries

Projects

dotCMS - Product Planning
Status: No status

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

9 participants

@fmontes @zJaaal @rjvelazco @hmoreras @adrianjm-dotCMS @KevinDavilaDotCMS @spbolton @oidacra