From 271c4fb670a97e5bd1e2feeff4df6bc877201977 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20B=C3=BCrk?= <stefan@buerk.tech>
Date: Tue, 7 Jul 2026 14:30:28 +0200
Subject: [PATCH] [TASK] DPL-177: Make readability bar a lit component

The CKEditor "DeepL Write" overlay rendered its readability
progress bar with an inline <style> block and inline
style="--value" attributes in the Core13 and Core14 Edit
templates. Inline styles are blocked by a tightened backend
Content-Security-Policy (style-src without 'unsafe-inline')
and are poor practice regardless.

Encapsulate the bar in a dedicated lit web component,
<deepl-write-readability>. Its CSS lives in the shadow DOM and
is emitted as a nonce-carrying <style> via the core styleTag()
helper (@typo3/core/lit-helper.js), so it is CSP compliant
(style-src 'nonce-...') and fully isolated from other
components.

A constructable stylesheet (lit static styles) cannot be used:
@typo3/backend/modal.js relocates the overlay content into the
top-level backend document, and a stylesheet constructed in the
FormEngine iframe realm cannot be adopted into a shadow root
owned by the top document. Rendering the <style> into the
template instead creates it in the shadow root's own document
and carries that document's litNonce.

Both Edit templates drop the <style> block and the
style="--value" attributes; the progress markup becomes the
custom element. The plugin now only sets element.value, while
the component clamps, formats and renders. The marker position
still rides on the --value custom property set via CSSOM, which
is not governed by CSP.
---
 Configuration/JavaScriptModules.php           |   1 +
 .../Backend/Templates/CkEditor/Edit.html      |  71 +---------
 .../Backend/Templates/CkEditor/Edit.html      |  71 +---------
 .../JavaScript/Ckeditor/deeplwrite-plugin.js  |  11 +-
 .../Ckeditor/readability-progress.js          | 127 ++++++++++++++++++
 5 files changed, 136 insertions(+), 145 deletions(-)
 create mode 100644 Resources/Public/JavaScript/Ckeditor/readability-progress.js

diff --git a/Configuration/JavaScriptModules.php b/Configuration/JavaScriptModules.php
index 5aead7b..bcd3de6 100644
--- a/Configuration/JavaScriptModules.php
+++ b/Configuration/JavaScriptModules.php
@@ -7,5 +7,6 @@
     ],
     'imports' => [
         '@web-vision/deepl-write/deeplwrite-plugin.js' => 'EXT:deepl_write/Resources/Public/JavaScript/Ckeditor/deeplwrite-plugin.js',
+        '@web-vision/deepl-write/readability-progress.js' => 'EXT:deepl_write/Resources/Public/JavaScript/Ckeditor/readability-progress.js',
     ],
 ];
diff --git a/Resources/Private/Core13/Backend/Templates/CkEditor/Edit.html b/Resources/Private/Core13/Backend/Templates/CkEditor/Edit.html
index c4066fb..baaca12 100644
--- a/Resources/Private/Core13/Backend/Templates/CkEditor/Edit.html
+++ b/Resources/Private/Core13/Backend/Templates/CkEditor/Edit.html
@@ -4,67 +4,6 @@
     xmlns:deeplWrite="http://typo3.org/ns/WebVision/DeeplWrite/ViewHelpers"
     data-namespace-typo3-fluid="true"
 >
