@aquera/nile-elements 1.9.8 → 1.9.9

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

@@ -1,18 +1,100 @@
-import { html, css, TemplateResult, CSSResultArray } from 'lit';
+import { html, css, TemplateResult, CSSResultArray, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import NileElement from '../../internal/nile-element';
 import { renderGlyph } from '../../internal/glyph';
 import type { ToolbarState } from '../engine/selection-state';
 import type { WysiwygCommandDetail } from '../types';
+import type { AuthoredToolbarItem } from '../nile-wysiwyg-toolbar/nile-wysiwyg-toolbar';
+import '../../nile-lite-tooltip/nile-lite-tooltip';
 
-interface BubbleItem {
-  name: WysiwygCommandDetail['name'];
+/** A control the bubble menu knows how to render, keyed by its authored name. */
+interface BubbleDef {
+  /** The command dispatched on click. */
+  command: WysiwygCommandDetail['name'];
   label: string;
   /** nile-glyph icon name (ng-* names are stroke-drawn). */
   icon: string;
-  active: (state: ToolbarState) => boolean;
+  /** Static attrs sent with the command (e.g. alignment direction). */
+  attrs?: WysiwygCommandDetail['attrs'];
+  active?: (state: ToolbarState) => boolean;
 }
 
+/**
+ * Registry of controls addressable by `<nile-wysiwyg-bubble-item name="…">`.
+ * Icons/labels mirror the main toolbar so both surfaces look identical.
+ */
+const BUBBLE_ITEMS: Record<string, BubbleDef> = {
+  bold: { command: 'bold', label: 'Bold', icon: 'format_bold', active: s => s.bold },
+  italic: { command: 'italic', label: 'Italic', icon: 'format_italic', active: s => s.italic },
+  underline: {
+    command: 'underline',
+    label: 'Underline',
+    icon: 'format_underline',
+    active: s => s.underline,
+  },
+  strike: {
+    command: 'strike',
+    label: 'Strikethrough',
+    icon: 'ng-strikethrough',
+    active: s => s.strike,
+  },
+  code: { command: 'code', label: 'Inline code', icon: 'ng-code', active: s => s.code },
+  subscript: {
+    command: 'subscript',
+    label: 'Subscript',
+    icon: 'ng-subscript',
+    active: s => s.subscript,
+  },
+  superscript: {
+    command: 'superscript',
+    label: 'Superscript',
+    icon: 'ng-superscript',
+    active: s => s.superscript,
+  },
+  link: { command: 'openLink', label: 'Link', icon: 'link_2', active: s => s.linkActive },
+  bulletList: {
+    command: 'bulletList',
+    label: 'Bulleted list',
+    icon: 'format_list_bulleted',
+    active: s => s.inBulletList,
+  },
+  orderedList: {
+    command: 'orderedList',
+    label: 'Numbered list',
+    icon: 'format_list_numbered',
+    active: s => s.inOrderedList,
+  },
+  alignLeft: {
+    command: 'align',
+    label: 'Align left',
+    icon: 'format_align_left',
+    attrs: { align: 'left' },
+    active: s => s.align === 'left',
+  },
+  alignCenter: {
+    command: 'align',
+    label: 'Align center',
+    icon: 'format_align_middle',
+    attrs: { align: 'center' },
+    active: s => s.align === 'center',
+  },
+  alignRight: {
+    command: 'align',
+    label: 'Align right',
+    icon: 'format_align_right',
+    attrs: { align: 'right' },
+    active: s => s.align === 'right',
+  },
+  clearFormatting: {
+    command: 'clearFormatting',
+    label: 'Clear formatting',
+    icon: 'format_clear',
+  },
+};
+
+/** Built-in default when no `<nile-wysiwyg-bubble-item>` children are authored. */
+const DEFAULT_BUBBLE = ['bold', 'italic', 'underline', 'strike', 'link'];
+
 /**
  * Balloon toolbar shown over non-empty selections. The host owns positioning
  * (absolute left/top) and visibility; commands bubble up as
@@ -24,6 +106,13 @@ export class NileWysiwygBubbleMenu extends NileElement {
 
   @property({ attribute: false }) toolbarState?: ToolbarState;
 
+  /**
+   * Structured item list authored in light DOM (from
+   * `<nile-wysiwyg-bubble-item>` children). `'|'` is a separator. Falls back to
+   * {@link DEFAULT_BUBBLE} when empty.
+   */
+  @property({ attribute: false }) items?: AuthoredToolbarItem[];
+
   public static get styles(): CSSResultArray {
     return [
       css`
@@ -78,54 +167,72 @@ export class NileWysiwygBubbleMenu extends NileElement {
           background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
           color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));
         }
+
+        .divider {
+          align-self: stretch;
+          width: 1px;
+          margin: 3px 2px;
+          background: var(--nile-colors-neutral-300, #e4e7ec);
+        }
       `,
     ];
   }
 
-  /** Same icon set as the main toolbar, so both surfaces look identical. */
-  private items: BubbleItem[] = [
-    { name: 'bold', label: 'Bold', icon: 'format_bold', active: s => s.bold },
-    { name: 'italic', label: 'Italic', icon: 'format_italic', active: s => s.italic },
-    {
-      name: 'underline',
-      label: 'Underline',
-      icon: 'format_underline',
-      active: s => s.underline,
-    },
-    {
-      name: 'strike',
-      label: 'Strikethrough',
-      icon: 'ng-strikethrough',
-      active: s => s.strike,
-    },
-    {
-      name: 'openLink',
-      label: 'Link',
-      icon: 'link_2',
-      active: s => s.linkActive,
-    },
-  ];
+  /**
+   * True when this instance is an author's declarative `<nile-wysiwyg-bubble-menu>`
+   * container in an editor's light DOM (holding `<nile-wysiwyg-bubble-item>`
+   * children). It renders nothing — the editor reads the items and renders the
+   * real bubble menu in its own shadow DOM. The editor's internal instance
+   * lives in a shadow root, so `closest` never matches it.
+   */
+  private get isAuthoringContainer(): boolean {
+    return !!this.closest('nile-wysiwyg-editor');
+  }
 
   public render(): TemplateResult {
+    if (this.isAuthoringContainer) return html``;
+
     const state = this.toolbarState;
+    const entries: AuthoredToolbarItem[] =
+      this.items && this.items.length
+        ? this.items
+        : DEFAULT_BUBBLE.map(name => ({ name }));
     return html`
       <div class="bubble" part="bubble-menu" @mousedown=${(e: Event) => e.preventDefault()}>
-        ${this.items.map(
-          item => html`
-            <button
-              type="button"
-              title=${item.label}
-              aria-label=${item.label}
-              ?data-active=${state ? item.active(state) : false}
-              @click=${() => this.emit('wysiwyg-command', { name: item.name })}
-            >
-              ${renderGlyph(item.icon, 16)}
-            </button>
-          `
-        )}
+        ${entries.map(entry => this.renderEntry(entry, state))}
       </div>
     `;
   }
+
+  private renderEntry(
+    entry: AuthoredToolbarItem,
+    state?: ToolbarState
+  ): TemplateResult | typeof nothing {
+    if (entry.name === '|') {
+      return html`<span class="divider" part="bubble-divider"></span>`;
+    }
+    const base = BUBBLE_ITEMS[entry.name];
+    const label = entry.label || base?.label || entry.name;
+    const icon = entry.icon || base?.icon;
+    // Unknown command with no icon to draw → nothing to render.
+    if (!icon) return nothing;
+    const command = base?.command ?? (entry.name as WysiwygCommandDetail['name']);
+    const attrs = base?.attrs;
+    const isActive = base?.active && state ? base.active(state) : false;
+    return html`
+      <nile-lite-tooltip content=${label} placement="top">
+        <button
+          type="button"
+          aria-label=${label}
+          ?data-active=${isActive}
+          @click=${() =>
+            this.emit('wysiwyg-command', attrs ? { name: command, attrs } : { name: command })}
+        >
+          ${renderGlyph(icon, 16)}
+        </button>
+      </nile-lite-tooltip>
+    `;
+  }
 }
 
 declare global {

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

@@ -6,7 +6,8 @@ import '../../nile-input/index';
 import '../../nile-button/index';
 
 /**
- * Floating embed-insert panel: paste a YouTube/Vimeo/Loom link. Styled to
+ * Floating embed-insert panel: paste any https:// link (YouTube/Vimeo/Loom
+ * are auto-formatted; anything else embeds as a sandboxed iframe). Styled to
  * match the image panel (nile-input + nile-button). Emits
  * `wysiwyg-embed-apply` detail: { src, provider } and `wysiwyg-embed-cancel`.
  */
@@ -94,7 +95,7 @@ export class NileWysiwygEmbedPanel extends NileElement {
   private handleSubmit(): void {
     const target = toEmbedUrl(this.urlValue.trim());
     if (!target) {
-      this.error = 'Only YouTube, Vimeo, and Loom links are supported.';
+      this.error = 'Enter a valid https:// URL.';
       return;
     }
     this.error = '';
@@ -124,7 +125,7 @@ export class NileWysiwygEmbedPanel extends NileElement {
 
         ${this.error
           ? html`<span class="error" part="error">${this.error}</span>`
-          : html`<span class="hint">YouTube, Vimeo, or Loom</span>`}
+          : html`<span class="hint">Add any link to it</span>`}
 
         <div class="actions">
           <nile-button variant="primary" @click=${() => this.handleSubmit()}

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

@@ -148,9 +148,6 @@ export class NileWysiwygMathPanel extends NileElement {
           </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()}

package/src/nile-wysiwyg-editor/ui/preview.ts

@@ -0,0 +1,42 @@
+import { LitElement, html, css, TemplateResult, CSSResultArray } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { styles as editorStyles } from '../nile-wysiwyg-editor.css';
+
+/**
+ * Renders sanitized document HTML inside its OWN shadow root. Any author
+ * `<style>` block in the content is therefore scoped to this element and
+ * cannot leak into the surrounding source-view / editor chrome (which lives in
+ * a different shadow root). Reuses the editor's content styles so the render
+ * matches the live editor. The content wrapper is an `<article>`, not a
+ * `<div>`, so a blanket `div { … }` rule doesn't paint the wrapper itself.
+ */
+@customElement('nile-wysiwyg-preview')
+export class NileWysiwygPreview extends LitElement {
+  /** Sanitized HTML to render (already run through sanitizeHtml). */
+  @property({ type: String }) content = '';
+
+  public static get styles(): CSSResultArray {
+    return [
+      editorStyles,
+      css`
+        :host {
+          display: block;
+        }
+        .ProseMirror {
+          min-height: 0;
+        }
+      `,
+    ];
+  }
+
+  public render(): TemplateResult {
+    return html`<article class="ProseMirror">${unsafeHTML(this.content)}</article>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-wysiwyg-preview': NileWysiwygPreview;
+  }
+}