@aquera/nile-elements 1.9.6 → 1.9.7

package/src/nile-wysiwyg-editor/types.ts

@@ -0,0 +1,83 @@
+import type { CommandAttrs, CommandName } from './engine/commands';
+
+/**
+ * Toolbar configuration. The string form uses space-separated item names with
+ * `|` as a group divider, e.g. `"bold italic | heading | link"`. `"none"`
+ * hides the toolbar entirely.
+ */
+export type ToolbarConfig = string;
+
+/** Pseudo-commands handled by the host chrome rather than the registry. */
+export type UiCommandName =
+  | 'openLink'
+  | 'openImage'
+  | 'openEmbed'
+  | 'openBookmark'
+  | 'toggleSource'
+  | 'togglePastePlainText'
+  | 'toggleFullscreen'
+  | 'toggleShowBlocks'
+  | 'openShortcutHelp'
+  | 'openSpecialChars'
+  | 'openEmoji'
+  | 'openFind'
+  | 'exportPdf'
+  | 'exportWord'
+  | 'exportInlineHtml'
+  | 'importWord'
+  | 'toggleFormatPainter'
+  | 'openMergeField'
+  | 'openTemplate'
+  | 'openMath'
+  | 'openMarkdown';
+
+/** Detail payload of the internal `wysiwyg-command` event (toolbar → host). */
+export interface WysiwygCommandDetail {
+  name: CommandName | UiCommandName;
+  attrs?: CommandAttrs;
+}
+
+/** Mention configuration: trigger character → items. Same shape as the
+ * legacy nile-rich-text-editor. */
+export type MentionsConfig = Record<string, { key: string; label: string }[]>;
+
+/** Reusable content snippet, offered through the "/" menu. */
+export interface SnippetConfig {
+  key: string;
+  label: string;
+  html: string;
+}
+
+/** A mail-merge / personalization placeholder offered in the merge-field picker. */
+export interface MergeFieldConfig {
+  /** Stable identifier substituted at render time (e.g. `first_name`). */
+  id: string;
+  /** Human-readable label shown in the chip and picker. */
+  label: string;
+}
+
+/** A predefined content structure offered in the template picker. */
+export interface TemplateConfig {
+  label: string;
+  /** Optional secondary line shown under the label in the picker. */
+  description?: string;
+  /** HTML inserted at the cursor when chosen. */
+  html: string;
+}
+
+/** Detail payload of `nile-change` / `nile-input`. */
+export interface WysiwygChangeDetail {
+  value: string;
+  json: Record<string, unknown>;
+  /** Alias of `value` for drop-in parity with nile-rich-text-editor. */
+  content: string;
+}
+
+export const DEFAULT_TOOLBAR =
+  'undo redo findReplace | heading | bold italic underline strike subscript superscript | fontFamily fontSize lineHeight | ' +
+  'textColor bgColor | alignLeft alignCenter alignRight alignJustify | ' +
+  'bulletList orderedList taskList listStyle indent outdent blockquote | ' +
+  'link bookmark table image embed codeBlock math horizontalRule specialChars emoji | ' +
+  'mergeField template | ' +
+  'formatPainter caseChange clearFormatting pastePlainText showBlocks sourceView | ' +
+  'importMarkdown importWord exportInlineHtml exportWord exportPdf | shortcutHelp fullscreen';

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

