@aquera/nile-elements 1.9.6 → 1.9.7

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

@@ -0,0 +1,772 @@
+import { html, TemplateResult, CSSResultArray, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import { renderGlyph } from '../../internal/glyph';
+import { styles } from './nile-wysiwyg-toolbar.css';
+import type { ToolbarState } from '../engine/selection-state';
+import type { CommandAttrs, CommandName } from '../engine/commands';
+import { DEFAULT_TOOLBAR, UiCommandName } from '../types';
+import '../ui/table-grid-picker';
+
+interface ButtonDef {
+  kind: 'button';
+  command: CommandName | UiCommandName;
+  attrs?: CommandAttrs;
+  label: string;
+  /** nile-glyph icon name; `text` is the fallback when no glyph exists. */
+  icon?: string;
+  /** Glyph shown instead of `icon` while the button is active (e.g. fullscreen). */
+  iconActive?: string;
+  text?: TemplateResult | string;
+  active?: (s: ToolbarState) => boolean;
+  disabled?: (s: ToolbarState) => boolean;
+}
+
+interface SelectDef {
+  kind: 'select';
+  label: string;
+  /** Static list, or contextual options derived from the toolbar state. */
+  options:
+    | { value: string; label: string }[]
+    | ((s: ToolbarState | undefined) => { value: string; label: string }[]);
+  /** Current value derived from toolbar state ('' = default option). */
+  value: (s: ToolbarState) => string;
+  /** Maps the chosen option to a command invocation. */
+  command: (value: string) => { name: CommandName; attrs?: CommandAttrs };
+  disabled?: (s: ToolbarState) => boolean;
+}
+
+interface ColorDef {
+  kind: 'color';
+  label: string;
+  glyph: string;
+  command: CommandName;
+  value: (s: ToolbarState) => string | null;
+}
+
+type ItemDef = ButtonDef | SelectDef | ColorDef;
+
+const FONT_FAMILIES = [
+  'Arial',
+  'Georgia',
+  'Tahoma',
+  'Times New Roman',
+  'Trebuchet MS',
+  'Verdana',
+  'Courier New',
+];
+
+const FONT_SIZES = ['10px', '12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '48px'];
+
+
+/** Same default palette as nile-rte-color. */
+const COLOR_PALETTE = [
+  '#000000', '#444444', '#666666', '#999999', '#cccccc', '#eeeeee', '#ffffff',
+  '#d32f2f', '#f44336', '#ff9800', '#ffeb3b', '#4caf50', '#2196f3', '#3f51b5', '#9c27b0',
+  '#03a9f4', '#00bcd4', '#009688', '#8bc34a', '#cddc39', '#ffc107', '#ff5722',
+];
+
+const ITEMS: Record<string, ItemDef> = {
+  undo: {
+    kind: 'button',
+    command: 'undo',
+    label: 'Undo (Ctrl+Z)',
+    icon: 'undo',
+    disabled: s => !s.canUndo,
+  },
+  redo: {
+    kind: 'button',
+    command: 'redo',
+    label: 'Redo (Ctrl+Y)',
+    icon: 'redo',
+    disabled: s => !s.canRedo,
+  },
+  findReplace: {
+    kind: 'button',
+    command: 'openFind',
+    label: 'Find & replace (Ctrl+F)',
+    icon: 'ng-text-search',
+  },
+  bold: {
+    kind: 'button',
+    command: 'bold',
+    label: 'Bold (Ctrl+B)',
+    icon: 'format_bold',
+    active: s => s.bold,
+  },
+  italic: {
+    kind: 'button',
+    command: 'italic',
+    label: 'Italic (Ctrl+I)',
+    icon: 'format_italic',
+    active: s => s.italic,
+  },
+  underline: {
+    kind: 'button',
+    command: 'underline',
+    label: 'Underline (Ctrl+U)',
+    icon: 'format_underline',
+    active: s => s.underline,
+  },
+  strike: {
+    kind: 'button',
+    command: 'strike',
+    label: 'Strikethrough',
+    icon: 'ng-strikethrough',
+    active: s => s.strike,
+  },
+  subscript: {
+    kind: 'button',
+    command: 'subscript',
+    label: 'Subscript (Ctrl+,)',
+    icon: 'ng-subscript',
+    active: s => s.subscript,
+  },
+  superscript: {
+    kind: 'button',
+    command: 'superscript',
+    label: 'Superscript (Ctrl+.)',
+    icon: 'ng-superscript',
+    active: s => s.superscript,
+  },
+  code: {
+    kind: 'button',
+    command: 'code',
+    label: 'Inline code',
+    text: '</>',
+    active: s => s.code,
+  },
+  alignLeft: {
+    kind: 'button',
+    command: 'align',
+    attrs: { align: 'left' },
+    label: 'Align left',
+    icon: 'format_align_left',
+    active: s => s.align === 'left',
+  },
+  alignCenter: {
+    kind: 'button',
+    command: 'align',
+    attrs: { align: 'center' },
+    label: 'Align center',
+    icon: 'format_align_middle',
+    active: s => s.align === 'center',
+  },
+  alignRight: {
+    kind: 'button',
+    command: 'align',
+    attrs: { align: 'right' },
+    label: 'Align right',
+    icon: 'format_align_right',
+    active: s => s.align === 'right',
+  },
+  alignJustify: {
+    kind: 'button',
+    command: 'align',
+    attrs: { align: 'justify' },
+    label: 'Justify',
+    icon: 'format_align_justify',
+    active: s => s.align === 'justify',
+  },
+  bulletList: {
+    kind: 'button',
+    command: 'bulletList',
+    label: 'Bulleted list',
+    icon: 'format_list_bulleted',
+    active: s => s.inBulletList,
+  },
+  orderedList: {
+    kind: 'button',
+    command: 'orderedList',
+    label: 'Numbered list',
+    icon: 'format_list_numbered',
+    active: s => s.inOrderedList,
+  },
+  taskList: {
+    kind: 'button',
+    command: 'taskList',
+    label: 'Checklist',
+    icon: 'ng-list-checks',
+    active: s => s.inTaskList,
+  },
+  indent: {
+    kind: 'button',
+    command: 'indent',
+    label: 'Increase indent (Ctrl+])',
+    icon: 'ng-list-indent-increase',
+    disabled: s => s.inCodeBlock,
+  },
+  outdent: {
+    kind: 'button',
+    command: 'outdent',
+    label: 'Decrease indent (Ctrl+[)',
+    icon: 'ng-list-indent-decrease',
+    disabled: s =>
+      !s.inBulletList &&
+      !s.inOrderedList &&
+      !s.inTaskList &&
+      !s.inBlockquote &&
+      s.blockIndent === 0,
+  },
+  listStyle: {
+    kind: 'select',
+    label: 'List style',
+    options: s =>
+      s?.inOrderedList
+        ? [
+            { value: '', label: '1, 2, 3' },
+            { value: 'lower-alpha', label: 'a, b, c' },
+            { value: 'upper-alpha', label: 'A, B, C' },
+            { value: 'lower-roman', label: 'i, ii, iii' },
+            { value: 'upper-roman', label: 'I, II, III' },
+            { value: 'multilevel', label: '1.1, 1.1.1' },
+          ]
+        : [
+            { value: '', label: '• Disc' },
+            { value: 'circle', label: '○ Circle' },
+            { value: 'square', label: '▪ Square' },
+          ],
+    value: s => s.listStyle ?? '',
+    command: value => ({ name: 'setListStyle', attrs: { style: value || null } }),
+    disabled: s => !s.inBulletList && !s.inOrderedList,
+  },
+  blockquote: {
+    kind: 'button',
+    command: 'blockquote',
+    label: 'Blockquote',
+    text: '❝',
+    active: s => s.inBlockquote,
+  },
+  link: {
+    kind: 'button',
+    command: 'openLink',
+    label: 'Link (Ctrl+K)',
+    icon: 'link_2',
+    active: s => s.linkActive,
+  },
+  bookmark: {
+    kind: 'button',
+    command: 'openBookmark',
+    label: 'Insert bookmark (in-text anchor)',
+    icon: 'ng-bookmark',
+  },
+  horizontalRule: {
+    kind: 'button',
+    command: 'horizontalRule',
+    label: 'Horizontal rule',
+    icon: 'minus',
+  },
+  specialChars: {
+    kind: 'button',
+    command: 'openSpecialChars',
+    label: 'Special characters',
+    text: 'Ω',
+  },
+  emoji: {
+    kind: 'button',
+    command: 'openEmoji',
+    label: 'Emoji',
+    icon: 'ng-smile',
+  },
+  codeBlock: {
+    kind: 'button',
+    command: 'codeBlock',
+    label: 'Code block (Ctrl+Alt+C)',
+    icon: 'ng-code',
+    active: s => s.inCodeBlock,
+  },
+  image: {
+    kind: 'button',
+    command: 'openImage',
+    label: 'Insert image',
+    icon: 'image_2',
+  },
+  embed: {
+    kind: 'button',
+    command: 'openEmbed',
+    label: 'Embed video (YouTube, Vimeo, Loom)',
+    icon: 'ng-video',
+  },
+  sourceView: {
+    kind: 'button',
+    command: 'toggleSource',
+    label: 'HTML source',
+    icon: 'ng-code-xml',
+  },
+  showBlocks: {
+    kind: 'button',
+    command: 'toggleShowBlocks',
+    label: 'Show blocks',
+    icon: 'ng-square-pilcrow',
+    active: s => !!s.showBlocks,
+  },
+  clearFormatting: {
+    kind: 'button',
+    command: 'clearFormatting',
+    label: 'Clear formatting',
+    icon: 'format_clear',
+  },
+  pastePlainText: {
+    kind: 'button',
+    command: 'togglePastePlainText',
+    label: 'Paste as plain text',
+    icon: 'ng-clipboard-paste',
+    active: s => !!s.pasteAsPlainText,
+  },
+  fullscreen: {
+    kind: 'button',
+    command: 'toggleFullscreen',
+    label: 'Fullscreen (Esc to exit)',
+    icon: 'ng-maximize-2',
+    iconActive: 'ng-minimize-2',
+    active: s => !!s.fullscreen,
+  },
+  shortcutHelp: {
+    kind: 'button',
+    command: 'openShortcutHelp',
+    label: 'Keyboard shortcuts (Ctrl+/)',
+    icon: 'ng-keyboard',
+  },
+  exportPdf: {
+    kind: 'button',
+    command: 'exportPdf',
+    label: 'Export to PDF',
+    icon: 'ng-printer',
+  },
+  exportWord: {
+    kind: 'button',
+    command: 'exportWord',
+    label: 'Export to Word',
+    icon: 'ng-file-text',
+  },
+  exportInlineHtml: {
+    kind: 'button',
+    command: 'exportInlineHtml',
+    label: 'Export HTML with inline styles (email)',
+    icon: 'ng-file-code',
+  },
+  importMarkdown: {
+    kind: 'button',
+    command: 'openMarkdown',
+    label: 'Insert from Markdown',
+    icon: 'ng-clipboard-paste',
+  },
+  importWord: {
+    kind: 'button',
+    command: 'importWord',
+    label: 'Import from Word',
+    icon: 'ng-file-input',
+  },
+  formatPainter: {
+    kind: 'button',
+    command: 'toggleFormatPainter',
+    label: 'Format painter (copy formatting)',
+    icon: 'ng-paintbrush',
+    active: s => !!s.formatPainter,
+  },
+  caseChange: {
+    kind: 'select',
+    label: 'Change case',
+    options: [
+      { value: '', label: 'Case' },
+      { value: 'upper', label: 'UPPERCASE' },
+      { value: 'lower', label: 'lowercase' },
+      { value: 'title', label: 'Title Case' },
+      { value: 'sentence', label: 'Sentence case' },
+    ],
+    value: () => '',
+    command: value => ({
+      name: 'changeCase',
+      attrs: { textCase: (value || 'upper') as 'upper' | 'lower' | 'title' | 'sentence' },
+    }),
+    disabled: s => s.selectionEmpty,
+  },
+  mergeField: {
+    kind: 'button',
+    command: 'openMergeField',
+    label: 'Insert merge field',
+    icon: 'ng-braces',
+  },
+  template: {
+    kind: 'button',
+    command: 'openTemplate',
+    label: 'Insert template',
+    icon: 'ng-layout-template',
+  },
+  math: {
+    kind: 'button',
+    command: 'openMath',
+    label: 'Insert math (LaTeX)',
+    icon: 'ng-sigma',
+  },
+  heading: {
+    kind: 'select',
+    label: 'Paragraph style',
+    options: [
+      { value: '', label: 'Paragraph' },
+      { value: '1', label: 'Heading 1' },
+      { value: '2', label: 'Heading 2' },
+      { value: '3', label: 'Heading 3' },
+      { value: '4', label: 'Heading 4' },
+      { value: '5', label: 'Heading 5' },
+      { value: '6', label: 'Heading 6' },
+    ],
+    value: s => (s.headingLevel ? String(s.headingLevel) : ''),
+    command: value =>
+      value === ''
+        ? { name: 'paragraph' }
+        : { name: 'heading', attrs: { level: Number(value) } },
+  },
+  fontFamily: {
+    kind: 'select',
+    label: 'Font family',
+    options: [
+      { value: '', label: 'Font' },
+      ...FONT_FAMILIES.map(f => ({ value: f, label: f })),
+    ],
+    value: s => s.fontFamily ?? '',
+    command: value => ({ name: 'fontFamily', attrs: { family: value || null } }),
+  },
+  fontSize: {
+    kind: 'select',
+    label: 'Font size',
+    options: [
+      { value: '', label: 'Size' },
+      ...FONT_SIZES.map(f => ({ value: f, label: f.replace('px', '') })),
+    ],
+    value: s => s.fontSize ?? '',
+    command: value => ({ name: 'fontSize', attrs: { size: value || null } }),
+  },
+  lineHeight: {
+    kind: 'select',
+    label: 'Line height',
+    options: [
+      { value: '', label: 'Spacing' },
+      { value: '1', label: '1' },
+      { value: '1.15', label: '1.15' },
+      { value: '1.5', label: '1.5' },
+      { value: '2', label: '2' },
+      { value: '2.5', label: '2.5' },
+      { value: '3', label: '3' },
+    ],
+    value: s => s.lineHeight ?? '',
+    command: value => ({ name: 'lineHeight', attrs: { lineHeight: value || null } }),
+    disabled: s => s.inCodeBlock,
+  },
+  textColor: {
+    kind: 'color',
+    label: 'Text color',
+    glyph: 'A',
+    command: 'textColor',
+    value: s => s.textColor,
+  },
+  bgColor: {
+    kind: 'color',
+    label: 'Highlight color',
+    glyph: '✎',
+    command: 'bgColor',
+    value: s => s.bgColor,
+  },
+};
+
+/**
+ * Config-driven toolbar. Renders from a single immutable ToolbarState
+ * snapshot; every interaction is dispatched to the host as a
+ * `wysiwyg-command` event — the toolbar never touches the editor directly.
+ *
+ * @tag nile-wysiwyg-toolbar
+ */
+@customElement('nile-wysiwyg-toolbar')
+export class NileWysiwygToolbar extends NileElement {
+  /** Space-separated item names; `|` inserts a divider. */
+  @property({ type: String }) config = DEFAULT_TOOLBAR;
+
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @property({ attribute: false }) toolbarState?: ToolbarState;
+
+  /** Which dropdown/color panel is open (item name), if any. */
+  @state() private openMenu: string | null = null;
+
+  /** Recently used colors per color command, like nile-rte-color. */
+  @state() private recentColors: Record<string, string[]> = {};
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    document.addEventListener('mousedown', this.handleOutsideClick);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.removeEventListener('mousedown', this.handleOutsideClick);
+  }
+
+  private handleOutsideClick = (event: MouseEvent): void => {
+    if (this.openMenu && !event.composedPath().includes(this)) this.openMenu = null;
+  };
+
+  private toggleMenu(name: string): void {
+    this.openMenu = this.openMenu === name ? null : name;
+  }
+
+  private dispatchCommand(name: CommandName | UiCommandName, attrs?: CommandAttrs): void {
+    this.emit('wysiwyg-command', { name, attrs });
+  }
+
+  /** Wraps a control in the design system's lightweight tooltip (same as
+   * the legacy rich text editor's toolbar). */
+  private withTooltip(label: string, control: TemplateResult): TemplateResult {
+    return html`
+      <nile-lite-tooltip content=${label} placement="bottom">${control}</nile-lite-tooltip>
+    `;
+  }
+
+  private renderButton(def: ButtonDef): TemplateResult {
+    const state = this.toolbarState;
+    const isActive = state && def.active ? def.active(state) : false;
+    const isDisabled = this.disabled || (state && def.disabled ? def.disabled(state) : false);
+    const icon = isActive && def.iconActive ? def.iconActive : def.icon;
+    return this.withTooltip(
+      def.label,
+      html`
+        <button
+          type="button"
+          class="toolbar__button"
+          part="button"
+          aria-label=${def.label}
+          aria-pressed=${isActive ? 'true' : 'false'}
+          ?data-active=${isActive}
+          ?disabled=${isDisabled}
+          @mousedown=${(e: Event) => e.preventDefault()}
+          @click=${() => this.dispatchCommand(def.command, def.attrs)}
+        >
+          ${icon ? renderGlyph(icon, 18) : def.text}
+        </button>
+      `
+    );
+  }
+
+  private renderSelect(name: string, def: SelectDef): TemplateResult {
+    const value = this.toolbarState ? def.value(this.toolbarState) : '';
+    const options =
+      typeof def.options === 'function' ? def.options(this.toolbarState) : def.options;
+    const current = options.find(opt => opt.value === value) ?? options[0];
+    const isDisabled =
+      this.disabled ||
+      (this.toolbarState && def.disabled ? def.disabled(this.toolbarState) : false);
+    const isFont = name === 'fontFamily';
+    return html`
+      <span class="toolbar__dropdown" part="select">
+        ${this.withTooltip(
+          def.label,
+          html`
+            <button
+              type="button"
+              class="toolbar__dd-trigger"
+              aria-label=${def.label}
+              aria-expanded=${this.openMenu === name ? 'true' : 'false'}
+              ?disabled=${isDisabled}
+              style=${isFont && value ? `font-family: ${value}` : ''}
+              @mousedown=${(e: Event) => e.preventDefault()}
+              @click=${() => this.toggleMenu(name)}
+            >
+              ${current.label}
+              <nile-glyph name="arrowdown" size="16"></nile-glyph>
+            </button>
+          `
+        )}
+        ${this.openMenu === name
+          ? html`
+              <div class="toolbar__dd-menu" @mousedown=${(e: Event) => e.preventDefault()}>
+                ${options.map(
+                  opt => html`
+                    <div
+                      class="toolbar__dd-item"
+                      ?data-active=${opt.value === value}
+                      style=${isFont && opt.value ? `font-family: ${opt.value}` : ''}
+                      @click=${() => {
+                        this.openMenu = null;
+                        const { name: cmd, attrs } = def.command(opt.value);
+                        this.dispatchCommand(cmd, attrs);
+                      }}
+                    >
+                      ${opt.label}
+                    </div>
+                  `
+                )}
+              </div>
+            `
+          : nothing}
+      </span>
+    `;
+  }
+
+  private setColor(name: string, def: ColorDef, color: string): void {
+    this.openMenu = null;
+    const recent = this.recentColors[name] ?? [];
+    this.recentColors = {
+      ...this.recentColors,
+      [name]: [color, ...recent.filter(c => c !== color)].slice(0, 8),
+    };
+    this.dispatchCommand(def.command, { color });
+  }
+
+  private renderColor(name: string, def: ColorDef): TemplateResult {
+    const current = this.toolbarState ? def.value(this.toolbarState) : null;
+    const shown = current ?? '#000000';
+    const recent = this.recentColors[name] ?? [];
+    const isBg = def.command === 'bgColor';
+    return html`
+      <span class="toolbar__color" part="color">
+        ${this.withTooltip(
+          def.label,
+          html`
+            <button
+              type="button"
+              class="toolbar__button"
+              aria-label=${def.label}
+              aria-expanded=${this.openMenu === name ? 'true' : 'false'}
+              ?disabled=${this.disabled}
+              @mousedown=${(e: Event) => e.preventDefault()}
+              @click=${() => this.toggleMenu(name)}
+            >
+              ${isBg
+                ? html`<span class="swatch-box" style="background: ${shown}"></span>`
+                : html`
+                    <span class="glyph-stack">
+                      <span class="glyph">A</span>
+                      <span class="underline" style="background: ${shown}"></span>
+                    </span>
+                  `}
+            </button>
+          `
+        )}
+        ${this.openMenu === name
+          ? html`
+              <div class="toolbar__swatch-panel" @mousedown=${(e: Event) => e.preventDefault()}>
+                <div class="section">
+                  <div class="title">Default</div>
+                  <div class="swatches">
+                    ${COLOR_PALETTE.map(
+                      color => html`
+                        <button
+                          type="button"
+                          class="swatch"
+                          style="background: ${color}"
+                          title=${color}
+                          @click=${() => this.setColor(name, def, color)}
+                        >
+                          ${current === color
+                            ? html`<span class="checkmark">✓</span>`
+                            : nothing}
+                        </button>
+                      `
+                    )}
+                  </div>
+                </div>
+                ${recent.length
+                  ? html`
+                      <div class="section">
+                        <div class="title">Recently Used</div>
+                        <div class="swatches">
+                          ${recent.map(
+                            color => html`
+                              <button
+                                type="button"
+                                class="swatch"
+                                style="background: ${color}"
+                                title=${color}
+                                @click=${() => this.setColor(name, def, color)}
+                              ></button>
+                            `
+                          )}
+                        </div>
+                      </div>
+                    `
+                  : nothing}
+                <div class="section">
+                  <div class="title">Custom</div>
+                  <div class="swatches">
+                    <button
+                      type="button"
+                      class="swatch add"
+                      @click=${(e: Event) => {
+                        const input = (e.currentTarget as HTMLElement)
+                          .closest('.toolbar__color')!
+                          .querySelector<HTMLInputElement>('input[type="color"]');
+                        input?.click();
+                      }}
+                    >
+                      +
+                    </button>
+                  </div>
+                </div>
+              </div>
+            `
+          : nothing}
+        <input
+          type="color"
+          tabindex="-1"
+          aria-hidden="true"
+          .value=${shown}
+          @input=${(e: Event) =>
+            this.setColor(name, def, (e.target as HTMLInputElement).value)}
+        />
+      </span>
+    `;
+  }
+
+  private renderItem(name: string): TemplateResult | typeof nothing {
+    if (name === 'table') {
+      return this.withTooltip(
+        'Insert table',
+        html`
+          <nile-wysiwyg-table-picker
+            part="button"
+            ?disabled=${this.disabled}
+          ></nile-wysiwyg-table-picker>
+        `
+      );
+    }
+    const def = ITEMS[name];
+    if (!def) return nothing;
+    switch (def.kind) {
+      case 'button':
+        return this.renderButton(def);
+      case 'select':
+        return this.renderSelect(name, def);
+      case 'color':
+        return this.renderColor(name, def);
+      default:
+        return nothing;
+    }
+  }
+
+  public render(): TemplateResult {
+    const groups = this.config
+      .split('|')
+      .map(group => group.trim().split(/\s+/).filter(Boolean))
+      .filter(group => group.length > 0);
+
+    return html`
+      <div class="toolbar" part="toolbar" role="toolbar" aria-label="Text formatting">
+        ${groups.map(
+          (group, index) => html`
+            ${index > 0 ? html`<span class="toolbar__divider"></span>` : nothing}
+            ${group.map(name => this.renderItem(name))}
+          `
+        )}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-toolbar': NileWysiwygToolbar;
+  }
+}