@progress/kendo-react-editor 13.3.0-develop.9 → 13.4.0-develop.1

package/utils/index.d.ts

@@ -0,0 +1,370 @@
+/**
+ * @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&mdash;An object which contains `table`, `table_row`, and `table_cell` node types.
+     * @param {number} rows&mdash;The number of rows.
+     * @param {number} columns&mdash;The number of columns.
+     * @returns {Node}&mdash;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}&mdash;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&mdash;The `state` object of the Editor or an object containing editor's `doc` and `schema`
+     *&mdash;{ doc: value, schema: value.types.schema } where the `value` variable is the editor's value prop.
+     * @returns {string}&mdash;The HTML content.
+     */
+    function getHtml(state: EditorState | {
+        doc: Node;
+        schema: Schema;
+    }): string;
+    /**
+     * @returns {string[]}&mdash;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}&mdash;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&mdash;The HTML content.
+     * @returns {string}&mdash;The indented HTML.
+     */
+    function indentHtml(content: string): string;
+    /**
+     * Inserts a node in the selection.
+     *
+     * @param {EditorView} view&mdash;The `view` object of the Editor.
+     * @param {Node} node&mdash;A `node` object of the Editor.
+     * @param {boolean} scrollIntoView&mdash;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&mdash;The input HTML.
+     * @returns {string}&mdash;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&mdash;The input HTML.
+     * @param {string} tag&mdash;A tag or multiple tags separated by a vertical slash which will be removed.
+     * For example, `span` or `b|i|u|span`.
+     * @returns {string}&mdash;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&mdash;The input HTML.
+     * @param {PasteCleanupSettings} settings&mdash;The settings used for sanitizing the content.
+     * @returns {string}&mdash;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&mdash;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&mdash;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&mdash;The DOM attribute that will be removed.
+     */
+    function removeAttribute(attr: Attr): void;
+    /**
+     * Removes the invalid HTML.
+     *
+     * @param {string} html&mdash;The HTML which will be sanitized.
+     * @returns {string}&mdash;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&mdash;The input HTML (pasted HTML).
+     * @param clipboardData&mdash;The paste event clipboardData object (event.clipboardData).
+     * @returns&mdash;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&mdash;The key of the plugin (Optional).
+     * @returns {Plugin}&mdash;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&mdash;The resizing option (Optional).
+     * @returns {Plugin}&mdash;The image resizing plugin.
+     */
+    function imageResizing(options?: ImageResizeOptions): Plugin;
+    /**
+     * Returns a collection of plugins that adds table resizing functionality.
+     *
+     * @returns {Plugin[]}&mdash;The table resizing plugins.
+     */
+    function tableResizing(): Plugin[];
+    /**
+     * Sets the HTML to the `EditorView`.
+     *
+     * @param {EditorView} view&mdash;The `view` object of the Editor.
+     * @param {string} html&mdash;The HTML content.
+     * @param {Command} command&mdash;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&mdash;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&mdash;An object which holds specific types of nodes and tool settings that are used by the default `Shortcuts` handlers.
+     * @returns&mdash;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;
+    };
+}

package/utils/props-key.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PluginKey } from '@progress/kendo-editor-common';
+/**
+ * @hidden
+ */
+export declare const editorPropsKey: PluginKey<any>;