@progress/kendo-react-editor/dist/npm/Editor.d.ts

Kendo UI for React Editor package

/// <reference types="prosemirror-model" />
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { EditorState, Plugin, Transaction, EditorView, Schema, Node } from '@progress/kendo-editor-common';
import { EditorUtils } from './utils';
/**
 * Represents the object of the `onChange` Editor event.
 */
export interface EditorChangeEvent {
    /**
     * An event target.
     */
    target: Editor;
    /**
     * Represents the [Editor document](https://prosemirror.net/docs/guide/#doc).
     */
    value: Node;
    /**
     * A getter of the Editor HTML content.
     * Once called, it will convert the Editor document into HTML string.
     * Note that, since onChange event is triggered on every key while typing,
     * this conversion may not be suitable if the Editor is dealing with large amount of content.
     */
    html: string;
    /**
     * The Editor Schema object.
     */
    schema: Schema;
    /**
     * The Transaction which causes the change.
     */
    transaction: Transaction;
}
/**
 * Represents the props of the [KendoReact Editor component]({% slug overview_editor %}).
 */
export interface EditorProps {
    /**
     * Sets the default HTML content of the Editor.
     */
    defaultContent?: string;
    /**
     * Sets the initial edit mode of the Editor. Defaults to `iframe`.
     */
    defaultEditMode?: 'iframe' | 'div';
    /**
     * Sets styles to the content element wrapper of the Editor.
     */
    contentStyle?: React.CSSProperties;
    /**
     * Represents the `dir` HTML attribute.
     */
    dir?: string;
    /**
     * Sets additional classes to the Editor.
     */
    className?: string;
    /**
     * Sets styles to the Editor.
     */
    style?: React.CSSProperties;
    /**
     * Sets the tools of the Editor. By default, the Editor renders no tools.
     */
    tools?: Array<any>;
    /**
     * Fires each time the Editor is about to mount.
     * Useful for configuring the `EditorView` object.
     * To initialize `EditorView`, use the properties of the `event` object.
     */
    onMount?: (event: {
        target: Editor;
        dom: HTMLDivElement;
        plugins: Array<Plugin>;
        shortcuts: EditorUtils.Shortcuts;
        viewProps: {
            state: EditorState;
            [key: string]: any;
        };
    }) => EditorView | void;
    /**
     * Fires each time the Editor is about to insert pasted content.
     * Useful for modifying pasted content.
     */
    onPasteHtml?: (event: {
        target: Editor;
        pastedHtml: string;
    }) => string | void;
    /**
     * Fires each time the Editor is about to apply a transaction.
     * To prevent the transaction, return `false`.
     */
    onExecute?: (event: {
        target: Editor;
        transaction: Transaction;
        state: EditorState;
    }) => boolean | void;
    /**
     * Fires when the Editor's content element has received focus.
     */
    onFocus?: (event: {
        target: Editor;
        nativeEvent: any;
    }) => void;
    /**
     * Fires when the Editor's content element has lost focus.
     */
    onBlur?: (event: {
        target: Editor;
        nativeEvent: any;
    }) => void;
    /**
     * Fires each time the value of the Editor is about to change.
     */
    onChange?: (event: EditorChangeEvent) => void;
    /**
     * The value of the Editor.
     */
    value?: Node | string;
    /**
     * If set to `false`, it will turn off the built-in keyboard navigation of the Editor's Toolbar.
     */
    keyboardNavigation?: boolean;
}
/**
 * @hidden
 */
interface EditorStateInterface {
    view?: EditorView;
    linkDialog?: boolean;
}
/**
 * Represents the [KendoReact Editor component]({% slug overview_editor %}).
 *
 * @example
 * ```jsx
 * class App extends React.Component {
 *    render() {
 *       return (
 *           <Editor
 *               defaultContent="<p>Hello World</p>"
 *               tools={[
 *                  [ EditorTools.Bold, EditorTools.Italic ]
 *               ]}
 *           />
 *       );
 *    }
 * }
 * ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export default class Editor extends React.Component<EditorProps, EditorStateInterface> {
    /**
     * @hidden
     */
    static propTypes: {
        defaultContent: PropTypes.Requireable<string>;
        value: PropTypes.Requireable<string | object>;
        defaultEditMode: PropTypes.Requireable<string>;
        contentStyle: PropTypes.Requireable<object>;
        dir: PropTypes.Requireable<string>;
        className: PropTypes.Requireable<string>;
        style: PropTypes.Requireable<object>;
        tools: PropTypes.Requireable<any[]>;
        keyboardNavigation: PropTypes.Requireable<boolean>;
        onMount: PropTypes.Requireable<(...args: any[]) => any>;
        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
        onChange: PropTypes.Requireable<(...args: any[]) => any>;
        onPasteHtml: PropTypes.Requireable<(...args: any[]) => any>;
        onExecute: PropTypes.Requireable<(...args: any[]) => any>;
    };
    /**
     * @hidden
     */
    readonly state: EditorStateInterface;
    /**
     * The value of the Editor.
     */
    readonly value: Node | string;
    /**
     * Returns the DOM element of the Editor.
     */
    readonly element: HTMLElement;
    /**
     * Returns the content-editable DOM element of the Editor.
     */
    readonly contentElement: HTMLDivElement;
    /**
     * Returns the `view` object of the Editor.
     */
    readonly view: EditorView<any>;
    private _element;
    private _contentElement;
    private iframe;
    private trOnChange;
    private htmlOnChange;
    constructor(props: EditorProps);
    /**
     * @hidden
     */
    componentDidMount(): void;
    /**
     * @hidden
     */
    componentDidUpdate(prevProps: EditorProps): void;
    /**
     * @hidden
     */
    componentWillUnmount(): void;
    /**
     * @hidden
     */
    focus: () => void;
    /**
     * @hidden
     */
    render(): JSX.Element;
    private renderDialog;
    private renderTool;
    private updateTools;
    private initialize;
    private onPasteHtml;
    private dispatchTransaction;
    private onFocus;
    private onBlur;
}
export {};