@aquera/nile-elements 1.9.5 → 1.9.7

package/dist/src/nile-wysiwyg-editor/ui/shortcut-help.js

@@ -0,0 +1,296 @@
+import { __decorate } from "tslib";
+import { html, css, 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) {
+    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 ? '' : '+');
+}
+const GROUPS = [
+    {
+        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).
+ */
+let NileWysiwygShortcutHelp = class NileWysiwygShortcutHelp extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        /** Body overflow value before we locked it; null = not locked by us. */
+        this.previousBodyOverflow = null;
+    }
+    static get styles() {
+        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).
+     */
+    updated(changed) {
+        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() {
+        super.disconnectedCallback();
+        if (this.previousBodyOverflow !== null) {
+            document.body.style.overflow = this.previousBodyOverflow;
+            this.previousBodyOverflow = null;
+        }
+    }
+    /** Moves focus into the dialog so Esc lands here. */
+    focusPanel() {
+        this.updateComplete.then(() => this.panelEl?.focus());
+    }
+    close() {
+        this.emit('wysiwyg-shortcut-help-close');
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.close();
+        }
+    }
+    render() {
+        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>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygShortcutHelp.prototype, "open", void 0);
+__decorate([
+    query('.help__panel')
+], NileWysiwygShortcutHelp.prototype, "panelEl", void 0);
+NileWysiwygShortcutHelp = __decorate([
+    customElement('nile-wysiwyg-shortcut-help')
+], NileWysiwygShortcutHelp);
+export { NileWysiwygShortcutHelp };
+//# sourceMappingURL=shortcut-help.js.map

package/dist/src/nile-wysiwyg-editor/ui/shortcut-help.js.map

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

package/dist/src/nile-wysiwyg-editor/ui/source-view.d.ts

@@ -0,0 +1,19 @@
+import { TemplateResult, CSSResultArray } from 'lit';
+import NileElement from '../../internal/nile-element';
+/**
+ * Raw HTML source editing mode. Replaces the rich surface while open; the
+ * host re-parses (and re-sanitizes) the HTML on apply. Emits
+ * `wysiwyg-source-apply` detail: { html } and `wysiwyg-source-cancel`.
+ */
+export declare class NileWysiwygSourceView extends NileElement {
+    value: string;
+    textarea?: HTMLTextAreaElement;
+    static get styles(): CSSResultArray;
+    focusInput(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-source-view': NileWysiwygSourceView;
+    }
+}

package/dist/src/nile-wysiwyg-editor/ui/source-view.js

