@edugouvfr/ngx-dsfr-ext/editor/index.d.ts

NgxDsfrExt est une extension au package @edugouvfr/ngx-dsfr (portage Angular des éléments DSFR)

import * as i0 from '@angular/core';
import { OnInit, OnDestroy, ElementRef, EventEmitter } from '@angular/core';
import { DsfrSelectOption, DefaultValueAccessorComponent, DsfrSeverity } from '@edugouvfr/ngx-dsfr';

/**
 * Constantes des identifiants d'actions de formatage supportés.
 */
declare enum FormatConst {
    ALIGN = "align",
    BACKGROUND = "background",
    BLOCKQUOTE = "blockquote",
    BOLD = "bold",
    CLEAN = "clean",
    CODE_BLOCK = "code-block",
    COLOR = "color",
    DIRECTION = "direction",
    HEADER = "header",
    IMAGE = "image",
    INDENT = "indent",
    ITALIC = "italic",
    LINK = "link",
    LIST = "list",
    SCRIPT = "script",
    SIZE = "size",
    STRIKE = "strike",
    UNDERLINE = "underline"
}
/**
 * Type correspondant aux identifiants d'actions de formatage supportés.
 */
type Format = `${FormatConst}`;
/**
 * Mapping des clés d'internationalisation des libellés des actions de formatage.
 *
 * Selon le contexte, le libellé sera utilisé comme tooltip, libellé de champ ou transcription accessible.
 */
declare const FORMAT_I18N_KEYS: Record<Format, string | Record<string, string>>;
/**
 * Mapping des icônes par défaut correspondant aux actions de formatage supportées.
 *
 * Note de conception (RPA+KGE) pour l'instant on décide de maintenir les icônes dans une structure à part afin de
 * verrouiller le modèle. Si demain on souhaite donner à l'utilisateur la possibilité de surcharger les icônes des
 * actions de formatage alors on pourra réintégrer les icônes au modèle en augmentant l'interface `BaseFormatControl`
 * d'une propriété `icon` (rétrocompatible car la propriété aura une valeur par défaut dans le modèle par défaut)
 */
declare const FORMAT_ICON: Record<Format, string | Record<string, string> | undefined>;
/**
 * Les différents mode supportés par les contrôles de formatage à valeur unique.
 */
declare enum ControlMode {
    /**
     * Active/désactive le format.
     */
    TOGGLE = "toggle",
    /**
     * Le format dépend de la capture d'un paramètre utilisateur.
     */
    PROMPT = "prompt",
    /**
     * Action issue d'une des options d'une action multivaluée érigée en action unique autonome.
     * Ex. je veux un bouton permettant de formater en Titre de niveau 1 (H1)
     */
    CUSTOM = "custom",
    /**
     * Permet de représenter l'une des options d'une action multivaluée.
     */
    VALUE = "valued",
    /**
     * Dénote une action de formatage multivaluée à afficher sous forme de selecteur.
     */
    SELECT = "select",
    /**
     * Dénote une action de formatage multivaluée à afficher sous de groupe de bouton exclusif.
     */
    RADIO = "radio",
    /**
     * Mode spécial dénotant le contrôle de réinitialisation.
     */
    CLEAN = "clean"
}
/**
 * Les valeurs possibles pour le format 'size'.
 */
declare enum SizeValue {
    SMALL = "small",
    NORMAL = "normal",
    LARGE = "large",
    HUGE = "huge"
}
/**
 * Les valeurs possibles pour le format 'header'.
 */
declare enum HeaderValue {
    NORMAL = 0,
    H1 = 1,
    H2 = 2,
    H3 = 3,
    H4 = 4,
    H5 = 5,
    H6 = 6
}
/**
 * Les valeurs possibles pour le format 'align'.
 */
declare enum AlignValue {
    LEFT = "normal",
    CENTER = "center",
    RIGHT = "right",
    JUSTIFY = "justify"
}
/**
 * Les valeurs possibles pour le format 'list'.
 */
declare enum ListValue {
    ORDERED = "ordered",
    BULLET = "bullet",
    CHECKBOX = "unchecked"
}
/**
 * Les valeurs possibles pour le format 'script'.
 */
declare enum ScriptValue {
    /**
     * Subscript.
     */
    SUBSCRIPT = "sub",
    /**
     * Superscript.
     */
    SUPERSCRIPT = "super"
}
/**
 * Les valeurs possibles pour le format 'indent'.
 */
declare enum IndentValue {
    /**
     * Decrease indent.
     */
    DECREASE = "-1",
    /**
     * Increase indent.
     */
    INCREASE = "+1"
}
/**
 * Les valeurs possibles pour le format 'direction'.
 */
