@aquera/nile-elements 1.9.5 → 1.9.7

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

@@ -0,0 +1,119 @@
+import { html, css, TemplateResult, CSSResultArray } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+
+/**
+ * Raw HTML source editing mode. Replaces the rich surface while open; the
+ * host re-parses (and re-sanitizes) the HTML on apply. Emits
+ * `wysiwyg-source-apply` detail: { html } and `wysiwyg-source-cancel`.
+ */
+@customElement('nile-wysiwyg-source-view')
+export class NileWysiwygSourceView extends NileElement {
+  @property({ type: String }) value = '';
+
+  @query('textarea') textarea?: HTMLTextAreaElement;
+
+  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;
+        }
+
+        .bar {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 6px 12px;
+          font-size: 12px;
+          color: var(--nile-colors-neutral-600, #475467);
+          border-bottom: 1px solid var(--nile-colors-neutral-300, #e4e7ec);
+          background: var(--nile-wysiwyg-toolbar-bg, var(--nile-colors-neutral-50, #f9fafb));
+        }
+
+        .actions {
+          display: flex;
+          gap: 8px;
+        }
+
+        button {
+          font: inherit;
+          font-size: 12px;
+          padding: 4px 12px;
+          border-radius: 6px;
+          border: 1px solid transparent;
+          cursor: pointer;
+          background: transparent;
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        button.primary {
+          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+          color: #ffffff;
+        }
+
+        textarea {
+          flex: 1;
+          min-height: var(--nile-wysiwyg-min-height, 160px);
+          padding: 12px 16px;
+          border: none;
+          outline: none;
+          resize: vertical;
+          font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
+          font-size: 12px;
+          line-height: 1.5;
+          color: var(--nile-colors-neutral-900, #101828);
+          background: transparent;
+          box-sizing: border-box;
+        }
+      `,
+    ];
+  }
+
+  public focusInput(): void {
+    this.updateComplete.then(() => this.textarea?.focus());
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="bar" part="source-bar">
+        <span>HTML source</span>
+        <span class="actions">
+          <button type="button" @click=${() => this.emit('wysiwyg-source-cancel')}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            class="primary"
+            @click=${() =>
+              this.emit('wysiwyg-source-apply', { html: this.textarea?.value ?? '' })}
+          >
+            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>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-source-view': NileWysiwygSourceView;
+  }
+}

package/src/nile-wysiwyg-editor/ui/special-chars.ts

@@ -0,0 +1,209 @@
+import { html, css, TemplateResult, CSSResultArray } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import '../../nile-button-toggle-group/index';
+import '../../nile-button-toggle/index';
+
+interface CharCategory {
+  key: string;
+  label: string;
+  /** Representative glyph shown as the (iconified) tab label. */
+  icon: string;
+  chars: string[];
+}
+
+const CATEGORIES: CharCategory[] = [
+  {
+    key: 'punctuation',
+    label: 'Punctuation',
+    icon: '¶',
+    chars: [
+      '–', '—', '…', '‘', '’', '“', '”', '‚', '„', '«', '»', '‹', '›', '§',
+      '¶', '†', '‡', '•', '·', '¡', '¿', '′', '″', '‰',
+    ],
+  },
+  {
+    key: 'currency',
+    label: 'Currency',
+    icon: '$',
+    chars: [
+      '$', '€', '£', '¥', '₹', '¢', '₩', '₽', '₺', '₪', '₫', '₦', '₴', '₱',
+      '฿', '₿',
+    ],
+  },
+  {
+    key: 'math',
+    label: 'Math',
+    icon: '∑',
+    chars: [
+      '±', '×', '÷', '≠', '≈', '≤', '≥', '¬', '∞', '∑', '∏', '√', '∫', '∂',
+      '∆', '∇', '∈', '∉', '∩', '∪', '⊂', '⊃', '°', 'µ', '‰', '½', '⅓', '¼',
+      '¾', '⅛',
+    ],
+  },
+  {
+    key: 'arrows',
+    label: 'Arrows',
+    icon: '→',
+    chars: [
+      '←', '→', '↑', '↓', '↔', '↕', '⇐', '⇒', '⇑', '⇓', '⇔', '↩', '↪', '↖',
+      '↗', '↘', '↙', '⟵', '⟶',
+    ],
+  },
+  {
+    key: 'latin',
+    label: 'Latin',
+    icon: 'Á',
+    chars: [
+      'À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í',
+      'Î', 'Ï', 'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', 'Ø', 'Ù', 'Ú', 'Û', 'Ü', 'ß',
+      'à', 'á', 'â', 'ã', 'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë', 'ì', 'í',
+      'î', 'ï', 'ñ', 'ò', 'ó', 'ô', 'õ', 'ö', 'ø', 'ù', 'ú', 'û', 'ü', 'ÿ',
+    ],
+  },
+  {
+    key: 'symbols',
+    label: 'Symbols',
+    icon: '★',
+    chars: [
+      '©', '®', '™', '℠', '№', '℮', '✓', '✗', '★', '☆', '♠', '♣', '♥', '♦',
+      '☀', '☁', '☂', '♻', '⚠', '⌘', '⌥', '⇧', '⏎', '⌫',
+    ],
+  },
+];
+
+/**
+ * Special characters picker (the Ω toolbar item). Emits
+ * `wysiwyg-char-select` detail: { char } and `wysiwyg-char-cancel`.
+ */
+@customElement('nile-wysiwyg-special-chars')
+export class NileWysiwygSpecialChars extends NileElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  @state() private category = CATEGORIES[0].key;
+
+  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)
+          );
+          position: absolute;
+          z-index: 20;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .panel {
+          width: 316px;
+          padding: 8px;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 8px;
+          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
+        }
+
+        .tabs {
+          flex-wrap: wrap;
+          margin-bottom: 8px;
+          max-width: 100%;
+        }
+
+        .cat-icon {
+          display: inline-block;
+          min-width: 16px;
+          font-size: 15px;
+          line-height: 1;
+          text-align: center;
+        }
+
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(10, 1fr);
+          gap: 2px;
+          max-height: 180px;
+          overflow-y: auto;
+          overscroll-behavior: contain;
+        }
+
+        .char {
+          font: inherit;
+          font-size: 15px;
+          height: 28px;
+          border: none;
+          border-radius: 5px;
+          background: transparent;
+          cursor: pointer;
+          color: var(--nile-colors-dark-900, #101828);
+        }
+
+        .char:hover {
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+        }
+      `,
+    ];
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      this.emit('wysiwyg-char-cancel');
+    }
+  }
+
+  public render(): TemplateResult {
+    const current = CATEGORIES.find(c => c.key === this.category) ?? CATEGORIES[0];
+    return html`
+      <div
+        class="panel"
+        part="special-chars"
+        @keydown=${this.handleKeydown}
+        @mousedown=${(e: Event) => e.preventDefault()}
+      >
+        <nile-button-toggle-group
+          class="tabs"
+          .value=${this.category}
+          @nile-change=${(e: CustomEvent) => {
+            this.category = e.detail.value as string;
+          }}
+        >
+          ${CATEGORIES.map(
+            cat => html`
+              <nile-button-toggle
+                value=${cat.key}
+                title=${cat.label}
+                aria-label=${cat.label}
+                ><span class="cat-icon">${cat.icon}</span></nile-button-toggle
+              >
+            `
+          )}
+        </nile-button-toggle-group>
+        <div class="grid" role="listbox" aria-label="Special characters">
+          ${current.chars.map(
+            char => html`
+              <button
+                type="button"
+                class="char"
+                title=${char}
+                @click=${() => this.emit('wysiwyg-char-select', { char })}
+              >
+                ${char}
+              </button>
+            `
+          )}
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-special-chars': NileWysiwygSpecialChars;
+  }
+}

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

@@ -0,0 +1,138 @@
+import { html, css, TemplateResult, CSSResultArray } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+
+export interface SuggestItem {
+  key: string;
+  label: string;
+  /** Secondary text shown right-aligned (e.g. slash-command hint). */
+  hint?: string;
+}
+
+/**
+ * Keyboard-navigable suggestion popup shared by mentions and slash commands.
+ * The host positions it, feeds `items`, and drives navigation through
+ * next()/prev()/selectCurrent(); picking an item emits
+ * `wysiwyg-suggest-select` with the item.
+ */
+@customElement('nile-wysiwyg-suggest-list')
+export class NileWysiwygSuggestList extends NileElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  @property({ attribute: false }) items: SuggestItem[] = [];
+
+  @state() private activeIndex = 0;
+
+  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)
+          );
+          position: absolute;
+          z-index: 25;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .list {
+          min-width: 200px;
+          max-width: 320px;
+          max-height: 240px;
+          overflow-y: auto;
+          padding: 4px;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 8px;
+          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
+          font-size: 13px;
+        }
+
+        .item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 12px;
+          padding: 6px 8px;
+          border-radius: 5px;
+          cursor: pointer;
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        .item.active {
+          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
+          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));
+        }
+
+        .hint {
+          font-size: 11px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+        }
+
+        .empty {
+          padding: 6px 8px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+        }
+      `,
+    ];
+  }
+
+  protected willUpdate(): void {
+    if (this.activeIndex >= this.items.length) this.activeIndex = 0;
+  }
+
+  public next(): void {
+    if (this.items.length) this.activeIndex = (this.activeIndex + 1) % this.items.length;
+  }
+
+  public prev(): void {
+    if (this.items.length) {
+      this.activeIndex = (this.activeIndex - 1 + this.items.length) % this.items.length;
+    }
+  }
+
+  public resetActive(): void {
+    this.activeIndex = 0;
+  }
+
+  public selectCurrent(): boolean {
+    const item = this.items[this.activeIndex];
+    if (!item) return false;
+    this.emit('wysiwyg-suggest-select', { item });
+    return true;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="list" part="suggest-list" @mousedown=${(e: Event) => e.preventDefault()}>
+        ${this.items.length
+          ? this.items.map(
+              (item, index) => html`
+                <div
+                  class="item ${index === this.activeIndex ? 'active' : ''}"
+                  @mouseenter=${() => {
+                    this.activeIndex = index;
+                  }}
+                  @click=${() => this.selectCurrent()}
+                >
+                  <span>${item.label}</span>
+                  ${item.hint ? html`<span class="hint">${item.hint}</span>` : ''}
+                </div>
+              `
+            )
+          : html`<div class="empty">No results</div>`}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-suggest-list': NileWysiwygSuggestList;
+  }
+}

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

@@ -0,0 +1,173 @@
+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;
+
+/**
+ * Toolbar item: a table button that opens an N×M hover grid. Picking a cell
+ * emits `wysiwyg-command` with `insertTable { rows, cols }`.
+ */
+@customElement('nile-wysiwyg-table-picker')
+export class NileWysiwygTablePicker extends NileElement {
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @state() private open = false;
+
+  @state() private hoverRows = 0;
+
+  @state() private hoverCols = 0;
+
+  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)
+          );
+          position: relative;
+          display: inline-flex;
+        }
+
+        button.trigger {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 32px;
+          height: 32px;
+          padding: 0 6px;
+          box-sizing: border-box;
+          border: none;
+          border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));
+          background: transparent;
+          cursor: pointer;
+          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+        }
+
+        button.trigger:hover:not(:disabled) {
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+        }
+
+        button.trigger:disabled {
+          opacity: 0.4;
+          cursor: default;
+        }
+
+        .panel {
+          position: absolute;
+          top: calc(100% + 4px);
+          left: 0;
+          z-index: 30;
+          padding: 8px;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 8px;
+          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
+        }
+
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(${MAX_COLS}, 14px);
+          gap: 2px;
+        }
+
+        .cell {
+          width: 14px;
+          height: 14px;
+          border: 1px solid var(--nile-colors-neutral-300, #d0d5dd);
+          border-radius: 2px;
+          box-sizing: border-box;
+          cursor: pointer;
+        }
+
+        .cell.hot {
+          background: var(--nile-colors-primary-100, var(--ng-componentcolors-utility-blue-100, #dbeafe));
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+        }
+
+        .label {
+          margin-top: 6px;
+          text-align: center;
+          font-size: 12px;
+          color: var(--nile-colors-neutral-600, #475467);
+        }
+      `,
+    ];
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    document.addEventListener('mousedown', this.handleOutside);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.removeEventListener('mousedown', this.handleOutside);
+  }
+
+  private handleOutside = (event: MouseEvent): void => {
+    if (this.open && !event.composedPath().includes(this)) this.open = false;
+  };
+
+  private pick(rows: number, cols: number): void {
+    this.open = false;
+    this.emit('wysiwyg-command', {
+      name: 'insertTable',
+      attrs: { rows, cols, withHeaderRow: true },
+    });
+  }
+
+  public render(): TemplateResult {
+    const cells: TemplateResult[] = [];
+    for (let r = 1; r <= MAX_ROWS; r += 1) {
+      for (let c = 1; c <= MAX_COLS; c += 1) {
+        cells.push(html`
+          <span
+            class="cell ${r <= this.hoverRows && c <= this.hoverCols ? 'hot' : ''}"
+            @mouseenter=${() => {
+              this.hoverRows = r;
+              this.hoverCols = c;
+            }}
+            @click=${() => this.pick(r, c)}
+          ></span>
+        `);
+      }
+    }
+    return html`
+      <button
+        type="button"
+        class="trigger"
+        part="button"
+        aria-label="Insert table"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        ?disabled=${this.disabled}
+        @mousedown=${(e: Event) => e.preventDefault()}
+        @click=${() => {
+          this.open = !this.open;
+          this.hoverRows = 0;
+          this.hoverCols = 0;
+        }}
+      >
+        <nile-glyph name="grid-01" size="18" method="stroke"></nile-glyph>
+      </button>
+      ${this.open
+        ? html`
+            <div class="panel" @mousedown=${(e: Event) => e.preventDefault()}>
+              <div class="grid">${cells}</div>
+              <div class="label">
+                ${this.hoverRows > 0 ? `${this.hoverRows} × ${this.hoverCols}` : 'Pick a size'}
+              </div>
+            </div>
+          `
+        : ''}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-table-picker': NileWysiwygTablePicker;
+  }
+}