@flogeez/angular-tiptap-editor 3.5.2 → 3.5.3

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

@@ -9,7 +9,7 @@ import { AteSlashCommandsConfig } from "../../config/ate-slash-commands.config";
 import { AteToolbarConfig } from "../../models/ate-toolbar.model";
 import { AteBubbleMenuConfig } from "../../models/ate-bubble-menu.model";
 import { AteEditorConfig, AteAngularNode, AteBlockControlsMode, AteAutofocusMode } from "../../models/ate-editor-config.model";
-import { AteImageUploadHandler, AteImageUploadOptions, AteImageUploadResult } from "../../models/ate-image.model";
+import { AteImageUploadHandler, AteImageUploadOptions, AteImageUploadResult, AtePastedImageRejection } from "../../models/ate-image.model";
 import { SupportedLocale } from "../../i18n/ateTranslationsModel";
 import * as i0 from "@angular/core";
 import * as i1 from "../../directives/ate-noop-value-accessor.directive";
@@ -106,6 +106,8 @@ export declare class AngularTiptapEditorComponent implements AfterViewInit, OnDe
     }>;
     editableChange: import("@angular/core").OutputEmitterRef<boolean>;
     imageUploaded: import("@angular/core").OutputEmitterRef<AteImageUploadResult>;
+    /** Emitted when an image from pasted HTML is dropped (unreachable source or failed upload) */
+    pastedImageRejected: import("@angular/core").OutputEmitterRef<AtePastedImageRejection>;
     editorElement: import("@angular/core").Signal<ElementRef<any>>;
     hideBubbleMenus(): void;
     showBubbleMenus(): void;
@@ -251,5 +253,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; }; "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: {}; }]>;
+    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"; "pastedImageRejected": "pastedImageRejected"; }, never, never, true, [{ directive: typeof i1.AteNoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
 }

package/lib/extensions/ate-pasted-image.extension.d.ts

@@ -0,0 +1,33 @@
+import { Extension } from "@tiptap/core";
+import { Slice } from "@tiptap/pm/model";
+import { AtePastedImageRejection } from "../models/ate-image.model";
+export type AtePastedImageSource = "remote" | "inline" | "unreachable";
+export interface AtePastedImageOptions {
+    /** Whether pasted base64 images should be sent to the upload handler */
+    shouldRehost: () => boolean;
+    /** Uploads a pasted base64 image and resolves to its hosted URL */
+    rehost: (file: File) => Promise<string>;
+    /** Called for every pasted image that could not be kept */
+    onRejected: (rejection: AtePastedImageRejection) => void;
+}
+/**
+ * Classifies the `src` of an image found in pasted HTML.
+ * `unreachable` sources (e.g. `attachment:`, `file:`, `cid:`, foreign `blob:`) cannot be fetched by the page.
+ */
+export declare function classifyPastedImageSrc(src: string | null | undefined, origin?: string): AtePastedImageSource;
+/** Decodes a base64 image data URI into a `File`, or returns `null` when it is malformed */
+export declare function dataUriToFile(src: string): File | null;
+/** Removes unreachable images from a pasted slice and lists the base64 sources it keeps */
+export declare function sanitizePastedImages(slice: Slice): {
+    slice: Slice;
+    inlineSources: string[];
+    droppedSources: string[];
+};
+/**
+ * Cleans images coming from pasted HTML (e.g. Notion, Google Docs, Office):
+ * - drops images whose source the page cannot load, instead of inserting broken images;
+ * - sends base64 images through the upload handler (when one is configured) and swaps in the hosted URL.
+ *
+ * File-based clipboard images keep going through the regular paste upload flow.
+ */
+export declare const AtePastedImage: Extension<AtePastedImageOptions, any>;

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

@@ -15,6 +15,15 @@ export interface AteImageUploadResult {
     height?: number;
     originalSize?: number;
 }
+/**
+ * Emitted when an image found in pasted HTML cannot be kept.
+ * - `unreachable`: the page cannot load its source (e.g. `attachment:`, `file:`, `cid:`, foreign `blob:`, malformed base64)
+ * - `upload-failed`: a pasted base64 image was rejected by validation or by the upload handler
+ */
+export interface AtePastedImageRejection {
+    reason: "unreachable" | "upload-failed";
+    src: string;
+}
 export interface AteResizeOptions {
     width?: number;
     height?: number;

package/lib/services/ate-editor-commands.service.d.ts

@@ -85,6 +85,8 @@ export declare class AteEditorCommandsService {
     downloadImage(editor: Editor): void;
     handleImageDrop(editor: Editor, event: DragEvent, options?: AteImageUploadOptions): boolean;
     handleImagePaste(editor: Editor, event: ClipboardEvent, options?: AteImageUploadOptions): boolean;
+    rehostImage(file: File, options?: AteImageUploadOptions): Promise<string>;
+    get hasUploadHandler(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<AteEditorCommandsService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AteEditorCommandsService>;
 }

package/lib/services/ate-image.service.d.ts

@@ -56,6 +56,13 @@ export declare class AteImageService {
     compressImage(file: File, quality?: number, maxWidth?: number, maxHeight?: number): Promise<AteImageUploadResult>;
     /** Core upload logic with progress tracking */
     private uploadImageWithProgress;
+    /** Validate, compress and (when configured) send an image to the upload handler */
+    private processImage;
+    /**
+     * Run an image that is already in the document (e.g. base64 from pasted HTML)
+     * through validation, compression and the upload handler, and resolve to its new `src`.
+     */
+    rehostImage(file: File, options?: AteImageUploadOptions): Promise<string>;
     private resetUploadState;
     /** Main entry point for file upload and insertion */
     uploadAndInsertImage(editor: Editor, file: File, options?: AteImageUploadOptions): Promise<void>;

package/package.json

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

package/public-api.d.ts

@@ -23,6 +23,7 @@ export * from "./lib/extensions/calculators/ate-marks.calculator";
 export * from "./lib/extensions/calculators/ate-selection.calculator";
 export * from "./lib/extensions/calculators/ate-structure.calculator";
 export * from "./lib/extensions/calculators/ate-table.calculator";
+export { AtePastedImage, classifyPastedImageSrc, dataUriToFile, sanitizePastedImages, type AtePastedImageOptions, type AtePastedImageSource, } from "./lib/extensions/ate-pasted-image.extension";
 export * from "./lib/models/ate-toolbar.model";
 export * from "./lib/models/ate-image.model";
 export * from "./lib/models/ate-bubble-menu.model";