@@ -0,0 +1,155 @@
+import { html, css, TemplateResult, CSSResultArray } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+
+/**
+ * Floating bookmark-insert panel: name an in-text anchor. Emits
+ * `wysiwyg-bookmark-apply` detail: { id } and `wysiwyg-bookmark-cancel`.
+ */
+@customElement('nile-wysiwyg-bookmark-panel')
+export class NileWysiwygBookmarkPanel extends NileElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  @state() private error = '';
+
+  @query('.bookmark-panel__name') nameInput?: 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;
+        }
+
+        .bookmark-panel {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          min-width: 280px;
+          padding: 12px;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid 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));
+        }
+
+        .hint {
+          font-size: 12px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+        }
+
+        .error {
+          font-size: 12px;
+          color: var(--nile-colors-error-600, #d92d20);
+        }
+
+        .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;
+        }
+      `,
+    ];
+  }
+
+  public focusInput(): void {
+    this.error = '';
+    this.updateComplete.then(() => {
+      if (this.nameInput) this.nameInput.value = '';
+      this.nameInput?.focus();
+    });
+  }
+
+  private handleSubmit(event: Event): void {
+    event.preventDefault();
+    // Anchor ids can't contain whitespace; collapse runs to a single dash.
+    const id = (this.nameInput?.value ?? '').trim().replace(/\s+/g, '-');
+    if (!id) {
+      this.error = 'Enter a bookmark name.';
+      return;
+    }
+    this.error = '';
+    this.emit('wysiwyg-bookmark-apply', { id });
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <form
+        class="bookmark-panel"
+        part="bookmark-panel"
+        @submit=${this.handleSubmit}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === 'Escape') {
+            e.stopPropagation();
+            this.emit('wysiwyg-bookmark-cancel');
+          }
+        }}
+      >
+        <label>
+          Bookmark name
+          <input class="bookmark-panel__name" type="text" placeholder="section-intro" />
+        </label>
+        ${this.error
+          ? html`<div class="error">${this.error}</div>`
+          : html`<div class="hint">An invisible anchor you can link to with #name</div>`}
+        <div class="actions">
+          <button type="button" @click=${() => this.emit('wysiwyg-bookmark-cancel')}>
+            Cancel
+          </button>
+          <button type="submit" class="primary">Insert</button>
+        </div>
+      </form>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-bookmark-panel': NileWysiwygBookmarkPanel;
+  }
+}

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

@@ -0,0 +1,135 @@
+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';
+import type { WysiwygCommandDetail } from '../types';
+
+interface BubbleItem {
+  name: WysiwygCommandDetail['name'];
+  label: string;
+  /** nile-glyph icon name (ng-* names are stroke-drawn). */
+  icon: string;
+  active: (state: ToolbarState) => boolean;
+}
+
+/**
+ * Balloon toolbar shown over non-empty selections. The host owns positioning
+ * (absolute left/top) and visibility; commands bubble up as
+ * `wysiwyg-command` events, same contract as the main toolbar.
+ */
+@customElement('nile-wysiwyg-bubble-menu')
+export class NileWysiwygBubbleMenu 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;
+        }
+
+        .bubble {
+          display: flex;
+          gap: 2px;
+          padding: 4px;
+          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)
+          );
+        }
+
+        button {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 26px;
+          height: 26px;
+          border: none;
+          border-radius: 5px;
+          background: transparent;
+          cursor: pointer;
+          font-size: 13px;
+          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));
+        }
+      `,
+    ];
+  }
+
+  /** Same icon set as the main toolbar, so both surfaces look identical. */
+  private items: BubbleItem[] = [
+    { name: 'bold', label: 'Bold', icon: 'format_bold', active: s => s.bold },
+    { name: 'italic', label: 'Italic', icon: 'format_italic', active: s => s.italic },
+    {
+      name: 'underline',
+      label: 'Underline',
+      icon: 'format_underline',
+      active: s => s.underline,
+    },
+    {
+      name: 'strike',
+      label: 'Strikethrough',
+      icon: 'ng-strikethrough',
+      active: s => s.strike,
+    },
+    {
+      name: 'openLink',
+      label: 'Link',
+      icon: 'link_2',
+      active: s => s.linkActive,
+    },
+  ];
+
+  public render(): TemplateResult {
+    const state = this.toolbarState;
+    return html`
+      <div class="bubble" part="bubble-menu" @mousedown=${(e: Event) => e.preventDefault()}>
+        ${this.items.map(
+          item => html`
+            <button
+              type="button"
+              title=${item.label}
+              aria-label=${item.label}
+              ?data-active=${state ? item.active(state) : false}
+              @click=${() => this.emit('wysiwyg-command', { name: item.name })}
+            >
+              ${renderGlyph(item.icon, 16)}
+            </button>
+          `
+        )}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-bubble-menu': NileWysiwygBubbleMenu;
+  }
+}

