Skip to content

Refactor: Block Editor#35257

Open
rjvelazco wants to merge 31 commits intomainfrom
refactor-dotcms-block-editor
Open

Refactor: Block Editor#35257
rjvelazco wants to merge 31 commits intomainfrom
refactor-dotcms-block-editor

Conversation

@rjvelazco
Copy link
Copy Markdown
Member

@rjvelazco rjvelazco commented Apr 8, 2026

WIP

Videos

video.mov

Note

High Risk
High risk because this is a large refactor that swaps the block editor app to a new standalone editor implementation, upgrades TipTap/ngx-tiptap major versions, and adds dotCMS upload/search integrations including a hardcoded auth token/base URL in code.

Overview
Replaces the dotcms-block-editor app’s NgModule-based bootstrap with Angular standalone bootstrapApplication and points the app at the new EditorComponent exported from @dotcms/new-block-editor, alongside updated Angular build target config (new executor/outputPath structure, dev config, baseHref).

Adds a new new-block-editor library implementing an experimental TipTap v3-based editor with slash menu, toolbar, drag-handle gutter, link/image/video/table dialogs, emoji picker, upload placeholders, and dotCMS-backed asset/content-type search + upload services.

Updates global styling for the new editor UI (Tailwind layers, typography plugin, Material Symbols, TipTap/table/link/upload-placeholder styles) and bumps editor-related dependencies (TipTap v3, ngx-tiptap, Floating UI, emoji-mart); also removes a shared SCSS code style block.

Reviewed by Cursor Bugbot for commit 77fd1d1. Bugbot is set up for automated code reviews on this repo. Configure here.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 8, 2026

❌ Issue Linking Required

This PR could not be linked to an issue. All PRs must be linked to an issue for tracking purposes.

How to fix this:

