[TASK] DPL-177: Make readability bar a lit component#61
Merged
Conversation
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.
Documentation renderingYou can find files attached to the below linked Workflow Run URL (Logs). Please note that files only stay for around 5 days!
|
calien666
approved these changes
Jul 7, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Encapsulates the CKEditor "DeepL Write" readability progress bar as a
dedicated
litweb component (<deepl-write-readability>), removing theinline
<style>block and thestyle="--value"attributes from the Core13and Core14
CkEditor/Edit.htmltemplates.Why
Inline
<style>elements andstyle=""attributes are blocked by a tightenedTYPO3 backend Content-Security-Policy (
style-srcwithout'unsafe-inline')and are poor practice regardless.
How
litcomponentResources/Public/JavaScript/Ckeditor/readability-progress.js, registered inthe importmap (
Configuration/JavaScriptModules.php).emitted as a nonce-carrying
<style>via the corestyleTag()helper(
@typo3/core/lit-helper.js), so it is CSP compliant (style-src 'nonce-...').static styles) cannot be used here:@typo3/backend/modal.jsrelocates the overlay content into the topbackend document, so a stylesheet constructed in the FormEngine iframe
realm cannot be adopted into the top-document shadow root
(
Adopted style sheet's constructor document must match ...). Rendering the<style>into the template creates it in the shadow root's own document andcarries that document's
litNonce.element.value; the component clamps, formats andrenders. The marker position still rides on the
--valuecustom property setvia CSSOM, which is not governed by CSP.
Testing
deeplwritepreset and trigger the DeepL Writeoverlay.
optimized text.
Adopted style sheet ...exception and no inline-style CSP violation inthe browser console.
Follow-ups (not part of this PR)
component (they now differ only in the tab attribute).
Issue: DPL-177 (subtask of DPL-122, relates to DPL-140).