@kubex/zinc 1.1.185 → 2.0.0

package/src/components/diff-row/diff-row.test.ts

@@ -0,0 +1,37 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-diff-row>', () => {
+  it('shows the item in both columns when unchanged', async () => {
+    const el = await fixture(html`<zn-diff-row caption="Passing score"></zn-diff-row>`);
+
+    const cells = el.shadowRoot!.querySelectorAll('[role="cell"]');
+    expect(cells).to.have.length(2);
+    expect(el.shadowRoot!.querySelector('.row__cell--absent')).to.not.exist;
+    expect(el.shadowRoot!.querySelector('zn-badge')).to.not.exist;
+  });
+
+  it('labels a changed row in the newer column', async () => {
+    const el = await fixture(html`<zn-diff-row caption="Passing score" change="changed"></zn-diff-row>`);
+
+    const badge = el.shadowRoot!.querySelector('[part="after"] zn-badge');
+    expect(badge?.textContent).to.equal('Changed');
+    expect(badge?.getAttribute('type')).to.equal('info');
+  });
+
+  it('shows a placeholder on the side an added or removed item is missing from', async () => {
+    const added = await fixture(html`<zn-diff-row caption="Tone" change="added"></zn-diff-row>`);
+    const removed = await fixture(html`<zn-diff-row caption="Survey" change="removed" after-placeholder="Removed"></zn-diff-row>`);
+
+    expect(added.shadowRoot!.querySelector('[part="before"]')!.classList.contains('row__cell--absent')).to.be.true;
+    expect(added.shadowRoot!.querySelector('[part="before"]')!.textContent).to.contain('Not in this version');
+    expect(removed.shadowRoot!.querySelector('[part="after"]')!.textContent).to.contain('Removed');
+  });
+
+  it('renders a heading across both columns', async () => {
+    const el = await fixture(html`<zn-diff-row caption="Opening" heading></zn-diff-row>`);
+
+    expect(el.shadowRoot!.querySelector('[role="rowheader"]')!.textContent).to.equal('Opening');
+    expect(el.shadowRoot!.querySelectorAll('[role="cell"]')).to.have.length(0);
+  });
+});

package/src/components/diff-row/index.ts

@@ -0,0 +1,12 @@
+import ZnDiffRow from './diff-row.component';
+
+export * from './diff-row.component';
+export default ZnDiffRow;
+
+ZnDiffRow.define('zn-diff-row');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-diff-row': ZnDiffRow;
+  }
+}

package/src/components/dropdown/dropdown.component.ts

@@ -58,7 +58,7 @@ export default class ZnDropdown extends ZincElement {
   @property({attribute: false}) containingElement?: HTMLElement;
 
   /** The distance in pixels from which to offset the panel away from the trigger */
-  @property({type: Number}) distance: number = 0;
+  @property({type: Number}) distance: number = 4;
 
   /** The distance in pixels from which to offset the panel away from the trigger */
   @property({type: Number}) skidding: number = 0;
@@ -122,10 +122,8 @@ export default class ZnDropdown extends ZincElement {
     } else {
       this.panel.addEventListener('keydown', this.handleKeyDown);
     }
-    document.addEventListener('keydown', this.handleDocumentKeyDown.bind(this));
-    document.addEventListener('mousedown', this.handleDocumentMouseDown.bind(this));
-
-    this.closeWatcher?.destroy();
+    document.addEventListener('keydown', this.handleDocumentKeyDown);
+    document.addEventListener('mousedown', this.handleDocumentMouseDown);
   }
 
   private removeOpenListeners() {
@@ -173,7 +171,7 @@ export default class ZnDropdown extends ZincElement {
     }
   }
 
