@flogeez/angular-tiptap-editor 3.4.3 → 3.4.5

package/lib/components/table-of-contents/ate-table-of-contents.component.d.ts

@@ -13,6 +13,7 @@ export declare class AteTableOfContentsComponent implements OnDestroy {
     title: import("@angular/core").InputSignal<string | null>;
     showTitle: import("@angular/core").InputSignal<boolean>;
     floating: import("@angular/core").InputSignal<boolean>;
+    positionMode: import("@angular/core").InputSignal<"fixed" | "absolute">;
     position: import("@angular/core").InputSignal<"left" | "right">;
     variant: import("@angular/core").InputSignal<AteTocVariant>;
     hoverExpand: import("@angular/core").InputSignal<boolean>;
@@ -38,5 +39,5 @@ export declare class AteTableOfContentsComponent implements OnDestroy {
     private updateHeadings;
     private checkActiveHeading;
     static ɵfac: i0.ɵɵFactoryDeclaration<AteTableOfContentsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AteTableOfContentsComponent, "ate-table-of-contents", never, { "editor": { "alias": "editor"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "showTitle": { "alias": "showTitle"; "required": false; "isSignal": true; }; "floating": { "alias": "floating"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "hoverExpand": { "alias": "hoverExpand"; "required": false; "isSignal": true; }; "maxDepth": { "alias": "maxDepth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AteTableOfContentsComponent, "ate-table-of-contents", never, { "editor": { "alias": "editor"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "showTitle": { "alias": "showTitle"; "required": false; "isSignal": true; }; "floating": { "alias": "floating"; "required": false; "isSignal": true; }; "positionMode": { "alias": "positionMode"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "hoverExpand": { "alias": "hoverExpand"; "required": false; "isSignal": true; }; "maxDepth": { "alias": "maxDepth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/models/ate-toc.model.d.ts

@@ -18,6 +18,7 @@ export interface AteTocItem {
 export interface AteTocConfig {
     enabled?: boolean;
     floating?: boolean;
+    positionMode?: "absolute" | "fixed";
     position?: "left" | "right";
     variant?: AteTocVariant;
     hoverExpand?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flogeez/angular-tiptap-editor",
-  "version": "3.4.3",
+  "version": "3.4.5",
   "description": "A modern, customizable rich-text editor for Angular (18+), built with Tiptap and featuring complete internationalization support",
   "keywords": [
     "angular",
@@ -44,7 +44,11 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
+  "style": "styles/index.css",
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
   "module": "fesm2022/flogeez-angular-tiptap-editor.mjs",
   "typings": "index.d.ts",
   "exports": {

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

@@ -0,0 +1,48 @@
+/* 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-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;
+}
+
+/* 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);
+  background: var(--ate-menu-bg, rgb(255, 255, 255)) !important;
+  border: 1px solid var(--ate-menu-border, rgba(0, 0, 0, 0.1));
+  border-radius: var(--ate-menu-border-radius, 12px);
+  padding: var(--ate-menu-padding, 4px);
+  box-shadow: var(--ate-menu-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
+  z-index: 1000;
+  animation: slideUp 0.18s cubic-bezier(0, 0, 0.2, 1);
+  white-space: nowrap;
+}
+
+/* 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;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/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/styles/ate-variables.global.css

@@ -0,0 +1,173 @@
+/* ==========================================================================
+   Full Design Tokens & CSS Custom Properties for angular-tiptap-editor
+   ========================================================================== */
+:root {
+  /* ===== BASE TOKENS ===== */
+  --ate-primary: #2563eb;
+  --ate-primary-hover: #153ca9;
+  --ate-primary-contrast: #ffffff;
+  --ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 90%);
+  --ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 95%);
+  --ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 85%);
+
+  --ate-surface: #ffffff;
+  --ate-surface-secondary: #f8f9fa;
+  --ate-surface-tertiary: #f1f5f9;
+  --ate-surface-hover: rgba(37, 99, 235, 0.05);
+
+  --ate-text: #2d3748;
+  --ate-text-primary: #1e293b;
+  --ate-text-secondary: #64748b;
+  --ate-text-muted: #a0aec0;
+
+  --ate-border: #e2e8f0;
+
+  --ate-highlight-bg: #fef08a;
+  --ate-highlight-color: #854d0e;
+
+  --ate-button-hover: #f1f5f9;
+  --ate-button-active: #e2e8f0;
+
+  --ate-selection-bg: var(--ate-primary-light-alpha);
+
+  --ate-error-color: #c53030;
+  --ate-error-bg: #fed7d7;
+  --ate-error-border: #feb2b2;
+
+  /* ===== COMPONENT TOKENS ===== */
+  --ate-border-color: var(--ate-border);
+  --ate-border-width: 2px;
+  --ate-border-radius: 12px;
+  --ate-sub-border-radius: 8px;
+  --ate-focus-color: var(--ate-primary);
+  --ate-background: var(--ate-surface);
+
+  /* Content */
+  --ate-text-color: var(--ate-text);
+  --ate-placeholder-color: var(--ate-text-muted);
+  --ate-line-height: 1.6;
+  --ate-content-padding-block: 16px;
+  --ate-content-padding-inline: 16px;
+  --ate-content-gutter: 0px;
+
+  /* Menus (Slash/Bubble/TOC) */
+  --ate-menu-bg: var(--ate-surface);
+  --ate-menu-border-radius: var(--ate-border-radius);
+  --ate-menu-border: var(--ate-border);
+  --ate-menu-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --ate-menu-padding: 4px;
+  --ate-menu-gap: 2px;
+
+  /* Toolbar */
+  --ate-toolbar-padding: var(--ate-menu-padding);
+  --ate-toolbar-gap: var(--ate-menu-gap);
+  --ate-toolbar-background: var(--ate-surface-secondary);
+  --ate-toolbar-border-color: var(--ate-border);
+  --ate-toolbar-button-color: var(--ate-text-secondary);
+  --ate-toolbar-button-hover-background: transparent;
+  --ate-toolbar-button-active-background: var(--ate-primary-light);
+  --ate-toolbar-button-active-color: var(--ate-primary);
+
+  /* Counter & Footer */
+  --ate-counter-color: var(--ate-text-secondary);
+  --ate-counter-background: var(--ate-surface-secondary);
+  --ate-counter-border-color: var(--ate-border);
+
+  /* Table of Contents (TOC) */
+  --ate-toc-width: 240px;
+  --ate-toc-gap: 2px;
+  --ate-toc-item-height: 16px;
+  --ate-toc-item-hover-height: 24px;
+  --ate-toc-border-radius: var(--ate-border-radius);
+  --ate-toc-padding: var(--ate-menu-padding);
+  --ate-toc-hitbox-padding: 16px;
+  --ate-toc-hitbox-padding-vertical: 8px;
+
+  /* Drag & Drop */
+  --ate-drag-background: #f0f8ff;
+  --ate-drag-border-color: var(--ate-primary);
+
+  /* Blockquote */
+  --ate-blockquote-border-color: var(--ate-border);
+  --ate-blockquote-background: var(--ate-surface-secondary);
+
+  /* Code */
+  --ate-code-background: var(--ate-surface-secondary);
+  --ate-code-color: var(--ate-text);
+  --ate-code-border-color: var(--ate-border);
+
+  --ate-code-block-background: #0f172a;
+  --ate-code-block-color: #e2e8f0;
+  --ate-code-block-border-color: var(--ate-border);
+
+  /* Images */
+  --ate-image-border-radius: 16px;
+  --ate-image-selected-color: var(--ate-primary);
+
+  /* Scrollbars */
+  --ate-scrollbar-width: 10px;
+  --ate-scrollbar-thumb: var(--ate-border);
+  --ate-scrollbar-thumb-hover: var(--ate-text-muted);
+  --ate-scrollbar-track: transparent;
+
+  /* Tables */
+  --ate-table-border-color: var(--ate-border);
+  --ate-table-header-background: var(--ate-surface-secondary);
+  --ate-table-header-color: var(--ate-text);
+  --ate-table-cell-background: var(--ate-surface);
+  --ate-table-cell-selected-background: var(--ate-primary-light);
+  --ate-table-resize-handle-color: var(--ate-primary);
+  --ate-table-row-hover-background: var(--ate-primary-lighter);
+
+  /* Floating UI & Tooltips */
+  --ate-tooltip-bg: var(--ate-code-block-background, #0f172a);
+  --ate-tooltip-color: var(--ate-code-block-color, #e2e8f0);
+}
+
+/* Dark mode global theme support */
+.dark,
+:root.dark,
+body.dark,
+:root[data-theme="dark"],
+[data-theme="dark"] {
+  --ate-primary: #3b82f6;
+  --ate-primary-contrast: #ffffff;
+  --ate-primary-light: color-mix(in srgb, var(--ate-primary), transparent 85%);
+  --ate-primary-lighter: color-mix(in srgb, var(--ate-primary), transparent 92%);
+  --ate-primary-light-alpha: color-mix(in srgb, var(--ate-primary), transparent 80%);
+
+  --ate-surface: #020617;
+  --ate-surface-secondary: #0f172a;
+  --ate-surface-tertiary: #1e293b;
+  --ate-surface-hover: rgba(59, 130, 246, 0.1);
+
+  --ate-text: #f8fafc;
+  --ate-text-primary: #f8fafc;
+  --ate-text-secondary: #94a3b8;
+  --ate-text-muted: #64748b;
+
+  --ate-border: #1e293b;
+
+  --ate-highlight-bg: #854d0e;
+  --ate-highlight-color: #fef08a;
+
+  --ate-button-hover: #1e293b;
+  --ate-button-active: #0f172a;
+
+  --ate-menu-border: rgba(255, 255, 255, 0.1);
+  --ate-menu-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+
+  --ate-error-color: #f87171;
+  --ate-error-bg: #450a0a;
+  --ate-error-border: #7f1d1d;
+
+  --ate-drag-background: var(--ate-surface-tertiary);
+  --ate-drag-border-color: var(--ate-primary);
+  --ate-blockquote-border-color: var(--ate-primary);
+  --ate-toolbar-button-active-background: var(--ate-primary-light);
+  --ate-toolbar-button-active-color: var(--ate-primary);
+  --ate-button-hover: var(--ate-surface-tertiary);
+  --ate-button-active: var(--ate-surface-secondary);
+  --ate-scrollbar-thumb: var(--ate-surface-tertiary);
+  --ate-scrollbar-thumb-hover: var(--ate-text-muted);
+}

package/styles/index.css

@@ -0,0 +1,42 @@
+@import "./ate-variables.global.css";
+@import "./ate-bubble-menu.global.css";
+@import "./ate-tooltip.global.css";
+@import "./material-symbols.css";
+
+/* Styles for links */
+.ate-link {
+  color: var(--ate-primary, #2563eb);
+  text-decoration: underline;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.ate-link:hover {
+  color: var(--ate-primary-hover, #153ca9);
+  text-decoration: underline;
+}
+
+/* Styles for highlight */
+.ate-highlight {
+  background-color: var(--ate-highlight-bg, #fef08a);
+  padding: 0.1em 0.2em;
+  border-radius: 2px;
+  color: var(--ate-highlight-color, #854d0e);
+}
+
+/* Styles for text alignment - Tiptap uses classes */
+.ProseMirror .has-text-align-left {
+  text-align: left;
+}
+
+.ProseMirror .has-text-align-center {
+  text-align: center;
+}
+
+.ProseMirror .has-text-align-right {
+  text-align: right;
+}
+
+.ProseMirror .has-text-align-justify {
+  text-align: justify;
+}

package/styles/material-symbols.css

@@ -0,0 +1,21 @@
+.material-symbols-outlined {
+  font-family: "Material Symbols Outlined";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: "liga";
+  -webkit-font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings:
+    "FILL" 0,
+    "wght" 400,
+    "GRAD" 0,
+    "opsz" 24;
+}