@phuong-tran-redoc/document-engine-angular 0.0.41 → 0.1.1

package/index.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { OnInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges, Type, InjectionToken, AfterViewInit, ElementRef, Renderer2, ChangeDetectorRef, Injector, AfterContentInit, QueryList } from '@angular/core';
-import { IndentOptions, DynamicFieldOptions, DynamicFieldCategory as DynamicFieldCategory$1, RestrictedEditingOptions, TextCaseType, ListStyleType, Color, DynamicFieldItem as DynamicFieldItem$1 } from '@phuong-tran-redoc/document-engine-core';
+import { OnInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges, InjectionToken, AfterViewInit, ElementRef, Renderer2, ChangeDetectorRef, Type, Injector, AfterContentInit, QueryList } from '@angular/core';
+import { IndentOptions, DynamicFieldOptions, DynamicFieldCategory as DynamicFieldCategory$1, RestrictedEditingOptions, Color, TextCaseType, ListStyleType, DynamicFieldItem as DynamicFieldItem$1 } from '@phuong-tran-redoc/document-engine-core';
 import { BlockquoteOptions } from '@tiptap/extension-blockquote';
 import { BoldOptions } from '@tiptap/extension-bold';
 import { CodeOptions } from '@tiptap/extension-code';
@@ -19,10 +19,9 @@ import { UnderlineOptions } from '@tiptap/extension-underline';
 import { UndoRedoOptions, PlaceholderOptions, CharacterCountOptions } from '@tiptap/extensions';
 import { Editor, Content, EditorEvents, Extension } from '@tiptap/core';
 export { Editor } from '@tiptap/core';
-import * as i2 from '@angular/common';
-import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 import * as _angular_forms from '@angular/forms';
 import { ControlValueAccessor, ValidatorFn, FormControl } from '@angular/forms';
