fix(sdk-angular): lazy-load TinyMCE only when running inside UVE
Nobody has claimed this yet.
- Dominant language
- Java
- Stars
- 970
- Forks
- 486
- Avg merge
- 3d 33m
- Merged PRs (30d)
- 170
Description
Problem
@dotcms/angular statically imports @tinymce/tinymce-angular at the top level of its main bundle:
// dotcms-editable-text.component.ts
import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
Because DotCMSEditableTextComponent is exported from the primary entry point (public_api.ts), every consumer that installs @dotcms/angular must also install @tinymce/tinymce-angular — even if they never use inline editing. Without it, Vite/esbuild throws at runtime:
Uncaught Error: Could not resolve "@tinymce/tinymce-angular" imported by "@dotcms/angular". Is it installed?
TinyMCE is only needed when a page is loaded inside the Universal Visual Editor (UVE) in edit mode. There is no reason for it to be a required dependency for every headless Angular app.
Expected Behavior
- Consumers that don't use
DotCMSEditableTextComponentshould not need to install or bundle@tinymce/tinymce-angular - TinyMCE should only be loaded/resolved when the app is actually running inside UVE edit mode
Proposed Solution
Two complementary changes:
1. Move DotCMSEditableTextComponent to a secondary entry point
@dotcms/angular ← no TinyMCE dependency
@dotcms/angular/editable-text ← imports TinyMCE, for UVE inline editing only
This is the standard ng-packagr pattern for optional features. Consumers opt in by importing from the sub-path.
2. Lazy-load @tinymce/tinymce-angular at runtime
Inside DotCMSEditableTextComponent, replace the static import with a dynamic import() gated on isEditMode — so the module is never fetched when the page renders outside UVE.
Current Workaround
Example apps must add @tinymce/tinymce-angular to their own package.json to avoid the runtime error. This is a leaky implementation detail that should be invisible to consumers.
Affected Packages
core-web/libs/sdk/angular—DotCMSEditableTextComponent,public_api.ts,ng-package.json,package.json
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in core-web/libs/sdk/angular, reviewing DotCMSEditableTextComponent and the package's public_api.ts, ng-package.json, and package.json. Trace how the primary entry point exposes the component and how TinyMCE is currently imported. Done means headless consumers no longer need @tinymce/tinymce-angular, while UVE edit mode can load it when needed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 58/100