@@ -0,0 +1,120 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+/**
+ * Raw HTML source editing mode. Replaces the rich surface while open; the
+ * host re-parses (and re-sanitizes) the HTML on apply. Emits
+ * `wysiwyg-source-apply` detail: { html } and `wysiwyg-source-cancel`.
+ */
+let NileWysiwygSourceView = class NileWysiwygSourceView extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+    }
+    static get styles() {
+        return [
+            css `
+        :host {
+          font-family: var(
+            --nile-font-family-sans-serif,
+            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
+          );
+          display: flex;
+          flex-direction: column;
+        }
+
+        .bar {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 6px 12px;
+          font-size: 12px;
+          color: var(--nile-colors-neutral-600, #475467);
+          border-bottom: 1px solid var(--nile-colors-neutral-300, #e4e7ec);
+          background: var(--nile-wysiwyg-toolbar-bg, var(--nile-colors-neutral-50, #f9fafb));
+        }
+
+        .actions {
+          display: flex;
+          gap: 8px;
+        }
+
+        button {
+          font: inherit;
+          font-size: 12px;
+          padding: 4px 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;
+        }
+
+        textarea {
+          flex: 1;
+          min-height: var(--nile-wysiwyg-min-height, 160px);
+          padding: 12px 16px;
+          border: none;
+          outline: none;
+          resize: vertical;
+          font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
+          font-size: 12px;
+          line-height: 1.5;
+          color: var(--nile-colors-neutral-900, #101828);
+          background: transparent;
+          box-sizing: border-box;
+        }
+      `,
+        ];
+    }
+    focusInput() {
+        this.updateComplete.then(() => this.textarea?.focus());
+    }
+    render() {
+        return html `
+      <div class="bar" part="source-bar">
+        <span>HTML source</span>
+        <span class="actions">
+          <button type="button" @click=${() => this.emit('wysiwyg-source-cancel')}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            class="primary"
+            @click=${() => this.emit('wysiwyg-source-apply', { html: this.textarea?.value ?? '' })}
+          >
+            Done
+          </button>
+        </span>
+      </div>
+      <textarea
+        part="source-textarea"
+        spellcheck="false"
+        .value=${this.value}
+        @keydown=${(e) => {
+            if (e.key === 'Escape') {
+                e.stopPropagation();
+                this.emit('wysiwyg-source-cancel');
+            }
+        }}
+      ></textarea>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], NileWysiwygSourceView.prototype, "value", void 0);
+__decorate([
+    query('textarea')
+], NileWysiwygSourceView.prototype, "textarea", void 0);
+NileWysiwygSourceView = __decorate([
+    customElement('nile-wysiwyg-source-view')
+], NileWysiwygSourceView);
+export { NileWysiwygSourceView };
+//# sourceMappingURL=source-view.js.map

package/dist/src/nile-wysiwyg-editor/ui/source-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"source-view.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/source-view.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,WAAW,MAAM,6BAA6B,CAAC;AAEtD;;;;GAIG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,WAAW;IAA/C;;QACuB,UAAK,GAAG,EAAE,CAAC;IAqGzC,CAAC;IAjGQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAwDF;SACF,CAAC;IACJ,CAAC;IAEM,UAAU;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;IACzD,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;yCAI0B,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC;;;;;;qBAM5D,GAAG,EAAE,CACZ,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE,EAAE,CAAC;;;;;;;;;iBASpE,IAAI,CAAC,KAAK;mBACR,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AArG6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAY;AAEpB;IAAlB,KAAK,CAAC,UAAU,CAAC;uDAAgC;AAHvC,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAsGjC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\n/**\n * Raw HTML source editing mode. Replaces the rich surface while open; the\n * host re-parses (and re-sanitizes) the HTML on apply. Emits\n * `wysiwyg-source-apply` detail: { html } and `wysiwyg-source-cancel`.\n */\n@customElement('nile-wysiwyg-source-view')\nexport class NileWysiwygSourceView extends NileElement {\n  @property({ type: String }) value = '';\n\n  @query('textarea') textarea?: HTMLTextAreaElement;\n\n  public static get styles(): CSSResultArray {\n    return [\n      css`\n        :host {\n          font-family: var(\n            --nile-font-family-sans-serif,\n            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n          );\n          display: flex;\n          flex-direction: column;\n        }\n\n        .bar {\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          padding: 6px 12px;\n          font-size: 12px;\n          color: var(--nile-colors-neutral-600, #475467);\n          border-bottom: 1px solid var(--nile-colors-neutral-300, #e4e7ec);\n          background: var(--nile-wysiwyg-toolbar-bg, var(--nile-colors-neutral-50, #f9fafb));\n        }\n\n        .actions {\n          display: flex;\n          gap: 8px;\n        }\n\n        button {\n          font: inherit;\n          font-size: 12px;\n          padding: 4px 12px;\n          border-radius: 6px;\n          border: 1px solid transparent;\n          cursor: pointer;\n          background: transparent;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        button.primary {\n          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n          color: #ffffff;\n        }\n\n        textarea {\n          flex: 1;\n          min-height: var(--nile-wysiwyg-min-height, 160px);\n          padding: 12px 16px;\n          border: none;\n          outline: none;\n          resize: vertical;\n          font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n          font-size: 12px;\n          line-height: 1.5;\n          color: var(--nile-colors-neutral-900, #101828);\n          background: transparent;\n          box-sizing: border-box;\n        }\n      `,\n    ];\n  }\n\n  public focusInput(): void {\n    this.updateComplete.then(() => this.textarea?.focus());\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"bar\" part=\"source-bar\">\n        <span>HTML source</span>\n        <span class=\"actions\">\n          <button type=\"button\" @click=${() => this.emit('wysiwyg-source-cancel')}>\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            class=\"primary\"\n            @click=${() =>\n              this.emit('wysiwyg-source-apply', { html: this.textarea?.value ?? '' })}\n          >\n            Done\n          </button>\n        </span>\n      </div>\n      <textarea\n        part=\"source-textarea\"\n        spellcheck=\"false\"\n        .value=${this.value}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Escape') {\n            e.stopPropagation();\n            this.emit('wysiwyg-source-cancel');\n          }\n        }}\n      ></textarea>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-source-view': NileWysiwygSourceView;\n  }\n}\n"]}

package/dist/src/nile-wysiwyg-editor/ui/special-chars.d.ts

@@ -0,0 +1,20 @@
+import { TemplateResult, CSSResultArray } from 'lit';
+import NileElement from '../../internal/nile-element';
+import '../../nile-button-toggle-group/index';
+import '../../nile-button-toggle/index';
+/**
+ * Special characters picker (the Ω toolbar item). Emits
+ * `wysiwyg-char-select` detail: { char } and `wysiwyg-char-cancel`.
+ */
+export declare class NileWysiwygSpecialChars extends NileElement {
+    open: boolean;
+    private category;
+    static get styles(): CSSResultArray;
+    private handleKeydown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-special-chars': NileWysiwygSpecialChars;
+    }
+}