@aquera/nile-elements 1.9.6 → 1.9.7

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

@@ -0,0 +1,337 @@
+import { html, css, TemplateResult, CSSResultArray } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import '../../nile-input/index';
+import '../../nile-button/index';
+
+/**
+ * Floating image insert/edit panel, matching nile-rich-text-editor's image
+ * dialog: URL + alt + caption (nile-input) and an Insert action. When
+ * `upload-from-computer` is set it also offers an "or / Upload from computer"
+ * button (with max-size validation), matching the RTE's `uploadfromcomputer`
+ * flag. An edit mode pre-fills the fields and adds Remove.
+ *
+ * The host positions it and listens for:
+ *  - `wysiwyg-image-apply`  detail: { src, alt, caption }         (insert / edit)
+ *  - `wysiwyg-image-file`   detail: { file, alt, caption }        (upload)
+ *  - `wysiwyg-image-remove`                                       (delete active image)
+ *  - `wysiwyg-image-cancel`                                       (Escape)
+ */
+@customElement('nile-wysiwyg-image-panel')
+export class NileWysiwygImagePanel extends NileElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /** True when editing an already-inserted image (shows Remove, "Save"). */
+  @property({ type: Boolean }) editing = false;
+
+  /** Shows the "Upload from computer" button below the URL field. */
+  @property({ type: Boolean, attribute: 'upload-from-computer' })
+  uploadFromComputer = false;
+
+  /** Maximum allowed upload size in bytes (default 2 MB). */
+  @property({ type: Number, attribute: 'max-file-size' }) maxFileSize = 2 * 1024 * 1024;
+
+  @state() private srcValue = '';
+  @state() private altValue = '';
+  @state() private captionValue = '';
+  @state() private uploadedFileName = '';
+  @state() private errorMessage = '';
+
+  /** File staged by "Upload from computer", applied on Insert. */
+  private stagedFile: File | null = null;
+
+  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;
+        }
+
+        .image-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%;
+        }
+
+        .divider {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+          font-size: 12px;
+        }
+
+        .divider::before,
+        .divider::after {
+          content: '';
+          flex: 1;
+          height: 1px;
+          background: var(--nile-colors-neutral-300, #e4e7ec);
+        }
+
+        .upload-row {
+          display: flex;
+          flex-direction: column;
+          align-items: stretch;
+          gap: 6px;
+        }
+
+        .upload-btn {
+          width: 100%;
+        }
+
+        /* Center the icon + label within the full-width upload button. */
+        .upload-btn::part(base) {
+          width: 100%;
+          justify-content: center;
+        }
+
+        .upload-filename {
+          color: var(--nile-colors-neutral-600, #475467);
+          font-size: 12px;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .hidden-file {
+          display: none;
+        }
+
+        .error {
+          color: var(--nile-colors-danger-600, #d92d20);
+          font-size: 12px;
+        }
+
+        .actions {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          gap: 8px;
+          width: 100%;
+        }
+
+        .actions .spacer {
+          flex: 1;
+        }
+      `,
+    ];
+  }
+
+  public focusInput(): void {
+    this.updateComplete.then(() => {
+      const input = this.shadowRoot?.querySelector('nile-input') as HTMLElement | null;
+      input?.focus();
+    });
+  }
+
+  /** Clears every field and returns to insert (non-editing) mode. */
+  public reset(): void {
+    this.editing = false;
+    this.srcValue = '';
+    this.altValue = '';
+    this.captionValue = '';
+    this.uploadedFileName = '';
+    this.errorMessage = '';
+    this.stagedFile = null;
+  }
+
+  /** Pre-fills the panel for editing an existing image. */
+  public prefill(data: { src?: string; alt?: string; caption?: string }): void {
+    this.editing = true;
+    this.srcValue = data.src ?? '';
+    this.altValue = data.alt ?? '';
+    this.captionValue = data.caption ?? '';
+    this.uploadedFileName = '';
+    this.errorMessage = '';
+    this.stagedFile = null;
+  }
+
+  private onSrc(event: CustomEvent): void {
+    this.srcValue = (event.detail?.value ?? '') as string;
+    if (this.srcValue && this.stagedFile) {
+      this.stagedFile = null;
+      this.uploadedFileName = '';
+    }
+    this.errorMessage = '';
+  }
+
+  private onAlt(event: CustomEvent): void {
+    this.altValue = (event.detail?.value ?? '') as string;
+  }
+
+  private onCaption(event: CustomEvent): void {
+    this.captionValue = (event.detail?.value ?? '') as string;
+  }
+
+  private triggerFilePicker(): void {
+    const input = this.shadowRoot?.querySelector('.hidden-file') as HTMLInputElement | null;
+    input?.click();
+  }
+
+  private onFileChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (!file) return;
+    if (!file.type.startsWith('image/')) {
+      this.errorMessage = 'Please choose an image file.';
+      input.value = '';
+      return;
+    }
+    if (file.size > this.maxFileSize) {
+      const mb = Math.round((this.maxFileSize / (1024 * 1024)) * 10) / 10;
+      this.errorMessage = `Image must be under ${mb} MB.`;
+      input.value = '';
+      return;
+    }
+    this.stagedFile = file;
+    this.uploadedFileName = file.name;
+    this.srcValue = '';
+    this.errorMessage = '';
+    input.value = '';
+  }
+
+  private handleSubmit(): void {
+    const alt = this.altValue.trim();
+    const caption = this.captionValue.trim();
+    if (this.stagedFile) {
+      this.emit('wysiwyg-image-file', { file: this.stagedFile, alt, caption });
+      return;
+    }
+    const src = this.srcValue.trim();
+    if (!src) {
+      this.errorMessage = this.uploadFromComputer
+        ? 'Add an image URL or upload a file.'
+        : 'Add an image URL.';
+      return;
+    }
+    this.emit('wysiwyg-image-apply', { src, alt, caption });
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      this.emit('wysiwyg-image-cancel');
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      event.stopPropagation();
+      this.handleSubmit();
+    }
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="image-panel" part="image-panel" @keydown=${this.handleKeydown}>
+        <nile-input
+          label="Image URL"
+          placeholder="Paste image link here"
+          .value=${this.srcValue}
+          @nile-input=${this.onSrc}
+        ></nile-input>
+
+        ${this.uploadFromComputer
+          ? html`
+              <div class="divider">or</div>
+              <div class="upload-row">
+                <nile-button
+                  class="upload-btn"
+                  variant="secondary"
+                  @click=${this.triggerFilePicker}
+                >
+                  <svg
+                    slot="prefix"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                    <polyline points="17 8 12 3 7 8" />
+                    <line x1="12" y1="3" x2="12" y2="15" />
+                  </svg>
+                  Upload from computer
+                </nile-button>
+                ${this.uploadedFileName
+                  ? html`<span class="upload-filename" title=${this.uploadedFileName}
+                      >${this.uploadedFileName}</span
+                    >`
+                  : null}
+              </div>
+              <input
+                class="hidden-file"
+                type="file"
+                accept="image/*"
+                @change=${this.onFileChange}
+              />
+            `
+          : null}
+
+        ${this.errorMessage
+          ? html`<span class="error" part="error">${this.errorMessage}</span>`
+          : null}
+
+        <nile-input
+          label="Alt text"
+          placeholder="Describe the image"
+          .value=${this.altValue}
+          @nile-input=${this.onAlt}
+        ></nile-input>
+
+        <nile-input
+          label="Caption"
+          placeholder="Add a caption (optional)"
+          .value=${this.captionValue}
+          @nile-input=${this.onCaption}
+        ></nile-input>
+
+        <div class="actions">
+          ${this.editing
+            ? html`<nile-button
+                  variant="destructive"
+                  @click=${() => this.emit('wysiwyg-image-remove')}
+                  >Remove</nile-button
+                >
+                <span class="spacer"></span>`
+            : null}
+          <nile-button variant="primary" @click=${() => this.handleSubmit()}
+            >${this.editing ? 'Save' : 'Insert'}</nile-button
+          >
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-image-panel': NileWysiwygImagePanel;
+  }
+}

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

@@ -0,0 +1,142 @@
+import { html, css, TemplateResult, CSSResultArray, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+
+export interface InsertMenuItem {
+  label: string;
+  description?: string;
+}
+
+/**
+ * Generic list popover for "pick one and insert" toolbar actions — used by the
+ * template and merge-field pickers. Emits `wysiwyg-insert-select` { index } and
+ * `wysiwyg-insert-cancel`. Never takes focus, so the editor selection survives.
+ */
+@customElement('nile-wysiwyg-insert-menu')
+export class NileWysiwygInsertMenu extends NileElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  @property({ type: String }) heading = '';
+
+  @property({ type: String, attribute: 'empty-text' }) emptyText = 'Nothing configured.';
+
+  @property({ attribute: false }) items: InsertMenuItem[] = [];
+
+  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: 260px;
+          max-height: 300px;
+          overflow-y: auto;
+          overscroll-behavior: contain;
+          padding: 6px;
+          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));
+        }
+
+        .heading {
+          font-size: 11px;
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 0.04em;
+          color: var(--nile-colors-neutral-600, #667085);
+          padding: 4px 8px;
+        }
+
+        .item {
+          display: block;
+          width: 100%;
+          text-align: left;
+          font: inherit;
+          padding: 6px 8px;
+          border: none;
+          border-radius: 6px;
+          background: transparent;
+          cursor: pointer;
+          color: var(--nile-colors-dark-900, #101828);
+        }
+
+        .item:hover {
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+        }
+
+        .item .label {
+          font-size: 13px;
+        }
+
+        .item .desc {
+          font-size: 11px;
+          color: var(--nile-colors-neutral-600, #667085);
+          margin-top: 1px;
+        }
+
+        .empty {
+          font-size: 12px;
+          color: var(--nile-colors-neutral-600, #667085);
+          padding: 8px;
+        }
+      `,
+    ];
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      this.emit('wysiwyg-insert-cancel');
+    }
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div
+        class="panel"
+        part="insert-menu"
+        role="menu"
+        @keydown=${this.handleKeydown}
+        @mousedown=${(e: Event) => e.preventDefault()}
+      >
+        ${this.heading ? html`<div class="heading">${this.heading}</div>` : nothing}
+        ${this.items.length === 0
+          ? html`<div class="empty">${this.emptyText}</div>`
+          : this.items.map(
+              (item, index) => html`
+                <button
+                  type="button"
+                  class="item"
+                  role="menuitem"
+                  @click=${() => this.emit('wysiwyg-insert-select', { index })}
+                >
+                  <div class="label">${item.label}</div>
+                  ${item.description
+                    ? html`<div class="desc">${item.description}</div>`
+                    : nothing}
+                </button>
+              `
+            )}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-insert-menu': NileWysiwygInsertMenu;
+  }
+}