+import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 import { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
 import { Placement } from '@floating-ui/dom';
 import { SafeHtml } from '@angular/platform-browser';
@@ -55,6 +54,43 @@ type SelectButton = {
 };
 type ToolbarButton = IconButton | SelectButton;
 
+/**
+ * The result a consumer's media picker resolves to.
+ *
+ * Returned by the async `image.onPick` config hook. The shape is intentionally
+ * minimal and presentation-light: `id` is the opaque media reference (inserted as
+ * an `image-ref` node when that node is enabled), `url` is the resolved address
+ * (used for a plain image fallback), and `alt` is an optional text hint.
+ */
+interface MediaResult {
+    /** Opaque media id — inserted as an `image-ref` node when available. */
+    id: string;
+    /** Resolved image URL — used for a plain `<img>` fallback. */
+    url: string;
+    /** Optional alternative text. */
+    alt?: string;
+}
+/**
+ * Async hook a consumer provides via `image.onPick` to supply images from its own
+ * media library. Resolving `null`/`undefined` (or rejecting) is treated as a
+ * cancel — the editor inserts nothing and stays usable.
+ */
+type ImagePickHook = () => Promise<MediaResult | null | undefined>;
+
+/**
+ * Image options plus the optional async `onPick` media-picker hook. When `onPick`
+ * is provided, the image insert view delegates selection to the consumer's picker
+ * instead of asking for a raw URL.
+ */
+type ImageConfig = Partial<ImageOptions> & {
+    /**
+     * Async hook that supplies an image from the consumer's own media library.
+     * When set, the insert view calls it and inserts the result (an `image-ref`
+     * node when that node is enabled, else a plain image). Resolving nothing or
+     * rejecting is a no-op.
+     */
+    onPick?: ImagePickHook;
+};
 /**
  * Định nghĩa cấu hình đầy đủ cho DocumentEngineKit (Factory của bạn).
  * Hầu hết các tùy chọn đều là:
@@ -164,10 +200,17 @@ interface DocumentEngineConfig {
      */
     blockquote: Partial<BlockquoteOptions> | boolean;
     /**
-     * Cấu hình cho @tiptap/extension-image
+     * Options for @tiptap/extension-image. May include `onPick` to delegate image
+     * selection to the consumer's own media picker.
      * @default {}
      */
-    image?: Partial<ImageOptions> | boolean;
+    image?: ImageConfig | boolean;
+    /**
+     * Enable the URL-free `image-ref` node (`<figure data-block="image-ref" data-image-id>`).
+     * Stores an opaque media id; the consumer resolves the real responsive image.
+     * @default false
+     */
+    imageRef?: boolean;
     /**
      * Cấu hình cho @tiptap/extension-table (StyledTableKit)
      * @default false
@@ -343,7 +386,93 @@ declare class DocumentEditorComponent implements OnInit, OnChanges, OnDestroy {
      */
     private mergeConfig;
     static ɵfac: i0.ɵɵFactoryDeclaration<DocumentEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DocumentEditorComponent, "document-engine-editor", never, { "config": { "alias": "config"; "required": false; }; }, { "editorReady": "editorReady"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DocumentEditorComponent, "document-engine-editor", never, { "config": { "alias": "config"; "required": false; }; }, { "editorReady": "editorReady"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Type definition for HTML preprocessor function.
+ * Allows clients to transform HTML content before it's set into the editor.
+ *
+ * @param html - The raw HTML string to be processed
+ * @returns The processed HTML string that will be set into the editor
+ *
+ * @example
+ * ```typescript
+ * const myPreprocessor: EditorHtmlPreprocessor = (html: string) => {
+ *   // Remove all script tags for security
+ *   return html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+ * };
+ * ```
+ */
+type EditorHtmlPreprocessor = (html: string) => string;
+/**
+ * Injection token for HTML preprocessor function.
+ * Use this token to provide a custom function that processes HTML content
+ * before it's set into the TipTap editor.
+ *
+ * This is optional - if not provided, the editor will use the HTML content as-is.
+ *
+ * @example
+ * ```typescript
+ * // In your component or module providers
+ * {
+ *   provide: EDITOR_HTML_PREPROCESSOR,
+ *   useValue: (html: string) => {
+ *     // Your custom preprocessing logic
+ *     return html.replace(/old/g, 'new');
+ *   }
+ * }
+ * ```
+ */
+declare const EDITOR_HTML_PREPROCESSOR: InjectionToken<EditorHtmlPreprocessor>;
+/**
+ * Injection token for content wrapper class.
+ * Use this token to provide a custom class name for the content wrapper element.
+ *
+ * @example
+ * ```typescript
+ * // In your component or module providers
+ * {
+ *   provide: EDITOR_CONTENT_WRAPPER_CLASS,
+ *   useValue: 'my-content-wrapper'
+ * }
+ * ```
+ */
+declare const EDITOR_CONTENT_WRAPPER_CLASS: InjectionToken<string | null>;
+
+declare class TiptapEditorDirective implements OnInit, AfterViewInit, ControlValueAccessor {
+    protected elRef: ElementRef<HTMLElement>;
+    protected renderer: Renderer2;
+    protected changeDetectorRef: ChangeDetectorRef;
+    protected htmlPreprocessor: EditorHtmlPreprocessor | null;
+    protected contentWrapperClass: string | null;
+    private _editor?;
+    private initialEditableState?;
+    set editor(editor: Editor);
+    get editor(): Editor;
+    outputFormat: 'json' | 'html';
+    protected onChange: (value: Content) => void;
+    protected onTouched: () => void;
+    writeValue(value: Content): void;
+    registerOnChange(fn: () => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected handleChange: ({ editor, transaction }: EditorEvents["transaction"]) => void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TiptapEditorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TiptapEditorDirective, "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", never, { "editor": { "alias": "editor"; "required": false; }; "outputFormat": { "alias": "outputFormat"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Back-compat shim for NgModule-based consumers. `DocumentEditorComponent` is now
+ * standalone (and `@defer`-friendly); standalone consumers should import it (and
+ * `TiptapEditorDirective`) directly instead of this module.
+ */
+declare class DocumentEditorModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DocumentEditorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DocumentEditorModule, never, [typeof DocumentEditorComponent, typeof TiptapEditorDirective], [typeof DocumentEditorComponent, typeof TiptapEditorDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DocumentEditorModule>;
 }
 
 type BubbleTarget = {
@@ -507,219 +636,6 @@ interface ToolbarBubbleMenuConfig {
     maxWidth?: string;
 }
 
-interface ToolbarState {
-    isReadOnly: boolean;
-    canUndo: boolean;
-    canRedo: boolean;
-    canResetFormat: boolean;
-    canToggleBold: boolean;
-    canToggleItalic: boolean;
-    canToggleUnderline: boolean;
-    canToggleStrike: boolean;
-    canToggleSubscript: boolean;
-    canToggleSuperscript: boolean;
-    canToggleCode: boolean;
-    canToggleLink: boolean;
-    canDecreaseIndent: boolean;
-    canIncreaseIndent: boolean;
-    canToggleBulletList: boolean;
-    canToggleBlockquote: boolean;
-    canInsertPageBreak: boolean;
-    canToggleEditableRegion: boolean;
-    canClearContent: boolean;
-}
-declare const DEFAULT_TOOLBAR_STATE: ToolbarState;
-declare function buildToolbarState(editor: Editor, config?: Partial<DocumentEngineConfig>): ToolbarState;
-
-/**
- * Toolbar component for document editor
- * Provides toolbar controls for editor actions
- */
-declare class ToolbarComponent implements OnInit, OnDestroy {
-    private readonly cdr;
-    private readonly ngZone;
-    private readonly toolbarService;
-    editor: Editor;
-    capabilities: EditorCapabilities;
-    config?: Partial<DocumentEngineConfig>;
-    readonly action: i0.EventEmitter<string>;
-    activeFontSize: string | null;
-    activeLineHeight: string | null;
-    activeHeading: number | null;
-    activeTextAlign: string | null;
-    activeTextAlignIcon: string;
-    toolbarState: ToolbarState;
-    readonly fontSizeOptions: {
-        value: string;
-        label: string;
-    }[];
-    readonly lineHeightOptions: ({
-        value: null;
-        label: string;
-    } | {
-        value: string;
-        label: string;
-    })[];
-    readonly textCaseOptions: {
-        value: TextCaseType;
-        label: string;
-    }[];
-    readonly headingOptions: ({
-        value: null;
-        label: string;
-        class: string;
-    } | {
-        value: number;
-        label: string;
-        class: string;
-    })[];
-    readonly textAlignOptions: {
-        value: string;
-        label: string;
-        icon: string;
-    }[];
-    readonly listStyleOptions: {
-        value: ListStyleType;
-        label: string;
-        example: string;
-    }[];
-    private colorBubbleMenu;
-    private linkBubbleWrapper;
-    private imageBubbleMenu;
-    private specialCharsBubbleMenu;
-    private dynamicFieldsBubbleMenu;
-    private templateBubbleMenu;
-    private tableCreateBubbleMenu;
-    readonly colorBubbleConfig: ToolbarBubbleMenuConfig;
-    readonly linkBubbleConfig: EditorBubbleMenuConfig;
-    readonly tableBubbleConfig: EditorBubbleMenuConfig;
-    readonly imageBubbleConfig: ToolbarBubbleMenuConfig;
-    readonly specialCharsBubbleConfig: ToolbarBubbleMenuConfig;
-    readonly dynamicFieldsBubbleConfig: ToolbarBubbleMenuConfig;
-    readonly templateBubbleConfig: ToolbarBubbleMenuConfig;
-    readonly tableCreateBubbleConfig: ToolbarBubbleMenuConfig;
-    private throttleUpdateToolbarState;
-    private updateToolbarState;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    runAndEmit(actionName: string, chain: () => void): void;
-    setFontSize(size: string | null): void;
-    setLineHeight(lineHeight: string | null): void;
-    setHeading(level: string | null): void;
-    setTextAlign(align: string | null): void;
-    setListStyle(listStyleType: ListStyleType): void;
-    openColorBubble(event: MouseEvent, type: 'text' | 'fill'): void;
-    toggleLink(): void;
-    insertImage(event: MouseEvent): void;
-    openSpecialCharsBubble(event: MouseEvent): void;
-    openDynamicFieldsBubble(event: MouseEvent): void;
-    openTemplateBubble(event: MouseEvent): void;
-    openCreateTableBubble(event: MouseEvent): void;
-    trackByValue(index: number, item: {
-        value: unknown;
-    }): unknown;
-    trackByIndex(index: number): number;
-    get customToolbarButtons(): ToolbarButton[];
-    handleCustomIconButton(button: ToolbarButton): void;
-    handleCustomSelectButton(button: ToolbarButton, value: string): void;
-    printValue(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "document-engine-toolbar", never, { "editor": { "alias": "editor"; "required": false; }; "capabilities": { "alias": "capabilities"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "action": "action"; }, never, never, true, never>;
-}
-
-/**
- * Footer component for document editor
- * Container for footer components like character count
- */
-declare class FooterComponent {
-    editor: Editor;
-    config?: Partial<DocumentEngineConfig>;
-    hasCharacterCount(): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FooterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FooterComponent, "document-engine-footer", never, { "editor": { "alias": "editor"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-/**
- * Type definition for HTML preprocessor function.
- * Allows clients to transform HTML content before it's set into the editor.
- *
- * @param html - The raw HTML string to be processed
- * @returns The processed HTML string that will be set into the editor
- *
- * @example
- * ```typescript
- * const myPreprocessor: EditorHtmlPreprocessor = (html: string) => {
- *   // Remove all script tags for security
- *   return html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
- * };
- * ```
- */
-type EditorHtmlPreprocessor = (html: string) => string;
-/**
- * Injection token for HTML preprocessor function.
- * Use this token to provide a custom function that processes HTML content
- * before it's set into the TipTap editor.
- *
- * This is optional - if not provided, the editor will use the HTML content as-is.
- *
- * @example
- * ```typescript
- * // In your component or module providers
- * {
- *   provide: EDITOR_HTML_PREPROCESSOR,
- *   useValue: (html: string) => {
- *     // Your custom preprocessing logic
- *     return html.replace(/old/g, 'new');
- *   }
- * }
- * ```
- */
-declare const EDITOR_HTML_PREPROCESSOR: InjectionToken<EditorHtmlPreprocessor>;
-/**
- * Injection token for content wrapper class.
- * Use this token to provide a custom class name for the content wrapper element.
- *
- * @example
- * ```typescript
- * // In your component or module providers
- * {
- *   provide: EDITOR_CONTENT_WRAPPER_CLASS,
- *   useValue: 'my-content-wrapper'
- * }
- * ```
- */
-declare const EDITOR_CONTENT_WRAPPER_CLASS: InjectionToken<string | null>;
-
-declare class TiptapEditorDirective implements OnInit, AfterViewInit, ControlValueAccessor {
-    protected elRef: ElementRef<HTMLElement>;
-    protected renderer: Renderer2;
-    protected changeDetectorRef: ChangeDetectorRef;
-    protected htmlPreprocessor: EditorHtmlPreprocessor | null;
-    protected contentWrapperClass: string | null;
-    private _editor?;
-    private initialEditableState?;
-    set editor(editor: Editor);
-    get editor(): Editor;
-    outputFormat: 'json' | 'html';
-    protected onChange: (value: Content) => void;
-    protected onTouched: () => void;
-    writeValue(value: Content): void;
-    registerOnChange(fn: () => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
-    protected handleChange: ({ editor, transaction }: EditorEvents["transaction"]) => void;
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TiptapEditorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TiptapEditorDirective, "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", never, { "editor": { "alias": "editor"; "required": false; }; "outputFormat": { "alias": "outputFormat"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-declare class DocumentEditorModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DocumentEditorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DocumentEditorModule, [typeof DocumentEditorComponent], [typeof i2.CommonModule, typeof ToolbarComponent, typeof FooterComponent, typeof TiptapEditorDirective], [typeof DocumentEditorComponent, typeof TiptapEditorDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DocumentEditorModule>;
-}
-
 declare class TiptapBubbleMenuDirective implements OnInit, OnDestroy {
     private elRef;
     props: BubbleMenuProps;
@@ -1094,6 +1010,126 @@ declare class SelectComponent implements AfterContentInit, OnChanges, OnDestroy,
     static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "document-engine-select", never, { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "labelMode": { "alias": "labelMode"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, { "valueChange": "valueChange"; }, ["labelDirectives", "options"], ["[documentEngineSelectLabel]", "*"], true, never>;
 }
 
+interface ToolbarState {
+    isReadOnly: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    canResetFormat: boolean;
+    canToggleBold: boolean;
+    canToggleItalic: boolean;
+    canToggleUnderline: boolean;
+    canToggleStrike: boolean;
+    canToggleSubscript: boolean;
+    canToggleSuperscript: boolean;
+    canToggleCode: boolean;
+    canToggleLink: boolean;
+    canDecreaseIndent: boolean;
+    canIncreaseIndent: boolean;
+    canToggleBulletList: boolean;
+    canToggleBlockquote: boolean;
+    canInsertPageBreak: boolean;
+    canToggleEditableRegion: boolean;
+    canClearContent: boolean;
+}
+declare const DEFAULT_TOOLBAR_STATE: ToolbarState;
+declare function buildToolbarState(editor: Editor, config?: Partial<DocumentEngineConfig>): ToolbarState;
+
+/**
+ * Toolbar component for document editor
+ * Provides toolbar controls for editor actions
+ */
+declare class ToolbarComponent implements OnInit, OnDestroy {
+    private readonly cdr;
+    private readonly ngZone;
+    private readonly toolbarService;
+    editor: Editor;
+    capabilities: EditorCapabilities;
+    config?: Partial<DocumentEngineConfig>;
+    readonly action: i0.EventEmitter<string>;
+    activeFontSize: string | null;
+    activeLineHeight: string | null;
+    activeHeading: number | null;
+    activeTextAlign: string | null;
+    activeTextAlignIcon: string;
+    toolbarState: ToolbarState;
+    readonly fontSizeOptions: {
+        value: string;
+        label: string;
+    }[];
+    readonly lineHeightOptions: ({
+        value: null;
+        label: string;
+    } | {
+        value: string;
+        label: string;
+    })[];
+    readonly textCaseOptions: {
+        value: TextCaseType;
+        label: string;
+    }[];
+    readonly headingOptions: ({
+        value: null;
+        label: string;
+        class: string;
+    } | {
+        value: number;
+        label: string;
+        class: string;
+    })[];
+    readonly textAlignOptions: {
+        value: string;
+        label: string;
+        icon: string;
+    }[];
+    readonly listStyleOptions: {
+        value: ListStyleType;
+        label: string;
+        example: string;
+    }[];
+    private colorBubbleMenu;
+    private linkBubbleWrapper;
+    private imageBubbleMenu;
+    private specialCharsBubbleMenu;
+    private dynamicFieldsBubbleMenu;
+    private templateBubbleMenu;
+    private tableCreateBubbleMenu;
+    readonly colorBubbleConfig: ToolbarBubbleMenuConfig;
+    readonly linkBubbleConfig: EditorBubbleMenuConfig;
+    readonly tableBubbleConfig: EditorBubbleMenuConfig;
+    readonly imageBubbleConfig: ToolbarBubbleMenuConfig;
+    readonly specialCharsBubbleConfig: ToolbarBubbleMenuConfig;
+    readonly dynamicFieldsBubbleConfig: ToolbarBubbleMenuConfig;
+    readonly templateBubbleConfig: ToolbarBubbleMenuConfig;
+    readonly tableCreateBubbleConfig: ToolbarBubbleMenuConfig;
+    private throttleUpdateToolbarState;
+    private updateToolbarState;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    runAndEmit(actionName: string, chain: () => void): void;
+    setFontSize(size: string | null): void;
+    setLineHeight(lineHeight: string | null): void;
+    setHeading(level: string | null): void;
+    setTextAlign(align: string | null): void;
+    setListStyle(listStyleType: ListStyleType): void;
+    openColorBubble(event: MouseEvent, type: 'text' | 'fill'): void;
+    toggleLink(): void;
+    insertImage(event: MouseEvent): void;
+    openSpecialCharsBubble(event: MouseEvent): void;
+    openDynamicFieldsBubble(event: MouseEvent): void;
+    openTemplateBubble(event: MouseEvent): void;
+    openCreateTableBubble(event: MouseEvent): void;
+    trackByValue(index: number, item: {
+        value: unknown;
+    }): unknown;
+    trackByIndex(index: number): number;
+    get customToolbarButtons(): ToolbarButton[];
+    handleCustomIconButton(button: ToolbarButton): void;
+    handleCustomSelectButton(button: ToolbarButton, value: string): void;
+    printValue(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "document-engine-toolbar", never, { "editor": { "alias": "editor"; "required": false; }; "capabilities": { "alias": "capabilities"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "action": "action"; }, never, never, true, never>;
+}
+
 /**
  * Service to handle toolbar action emissions
  */
@@ -1113,6 +1149,18 @@ declare class ToolbarService implements OnDestroy {
     static ɵprov: i0.ɵɵInjectableDeclaration<ToolbarService>;
 }
 
+/**
+ * Footer component for document editor
+ * Container for footer components like character count
+ */
+declare class FooterComponent {
+    editor: Editor;
+    config?: Partial<DocumentEngineConfig>;
+    hasCharacterCount(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FooterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FooterComponent, "document-engine-footer", never, { "editor": { "alias": "editor"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Character Count component for document editor footer
  * Displays character/word count with optional limit and color coding
@@ -1366,9 +1414,13 @@ declare class ColorPickerViewComponent implements BubbleMenuViewContent<Record<s
 }
 
 /**
- * Temporary image insert view for bubble menu
- * Provides URL input for inserting images via link
- * This is a temporary solution until full upload flow is implemented
+ * Image insert view for the bubble menu.
+ *
+ * Two modes:
+ *  - When the editor's `image` config supplies an async `onPick` hook, the view
+ *    delegates selection to the consumer's media picker and inserts the result
+ *    (an `image-ref` node when that node is enabled, else a plain image).
+ *  - Otherwise it falls back to the built-in raw-URL input form.
  */
 declare class ImageInsertViewComponent implements BubbleMenuViewContent<Record<string, unknown>> {
     private fb;
@@ -1376,13 +1428,21 @@ declare class ImageInsertViewComponent implements BubbleMenuViewContent<Record<s
     editor?: Editor;
     close?: () => void;
     goBack?: (viewId?: string) => void;
+    /** True while the consumer's `onPick` promise is in flight. */
+    loading: boolean;
     imageForm: _angular_forms.FormGroup<{
         url: _angular_forms.FormControl<string | null>;
         alt: _angular_forms.FormControl<string | null>;
     }>;
+    /** The consumer's media picker, read off the `image` extension options (if any). */
+    private get onPick();
+    /** Whether to show the picker mode (vs the raw-URL fallback form). */
+    get hasPicker(): boolean;
     onActivate(): void;
     canInsert(): boolean;
     insertImage(): void;
+    /** Delegate selection to the consumer's media picker, then insert the result. */
+    pickImage(): Promise<void>;
     cancel(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ImageInsertViewComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ImageInsertViewComponent, "document-engine-image-insert-view", never, {}, {}, never, never, true, never>;
@@ -1757,4 +1817,4 @@ declare class EditorBubbleMenuComponent implements OnInit, AfterViewInit, OnDest
 }
 
 export { ARCHIVE, ARROW_DROP_DOWN, AngularRenderer, ButtonDirective, CHECK, CLEAR_ALL, CLOSE, CODE, CharacterCountComponent, CheckboxComponent, ColorPickerComponent, ColorPickerViewComponent, DEFAULT, DEFAULT_TOOLBAR_STATE, DESCRIPTION, DYNAMIC_FORM, DocumentEditorComponent, DocumentEditorModule, DocumentEngineKit, DynamicFieldsViewComponent, EDIT, EDITOR_CONTENT_WRAPPER_CLASS, EDITOR_HTML_PREPROCESSOR, EditorBubbleMenuComponent, EditorCapabilities, ErrorMessageComponent, EventManager, FORMAT_ALIGN_CENTER, FORMAT_ALIGN_JUSTIFY, FORMAT_ALIGN_LEFT, FORMAT_ALIGN_RIGHT, FORMAT_BOLD, FORMAT_CLEAR, FORMAT_COLOR_FILL, FORMAT_COLOR_TEXT, FORMAT_INDENT_DECREASE, FORMAT_INDENT_INCREASE, FORMAT_ITALIC, FORMAT_LINE_SPACING, FORMAT_LIST_BULLETED, FORMAT_LIST_NUMBERED, FORMAT_QUOTE, FORMAT_SIZE, FORMAT_STRIKETHROUGH, FORMAT_UNDERLINE, FocusTrapService, FooterComponent, INSERT_PAGE_BREAK, IconComponent, IconRegistryService, ImageInsertViewComponent, InputDirective, LINK, LINK_OFF, LabelDirective, LinkEditViewComponent, LinkMainViewComponent, LinkPropertiesViewComponent, MARKDOWN, MATCH_CASE, PHOTO, PRINT, PopoverDirective, REDO, RESTRICT_EDIT, SEARCH, SEARCH_OFF, SETTINGS, SPECIAL_CHARACTER, SUBSCRIPT, SUPERSCRIPT, SelectComponent, SelectLabelDirective, SelectOptionDirective, SpecialCharactersViewComponent, TABLE_CELL_PROPERTY, TABLE_COLUMN, TABLE_MERGE_CELL, TABLE_PROPERTY, TABLE_ROW, TABLE_ROWS, TableCellStyleViewComponent, TableCreateViewComponent, TableMainViewComponent, TableStyleViewComponent, TemplateViewComponent, TiptapBubbleMenuDirective, TiptapDraggableDirective, TiptapEditorDirective, TiptapFloatingMenuDirective, ToggleGroupComponent, ToggleOptionDirective, ToolbarBubbleMenuComponent, ToolbarComponent, ToolbarService, UNDO, VERTICAL_ALIGN_BOTTOM, VERTICAL_ALIGN_CENTER, VERTICAL_ALIGN_TOP, buildToolbarState, selectionChangeHandler, shouldShowFnFactory, urlValidator };
-export type { BubbleMenuProps, BubbleMenuViewConfig, BubbleMenuViewContent, BubbleTarget, ButtonType, DocumentEngineConfig, DynamicFieldCategory, DynamicFieldItem, EditorBubbleMenuConfig, EditorHtmlPreprocessor, HeadingLevel, IconButton, OutsideHandler, SelectButton, SelectOption, TableCreateViewData, TemplateItem, ToolbarBubbleMenuConfig, ToolbarButton, ToolbarState };
+export type { BubbleMenuProps, BubbleMenuViewConfig, BubbleMenuViewContent, BubbleTarget, ButtonType, DocumentEngineConfig, DynamicFieldCategory, DynamicFieldItem, EditorBubbleMenuConfig, EditorHtmlPreprocessor, HeadingLevel, IconButton, ImageConfig, ImagePickHook, MediaResult, OutsideHandler, SelectButton, SelectOption, TableCreateViewData, TemplateItem, ToolbarBubbleMenuConfig, ToolbarButton, ToolbarState };