Option 1: Add keyword to PR body (Recommended - auto-removes this comment)
Edit this PR description and add one of these lines:

  • This PR fixes #123 or Fixes: #123

  • This PR closes #123 or Closes: #123

  • This PR resolves #123 or Resolves: #123

  • Other supported keywords: fix, fixed, close, closed, resolve, resolved
    Option 2: Link via GitHub UI (Note: won't clear the failed check)

  1. Go to the PR → Development section (right sidebar)

  2. Click "Link issue" and select an existing issue

  3. Push a new commit or re-run the workflow to clear the failed check
    Option 3: Use branch naming
    Create a new branch with one of these patterns:

  • 123-feature-description (number at start)

  • issue-123-feature-description (issue-number at start)

  • feature-issue-123 (issue-number anywhere)

Why is this required?

Issue linking ensures proper tracking, documentation, and helps maintain project history. It connects your code changes to the problem they solve.---

This comment was automatically generated by the issue linking workflow

@github-actions github-actions Bot added the Area : Frontend PR changes Angular/TypeScript frontend code label Apr 8, 2026
@claude
Copy link
Copy Markdown
Contributor

claude Bot commented Apr 8, 2026

Claude finished @rjvelazco's task in 2m 36s —— View job


PR Review

  • Read key files and analyze the diff
  • Review security issues
  • Review architecture and design
  • Review code quality issues
  • Post final review

Hardcoded JWT Token — Blocker

core-web/libs/new-block-editor/src/lib/editor/services/dot-cms.config.ts:6-7

A full JWT with expiry 2029 is committed to the repository. The "local demo" comment doesn't help — it's in git history permanently and is already distributed to every clone. The token is used in five places:

  • DotCmsUploadService (auth headers)
  • DotCmsContentletService (auth headers, twice)
  • DotCmsContentTypeService (auth header)
  • DotCmsLanguageService (auth header)
  • image-dialog and video-dialog import DOT_CMS_BASE_URL directly

This token should be revoked immediately and replaced with an injected config token (e.g. InjectionToken<DotCmsConfig>) supplied at bootstrap time, not baked into source. Until this is resolved, the PR should not merge. Fix this →


allowedBlocks Input Never Filters TipTap Extensions

core-web/libs/new-block-editor/src/lib/editor/editor.component.ts:255

readonly editor: Editor = new Editor({
    extensions: createEditorExtensions(this.menuService, this.allowedBlocks()),
    ...
});

This is a class field initializer. Angular sets signal-based input() values after construction, so this.allowedBlocks() returns undefined here. In createEditorExtensions, allowedBlocks = undefined means !allowedBlocks is always true, so every extension is always registered regardless of the input.

The slash menu and toolbar correctly check store.isAllowed() at interaction time, but TipTap itself will always have every extension registered. Blocked node types (e.g. table, codeBlock) can still be inserted via paste.

Options: move Editor construction into ngOnInit after inputs are resolved, or accept the current "UI-only restriction" behavior and document it explicitly. Fix this →


publishImageAsset and publishVideoAsset Are Identical

core-web/libs/new-block-editor/src/lib/editor/services/dot-cms-upload.service.ts:83-185

Both private methods POST to the same endpoint with the same body. They differ only in the satisfies type on the returned object. ~50 lines of duplicated code. Extract one publishAsset<T> method parameterized by the return shape. Fix this →


toPromise() Is Deprecated

core-web/libs/new-block-editor/src/lib/editor/services/dot-cms-upload.service.ts:43,47,55,59

.pipe(take(1)).toPromise() is deprecated in RxJS 7. Use firstValueFrom(observable) from rxjs instead. Fix this →


Removed Shared code CSS — Affects All Consumers

core-web/libs/dotcms-scss/angular/styles.scss (diff: lines 106-113 removed)

The code { color, background-color, padding, font-family, line-break } block was removed from a shared stylesheet imported by multiple apps, not just the block editor. Any app relying on this global style for inline code rendering will silently lose it. Verify no other portlet uses <code> elements styled by this rule before landing this change.


Upload Failures Are Silent to the User

core-web/libs/new-block-editor/src/lib/editor/editor.utils.ts:61,90

.catch((err) => {
    console.error('Image drop upload failed', err);
    removePlaceholder(editor, id);
});

The placeholder disappears on error but there's no user-visible notification. A toast or inline error state should communicate upload failure. console.error should not be the only signal.


Dead Scaffolding Files

core-web/libs/new-block-editor/src/lib/app.config.ts, app.routes.ts, app.spec.ts are never imported by anything in the codebase. app.spec.ts tests for h1 containing "Hello, block-editor" which doesn't exist in any template — the test suite will fail or produce a false positive. Delete all three. Fix this →


feature.md and PORTING_CHECKLIST.md in src/

core-web/libs/new-block-editor/src/feature.md and core-web/libs/new-block-editor/PORTING_CHECKLIST.md are planning/work-tracking documents that shouldn't live in the library source tree. Move them to a notes directory, a GitHub issue, or delete before merging.


Minor

  • EditorStore.loadLanguage on onInit will attempt a real API call using the hardcoded localhost token from first render — this means in any deployed environment where the token is invalid or the base URL is wrong, the language fetch silently fails and languageIso stays null.
  • UploadPlaceholderExtension name 'uploadPlaceholder': Per the library's own CLAUDE.md, node names are permanent. Confirm this is the intended serialized type key before any real content is written against it.

@claude
Copy link
Copy Markdown
Contributor

claude Bot commented Apr 8, 2026

Rollback Safety Analysis - Safe to Roll Back. All 9 changed files are frontend Angular config only (new-block-editor library scaffold). Label AI: Safe To Rollback applied.

Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 4 potential issues.

Fix All in Cursor

Bugbot Autofix is kicking off a free cloud agent to fix these issues. This run is complimentary, but you can enable autofix for all future PRs in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 77fd1d1. Configure here.

*/
export const DOT_CMS_BASE_URL = 'http://localhost:8080';
export const DOT_CMS_AUTH_TOKEN =
'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhcGljNjI1Yjg1NC0zYzc2LTRjMjItYTc0Yy00MWI1M2NkYmYwMzkiLCJ4bW9kIjoxNzc1NzY3MDM0MDAwLCJuYmYiOjE3NzU3NjcwMzQsImlzcyI6ImRvdGNtcy1wcm9kdWN0aW9uIiwibGFiZWwiOiJkZXYiLCJleHAiOjE4NzA0MDE2MDAsImlhdCI6MTc3NTc2NzAzNCwianRpIjoiOGI1M2VmNmYtNzA4OS00NThmLThjMjQtNDMzN2Y1MmNiMGRmIn0.4Y4SMqhMDG0vJ4xbMTZ2AtSAIeyB5NEgZ7yIUMWkASg';
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Hardcoded JWT auth token committed to repository

High Severity

A full JWT token is hardcoded in DOT_CMS_AUTH_TOKEN and will be committed to the repository. Even though the comment says "local demo," this token is used by multiple services (DotCmsUploadService, DotCmsContentletService, DotCmsContentTypeService) for Authorization: Bearer headers against a dotCMS instance. This token has an expiry date in 2029 and is now exposed in version control history permanently.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 77fd1d1. Configure here.

this.commandFn = null;
// isOpen and clientRectFn unchanged — menu is already visible and positioned
});
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Commented-out state updates cause stale menu display

