@aquera/nile-elements 1.9.7 → 1.9.9

package/src/nile-wysiwyg-editor/ui/source-view.ts

@@ -1,31 +1,71 @@
 import { html, css, TemplateResult, CSSResultArray } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import hljs from 'highlight.js/lib/core';
+import xml from 'highlight.js/lib/languages/xml';
 import NileElement from '../../internal/nile-element';
+import { sanitizeHtml } from '../engine/sanitize';
+import './preview';
+
+// HTML highlighting only — reuses the same lib the code-block feature already
+// bundles, so this adds no new dependency. Registration is idempotent.
+hljs.registerLanguage('xml', xml);
 
 /**
- * Raw HTML source editing mode. Replaces the rich surface while open; the
- * host re-parses (and re-sanitizes) the HTML on apply. Emits
+ * Raw HTML source editing mode. A split view: the raw HTML on the left, a
+ * live rendered preview on the right, with a draggable divider between them
+ * and a resizable body. The preview runs the same sanitizer the host applies
+ * on the way back, so what you see is what the document becomes. Emits
  * `wysiwyg-source-apply` detail: { html } and `wysiwyg-source-cancel`.
+ *
+ * The code pane is a lightweight editor: a real `<textarea>` for input, with a
+ * highlight.js-coloured layer painted behind it and a synced line-number
+ * gutter. No heavyweight code-editor dependency.
  */
 @customElement('nile-wysiwyg-source-view')
 export class NileWysiwygSourceView extends NileElement {
   @property({ type: String }) value = '';
 
-  @query('textarea') textarea?: HTMLTextAreaElement;
+  @query('textarea') private textarea?: HTMLTextAreaElement;
+
+  @query('.hl > code') private highlightEl?: HTMLElement;
+
+  @query('.linenos-inner') private linenosEl?: HTMLElement;
+
+  @query('.body') private bodyEl?: HTMLElement;
+
+  /** Current source text, drives the live preview, highlight and gutter. */
+  @state() private draft = '';
+
+  /**
+   * Fraction of the body width given to the code pane (the rest is preview).
+   * Clamped while dragging the divider.
+   */
+  @state() private splitRatio = 0.5;
+
+  /** Whether the divider is currently being dragged. */
+  @state() private splitDragging = false;
 
   public static get styles(): CSSResultArray {
     return [
       css`
         :host {
-          font-family: var(
-            --nile-font-family-sans-serif,
-            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
-          );
           display: flex;
           flex-direction: column;
+          box-sizing: border-box;
+          overflow: hidden;
+          min-height: var(--nile-wysiwyg-min-height, 200px);
+          height: var(--nile-wysiwyg-source-height, 340px);
+          max-height: var(
+            --nile-wysiwyg-source-max-height,
+            var(--nile-wysiwyg-max-height, 70vh)
+          );
+          resize: vertical;
         }
 
         .bar {
+          flex: 0 0 auto;
           display: flex;
           align-items: center;
           justify-content: space-between;
@@ -57,32 +97,271 @@ export class NileWysiwygSourceView extends NileElement {
           color: #ffffff;
         }
 
-        textarea {
-          flex: 1;
-          min-height: var(--nile-wysiwyg-min-height, 160px);
-          padding: 12px 16px;
-          border: none;
-          outline: none;
-          resize: vertical;
+        .body {
+          flex: 1 1 auto;
+          display: flex;
+          align-items: stretch;
+          overflow: hidden;
+          min-height: 0;
+          box-sizing: border-box;
+        }
+
+        .body--dragging {
+          cursor: col-resize;
+          user-select: none;
+          -webkit-user-select: none;
+        }
+
+        .body--dragging .pane {
+          pointer-events: none;
+        }
+
+        .pane {
+          min-width: 0;
+          min-height: 0;
+          box-sizing: border-box;
+        }
+
+        /* --- Lightweight code editor: gutter + highlighted textarea --- */
+        .pane--code {
+          display: flex;
+          background: var(--nile-colors-white-base, #ffffff);
+          /* Shared code metrics, inherited by the gutter, highlight and textarea
+             so every line lines up to the pixel. */
           font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
           font-size: 12px;
-          line-height: 1.5;
+          line-height: 18px;
+          tab-size: 2;
+          -moz-tab-size: 2;
+        }
+
+        .linenos {
+          flex: 0 0 auto;
+          overflow: hidden;
+          box-sizing: border-box;
+          padding: 12px 8px 0;
+          text-align: right;
+          color: var(--nile-colors-neutral-400, #98a2b3);
+          background: var(--nile-colors-neutral-50, #f9fafb);
+          border-right: 1px solid var(--nile-colors-neutral-200, #eaecf0);
+          user-select: none;
+        }
+
+        .linenos-inner {
+          will-change: transform;
+        }
+
+        .linenos-inner > div {
+          height: 18px;
+        }
+
+        .input-wrap {
+          position: relative;
+          flex: 1 1 0;
+          min-width: 0;
+          overflow: hidden;
+        }
+
+        /* Highlight layer and textarea share the exact same box (offset for
+           padding via top/left, extending to the edges for horizontal scroll),
+           so the coloured text sits directly under the caret. */
+        .hl,
+        textarea {
+          position: absolute;
+          top: 12px;
+          left: 16px;
+          right: 0;
+          bottom: 0;
+          margin: 0;
+          border: 0;
+          padding: 0;
+          font: inherit;
+          line-height: inherit;
+          tab-size: inherit;
+          white-space: pre;
+          word-wrap: normal;
+          overflow-wrap: normal;
+          box-sizing: border-box;
+        }
+
+        .hl {
+          overflow: hidden;
+          pointer-events: none;
           color: var(--nile-colors-neutral-900, #101828);
+        }
+
+        .hl > code {
+          display: block;
+          will-change: transform;
+        }
+
+        textarea {
+          width: auto;
+          resize: none;
+          outline: none;
+          overflow: auto;
           background: transparent;
-          box-sizing: border-box;
+          color: transparent;
+          caret-color: var(--nile-colors-neutral-900, #101828);
+        }
+
+        /* Must be translucent: the textarea's text is transparent and the
+           coloured code sits BEHIND it, so an opaque selection would hide the
+           text. A tint lets the highlighted code show through the selection. */
+        textarea::selection {
+          background: rgba(41, 112, 255, 0.3);
+        }
+        textarea::-moz-selection {
+          background: rgba(41, 112, 255, 0.3);
+        }
+
+        /* highlight.js token palette (Atom One Light), matching code blocks. */
+        .hl .hljs-comment,
+        .hl .hljs-quote { color: #a0a1a7; font-style: italic; }
+        .hl .hljs-keyword,
+        .hl .hljs-selector-tag,
+        .hl .hljs-doctag { color: #a626a4; }
+        .hl .hljs-name,
+        .hl .hljs-selector-id,
+        .hl .hljs-selector-class,
+        .hl .hljs-tag { color: #e45649; }
+        .hl .hljs-literal,
+        .hl .hljs-built_in { color: #0184bb; }
+        .hl .hljs-string,
+        .hl .hljs-attribute,
+        .hl .hljs-meta .hljs-string { color: #50a14f; }
+        .hl .hljs-attr,
+        .hl .hljs-variable,
+        .hl .hljs-type,
+        .hl .hljs-number { color: #986801; }
+        .hl .hljs-symbol,
+        .hl .hljs-meta,
+        .hl .hljs-title { color: #4078f2; }
+
+        /* Draggable divider between the code and preview panes. */
+        .gutter {
+          flex: 0 0 auto;
+          position: relative;
+          width: 1px;
+          align-self: stretch;
+          background: var(--nile-colors-neutral-300, #e4e7ec);
+          cursor: col-resize;
+          touch-action: none;
+        }
+
+        .gutter::before {
+          content: '';
+          position: absolute;
+          inset: 0 -4px;
+        }
+
+        .gutter:hover,
+        .body--dragging .gutter {
+          background: var(--ng-colors-bg-brand-primary, #2970ff);
+        }
+
+        .pane--preview {
+          flex: 1 1 0;
+          overflow: auto;
+          border-left: 1px solid var(--nile-colors-neutral-200, #eaecf0);
+          background: var(--nile-colors-white-base, #ffffff);
+        }
+
+        nile-wysiwyg-preview {
+          display: block;
+        }
+
+        .preview-empty {
+          display: block;
+          padding: 12px 16px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+          font-size: 12px;
+          opacity: 0.7;
         }
       `,
     ];
   }
 
+  protected willUpdate(changed: Map<string, unknown>): void {
+    // Sync the draft (and thus preview/highlight) whenever the host sets value.
+    if (changed.has('value')) this.draft = this.value;
+  }
+
+  /** The current (possibly edited) source text — what "Done" would apply. */
+  public get currentValue(): string {
+    return this.draft;
+  }
+
   public focusInput(): void {
     this.updateComplete.then(() => this.textarea?.focus());
   }
 
+  /** highlight.js-coloured HTML for the current draft (falls back to escaped). */
+  private get highlighted(): string {
+    if (!this.draft) return '';
+    try {
+      return hljs.highlight(this.draft, { language: 'xml' }).value;
+    } catch {
+      return this.draft.replace(/[&<>]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]!));
+    }
+  }
+
+  private get lineCount(): number {
+    return this.draft ? this.draft.split('\n').length : 1;
+  }
+
+  /** Begins a pointer-driven resize of the split divider. */
+  private startSplitDrag = (e: PointerEvent) => {
+    const body = this.bodyEl;
+    if (!body) return;
+    e.preventDefault();
+    this.splitDragging = true;
+
+    const rect = body.getBoundingClientRect();
+    const MIN = 0.15;
+    const MAX = 0.85;
+
+    const onMove = (ev: PointerEvent) => {
+      if (rect.width === 0) return;
+      const ratio = (ev.clientX - rect.left) / rect.width;
+      this.splitRatio = Math.min(MAX, Math.max(MIN, ratio));
+    };
+    const onUp = () => {
+      this.splitDragging = false;
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+  };
+
+  /** Resets the divider to a 50/50 layout (double-click affordance). */
+  private resetSplit = () => {
+    this.splitRatio = 0.5;
+  };
+
+  private onInput = (e: Event) => {
+    this.draft = (e.target as HTMLTextAreaElement).value;
+  };
+
+  /** Keeps the highlight layer and line-number gutter aligned with scroll. */
+  private onScroll = (e: Event) => {
+    const ta = e.target as HTMLTextAreaElement;
+    if (this.highlightEl) {
+      this.highlightEl.style.transform = `translate(${-ta.scrollLeft}px, ${-ta.scrollTop}px)`;
+    }
+    if (this.linenosEl) {
+      this.linenosEl.style.transform = `translateY(${-ta.scrollTop}px)`;
+    }
+  };
+
   public render(): TemplateResult {
+    const preview = sanitizeHtml(this.draft);
+    const lines: TemplateResult[] = [];
+    for (let i = 1; i <= this.lineCount; i += 1) lines.push(html`<div>${i}</div>`);
     return html`
       <div class="bar" part="source-bar">
-        <span>HTML source</span>
+        <span>HTML</span>
         <span class="actions">
           <button type="button" @click=${() => this.emit('wysiwyg-source-cancel')}>
             Cancel
@@ -90,24 +369,53 @@ export class NileWysiwygSourceView extends NileElement {
           <button
             type="button"
             class="primary"
-            @click=${() =>
-              this.emit('wysiwyg-source-apply', { html: this.textarea?.value ?? '' })}
+            @click=${() => this.emit('wysiwyg-source-apply', { html: this.draft })}
           >
             Done
           </button>
         </span>
       </div>
-      <textarea
-        part="source-textarea"
-        spellcheck="false"
-        .value=${this.value}
-        @keydown=${(e: KeyboardEvent) => {
-          if (e.key === 'Escape') {
-            e.stopPropagation();
-            this.emit('wysiwyg-source-cancel');
-          }
-        }}
-      ></textarea>
+      <div class=${classMap({ body: true, 'body--dragging': this.splitDragging })}>
+        <div class="pane pane--code" style="flex: 0 0 ${this.splitRatio * 100}%">
+          <div class="linenos" part="line-numbers" aria-hidden="true">
+            <div class="linenos-inner">${lines}</div>
+          </div>
+          <div class="input-wrap">
+            <pre class="hl" aria-hidden="true"><code>${unsafeHTML(this.highlighted)}</code></pre>
+            <textarea
+              part="source-textarea"
+              spellcheck="false"
+              autocapitalize="off"
+              autocomplete="off"
+              wrap="off"
+              .value=${this.value}
+              @input=${this.onInput}
+              @scroll=${this.onScroll}
+              @keydown=${(e: KeyboardEvent) => {
+                if (e.key === 'Escape') {
+                  e.stopPropagation();
+                  this.emit('wysiwyg-source-cancel');
+                }
+              }}
+            ></textarea>
+          </div>
+        </div>
+        <div
+          class="gutter"
+          part="gutter"
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize source and preview"
+          title="Drag to resize · double-click to reset"
+          @pointerdown=${this.startSplitDrag}
+          @dblclick=${this.resetSplit}
+        ></div>
+        <div class="pane pane--preview" part="preview">
+          ${this.draft.trim()
+            ? html`<nile-wysiwyg-preview .content=${preview}></nile-wysiwyg-preview>`
+            : html`<span class="preview-empty">Nothing to preview</span>`}
+        </div>
+      </div>
     `;
   }
 }

