claire-peters · Jul 9, 2026 · Jul 9, 2026 · Jul 9, 2026
diff --git a/coldfront_notifications/campaign_sender.py b/coldfront_notifications/campaign_sender.py
@@ -13,8 +13,9 @@
 import time
 
 from django.conf import settings
-from django.core.mail import EmailMessage, get_connection
+from django.core.mail import EmailMessage, EmailMultiAlternatives, get_connection
 from django.utils import timezone
+from django.utils.html import strip_tags
 
 from .conf import BATCH_SIZE, BATCH_DELAY, MAX_RETRIES, RETRY_DELAY
 from .filters import RecipientResolver
@@ -239,14 +240,15 @@ def _deliver_emails(self, resolved_emails, snapshot):
                         if bcc:
                             bcc = list(dev_list)
 
-                message = EmailMessage(
+                message = EmailMultiAlternatives(
                     subject=rendered_subject,
-                    body=rendered_body,
+                    body=strip_tags(rendered_body),
                     from_email=campaign.sender,
                     to=to,
                     bcc=bcc,
                     reply_to=[campaign.reply_to] if campaign.reply_to else [],
                 )
+                message.attach_alternative(rendered_body, "text/html")
 
                 send_error = self.delivery.send_with_retry(message, connection)
                 if send_error is None:

diff --git a/coldfront_notifications/static/coldfront_notifications/css/compose.css b/coldfront_notifications/static/coldfront_notifications/css/compose.css
@@ -175,7 +175,7 @@
   display: inline-flex; align-items: center; gap: 4px; margin: 0; white-space: nowrap;
 }
 .recip-page-size-select {
-  width: auto !important; display: inline-block; padding: 2px 6px;
+  width: 52px !important; display: inline-block; padding: 2px 4px;
   font-size: .78rem; height: auto !important;
 }
 

diff --git a/coldfront_notifications/static/coldfront_notifications/js/campaign_detail.js b/coldfront_notifications/static/coldfront_notifications/js/campaign_detail.js
@@ -3,6 +3,11 @@
 //   CAMPAIGN_STATUS       - string ('queued', 'sending', 'sent', etc.)
 //   CAMPAIGN_PROGRESS_URL - URL for the progress JSON endpoint
 
