fix(frontend): Template Editor Rendering Issues

src/frontend/package.json

@@ -40,15 +40,14 @@
         "compile": "lingui compile --typescript"
     },
     "dependencies": {
-        "@codecov/vite-plugin": "^1.9.1",
         "@codemirror/autocomplete": "^6.20.1",
         "@codemirror/lang-liquid": "^6.3.2",
         "@codemirror/language": "^6.12.2",
         "@codemirror/lint": "^6.9.5",
         "@codemirror/search": "^6.6.0",
-        "@codemirror/state": "^6.5.4",
+        "@codemirror/state": "^6.6.0",
         "@codemirror/theme-one-dark": "^6.1.3",
-        "@codemirror/view": "6.39.16",
+        "@codemirror/view": "^6.40.0",
         "@emotion/react": "^11.13.3",
         "@fortawesome/fontawesome-svg-core": "^7.0.0",
         "@fortawesome/free-regular-svg-icons": "^7.0.0",
@@ -76,13 +75,13 @@
         "@sentry/react": "^10.43.0",
         "@tabler/icons-react": "^3.17.0",
         "@tanstack/react-query": "^5.56.2",
-        "@uiw/codemirror-theme-vscode": "4.25.7",
-        "@uiw/react-codemirror": "^4.25.7",
-        "@uiw/react-split": "^5.9.3",
+        "@uiw/codemirror-theme-vscode": "^4.25.8",
+        "@uiw/react-codemirror": "^4.25.8",
+        "@uiw/react-split": "^5.9.4",
         "@vanilla-extract/css": "^1.18.0",
         "axios": "^1.13.6",
         "clsx": "^2.1.1",
-        "codemirror": "6.0.2",
+        "codemirror": "^6.0.2",
         "dayjs": "^1.11.13",
         "dompurify": "^3.2.4",
         "easymde": "^2.18.0",
@@ -110,6 +109,7 @@
         "@babel/preset-react": "^7.28.5",
         "@babel/preset-typescript": "^7.28.5",
         "@babel/runtime": "^7.28.6",
+        "@codecov/vite-plugin": "^1.9.1",
         "@lingui/babel-plugin-lingui-macro": "^5.9.2",
         "@lingui/cli": "^5.9.2",
         "@lingui/macro": "^5.9.2",

src/frontend/tests/pui_printing.spec.ts

@@ -1,3 +1,4 @@
+import type { Locator } from '@playwright/test';
 import { expect, test } from './baseFixtures.js';
 import { adminuser } from './defaults.js';
 import { activateTableView, loadTab } from './helpers.js';
@@ -117,6 +118,14 @@
     .getByRole('cell', { name: 'InvenTree Stock Item Label (' })
     .click();
 
+  // check that styles are applied correctly
+  await expect(page.getByText('{% block style %}')).toBeVisible();
+  const element: Locator = page.getByText('block').first();
+  const color = await element.evaluate((el) => {
+    return window.getComputedStyle(el).getPropertyValue('color');
+  });
+  expect(color).toBe('rgb(78, 201, 176)');
+
   // Generate preview
   await page.getByLabel('split-button-preview-options-action').click();
   await page