f17a82610a
* Update dependency ckeditor5 to v49
* Add editor crash recovery and complete the CKEditor 5 v49 migration
CKEditor 5 v49 removed the Watchdog, so crashed editors are no longer
restarted automatically. The editor wrapper now recreates a crashed
editor from the content synced to its form element (up to 3 times
within a 5s window) and locks it read-only if it keeps crashing, so
the last known-good content is never lost and forms stay submittable.
Also replaces the deprecated ClassicEditor.create() overload with the
config-only form, and drops the dark-mode inline-style hack from the
wysiwyg() Twig function - the refreshed v49 theme pins the editor
colors itself.
* [CodeFactor] Apply fixes to commit b6aa70c
* Address review: reuse editor wrapper and clean up bookkeeping
Recovery now swaps the recreated CKEditor instance into the existing
normalized wrapper via replaceRaw() instead of building a second
wrapper, so references held by callers (element.editor, the resolved
create() promise) stay valid and their change listeners survive.
Editor destruction now unregisters the editor from the page-level
error registry and drops its crash record, instead of retaining both
for the life of the page.
---------
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Adam Daley <admdly@users.noreply.github.com>
Co-authored-by: codefactor-io <support@codefactor.io>
Frontend and Theme Builds
FOSSBilling builds shared browser assets from frontend/ and theme assets from each theme workspace.
Build Commands
npm run buildchecks frontend source, builds core assets, and builds all themes.npm run build:productionruns the same build withNODE_ENV=production.npm run checkruns lightweight JavaScript syntax checks and validates theme icon manifests.npm run build-admin_defaultandnpm run build-huragabuild a single theme.
Generated assets are written to src/public/assets and src/themes/**/assets/build. These paths are ignored by Git and are copied into release artifacts by the Docker build.
Admin widget regression tests use isolated browser fixtures and require no application database or admin credentials. Build production assets first so the tests cover purged CSS:
npm run build:production
npx playwright test tests/E2E/Playwright/specs/admin/tabler-widgets.spec.ts
Theme Dependencies
Themes own the UI packages they consume. Shared tooling in frontend/tools can help compile assets, generate sprites, and post-process CSS, but it should not make a theme depend on a specific UI package.
Examples (the shipped default theme package bundles both — src/themes/default/admin and src/themes/default/client; their npm workspace package names, admin_default and huraga, are unrelated to their directory paths):
admin_default(src/themes/default/admin) owns Tabler, Coloris, Chart.js, Vanilla Calendar Pro, Tom Select, Flag Icons, and its Tabler icon package.huraga(src/themes/default/client) owns Bootstrap, Tom Select, Flag Icons, and its Tabler icon package.svg-spriteis a root development dependency because the shared sprite helper imports it.
The admin theme uses Tabler's component bundle and data-bs-* APIs. Do not load Bootstrap's JavaScript alongside it. The tabler global exposes the bundle; bootstrap remains a compatibility alias for extensions.
When using admin components:
- Keep
.datepicker,YYYY-MM-DD, anddata-name-from/data-name-tofor API date fields. The datepicker adapter loads Vanilla Calendar Pro and synchronizes range values within each form. - Use the clipboard adapter to retain copy support on HTTP and when Clipboard API access is denied.
- Use
partial_password_strength.html.twigfor translated password feedback; server-side validation remains authoritative. - Use
data-bs-toggle="autosize"for plain-text notes, not CKEditor fields. Growth is capped at 24rem.
Icons
Theme icon sprites are generated from each theme's icon-manifest.json.
- Add static SVG icon usage to the relevant theme manifest.
- Mark icons as
"dynamic": truewhen the icon name is resolved at runtime, such as admin navigation icons from module metadata. - Put theme-specific SVG files in the theme's
custom-iconsdirectory. - Reference generated symbols with inline sprite IDs, for example
<use href="#home" />.
Run npm run check-icons before changing icon usage.
CSS
Theme vendor CSS belongs in src/themes/**/assets/css/vendor.css. Theme-specific styles belong in the theme Sass entrypoint. Rules that are genuinely identical across the default admin and client themes belong in frontend/styles/_shared-theme.scss instead of being duplicated.
Load Tom Select's base preset before tabler-vendors.css so Tabler's sizing, validation, focus, and theme styles take precedence. Avoid fixed input heights.
Use form-text for admin form help text, preserve visible keyboard focus indicators, and use color tokens with color-mix() instead of deprecated RGB tokens.
PurgeCSS runs only for production builds. A PurgeCSS failure fails production builds so release CSS problems are caught early. Preserve selectors generated by runtime components, including the calendar's data-vc-* states.