+// Blur focused element before modal hides to avoid aria-hidden warning.
+$('#emailViewModal').on('hide.bs.modal', function() {
+  if (document.activeElement) document.activeElement.blur();
+});
+
 var STATUS_CLASSES = {
   sent:    'badge-success',
   sending: 'badge-primary',
@@ -49,7 +54,7 @@ $(function(){
   // Only init DataTable when there are real data rows.
   var realRows = $('#logTable tbody tr td:not([colspan])').length;
   if (realRows > 0) {
-    $('#logTable').DataTable({ order:[[2,'asc']], columnDefs:[{orderable:false,targets:[3]}] });
+    $('#logTable').DataTable({ order:[[2,'asc']], columnDefs:[{orderable:false,targets:[3]}], pagingType:'simple_numbers', pageLength:50, lengthMenu:[[50,100,250,-1],[50,100,250,'All']] });
   }
   // Start polling if campaign is in-flight.
   if (CAMPAIGN_STATUS === 'sending' || CAMPAIGN_STATUS === 'queued') {
@@ -62,6 +67,6 @@ $(document).on('click', '.view-email-btn', function() {
   $('#em-replyto').text($(this).attr('data-replyto') || '—');
   $('#em-to').text($(this).attr('data-email'));
   $('#em-subject').text($(this).attr('data-subject'));
-  $('#em-body').text($(this).attr('data-body'));
+  $('#em-body').html($(this).attr('data-body'));
   $('#emailViewModal').modal('show');
 });
diff --git a/coldfront_notifications/static/coldfront_notifications/js/compose_draft.js b/coldfront_notifications/static/coldfront_notifications/js/compose_draft.js
@@ -31,7 +31,7 @@ function _collectDraftData() {
     csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
     draft_pk: DRAFT_PK || '',
     subject: $('#id_subject').val() || '',
-    body: $('#id_body').val() || '',
+    body: getBodyContent() || '',
     sender: $('#id_sender').val() || '',
     reply_to: $('#id_reply_to').val() || '',
     template_id: $('#hidden_template_id').val() || '',
@@ -91,7 +91,7 @@ function restoreDraft(draftData) {
 
   // Restore form fields
   if (draftData.subject) $('#id_subject').val(draftData.subject);
-  if (draftData.body) $('#id_body').val(draftData.body);
+  if (draftData.body) setBodyContent(draftData.body);
   if (draftData.sender) $('#id_sender').val(draftData.sender);
   if (draftData.reply_to) $('#id_reply_to').val(draftData.reply_to);
   if (draftData.template_id) $('#hidden_template_id').val(draftData.template_id);

diff --git a/coldfront_notifications/static/coldfront_notifications/js/compose_init.js b/coldfront_notifications/static/coldfront_notifications/js/compose_init.js
@@ -8,6 +8,7 @@
 
 // ── Serialize filter hidden fields before submit ─────────────────
 $('#notifForm').on('submit', function() {
+  if (typeof tinymce !== 'undefined') tinymce.triggerSave();
   $('#h_projects').val(JSON.stringify($('#f_project').val() || []));
   $('#h_allocations').val(JSON.stringify($('#f_allocation').val() || []));
   $('#h_depts').val(JSON.stringify($('#f_dept').val() || []));
@@ -26,6 +27,21 @@ $(document).ready(function() {
     width: '100%',
     placeholder: function() { return $(this).data('placeholder'); }
   });
+
+  // Auto-select template if ?template=ID is in the URL
+  var params = new URLSearchParams(window.location.search);
+  var templateId = params.get('template');
+  if (templateId) {
+    // Delay slightly to ensure TinyMCE is initialized
+    setTimeout(function() {
+      var $item = $('.tmpl-item[data-id="' + templateId + '"]');
+      if ($item.length) {
+        $('.tmpl-item').removeClass('active');
+        $item.addClass('active');
+        loadTemplate($item);
+      }
+    }, 500);
+  }
 });
 
 // ── pageshow: reset validation state + refresh active template ────

diff --git a/coldfront_notifications/static/coldfront_notifications/js/compose_preview.js b/coldfront_notifications/static/coldfront_notifications/js/compose_preview.js
@@ -22,14 +22,14 @@ function renderPreviewSample(idx) {
     // "Template" — no recipient, raw tokens
     $('#prev-to').text('—');
     $('#prev-subject').text($('#id_subject').val() || '—');
-    $('#prev-body').text($('#id_body').val() || '—');
+    $('#prev-body').html(getBodyContent() || '—');
     $('#prev-error').hide();
     $('#prev-footer').text('Showing template with literal placeholders');
     return;
   }
   $('#prev-to').text((s.recipient.name || s.recipient.username) + ' <' + s.recipient.email + '>');
   $('#prev-subject').text(s.subject || '—');
-  $('#prev-body').text(s.body || '—');
+  $('#prev-body').html(s.body || '—');
   if (s.error) {
     $('#prev-error').text('Resolution error: ' + s.error).show();
   } else {
@@ -58,7 +58,7 @@ $(document).on('click', '#previewBtn', function() {
     data: {
       csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
       subject:      $('#id_subject').val() || '',
-      body:         $('#id_body').val()    || '',
+      body:         getBodyContent()       || '',
       filters:      JSON.stringify(collectFilters()),
       dedupe_users: JSON.stringify(getDedupeUsers()),
     },
@@ -212,7 +212,7 @@ function fetchPreviewPage(page) {
       alloc_status: $('#f_status').val()     || [],
       roles:        $('#f_role').val()       || [],
       subject:      $('#id_subject').val()   || '',
-      body:         $('#id_body').val()      || '',
+      body:         getBodyContent()         || '',
       dedupe_users: JSON.stringify(getDedupeUsers()),
       preview:      'true',
       page:         PREVIEW_PAGE,

diff --git a/coldfront_notifications/static/coldfront_notifications/js/compose_templates.js b/coldfront_notifications/static/coldfront_notifications/js/compose_templates.js
@@ -40,7 +40,7 @@ function renderVars(vars, filter) {
 // ── Extract tokens from subject + body ───────────────────────────
 var TOKEN_RE = /\{\{(\w+)\}\}/g;
 function extractTokens() {
-  var text = ($('#id_subject').val() || '') + '\n' + ($('#id_body').val() || '');
+  var text = ($('#id_subject').val() || '') + '\n' + (getBodyContent() || '');
   var seen = {};
   var out = [];
   var m;
@@ -66,7 +66,7 @@ function loadTemplate($el) {
   if (!id) { ACTIVE_VARS = []; renderVars([], ''); return; }
   $.getJSON(URLS.templateJson.replace('{id}', id), function(t) {
     $('#id_subject').val(t.subject || '');
-    $('#id_body').val(t.body || '');
+    setBodyContent(t.body || '');
     ACTIVE_VARS = t.variables || [];
     renderVars(ACTIVE_VARS, '');
     if (HAS_VALIDATED) runValidation();
@@ -99,10 +99,16 @@ $(document).on('input', '#varSearch', function() {
 
 // ── Variable insert at cursor ────────────────────────────────────
 $(document).on('click', '.var-btn', function() {
-  var ta    = document.getElementById('id_body');
   var token = $(this).attr('data-var');
-  var s = ta.selectionStart, e = ta.selectionEnd;
-  ta.value = ta.value.substring(0, s) + token + ta.value.substring(e);
-  ta.selectionStart = ta.selectionEnd = s + token.length;
-  ta.focus();
+  var editor = typeof tinymce !== 'undefined' && tinymce.get('id_body');
+  if (editor) {
+    editor.insertContent(token);
+    editor.focus();
+  } else {
+    var ta = document.getElementById('id_body');
+    var s = ta.selectionStart, e = ta.selectionEnd;
+    ta.value = ta.value.substring(0, s) + token + ta.value.substring(e);
+    ta.selectionStart = ta.selectionEnd = s + token.length;
+    ta.focus();
+  }
 });
diff --git a/coldfront_notifications/static/coldfront_notifications/js/compose_validate.js b/coldfront_notifications/static/coldfront_notifications/js/compose_validate.js
@@ -67,7 +67,7 @@ function runValidation() {
     data: {
       csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
       subject: $('#id_subject').val() || '',
-      body: $('#id_body').val() || '',
+      body: getBodyContent() || '',
       filters: JSON.stringify(collectFilters()),
       dedupe_users: JSON.stringify(getDedupeUsers()),
     },

diff --git a/coldfront_notifications/static/coldfront_notifications/js/datatables_init.js b/coldfront_notifications/static/coldfront_notifications/js/datatables_init.js
@@ -4,9 +4,26 @@
 //   DT_CONFIG - object with: { tableId, order, nonOrderableTargets, paging, searching, info }
 // All fields except tableId are optional.
 
+// Fix DataTables "Show entries" dropdown and search layout
+$('<style>')
+  .text(
+    '.dataTables_length label { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:.82rem; margin:8px 0 8px 8px; }' +
+    '.dataTables_length select { width:52px !important; padding:2px 4px; font-size:.82rem; height:auto !important; }' +
+    '.dataTables_filter label { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:.82rem; margin:8px 8px 8px 0; }' +
+    '.dataTables_filter input { width:auto !important; font-size:.82rem; }' +
+    '.dataTables_info { margin-left:8px; }' +
+    '.dataTables_paginate { flex-wrap:wrap; }'
+  )
+  .appendTo('head');
+
 $(function() {
   if (typeof DT_CONFIG === 'undefined') return;
 
+  // Skip init when the table has no real data rows (only a colspan empty-state row)
+  var $table = $('#' + DT_CONFIG.tableId);
+  var realRows = $table.find('tbody tr td:not([colspan])').length;
+  if (!realRows) return;
+
   var opts = {
     order: DT_CONFIG.order || [[0, 'asc']]
   };

diff --git a/coldfront_notifications/static/coldfront_notifications/js/template_form.js b/coldfront_notifications/static/coldfront_notifications/js/template_form.js
@@ -49,12 +49,18 @@ function renderVarRef() {
 }
 
 $(document).on('click', '.var-btn', function() {
-  var ta    = document.getElementById('id_body');
   var token = $(this).attr('data-var');
-  var s = ta.selectionStart, e = ta.selectionEnd;
-  ta.value = ta.value.substring(0, s) + token + ta.value.substring(e);
-  ta.selectionStart = ta.selectionEnd = s + token.length;
-  ta.focus();
+  var editor = typeof tinymce !== 'undefined' && tinymce.get('id_body');
+  if (editor) {
+    editor.insertContent(token);
+    editor.focus();
+  } else {
+    var ta = document.getElementById('id_body');
+    var s = ta.selectionStart, e = ta.selectionEnd;
+    ta.value = ta.value.substring(0, s) + token + ta.value.substring(e);
+    ta.selectionStart = ta.selectionEnd = s + token.length;
+    ta.focus();
+  }
 });
 
 $(document).on('input', '#varSearch', function() {

diff --git a/coldfront_notifications/static/coldfront_notifications/js/tinymce_init.js b/coldfront_notifications/static/coldfront_notifications/js/tinymce_init.js
@@ -0,0 +1,43 @@
+// tinymce_init.js — Shared TinyMCE configuration for email body editors.
+//
+// Initializes TinyMCE on #id_body with a limited toolbar suitable for
+// email content (bold, italic, underline, links, lists).
+//
+// Provides getBodyContent() and setBodyContent(html) helpers for other
+// modules that need to read/write the editor programmatically.
+
+function getBodyContent() {
+  var editor = tinymce.get('id_body');
+  return editor ? editor.getContent() : ($('#id_body').val() || '');
+}
+
+function setBodyContent(html) {
+  var editor = tinymce.get('id_body');
+  if (editor) {
+    editor.setContent(html || '');
+  } else {
+    $('#id_body').val(html || '');
+  }
+}
+
+$(document).ready(function() {
+  if (typeof tinymce === 'undefined') return;
+
+  tinymce.init({
+    selector: '#id_body',
+    menubar: false,
+    statusbar: false,
+    toolbar: 'bold italic underline | link unlink | bullist numlist | undo redo | removeformat',
+    plugins: 'link lists',
+    width: '100%',
+    height: 350,
+    content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; }',
+    link_default_target: '_blank',
+    forced_root_block: 'p',
+    setup: function(editor) {
+      editor.on('change keyup', function() {
+        editor.save();
+      });
+    }
+  });
+});
diff --git a/...nt_notifications/static/coldfront_notifications/vendor/tinymce/icons/default/icons.min.js b/...nt_notifications/static/coldfront_notifications/vendor/tinymce/icons/default/icons.min.js
diff --git a/...ont_notifications/static/coldfront_notifications/vendor/tinymce/langs/README.md b/...ont_notifications/static/coldfront_notifications/vendor/tinymce/langs/README.md
@@ -0,0 +1,3 @@
+This is where language files should be placed.
+
+Please DO NOT translate these directly, use this service instead: https://crowdin.com/project/tinymce
diff --git a/coldfront_notifications/static/coldfront_notifications/vendor/tinymce/license.txt b/coldfront_notifications/static/coldfront_notifications/vendor/tinymce/license.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Ephox Corporation DBA Tiny Technologies, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/...front_notifications/static/coldfront_notifications/vendor/tinymce/models/dom/model.min.js b/...front_notifications/static/coldfront_notifications/vendor/tinymce/models/dom/model.min.js
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		This is where language files should be placed.

		Please DO NOT translate these directly, use this service instead: https://crowdin.com/project/tinymce