@mdefy/ngx-markdown-editor/lib/component/markdown-editor.component.d.ts

An Angular Markdown Editor in WYSIWYG style with extensive functionality, high customizability and an integrated material theme.

import { ElementRef, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { MatSelect } from '@angular/material/select';
import { DomSanitizer } from '@angular/platform-browser';
import { MarkdownEditor } from '@mdefy/markdown-editor-core';
import { Editor, EditorChangeLinkedList } from 'codemirror';
import { MarkdownComponent, MarkdownService } from 'ngx-markdown';
import { Keybindings } from '../services/keybindings.service';
import { StatusbarService } from '../services/statusbar.service';
import { ToolbarService } from '../services/toolbar.service';
import { LanguageTag } from '../types/language-tag';
import { ObservableEmitter } from '../types/observable-emitter';
import { Options } from '../types/options';
import { StatusbarItemDef, StatusbarItemNormalized } from '../types/statusbar';
import { ToolbarItemDef, ToolbarItemNormalized } from '../types/toolbar';
export declare class MarkdownEditorComponent implements OnInit, OnChanges, OnDestroy {
    private readonly iconRegistry;
    private readonly domSanitizer;
    private readonly hotkeys;
    private readonly hostElement;
    private readonly markdownService;
    private readonly toolbarService;
    private readonly statusbarService;
    /**
     * Data string to set as content of the editor.
     */
    readonly data: string;
    /**
     * Options to configure _Ngx Markdown Editor_.
     *
     * Basically `MarkdownEditorOptions` from _Markdown Editor Core_ are forwarded,
     * including some adjustments and extensions.
     */
    readonly options: Options;
    /**
     * Custom set of toolbar items.
     */
    readonly toolbar: ToolbarItemDef[];
    /**
     * Custom set of statusbar items.
     */
    readonly statusbar: StatusbarItemDef[];
    /**
     * The current language applied to internationalized items.
     */
    readonly language: LanguageTag;
    /**
     * The label text displayed at the top of the component. The label will be hidden, if this is `undefined`.
     */
    readonly label?: string;
    /**
     * Specifies whether the editor is a required form field. An asterisk will be appended to the label.
     */
    readonly required = false;
    /**
     * Specifies whether and which Angular Material style is used.
     */
    readonly materialStyle: boolean | 'standard' | 'fill' | 'legacy';
    /**
     * Specifies whether the editor is disabled.
     */
    readonly disabled = false;
    /**
     * Specifies whether the toolbar is rendered.
     */
    readonly showToolbar = true;
    /**
     * Specifies whether the statusbar is rendered.
     */
    readonly showStatusbar = true;
    /**
     * Specifies whether tooltips are shown for toolbar items.
     */
    readonly showTooltips = true;
    /**
     * Specifies whether the key combination is included in the tooltip.
     */
    readonly shortcutsInTooltips = true;
    /**
     * Emits when the editor's content changes.
     */
    contentChange: ObservableEmitter<{
        instance: Editor;
        changes: EditorChangeLinkedList[];
    }>;
    /**
     * Emits when the editor's cursor is moved.
     */
    cursorActivity: ObservableEmitter<{
        instance: Editor;
    }>;
    /**
     * Emits when the editor receives focus.
     */
    editorFocus: ObservableEmitter<{
        instance: Editor;
        event: FocusEvent;
    }>;
    /**
     * Emits when the editor loses focus.
     */
    editorBlur: ObservableEmitter<{
        instance: Editor;
        event: FocusEvent;
    }>;
    /**
     * The `mat-select` element of `setHeadingLevel`.
     */
    setHeadingLevelDropdown: MatSelect;
    /**
     * The `MarkdownEditor` instance of _Markdown Editor Core_.
     */
    markdown: MarkdownComponent;
    /**
     * The `MarkdownEditor` instance of _Markdown Editor Core_.
     */
    mde: MarkdownEditor;
    /**
     * _Not intended to be used outside the component. Only made public for access inside template._
     */
    normalizedToolbarItems: ToolbarItemNormalized[];
    /**
     * _Not intended to be used outside the component. Only made public for access inside template._
     */
    activeToolbarItems: (boolean | number)[];
    /**
     * _Not intended to be used outside the component. Only made public for access inside template._
     */
    toolbarItemTooltips: string[];
    /**
     * _Not intended to be used outside the component. Only made public for access inside template._
     */
    normalizedStatusbarItems: StatusbarItemNormalized[];
    /**
     * _Not intended to be used outside the component. Only made public for access inside template._
     */
    showPreview: boolean;
    /**
     * _Not intended to be used outside the component. Only made public for access inside template._
     */
    showSideBySidePreview: boolean;
    /**
     * _Not intended to be used outside the component. Only made public for access inside template._
     */
    blockBlur: boolean;
    /**
     * _Not intended to be used outside the component. Only made public for access inside template._
     */
    focused: boolean;
    private shortcutResetter;
    get disabledStyle(): boolean;
    get default(): boolean;
    get material(): boolean | "standard" | "legacy" | "fill";
    get class(): string[] | undefined;
    get appearanceStandard(): boolean;
    get appearanceFill(): boolean;
    get appearanceLegacy(): boolean;
    get focusedStyle(): boolean;
    constructor(iconRegistry: MatIconRegistry, domSanitizer: DomSanitizer, hotkeys: Keybindings, hostElement: ElementRef, markdownService: MarkdownService, toolbarService: ToolbarService, statusbarService: StatusbarService);
    /**
     * @inheritdoc
     */
    ngOnInit(): void;
    /**
     * @inheritdoc
     */
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * @inheritdoc
     */
    ngOnDestroy(): void;
    /**
     * Toggles the full-size preview.
     */
    togglePreview(): void;
    /**
     * Toggles the side-by-side preview.
     */
    toggleSideBySidePreview(): void;
    /**
     * Triggered when a toolbar button is clicked.
     *
     * _Not intended to be used outside the component. Only made public for access inside template._
     */
    onButtonClick(item: ToolbarItemNormalized): void;
    /**
     * Resolves the shortcut for the specified item and appends it to the item's tooltip text,
     * if `shortcutsInTooltips` is enabled.
     *
     * _Not intended to be used outside the component. Only made public for access inside template._
     */
    createTooltip(item: ToolbarItemNormalized): string;
    /**
     * Replaces the checkbox dummies rendered inside the preview with actual checkboxes (also see constructor).
     *
     * _Not intended to be used outside the component. Only made public for access inside template._
     */
    replaceCheckboxDummies(): void;
    /**
     * Maps `NgxMdeOptions` to `MarkdownEditorOptions`.
     */
    private mapOptions;
    /**
     * Applies the custom toolbar or the default toolbar as fallback.
     */
    private applyToolbarItems;
    /**
     * Returns a complete item for all combinations of how a toolbar item can be specified and
     * resolves the current value of internationalized properties. Only returns `undefined` for
     * items specified by name and no such item can be found.
     *
     * In detail, item normalization means (in addition to i18n resolution):
     * - For built-in items specified by name string, resolves the default item.
     * - For built-in items specified partly, completes the object with default values for the missing properties.
     * - For custom items specified partly, completes the object with empty values for the missing properties.
     * - For custom items specified fully, returns as is.
     * - For unknown items specified by name string, returns `undefined`.
     */
    private getNormalizedItem;
    /**
     * Creates tooltips for all configured toolbar items and stores them in `this.toolbarItemTooltips`.
     */
    private createTooltips;
    /**
     * Applies custom shortcuts.
     *
     * For items, whose actions originate in _Markdown Editor Core_, `options.shortcuts` is
     * modified. For items that are specific to _Ngx Markdown Editor_ keybindings are applied to
     * the `<ngx-markdown-editor>` element.
     */
    private applyShortcuts;
    /**
     * Adds the SVG specified inside `item.icon` to the injected `MatIconRegistry` instance.
     */
    private addSvgIcon;
    /**
     * Applies the custom statusbar or the default statusbar as fallback.
     */
    private applyStatusbarItems;
    /**
     * Returns a complete item for all combinations of how a status item can be specified and
     * resolves the current value of internationalized properties. Only returns `undefined` for
     * items specified by name and no such item can be found.
     *
     * In detail, item normalization means (in addition to i18n resolution):
     * - For built-in items specified by name string, resolves the default item.
     * - For custom items, returns as is.
     * - For unknown items specified by name string, returns `undefined`.
     */
    private getNormalizedStatusbarItem;
    /**
     * Executes the `item.isActive()` function for all toolbar items and saves the state in `activeItems`.
     */
    private determineActiveButtons;
    /**
     * Applies the disabled state. If disabled, the full-size preview activated.
     */
    private applyDisabled;
    /**
     * Applies the material theme to both the editor and the preview. Particularly adds / removes
     * an underline element known from Angular Material `mat-input` form fields.
     */
    private applyMaterialStyle;
    /**
     * Adds and removes classes to/from the CodeMirror element according to configuration.
     */
    private setCodeMirrorClasses;
}