@3ddv/software-division-components 2.0.4 → 2.0.6

package/types/3ddv-software-division-components-generic-rich-text-editor.d.ts

@@ -0,0 +1,348 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, AfterViewInit, OnDestroy } from '@angular/core';
+import { FormGroup, AbstractControl, FormControl, ValidationErrors } from '@angular/forms';
+import { Extension, Editor } from '@tiptap/core';
+import * as _3ddv_software_division_components_generic_rich_text_editor from '@3ddv/software-division-components/generic/rich-text-editor';
+
+/**
+ * Custom toolbar button configuration for extending the toolbar
+ */
+interface CustomToolbarButton {
+    /** Unique identifier for the button */
+    id: string;
+    /** Icon to display (SVG string or icon name) */
+    icon: string;
+    /** Tooltip text */
+    title: string;
+    /** Click handler function */
+    action: () => void;
+    /** Function to determine active state */
+    isActive?: () => boolean;
+}
+/**
+ * Configuration for the rich text editor toolbar
+ */
+interface ToolbarConfig {
+    /** Enable bold formatting */
+    bold?: boolean;
+    /** Enable italic formatting */
+    italic?: boolean;
+    /** Enable underline formatting */
+    underline?: boolean;
+    /** Enable strikethrough formatting */
+    strike?: boolean;
+    /** Enable bullet list */
+    bulletList?: boolean;
+    /** Enable ordered list */
+    orderedList?: boolean;
+    /** Heading levels to enable (1-6) */
+    headings?: (1 | 2 | 3 | 4 | 5 | 6)[];
+    /** Enable horizontal rule insertion */
+    horizontalRule?: boolean;
+    /** Enable link insertion/editing */
+    link?: boolean;
+    /** Enable blockquote formatting */
+    blockquote?: boolean;
+    /** Enable inline code formatting */
+    code?: boolean;
+    /** Enable code block */
+    codeBlock?: boolean;
+    /** Enable undo button */
+    undo?: boolean;
+    /** Enable redo button */
+    redo?: boolean;
+    /** Custom buttons to add to the toolbar */
+    customButtons?: CustomToolbarButton[];
+}
+/**
+ * Preset name for toolbar configuration
+ */
+type ToolbarPreset = 'minimal' | 'standard' | 'full';
+/**
+ * Predefined toolbar presets
+ */
+declare const TOOLBAR_PRESETS: Record<ToolbarPreset, ToolbarConfig>;
+/**
+ * Default toolbar configuration (standard preset)
+ */
+declare const DEFAULT_TOOLBAR_CONFIG: ToolbarConfig;
+/**
+ * Configuration for link behavior in the editor
+ */
+interface LinkConfig {
+    /** Whether links open on click (default: false) */
+    openOnClick?: boolean;
+    /** CSS classes to apply to links */
+    linkClass?: string;
+    /** Whether to add rel="noopener noreferrer" to external links */
+    addNoopener?: boolean;
+    /** Whether to add target="_blank" to links */
+    openInNewTab?: boolean;
+}
+/**
+ * Default link configuration
+ */
+declare const DEFAULT_LINK_CONFIG: LinkConfig;
+/**
+ * Error display mode for the editor
+ */
+type ErrorDisplayMode = 'always' | 'after-submit';
+/**
+ * Full editor configuration options
+ */
+interface EditorConfig {
+    /** Placeholder text when editor is empty */
+    placeholder?: string;
+    /** Minimum height of the editor */
+    minHeight?: string;
+    /** Maximum height of the editor (enables scrolling) */
+    maxHeight?: string;
+    /** Whether the editor should auto-focus on initialization */
+    autoFocus?: boolean;
+    /** Custom TipTap extensions to add or override defaults */
+    extensions?: Extension[];
+    /** Link behavior configuration */
+    linkConfig?: LinkConfig;
+    /** Whether to enable spellcheck */
+    spellcheck?: boolean;
+}
+/**
+ * Default editor configuration
+ */
+declare const DEFAULT_EDITOR_CONFIG: EditorConfig;
+
+/**
+ * Link data structure for link insertion
+ */
+interface LinkData {
+    url: string;
+    text: string;
+}
+/**
+ * Modal component for inserting/editing links in the rich text editor
+ */
+declare class LinkModalComponent {
+    private readonly fb;
+    /** Whether the modal is visible */
+    readonly visible: _angular_core.InputSignal<boolean>;
+    /** Pre-selected text to use as link text */
+    readonly selectedText: _angular_core.InputSignal<string>;
+    /** Existing URL when editing a link */
+    readonly existingUrl: _angular_core.InputSignal<string>;
+    /** Event emitted when a link is added/updated */
+    readonly linkAdded: _angular_core.OutputEmitterRef<LinkData>;
+    /** Event emitted when the modal is closed */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /** Form group for link data */
+    readonly linkForm: FormGroup;
+    /** Track if form was submitted to show validation errors */
+    protected readonly submitted: _angular_core.WritableSignal<boolean>;
+    /** Computed title based on whether we're editing or adding */
+    protected readonly modalTitle: _angular_core.Signal<"Edit Link" | "Add Link">;
+    constructor();
+    /** Submit the form and emit link data */
+    addLink(): void;
+    /** Close the modal and reset form */
+    closeModal(): void;
+    /** Check if a field has errors and should show them */
+    hasError(fieldName: string): boolean;
+    /** Get specific error for a field */
+    getError(fieldName: string, errorType: string): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LinkModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LinkModalComponent, "sdc-link-modal", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "selectedText": { "alias": "selectedText"; "required": false; "isSignal": true; }; "existingUrl": { "alias": "existingUrl"; "required": false; "isSignal": true; }; }, { "linkAdded": "linkAdded"; "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * A rich text editor component built on TipTap
+ *
+ * This component provides a WYSIWYG editor with configurable toolbar,
+ * form integration, and theme support.
+ *
+ * @since 1.5.0
+ */
+declare class RichTextEditorComponent implements OnInit, AfterViewInit, OnDestroy {
+    /** Editor content container element */
+    private readonly editorContent;
+    /** TipTap editor instance (signal for change detection) */
+    readonly editorSignal: _angular_core.WritableSignal<Editor | null>;
+    /** Getter for backward compatibility */
+    get editor(): Editor | null;
+    /** Theme class to apply */
+    readonly theme: _angular_core.InputSignal<"theme-backoffice" | "theme-sdc">;
+    /** Form control for two-way binding */
+    readonly control: _angular_core.InputSignal<AbstractControl<string | null, string | null, any> | FormControl<any> | null>;
+    /** Placeholder text when editor is empty */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Whether the editor is disabled */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Minimum height of the editor */
+    readonly minHeight: _angular_core.InputSignal<string>;
+    /** Maximum height of the editor (enables scrolling) */
+    readonly maxHeight: _angular_core.InputSignal<string | null>;
+    /** Toolbar configuration object */
+    readonly toolbarConfig: _angular_core.InputSignal<ToolbarConfig>;
+    /** Toolbar preset name (overrides toolbarConfig) */
+    readonly toolbarPreset: _angular_core.InputSignal<ToolbarPreset | null>;
+    /** Link behavior configuration */
+    readonly linkConfig: _angular_core.InputSignal<LinkConfig>;
+    /** Error display mode */
+    readonly errorDisplayMode: _angular_core.InputSignal<ErrorDisplayMode>;
+    /** Custom error message */
+    readonly errorMessage: _angular_core.InputSignal<string>;
+    /** Label text */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Label position */
+    readonly labelPosition: _angular_core.InputSignal<"top" | "left">;
+    /** Name attribute for form control */
+    readonly name: _angular_core.InputSignal<string>;
+    /** Whether to autofocus the editor on init */
+    readonly autoFocus: _angular_core.InputSignal<boolean>;
+    /** Emits when the editor is ready */
+    readonly editorReady: _angular_core.OutputEmitterRef<Editor>;
+    /** Emits HTML content on change */
+    readonly contentChange: _angular_core.OutputEmitterRef<string>;
+    /** Emits on focus */
+    readonly onFocus: _angular_core.OutputEmitterRef<FocusEvent>;
+    /** Emits on blur */
+    readonly onBlur: _angular_core.OutputEmitterRef<FocusEvent>;
+    /** Form control state for validation display */
+    readonly controlState: _angular_core.WritableSignal<{
+        invalid: boolean;
+        touched: boolean;
+        dirty: boolean;
+        errors: ValidationErrors | null;
+        isFormSubmitted: boolean;
+    }>;
+    /** Link modal visibility state */
+    protected readonly showLinkModal: _angular_core.WritableSignal<boolean>;
+    /** Selected text for link modal */
+    protected readonly selectedText: _angular_core.WritableSignal<string>;
+    /** Existing URL when editing a link */
+    protected readonly existingLinkUrl: _angular_core.WritableSignal<string>;
+    /** Subscriptions for cleanup */
+    private readonly subscriptions;
+    /** Flag to prevent update loops */
+    private isUpdatingFromEditor;
+    /** Cached form control reference (to avoid calling signals in callbacks) */
+    private formControlRef;
+    /** Computed toolbar config using preset or custom config */
+    protected readonly computedToolbarConfig: _angular_core.Signal<ToolbarConfig>;
+    /** Computed class string for the component */
+    protected readonly computedClass: _angular_core.Signal<string>;
+    /** Computed label class */
+    protected readonly labelClass: _angular_core.Signal<"sdc-rich-text-editor__label left" | "sdc-rich-text-editor__label top">;
+    /** Whether to show the label */
+    protected readonly showLabel: _angular_core.Signal<boolean | "">;
+    /** Current error message to display */
+    protected readonly currentErrorMessage: _angular_core.Signal<string>;
+    /** Whether to show error */
+    protected readonly showError: _angular_core.Signal<boolean>;
+    /** Computed editor styles */
+    protected readonly editorStyles: _angular_core.Signal<Record<string, string>>;
+    constructor();
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** Initialize the TipTap editor */
+    private initializeEditor;
+    /** Update error state from form control */
+    private updateErrors;
+    /** Get error message for validator */
+    private getValidatorErrorMessage;
+    /** Handle link button click from toolbar */
+    protected handleLinkRequested(): void;
+    /** Handle link added from modal */
+    protected handleLinkAdded(data: LinkData): void;
+    /** Handle link modal close */
+    protected handleLinkModalClose(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RichTextEditorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RichTextEditorComponent, "sdc-rich-text-editor", never, { "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "toolbarConfig": { "alias": "toolbarConfig"; "required": false; "isSignal": true; }; "toolbarPreset": { "alias": "toolbarPreset"; "required": false; "isSignal": true; }; "linkConfig": { "alias": "linkConfig"; "required": false; "isSignal": true; }; "errorDisplayMode": { "alias": "errorDisplayMode"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; }, { "editorReady": "editorReady"; "contentChange": "contentChange"; "onFocus": "onFocus"; "onBlur": "onBlur"; }, never, never, true, never>;
+}
+
+/**
+ * Toolbar component for the rich text editor
+ * Provides formatting buttons with responsive design and active state tracking
+ */
+declare class EditorToolbarComponent {
+    /** The TipTap editor instance */
+    readonly editor: _angular_core.InputSignal<Editor>;
+    /** Toolbar configuration */
+    readonly config: _angular_core.InputSignal<ToolbarConfig>;
+    /** Event emitted when link button is clicked */
+    readonly linkRequested: _angular_core.OutputEmitterRef<void>;
+    /** Mobile menu visibility state */
+    readonly showMobileMenu: _angular_core.WritableSignal<boolean>;
+    /** Computed config with defaults applied */
+    protected readonly mergedConfig: _angular_core.Signal<{
+        bold?: boolean;
+        italic?: boolean;
+        underline?: boolean;
+        strike?: boolean;
+        bulletList?: boolean;
+        orderedList?: boolean;
+        headings?: (1 | 2 | 3 | 4 | 5 | 6)[];
+        horizontalRule?: boolean;
+        link?: boolean;
+        blockquote?: boolean;
+        code?: boolean;
+        codeBlock?: boolean;
+        undo?: boolean;
+        redo?: boolean;
+        customButtons?: _3ddv_software_division_components_generic_rich_text_editor.CustomToolbarButton[];
+    }>;
+    /** Check if any formatting option is enabled */
+    protected readonly hasFormattingOptions: _angular_core.Signal<boolean | undefined>;
+    /** Check if any list option is enabled */
+    protected readonly hasListOptions: _angular_core.Signal<boolean | undefined>;
+    /** Check if any heading is enabled */
+    protected readonly hasHeadings: _angular_core.Signal<boolean | undefined>;
+    /** Check if history buttons are enabled */
+    protected readonly hasHistory: _angular_core.Signal<boolean | undefined>;
+    /** Check if code options are enabled */
+    protected readonly hasCodeOptions: _angular_core.Signal<boolean | undefined>;
+    /** Toggle mobile menu visibility */
+    toggleMobileMenu(): void;
+    /** Toggle heading with smart selection handling */
+    toggleHeading(level: 1 | 2 | 3 | 4 | 5 | 6): void;
+    /** Request link insertion/editing */
+    setLink(): void;
+    /** Toggle bold formatting */
+    toggleBold(): void;
+    /** Toggle italic formatting */
+    toggleItalic(): void;
+    /** Toggle underline formatting */
+    toggleUnderline(): void;
+    /** Toggle strikethrough formatting */
+    toggleStrike(): void;
+    /** Toggle bullet list */
+    toggleBulletList(): void;
+    /** Toggle ordered list */
+    toggleOrderedList(): void;
+    /** Insert horizontal rule */
+    insertHorizontalRule(): void;
+    /** Toggle blockquote */
+    toggleBlockquote(): void;
+    /** Toggle inline code */
+    toggleCode(): void;
+    /** Toggle code block */
+    toggleCodeBlock(): void;
+    /** Undo last action */
+    undo(): void;
+    /** Redo last undone action */
+    redo(): void;
+    /** Remove link from selection */
+    unsetLink(): void;
+    /** Check if a formatting type is active */
+    isActive(type: string, options?: Record<string, unknown>): boolean;
+    /** Track function for heading levels */
+    trackByLevel(index: number, level: number): number;
+    /** Track function for custom buttons */
+    trackByButtonId(index: number, btn: {
+        id: string;
+    }): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EditorToolbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EditorToolbarComponent, "sdc-editor-toolbar", never, { "editor": { "alias": "editor"; "required": true; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; }, { "linkRequested": "linkRequested"; }, never, never, true, never>;
+}
+
+export { DEFAULT_EDITOR_CONFIG, DEFAULT_LINK_CONFIG, DEFAULT_TOOLBAR_CONFIG, EditorToolbarComponent, LinkModalComponent, RichTextEditorComponent, TOOLBAR_PRESETS };
+export type { CustomToolbarButton, EditorConfig, ErrorDisplayMode, LinkConfig, LinkData, ToolbarConfig, ToolbarPreset };