Skip to content

[TASK] DPL-177: Make readability bar a lit component#61

Merged
sbuerk merged 1 commit into
mainfrom
feature/readability-lit-component
Jul 7, 2026
Merged

[TASK] DPL-177: Make readability bar a lit component#61
sbuerk merged 1 commit into
mainfrom
feature/readability-lit-component

Conversation

@sbuerk

@sbuerk sbuerk commented Jul 7, 2026

Copy link
Copy Markdown
Member

What

Encapsulates the CKEditor "DeepL Write" readability progress bar as a
dedicated lit web component (<deepl-write-readability>), removing the
inline <style> block and the style="--value" attributes from the Core13
and Core14 CkEditor/Edit.html templates.

Why

Inline <style> elements and style="" attributes are blocked by a tightened
TYPO3 backend Content-Security-Policy (style-src without 'unsafe-inline')
and are poor practice regardless.

How

  • New plain-JS lit component
    Resources/Public/JavaScript/Ckeditor/readability-progress.js, registered in
    the importmap (Configuration/JavaScriptModules.php).
  • The CSS lives in the Shadow DOM (full isolation from other components) 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-...').
  • A constructable stylesheet (static styles) cannot be used here:
    @typo3/backend/modal.js relocates the overlay content into the top
    backend 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 and
    carries that document's litNonce.
  • The plugin now only sets element.value; 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.

Testing

  • Open an RTE field using the deeplwrite preset and trigger the DeepL Write
    overlay.
  • The rainbow readability bar renders and updates for both the original and the
    optimized text.
  • No Adopted style sheet ... exception and no inline-style CSP violation in
    the browser console.

Follow-ups (not part of this PR)

  • Merge the near-identical Core13/Core14 Edit templates into a shared Fluid
    component (they now differ only in the tab attribute).
  • Dark-mode colour adaptation of the bar.

Issue: DPL-177 (subtask of DPL-122, relates to DPL-140).

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.
@github-actions

github-actions Bot commented Jul 7, 2026

Copy link
Copy Markdown

Documentation rendering

You can find files attached to the below linked Workflow Run URL (Logs).

Please note that files only stay for around 5 days!

Name Link
Commit 271c4fb
Logs https://github.com/web-vision/deepl-write/actions/runs/28866299898
Documentation https://github.com/web-vision/deepl-write/actions/runs/28866299898/artifacts/8137791959

@sbuerk sbuerk merged commit 2520983 into main Jul 7, 2026
8 checks passed
@sbuerk sbuerk deleted the feature/readability-lit-component branch July 7, 2026 13:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants