@aquera/nile-elements 1.9.5 → 1.9.7

package/src/nile-wysiwyg-editor/ui/embed-panel.ts

@@ -0,0 +1,143 @@
+import { html, css, TemplateResult, CSSResultArray } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import { toEmbedUrl } from '../engine/plugins/embeds';
+import '../../nile-input/index';
+import '../../nile-button/index';
+
+/**
+ * Floating embed-insert panel: paste a YouTube/Vimeo/Loom link. Styled to
+ * match the image panel (nile-input + nile-button). Emits
+ * `wysiwyg-embed-apply` detail: { src, provider } and `wysiwyg-embed-cancel`.
+ */
+@customElement('nile-wysiwyg-embed-panel')
+export class NileWysiwygEmbedPanel extends NileElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  @state() private urlValue = '';
+  @state() private error = '';
+
+  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;
+        }
+
+        .embed-panel {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+          min-width: 340px;
+          max-width: 420px;
+          padding: 12px;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 8px;
+          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+          font-size: 13px;
+        }
+
+        nile-input {
+          width: 100%;
+        }
+
+        .hint {
+          font-size: 12px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+        }
+
+        .error {
+          font-size: 12px;
+          color: var(--nile-colors-danger-600, #d92d20);
+        }
+
+        .actions {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          gap: 8px;
+          width: 100%;
+        }
+      `,
+    ];
+  }
+
+  public focusInput(): void {
+    this.updateComplete.then(() => {
+      const input = this.shadowRoot?.querySelector('nile-input') as HTMLElement | null;
+      input?.focus();
+    });
+  }
+
+  /** Clears the field. */
+  public reset(): void {
+    this.urlValue = '';
+    this.error = '';
+  }
+
+  private onUrl(event: CustomEvent): void {
+    this.urlValue = (event.detail?.value ?? '') as string;
+    this.error = '';
+  }
+
+  private handleSubmit(): void {
+    const target = toEmbedUrl(this.urlValue.trim());
+    if (!target) {
+      this.error = 'Only YouTube, Vimeo, and Loom links are supported.';
+      return;
+    }
+    this.error = '';
+    this.emit('wysiwyg-embed-apply', target);
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      this.emit('wysiwyg-embed-cancel');
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      event.stopPropagation();
+      this.handleSubmit();
+    }
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="embed-panel" part="embed-panel" @keydown=${this.handleKeydown}>
+        <nile-input
+          label="Video URL"
+          placeholder="https://www.youtube.com/watch?v=…"
+          .value=${this.urlValue}
+          @nile-input=${this.onUrl}
+        ></nile-input>
+
+        ${this.error
+          ? html`<span class="error" part="error">${this.error}</span>`
+          : html`<span class="hint">YouTube, Vimeo, or Loom</span>`}
+
+        <div class="actions">
+          <nile-button variant="primary" @click=${() => this.handleSubmit()}
+            >Embed</nile-button
+          >
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-embed-panel': NileWysiwygEmbedPanel;
+  }
+}

package/src/nile-wysiwyg-editor/ui/emoji-picker.ts

@@ -0,0 +1,152 @@
+import { html, css, TemplateResult, CSSResultArray } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import { EMOJI } from '../emoji';
+
+/**
+ * Emoji picker panel (the 😊 toolbar item). Shares the emoji set with the
+ * ":" autocomplete; the search box filters by name. Emits
+ * `wysiwyg-emoji-select` detail: { char } and `wysiwyg-emoji-cancel`.
+ */
+@customElement('nile-wysiwyg-emoji-picker')
+export class NileWysiwygEmojiPicker extends NileElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  @state() private filter = '';
+
+  @query('.emoji-picker__search') searchInput?: HTMLInputElement;
+
+  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));
+        }
+
+        input {
+          font: inherit;
+          font-size: 13px;
+          width: 100%;
+          box-sizing: border-box;
+          margin-bottom: 6px;
+          padding: 5px 8px;
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 6px;
+          outline: none;
+        }
+
+        input:focus {
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+        }
+
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(9, 1fr);
+          gap: 2px;
+          max-height: 200px;
+          overflow-y: auto;
+          overscroll-behavior: contain;
+        }
+
+        .emoji {
+          font: inherit;
+          font-size: 18px;
+          height: 30px;
+          padding: 0;
+          border: none;
+          border-radius: 5px;
+          background: transparent;
+          cursor: pointer;
+          line-height: 1;
+        }
+
+        .emoji:hover {
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+        }
+
+        .empty {
+          padding: 12px 4px;
+          font-size: 12px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+          text-align: center;
+        }
+      `,
+    ];
+  }
+
+  public focusInput(): void {
+    this.filter = '';
+    this.updateComplete.then(() => {
+      if (this.searchInput) this.searchInput.value = '';
+      this.searchInput?.focus();
+    });
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      this.emit('wysiwyg-emoji-cancel');
+    }
+  }
+
+  public render(): TemplateResult {
+    const query = this.filter.trim().toLowerCase();
+    const shown = query ? EMOJI.filter(e => e.name.includes(query)) : EMOJI;
+    return html`
+      <div class="panel" part="emoji-picker" @keydown=${this.handleKeydown}>
+        <input
+          class="emoji-picker__search"
+          type="text"
+          placeholder="Search emoji…"
+          aria-label="Search emoji"
+          @input=${(e: Event) => {
+            this.filter = (e.target as HTMLInputElement).value;
+          }}
+        />
+        <div class="grid" role="listbox" aria-label="Emoji">
+          ${shown.map(
+            e => html`
+              <button
+                type="button"
+                class="emoji"
+                title=${e.name}
+                @mousedown=${(ev: Event) => ev.preventDefault()}
+                @click=${() => this.emit('wysiwyg-emoji-select', { char: e.char })}
+              >
+                ${e.char}
+              </button>
+            `
+          )}
+          ${shown.length === 0
+            ? html`<div class="empty" style="grid-column: 1 / -1">No emoji found</div>`
+            : ''}
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-emoji-picker': NileWysiwygEmojiPicker;
+  }
+}

package/src/nile-wysiwyg-editor/ui/find-replace.ts

@@ -0,0 +1,174 @@
+import { html, css, TemplateResult, CSSResultArray } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+
+/**
+ * Find & replace bar pinned to the top-right of the editor. Emits:
+ *  - `wysiwyg-find`         detail: { query }
+ *  - `wysiwyg-find-step`    detail: { direction: 'next' | 'prev' }
+ *  - `wysiwyg-replace`      detail: { value }
+ *  - `wysiwyg-replace-all`  detail: { value }
+ *  - `wysiwyg-find-close`
+ */
+@customElement('nile-wysiwyg-find-bar')
+export class NileWysiwygFindBar extends NileElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  @property({ type: Number }) matchCount = 0;
+
+  @property({ type: Number }) activeIndex = 0;
+
+  @query('.find-bar__query') queryInput?: HTMLInputElement;
+
+  @query('.find-bar__replace') replaceInput?: HTMLInputElement;
+
+  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;
+          top: 8px;
+          right: 8px;
+          z-index: 25;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .find-bar {
+          display: grid;
+          grid-template-columns: auto auto auto auto;
+          align-items: center;
+          gap: 6px;
+          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));
+          font-size: 13px;
+        }
+
+        input {
+          font: inherit;
+          font-size: 13px;
+          width: 160px;
+          padding: 4px 8px;
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 6px;
+          outline: none;
+        }
+
+        input:focus {
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+        }
+
+        .count {
+          min-width: 42px;
+          text-align: center;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+          font-variant-numeric: tabular-nums;
+        }
+
+        button {
+          font: inherit;
+          font-size: 12px;
+          padding: 4px 8px;
+          border: none;
+          border-radius: 5px;
+          background: transparent;
+          cursor: pointer;
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        button:hover {
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+        }
+      `,
+    ];
+  }
+
+  public focusInput(): void {
+    this.updateComplete.then(() => {
+      this.queryInput?.focus();
+      this.queryInput?.select();
+    });
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      this.emit('wysiwyg-find-close');
+    } else if (event.key === 'Enter' && event.target === this.queryInput) {
+      event.preventDefault();
+      this.emit('wysiwyg-find-step', { direction: event.shiftKey ? 'prev' : 'next' });
+    }
+  }
+
+  public render(): TemplateResult {
+    const count = this.matchCount
+      ? `${Math.min(this.activeIndex + 1, this.matchCount)}/${this.matchCount}`
+      : '0/0';
+    return html`
+      <div class="find-bar" part="find-bar" @keydown=${this.handleKeydown}>
+        <input
+          class="find-bar__query"
+          type="text"
+          placeholder="Find"
+          aria-label="Find"
+          @input=${(e: Event) =>
+            this.emit('wysiwyg-find', { query: (e.target as HTMLInputElement).value })}
+        />
+        <span class="count">${count}</span>
+        <button
+          type="button"
+          title="Previous match"
+          @click=${() => this.emit('wysiwyg-find-step', { direction: 'prev' })}
+        >
+          ↑
+        </button>
+        <button
+          type="button"
+          title="Next match"
+          @click=${() => this.emit('wysiwyg-find-step', { direction: 'next' })}
+        >
+          ↓
+        </button>
+        <input
+          class="find-bar__replace"
+          type="text"
+          placeholder="Replace with"
+          aria-label="Replace with"
+        />
+        <button
+          type="button"
+          @click=${() =>
+            this.emit('wysiwyg-replace', { value: this.replaceInput?.value ?? '' })}
+        >
+          Replace
+        </button>
+        <button
+          type="button"
+          @click=${() =>
+            this.emit('wysiwyg-replace-all', { value: this.replaceInput?.value ?? '' })}
+        >
+          All
+        </button>
+        <button type="button" title="Close (Esc)" @click=${() => this.emit('wysiwyg-find-close')}>
+          ✕
+        </button>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-find-bar': NileWysiwygFindBar;
+  }
+}

package/src/nile-wysiwyg-editor/ui/image-menu.ts

@@ -0,0 +1,140 @@
+import { html, css, TemplateResult, CSSResultArray } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import { renderGlyph } from '../../internal/glyph';
+import type { ToolbarState } from '../engine/selection-state';
+
+interface ImageOp {
+  label: string;
+  /** Design-system icon name; `text` is the fallback when no glyph fits. */
+  icon?: string;
+  text?: string;
+  command: string;
+  attrs?: Record<string, unknown>;
+  active?: (s: ToolbarState) => boolean;
+}
+
+const OPS: ImageOp[] = [
+  {
+    label: 'Align left',
+    icon: 'format_align_left',
+    command: 'setImageAlign',
+    attrs: { align: 'left' },
+    active: s => s.imageAlign === 'left',
+  },
+  {
+    label: 'Align center',
+    icon: 'format_align_middle',
+    command: 'setImageAlign',
+    attrs: { align: 'center' },
+    active: s => s.imageAlign === 'center',
+  },
+  {
+    label: 'Align right',
+    icon: 'format_align_right',
+    command: 'setImageAlign',
+    attrs: { align: 'right' },
+    active: s => s.imageAlign === 'right',
+  },
+  {
+    label: 'Toggle caption',
+    icon: 'ng-captions',
+    command: 'toggleImageCaption',
+    active: s => s.imageIsFigure,
+  },
+  { label: 'Original size', text: '1:1', command: 'setImageWidth', attrs: { width: null } },
+  { label: 'Delete image', icon: 'ng-trash-01', command: 'deleteImage' },
+];
+
+/**
+ * Compact floating bar shown while an image or figure is selected. The host
+ * positions it; operations bubble up as `wysiwyg-command` events.
+ */
+@customElement('nile-wysiwyg-image-menu')
+export class NileWysiwygImageMenu extends NileElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  @property({ attribute: false }) toolbarState?: ToolbarState;
+
+  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: 15;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .menu {
+          display: flex;
+          gap: 2px;
+          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));
+        }
+
+        button {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 26px;
+          height: 26px;
+          padding: 0 4px;
+          border: none;
+          border-radius: 5px;
+          background: transparent;
+          cursor: pointer;
+          font-size: 12px;
+          font-weight: 600;
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        button:hover {
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+        }
+
+        button[data-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));
+        }
+      `,
+    ];
+  }
+
+  public render(): TemplateResult {
+    const state = this.toolbarState;
+    return html`
+      <div class="menu" part="image-menu" @mousedown=${(e: Event) => e.preventDefault()}>
+        ${OPS.map(
+          op => html`
+            <button
+              type="button"
+              title=${op.label}
+              aria-label=${op.label}
+              ?data-active=${state && op.active ? op.active(state) : false}
+              @click=${() => this.emit('wysiwyg-command', { name: op.command, attrs: op.attrs })}
+            >
+              ${op.icon ? renderGlyph(op.icon, 16) : op.text}
+            </button>
+          `
+        )}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-image-menu': NileWysiwygImageMenu;
+  }
+}