@eclipse-docks/core 0.7.125 → 0.7.127

package/src/core/dropdown-item.ts

@@ -0,0 +1,152 @@
+/**
+ * Shared render helpers for {@link https://webawesome.com/docs/components/dropdown-item | wa-dropdown-item}
+ * rows inside any Docks popup list.
+ *
+ * **Docks surfaces** (distinct UX and contribution targets):
+ * - **Toolbar dropdown** — anchored to a toolbar control (`docks-command`, `docks-toolbar`).
+ *   Part-level registry targets use the `toolbar:` prefix (e.g. `toolbar:view.filebrowser`).
+ * - **Context menu** — opened at the pointer (`docks-contextmenu`).
+ *   Part-level registry targets use the `contextmenu:` prefix (e.g. `contextmenu:view.filebrowser`).
+ *
+ * A part can expose both surfaces with the same part id but different prefixes, registering
+ * different contributions on each. Feature-scoped targets (e.g. `filebrowser.create`) may also
+ * be referenced explicitly from either surface when several controls share the same item set.
+ */
+import { html, nothing, type TemplateResult } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { commandRegistry } from './commandregistry';
+import { icon } from './icon-utils';
+import { keyBindingManager } from './keybindings';
+import {
+    type Contribution,
+    type CommandContribution,
+    type HTMLContribution,
+    type ReactiveBoolean,
+    contributionRegistry,
+    getContributionVisible,
+    readReactiveBoolean,
+} from './contributionregistry';
+
+export type { ReactiveBoolean };
+
+export interface DropdownItemOptions {
+    cmd?: string;
+    icon?: string;
+    label: string;
+    title?: string;
+    params?: Record<string, unknown>;
+    disabled?: ReactiveBoolean;
+    variant?: 'default' | 'danger';
+    slot?: string;
+    action?: (event: Event) => void;
+}
+
+function closeParentDropdown(event: Event): void {
+    const dropdown = (event.target as Element | null)?.closest('wa-dropdown') as { open?: boolean } | null;
+    if (dropdown && dropdown.open !== undefined) {
+        dropdown.open = false;
+    }
+}
+
+function onDropdownItemClick(options: DropdownItemOptions) {
+    return (event: Event) => {
+        if (readReactiveBoolean(options.disabled, false)) return;
+        event.stopPropagation();
+        closeParentDropdown(event);
+        if (options.action) {
+            options.action(event);
+            return;
+        }
+        if (options.cmd) {
+            void commandRegistry.execute(
+                options.cmd,
+                commandRegistry.createExecutionContext(options.params ?? {})
+            );
+        }
+    };
+}
+
+function keybindingDetails(cmd?: string): TemplateResult | typeof nothing {
+    if (!cmd) return nothing;
+    const bindings = keyBindingManager.getKeyBindingsForCommand(cmd);
+    if (bindings.length === 0) return nothing;
+    return html`<span slot="details">${bindings[0]}</span>`;
+}
+
+/** Renders a native {@link https://webawesome.com/docs/components/dropdown-item | wa-dropdown-item}. */
+export function renderDropdownItem(options: DropdownItemOptions): TemplateResult {
+    const iconSpec = options.icon ?? '';
+    return html`
+        <wa-dropdown-item
+            slot=${options.slot ?? nothing}
+            variant=${options.variant ?? 'default'}
+            ?disabled=${readReactiveBoolean(options.disabled, false)}
+            @click=${onDropdownItemClick(options)}>
+            ${iconSpec ? icon(iconSpec, { label: options.title ?? options.label, slot: 'icon' }) : nothing}
+            ${options.label}
+            ${keybindingDetails(options.cmd)}
+        </wa-dropdown-item>
+    `;
+}
+
+export function renderCommandContribution(
+    contribution: CommandContribution,
+    options?: { slot?: string }
+): TemplateResult | typeof nothing {
+    if (!getContributionVisible(contribution)) return nothing;
+    return renderDropdownItem({
+        cmd: contribution.command,
+        icon: contribution.icon,
+        label: contribution.label,
+        params: contribution.params,
+        disabled: contribution.disabled,
+        slot: options?.slot,
+    });
+}
+
+export function renderDropdownContribution(
+    contribution: Contribution,
+    options?: { slot?: string }
+): TemplateResult | typeof nothing {
+    if ('command' in contribution) {
+        return renderCommandContribution(contribution as CommandContribution, options);
+    }
+    if ('component' in contribution) {
+        if (!getContributionVisible(contribution)) return nothing;
+        const contents = (contribution as HTMLContribution).component;
+        if (contents instanceof Function) {
+            return contents();
+        }
+        return html`${unsafeHTML(contents)}` as TemplateResult;
+    }
+    return nothing;
+}
+
+/** Renders all visible contributions registered for a contribution target. */
+export function renderDropdownContributions(
+    target: string,
+    options?: { slot?: string }
+): TemplateResult {
+    const items = contributionRegistry
+        .getContributions(target)
+        .map((c) => renderDropdownContribution(c, options))
+        .filter((item) => item !== nothing);
+    return html`${items}`;
+}
+
+/** Renders a {@link wa-dropdown-item} with nested items from a contribution target in {@code slot="submenu"}. */
+export function renderDropdownSubmenu(options: {
+    icon?: string;
+    label: string;
+    title?: string;
+    contributionTarget: string;
+    disabled?: ReactiveBoolean;
+}): TemplateResult {
+    return html`
+        <wa-dropdown-item ?disabled=${readReactiveBoolean(options.disabled, false)}>
+            ${options.icon ? icon(options.icon, { label: options.title ?? options.label, slot: 'icon' }) : nothing}
+            ${options.label}
+            ${renderDropdownContributions(options.contributionTarget, { slot: 'submenu' })}
+        </wa-dropdown-item>
+    `;
+}