-  handleKeyDown(event: KeyboardEvent) {
+  handleKeyDown = (event: KeyboardEvent) => {
     if (this.open && event.key === 'Escape') {
       event.stopPropagation();
       this.hide().then(r => r);
@@ -182,7 +180,10 @@ export default class ZnDropdown extends ZincElement {
   }
 
   private async handleTriggerKeyDown(event: KeyboardEvent) {
-    if ([' ', 'Enter'].includes(event.key)) {
+    const origin = event.composedPath()[0] as HTMLElement;
+    // A text-entry trigger needs Space/Enter for typing and form submission
+    const isTextEntry = origin.matches?.('input, textarea, [contenteditable]');
+    if ([' ', 'Enter'].includes(event.key) && !isTextEntry) {
       event.preventDefault();
       await this.handleTriggerClick();
       return;
@@ -234,7 +235,7 @@ export default class ZnDropdown extends ZincElement {
     this.updateAccessibleTrigger();
   }
 
-  private handleDocumentMouseDown(event: MouseEvent) {
+  private handleDocumentMouseDown = (event: MouseEvent) => {
     const path = event.composedPath();
 
     if (this.containingElement && !path.includes(this.containingElement)) {
@@ -242,7 +243,7 @@ export default class ZnDropdown extends ZincElement {
     }
   }
 
-  handleDocumentKeyDown(event: KeyboardEvent) {
+  handleDocumentKeyDown = (event: KeyboardEvent) => {
     if (event.key === 'Escape' && this.open && !this.closeWatcher) {
       event.stopPropagation();
       this.focusOnTrigger();
@@ -251,7 +252,8 @@ export default class ZnDropdown extends ZincElement {
     }
 
     if (event.key === 'Tab') {
-      if (this.open) {
+      // Non-menu panels follow the trigger in tab order, so Tab moves into them and closes only once focus leaves
+      if (this.open && this.getMenu()) {
         this.hide().then(r => r);
         // Tabbing out of the menu resumes from the trigger; from the trigger, Tab moves on as usual
         if (this.panel?.assignedElements({flatten: true}).some(el => el.matches(':focus-within'))) {

package/src/components/dropdown/dropdown.scss

@@ -7,3 +7,5 @@
 .dropdown::part(popup) {
   z-index: var(--zn-z-index-dropdown);
 }
+
+@include wc.popover-motion('.dropdown');

package/src/components/editor/editor.component.ts

@@ -1,8 +1,9 @@
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {deepQuerySelectorAll, idSelector} from "../../utilities/query";
 import {FormControlController} from '../../internal/form';
+import {HasSlotController} from "../../internal/slot";
 import {on} from "../../utilities/on";
-import {property, query} from 'lit/decorators.js';
+import {property, query, state} from 'lit/decorators.js';
 import {Store} from "../../internal/storage";
 import Attachment from "./modules/attachment/attachment";
 import ContextMenu from "./modules/context-menu/context-menu";
@@ -12,6 +13,7 @@ import DragAndDrop from "./modules/drag-drop/drag-drop";
 import Emoji from "./modules/emoji/emoji";
 import HeadlessEmoji from "./modules/emoji/headless/headless-emoji";
 import ImageResize from "./modules/image-resize/image-resize";
+import MergeField, {MergeFieldBlot, normaliseToken} from "./modules/merge-field/merge-field";
 import Quill from "quill";
 import QuillAI from "./modules/ai";
 import TimeTracking from "./modules/time-tracking/time-tracking";
@@ -23,7 +25,9 @@ import type {Range} from "quill";
 import type {ZincFormControl} from '../../internal/zinc-element';
 import type {ZnEditorInsertEvent} from "./modules/events/zn-editor-insert";
 import type ToolbarComponent from "./modules/toolbar/toolbar.component";
+import type ZnEditorQuickAction from "./modules/context-menu/quick-action";
 
+import formControlStyles from '../../form-control.scss';
 import styles from './editor.scss';
 
 export interface EditorFeatureConfig {
@@ -36,8 +40,12 @@ export interface EditorFeatureConfig {
   datesEnabled?: boolean;
   emojisEnabled?: boolean;
   codeEnabled?: boolean;
+  compact?: boolean;
 }
 
+// Editing aid only: added to the document mode frame and left out of the saved HTML
+const DOCUMENT_OUTLINES_ID = 'zn-editor-outlines';
+
 /**
  * @summary Short summary of the component's intended use.
  * @documentation https://zinc.style/components/editor
@@ -50,15 +58,17 @@ export interface EditorFeatureConfig {
  *
  * @slot - The default slot.
  * @slot example - An example slot.
+ * @slot help-text - Text under the editor. Alternatively, use the `help-text` attribute.
  *
  * @csspart base - The component's base wrapper.
  *
  * @cssproperty --example - An example CSS custom property.
  */
 export default class ZnEditor extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
 
   private formControlController = new FormControlController(this, {});
+  private readonly hasSlotController = new HasSlotController(this, 'help-text');
 
   @query('#editor')
   private editor: HTMLElement;
@@ -73,6 +83,30 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
   @property() name: string;
   @property() value: string;
 
+  @property() placeholder = 'Compose your reply...';
+
+  /** Draws the editor as a form field: a bordered, resizable box under a small toolbar of bold, italic, link and lists. */
+  @property({type: Boolean, reflect: true}) compact = false;
+
+  /** Adds a Source button that switches to editing the raw HTML, which is submitted as written. */
+  @property({attribute: 'source', type: Boolean}) sourceEnabled = false;
+
+  /** Edits the HTML in place as a whole document, keeping layout the editor can't hold, such as a designed email. */
+  @property({attribute: 'document-mode', type: Boolean, reflect: true}) documentMode = false;
+
+  @query('.editor__document') private documentFrame: HTMLIFrameElement;
+
+  /** Shows only the content, without a toolbar or box, such as the source beside a translation. */
+  @property({type: Boolean, reflect: true}) readonly = false;
+
+  /** With `compact`, a short label inside the box ahead of the content, such as a language code. */
+  @property() prefix = '';
+
+  @state() private _sourceMode = false;
+
+  /** Text under the editor that describes how to use it. If you need to display HTML, use the `help-text` slot instead. */
+  @property({attribute: 'help-text'}) helpText = '';
+
   @property({attribute: 'interaction-type', type: String})
   interactionType: 'ticket' | 'chat' = 'chat';
 
@@ -90,6 +124,12 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
   @property({attribute: 'emojis', type: Boolean}) emojisEnabled: boolean = false;
   @property({attribute: 'code', type: Boolean}) codeEnabled: boolean = false;
   @property({attribute: 'ai', type: Boolean}) aiEnabled: boolean = false;
+
+  /**
+   * Shows `{{token}}` replacements as highlighted chips, labelled from the matching `context-items`
+   * quick action. The value still holds the raw tokens.
+   */
+  @property({attribute: 'merge-fields', type: Boolean}) mergeFieldsEnabled: boolean = false;
   @property({attribute: 'ai-path'}) aiPath: string = '';
 
   /**
@@ -110,6 +150,8 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
   private quillElement: Quill;
   private _content: string = '';
   private _selectionRange: Range = {index: 0, length: 0};
+  // in-flight attachment uploads; the leave-page prompt stays while any is running
+  private _pendingUploads = 0;
 
   get validity(): ValidityState {
     return this.editorHtml.validity;
@@ -170,6 +212,9 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     Quill.register({'modules/imageResize': ImageResize}, true);
     Quill.register({'modules/contextMenu': ContextMenu}, true);
     Quill.register({'modules/dialog': Dialog}, true);
+    if (this.mergeFieldsEnabled) {
+      Quill.register({'formats/mergeField': MergeFieldBlot, 'modules/mergeField': MergeField}, true);
+    }
 
     /* AI Modules */
     if (this.aiEnabled) {
@@ -208,6 +253,7 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
       datesEnabled: this.datesEnabled,
       emojisEnabled: this.emojisEnabled,
       codeEnabled: this.codeEnabled,
+      compact: this.compact,
     };
 
     const quill = new Quill(this.editor, {
@@ -222,6 +268,9 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
         keyboard: {
           bindings: bindings
         },
+        ...(this.mergeFieldsEnabled && {
+          mergeField: {labels: this._mergeFieldLabels()}
+        }),
         dialog: {
           editorId: this.id
         },
@@ -244,10 +293,10 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
         ...(this.attachmentsEnabled && {
           attachment: {
             attachmentInput: this.getForm()?.querySelector('input[name="attachments"]'),
-            onFileUploaded: () => {
-              window.onbeforeunload = () => null;
-            },
+            onFileUploaded: () => this._settleUpload(),
+            onFileUploadFailed: () => this._settleUpload(),
             upload: async (file: File) => {
+              this._pendingUploads++;
               window.onbeforeunload = () => 'You have unsaved changes. Are you sure you want to leave?';
 
               const fd = new FormData();
@@ -274,7 +323,8 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
         imageResize: {},
         history: {}
       },
-      placeholder: 'Compose your reply...',
+      placeholder: this.placeholder,
+      readOnly: this.readonly,
       theme: 'snow',
       bounds: this.editor,
     });
@@ -408,12 +458,82 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     const delta = quill.clipboard.convert({html: this.value});
     quill.setContents(delta, Quill.sources.SILENT);
 
+    if (this.documentMode) {
+      this._loadDocument(this.value ?? '');
+    }
+
     this.emit('zn-element-added', {detail: {element: this.editor}});
     super.firstUpdated(_changedProperties);
   }
 
+  private _toggleSource() {
+    const source = this.renderRoot.querySelector<HTMLTextAreaElement>('.editor__source')!;
+    if (!this._sourceMode) {
+      source.value = this.value ?? '';
+    } else if (this.documentMode) {
+      this._loadDocument(source.value);
+    } else {
+      // Back in the editor the HTML is reduced to what it can show
+      const delta = this.quillElement.clipboard.convert({html: source.value});
+      this.quillElement.setContents(delta, Quill.sources.USER);
+    }
+    this._sourceMode = !this._sourceMode;
+  }
+
+  private _loadDocument(html: string) {
+    const frame = this.documentFrame;
+    frame.addEventListener('load', () => {
+      const doc = frame.contentDocument!;
+      const outlines = doc.createElement('style');
+      outlines.id = DOCUMENT_OUTLINES_ID;
+      outlines.textContent = 'table,td,th{outline:1px dotted #d3d3d3;outline-offset:-1px}';
+      doc.head.append(outlines);
+      doc.designMode = 'on';
+      doc.addEventListener('input', () => this._handleDocumentInput(/<html[\s>]/i.test(html)));
+      this._fitDocument();
+      new ResizeObserver(() => this._fitDocument()).observe(doc.body);
+    }, {once: true});
+    frame.srcdoc = html;
+  }
+
+  // Grows to the content; the stylesheet's max-height caps it
+  private _fitDocument() {
+    const frame = this.documentFrame;
+    frame.style.height = `${frame.contentDocument?.documentElement.offsetHeight ?? 0}px`;
+  }
+
+  private _handleDocumentInput(wholeDocument: boolean) {
+    const doc = this.documentFrame.contentDocument!;
+    const root = doc.documentElement.cloneNode(true) as HTMLElement;
+    root.querySelector(`#${DOCUMENT_OUTLINES_ID}`)?.remove();
+    const doctype = doc.doctype ? `<!DOCTYPE ${doc.doctype.name}>\n` : '';
+    this.value = wholeDocument ? doctype + root.outerHTML : root.querySelector('body')!.innerHTML;
+    this.editorHtml.value = this.value;
+    this._cacheContent();
+    this.emit('zn-change');
+  }
+
+  private _handleSourceInput(e: Event) {
+    this.value = (e.target as HTMLTextAreaElement).value;
+    this.editorHtml.value = this.value;
+    this._cacheContent();
+    this.emit('zn-change');
+  }
+
+  private _mergeFieldLabels(): Record<string, string> {
+    const labels: Record<string, string> = {};
+    this.querySelectorAll<ZnEditorQuickAction>('zn-editor-quick-action[slot="context-items"]').forEach(action => {
+      if (action.content && action.label) {
+        labels[normaliseToken(action.content)] = action.label;
+      }
+    });
+    return labels;
+  }
+
   private _handleTextChange() {
-    this.value = this.quillElement.getSemanticHTML();
+    if (this.documentMode) return;
+    // Quill writes every space as &nbsp;, which stops text wrapping; only runs of spaces need it
+    this.value = this.quillElement.getSemanticHTML().replace(/&nbsp;(?!&nbsp;)/g, ' ');
     this.editorHtml.value = this.value;
     this._cacheContent();
     this.emit('zn-change');
@@ -432,6 +552,13 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     }
   }
 
+  private _settleUpload() {
+    this._pendingUploads--;
+    if (this._pendingUploads === 0) {
+      window.onbeforeunload = () => null;
+    }
+  }
+
   private _clearCachedContent() {
     if (this.storeKey && this._store) {
       this._store.remove(this.storeKey);
@@ -608,15 +735,36 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
 
   render() {
     return html`
-      <zn-toolbar id="toolbar">
-        <slot name="tools"></slot>
-      </zn-toolbar>
+      <div class="editor__bar">
+        <zn-toolbar id="toolbar" ?data-source=${this._sourceMode || this.documentMode}>
+          <slot name="tools"></slot>
+        </zn-toolbar>
+        ${this.sourceEnabled && !this.readonly ? html`
+          <zn-button class="editor__source-toggle" color="transparent" size="small"
+                     icon="${this._sourceMode ? 'pencil@lu' : 'code@lu'}" icon-size="16"
+                     @click=${this._toggleSource}>${this._sourceMode ? 'Editor' : 'Source'}</zn-button>` : ''}
+      </div>
       <slot name="context-items" style="display: none;"></slot>
-      <div id="editor" x-editor-id="${this.id}"></div>
+      <div class="editor__box ${this.prefix ? 'editor__box--prefixed' : ''}">
+        ${this.prefix ? html`<span class="editor__prefix">${this.prefix}</span>` : ''}
+        <div id="editor" x-editor-id="${this.id}" ?hidden=${this._sourceMode || this.documentMode}></div>
+        ${this.documentMode ? html`
+          <iframe class="editor__document" sandbox="allow-same-origin" title="${this.placeholder}"
+                  ?hidden=${this._sourceMode}></iframe>` : ''}
+        ${this.sourceEnabled ? html`
+          <textarea class="editor__source" spellcheck="false" ?hidden=${!this._sourceMode}
+                    @input=${this._handleSourceInput}></textarea>` : ''}
+      </div>
       <input type="text" id="editorHtml" name="${this.name}" value="${this.value}" style="display: none;">
       <div id="action-container" class="ql-toolbar ql-snow">
         <slot name="actions"></slot>
       </div>
+      <div class="form-control form-control--medium form-control--has-help-text"
+           ?hidden=${!this.helpText && !this.hasSlotController.test('help-text')}>
+        <div part="form-control-help-text" class="form-control__help-text">
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      </div>
     `;
   }
 }

package/src/components/editor/editor.scss

@@ -141,7 +141,7 @@
 
 :host #toolbar zn-dropdown zn-menu zn-menu-item[checked] .menu-item {
   background-color: rgba(var(--zn-panel-highlight), var(--zn-panel-highlight-opacity));
-  color: rgb(var(--zn-primary));
+  color: var(--zn-color-primary-fg, rgb(var(--zn-primary)));
 }
 
 :host .ql-editor hr,
@@ -153,6 +153,255 @@
   opacity: 1;
 }
 
+:host .ql-editor .ql-merge-field {
+  padding: 0 6px;
+  border-radius: var(--zn-input-border-radius-medium);
+  background-color: rgba(var(--zn-primary), 0.08);
+  color: rgb(var(--zn-primary));
+  font-weight: var(--zn-font-weight-semibold);
+  white-space: nowrap;
+}
+
+.editor__bar {
+  display: flex;
+  align-items: center;
+  padding-inline: var(--editor-gutter);
+
+  #toolbar {
+    flex: 1;
+    padding-inline: 0;
+
+    // Keeps its space so switching to the source doesn't move the box
+    &[data-source] {
+      visibility: hidden;
+    }
+  }
+
+  .editor__source-toggle {
+    margin-left: auto;
+  }
+}
+
+.editor__box {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.editor__prefix {
+  position: absolute;
+  z-index: 1;
+  top: var(--zn-spacing-x-small);
+  inset-inline-start: calc(var(--zn-spacing-unit, 8px) * 1.5);
+  color: rgb(var(--zn-text));
+  font-size: 12px;
+  font-weight: 700;
+  line-height: calc(var(--zn-input-font-size-medium) * 1.5);
+  pointer-events: none;
+}
+
+.editor__document {
+  display: block;
+  width: 100%;
+  min-height: 24rem;
+  max-height: var(--editor-max-height, 70vh);
+  border: none;
+  background-color: #fff;
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+.editor__source {
+  display: block;
+  width: 100%;
+  padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
+  border: none;
+  outline: none;
+  resize: vertical;
+  font-family: var(--zn-font-mono);
+  font-size: var(--zn-font-size-small);
+  color: rgb(var(--zn-text));
+  background-color: var(--zn-input-background-color);
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+:host([compact]) {
+  min-height: 0;
+  max-height: none;
+  flex: none;
+  overflow: visible;
+  gap: calc(var(--zn-spacing-unit, 8px) * 1.5);
+  background-color: transparent;
+
+  .editor__bar {
+    --zn-button-height-small: 24px;
+    --zn-button-font-size-small: 12px;
+    padding-inline: 0;
+
+    #toolbar {
+      padding: 0;
+    }
+
+    .editor__source-toggle::part(base) {
+      color: rgb(var(--zn-color-muted-text));
+    }
+  }
+
+  #editor,
+  .editor__source,
+  .editor__document {
+    box-sizing: border-box;
+    flex: 1 0 auto;
+    height: var(--editor-height, 224px);
+    min-height: 6rem;
+    overflow: auto;
+    resize: vertical;
+    border: solid var(--zn-input-border-width) var(--zn-input-border-color);
+    border-radius: var(--zn-input-border-radius-medium);
+    background-color: var(--zn-input-background-color);
+    transition: var(--zn-transition-fast) border, var(--zn-transition-fast) box-shadow;
+
+    &:hover {
+      border-color: var(--zn-input-border-color-hover);
+    }
+
+    &:focus-within,
+    &:focus {
+      border-color: var(--zn-input-border-color-focus);
+      box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
+    }
+  }
+
+  #editor[hidden] {
+    display: none;
+  }
+
+  .ql-container {
+    padding: 0;
+  }
+
+  // Fills any height the host is given, such as a translation field's row
+  .editor__box {
+    flex: 1 0 auto;
+  }
+
+  .ql-editor {
+    padding: var(--zn-spacing-x-small) calc(var(--zn-spacing-unit, 8px) * 1.5);
+    font-size: var(--zn-input-font-size-medium);
+    line-height: 1.5;
+    background-color: transparent;
+
+    > * + * {
+      margin-top: var(--zn-spacing-x-small);
+    }
+  }
+
+  .ql-editor.ql-blank:before {
+    left: calc(var(--zn-spacing-unit, 8px) * 1.5);
+    right: calc(var(--zn-spacing-unit, 8px) * 1.5);
+    font-style: normal;
+    color: var(--zn-input-placeholder-color);
+  }
+
+  // Never shorter than the plain editor, however short the document
+  .editor__document {
+    min-height: var(--editor-height, 224px);
+  }
+
+  // No box of its own, so an empty actions row adds no gap
+  #action-container {
+    display: contents;
+  }
+
+  .form-control__help-text {
+    margin-top: 0;
+  }
+}
+
+// The prefix's gutter: its width, and the space either side of it
+:host([compact]) .editor__box--prefixed {
+  .ql-editor,
+  .editor__source {
+    padding-inline-start: calc(var(--zn-spacing-unit, 8px) * 3 + 32px);
+  }
+
+  .ql-editor.ql-blank:before {
+    inset-inline-start: calc(var(--zn-spacing-unit, 8px) * 3 + 32px);
+  }
+}
+
+// Quill pins text and list markers to the left whatever the direction
+:host([dir="rtl"]) .ql-editor {
+  text-align: right;
+
+  li {
+    padding-left: 0;
+    padding-right: 1.5em;
+  }
+
+  li > .ql-ui:before {
+    margin-left: 0.3em;
+    margin-right: -1.5em;
+    text-align: left;
+  }
+}
+
+.form-control[hidden] {
+  display: none;
+}
+
+// Content only, such as a translation's source shown beside it
+:host([readonly]) {
+  min-height: 0;
+  max-height: none;
+  flex: none;
+  overflow: visible;
+  background-color: transparent;
+
+  .editor__bar,
+  #action-container {
+    display: none;
+  }
+
+  .editor__box {
+    display: block;
+  }
+
+  #editor {
+    flex: none;
+    height: auto;
+    border: 0;
+    background-color: transparent;
+    box-shadow: none;
+    resize: none;
+  }
+
+  .ql-container {
+    padding: 0;
+  }
+
+  .ql-editor {
+    height: auto;
+    padding: 0;
+    overflow: visible;
+    line-height: 1.5;
+    color: inherit;
+    font-size: inherit;
+    background-color: transparent;
+
+    > * + * {
+      margin-top: var(--zn-spacing-x-small);
+    }
+  }
+}
+
 #toolbar {
   padding-inline: var(--editor-gutter);
 }