@flogeez/angular-tiptap-editor 3.4.4 → 3.4.6

package/lib/components/editor/angular-tiptap-editor.component.d.ts

@@ -26,38 +26,39 @@ export declare class AngularTiptapEditorComponent implements AfterViewInit, OnDe
     config: import("@angular/core").InputSignal<AteEditorConfig>;
     content: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string | undefined>;
-    editable: import("@angular/core").InputSignal<boolean | undefined>;
-    disabled: import("@angular/core").InputSignal<boolean | undefined>;
+    editable: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    disabled: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
     minHeight: import("@angular/core").InputSignal<string | number | undefined>;
     height: import("@angular/core").InputSignal<string | number | undefined>;
     maxHeight: import("@angular/core").InputSignal<string | number | undefined>;
-    fillContainer: import("@angular/core").InputSignal<boolean | undefined>;
-    showToolbar: import("@angular/core").InputSignal<boolean | undefined>;
-    showFooter: import("@angular/core").InputSignal<boolean | undefined>;
-    showCharacterCount: import("@angular/core").InputSignal<boolean | undefined>;
-    showWordCount: import("@angular/core").InputSignal<boolean | undefined>;
+    fillContainer: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    showToolbar: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    showFooter: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    showCharacterCount: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    showWordCount: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
     maxCharacters: import("@angular/core").InputSignal<number | undefined>;
-    enableOfficePaste: import("@angular/core").InputSignal<boolean | undefined>;
-    enableSlashCommands: import("@angular/core").InputSignal<boolean | undefined>;
+    enableOfficePaste: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    enableSlashCommands: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
     slashCommands: import("@angular/core").InputSignal<AteSlashCommandsConfig | undefined>;
     customSlashCommands: import("@angular/core").InputSignal<AteCustomSlashCommands | undefined>;
     blockControls: import("@angular/core").InputSignal<AteBlockControlsMode | undefined>;
     locale: import("@angular/core").InputSignal<SupportedLocale | undefined>;
     autofocus: import("@angular/core").InputSignal<AteAutofocusMode | undefined>;
-    seamless: import("@angular/core").InputSignal<boolean | undefined>;
-    floatingToolbar: import("@angular/core").InputSignal<boolean | undefined>;
-    showEditToggle: import("@angular/core").InputSignal<boolean | undefined>;
-    spellcheck: import("@angular/core").InputSignal<boolean | undefined>;
+    mode: import("@angular/core").InputSignal<"classic" | "seamless" | undefined>;
+    seamless: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    floatingToolbar: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    showEditToggle: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    spellcheck: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
     tiptapExtensions: import("@angular/core").InputSignal<(Mark<any, any> | Node<any, any> | Extension<any, any>)[] | undefined>;
     tiptapOptions: import("@angular/core").InputSignal<Partial<EditorOptions> | undefined>;
-    showBubbleMenu: import("@angular/core").InputSignal<boolean | undefined>;
+    showBubbleMenu: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
     bubbleMenu: import("@angular/core").InputSignal<Partial<AteBubbleMenuConfig> | undefined>;
-    showImageBubbleMenu: import("@angular/core").InputSignal<boolean | undefined>;
+    showImageBubbleMenu: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
     imageBubbleMenu: import("@angular/core").InputSignal<Partial<Partial<Record<"separator" | "alignLeft" | "alignCenter" | "alignRight" | "changeImage" | "downloadImage" | "resizeSmall" | "resizeMedium" | "resizeLarge" | "resizeOriginal" | "deleteImage", boolean>>> | undefined>;
     toolbar: import("@angular/core").InputSignal<Partial<AteToolbarConfig> | undefined>;
-    showTableBubbleMenu: import("@angular/core").InputSignal<boolean | undefined>;
+    showTableBubbleMenu: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
     tableBubbleMenu: import("@angular/core").InputSignal<Partial<Partial<Record<"addColumnBefore" | "addColumnAfter" | "deleteColumn" | "addRowBefore" | "addRowAfter" | "deleteRow" | "deleteTable" | "toggleHeaderColumn" | "toggleHeaderRow" | "separator", boolean>>> | undefined>;
