@progress/kendo-react-editor
Version:
React Editor enables users to create rich text content through a WYSIWYG interface. KendoReact Editor package
371 lines (370 loc) • 15.4 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { ImageResizeOptions as ImageResizeOptionsCommon, Schema, NodeSpec, MarkSpec, Node, NodeType, Mark, MarkType, ParseOptions, EditorView, EditorState, Transaction, Plugin, PluginKey } from '@progress/kendo-editor-common';
import { EditorToolsSettings } from './../config/toolsSettings.js';
import { PasteCleanupSettings } from '../config/pasteSettings.js';
import * as shortcuts from './../config/shortcuts.js';
/**
* Represents a wrapping namespace for the utility functions, `nodes`, and `marks` objects of the Editor.
*/
export declare namespace EditorUtils {
/**
* Aligns the block elements in the selection.
*
* @returns {boolean}—If alignment is applied to any of the elements, returns `true`.
*/
function alignBlocks(view: EditorView, actions: EditorToolsSettings.AlignAction[], command?: EditorToolsSettings.Command): boolean;
/**
* Wraps the selection in a `span` element with inline styles.
*
* @returns {boolean}—If a style is applied to any of the elements, returns `true`.
*/
function applyInlineStyle(view: EditorView, options: {
style: string;
value: string;
}, command?: EditorToolsSettings.Command): boolean;
/**
* Applies the link mark.
*
* @returns {boolean}—If the link is applied, returns `true`.
*/
function applyLink(view: any, options: {
mark: string;
attrs: any;
}, command?: EditorToolsSettings.Command): boolean;
/**
* Checks if any of the `list` elements in the selection can be indented.
*
* @returns {boolean}
*/
function canIndentList(state: EditorState, nodeType: NodeType): boolean;
/**
* Checks if a node can be inserted in the current selection.
*
* @param {EditorState} state—The `state` object of the Editor.
* @param {NodeType} nodeType—The type of the node that will be inserted.
* @returns {boolean}—The node of this type can be inserted in the current selection.
*/
function canInsert(state: EditorState, nodeType: NodeType): boolean;
/**
* Checks if any of the `list` elements in the selection can be outdented.
*
* @returns {boolean}
*/
function canOutdentList(state: EditorState, listsTypes: {
listItem: string;
orderedList: string;
bulletList: string;
}): boolean;
/**
* Converts the MS Word lists into HTML lists.
*
* @param {string} html—The input HTML.
* @returns {string}—The result HTML.
*/
function convertMsLists(html: string): string;
/**
* Creates an Editor document from HTML content.
*
* @param {Schema} schema—The `schema` object of the Editor.
* @param {string} html—The HTML content.
* @param {ParseOptions} parseOptions—The HTML parsing options. Defaults to `{ preserveWhitespace: 'full' }`.
* @returns {Node}—The `document` object of the Editor.
*/
function createDocument(schema: Schema<any, any>, html: string, parseOptions?: ParseOptions): Node;
/**
* Creates a table.
*
* @param {object} tableTypes—An object which contains `table`, `table_row`, and `table_cell` node types.
* @param {number} rows—The number of rows.
* @param {number} columns—The number of columns.
* @returns {Node}—The generated table.
*
* @example
* ```jsx-no-run
* import { EditorUtils } from '@progress/kendo-react-editor';
*
* const nodes = editorRef.view.state.schema.nodes;
* const rows = 3;
* const columns = 4;
*
* const table = EditorUtils.createTable(nodes, rows, columns);
* ```
*/
function createTable(tableTypes: {
table: NodeType;
table_row: NodeType;
table_cell: NodeType;
}, rows: number, columns: number): Node;
/**
* Formats the paragraph and heading nodes in the selection.
*
* @returns {boolean}—If an element is formatted, returns `true`.
*/
function formatBlockElements(view: EditorView, value: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', commandName?: EditorToolsSettings.Command): boolean;
/**
* Returns the paragraph and heading nodes in the selection.
*
* @returns {string[]}
*/
function getBlockFormats(state: EditorState): string[];
/**
* Gets the HTML from the `EditorState` object.
*
* @param {EditorState} state—The `state` object of the Editor or an object containing editor's `doc` and `schema`
*—{ doc: value, schema: value.types.schema } where the `value` variable is the editor's value prop.
* @returns {string}—The HTML content.
*/
function getHtml(state: EditorState | {
doc: Node;
schema: Schema;
}): string;
/**
* @returns {string[]}—An array of matched styles that are found in the selection.
*/
function getInlineStyles(state: EditorState, style: {
name: string;
value: RegExp;
}): string[];
/**
* Returns a mark of the specified type from the nodes in selection.
*
* @returns {Mark}
*/
function getMark(state: EditorState, markType: MarkType): Mark | undefined;
/**
* Checks if according to the specified `InlineFormatOptions` a node in the selection is present.
*
* @returns {boolean}
*/
function hasMark(state: EditorState, options: EditorToolsSettings.InlineFormatOptions): boolean;
/**
* Checks if the selection contains a specific type of node.
*
* @returns {boolean}
*/
function hasNode(state: EditorState, nodeType: NodeType): boolean;
/**
* Indents the block elements in the selection.
*
* @returns {boolean}—If indentation is applied to any of the elements, returns `true`.
*/
function indentBlocks(view: EditorView, actions: EditorToolsSettings.IndentAction[], command?: EditorToolsSettings.Command, dir?: string): boolean;
/**
* Adds new lines after block elements and hard breaks.
*
* @param {string} content—The HTML content.
* @returns {string}—The indented HTML.
*/
function indentHtml(content: string): string;
/**
* Inserts a node in the selection.
*
* @param {EditorView} view—The `view` object of the Editor.
* @param {Node} node—A `node` object of the Editor.
* @param {boolean} scrollIntoView—An optional parameter.
* Defines if the content element will be scrolled to the current selection.
*/
function insertNode(view: EditorView | {
state: EditorState;
dispatch: (tr: Transaction) => void;
}, node: Node, scrollIntoView?: boolean | undefined): void;
/**
* Checks if any of the block elements in the selection is aligned.
*
* @returns {boolean}
*/
function isAligned(state: EditorState, actions: EditorToolsSettings.AlignAction[]): boolean;
/**
* Checks if any of the block elements in the selection is indented.
*
* @returns {boolean}
*/
function isIndented(state: any, actions: EditorToolsSettings.IndentAction[], dir?: string): boolean;
/**
* Removes the comments from the HTML.
*
* @param {string} html—The input HTML.
* @returns {string}—The result HTML.
*
* @example
* ```jsx-no-run
* import { EditorUtils } from '@progress/kendo-react-editor';
* const html = EditorUtils.removeComments('<p>some content<!-- comment --></p>');
* ```
*/
function removeComments(html: string): string;
/**
* Removes the specified tag from the HTML and keeps its child nodes.
*
* @param {string} html—The input HTML.
* @param {string} tag—A tag or multiple tags separated by a vertical slash which will be removed.
* For example, `span` or `b|i|u|span`.
* @returns {string}—The resulting HTML.
*
* @example
* ```jsx-no-run
* import { EditorUtils } from '@progress/kendo-react-editor';
* const html = EditorUtils.removeTag('<p>some <span>content</span></p>', 'span|p');
* ```
*/
function removeTag(html: string, tag: string): string;
/**
* A function for sanitizing the content on paste ([see example](https://www.telerik.com/kendo-react-ui/components/editor/paste)).
*
* @param {string} html—The input HTML.
* @param {PasteCleanupSettings} settings—The settings used for sanitizing the content.
* @returns {string}—The resulting HTML.
*/
function pasteCleanup(html: string, settings: PasteCleanupSettings): string;
/**
* A function for sanitizing the CSS classes of the pasted from MS Word content ([see example](https://www.telerik.com/kendo-react-ui/components/editor/paste)).
* The function will remove any class attribute which value starts with `Mso`.
* For example `<p class="MsoNormal">pasted from MS Word</p>` will result in `<p>pasted from MS Word</p>`.
*
* @param {Attr} attr—The DOM class attribute that will be sanitized.
*/
function sanitizeClassAttr(attr: Attr): void;
/**
* A function for sanitizing the style attributes of the pasted from MS Word content ([see example](https://www.telerik.com/kendo-react-ui/components/editor/paste)).
* The function will loop through all styles and will remove those that are invalid.
* For example `<p><span style='color:#7C7C7C;mso-themecolor:accent3;mso-themeshade:191;background:silver;'>content</span></p>`,
* will result in `<p><span style="color: #7C7C7C; background: silver;">content</span></p>`.
*
* @param {Attr} attr—The DOM style attribute that will be sanitized.
*/
function sanitizeStyleAttr(attr: Attr): void;
/**
* A function that will remove a DOM attribute from the pasted content ([see example](https://www.telerik.com/kendo-react-ui/components/editor/paste)).
*
* @param {Attr} attr—The DOM attribute that will be removed.
*/
function removeAttribute(attr: Attr): void;
/**
* Removes the invalid HTML.
*
* @param {string} html—The HTML which will be sanitized.
* @returns {string}—The sanitized HTML.
*
* @example
* ```jsx-no-run
* import { EditorUtils } from '@progress/kendo-react-editor';
* const html = EditorUtils.sanitize('something pasted from MS Word, containing <o:p>, <w:sdtPr>, <v:shapes tags');
* ```
*/
function sanitize(html: string): string;
/**
* If the input `html` contains images with 'src' pointing to local file system (it happens when pasting images and text from MS Word),
* the function will extract the images sources from the RTF in base64 format and replace them in the input `html`.
*
* @param html—The input HTML (pasted HTML).
* @param clipboardData—The paste event clipboardData object (event.clipboardData).
* @returns—The html with the replaced images sources.
*/
function replaceImageSourcesFromRtf(html: string, clipboardData: DataTransfer): string;
/**
* Creates a plugin which highlights the matches of Find and Replace dialog.
*
* @param {PluginKey} key—The key of the plugin (Optional).
* @returns {Plugin}—The text highlight plugin.
*/
function textHighlight(key?: PluginKey): Plugin;
/**
* The image resizing plugin options.
*/
interface ImageResizeOptions extends ImageResizeOptionsCommon {
}
/**
* Creates a plugin which adds image resizing functionality.
*
* @param {ImageResizeOptions} options—The resizing option (Optional).
* @returns {Plugin}—The image resizing plugin.
*/
function imageResizing(options?: ImageResizeOptions): Plugin;
/**
* Returns a collection of plugins that adds table resizing functionality.
*
* @returns {Plugin[]}—The table resizing plugins.
*/
function tableResizing(): Plugin[];
/**
* Sets the HTML to the `EditorView`.
*
* @param {EditorView} view—The `view` object of the Editor.
* @param {string} html—The HTML content.
* @param {Command} command—An optional parameter.
* Defines the type of the command that will be set to the `setHtml` metadata of the transaction.
* Defaults to `SetContent`.
* @param {ParseOptions} parseOptions—An optional parameter.
* Defines the options that will be used for parsing the HTML. Defaults to `{ preserveWhitespace: 'full' }`.
*/
function setHtml(view: EditorView, html: string, command?: EditorToolsSettings.Command, parseOptions?: ParseOptions): void;
/**
* Toggles the inline element formatting according to the `InlineFormatOptions` and `markAttrs` settings.
*
* @returns {boolean}
*/
function toggleInlineFormat(view: {
state: EditorState;
dispatch: (tr: Transaction) => void;
}, options: EditorToolsSettings.InlineFormatOptions, transaction?: Transaction, markAttrs?: any): boolean;
/**
* Toggles a list of the specified type.
*
* @returns {boolean}
*/
function toggleList(view: EditorView, types: {
listType: string;
orderedList: string;
bulletList: string;
listItem: string;
}, command?: EditorToolsSettings.Command): boolean;
/**
* Represents the `Shortcuts` object.
*/
interface Shortcuts extends shortcuts.Shortcuts {
}
/**
* A function which returns the mapped `Shortcuts` object based on the passed settings.
* Useful when the default Editor nodes or tool settings are changed and the `Shortcuts` object has to be regenerated.
*
* @params—An object which holds specific types of nodes and tool settings that are used by the default `Shortcuts` handlers.
* @returns—An object which holds the shortcuts.
*/
function getShortcuts(settings?: {
types?: {
listItem: string;
hardBreak: string;
};
toolsSettings?: {
bold?: EditorToolsSettings.InlineFormatOptions;
italic?: EditorToolsSettings.InlineFormatOptions;
underline?: EditorToolsSettings.InlineFormatOptions;
};
}): Shortcuts;
/**
* The `PluginKey` used in the Editor to pass editor props to the tools.
*/
const propsKey: PluginKey;
/**
* The `PluginKey` used in the Editor by the image resizing plugin.
*/
const imageResizeKey: PluginKey;
/**
* Represents the `marks` object of the Editor.
*/
const marks: {
[mark: string]: MarkSpec;
};
/**
* Represents the `nodes` object of the Editor.
*/
const nodes: {
[node: string]: NodeSpec;
};
}