Medium Severity

In openSubmenu(), the lines this.items.set([]), this.activeIndex.set(0), and this.isLoading.set(true) are all commented out. Similarly in setItems(), this.activeIndex.set(0) and this.isLoading.set(false) are commented out. This means the loading spinner never appears during async content-type fetches, stale items from the previous menu remain visible while loading, and activeIndex isn't reset when new sub-menu items arrive — risking an out-of-bounds selection on Enter.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 77fd1d1. Configure here.

}
})
]
};
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Unused library files: app config, routes, and spec

Low Severity

app.config.ts, app.routes.ts, and app.spec.ts in libs/new-block-editor/src/lib/ are never imported by anything in the codebase. The app.config.ts sets up provideRouter with empty routes and PrimeNG theming that no consumer uses. The app.spec.ts tests App for an h1 containing "Hello, block-editor" which doesn't exist in the actual App template. These appear to be leftover scaffolding files.

Additional Locations (2)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 77fd1d1. Configure here.

user-select: none !important;
}

code {
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Shared global code CSS removed affecting other consumers

Medium Severity

The global code element styling (color, background, padding, font-family, line-break) was removed from the shared styles.scss in libs/dotcms-scss/angular/. This is a shared stylesheet imported by multiple applications, not just the block editor. Removing this rule may break code element rendering across all consuming apps that relied on this global style.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 77fd1d1. Configure here.

…o dialogs, enhancing search and display functionality
@cursor
Copy link
Copy Markdown

cursor Bot commented Apr 10, 2026

You have used all of your free Bugbot PR reviews.

To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

@claude
Copy link
Copy Markdown
Contributor

claude Bot commented Apr 10, 2026

Rollback Safety Analysis

  • Read rollback-unsafe categories reference
  • Analyze PR diff against unsafe categories
  • Post results and apply labels

View job run

@claude
Copy link
Copy Markdown
Contributor

claude Bot commented Apr 10, 2026

Rollback Safety Analysis - Safe to Roll Back. All 57 changed files are frontend Angular/TypeScript only (new-block-editor library scaffold, block-editor app refactor, SCSS, package.json). No database migrations, Elasticsearch mapping changes, API contract changes, or any backend code modified. Label AI: Safe To Rollback applied.

@semgrep-code-dotcms-test
Copy link
Copy Markdown

Legal Risk

The following dependencies were released under a license that
has been flagged by your organization for consideration.

Recommendation

While merging is not directly blocked, it's best to pause and consider what it means to use this license before continuing. If you are unsure, reach out to your security team or Semgrep admin to address this issue.

GPL-2.0

MPL-2.0

…proved store management, and updated slash menu functionality

- Added a comprehensive porting checklist for tracking features in the new block editor.
- Introduced EditorStore for managing editor state, including allowed block types and language ID.
- Updated slash menu service to utilize the new store for block type filtering.
- Refactored image and video extensions to use consistent node names.
- Improved editor component with additional input properties for better integration with dotCMS content types.
- Cleaned up unused code and comments in editor click handling.

This commit enhances the overall functionality and maintainability of the new block editor.
…ure and state management

- Consolidated dialog handling into a single  to manage the state and payloads of various dialogs (image, link, video, etc.).
- Introduced a new  for consistent dialog presentation and behavior, including positioning and visibility management.
- Updated dialog components (image, link, table, emoji) to utilize the new dialog system, enhancing maintainability and reducing code duplication.
- Removed legacy dialog services to streamline the codebase and improve clarity.
- Replaced `EditorComponent` with `DotCMSEditorComponent` across various files for consistency.
- Removed unused global styles from `styles.css` and added new styles to `editor.component.css`.
- Introduced a new block options constant for better management of allowed blocks in the editor settings.
- Updated toolbar icons to use the correct Material Icons set.
- Improved the handling of editor content normalization and state management.

This refactor aims to streamline the block editor's structure and improve maintainability.
…date references

- Added support for the new "Material Symbols Outlined" font, including its CSS and SCSS definitions.
- Updated existing components to utilize the new font for toolbar icons, replacing legacy Material Icons references.
- Renamed legacy Material Icons to clarify their status as outdated.

This update enhances the iconography in the block editor, aligning with the latest design standards.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AI: Safe To Rollback Area : Frontend PR changes Angular/TypeScript frontend code

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

Refactor: Establish Block Editor Angular Standards and Documentation

1 participant