declare enum DirectionValue {
    /**
     * De gauche à droite.
     */
    NORMAL = "normal",
    /**
     * De droite à gauche.
     */
    RTL = "rtl"
}
/**
 * Représente une tâche de formatage de base.
 */
interface DsfrBaseFormatControl {
    /**
     * L'identifiant Quill du format.
     */
    name: Format;
    /**
     * Le mode du contrôle de format.
     */
    mode: ControlMode;
}
/**
 * Représente une action simple (bouton).
 */
interface DsfrSingleFormatControl extends DsfrBaseFormatControl {
    /**
     * Optionnel : permet de surcharger l'icône illustrative.
     * Doit être une classe CSS Remix wrappée DSFR. Ex. 'fr-icon-bold'.
     */
    icon?: string;
}
/**
 * Permet de sortir une des options de formatage d'une action multivaluée et de l'ériger en action unique autonome.
 */
declare class DsfrCustomFormatControl implements DsfrSingleFormatControl {
    name: Format;
    value: string | number | false;
    /**
     * Le mode d'une action avec valeur prédéfinie est forcément 'valued'.
     */
    mode: ControlMode;
    /**
     * Construit une action de formatage valuée.
     *
     * @param name le format de cette action
     * @param value la valeur spécifique de cette action de formatage
     */
    constructor(name: Format, value: string | number | false);
}
/**
 * Action de type interrupteur on/off avec valeur booléenne.
 */
declare class DsfrToggleFormatControl implements DsfrSingleFormatControl {
    name: Format;
    /**
     * Le mode d'une action avec valeur prédéfinie est forcément 'toggle'.
     */
    mode: ControlMode;
    constructor(name: Format);
}
/**
 *
 */
declare class DsfrPromptFormatControl implements DsfrSingleFormatControl {
    name: Format;
    /**
     * Le mode d'une action avec valeur prédéfinie est forcément 'prompt'.
     */
    mode: ControlMode;
    constructor(name: Format);
}
/**
 * Représente une des actions possibles d'une méta-action multi-valuée.
 */
declare class DsfrValueFormatControl implements Omit<DsfrSingleFormatControl, 'name'> {
    value: string | number | false;
    /**
     * Le mode d'une action avec valeur prédéfinie est forcément 'valued'.
     */
    mode: ControlMode;
    /**
     * Construit une action de formatage valuée.
     *
     * @param value la valeur spécifique de cette action de formatage
     */
    constructor(value: string | number | false);
}
/**
 * Représente une méta-tâche qui s'applique à travers la sélection d'une valeur concrète au sein d'une liste de valeurs.
 */
interface DsfrMultivaluedFormatControl extends DsfrBaseFormatControl {
    /**
     * Permet d'indiquer si le contrôle multivalué doit s'afficher au sein d'un groupe dans la toolbar.
     */
    group: boolean;
    /**
     * Valeurs possibles pour cette action de formatage.
     */
    values: DsfrValueFormatControl[];
}
/**
 * Représente une action multi-valuée en mode radio.
 */
declare class RadioFormatControl implements DsfrMultivaluedFormatControl {
    name: Format;
    values: DsfrValueFormatControl[];
    group: boolean;
    mode: ControlMode;
    /**
     * Construit un control de type radio.
     *
     * @param values les différentes valeurs possibles pour le control de type radio
     */
    constructor(name: Format, values: DsfrValueFormatControl[], group: boolean);
}
/**
 * Représente une action multi-valuée en mode select.
 */
declare class SelectFormatControl implements DsfrMultivaluedFormatControl {
    name: Format;
    values: DsfrValueFormatControl[];
    mode: ControlMode;
    group: boolean;
    /**
     * Construit un control de type select.
     *
     * @param values les différentes valeurs possibles pour le control de type select.
     */
    constructor(name: Format, values: DsfrValueFormatControl[]);
}
/**
 * Représente un groupe d'actions.
 */
declare class DsfrGroupFormatControl {
    i18nLabelKey: string;
    controls: DsfrSingleFormatControl[];
    group: boolean;
    /**
     * Construit un control de type radio.
     *
     * @param values les différentes valeurs possibles pour le control de type radio
     */
    constructor(i18nLabelKey: string, controls: DsfrSingleFormatControl[]);
}
/**
 * Type générique encapsulant toutes les types de tâches de formatage.
 */
type FormatControl = DsfrSingleFormatControl | DsfrMultivaluedFormatControl;
/**
 * Tableau permettant de regrouper des contrôles uniques avec un libellé accessible.
 */
