Hotfix: TinyMCE dark mode

CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [6.2.10] - 27 March 2026
+
+### Changed
+
+* Updated TinyMCE to work better with Ghostwriter's dark mode using a new dark-mode skin
+
+### Fixed
+
+* Fixed TinyMCE editors not initiating correctly for the "Results" field on objectives when adding new forms
+* Fixed TinyMCE editors sometimes appearing with a very short height and needing to be resized
+
 ## [6.2.9] - 23 March 2026
 
 ### Changed

VERSION

@@ -1,2 +1,2 @@
-v6.2.9
-23 March 2026
+v6.2.10
+27 March 2026

config/settings/base.py

@@ -11,9 +11,9 @@
 # 3rd Party Libraries
 import environ
 
-__version__ = "6.2.9"
+__version__ = "6.2.10"
 VERSION = __version__
-RELEASE_DATE = "23 March 2026"
+RELEASE_DATE = "27 March 2026"
 
 ROOT_DIR = Path(__file__).resolve(strict=True).parent.parent.parent
 APPS_DIR = ROOT_DIR / "ghostwriter"

ghostwriter/rolodex/forms_project.py

@@ -610,6 +610,7 @@ class Meta:
         }
         field_classes = {
             "description": JinjaRichTextField,
+            "result": JinjaRichTextField,
         }
 
     def __init__(self, *args, **kwargs):
@@ -622,6 +623,7 @@ def __init__(self, *args, **kwargs):
         self.fields["description"].widget.attrs[
             "placeholder"
         ] = "The task is to escalate privileges to a domain admin and..."
+        self.fields["result"].widget.attrs["placeholder"] = "Document the outcome, evidence, or result of this objective..."
         self.fields["priority"].empty_label = "-- Prioritize Objective --"
         self.helper = FormHelper()
         # Disable the <form> tags because this will be inside an instance of `ProjectForm()`

ghostwriter/rolodex/templates/rolodex/project_form.html

@@ -76,6 +76,14 @@
       field.val(new Date().toJSON().slice(0, 19));
     }
 
+    function initTinyMceEditors($container) {
+      $container.find('textarea').not('.no-auto-tinymce, .empty-form').each(function () {
+        if (this.id) {
+          tinymce.execCommand('mceAddEditor', false, this.id);
+        }
+      });
+    }
+
     {% comment %} Formset Manipulation Buttons {% endcomment %}
     $('.formset-add-{{ objectives.prefix }}').click(function () {
       let form_idx = $('#id_{{ objectives.prefix }}-TOTAL_FORMS').val();
@@ -84,10 +92,7 @@
       let new_form = $('#formset-{{ objectives.prefix }}').find('div.formset-container').last()
       new_form.find('span.counter').html(parseInt(form_idx) + 1);
       new_form.fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
-      let target = 'id_{{ objectives.prefix }}-' + parseInt(form_idx) + '-description'
-      let objResult = 'id_{{ objectives.prefix }}-' + parseInt(form_idx) + '-result'
-      tinymce.execCommand('mceAddEditor', false, target);
-      tinymce.execCommand('mceAddEditor', false, objResult);
+      initTinyMceEditors(new_form);
     });
 
     $('.formset-add-{{ assignments.prefix }}').click(function () {
@@ -97,8 +102,7 @@
       let new_form = $('#formset-{{ assignments.prefix }}').find('div.formset-container').last()
       new_form.find('span.counter').html(parseInt(form_idx) + 1);
       new_form.fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
-      let target = 'id_{{ assignments.prefix }}-' + parseInt(form_idx) + '-description'
-      tinymce.execCommand('mceAddEditor', false, target);
+      initTinyMceEditors(new_form);
     });
 
     $('.formset-add-{{ invites.prefix }}').click(function () {
@@ -108,8 +112,7 @@
       let new_form = $('#formset-{{ invites.prefix }}').find('div.formset-container').last()
       new_form.find('span.counter').html(parseInt(form_idx) + 1);
       new_form.fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
-      let target = 'id_{{ invites.prefix }}-' + parseInt(form_idx) + '-comment'
-      tinymce.execCommand('mceAddEditor', false, target);
+      initTinyMceEditors(new_form);
     });
 
     $('.formset-add-{{ scopes.prefix }}').click(function () {
@@ -119,8 +122,7 @@
       let new_form = $('#formset-{{ scopes.prefix }}').find('div.formset-container').last()
       new_form.find('span.counter').html(parseInt(form_idx) + 1);
       new_form.fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
-      let target = 'id_{{ scopes.prefix }}-' + parseInt(form_idx) + '-description'
-      tinymce.execCommand('mceAddEditor', false, target);
+      initTinyMceEditors(new_form);
     });
 
     $('.formset-add-{{ targets.prefix }}').click(function () {
@@ -130,8 +132,7 @@
       let new_form = $('#formset-{{ targets.prefix }}').find('div.formset-container').last()
       new_form.find('span.counter').html(parseInt(form_idx) + 1);
       new_form.fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
-      let target = 'id_{{ targets.prefix }}-' + parseInt(form_idx) + '-description'
-      tinymce.execCommand('mceAddEditor', false, target);
+      initTinyMceEditors(new_form);
     });
 
     $('.formset-add-{{ whitecards.prefix }}').click(function () {
@@ -141,8 +142,7 @@
       let new_form = $('#formset-{{ whitecards.prefix }}').find('div.formset-container').last()
       new_form.find('span.counter').html(parseInt(form_idx) + 1);
       new_form.fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
-      let target = 'id_{{ whitecards.prefix }}-' + parseInt(form_idx) + '-description'
-      tinymce.execCommand('mceAddEditor', false, target);
+      initTinyMceEditors(new_form);
     });
 
     $('.formset-add-{{ contacts.prefix }}').click(function () {
@@ -152,8 +152,7 @@
       let new_form = $('#formset-{{ contacts.prefix }}').find('div.formset-container').last()
       new_form.find('span.counter').html(parseInt(form_idx) + 1);
       new_form.fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
-      let target = 'id_{{ contacts.prefix }}-' + parseInt(form_idx) + '-description'
-      tinymce.execCommand('mceAddEditor', false, target);
+      initTinyMceEditors(new_form);
     });
 
     {% comment %} Roll Codename with AJAX {% endcomment %}