-<style>
-    /* CSS */
-    .progress {
-        --value: 0; /* 0–100 */
-
-        position: relative;
-        width: 100%;
-        height: 20px;
-        border-radius: var(--typo3-input-border-radius);
-        margin-top: 20px;
-        margin-bottom: 10px;
-
-        /* Full-width rainbow background (not clipped) */
-        background: linear-gradient(
-            to right,
-            #ff0000,
-            #ff7a00,
-            #ffd400,
-            #a8ff00,
-            #00a400
-        );
-        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
-        overflow: visible;
-    }
-
-    /* Slim vertical marker showing the current percentage */
-    .progress .marker {
-        position: absolute;
-        top: -4px;
-        bottom: -4px;
-        width: 2px;
-        left: calc(var(--value) * 1%);
-        transform: translateX(-1px);
-        background: #111;
-        border-radius: 2px;
-        box-shadow:
-            0 0 0 2px #fff,
-            0 0 0 3px rgba(0,0,0,0.06);
-        pointer-events: none;
-    }
-
-    /* Percentage label that follows the marker */
-    .progress .label {
-        position: absolute;
-        left: calc(var(--value) * 1%);
-        top: -22px;
-        transform: translateX(-50%);
-        padding: 0 6px;
-        height: 18px;
-        display: inline-flex;
-        align-items: center;
-        border-radius: 3px;
-        background: #fff;
-        border: 1px solid rgba(0,0,0,0.12);
-        font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
-        color: #111;
-        white-space: nowrap;
-        user-select: none;
-        pointer-events: none;
-    }
-</style>
 <div class="col-md-12">
     <div class="row">
         <p>
@@ -152,20 +91,14 @@ <h2 class="visually-hidden">
             <label for="original" class="form-label t3js-formengine-label">
                 <f:translate key="LLL:EXT:deepl_write/Resources/Private/Language/locallang_cke.xlf:cke.modal.original.heading"/>
             </label>
-            <div class="progress" id="original-readability" style="--value: 0" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
-                <span class="marker" aria-hidden="true"></span>
-                <span class="label">0%</span>
-            </div>
+            <deepl-write-readability id="original-readability" value="0"></deepl-write-readability>
             <textarea rows="10" class="form-control t3js-formengine-textarea formengine-textarea" id="original"></textarea>
         </div>
         <div class="col-md-6 col-xs-12">
             <label for="optimized" class="form-label t3js-formengine-label">
                 <f:translate key="LLL:EXT:deepl_write/Resources/Private/Language/locallang_cke.xlf:cke.modal.optimized.heading"/>
             </label>
-            <div class="progress" id="optimized-readability" style="--value: 0" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
-                <span class="marker" aria-hidden="true"></span>
-                <span class="label">0%</span>
-            </div>
+            <deepl-write-readability id="optimized-readability" value="0"></deepl-write-readability>
             <textarea rows="10" class="form-control t3js-formengine-textarea formengine-textarea" id="optimized"></textarea>
         </div>
         </div>
diff --git a/Resources/Private/Core14/Backend/Templates/CkEditor/Edit.html b/Resources/Private/Core14/Backend/Templates/CkEditor/Edit.html
index f24dca9..2f1e34d 100644
--- a/Resources/Private/Core14/Backend/Templates/CkEditor/Edit.html
+++ b/Resources/Private/Core14/Backend/Templates/CkEditor/Edit.html
@@ -4,67 +4,6 @@
     xmlns:deeplWrite="http://typo3.org/ns/WebVision/DeeplWrite/ViewHelpers"
     data-namespace-typo3-fluid="true"
 >
-<style>
-    /* CSS */
-    .progress {
-        --value: 0; /* 0–100 */
-
-        position: relative;
-        width: 100%;
-        height: 20px;
-        border-radius: var(--typo3-input-border-radius);
-        margin-top: 20px;
-        margin-bottom: 10px;
-
-        /* Full-width rainbow background (not clipped) */
-        background: linear-gradient(
-            to right,
-            #ff0000,
-            #ff7a00,
-            #ffd400,
-            #a8ff00,
-            #00a400
-        );
-        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
-        overflow: visible;
-    }
-
-    /* Slim vertical marker showing the current percentage */
-    .progress .marker {
-        position: absolute;
-        top: -4px;
-        bottom: -4px;
-        width: 2px;
-        left: calc(var(--value) * 1%);
-        transform: translateX(-1px);
-        background: #111;
-        border-radius: 2px;
-        box-shadow:
-            0 0 0 2px #fff,
-            0 0 0 3px rgba(0,0,0,0.06);
-        pointer-events: none;
-    }
-
-    /* Percentage label that follows the marker */
-    .progress .label {
-        position: absolute;
-        left: calc(var(--value) * 1%);
-        top: -22px;
-        transform: translateX(-50%);
-        padding: 0 6px;
-        height: 18px;
-        display: inline-flex;
-        align-items: center;
-        border-radius: 3px;
-        background: #fff;
-        border: 1px solid rgba(0,0,0,0.12);
-        font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
-        color: #111;
-        white-space: nowrap;
-        user-select: none;
-        pointer-events: none;
-    }
-</style>
 <div class="col-md-12">
     <div class="row">
         <p>