declare class ControlArray extends Array<DsfrSingleFormatControl> {
    name: string;
    constructor(name: string, ...items: DsfrSingleFormatControl[]);
}
/**
 * Type décrivant un élément de la barre d'outil qui peut être soit une tâche unitaire soit un regroupement de tâches.
 */
type ToolbarControl = FormatControl | ControlArray;

/**
 * Options par défaut de la toolbar.
 */
declare const DEFAULT_TOOLBAR_OPTIONS: ToolbarControl[];

/**
 * Les quatre modalités de présentation supportées par la toolbar pour afficher les contrôles de format.
 */
type ControlViewType = 'btn' | 'array' | 'radio' | 'select';
declare class EduEditorToolbarComponent implements OnInit, OnDestroy {
    /**
     * L'identifiant du tag hôte pour le composant éditeur.
     */
    editorId: string;
    /**
     * Active la lecure seule.
     */
    /**
     * Options de la toolbar.
     */
    toolbarOptions: ToolbarControl[];
    /** @internal */
    toolbar: ElementRef;
    /**
     * Modèle de présentation spécifique pour les select (header+size).
     * RPA: je passe par un modèle de présentation spécifique et je n'utilise pas directement un binding sur
     * currentSelectionFormats car j'ai besoin de reflêter l'état de sélection utilisateur sinon voici ce qui ce passe :
     * l'utilisateur sélectionne une portion de texte et sélectionnz un niveau de titre H2, puis il place le curseur dans
     * un paragraphe quelconque, le select reste sur H2 car la propriété interne 'value' n'est pas mise à jour lors de
     * la sélection utilisateur (binding non bi-directionnel). C'est pourquoi il est nécessaire de passer par un modèle
     * de présentation dédié à la gestion des select.
     */
    protected selectModel: any;
    /**
     * Permet de gérer la valeur tabindex de la toolbar.
     */
    protected focusable: boolean;
    /**
     * Pointeur sur le dernier élément de contrôle actif, permet de restaurer le focus directement sur celui-ci au
     * SHIFT+TAB.
     */
    protected lastActiveControlElement?: HTMLElement;
    /**
     * Modèle de présentation interne exposant les formats de la sélection courante.
     */
    private _currentSelectionFormats;
    private _unlistenFn;
    private _sub;
    private readonly ngZone;
    private readonly renderer2;
    private readonly elementRef;
    private readonly i18n;
    private readonly editorService;
    private focusMonitor;
    private el;
    ngOnInit(): void;
    ngOnDestroy(): void;
    /**
     * Retourne la clé du libellé internationalisé.
     * @param control  le contôle de formatage
     */
    getI18nKey(format: Format, value?: any): string;
    /**
     * Construit la clé i18n correspondant au nom du tableau de contrôles passé en paramètre.
     */
    protected getArrayI18nKey(controlArray: ControlArray): string;
    /**
     * Construit la clé i18n correspondant au groupe de contrôles multivalués passé en paramètre.
     */
    protected getGroupI18nKey(format: Format): string;
    /**
     * Handler sur l'input file associé à une inserion d'image.
     */
    protected onImageInputFileChange(event: Event): void;
    /**
     * Permet de conditionner la structure HTML selon le type contrôle.
     */
    protected getButtonType(control: FormatControl | FormatControl[]): ControlViewType;
    /**
     * Retourne l'icône correspondant au format passé en paramètre.
     *
     * @param format le format à considérer
     * @param value la vaaleur à prendre en compte le cas échéant
     * @returns la classe css correspondant à l'icône
     */
    protected getIcon(format: Format, value?: undefined): string | undefined;
    /**
     * Détermine si l'option de format doit être activée ou pas.
     *
     * @param format le nom de contrôle de format
     * @param value la valeur de l'option considérée
     * @returns vrai si le couple format/value fait partie des formats de la sélection courante, faux sinon
     */
    protected isValueActive(format: Format, value: string): boolean;
    /**
     * Retourne la liste des optiosn à affichier au sein du contrôle multivalué (select).
     *
     * @param control le contrôle multivalué à considéré
     */
    protected getSelectOptions(control: DsfrMultivaluedFormatControl): DsfrSelectOption[];
    /**
     * Permet d'indiquer si le contrôle de ce format doit être activé au niveau de la barre d'outils.
     *
     * @param format le format à considérer vis-à-vis des formats de la sélection courante
     * @returns vrai si ce format doit être actif, faux sinon
     */
    protected isFormatActive(format: Format): boolean;
    /**
     * Permet de réagir aux actions utilisateur sur la toolbar.
     */
    protected onToolbarControlPerform(event: Event, format: FormatControl, value?: string): void;
    /**
     * Permet d'écouter la capture d'une couleur par l'utilisateur.
     */
    protected onColorPickerChange(event: Event, action: string): void;
    /**
     * Permet d'écouter les changement sur le format "list".
     *
     * @param action
     * @param event
     */
    protected onListSelect(action: string, event: Event): void;
    /**
     * Permet de forcer la prise de focus sur le premier élément focusable de la barre d'outil lorsque le conteneur de
     * la toolbar reçoit le focus.
     */
    protected onToolbarFocus(event: FocusEvent): void;
    /**
     * Handler sur la prise de focus d'un élément de la toolbar (gestion du tabindex de la toolbar).
     */
    protected onToolbarFocusIn(event: FocusEvent): void;
    /**
     * Handler sur la perte de focus d'un élément de la toolbar (gestion du tabindex de la toolbar).
     */
    protected onToolbarFocusOut(event: FocusEvent): void;
    /**
     * Permet de se mettre à l'écoute des actions utilisateur sur la barre d'outils.
     */
    protected onToolbarKeydown(event: KeyboardEvent): void;
    /**
     * Retourne vrai si le format correspond à un contrôle d'action multivaluée, faux sinon.
     *
     * @param format le descripteur de format à considérer
     */
    private isMultiValuedControl;
    private getOptionLabel;
    private performAction;
    /**
     * Détecte le clic en dehors du composant pour retirer le marqueur de focus custom sur la toolbar.
     */
    private clickOutside;
    private _buildSelectOption;
    private findNextSiblingControl;
    private findPrevSiblingControl;
    /**
     * Recherche l'élément de contrôle focusable adjaçant à l'élément de contrôle actif.
     *
     * Cette fonction est utilisée pour pouvoir déplacer le focus lors de la navigation au clavier.
     *
     * @param siblingProperty La propriété permettant de récupérer le voisin suivant ou précédent (selon)
     * @param failoverFunction La fonction permettant de récupérer un élément focusable lorsqu'il n'y plus de suivant
     * @returns Une élément HTML sur lequel il sera possible de prendre le focus
     */
    private findSiblingControl;
    /**
     * Recherche du conteneur de contrôle suivant.
     */
    private findSiblingControlParent;
    private getRootContainer;
    /**
     * Search focusable control (depth first traversal).
     */
    private getFocusableControl;
    private getFirstToolbarControl;
    private getLastToolbarControl;
    /**
     * Répercute les formats actifs de la sélection courante vers la toolbar.
     */
    private _updateToolbar;
    /**
     * Retourne la valeur à sélectionner dans le cas de contôle multivalué (select).
     *
     * @internal
     */
    private _getSelectedOption;
    /**
     * Supprime toutes les mises en forme sur la sélection courante.
     */
    private _removeSelectionFormats;
    /**
     * Applique le format défini par l'utilisateur via la toolbar sur la sélection courante de l'éditeur.
     */
    private _applyFormat;
    /**
     * Permet de capturer une couleur depuis un color-picker natif.
     *
     * @param selector le sélecteur permettant de requêter l'élément de contrôle complémentaire
     */
    private _displayPromptElement;
    /**
     * Positionne l'image Base64 dans l'editeur.
     */
    private _uploadImage;
    static ɵfac: i0.ɵɵFactoryDeclaration<EduEditorToolbarComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<EduEditorToolbarComponent, "edu-editor-toolbar", never, { "editorId": { "alias": "editorId"; "required": false; }; "toolbarOptions": { "alias": "toolbarOptions"; "required": false; }; }, {}, never, never, true, never>;
}

