@aquera/nile-elements 1.9.6 → 1.9.7

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

@@ -0,0 +1,143 @@
+import { html, css, TemplateResult, CSSResultArray } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import '../../nile-button/index';
+
+/**
+ * Floating "Paste Markdown" panel: paste/type Markdown and insert it into the
+ * document as formatted content. The host converts and inserts on apply.
+ * Emits `wysiwyg-markdown-apply` detail: { markdown } and
+ * `wysiwyg-markdown-cancel`.
+ */
+@customElement('nile-wysiwyg-markdown-panel')
+export class NileWysiwygMarkdownPanel extends NileElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  @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)
+          );
+          position: absolute;
+          z-index: 20;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .md-panel {
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          width: 460px;
+          max-width: 90vw;
+          padding: 14px;
+          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;
+        }
+
+        .heading {
+          font-weight: 600;
+          color: var(--nile-colors-neutral-800, #1d2939);
+        }
+
+        .hint {
+          font-size: 12px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+        }
+
+        textarea {
+          font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
+          font-size: 13px;
+          line-height: 1.5;
+          min-height: 180px;
+          resize: vertical;
+          padding: 10px;
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 6px;
+          outline: none;
+          color: var(--nile-colors-dark-900, #101828);
+          background: var(--nile-colors-neutral-50, #f9fafb);
+        }
+
+        textarea:focus {
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+        }
+
+        .actions {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          gap: 8px;
+        }
+      `,
+    ];
+  }
+
+  public focusInput(): void {
+    this.updateComplete.then(() => this.textarea?.focus());
+  }
+
+  public reset(): void {
+    this.updateComplete.then(() => {
+      if (this.textarea) this.textarea.value = '';
+    });
+  }
+
+  private submit(): void {
+    const markdown = this.textarea?.value ?? '';
+    if (!markdown.trim()) {
+      this.emit('wysiwyg-markdown-cancel');
+      return;
+    }
+    this.emit('wysiwyg-markdown-apply', { markdown });
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      this.emit('wysiwyg-markdown-cancel');
+    } else if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+      // Ctrl/Cmd+Enter inserts (plain Enter keeps adding newlines).
+      event.preventDefault();
+      event.stopPropagation();
+      this.submit();
+    }
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="md-panel" part="markdown-panel" @keydown=${this.handleKeydown}>
+        <span class="heading">Paste Markdown</span>
+        <textarea
+          part="markdown-textarea"
+          placeholder="# Heading&#10;&#10;Paste **Markdown** here — lists, \`code\`, tables…"
+          spellcheck="false"
+        ></textarea>
+        <span class="hint">Converts to formatted content on insert (⌘/Ctrl+Enter).</span>
+        <div class="actions">
+          <nile-button variant="tertiary" @click=${() => this.emit('wysiwyg-markdown-cancel')}
+            >Cancel</nile-button
+          >
+          <nile-button variant="primary" @click=${() => this.submit()}>Insert</nile-button>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-markdown-panel': NileWysiwygMarkdownPanel;
+  }
+}

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

@@ -0,0 +1,169 @@
+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';
+import '../../nile-button-toggle-group/index';
+import '../../nile-button-toggle/index';
+
+/**
+ * Floating math-insert panel: enter a LaTeX expression. Styled to match the
+ * image/embed panels (nile-input + nile-button). Emits `wysiwyg-math-apply`
+ * detail: { latex, display } and `wysiwyg-math-cancel`. Rendering of the
+ * formula itself is the host's job (via a mathRenderer).
+ */
+@customElement('nile-wysiwyg-math-panel')
+export class NileWysiwygMathPanel extends NileElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  @state() private latexValue = '';
+  @state() private display: 'inline' | 'block' = 'inline';
+
+  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;
+        }
+
+        .math-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%;
+        }
+
+        /* Keep the LaTeX field monospaced. */
+        nile-input::part(input) {
+          font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        }
+
+        .display-row {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        }
+
+        .display-label {
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        .hint {
+          font-size: 12px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+        }
+
+        .actions {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          gap: 8px;
+          width: 100%;
+        }
+      `,
+    ];
+  }
+
+  /** Opens with an optional initial value (editing an existing formula). */
+  public focusInput(initial = ''): void {
+    this.latexValue = initial;
+    this.updateComplete.then(() => {
+      const input = this.shadowRoot?.querySelector('nile-input') as HTMLElement | null;
+      input?.focus();
+    });
+  }
+
+  /** Clears the field. */
+  public reset(): void {
+    this.latexValue = '';
+    this.display = 'inline';
+  }
+
+  private onLatex(event: CustomEvent): void {
+    this.latexValue = (event.detail?.value ?? '') as string;
+  }
+
+  private handleSubmit(): void {
+    const latex = this.latexValue.trim();
+    if (!latex) {
+      this.emit('wysiwyg-math-cancel');
+      return;
+    }
+    this.emit('wysiwyg-math-apply', { latex, display: this.display });
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      this.emit('wysiwyg-math-cancel');
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      event.stopPropagation();
+      this.handleSubmit();
+    }
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="math-panel" part="math-panel" @keydown=${this.handleKeydown}>
+        <nile-input
+          label="LaTeX expression"
+          placeholder="e.g. \\frac{a}{b} = c^2"
+          .value=${this.latexValue}
+          @nile-input=${this.onLatex}
+        ></nile-input>
+
+        <div class="display-row">
+          <span class="display-label">Display</span>
+          <nile-button-toggle-group
+            class="toggle"
+            .value=${this.display}
+            @nile-change=${(e: CustomEvent) => {
+              this.display = e.detail.value === 'block' ? 'block' : 'inline';
+            }}
+          >
+            <nile-button-toggle value="inline">Inline</nile-button-toggle>
+            <nile-button-toggle value="block">Block</nile-button-toggle>
+          </nile-button-toggle-group>
+        </div>
+
+        <span class="hint"
+          >LaTeX is stored as-is; rendering uses your math renderer if configured.</span
+        >
+
+        <div class="actions">
+          <nile-button variant="primary" @click=${() => this.handleSubmit()}
+            >Insert</nile-button
+          >
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-math-panel': NileWysiwygMathPanel;
+  }
+}

