@flogeez/angular-tiptap-editor 3.0.2 → 3.0.3

package/index.d.ts

@@ -5,8 +5,26 @@ import { Editor, NodeConfig, Extension, Node as Node$2, Mark, EditorOptions, JSO
 import { Observable } from 'rxjs';
 import { Node as Node$1 } from '@tiptap/pm/model';
 import { ControlValueAccessor } from '@angular/forms';
+import * as _popperjs_core from '@popperjs/core';
 import { Decoration, EditorView, NodeView } from '@tiptap/pm/view';
 
+/**
+ * Interface representing a single item in the slash commands menu.
+ */
+interface AteSlashCommandItem {
+    title: string;
+    description: string;
+    icon: string;
+    keywords: string[];
+    command: (editor: Editor) => void;
+}
+/**
+ * Custom slash commands configuration.
+ */
+interface AteCustomSlashCommands {
+    commands?: AteSlashCommandItem[];
+}
+
 type SupportedLocale = "en" | "fr" | (string & {});
 interface AteTranslations {
     toolbar: {
@@ -409,17 +427,6 @@ declare class AteI18nService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<AteI18nService>;
 }
 
-interface AteSlashCommandItem {
-    title: string;
-    description: string;
-    icon: string;
-    keywords: string[];
-    command: (editor: Editor) => void;
-}
-interface AteCustomSlashCommands {
-    commands?: AteSlashCommandItem[];
-}
-
 type AteStateCalculator = (editor: Editor) => Partial<{
     [K in keyof AteEditorStateSnapshot]: AteEditorStateSnapshot[K] extends object ? Partial<AteEditorStateSnapshot[K]> : AteEditorStateSnapshot[K];
 }>;
@@ -1275,6 +1282,35 @@ declare class AngularTiptapEditorComponent implements AfterViewInit, OnDestroy {
  */
 declare function provideAteEditor(config?: AteEditorConfig): EnvironmentProviders;
 
+declare class AteTooltipDirective implements OnDestroy {
+    private readonly el;
+    private tippyInstance;
+    content: _angular_core.InputSignal<string | null>;
+    placement: _angular_core.InputSignal<_popperjs_core.Placement>;
+    delay: _angular_core.InputSignal<number | [number, number]>;
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Computed logic for ARIA shortcuts.
+     */
+    protected readonly ariaShortcut: _angular_core.Signal<string | null>;
+    /**
+     * Computed logic for Tippy content.
+     * Includes strict escaping of dynamic content to prevent XSS.
+     */
+    private readonly processedTooltip;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Basic HTML escaping for security.
+     * Effectively neutralizes scripts or malicious HTML tags.
+     */
+    private escapeHtml;
+    private initTippy;
+    private destroyTippy;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AteTooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AteTooltipDirective, "[ateTooltip]", never, { "content": { "alias": "ateTooltip"; "required": false; "isSignal": true; }; "placement": { "alias": "ateTooltipPlacement"; "required": false; "isSignal": true; }; "delay": { "alias": "ateTooltipDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "ateTooltipDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare class AteImageService {
     /** Signals for image state */
     selectedImage: _angular_core.WritableSignal<AteImageData | null>;
@@ -1661,5 +1697,5 @@ declare function createAngularComponentExtension<T = unknown>(injector: Injector
  */
 declare function registerAngularComponent<T = unknown>(injectorOrOptions: Injector | RegisterAngularComponentOptions<T>, maybeOptions?: RegisterAngularComponentOptions<T>): Node$2;
 
-export { ATE_BUBBLE_MENU_KEYS, ATE_CELL_BUBBLE_MENU_KEYS, ATE_DEFAULT_BUBBLE_MENU_CONFIG, ATE_DEFAULT_CELL_MENU_CONFIG, ATE_DEFAULT_CONFIG, ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ATE_DEFAULT_IMAGE_UPLOAD_CONFIG, ATE_DEFAULT_SLASH_COMMANDS_CONFIG, ATE_DEFAULT_TABLE_MENU_CONFIG, ATE_DEFAULT_TOOLBAR_CONFIG, ATE_GLOBAL_CONFIG, ATE_IMAGE_BUBBLE_MENU_KEYS, ATE_INITIAL_EDITOR_STATE, ATE_SLASH_COMMAND_KEYS, ATE_TABLE_BUBBLE_MENU_KEYS, ATE_TOOLBAR_KEYS, AngularTiptapEditorComponent, AteAngularNodeView, AteColorPickerService, AteDiscoveryCalculator, AteEditorCommandsService, AteI18nService, AteImageCalculator, AteImageService, AteLinkService, AteMarksCalculator, AteNodeViewRenderer, AteNoopValueAccessorDirective, AteSelectionCalculator, AteStructureCalculator, AteTableCalculator, createAngularComponentExtension, createDefaultSlashCommands, filterSlashCommands, provideAteEditor, registerAngularComponent };
+export { ATE_BUBBLE_MENU_KEYS, ATE_CELL_BUBBLE_MENU_KEYS, ATE_DEFAULT_BUBBLE_MENU_CONFIG, ATE_DEFAULT_CELL_MENU_CONFIG, ATE_DEFAULT_CONFIG, ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ATE_DEFAULT_IMAGE_UPLOAD_CONFIG, ATE_DEFAULT_SLASH_COMMANDS_CONFIG, ATE_DEFAULT_TABLE_MENU_CONFIG, ATE_DEFAULT_TOOLBAR_CONFIG, ATE_GLOBAL_CONFIG, ATE_IMAGE_BUBBLE_MENU_KEYS, ATE_INITIAL_EDITOR_STATE, ATE_SLASH_COMMAND_KEYS, ATE_TABLE_BUBBLE_MENU_KEYS, ATE_TOOLBAR_KEYS, AngularTiptapEditorComponent, AteAngularNodeView, AteColorPickerService, AteDiscoveryCalculator, AteEditorCommandsService, AteI18nService, AteImageCalculator, AteImageService, AteLinkService, AteMarksCalculator, AteNodeViewRenderer, AteNoopValueAccessorDirective, AteSelectionCalculator, AteStructureCalculator, AteTableCalculator, AteTooltipDirective, createAngularComponentExtension, createDefaultSlashCommands, filterSlashCommands, provideAteEditor, registerAngularComponent };
 export type { AteAngularNode, AteBubbleMenuConfig, AteBubbleMenuKey, AteCellBubbleMenuConfig, AteCellBubbleMenuKey, AteColorEditMode, AteColorPickerSelection, AteComponentRenderOptions, AteCustomBubbleMenuItem, AteCustomSlashCommands, AteCustomToolbarItem, AteEditorConfig, AteEditorStateSnapshot, AteImageBubbleMenuConfig, AteImageBubbleMenuKey, AteImageData, AteImageUploadConfig, AteImageUploadContext, AteImageUploadHandler, AteImageUploadHandlerResult, AteImageUploadOptions, AteImageUploadResult, AteResizeOptions, AteSlashCommandItem, AteSlashCommandKey, AteSlashCommandsConfig, AteStateCalculator, AteTableBubbleMenuConfig, AteTableBubbleMenuKey, AteToolbarConfig, AteToolbarKey, AteTranslations, RegisterAngularComponentOptions, SupportedLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flogeez/angular-tiptap-editor",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "A modern, customizable rich-text editor for Angular (18+), built with Tiptap and featuring complete internationalization support",
   "keywords": [
     "angular",

package/src/lib/styles/ate-bubble-menu.global.css

@@ -1,17 +1,20 @@
-/* Styles globaux pour les menus contextuels Tiptap */
-.tippy-box {
-  /* Par défaut Tippy limite à 350px */
+/* Global styles for Tiptap bubble menus & Slash menu */
+.tippy-box[data-theme~="ate-bubble-menu"],
+.tippy-box[data-theme~="slash-menu"] {
+  /* Default Tippy limits to 350px */
   max-width: none !important;
   background: transparent !important;
   box-shadow: none !important;
 }
 
-.tippy-content {
-  /* Le container interne ne doit pas rajouter de padding, on gère dans .bubble-menu */
-  padding: 0;
+.tippy-box[data-theme~="ate-bubble-menu"] .tippy-content,
+.tippy-box[data-theme~="slash-menu"] .tippy-content {
+  /* Internal container shouldn't add padding, we handle it in .bubble-menu or .slash-commands-menu */
+  padding: 0 !important;
 }
 
-.tippy-box .bubble-menu {
+/* Scoped bubble-menu styles - Restoring original design exactly as requested */
+.tippy-box[data-theme~="ate-bubble-menu"] .bubble-menu {
   display: flex !important;
   align-items: center;
   gap: var(--ate-menu-gap, 2px);
@@ -25,8 +28,9 @@
   white-space: nowrap;
 }
 
-/* Cache le menu intelligemment si la source (le slash) est scrollée hors vue */
-.tippy-box[data-reference-hidden] {
+/* Hidden state when reference scrolls out of view */
+.tippy-box[data-theme~="ate-bubble-menu"][data-reference-hidden],
+.tippy-box[data-theme~="slash-menu"][data-reference-hidden] {
   opacity: 0 !important;
   transition: opacity 0.18s cubic-bezier(0, 0, 0.2, 1);
   pointer-events: none !important;

package/src/lib/styles/ate-tooltip.global.css

@@ -0,0 +1,47 @@
+/* ate-tooltip tippy theme */
+.tippy-box[data-theme~="ate-tooltip"] {
+  background-color: var(--ate-tooltip-bg, #0f172a);
+  color: var(--ate-tooltip-color, #e2e8f0);
+  border-radius: var(--ate-sub-border-radius, 6px);
+  font-size: 12px;
+  line-height: 1.4;
+  padding: 0;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  pointer-events: none;
+  transition: opacity 0.1s ease-out;
+  text-align: center;
+}
+
+.tippy-box[data-theme~="ate-tooltip"] .tippy-content {
+  padding: 4px 6px;
+}
+
+/* Multi-line support */
+.tippy-box[data-theme~="ate-tooltip"] .ate-tooltip-label {
+  display: block;
+  color: var(--ate-tooltip-color, #e2e8f0);
+}
+
+.tippy-box[data-theme~="ate-tooltip"] .ate-tooltip-shortcut {
+  display: block;
+  font-size: 10px;
+  opacity: 0.6;
+  margin-top: 2px;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+}
+
+.tippy-box[data-theme~="ate-tooltip"] .ate-tooltip-shortcut kbd {
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+}
+
+/* Visibility state */
+.tippy-box[data-theme~="ate-tooltip"][data-state="hidden"] {
+  opacity: 0;
+}

package/src/lib/styles/index.css

@@ -1,4 +1,5 @@
 @import "./ate-bubble-menu.global.css";
+@import "./ate-tooltip.global.css";
 @import "./material-symbols.css";
 
 /* Styles for links */