@domternal/angular 0.6.1 → 0.7.0

package/dist/types/domternal-angular.d.ts

@@ -1,11 +1,13 @@
 import * as _angular_core from '@angular/core';
 import { OnDestroy, ElementRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { AnyExtension, Content, FocusPosition, Editor, JSONContent, IconSet, ToolbarLayoutEntry, ToolbarGroup, ToolbarDropdown, ToolbarButton, ToolbarItem } from '@domternal/core';
+import * as _domternal_core from '@domternal/core';
+import { AnyExtension, Content, FocusPosition, Editor, JSONContent, IconSet, ToolbarLayoutEntry, ToolbarGroup, ToolbarDropdown, ToolbarButton, ToolbarItem, FloatingMenuItemsOverride, FloatingMenuItem } from '@domternal/core';
 export { AnyExtension, Content, Editor, FocusPosition, JSONContent } from '@domternal/core';
 import { SafeHtml } from '@angular/platform-browser';
 import * as prosemirror_state from 'prosemirror-state';
 import * as prosemirror_view from 'prosemirror-view';
+import { FloatingMenuKeymap } from '@domternal/extension-block-menu';
 
 declare const DEFAULT_EXTENSIONS: AnyExtension[];
 declare class DomternalEditorComponent implements ControlValueAccessor, OnDestroy {
@@ -77,7 +79,7 @@ declare class DomternalToolbarComponent implements OnDestroy {
     private ngZone;
     private elRef;
     private sanitizer;
-    /** SafeHtml cache — same reference returned for same key, prevents DOM churn */
+    /** SafeHtml cache - same reference returned for same key, prevents DOM churn */
     private htmlCache;
     private readonly dropdownCaret;
     constructor();
@@ -89,7 +91,7 @@ declare class DomternalToolbarComponent implements OnDestroy {
     getDropdownTriggerHtml(dropdown: ToolbarDropdown): SafeHtml;
     /**
      * Returns 'true' when an emitEvent button's panel is open, null otherwise.
-     * Maps to [attr.aria-expanded] — null removes the attribute entirely.
+     * Maps to [attr.aria-expanded] - null removes the attribute entirely.
      */
     getAriaExpanded(item: ToolbarButton): string | null;
     getFlatIndex(name: string): number;
@@ -112,7 +114,7 @@ declare class DomternalToolbarComponent implements OnDestroy {
     private destroyController;
     private syncState;
     private getComputedStyleAtCursor;
-    /** Read only inline style — no computed fallback (used for font-family). */
+    /** Read only inline style - no computed fallback (used for font-family). */
     private getInlineStyleAtCursor;
     private focusCurrentButton;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DomternalToolbarComponent, never>;
@@ -123,7 +125,7 @@ interface BubbleMenuSeparator {
     type: 'separator';
     name: string;
 }
-type BubbleMenuItem = ToolbarButton | BubbleMenuSeparator;
+type BubbleMenuItem = ToolbarButton | ToolbarDropdown | BubbleMenuSeparator;
 declare class DomternalBubbleMenuComponent implements OnDestroy {
     readonly editor: _angular_core.InputSignal<Editor>;
     readonly shouldShow: _angular_core.InputSignal<(props: {
@@ -140,25 +142,72 @@ declare class DomternalBubbleMenuComponent implements OnDestroy {
     readonly items: _angular_core.InputSignal<string[]>;
     /** Context-aware: map context names to item arrays, `true` for all valid items, or `null` to disable */
     readonly contexts: _angular_core.InputSignal<Record<string, true | string[]>>;
-    /** Internal — updated on transactions. Not meant to be set from outside. */
+    /**
+     * Custom icon overrides. Falls back to default Phosphor icons for unmapped keys.
+     * For nullable bindings, use `iconsSignal() ?? {}` to satisfy strict template checks.
+     */
+    readonly icons: _angular_core.InputSignal<IconSet>;
+    /**
+     * Returns the effective contexts map: the explicit `contexts` input
+     * when provided, the standard default when neither `contexts` nor
+     * `items` is set, or `undefined` (items-mode) when only `items` is set.
+     * The standard default is richer when the editor sits inside
+     * `.dm-notion-mode`.
+     */
+    private resolveContexts;
+    /** Internal - updated on transactions. Not meant to be set from outside. */
     readonly resolvedItems: _angular_core.WritableSignal<BubbleMenuItem[]>;
+    /** Internal - true when the BlockContextMenu extension is loaded; toggles the "..." trailing button. */
+    readonly showBlockMenuButton: _angular_core.WritableSignal<boolean>;
+    /** Internal - true when the selection spans more than one top-level block; the "..." trigger is disabled in that case because block-level commands have no unambiguous target. */
+    readonly blockMenuButtonDisabled: _angular_core.WritableSignal<boolean>;
+    /** Internal - true when the current selection is a NodeSelection (image, HR). The text-color and block-context triggers are hidden in that case: a node has no inline text to color and its bubble menu already exposes node-specific actions. */
+    readonly isNodeSelection: _angular_core.WritableSignal<boolean>;
+    /** Internal - true when the NotionColorPicker extension is loaded; toggles the "A" color trigger. */
+    readonly showColorPickerButton: _angular_core.WritableSignal<boolean>;
+    /** Current text color CSS variable expression for the trigger glyph (null = default). */
+    readonly currentTextColorVar: _angular_core.WritableSignal<string>;
+    /** Current background color CSS variable expression for the trigger underline (null = transparent). */
+    readonly currentBgColorVar: _angular_core.WritableSignal<string>;
+    /** Internal - true when the selection has any token-based text or background color applied. */
+    readonly hasAnyColor: _angular_core.WritableSignal<boolean>;
     private menuEl;
     private pluginKey;
     private sanitizer;
     private ngZone;
     private activeVersion;
     private itemMap;
+    private dropdownMap;
     private activeMap;
     private disabledMap;
     private htmlCache;
     private bubbleDefaults;
     private transactionHandler;
+    readonly openDropdown: _angular_core.WritableSignal<string>;
+    private dropdownCleanupFloating;
+    private dropdownOutsideHandler;
+    private dropdownKeydownHandler;
+    private dropdownDismissHandler;
+    private readonly dropdownCaret;
     constructor();
     ngOnDestroy(): void;
     isItemActive(item: ToolbarButton): boolean;
     isItemDisabled(item: ToolbarButton): boolean;
     getCachedIcon(name: string): SafeHtml;
-    executeCommand(item: ToolbarButton): void;
+    executeCommand(item: ToolbarButton, event?: Event): void;
+    /**
+     * Emit the `notionColorOpen` event with the trigger button as the anchor.
+     * The framework popover component (DomternalNotionColorPickerComponent)
+     * listens for this event and positions itself against the anchor.
+     */
+    openColorPicker(anchor: HTMLElement): void;
+    /**
+     * Open the BlockContextMenu against the cursor's containing block. Skips
+     * the textblock for nested cases (cursor in `listItem > paragraph` targets
+     * the listItem, not the paragraph) so Delete / Turn into operate on the
+     * "visual block" the user is editing.
+     */
+    openBlockContextMenu(anchor: HTMLElement): void;
     private buildItemMap;
     private resolveNames;
     private getFormatItems;
@@ -168,12 +217,48 @@ declare class DomternalBubbleMenuComponent implements OnDestroy {
     private filterBySchema;
     private buildBubbleDefaults;
     private setupItemTracking;
+    /**
+     * Refresh state for the optional trailing buttons (A color trigger,
+     * "..." block menu) and the isNodeSelection flag. Called from both
+     * setupItemTracking init and the per-transaction handler so the two
+     * paths stay in sync.
+     */
+    private syncTrailingButtonsState;
+    /**
+     * Disable the "..." trigger when the selection spans more than one
+     * top-level block. The block context menu targets the block at $from, so
+     * a multi-block selection has no unambiguous target.
+     */
+    private syncBlockMenuButtonState;
+    /**
+     * Update the trigger's indicator colors to mirror the current selection.
+     * Used by the "A" button so the underline matches whatever the user has
+     * applied at the cursor (Notion-style live preview).
+     */
+    private syncColorTriggerState;
     private updateContextItems;
     private updateStates;
+    asButton(item: BubbleMenuItem): ToolbarButton;
+    asDropdown(item: BubbleMenuItem): ToolbarDropdown;
+    isDropdownActive(dropdown: ToolbarDropdown): boolean;
+    /** Trigger HTML: swap icon to the active child when `dynamicIcon` is set. */
+    getDropdownTriggerHtml(dropdown: ToolbarDropdown): SafeHtml;
+    getCachedItemContent(iconName: string, label: string): SafeHtml;
+    isSubItemActive(name: string): boolean;
+    onDropdownToggle(dropdown: ToolbarDropdown, event?: MouseEvent): void;
+    onDropdownItemClick(item: ToolbarButton): void;
+    private cleanupDropdown;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DomternalBubbleMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DomternalBubbleMenuComponent, "domternal-bubble-menu", never, { "editor": { "alias": "editor"; "required": true; "isSignal": true; }; "shouldShow": { "alias": "shouldShow"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "updateDelay": { "alias": "updateDelay"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "contexts": { "alias": "contexts"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DomternalBubbleMenuComponent, "domternal-bubble-menu", never, { "editor": { "alias": "editor"; "required": true; "isSignal": true; }; "shouldShow": { "alias": "shouldShow"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "updateDelay": { "alias": "updateDelay"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "contexts": { "alias": "contexts"; "required": false; "isSignal": true; }; "icons": { "alias": "icons"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Block-insert floating menu for Angular.
+ *
+ * Renders defaults collected from the editor's extensions via
+ * `addFloatingMenuItems()`; use `items` to override the list and `icons`
+ * to swap the icon set.
+ */
 declare class DomternalFloatingMenuComponent implements OnDestroy {
     readonly editor: _angular_core.InputSignal<Editor>;
     readonly shouldShow: _angular_core.InputSignal<(props: {
@@ -182,12 +267,38 @@ declare class DomternalFloatingMenuComponent implements OnDestroy {
         state: prosemirror_state.EditorState;
     }) => boolean>;
     readonly offset: _angular_core.InputSignal<number>;
+    readonly items: _angular_core.InputSignal<FloatingMenuItemsOverride>;
+    readonly keymap: _angular_core.InputSignal<FloatingMenuKeymap>;
+    readonly icons: _angular_core.InputSignal<IconSet>;
+    /**
+     * When true, the menu does NOT auto-show on every empty paragraph;
+     * it only opens when the BlockHandle `+` button (or any caller of
+     * `showFloatingMenu`) explicitly triggers it. Notion-style behaviour
+     * - empty rows show a placeholder, the slash menu is the keyboard
+     * trigger, the `+` button is the gutter trigger.
+     * @default false
+     */
+    readonly requireExplicitTrigger: _angular_core.InputSignal<boolean>;
     private menuEl;
+    private ngZone;
+    private sanitizer;
     private pluginKey;
+    private controller;
+    private version;
+    private iconCache;
+    readonly groups: _angular_core.Signal<_domternal_core.FloatingMenuGroup[]>;
+    private flatNames;
+    private focusedIndex;
     constructor();
     ngOnDestroy(): void;
+    flatIndexOf(name: string): number;
+    tabIndexFor(name: string): 0 | -1;
+    isItemDisabled(item: FloatingMenuItem): boolean;
+    iconHtml(name?: string): SafeHtml | null;
+    onItemClick(item: FloatingMenuItem): void;
+    onKeyDown(e: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DomternalFloatingMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DomternalFloatingMenuComponent, "domternal-floating-menu", never, { "editor": { "alias": "editor"; "required": true; "isSignal": true; }; "shouldShow": { "alias": "shouldShow"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DomternalFloatingMenuComponent, "domternal-floating-menu", never, { "editor": { "alias": "editor"; "required": true; "isSignal": true; }; "shouldShow": { "alias": "shouldShow"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "keymap": { "alias": "keymap"; "required": false; "isSignal": true; }; "icons": { "alias": "icons"; "required": false; "isSignal": true; }; "requireExplicitTrigger": { "alias": "requireExplicitTrigger"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface EmojiPickerItem {
@@ -233,5 +344,48 @@ declare class DomternalEmojiPickerComponent implements OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DomternalEmojiPickerComponent, "domternal-emoji-picker", never, { "editor": { "alias": "editor"; "required": true; "isSignal": true; }; "emojis": { "alias": "emojis"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { DEFAULT_EXTENSIONS, DomternalBubbleMenuComponent, DomternalEditorComponent, DomternalEmojiPickerComponent, DomternalFloatingMenuComponent, DomternalToolbarComponent };
+declare class DomternalNotionColorPickerComponent implements OnDestroy {
+    readonly editor: _angular_core.InputSignal<Editor>;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly currentTextToken: _angular_core.WritableSignal<string>;
+    readonly currentBgToken: _angular_core.WritableSignal<string>;
+    readonly palette: _angular_core.WritableSignal<string[]>;
+    private anchorEl;
+    private panelEl;
+    private ngZone;
+    private elRef;
+    private eventHandler;
+    private clickOutsideHandler;
+    private keydownHandler;
+    private selectionHandler;
+    private cleanupFloating;
+    constructor();
+    ngOnDestroy(): void;
+    tokenLabel(token: string): string;
+    applyText(token: string | null): void;
+    applyBg(token: string | null): void;
+    /**
+     * Arrow-key navigation across the 5-column swatch grids. Arrows move
+     * within and across rows, Home/End jump to grid boundaries, Tab leaves
+     * the picker (browser default), Enter/Space activates the focused swatch.
+     * Focus moves sequentially through Text color → Background color so
+     * keyboard users can reach any swatch without re-grabbing Tab.
+     */
+    onPanelKeydown(event: KeyboardEvent): void;
+    close(opts?: {
+        refocus?: boolean;
+    }): void;
+    private setupEventListener;
+    private addGlobalListeners;
+    private removeGlobalListeners;
+    private syncFromSelection;
+    private readPalette;
+    private getStorage;
+    private setStorageOpen;
+    private cleanup;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DomternalNotionColorPickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DomternalNotionColorPickerComponent, "domternal-notion-color-picker", never, { "editor": { "alias": "editor"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { DEFAULT_EXTENSIONS, DomternalBubbleMenuComponent, DomternalEditorComponent, DomternalEmojiPickerComponent, DomternalFloatingMenuComponent, DomternalNotionColorPickerComponent, DomternalToolbarComponent };
 export type { EmojiPickerItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domternal/angular",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Angular components for Domternal editor",
   "author": "https://github.com/ThomasNowHere",
   "license": "MIT",
@@ -16,7 +16,8 @@
   "peerDependencies": {
     "@angular/core": ">=17.1.0",
     "@angular/forms": ">=17.1.0",
-    "@domternal/core": ">=0.6.1"
+    "@domternal/core": ">=0.7.0",
+    "@domternal/extension-block-menu": ">=0.7.0"
   },
   "files": [
     "dist"
@@ -41,6 +42,7 @@
   },
   "homepage": "https://domternal.dev",
   "scripts": {
-    "build": "ng-packagr -p ng-package.json"
+    "build": "ng-packagr -p ng-package.json",
+    "lint": "eslint src"
   }
 }