package/src/nile-wysiwyg-editor/ui/link-editor.ts

@@ -0,0 +1,180 @@
+import { html, css, TemplateResult, CSSResultArray, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+
+/**
+ * Floating link create/edit panel. The host positions it absolutely inside
+ * the editor chrome and listens for:
+ *  - `wysiwyg-link-apply`  detail: { href, text }
+ *  - `wysiwyg-link-remove`
+ *  - `wysiwyg-link-cancel`
+ */
+@customElement('nile-wysiwyg-link-editor')
+export class NileWysiwygLinkEditor extends NileElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  @property({ type: String }) href = '';
+
+  @property({ type: String }) text = '';
+
+  /** Show the text field (only when creating a link from a cursor). */
+  @property({ type: Boolean }) allowText = false;
+
+  /** Show the remove button (when editing an existing link). */
+  @property({ type: Boolean }) canRemove = false;
+
+  @query('.link-editor__href') hrefInput?: 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;
+        }
+
+        .link-editor {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          min-width: 280px;
+          padding: 12px;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid
+            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, #d0d5dd));
+          border-radius: var(--nile-wysiwyg-radius, 8px);
+          box-shadow: var(
+            --nile-wysiwyg-popover-shadow,
+            0 4px 12px rgba(16, 24, 40, 0.12)
+          );
+          font-size: 13px;
+        }
+
+        label {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        input {
+          font: inherit;
+          padding: 6px 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));
+        }
+
+        .link-editor__actions {
+          display: flex;
+          gap: 8px;
+          justify-content: flex-end;
+        }
+
+        button {
+          font: inherit;
+          padding: 6px 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;
+        }
+
+        button.danger {
+          color: var(--nile-colors-error-600, #d92d20);
+        }
+      `,
+    ];
+  }
+
+  /** Focuses the URL field; called by the host after opening. */
+  public focusInput(): void {
+    this.updateComplete.then(() => this.hrefInput?.focus());
+  }
+
+  private handleSubmit(event: Event): void {
+    event.preventDefault();
+    const href = this.hrefInput?.value.trim() ?? '';
+    if (!href) return;
+    const textInput = this.shadowRoot?.querySelector<HTMLInputElement>('.link-editor__text');
+    this.emit('wysiwyg-link-apply', { href, text: textInput?.value.trim() ?? '' });
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      this.emit('wysiwyg-link-cancel');
+    }
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <form
+        class="link-editor"
+        part="link-editor"
+        @submit=${this.handleSubmit}
+        @keydown=${this.handleKeydown}
+      >
+        <label>
+          URL
+          <input
+            class="link-editor__href"
+            type="url"
+            placeholder="https://"
+            .value=${this.href}
+          />
+        </label>
+        ${this.allowText
+          ? html`
+              <label>
+                Text
+                <input class="link-editor__text" type="text" .value=${this.text} />
+              </label>
+            `
+          : nothing}
+        <div class="link-editor__actions">
+          ${this.canRemove
+            ? html`
+                <button
+                  type="button"
+                  class="danger"
+                  @click=${() => this.emit('wysiwyg-link-remove')}
+                >
+                  Remove
+                </button>
+              `
+            : nothing}
+          <button type="button" @click=${() => this.emit('wysiwyg-link-cancel')}>
+            Cancel
+          </button>
+          <button type="submit" class="primary">Apply</button>
+        </div>
+      </form>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-link-editor': NileWysiwygLinkEditor;
+  }
+}