From c40bc6844ad33c171bf7483d29d3c20a4691a7c1 Mon Sep 17 00:00:00 2001
From: Mark Rapson <git@lzstealth.com>
Date: Tue, 27 Oct 2026 23:08:18 +0000
Subject: [PATCH] Fix template default editor font previews

---
 CHANGELOG.md                                        |  1 +
 src/web/routes/signage/templates/form-view-model.js |  2 ++
 test/templates.test.js                              | 11 +++++++++++
 3 files changed, 14 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d9ecff8..5fad777 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ All notable changes to this project will be documented in this file.
 
 ### Fixed
 
+- Template default-content WYSIWYG font menus now load managed font faces, matching slide editor previews.
 - Playlist offline fallback now uses only the current service-worker cache generation, and cached playlists no longer mask HTTP errors.
 
 ## 2.21.6 - 2026-10-27
diff --git a/src/web/routes/signage/templates/form-view-model.js b/src/web/routes/signage/templates/form-view-model.js
index 564d4c7..7ee88d2 100644
--- a/src/web/routes/signage/templates/form-view-model.js
+++ b/src/web/routes/signage/templates/form-view-model.js
@@ -46,6 +46,7 @@ function resolveTemplateCanvasSize(template, canvasSizes) {
 function buildTemplateFormViewModel(template, message, canvasSizes, currentUser, isEdit, mediaAssets, imageUploadMaxBytes, regionEditorData) {
   const current = resolveTemplateCanvasSize(template || buildDefaultTemplate(), canvasSizes || []);
   const assetVersion = Date.now().toString(36);
+  const fontLibrary = regionEditorData && regionEditorData.fontLibrary ? regionEditorData.fontLibrary : null;
 
   return {
     title: isEdit ? 'Edit template' : 'Create Template',
@@ -66,6 +67,7 @@ function buildTemplateFormViewModel(template, message, canvasSizes, currentUser,
     canvasSizes: canvasSizes || [],
     mediaAssets: Array.isArray(mediaAssets) ? mediaAssets : [],
     regionEditorData: regionEditorData || {},
+    stylesheets: fontLibrary && fontLibrary.stylesheetHref ? [fontLibrary.stylesheetHref] : [],
     imageUploadMaxBytes: Number(imageUploadMaxBytes) || 100 * 1024 * 1024,
     animationPresets: animationPresets,
     scripts: ['js/lib/modal.js?v=' + assetVersion, 'js/shared/region-layout.js?v=' + assetVersion, 'js/templates/animation-presets.js?v=' + assetVersion, 'vendor/qr-code-styling/qr-code-styling-loader.js?v=' + assetVersion].concat(getRegionEditorScripts(assetVersion), ['js/templates/template-designer-utils.js?v=' + assetVersion, 'js/shared/region-animation-controls.js?v=' + assetVersion, 'js/templates/template-designer.js?v=' + assetVersion])
diff --git a/test/templates.test.js b/test/templates.test.js
index 9c4dc8a..d1f64ee 100644
--- a/test/templates.test.js
+++ b/test/templates.test.js
@@ -12,6 +12,7 @@ const {
 } = require('../src/data/templates');
 const renderTemplateAddPage = require('../src/web/routes/signage/templates/add');
 const renderTemplateEditPage = require('../src/web/routes/signage/templates/edit');
+const { buildTemplateFormViewModel } = require('../src/web/routes/signage/templates/form-view-model');
 const { buildDuplicateTemplateName, buildDuplicateTemplate } = require('../src/web/routes/signage/templates/duplicate');
 const { buildThumbnailPreviewPayload } = require('../src/web/lib/media/slide-thumbnails');
 
@@ -610,6 +611,16 @@ test('template default content adapter reuses slide region helpers and TinyMCE c
   assert.match(source, /createSlideFormEditorController/);
 });
 
+test('template editor loads the managed font stylesheet for its WYSIWYG font menu', () => {
+  const viewModel = buildTemplateFormViewModel(null, '', [], null, false, [], 0, {
+    fontLibrary: { stylesheetHref: '/media/fonts.css', fontFamilyFormats: 'Display Face="Display Face"' }
+  });
+
+  assert.deepEqual(viewModel.stylesheets, ['/media/fonts.css']);
+  assert.equal(viewModel.regionEditorData.fontLibrary.stylesheetHref, '/media/fonts.css');
+  assert.deepEqual(buildTemplateFormViewModel(null, '', [], null, false, [], 0, {}).stylesheets, []);
+});
+
 test('template designer restores region default content and read-only state from saved data', () => {
   const source = fs.readFileSync(require.resolve('../src/web/public/js/templates/template-designer.js'), 'utf8');
   const match = source.match(/  function populateRegionCard\([^]*?\n  }/);