@@ -150,20 +89,14 @@ <h2 class="visually-hidden">
             <label for="original" class="form-label t3js-formengine-label">
                 <f:translate key="LLL:EXT:deepl_write/Resources/Private/Language/locallang_cke.xlf:cke.modal.original.heading"/>
             </label>
-            <div class="progress" id="original-readability" style="--value: 0" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
-                <span class="marker" aria-hidden="true"></span>
-                <span class="label">0%</span>
-            </div>
+            <deepl-write-readability id="original-readability" value="0"></deepl-write-readability>
             <textarea rows="10" class="form-control t3js-formengine-textarea formengine-textarea" id="original"></textarea>
         </div>
         <div class="col-md-6 col-xs-12">
             <label for="optimized" class="form-label t3js-formengine-label">
                 <f:translate key="LLL:EXT:deepl_write/Resources/Private/Language/locallang_cke.xlf:cke.modal.optimized.heading"/>
             </label>
-            <div class="progress" id="optimized-readability" style="--value: 0" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
-                <span class="marker" aria-hidden="true"></span>
-                <span class="label">0%</span>
-            </div>
+            <deepl-write-readability id="optimized-readability" value="0"></deepl-write-readability>
             <textarea rows="10" class="form-control t3js-formengine-textarea formengine-textarea" id="optimized"></textarea>
         </div>
         </div>
diff --git a/Resources/Public/JavaScript/Ckeditor/deeplwrite-plugin.js b/Resources/Public/JavaScript/Ckeditor/deeplwrite-plugin.js
index 20a1600..3f93b54 100644
--- a/Resources/Public/JavaScript/Ckeditor/deeplwrite-plugin.js
+++ b/Resources/Public/JavaScript/Ckeditor/deeplwrite-plugin.js
@@ -2,6 +2,8 @@ import {Plugin} from '@ckeditor/ckeditor5-core';
 import {ButtonView} from '@ckeditor/ckeditor5-ui';
 import AjaxRequest from '@typo3/core/ajax/ajax-request.js';
 import Modal from '@typo3/backend/modal.js';
+// Registers the <deepl-write-readability> custom element used in the overlay.
+import '@web-vision/deepl-write/readability-progress.js';
 
 export class Deeplwrite extends Plugin {
   static pluginName = 'Deeplwrite';
@@ -119,13 +121,8 @@ export class Deeplwrite extends Plugin {
         if (readability.score === null || readability.score === undefined) {
           return;
         }
-        const value = Math.max(0, Math.min(100, Number(readability.score) || 0)).toFixed(2);
-        element.style.setProperty('--value', value);
-        element.setAttribute('aria-valuenow', String(value));
-        const label = element.querySelector('.label');
-        if (label) {
-          label.textContent = `${value}%`;
-        }
+        // The <deepl-write-readability> component clamps, formats and renders.
+        element.value = Number(readability.score) || 0;
       });
   }
 }
