@aquera/nile-elements 1.9.6 → 1.9.7

package/dist/src/nile-wysiwyg-editor/nile-wysiwyg-toolbar/nile-wysiwyg-toolbar.js

@@ -0,0 +1,700 @@
+import { __decorate } from "tslib";
+import { html, 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 { DEFAULT_TOOLBAR } from '../types';
+import '../ui/table-grid-picker';
+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 = {
+    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') },
+        }),
+        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
+ */
+let NileWysiwygToolbar = class NileWysiwygToolbar extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** Space-separated item names; `|` inserts a divider. */
+        this.config = DEFAULT_TOOLBAR;
+        this.disabled = false;
+        /** Which dropdown/color panel is open (item name), if any. */
+        this.openMenu = null;
+        /** Recently used colors per color command, like nile-rte-color. */
+        this.recentColors = {};
+        this.handleOutsideClick = (event) => {
+            if (this.openMenu && !event.composedPath().includes(this))
+                this.openMenu = null;
+        };
+    }
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.handleOutsideClick);
+    }
+    toggleMenu(name) {
+        this.openMenu = this.openMenu === name ? null : name;
+    }
+    dispatchCommand(name, attrs) {
+        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). */
+    withTooltip(label, control) {
+        return html `
+      <nile-lite-tooltip content=${label} placement="bottom">${control}</nile-lite-tooltip>
+    `;
+    }
+    renderButton(def) {
+        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) => e.preventDefault()}
+          @click=${() => this.dispatchCommand(def.command, def.attrs)}
+        >
+          ${icon ? renderGlyph(icon, 18) : def.text}
+        </button>
+      `);
+    }
+    renderSelect(name, def) {
+        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) => 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) => 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>
+    `;
+    }
+    setColor(name, def, color) {
+        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 });
+    }
+    renderColor(name, def) {
+        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) => 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) => 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) => {
+                const input = e.currentTarget
+                    .closest('.toolbar__color')
+                    .querySelector('input[type="color"]');
+                input?.click();
+            }}
+                    >
+                      +
+                    </button>
+                  </div>
+                </div>
+              </div>
+            `
+            : nothing}
+        <input
+          type="color"
+          tabindex="-1"
+          aria-hidden="true"
+          .value=${shown}
+          @input=${(e) => this.setColor(name, def, e.target.value)}
+        />
+      </span>
+    `;
+    }
+    renderItem(name) {
+        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;
+        }
+    }
+    render() {
+        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>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], NileWysiwygToolbar.prototype, "config", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygToolbar.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: false })
+], NileWysiwygToolbar.prototype, "toolbarState", void 0);
+__decorate([
+    state()
+], NileWysiwygToolbar.prototype, "openMenu", void 0);
+__decorate([
+    state()
+], NileWysiwygToolbar.prototype, "recentColors", void 0);
+NileWysiwygToolbar = __decorate([
+    customElement('nile-wysiwyg-toolbar')
+], NileWysiwygToolbar);
+export { NileWysiwygToolbar };
+//# sourceMappingURL=nile-wysiwyg-toolbar.js.map