ghostwriter/static/css/base_styles.css

@@ -17,6 +17,7 @@
   --warning-color: #F4B083;
   --ghost-white: #F0EFF4;
   --ghost-grey: #6C809A;
+  --placeholder-color: #aaa;
 
   /* TEXT */
   --h1-font-color: #6D70A7;

ghostwriter/static/css/styles.css

@@ -4185,6 +4185,160 @@ input[type="color"]:focus,
   color: #fff;
 }
 
+/* TinyMCE dark mode */
+[data-theme="dark"] .tox,
+[data-theme="dark"] .tox .tox-tbtn,
+[data-theme="dark"] .tox .tox-mbtn,
+[data-theme="dark"] .tox .tox-statusbar,
+[data-theme="dark"] .tox .tox-statusbar a,
+[data-theme="dark"] .tox .tox-statusbar__path-item,
+[data-theme="dark"] .tox .tox-statusbar__wordcount,
+[data-theme="dark"] .tox .tox-collection__item,
+[data-theme="dark"] .tox .tox-collection__group-heading,
+[data-theme="dark"] .tox .tox-dialog__title,
+[data-theme="dark"] .tox .tox-label,
+[data-theme="dark"] .tox .tox-textfield,
+[data-theme="dark"] .tox .tox-textarea,
+[data-theme="dark"] .tox .tox-listboxfield .tox-listbox--select,
+[data-theme="dark"] .tox .tox-selectfield select {
+  color: var(--main-txt-color);
+}
+
+[data-theme="dark"] .tox.tox-tinymce,
+[data-theme="dark"] .tox .tox-editor-header,
+[data-theme="dark"] .tox .tox-toolbar-overlord,
+[data-theme="dark"] .tox .tox-toolbar,
+[data-theme="dark"] .tox .tox-toolbar__primary,
+[data-theme="dark"] .tox .tox-toolbar__overflow,
+[data-theme="dark"] .tox .tox-menubar,
+[data-theme="dark"] .tox .tox-statusbar,
+[data-theme="dark"] .tox .tox-tinymce-aux,
+[data-theme="dark"] .tox .tox-menu,
+[data-theme="dark"] .tox .tox-collection,
+[data-theme="dark"] .tox .tox-autocompleter,
+[data-theme="dark"] .tox .tox-dialog,
+[data-theme="dark"] .tox .tox-dialog__header,
+[data-theme="dark"] .tox .tox-dialog__body,
+[data-theme="dark"] .tox .tox-dialog__footer,
+[data-theme="dark"] .tox .tox-dialog__body-nav,
+[data-theme="dark"] .tox .tox-pop {
+  background-color: var(--search-input-background-color);
+}
+
+[data-theme="dark"] .tox.tox-tinymce,
+[data-theme="dark"] .tox .tox-editor-header,
+[data-theme="dark"] .tox .tox-toolbar-overlord,
+[data-theme="dark"] .tox .tox-menubar,
+[data-theme="dark"] .tox .tox-statusbar,
+[data-theme="dark"] .tox .tox-toolbar__group,
+[data-theme="dark"] .tox .tox-tbtn,
+[data-theme="dark"] .tox .tox-mbtn,
+[data-theme="dark"] .tox .tox-menu,
+[data-theme="dark"] .tox .tox-collection,
+[data-theme="dark"] .tox .tox-dialog,
+[data-theme="dark"] .tox .tox-dialog__header,
+[data-theme="dark"] .tox .tox-dialog__footer,
+[data-theme="dark"] .tox .tox-dialog__body-nav,
+[data-theme="dark"] .tox .tox-textfield,
+[data-theme="dark"] .tox .tox-textarea,
+[data-theme="dark"] .tox .tox-listboxfield .tox-listbox--select,
+[data-theme="dark"] .tox .tox-selectfield select,
+[data-theme="dark"] .tox .tox-checkbox__icons,
+[data-theme="dark"] .tox .tox-collection--list .tox-collection__item,
+[data-theme="dark"] .tox .tox-menu-nav__js,
+[data-theme="dark"] .tox .tox-swatches-menu {
+  border-color: var(--search-box-shadow);
+}
+
+[data-theme="dark"] .tox .tox-icon svg,
+[data-theme="dark"] .tox .tox-tbtn svg,
+[data-theme="dark"] .tox .tox-mbtn svg,
+[data-theme="dark"] .tox .tox-collection__item-icon svg,
+[data-theme="dark"] .tox .tox-statusbar__resize-handle svg,
+[data-theme="dark"] .tox .tox-dialog__header .tox-icon svg {
+  fill: var(--main-txt-color);
+}
+
+[data-theme="dark"] .tox .tox-mbtn:hover,
+[data-theme="dark"] .tox .tox-mbtn:focus,
+[data-theme="dark"] .tox .tox-tbtn:hover,
+[data-theme="dark"] .tox .tox-tbtn:focus,
+[data-theme="dark"] .tox .tox-collection__item--enabled:hover,
+[data-theme="dark"] .tox .tox-collection__item--active,
+[data-theme="dark"] .tox .tox-listboxfield .tox-listbox--select:hover,
+[data-theme="dark"] .tox .tox-selectfield select:hover,
+[data-theme="dark"] .tox .tox-dialog__body-nav-item:hover {
+  background-color: var(--sidebar-hover-background-color);
+  color: var(--ghost-white);
+}
+
+[data-theme="dark"] .tox .tox-mbtn:hover svg,
+[data-theme="dark"] .tox .tox-mbtn:focus svg,
+[data-theme="dark"] .tox .tox-tbtn:hover svg,
+[data-theme="dark"] .tox .tox-tbtn:focus svg,
+[data-theme="dark"] .tox .tox-collection__item--enabled:hover svg,
+[data-theme="dark"] .tox .tox-collection__item--active svg {
+  fill: var(--ghost-white);
+}
+
+[data-theme="dark"] .tox .tox-tbtn--enabled,
+[data-theme="dark"] .tox .tox-tbtn--enabled:hover,
+[data-theme="dark"] .tox .tox-mbtn--active,
+[data-theme="dark"] .tox .tox-dialog__body-nav-item--active,
+[data-theme="dark"] .tox .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  background-color: rgba(80, 176, 113, 0.18);
+  color: var(--ghost-white);
+}
+
+[data-theme="dark"] .tox .tox-dialog__body-nav-item--active {
+  border-bottom-color: var(--primary-color);
+}
+
+[data-theme="dark"] .tox .tox-button:not(.tox-button--naked) {
+  background-color: var(--button-primary-color);
+  border-color: var(--button-primary-color);
+  color: #fff;
+}
+
+[data-theme="dark"] .tox .tox-button:not(.tox-button--naked):hover,
+[data-theme="dark"] .tox .tox-button:not(.tox-button--naked):focus {
+  background-color: #5fc587;
+  border-color: #5fc587;
+  color: #fff;
+}
+
+[data-theme="dark"] .tox .tox-dialog-wrap__backdrop {
+  background-color: rgba(0, 0, 0, 0.55);
+}
+
+[data-theme="dark"] .tox .tox-tooltip__body {
+  background-color: var(--sidebar-background-color);
+  color: var(--main-txt-color);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+}
+
+[data-theme="dark"] .tox .tox-tooltip--down .tox-tooltip__arrow {
+  border-top-color: var(--sidebar-background-color);
+}
+
+[data-theme="dark"] .tox .tox-tooltip--up .tox-tooltip__arrow {
+  border-bottom-color: var(--sidebar-background-color);
+}
+
+[data-theme="dark"] .tox .tox-tooltip--right .tox-tooltip__arrow {
+  border-left-color: var(--sidebar-background-color);
+}
+
+[data-theme="dark"] .tox .tox-tooltip--left .tox-tooltip__arrow {
+  border-right-color: var(--sidebar-background-color);
+}
+
+[data-theme="dark"] .tox .tox-textfield::placeholder,
+[data-theme="dark"] .tox .tox-textarea::placeholder {
+  color: #999;
+  opacity: 1;
+}
+
 [data-theme="dark"] .richtext-evidence-name,
 [data-theme="dark"] .richtext-evidence-caption,
 [data-theme="dark"] .tiptap blockquote p,
@@ -4647,4 +4801,4 @@ html[data-bs-theme="dark"] .modal .close {
   max-width: 100%;
   font-family: 'Courier New', Courier, monospace;
   font-size: 0.9rem;
-}
+}

ghostwriter/static/css/wysiwyg_styles.css

@@ -6,6 +6,6 @@
 ----------------------------------------------------- */
 
 .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
-  color: var(--primary-color);
+  color: var(--placeholder-color, #aaa);
   opacity: 0.75;
 }