-    showCellBubbleMenu: import("@angular/core").InputSignal<boolean | undefined>;
+    showCellBubbleMenu: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
     cellBubbleMenu: import("@angular/core").InputSignal<Partial<Partial<Record<"mergeCells" | "splitCell", boolean>>> | undefined>;
     /**
      * Additionnal state calculators to extend the reactive editor state.
@@ -249,5 +250,5 @@ export declare class AngularTiptapEditorComponent implements AfterViewInit, OnDe
     private setupFormControlSubscription;
     onEditorClick(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AngularTiptapEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AngularTiptapEditorComponent, "angular-tiptap-editor", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "fillContainer": { "alias": "fillContainer"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; "isSignal": true; }; "showWordCount": { "alias": "showWordCount"; "required": false; "isSignal": true; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; "isSignal": true; }; "enableOfficePaste": { "alias": "enableOfficePaste"; "required": false; "isSignal": true; }; "enableSlashCommands": { "alias": "enableSlashCommands"; "required": false; "isSignal": true; }; "slashCommands": { "alias": "slashCommands"; "required": false; "isSignal": true; }; "customSlashCommands": { "alias": "customSlashCommands"; "required": false; "isSignal": true; }; "blockControls": { "alias": "blockControls"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "seamless": { "alias": "seamless"; "required": false; "isSignal": true; }; "floatingToolbar": { "alias": "floatingToolbar"; "required": false; "isSignal": true; }; "showEditToggle": { "alias": "showEditToggle"; "required": false; "isSignal": true; }; "spellcheck": { "alias": "spellcheck"; "required": false; "isSignal": true; }; "tiptapExtensions": { "alias": "tiptapExtensions"; "required": false; "isSignal": true; }; "tiptapOptions": { "alias": "tiptapOptions"; "required": false; "isSignal": true; }; "showBubbleMenu": { "alias": "showBubbleMenu"; "required": false; "isSignal": true; }; "bubbleMenu": { "alias": "bubbleMenu"; "required": false; "isSignal": true; }; "showImageBubbleMenu": { "alias": "showImageBubbleMenu"; "required": false; "isSignal": true; }; "imageBubbleMenu": { "alias": "imageBubbleMenu"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "showTableBubbleMenu": { "alias": "showTableBubbleMenu"; "required": false; "isSignal": true; }; "tableBubbleMenu": { "alias": "tableBubbleMenu"; "required": false; "isSignal": true; }; "showCellBubbleMenu": { "alias": "showCellBubbleMenu"; "required": false; "isSignal": true; }; "cellBubbleMenu": { "alias": "cellBubbleMenu"; "required": false; "isSignal": true; }; "stateCalculators": { "alias": "stateCalculators"; "required": false; "isSignal": true; }; "imageUpload": { "alias": "imageUpload"; "required": false; "isSignal": true; }; "imageUploadHandler": { "alias": "imageUploadHandler"; "required": false; "isSignal": true; }; "editorId": { "alias": "editorId"; "required": false; "isSignal": true; }; }, { "contentChange": "contentChange"; "editorCreated": "editorCreated"; "editorUpdate": "editorUpdate"; "editorFocus": "editorFocus"; "editorBlur": "editorBlur"; "editableChange": "editableChange"; "imageUploaded": "imageUploaded"; }, never, never, true, [{ directive: typeof i1.AteNoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AngularTiptapEditorComponent, "angular-tiptap-editor", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "fillContainer": { "alias": "fillContainer"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "showCharacterCount": { "alias": "showCharacterCount"; "required": false; "isSignal": true; }; "showWordCount": { "alias": "showWordCount"; "required": false; "isSignal": true; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; "isSignal": true; }; "enableOfficePaste": { "alias": "enableOfficePaste"; "required": false; "isSignal": true; }; "enableSlashCommands": { "alias": "enableSlashCommands"; "required": false; "isSignal": true; }; "slashCommands": { "alias": "slashCommands"; "required": false; "isSignal": true; }; "customSlashCommands": { "alias": "customSlashCommands"; "required": false; "isSignal": true; }; "blockControls": { "alias": "blockControls"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "seamless": { "alias": "seamless"; "required": false; "isSignal": true; }; "floatingToolbar": { "alias": "floatingToolbar"; "required": false; "isSignal": true; }; "showEditToggle": { "alias": "showEditToggle"; "required": false; "isSignal": true; }; "spellcheck": { "alias": "spellcheck"; "required": false; "isSignal": true; }; "tiptapExtensions": { "alias": "tiptapExtensions"; "required": false; "isSignal": true; }; "tiptapOptions": { "alias": "tiptapOptions"; "required": false; "isSignal": true; }; "showBubbleMenu": { "alias": "showBubbleMenu"; "required": false; "isSignal": true; }; "bubbleMenu": { "alias": "bubbleMenu"; "required": false; "isSignal": true; }; "showImageBubbleMenu": { "alias": "showImageBubbleMenu"; "required": false; "isSignal": true; }; "imageBubbleMenu": { "alias": "imageBubbleMenu"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "showTableBubbleMenu": { "alias": "showTableBubbleMenu"; "required": false; "isSignal": true; }; "tableBubbleMenu": { "alias": "tableBubbleMenu"; "required": false; "isSignal": true; }; "showCellBubbleMenu": { "alias": "showCellBubbleMenu"; "required": false; "isSignal": true; }; "cellBubbleMenu": { "alias": "cellBubbleMenu"; "required": false; "isSignal": true; }; "stateCalculators": { "alias": "stateCalculators"; "required": false; "isSignal": true; }; "imageUpload": { "alias": "imageUpload"; "required": false; "isSignal": true; }; "imageUploadHandler": { "alias": "imageUploadHandler"; "required": false; "isSignal": true; }; "editorId": { "alias": "editorId"; "required": false; "isSignal": true; }; }, { "contentChange": "contentChange"; "editorCreated": "editorCreated"; "editorUpdate": "editorUpdate"; "editorFocus": "editorFocus"; "editorBlur": "editorBlur"; "editableChange": "editableChange"; "imageUploaded": "imageUploaded"; }, never, never, true, [{ directive: typeof i1.AteNoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
 }

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

@@ -11,12 +11,12 @@ import * as i0 from "@angular/core";
 export declare class AteTableOfContentsComponent implements OnDestroy {
     editor: import("@angular/core").InputSignal<string | Editor | AteEditorRef | null | undefined>;
     title: import("@angular/core").InputSignal<string | null>;
-    showTitle: import("@angular/core").InputSignal<boolean>;
-    floating: import("@angular/core").InputSignal<boolean>;
+    showTitle: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    floating: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     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>;
+    hoverExpand: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     maxDepth: import("@angular/core").InputSignalWithTransform<number, string | number>;
     private readonly registry;
     private readonly i18n;

package/lib/components/ui/ate-button.component.d.ts

@@ -11,8 +11,8 @@ export interface AteButtonConfig {
 export declare class AteButtonComponent {
     icon: import("@angular/core").InputSignal<string>;
     title: import("@angular/core").InputSignal<string>;
-    active: import("@angular/core").InputSignal<boolean>;
-    disabled: import("@angular/core").InputSignal<boolean>;
+    active: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     color: import("@angular/core").InputSignal<string | undefined>;
     backgroundColor: import("@angular/core").InputSignal<string | undefined>;
     variant: import("@angular/core").InputSignal<"text" | "default" | "danger">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flogeez/angular-tiptap-editor",
-  "version": "3.4.4",
+  "version": "3.4.6",
   "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;
+}