package/src/nile-wysiwyg-editor/ui/shortcut-help.ts

@@ -0,0 +1,311 @@
+import { html, css, TemplateResult, CSSResultArray, PropertyValues, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+
+const isMac =
+  typeof navigator !== 'undefined' && /Mac|iP(hone|[oa]d)/.test(navigator.platform);
+
+/** Renders a binding like 'Mod-B' with platform-appropriate key labels. */
+function keyLabel(binding: string): string {
+  return binding
+    .split('-')
+    .map(part => {
+      switch (part) {
+        case 'Mod':
+          return isMac ? '⌘' : 'Ctrl';
+        case 'Shift':
+          return isMac ? '⇧' : 'Shift';
+        case 'Alt':
+          return isMac ? '⌥' : 'Alt';
+        case 'Ctrl':
+          return isMac ? '⌃' : 'Ctrl';
+        default:
+          return part;
+      }
+    })
+    .join(isMac ? '' : '+');
+}
+
+interface ShortcutGroup {
+  title: string;
+  items: { keys: string[]; label: string }[];
+}
+
+const GROUPS: ShortcutGroup[] = [
+  {
+    title: 'Formatting',
+    items: [
+      { keys: ['Mod-B'], label: 'Bold' },
+      { keys: ['Mod-I'], label: 'Italic' },
+      { keys: ['Mod-U'], label: 'Underline' },
+      { keys: ['Mod-Shift-X'], label: 'Strikethrough' },
+      { keys: ['Mod-,'], label: 'Subscript' },
+      { keys: ['Mod-.'], label: 'Superscript' },
+    ],
+  },
+  {
+    title: 'Blocks',
+    items: [
+      { keys: ['Ctrl-Shift-0'], label: 'Paragraph' },
+      { keys: ['Ctrl-Shift-1…6'], label: 'Heading 1–6' },
+      { keys: ['Mod-Shift-8'], label: 'Bulleted list' },
+      { keys: ['Mod-Shift-7'], label: 'Numbered list' },
+      { keys: ['Mod-Shift-9'], label: 'Blockquote' },
+      { keys: ['Mod-Alt-C'], label: 'Code block' },
+      { keys: ['Tab', 'Shift-Tab'], label: 'Indent / outdent list item' },
+      { keys: ['Mod-]', 'Mod-['], label: 'Indent / outdent block' },
+      { keys: ['Shift-Enter'], label: 'Line break' },
+    ],
+  },
+  {
+    title: 'Editing & tools',
+    items: [
+      { keys: ['Mod-Z'], label: 'Undo' },
+      { keys: ['Mod-Shift-Z'], label: 'Redo' },
+      { keys: ['Mod-K'], label: 'Insert or edit link' },
+      { keys: ['Mod-F'], label: 'Find & replace' },
+      { keys: ['Mod-Shift-V'], label: 'Paste without formatting' },
+      { keys: ['Mod-/'], label: 'This dialog' },
+    ],
+  },
+  {
+    title: 'Typing shortcuts',
+    items: [
+      { keys: ['# + space'], label: 'Heading (## for level 2 …)' },
+      { keys: ['- + space'], label: 'Bulleted list' },
+      { keys: ['1. + space'], label: 'Numbered list' },
+      { keys: ['[] + space'], label: 'Checklist' },
+      { keys: ['> + space'], label: 'Blockquote' },
+      { keys: ['```'], label: 'Code block' },
+      { keys: ['**text**'], label: 'Bold as you type' },
+      { keys: ['URL + space'], label: 'Automatic link' },
+      { keys: ['/'], label: 'Command menu' },
+      { keys: [': + name'], label: 'Emoji picker' },
+    ],
+  },
+];
+
+/**
+ * Keyboard shortcut reference dialog, opened from the toolbar or Mod-/.
+ * Emits `wysiwyg-shortcut-help-close` when dismissed (Esc, ✕ or backdrop).
+ */
+@customElement('nile-wysiwyg-shortcut-help')
+export class NileWysiwygShortcutHelp extends NileElement {
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  @query('.help__panel') private panelEl?: HTMLElement;
+
+  /** Body overflow value before we locked it; null = not locked by us. */
+  private previousBodyOverflow: string | null = null;
+
+  public static get styles(): CSSResultArray {
+    return [
+      css`
+        /* Fixed so the dialog overlays the viewport instead of being
+           clipped by a small editor. */
+        :host {
+          font-family: var(
+            --nile-font-family-sans-serif,
+            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
+          );
+          position: fixed;
+          inset: 0;
+          z-index: var(--nile-wysiwyg-dialog-z-index, 1100);
+          display: none;
+        }
+
+        :host([open]) {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .help__backdrop {
+          position: absolute;
+          inset: 0;
+          background: rgba(16, 24, 40, 0.4);
+        }
+
+        .help__panel {
+          position: relative;
+          max-width: 560px;
+          max-height: min(80%, 480px);
+          margin: 16px;
+          padding: 16px 20px;
+          overflow-y: auto;
+          overscroll-behavior: contain;
+          outline: none;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 10px;
+          box-shadow: var(
+            --nile-wysiwyg-popover-shadow,
+            0 8px 24px rgba(16, 24, 40, 0.18)
+          );
+          font-size: 13px;
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        .help__header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 8px;
+        }
+
+        .help__title {
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--nile-colors-dark-900, #101828);
+        }
+
+        .help__close {
+          font: inherit;
+          border: none;
+          background: transparent;
+          border-radius: 5px;
+          padding: 4px 8px;
+          cursor: pointer;
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        .help__close:hover {
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+        }
+
+        .help__columns {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+          gap: 4px 24px;
+        }
+
+        .help__group-title {
+          margin: 10px 0 4px;
+          font-size: 11px;
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 0.04em;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+        }
+
+        .help__row {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 12px;
+          padding: 3px 0;
+        }
+
+        .help__keys {
+          white-space: nowrap;
+        }
+
+        kbd {
+          display: inline-block;
+          padding: 1px 6px;
+          font-family: inherit;
+          font-size: 12px;
+          line-height: 1.5;
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-bottom-width: 2px;
+          border-radius: 5px;
+        }
+      `,
+    ];
+  }
+
+  /**
+   * Locks page scrolling while the dialog is open (the fixed backdrop blocks
+   * clicks but not wheel/touch scrolling of the document behind it).
+   * Save/restore keeps it composable with other locks (e.g. fullscreen).
+   */
+  protected updated(changed: PropertyValues): void {
+    if (!changed.has('open')) return;
+    if (this.open) {
+      if (this.previousBodyOverflow === null) {
+        this.previousBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+      }
+    } else if (this.previousBodyOverflow !== null) {
+      document.body.style.overflow = this.previousBodyOverflow;
+      this.previousBodyOverflow = null;
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.previousBodyOverflow !== null) {
+      document.body.style.overflow = this.previousBodyOverflow;
+      this.previousBodyOverflow = null;
+    }
+  }
+
+  /** Moves focus into the dialog so Esc lands here. */
+  public focusPanel(): void {
+    this.updateComplete.then(() => this.panelEl?.focus());
+  }
+
+  private close(): void {
+    this.emit('wysiwyg-shortcut-help-close');
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      this.close();
+    }
+  }
+
+  public render(): TemplateResult | typeof nothing {
+    if (!this.open) return nothing;
+    return html`
+      <div class="help__backdrop" @click=${this.close}></div>
+      <div
+        class="help__panel"
+        part="shortcut-help"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Keyboard shortcuts"
+        tabindex="-1"
+        @keydown=${this.handleKeydown}
+      >
+        <div class="help__header">
+          <span class="help__title">Keyboard shortcuts</span>
+          <button type="button" class="help__close" title="Close (Esc)" @click=${this.close}>
+            ✕
+          </button>
+        </div>
+        <div class="help__columns">
+          ${GROUPS.map(
+            group => html`
+              <div>
+                <div class="help__group-title">${group.title}</div>
+                ${group.items.map(
+                  item => html`
+                    <div class="help__row">
+                      <span>${item.label}</span>
+                      <span class="help__keys">
+                        ${item.keys.map(
+                          (key, index) => html`${index > 0 ? ' / ' : nothing}<kbd
+                              >${keyLabel(key)}</kbd
+                            >`
+                        )}
+                      </span>
+                    </div>
+                  `
+                )}
+              </div>
+            `
+          )}
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-shortcut-help': NileWysiwygShortcutHelp;
+  }
+}