Feat: add TipTap Admin Editor styles and update SCSS file references

Author: maxnoelp2

docs/frontend_development_guide.rst

@@ -75,11 +75,89 @@ File Structure
    backend/static/
    ├── scss/
    │   ├── main.scss          # Main SCSS entry point
+   │   ├── tiptap_admin.scss  # TipTap Admin Editor styles
    |   ├── theme/**.scss      # Bootstrap SCSS files
    │   └── **/*.scss          # All SCSS files (watched)
-   └── css/
-       ├── main.css           # Compiled CSS output
-       └── main.css.map       # Source map (dev mode only)
+   ├── css/
+   │   ├── main.css           # Compiled CSS output
+   │   └── main.css.map       # Source map (dev mode only)
+   └── djangocms_text/css/
+       └── tiptap.admin.css   # Admin Editor styles (generated)
+
+TipTap Admin Editor Styles
+===========================
+
+The project includes a separate SCSS file for styling the djangoCMS Text Editor (TipTap) in the admin interface. This ensures that colors and styles in the editor match your theme settings.
+
+What It Does
+------------
+
+The ``tiptap_admin.scss`` file:
+
+- Imports your theme variables (colors, fonts, etc.)
+- Defines CSS classes for text and background colors used in the editor
+- Compiles to ``backend/static/djangocms_text/css/tiptap.admin.css``
+- Uses the same color values as your frontend theme
+- Scopes all styles under ``.cms-admin`` to avoid conflicts
+
+How It Works
+------------
+
+When you run ``npm run dev`` or ``npm run build``, two CSS files are compiled **in parallel**:
+
+1. **main.css** - Your frontend styles
+2. **tiptap.admin.css** - Admin editor styles
+
+The build process automatically:
+
+- Reads your theme colors from ``_variables.scss``
+- Generates matching CSS for the editor
+- Outputs to ``backend/static/djangocms_text/css/tiptap.admin.css``
+
+Customizing Editor Colors
+--------------------------
+
+To add or modify colors in the editor:
+
+1. **Update the SCSS file:**
+
+   Edit ``backend/static/scss/tiptap_admin.scss`` and add your color class:
+
+   .. code-block:: scss
+
+      .cms-admin {
+          .text-custom {
+              color: $your-custom-color !important;
+          }
+      }
+
+2. **Register in Django settings:**
+
+   Add the color to ``TEXT_EDITOR_SETTINGS`` in ``backend/settings.py``:
+
+   .. code-block:: python
+
+      TEXT_EDITOR_SETTINGS = {
+          "textColors": {
+              "text-custom": {"name": "Custom Color"},
+              # ... other colors
+          },
+      }
+
+3. **Rebuild CSS:**
+
+   The watcher will automatically rebuild, or run manually:
+
+   .. code-block:: bash
+
+      npx gulp styles
+
+Why No Source Maps?
+--------------------
+
+The ``tiptap.admin.css`` file is intentionally compiled **without source maps** to keep the admin interface clean. The file is simple enough for debugging without source maps, and it reduces clutter in the admin CSS directory.
+
+If you need source maps for debugging, you can modify ``gulpfile.js`` line 40-52 to add ``sourcemaps.init()`` and ``sourcemaps.write(".")``.
 
 Local Development Workflow
 ===========================
@@ -173,6 +251,27 @@ Docker vs Local
 - **Local development**: You need to run ``npm install`` and ``npm run dev`` on your host machine
 - ``node_modules/`` is in ``.gitignore`` (correct) - each environment needs its own installation
 
+TipTap Admin CSS not updating
+------------------------------
+
+If changes to ``tiptap_admin.scss`` aren't reflected in the admin:
+
+1. Verify the file is being compiled:
+
+   .. code-block:: bash
+
+      ls -la backend/static/djangocms_text/css/tiptap.admin.css
+
+2. Check that the file is not in ``.gitignore`` (it should be)
+3. Rebuild manually:
+
+   .. code-block:: bash
+
+      npx gulp styles
+
+4. Restart Django (``python manage.py runserver`` or ``docker compose restart``)
+5. Hard refresh browser in admin (Ctrl+F5)
+
 Adding New SCSS Files
 ======================
 

gulpfile.js

@@ -12,7 +12,7 @@ const isProd = process.env.NODE_ENV === "production";
 
 const paths = {
   entry: "backend/static/scss/main.scss",
-  tiptapAdmin: "backend/static/scss/tiptap-admin.scss",
+  tiptapAdmin: "backend/static/scss/tiptap_admin.scss",
   scss: "backend/static/scss/**/*.scss",
   outDir: "backend/static/css",
   tiptapOutDir: "backend/static/djangocms_text/css",