Architecture Decision Records

Appearance

Configure TinyMCE License ​

  • Status: accepted
  • Deciders: Development Team
  • Date: 2026-04-28
  • Tags: tinymce, licensing, environment, frontend

Technical Story: Document how the Negotiate UI configures the commercial TinyMCE license key and where that configuration is consumed in the application.

Context and Problem Statement ​

The Negotiate UI uses a locally hosted TinyMCE installation and now requires a commercial license key to enable the editor in non-GPL mode. We need one documented, consistent place to configure that key and clear guidance on where the application reads and applies it.

Decision ​

The TinyMCE license key is configured through the frontend environment variable VITE_TINYMCE_LICENSE_KEY. This keeps the commercial key out of committed source, follows the project's existing frontend configuration pattern, and makes setup consistent across local development, tests, and CI/CD.

Configuration ​

Where the license key can be set ​

The TinyMCE license key is configured with the frontend environment variable VITE_TINYMCE_LICENSE_KEY.

For local development, set it in the project root .env file:

dotenv
VITE_TINYMCE_LICENSE_KEY=your-commercial-tinymce-license-key

For CI/CD or other build environments, set VITE_TINYMCE_LICENSE_KEY in the environment before running the frontend build. Because this application uses Vite, the value is injected at build time.

Where the license key is declared and mocked ​

  • vite-env.d.ts declares VITE_TINYMCE_LICENSE_KEY on ImportMetaEnv
  • vitest.config.js provides a test env value for Vitest runs
  • vitest.setup.js assigns a mock value onto import.meta.env during test setup

Usage ​

Where the license key is used in the app ​

The license key is consumed by the rich text editor wrapper in src/components/RichTextEditor/RichTextEditor.tsx.

That component:

  • reads the value from import.meta.env.VITE_TINYMCE_LICENSE_KEY
  • passes it to the TinyMCE React wrapper through the licenseKey prop
  • serves TinyMCE assets locally from /public/tinymce via base_url: '/tinymce'

Commercial self-hosted validation also depends on the TinyMCE premium licensekeymanager plugin assets being copied into the public TinyMCE directory.

This happens through the tinymce:copy-assets script in package.json, which copies:

  • core TinyMCE plugins, themes, skins, icons, and models
  • tinymce-premium/plugins/licensekeymanager into public/tinymce/plugins/licensekeymanager

Operational Notes ​

  • If the editor reports that no license key was provided, first confirm that VITE_TINYMCE_LICENSE_KEY is set and not commented out
  • Restart the Vite dev server after changing .env
  • If the app has already been built, rebuilding is required for a changed key to take effect
  • Related component documentation: src/components/RichTextEditor/README.md
  • Related implementation: src/components/RichTextEditor/RichTextEditor.tsx