package/src/core/dropdown-menu-utils.ts

@@ -1,4 +1,63 @@
 type DropdownItemElement = HTMLElement & { submenuOpen?: boolean };
+type OpenDropdownElement = HTMLElement & { open?: boolean };
+
+function isOpenDropdown(element: Element): element is OpenDropdownElement {
+  if (element.localName !== "wa-dropdown") return false;
+  const dropdown = element as OpenDropdownElement;
+  return dropdown.open === true || dropdown.hasAttribute("open");
+}
+
+function elementsFromEventPath(event: Event): Element[] {
+  const fromComposedPath = event
+    .composedPath()
+    .filter((node): node is Element => node instanceof Element);
+  if (fromComposedPath.length > 0) return fromComposedPath;
+
+  if (!(event.target instanceof Element)) return [];
+
+  const path: Element[] = [];
+  let current: Element | null = event.target;
+  while (current) {
+    path.push(current);
+    const root = current.getRootNode();
+    if (root instanceof ShadowRoot) {
+      current = root.host;
+      continue;
+    }
+    current = current.parentElement;
+  }
+  return path;
+}
+
+function elementTargetsOpenDropdown(element: Element): boolean {
+  if (isOpenDropdown(element)) return true;
+  if (element.localName !== "wa-dropdown-item") return false;
+  const dropdown = element.closest("wa-dropdown");
+  if (dropdown && isOpenDropdown(dropdown)) return true;
+  const root = element.getRootNode();
+  return root instanceof ShadowRoot
+    && root.host instanceof Element
+    && isOpenDropdown(root.host);
+}
+
+/** True when the event occurred inside a wa-dropdown that is currently open. */
+export function eventTargetsOpenDropdown(event: Event): boolean {
+  return elementsFromEventPath(event).some(elementTargetsOpenDropdown);
+}
+
+/** Prevents the browser context menu on open Docks popup lists (context menus, toolbar dropdowns). */
+export function suppressNativeContextMenuInOpenDropdowns(event: Event): void {
+  if (!event.cancelable || !eventTargetsOpenDropdown(event)) return;
+  event.preventDefault();
+}
+
+let openDropdownContextMenuGuardInstalled = false;
+
+export function installOpenDropdownNativeContextMenuGuard(): void {
+  if (openDropdownContextMenuGuardInstalled || typeof document === "undefined") return;
+  openDropdownContextMenuGuardInstalled = true;
+  document.addEventListener("contextmenu", suppressNativeContextMenuInOpenDropdowns, { capture: true });
+}
 
 function visitElementTree(root: Node, visit: (element: Element) => void): void {
   if (root instanceof Element) {

package/src/core/markdown-html.ts

@@ -0,0 +1,11 @@
+import DOMPurify from 'dompurify';
+import { marked, type MarkedOptions } from 'marked';
+
+export function sanitizeHtml(html: string): string {
+    return DOMPurify.sanitize(html);
+}
+
+export function parseMarkdownHtml(markdown: string, options?: MarkedOptions): string {
+    const html = marked.parse(markdown, { async: false, ...options }) as string;
+    return sanitizeHtml(html);
+}

package/src/parts/contextmenu.ts

@@ -2,20 +2,24 @@ import {css, html, nothing} from 'lit'
 import {customElement, property, state} from 'lit/decorators.js'
 import {DocksElement} from "./element";
 import {
-    CommandContribution,
     Contribution,
     ContributionChangeEvent,
     contributionRegistry,
-    getContributionDisabled,
-    HTMLContribution,
-    getContributionVisible,
     TOPIC_CONTRIBUTEIONS_CHANGED
 } from "../core/contributionregistry";
-import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import {subscribe} from "../core/events";
 import {closeSiblingSubmenus} from "../core/dropdown-menu-utils";
 import {createRef, ref} from "lit/directives/ref.js";
-import '../components/command';
+import {renderDropdownContribution} from "../core/dropdown-item";
+
+interface VirtualPopupAnchor {
+    getBoundingClientRect(): DOMRect;
+}
+
+interface WaPopupElement extends HTMLElement {
+    anchor?: Element | string | VirtualPopupAnchor;
+    reposition(): void;
+}
 
 @customElement('docks-contextmenu')
 export class DocksContextMenu extends DocksElement {
@@ -31,10 +35,15 @@ export class DocksContextMenu extends DocksElement {
     @state()
     private isOpen: boolean = false;
 
-    @state()
-    private position: { x: number, y: number } = { x: 0, y: 0 };
+    private menuPosition: { x: number; y: number } = { x: 0, y: 0 };
+
+    private readonly virtualAnchor: VirtualPopupAnchor = {
+        getBoundingClientRect: () => {
+            const { x, y } = this.menuPosition;
+            return new DOMRect(x, y, 0, 0);
+        },
+    };
 
-    private anchorRef = createRef<HTMLElement>();
     private dropdownRef = createRef<HTMLElement>();
 
     private boundHandleDocumentPointerDown = this.handleDocumentPointerDown.bind(this);
@@ -225,43 +234,38 @@ export class DocksContextMenu extends DocksElement {
             await this.updateComplete;
         }
 
-        this.position = position;
+        this.menuPosition = position;
         this.isOpen = true;
         await this.updateComplete;
+        this.syncVirtualPopupAnchor();
         document.addEventListener('pointerdown', this.boundHandleDocumentPointerDown, { capture: true });
         return true;
     }
 
+    /** Points wa-dropdown's internal wa-popup at the pointer via a VirtualElement anchor. */
+    private syncVirtualPopupAnchor(): void {
+        const dropdown = this.dropdownRef.value;
+        const popup = dropdown?.shadowRoot?.querySelector('wa-popup') as WaPopupElement | null;
+        if (!popup) return;
+        popup.anchor = this.virtualAnchor;
+        popup.reposition();
+    }
+
     private onClose() {
         if (!this.isOpen) return;
         this.isOpen = false;
         document.removeEventListener('pointerdown', this.boundHandleDocumentPointerDown, { capture: true });
     }
 
-    private renderContribution(contribution: Contribution) {
-        if ("command" in contribution) {
-            const commandContribution = contribution as CommandContribution;
-            if (!getContributionVisible(commandContribution)) {
-                return nothing;
-            }
-            const disabled = getContributionDisabled(commandContribution);
-            return html`
-                <docks-command
-                    cmd="${commandContribution.command}"
-                    icon="${commandContribution.icon ?? ''}"
-                    .params=${commandContribution.params ?? {}}
-                    ?disabled="${disabled}">
-                    ${commandContribution.label}
-                </docks-command>
-            `;
-        } else if ("component" in contribution) {
-            const contents = (contribution as HTMLContribution).component;
-            if (contents instanceof Function) {
-                return contents();
-            }
-            return unsafeHTML(contents);
+    protected updated(changedProperties: Map<string, unknown>): void {
+        super.updated(changedProperties);
+        if (changedProperties.has('isOpen') && this.isOpen) {
+            this.syncVirtualPopupAnchor();
         }
-        return nothing;
+    }
+
+    private renderContribution(contribution: Contribution) {
+        return renderDropdownContribution(contribution);
     }
 
     render() {
@@ -273,17 +277,7 @@ export class DocksContextMenu extends DocksElement {
                 ?open=${this.isOpen}
                 @submenu-opening=${this.handleSubmenuOpening}
                 @wa-after-hide=${this.onClose}>
-                
-                <div 
-                    slot="trigger"
-                    ${ref(this.anchorRef)}
-                    style="position: fixed; 
-                           left: ${this.position.x}px; 
-                           top: ${this.position.y}px; 
-                           width: 1px; 
-                           height: 1px; 
-                           pointer-events: none;">
-                </div>
+                <span slot="trigger" hidden aria-hidden="true"></span>
                 
                 ${partContent}
                 ${this.contributions.map(c => this.renderContribution(c))}

package/src/parts/dialog-content.ts

@@ -1,6 +1,6 @@
 import { html, TemplateResult, css } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { marked } from "marked";
+import { parseMarkdownHtml } from "../core/markdown-html";
 import { DocksElement } from "./element";
 
 export abstract class DocksDialogContent extends DocksElement {
@@ -22,7 +22,7 @@ export abstract class DocksDialogContent extends DocksElement {
 
     protected renderMessage(message: string, markdown: boolean = false): TemplateResult {
         if (markdown) {
-            const htmlContent = marked.parse(message, { async: false }) as string;
+            const htmlContent = parseMarkdownHtml(message);
             return html`<div class="dialog-message" style="white-space: normal;">${unsafeHTML(htmlContent)}</div>`;
         }
         return html`<div class="dialog-message" style="white-space: pre-line;">${message}</div>`;

package/src/parts/index.ts

@@ -1,5 +1,8 @@
 import "../externals/webawesome"
+import { installOpenDropdownNativeContextMenuGuard } from "../core/dropdown-menu-utils";
 import "./toolbar"
 import "./contextmenu"
 import "./tabs"
-import "./resizable-grid"
+import "./resizable-grid"
+
+installOpenDropdownNativeContextMenuGuard();

package/src/parts/part.ts

@@ -135,11 +135,13 @@ export abstract class DocksPart extends DocksContainer {
         return nothing;
     }
 
+    /** Part-level toolbar contributions (`toolbar:${partId}`). */
     private getToolbarTarget(): string | undefined {
         const contributionKey = this.tabContribution?.editorId ?? this.id ?? this.tabContribution?.name;
         return contributionKey ? `toolbar:${contributionKey}` : undefined;
     }
 
+    /** Part-level context-menu contributions (`contextmenu:${partId}`). */
     private getContextMenuTarget(): string | undefined {
         const contributionKey = this.tabContribution?.editorId ?? this.id ?? this.tabContribution?.name;
         return contributionKey ? `contextmenu:${contributionKey}` : undefined;