diff --git a/Resources/Public/JavaScript/Ckeditor/readability-progress.js b/Resources/Public/JavaScript/Ckeditor/readability-progress.js
new file mode 100644
index 0000000..bb0b038
--- /dev/null
+++ b/Resources/Public/JavaScript/Ckeditor/readability-progress.js
@@ -0,0 +1,127 @@
+import {html, LitElement} from 'lit';
+import {styleTag} from '@typo3/core/lit-helper.js';
+
+/**
+ * Readability progress indicator used in the DeepL Write CKEditor overlay.
+ *
+ * Renders a full-width rainbow scale with a slim marker and a percentage label
+ * positioned at the current Flesch reading-ease score (0-100).
+ *
+ * Styling lives in the shadow DOM, so it cannot leak into or be influenced by
+ * other components. Instead of `static styles` (which relies on a constructable
+ * stylesheet bound to the realm where the module was evaluated), the CSS is
+ * emitted as a nonce-carrying `<style>` element via TYPO3's `styleTag` helper.
+ * This is required because `@typo3/backend/modal.js` relocates the overlay
+ * content into the top-level backend document: a stylesheet constructed in the
+ * FormEngine iframe realm cannot be adopted into a shadow root owned by the top
+ * document ("Adopted style sheet's constructor document must match ..."). A
+ * `<style>` rendered into the template is created in the shadow root's own
+ * document and carries the `litNonce` of that document, so it is both
+ * document-safe and Content-Security-Policy compliant (`style-src 'nonce-...'`).
+ *
+ * The dynamic position is passed through the `--value` custom property via
+ * CSSOM (`style.setProperty`), which is not governed by CSP.
+ *
+ * Usage:
+ *   <deepl-write-readability value="0"></deepl-write-readability>
+ *   element.value = 42.35; // reactive, re-renders
+ */
+const componentCss = `
+  :host {
+    --value: 0; /* 0-100, overridden per instance via CSSOM */
+
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 20px;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    border-radius: var(--typo3-input-border-radius);
+
+    /* Full-width rainbow background (not clipped) */
+    background: linear-gradient(
+      to right,
+      #ff0000,
+      #ff7a00,
+      #ffd400,
+      #a8ff00,
+      #00a400
+    );
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+  }
+
+  /* Slim vertical marker showing the current percentage */
+  .marker {
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: calc(var(--value) * 1%);
+    width: 2px;
+    transform: translateX(-1px);
+    border-radius: 2px;
+    background: #111;
+    box-shadow:
+      0 0 0 2px #fff,
+      0 0 0 3px rgba(0, 0, 0, 0.06);
+    pointer-events: none;
+  }
+
+  /* Percentage label that follows the marker */
+  .label {
+    position: absolute;
+    top: -22px;
+    left: calc(var(--value) * 1%);
+    height: 18px;
+    padding: 0 6px;
+    transform: translateX(-50%);
+    display: inline-flex;
+    align-items: center;
+    border-radius: 3px;
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+    color: #111;
+    white-space: nowrap;
+    user-select: none;
+    pointer-events: none;
+  }
+`;
+
+export class ReadabilityProgress extends LitElement {
+  static properties = {
+    value: {type: Number},
+  };
+
+  constructor() {
+    super();
+    this.value = 0;
+  }
+
+  render() {
+    const value = this.clampedValue;
+    // Use the element's own document window so the `<style>` carries the nonce of
+    // the document it actually lives in (top document when shown in a modal).
+    return html`
+      ${styleTag(componentCss, this.ownerDocument.defaultView)}
+      <span class="marker" aria-hidden="true"></span>
+      <span class="label">${value.toFixed(2)}%</span>
+    `;
+  }
+
+  updated() {
+    const value = this.clampedValue;
+    // CSSOM write (not a CSP style-src-attr concern) drives marker/label position.
+    this.style.setProperty('--value', String(value));
+    // Expose progress semantics on the host element for assistive technology.
+    this.setAttribute('role', 'progressbar');
+    this.setAttribute('aria-valuemin', '0');
+    this.setAttribute('aria-valuemax', '100');
+    this.setAttribute('aria-valuenow', value.toFixed(2));
+  }
+
+  get clampedValue() {
+    return Math.max(0, Math.min(100, Number(this.value) || 0));
+  }
+}
+
+customElements.define('deepl-write-readability', ReadabilityProgress);