@progress/kendo-react-editor
Version:
Kendo UI for React Editor package
329 lines (328 loc) • 13.3 kB
TypeScript
/// <reference types="prosemirror-model" />
import * as shortcuts from './../config/shortcuts';
import { Schema, NodeSpec, MarkSpec, Node, NodeType, Mark, MarkType, ParseOptions, EditorView, EditorState, Transaction, Plugin, PluginKey } from '@progress/kendo-editor-common';
import { EditorToolsSettings } from './../config/toolsSettings';
import { PasteCleanupSettings } from '../config/pasteSettings';
/**
* 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<any>, 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<any>, 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<any>, nodeType: NodeType<any>): 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<any>, nodeType: NodeType<any>): boolean;
/**
* Checks if any of the `list` elements in the selection can be outdented.
*
* @returns {boolean}
*/
function canOutdentList(state: EditorState<any>, 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<any>): Node<any>;
/**
* 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<any>} - 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<any>;
table_row: NodeType<any>;
table_cell: NodeType<any>;
}, rows: number, columns: number): Node<any>;
/**
* Formats the paragraph and heading nodes in the selection.
*
* @returns {boolean} - If an element is formatted, returns `true`.
*/
function formatBlockElements(view: EditorView<any>, 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<any>): 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<any> | {
doc: Node;
schema: Schema;
}): string;
/**
* @returns {string[]} - An array of matched styles that are found in the selection.
*/
function getInlineStyles(state: EditorState<any>, style: {
name: string;
value: RegExp;
}): string[];
/**
* Returns a mark of the specified type from the nodes in selection.
*
* @returns {Mark<any>}
*/
function getMark(state: EditorState<any>, markType: MarkType<any>): Mark<any>;
/**
* Checks if according to the specified `InlineFormatOptions` a node in the selection is present.
*
* @returns {boolean}
*/
function hasMark(state: EditorState<any>, options: EditorToolsSettings.InlineFormatOptions): boolean;
/**
* Checks if the selection contains a specific type of node.
*
* @returns {boolean}
*/
function hasNode(state: EditorState<any>, nodeType: NodeType<any>): 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<any>, 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<any> | {
state: EditorState<any>;
dispatch: (tr: Transaction<any>) => void;
}, node: Node<any>, scrollIntoView?: boolean | undefined): void;
/**
* Checks if any of the block elements in the selection is aligned.
*
* @returns {boolean}
*/
function isAligned(state: EditorState<any>, 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]({% slug paste_editor %})).
*
* @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]({% slug paste_editor %})).
* 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]({% slug paste_editor %})).
* 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]({% slug paste_editor %})).
*
* @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;
/**
* 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;
/**
* 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<any>, html: string, command?: EditorToolsSettings.Command, parseOptions?: ParseOptions<any>): void;
/**
* Toggles the inline element formatting according to the `InlineFormatOptions` and `markAttrs` settings.
*
* @returns {boolean}
*/
function toggleInlineFormat(view: {
state: EditorState<any>;
dispatch: (tr: Transaction<any>) => void;
}, options: EditorToolsSettings.InlineFormatOptions, transaction?: Transaction<any>, markAttrs?: any): boolean;
/**
* Toggles a list of the specified type.
*
* @returns {boolean}
*/
function toggleList(view: EditorView<any>, 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;
/**
* Represents the `marks` object of the Editor.
*/
const marks: {
[mark: string]: MarkSpec;
};
/**
* Represents the `nodes` object of the Editor.
*/
const nodes: {
[node: string]: NodeSpec;
};
}