package/src/nile-wysiwyg-editor/ui/suggest-list.ts

@@ -86,6 +86,16 @@ export class NileWysiwygSuggestList extends NileElement {
     if (this.activeIndex >= this.items.length) this.activeIndex = 0;
   }
 
+  protected updated(changed: Map<string, unknown>): void {
+    // Keep the highlighted item visible as the user arrows through a list
+    // that overflows the popup's max-height. `nearest` is a no-op when the
+    // item is already visible (e.g. after a hover), so it never fights the mouse.
+    if (changed.has('activeIndex') || changed.has('items')) {
+      const active = this.renderRoot.querySelector('.item.active');
+      (active as HTMLElement | null)?.scrollIntoView({ block: 'nearest' });
+    }
+  }
+
   public next(): void {
     if (this.items.length) this.activeIndex = (this.activeIndex + 1) % this.items.length;
   }

package/src/nile-wysiwyg-editor/ui/table-grid-picker.ts

@@ -2,23 +2,36 @@ import { html, css, TemplateResult, CSSResultArray } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import NileElement from '../../internal/nile-element';
 
-const MAX_ROWS = 8;
-const MAX_COLS = 10;
+/** Smallest grid shown before the pointer starts expanding it. */
+const MIN_ROWS = 5;
+const MIN_COLS = 5;
 
 /**
- * Toolbar item: a table button that opens an N×M hover grid. Picking a cell
- * emits `wysiwyg-command` with `insertTable { rows, cols }`.
+ * Toolbar item: a table button that opens a hover grid which auto-expands as
+ * the pointer reaches the last row/column (up to `maxRows`×`maxCols`), plus a
+ * "Custom" rows×cols input for larger tables. Picking a cell or confirming the
+ * custom size emits `wysiwyg-command` with `insertTable { rows, cols }`.
  */
 @customElement('nile-wysiwyg-table-picker')
 export class NileWysiwygTablePicker extends NileElement {
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** Hard cap on the number of rows selectable via grid or custom input. */
+  @property({ type: Number, attribute: 'max-rows', reflect: true }) maxRows = 20;
+
+  /** Hard cap on the number of columns selectable via grid or custom input. */
+  @property({ type: Number, attribute: 'max-cols', reflect: true }) maxCols = 20;
+
   @state() private open = false;
 
   @state() private hoverRows = 0;
 
   @state() private hoverCols = 0;
 
+  @state() private customRows = '';
+
+  @state() private customCols = '';
+
   public static get styles(): CSSResultArray {
     return [
       css`
@@ -69,7 +82,6 @@ export class NileWysiwygTablePicker extends NileElement {
 
         .grid {
           display: grid;
-          grid-template-columns: repeat(${MAX_COLS}, 14px);
           gap: 2px;
         }
 
@@ -93,6 +105,71 @@ export class NileWysiwygTablePicker extends NileElement {
           font-size: 12px;
           color: var(--nile-colors-neutral-600, #475467);
         }
+
+        .custom {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          margin-top: 8px;
+          padding-top: 8px;
+          border-top: 1px solid var(--nile-colors-neutral-300, #e4e7ec);
+        }
+
+        .custom input {
+          width: 44px;
+          height: 26px;
+          padding: 0 6px;
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 6px;
+          font-size: 12px;
+          box-sizing: border-box;
+          text-align: center;
+          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+          font-family: inherit;
+          /* Hide native number spinners: they overlap the centered text in this
+             narrow field and a stray click on the arrows mutates the value. */
+          -moz-appearance: textfield;
+          appearance: textfield;
+        }
+
+        .custom input::-webkit-outer-spin-button,
+        .custom input::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+
+        .custom input:focus {
+          outline: none;
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+        }
+
+        .custom .times {
+          font-size: 12px;
+          color: var(--nile-colors-neutral-600, #475467);
+        }
+
+        .custom button.insert {
+          margin-left: auto;
+          height: 26px;
+          padding: 0 12px;
+          border: none;
+          border-radius: 6px;
+          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+          color: #ffffff;
+          font-size: 12px;
+          font-weight: 600;
+          font-family: inherit;
+          cursor: pointer;
+        }
+
+        .custom button.insert:hover:not(:disabled) {
+          background: var(--nile-colors-primary-700, #1d4ed8);
+        }
+
+        .custom button.insert:disabled {
+          opacity: 0.4;
+          cursor: default;
+        }
       `,
     ];
   }
@@ -113,16 +190,35 @@ export class NileWysiwygTablePicker extends NileElement {
 
   private pick(rows: number, cols: number): void {
     this.open = false;
+    this.customRows = '';
+    this.customCols = '';
     this.emit('wysiwyg-command', {
       name: 'insertTable',
       attrs: { rows, cols, withHeaderRow: true },
     });
   }
 
+  /** Clamp raw input to 1..max; returns 0 when empty/invalid. */
+  private clamp(raw: string, max: number): number {
+    const n = parseInt(raw, 10);
+    if (!Number.isFinite(n) || n < 1) return 0;
+    return Math.min(n, max);
+  }
+
+  private insertCustom(): void {
+    const rows = this.clamp(this.customRows, this.maxRows);
+    const cols = this.clamp(this.customCols, this.maxCols);
+    if (rows >= 1 && cols >= 1) this.pick(rows, cols);
+  }
+
   public render(): TemplateResult {
+    // Grow the grid by one row/col once the pointer reaches the edge, capped.
+    const visibleRows = Math.min(Math.max(MIN_ROWS, this.hoverRows + 1), this.maxRows);
+    const visibleCols = Math.min(Math.max(MIN_COLS, this.hoverCols + 1), this.maxCols);
+
     const cells: TemplateResult[] = [];
-    for (let r = 1; r <= MAX_ROWS; r += 1) {
-      for (let c = 1; c <= MAX_COLS; c += 1) {
+    for (let r = 1; r <= visibleRows; r += 1) {
+      for (let c = 1; c <= visibleCols; c += 1) {
         cells.push(html`
           <span
             class="cell ${r <= this.hoverRows && c <= this.hoverCols ? 'hot' : ''}"
@@ -135,6 +231,11 @@ export class NileWysiwygTablePicker extends NileElement {
         `);
       }
     }
+
+    const customValid =
+      this.clamp(this.customRows, this.maxRows) >= 1 &&
+      this.clamp(this.customCols, this.maxCols) >= 1;
+
     return html`
       <button
         type="button"
@@ -154,11 +255,60 @@ export class NileWysiwygTablePicker extends NileElement {
       </button>
       ${this.open
         ? html`
-            <div class="panel" @mousedown=${(e: Event) => e.preventDefault()}>
-              <div class="grid">${cells}</div>
-              <div class="label">
+            <div class="panel">
+              <div
+                class="grid"
+                style="grid-template-columns: repeat(${visibleCols}, 14px)"
+                @mousedown=${(e: Event) => e.preventDefault()}
+                @mouseleave=${() => {
+                  this.hoverRows = 0;
+                  this.hoverCols = 0;
+                }}
+              >
+                ${cells}
+              </div>
+              <div class="label" @mousedown=${(e: Event) => e.preventDefault()}>
                 ${this.hoverRows > 0 ? `${this.hoverRows} × ${this.hoverCols}` : 'Pick a size'}
               </div>
+              <div class="custom">
+                <input
+                  type="number"
+                  min="1"
+                  max=${this.maxRows}
+                  aria-label="Rows"
+                  placeholder="Rows"
+                  .value=${this.customRows}
+                  @input=${(e: Event) => {
+                    this.customRows = (e.target as HTMLInputElement).value;
+                  }}
+                  @keydown=${(e: KeyboardEvent) => {
+                    if (e.key === 'Enter') this.insertCustom();
+                  }}
+                />
+                <span class="times">×</span>
+                <input
+                  type="number"
+                  min="1"
+                  max=${this.maxCols}
+                  aria-label="Columns"
+                  placeholder="Cols"
+                  .value=${this.customCols}
+                  @input=${(e: Event) => {
+                    this.customCols = (e.target as HTMLInputElement).value;
+                  }}
+                  @keydown=${(e: KeyboardEvent) => {
+                    if (e.key === 'Enter') this.insertCustom();
+                  }}
+                />
+                <button
+                  type="button"
+                  class="insert"
+                  ?disabled=${!customValid}
+                  @click=${() => this.insertCustom()}
+                >
+                  Insert
+                </button>
+              </div>
             </div>
           `
         : ''}