dotCMS / dotCMS/core

fix(sdk-angular): lazy-load TinyMCE only when running inside UVE

Open
#35,441 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area : SDK stale Team : Scout
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 DotCMSEditableTextComponent should 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/angularDotCMSEditableTextComponent, public_api.ts, ng-package.json, package.json

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.