declare class DsfrEditorComponent extends DefaultValueAccessorComponent<string> implements OnInit, OnDestroy {
    /**
     * Options de la toolbar.
     */
    toolbarOptions: ToolbarControl[];
    /**
     * Permet de spécifier l'identifiant à utiliser pour le composant d'édition.
     * C'est utile si vous souhaitez disposer de plusieurs éditeurs sur un même écran.
     *
     * Attention : cet input est statique et doit être connu à l'initialisation du composant.
     */
    editorId: string;
    /**
     * Libellé du champ de saisie riche.
     *
     * Obligatoire si vous ne gérez pas un libellé accessible via aria-Labelledby.
     *
     * Il est possible de masquer visuellement ce libellé via la propriété `labelSrOnly`.
     */
    label?: string;
    /**
     * Permet de masquer visuellement le libellé en le réservant aux dispositifs de restitution.
     */
    labelSrOnly: boolean;
    /**
     * Renseigner cette propriété si vous souhaitez utiliser le texte d'un élément tiers comme légende du composant
     * d'édition riche.
     */
    ariaLabelledBy?: string;
    /**
     * Optionnel : permet de surcharger le texte de description additionnel.
     *
     * - La valeur `undefined` permet d'obtenir la description par défaut
     * - La valeur `null` permet de supprimer complètement la description
     * - Toute autre valeur sera utilisée pour valoriser la description
     */
    hint?: string | null;
    /**
     * Permet de masquer visuellement le texte de description additionnel pour la réserver aux dispositifs de restitution.
     */
    hintSrOnly: boolean;
    /**
     * Permet de masquer visuellement la légende de l'éditeur pour la réserver aux dispositifs de restitution.
     */
    editorLegendSrOnly: boolean;
    /**
     * Active la lecture seule.
     */
    /** Ajoute une validation comme étant un champs required */
    /** Utilise DomSanitizer. Uniquement pour le format `html`. */
    /** Ajoute une valeur maximale de caractère pour validation. */
    /** Ajoute une valeur minimal de caractère pour validation. */
    /**
     * Message d'information associé au composant.
     */
    message?: string;
    /**
     * Représente la sévérité du message. 🔥 Le niveau `WARNING` n'est pas géré dans cette version.
     */
    messageSeverity?: DsfrSeverity;
    /**
     * Id de l'élément affichant les messages associé à l'éditeur. A renseigner si vous souhaitez positionner un attribut
     * `aria-describedby` référençant votre message au niveau de l'élément hôte de l'éditeur.
     *
     * Attention : cet input est statique et doit être connu à l'initialisation du composant.
     */
    messagesGroupId?: string;
    /**
     * Dev/debug : permet d'afficher le code HTML interne de l'éditeur (i.e. celui qui sert pour l'affichage WYSIWYG).
     */
    showEditorHtmlDebugPanel: boolean;
    /**
     * Dev/debug : permet d'afficher le code HTML qui sera récupéré en sortie.
     */
    showSemanticHtmlDebugPanel: boolean;
    /**
     * Signale les changements sur le contenu HTML.
     */
    valueChange: EventEmitter<string>;
    /** @internal */
    toolbar: EduEditorToolbarComponent;
    /** @internal */
    announcer: ElementRef;
    /**
     * Gestion de l'identifiant du libellé accessible.
     */
    protected labelId: string;
    /**
     * Permet de vocaliser un feedback post-action de formatage.
     */
    protected announce: string | undefined;
    private _sub;
    private readonly i18n;
    private readonly editorService;
    constructor();
    ngOnInit(): void;
    ngOnDestroy(): void;
    /** @internal */
    writeValue(value: string | undefined): void;
    /**
     * Retourne l’entrée complète de l’enum (clé + valeur)
     * correspondant à la valeur passée en paramètre.
     */
    private getEnumEntryByValue;
    static ɵfac: i0.ɵɵFactoryDeclaration<DsfrEditorComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<DsfrEditorComponent, "dsfr-ext-editor, dsfrx-editor", never, { "toolbarOptions": { "alias": "toolbarOptions"; "required": false; }; "editorId": { "alias": "editorId"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelSrOnly": { "alias": "labelSrOnly"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "hintSrOnly": { "alias": "hintSrOnly"; "required": false; }; "editorLegendSrOnly": { "alias": "editorLegendSrOnly"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messageSeverity": { "alias": "messageSeverity"; "required": false; }; "messagesGroupId": { "alias": "messagesGroupId"; "required": false; }; "showEditorHtmlDebugPanel": { "alias": "showEditorHtmlDebugPanel"; "required": false; }; "showSemanticHtmlDebugPanel": { "alias": "showSemanticHtmlDebugPanel"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
}

export { AlignValue, ControlArray, ControlMode, DEFAULT_TOOLBAR_OPTIONS, DirectionValue, DsfrCustomFormatControl, DsfrEditorComponent, DsfrGroupFormatControl, DsfrPromptFormatControl, DsfrToggleFormatControl, DsfrValueFormatControl, FORMAT_I18N_KEYS, FORMAT_ICON, FormatConst, HeaderValue, IndentValue, ListValue, RadioFormatControl, ScriptValue, SelectFormatControl, SizeValue };
export type { DsfrBaseFormatControl, DsfrMultivaluedFormatControl, DsfrSingleFormatControl, Format, FormatControl, ToolbarControl };