package/src/nile-wysiwyg-editor/ui/code-block-menu.ts

@@ -0,0 +1,105 @@
+import { html, css, TemplateResult, CSSResultArray } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import { CODE_LANGUAGES } from '../engine/plugins/code-highlight';
+
+/**
+ * Compact floating language picker shown while the cursor is inside a code
+ * block. Selection dispatches `wysiwyg-command` with setCodeBlockLanguage.
+ */
+@customElement('nile-wysiwyg-code-menu')
+export class NileWysiwygCodeMenu extends NileElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /** Current language attr ('' = auto, null treated as ''). */
+  @property({ type: String }) language: string | 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: 15;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .menu {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          padding: 4px 4px 4px 10px;
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 8px;
+          background: var(--nile-colors-white-base, #ffffff);
+          box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
+        }
+
+        .label {
+          font-size: 12px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+          white-space: nowrap;
+        }
+
+        select {
+          font: inherit;
+          font-size: 12px;
+          height: 24px;
+          padding: 0 4px;
+          border: none;
+          border-radius: 5px;
+          background: transparent;
+          color: var(--nile-colors-neutral-700, #344054);
+          cursor: pointer;
+          outline: none;
+        }
+
+        select:hover {
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+        }
+      `,
+    ];
+  }
+
+  public render(): TemplateResult {
+    const value = this.language ?? '';
+    return html`
+      <span class="menu" part="code-language" @mousedown=${(e: Event) => e.stopPropagation()}>
+        <span class="label">Language</span>
+        <select
+          aria-label="Code block language"
+          title="Syntax highlighting language for this code block"
+          .value=${value}
+          @change=${(e: Event) => {
+            const language = (e.target as HTMLSelectElement).value;
+            this.emit('wysiwyg-command', {
+              name: 'setCodeBlockLanguage',
+              attrs: { language: language || null },
+            });
+          }}
+        >
+          ${CODE_LANGUAGES.map(
+            lang => html`
+              <option value=${lang.value} ?selected=${lang.value === value}>
+                ${lang.label}
+              </option>
+            `
+          )}
+        </select>
+      </span>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-code-menu': NileWysiwygCodeMenu;
+  }
+}

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

@@ -0,0 +1,133 @@
+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 EmbedOp {
+  label: string;
+  icon?: string;
+  text?: string;
+  command: string;
+  attrs?: Record<string, unknown>;
+  active?: (s: ToolbarState) => boolean;
+}
+
+const OPS: EmbedOp[] = [
+  {
+    label: 'Align left',
+    icon: 'format_align_left',
+    command: 'setEmbedAlign',
+    attrs: { align: 'left' },
+    active: s => s.embedAlign === 'left' || s.embedAlign === null,
+  },
+  {
+    label: 'Align center',
+    icon: 'format_align_middle',
+    command: 'setEmbedAlign',
+    attrs: { align: 'center' },
+    active: s => s.embedAlign === 'center',
+  },
+  {
+    label: 'Align right',
+    icon: 'format_align_right',
+    command: 'setEmbedAlign',
+    attrs: { align: 'right' },
+    active: s => s.embedAlign === 'right',
+  },
+  { label: 'Delete video', icon: 'ng-trash-01', command: 'deleteEmbed' },
+];
+
+/**
+ * Compact floating bar shown while a video embed is selected — mirrors the
+ * image menu (align left/center/right, delete). The host positions it;
+ * operations bubble up as `wysiwyg-command` events.
+ */
+@customElement('nile-wysiwyg-embed-menu')
+export class NileWysiwygEmbedMenu 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="embed-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-embed-menu': NileWysiwygEmbedMenu;
+  }
+}