Skip to content

Refactor: Block Editor#35257

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

Refactor: Block Editor#35257
rjvelazco wants to merge 12 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 40s —— View job


PR Review

  • Gather context and understand the request
  • Read key changed files
  • Analyze security issues
  • Review architecture and design
  • Post review findings

This is a WIP PR and several issues need to be resolved before it's merge-ready.


🔴 Critical

1. Hardcoded JWT token committed to the repo

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

A real JWT token with a 2029 expiry is in the committed code. The "local demo only" comment does not change the fact that this token is now in git history permanently and usable by anyone who has read access to the repo. All three API services (DotCmsUploadService, DotCmsContentletService, DotCmsContentTypeService) pull it in at import time. This must be removed before merge — git history rewrite may also be needed depending on repo visibility.

Beyond just removing the value, the config file itself is the wrong pattern for a shared library. The consuming app should provide these values via an injection token:

export const DOT_CMS_CONFIG = new InjectionToken<{ baseUrl: string; authToken: string }>('DOT_CMS_CONFIG');

Services would then inject(DOT_CMS_CONFIG) and the bootstrap appConfig would provide real values. Fix this →

2. app.spec.ts test is broken

core-web/libs/new-block-editor/src/lib/app.spec.ts:22

expect(compiled.querySelector('h1')?.textContent).toContain('Hello, block-editor');

The App component (app.ts) renders <dot-block-editor /> — there is no h1 with that text. This test will fail in CI. Either fix it to test something real or delete it along with the other scaffolding files. Fix this →

3. Out-of-bounds activeIndex on Enter after submenu opens

core-web/libs/new-block-editor/src/lib/editor/slash-menu/slash-menu.service.ts:178

setItems() has this.activeIndex.set(0) commented out. If the main menu had the cursor at index 4 and the submenu returns 3 items, pressing Enter calls this.items()[4] which is undefined. this.select(undefined) will call commandFn(undefined). This is an unguarded crash path. Fix this →


🟡 Medium

4. allowedBlocks input changes don't update TipTap extensions

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

extensions: createEditorExtensions(this.menuService, this.allowedBlocks())

this.allowedBlocks() is evaluated once at field initialization, before any inputs are set. The effect() at line 167 only syncs allowedBlocks to the slash menu service — it does not re-configure extensions. If allowedBlocks changes after init, heading, table, etc. remain enabled/disabled based on the original value. This may be acceptable for the current use case (the app passes a static value), but it should be documented or enforced. If inputs can change, the editor would need to be destroyed and recreated.

5. Commented-out loading state in openSubmenu()

core-web/libs/new-block-editor/src/lib/editor/slash-menu/slash-menu.service.ts:163-166

this.items.set([]) and this.isLoading.set(true) are commented out. Per the inline comment, filterItems() returns [] during loading — but only if onUpdate fires, which requires the user to type. If the user doesn't type between opening the submenu and receiving results, stale items from the previous menu remain visible. The isLoading signal exists but is never set to true, so any loading indicator wired to it would never appear.

6. Removed code style from shared stylesheet

core-web/libs/dotcms-scss/angular/styles.scss

8 lines of code element styling (color, background, padding, font-family, line-break) were removed from a stylesheet consumed by multiple apps. If those apps relied on this global rule for <code> rendering, they'll regress silently. Verify no other app depends on this before merging.

7. toPromise() deprecated

core-web/libs/new-block-editor/src/lib/editor/services/dot-cms-upload.service.ts:30,34

.toPromise() is deprecated in RxJS 7+. Use firstValueFrom() or lastValueFrom() from rxjs. Fix this →

8. No user-visible upload error feedback

core-web/libs/new-block-editor/src/lib/editor/editor.utils.ts:58,65

Upload failures silently console.error and remove the placeholder. The user sees the placeholder disappear with no explanation. At minimum, a toast or inline error message should be surfaced.


🔵 Low / Informational

9. Unused scaffolding files in the lib

core-web/libs/new-block-editor/src/lib/app.config.ts, app.routes.ts, app.spec.ts — none of these are imported anywhere. They're leftover from nx generate. Delete them.

10. languageId:1 hard-coded in Lucene queries

core-web/libs/new-block-editor/src/lib/editor/services/dot-cms-contentlet.service.ts:37,41

Hard-coded +languageId:1 in both image and video search queries. Will silently return no results (or wrong results) in multi-language installations.

11. hostFolder: '' in asset publish

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

Uploads always publish to the site root folder. This should be configurable.


Summary

Three things block merge: the hardcoded token (security), the broken test (CI), and the out-of-bounds activeIndex (crash). Items 4–8 should be addressed before this leaves WIP. Items 9–11 are fine to track separately.

@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.

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