@progress/kendo-vue-editor
Version:
1,433 lines (1,416 loc) • 65.2 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { addColSpan } from '@progress/kendo-editor-common';
import { addColumn } from '@progress/kendo-editor-common';
import { addListNodes } from '@progress/kendo-editor-common';
import { AddMarkStep } from '@progress/kendo-editor-common';
import { addRow } from '@progress/kendo-editor-common';
import { AllSelection } from '@progress/kendo-editor-common';
import { autoJoin } from '@progress/kendo-editor-common';
import { ButtonProps } from '@progress/kendo-vue-buttons';
import { canJoin } from '@progress/kendo-editor-common';
import { canSplit } from '@progress/kendo-editor-common';
import { cellAround } from '@progress/kendo-editor-common';
import { CellSelection } from '@progress/kendo-editor-common';
import { chainCommands } from '@progress/kendo-editor-common';
import { colCount } from '@progress/kendo-editor-common';
import { ColorPickerChangeEvent } from '@progress/kendo-vue-inputs';
import { columnIsHeader } from '@progress/kendo-editor-common';
import { columnResizing } from '@progress/kendo-editor-common';
import { Command } from 'prosemirror-state';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { ContentMatch } from '@progress/kendo-editor-common';
import { Decoration } from '@progress/kendo-editor-common';
import { DecorationSet } from '@progress/kendo-editor-common';
import { DefineComponent } from 'vue';
import { deleteRow } from '@progress/kendo-editor-common';
import { deleteTable } from '@progress/kendo-editor-common';
import { DOMParser as DOMParser_2 } from '@progress/kendo-editor-common';
import { DOMSerializer } from '@progress/kendo-editor-common';
import { dropCursor } from '@progress/kendo-editor-common';
import { DropDownListChangeEvent } from '@progress/kendo-vue-dropdowns';
import { dropPoint } from '@progress/kendo-editor-common';
import { EditorState } from '@progress/kendo-editor-common';
import { EditorView } from '@progress/kendo-editor-common';
import { EditorView as EditorView_2 } from 'prosemirror-view';
import { ExtractPropTypes } from 'vue';
import { findCell } from '@progress/kendo-editor-common';
import { findWrapping } from '@progress/kendo-editor-common';
import { fixTables } from '@progress/kendo-editor-common';
import { Fragment } from '@progress/kendo-editor-common';
import { gapCursor } from '@progress/kendo-editor-common';
import { goToNextCell } from '@progress/kendo-editor-common';
import { history as history_2 } from '@progress/kendo-editor-common';
import { ImageResizeOptions } from '@progress/kendo-editor-common';
import { InputRule } from '@progress/kendo-editor-common';
import { inputRules } from '@progress/kendo-editor-common';
import { inSameTable } from '@progress/kendo-editor-common';
import { insertPoint } from '@progress/kendo-editor-common';
import { isInTable } from '@progress/kendo-editor-common';
import { joinPoint } from '@progress/kendo-editor-common';
import { keydownHandler } from '@progress/kendo-editor-common';
import { keymap } from '@progress/kendo-editor-common';
import { liftListItem } from '@progress/kendo-editor-common';
import { liftTarget } from '@progress/kendo-editor-common';
import { Mapping } from '@progress/kendo-editor-common';
import { MapResult } from '@progress/kendo-editor-common';
import { Mark } from '@progress/kendo-editor-common';
import { MarkSpec } from '@progress/kendo-editor-common';
import { MarkType } from '@progress/kendo-editor-common';
import { mergeCells } from '@progress/kendo-editor-common';
import { moveCellForward } from '@progress/kendo-editor-common';
import { nextCell } from '@progress/kendo-editor-common';
import { Node as Node_2 } from '@progress/kendo-editor-common';
import { NodeRange } from '@progress/kendo-editor-common';
import { NodeSelection } from '@progress/kendo-editor-common';
import { NodeSpec } from 'prosemirror-model';
import { NodeSpec as NodeSpec_2 } from '@progress/kendo-editor-common';
import { NodeType } from '@progress/kendo-editor-common';
import { ParseOptions } from '@progress/kendo-editor-common';
import { PasteCleanupSettings as PasteCleanupSettings_2 } from '@progress/kendo-editor-common';
import { PDFExportProps } from '@progress/kendo-vue-pdf';
import { Plugin as Plugin_2 } from '@progress/kendo-editor-common';
import { PluginKey } from '@progress/kendo-editor-common';
import { PropType } from 'vue';
import { PublicProps } from 'vue';
import { redoDepth } from '@progress/kendo-editor-common';
import { removeColSpan } from '@progress/kendo-editor-common';
import { RemoveMarkStep } from '@progress/kendo-editor-common';
import { ReplaceAroundStep } from '@progress/kendo-editor-common';
import { ReplaceError } from '@progress/kendo-editor-common';
import { ReplaceStep } from '@progress/kendo-editor-common';
import { replaceStep } from '@progress/kendo-editor-common';
import { ResolvedPos } from '@progress/kendo-editor-common';
import { rowIsHeader } from '@progress/kendo-editor-common';
import { Schema } from '@progress/kendo-editor-common';
import { selectedRect } from '@progress/kendo-editor-common';
import { Selection as Selection_2 } from '@progress/kendo-editor-common';
import { selectionCell } from '@progress/kendo-editor-common';
import { SelectionRange } from '@progress/kendo-editor-common';
import { setBlockType } from '@progress/kendo-editor-common';
import { setCellAttr } from '@progress/kendo-editor-common';
import { sinkListItem } from '@progress/kendo-editor-common';
import { Slice } from '@progress/kendo-editor-common';
import { splitCell } from '@progress/kendo-editor-common';
import { splitCellWithType } from '@progress/kendo-editor-common';
import { splitListItem } from '@progress/kendo-editor-common';
import { Step } from '@progress/kendo-editor-common';
import { StepMap } from '@progress/kendo-editor-common';
import { StepResult } from '@progress/kendo-editor-common';
import { tableEditing } from '@progress/kendo-editor-common';
import { TableMap } from '@progress/kendo-editor-common';
import { tableNodes } from '@progress/kendo-editor-common';
import { tableNodeTypes } from '@progress/kendo-editor-common';
import { textblockTypeInputRule } from '@progress/kendo-editor-common';
import { TextSelection } from '@progress/kendo-editor-common';
import { toggleHeader } from '@progress/kendo-editor-common';
import { toggleMark } from '@progress/kendo-editor-common';
import { Transaction } from '@progress/kendo-editor-common';
import { Transform } from '@progress/kendo-editor-common';
import { undoDepth } from '@progress/kendo-editor-common';
import { updateColumnsOnResize } from '@progress/kendo-editor-common';
import { wrapIn } from '@progress/kendo-editor-common';
import { wrapInList } from '@progress/kendo-editor-common';
import { wrappingInputRule } from '@progress/kendo-editor-common';
/**
* @hidden
*/
export declare const Align: DefineComponent< {}, {}, {}, {}, {
handleClick(): boolean | void;
preventDefault(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {} | {
[x: string]: any;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const ApplyColor: DefineComponent<ExtractPropTypes< {
view: PropType<EditorView_2>;
color: PropType<string>;
colorPickerProps: PropType<any>;
commandName: PropType<string>;
dir: PropType<String>;
ariaLabel: PropType<String>;
}>, {}, {}, {}, {
onChange(event: ColorPickerChangeEvent): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
view: PropType<EditorView_2>;
color: PropType<string>;
colorPickerProps: PropType<any>;
commandName: PropType<string>;
dir: PropType<String>;
ariaLabel: PropType<String>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
declare interface BasicToolProps {
/**
* The `EditorView` object of the Editor component.
*/
view?: EditorView;
}
/**
* @hidden
*/
export declare const CleanFormatting: DefineComponent< {}, {}, {}, {}, {
handleClick(): void;
preventDefault(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {} | {
[x: string]: any;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the [Kendo UI for Vue Editor component]({% slug overview_editor %}).
*
* ```jsx
* <template>
* <div>
* <Editor
* :tools="tools"
* :content-style="{
* height: '690px',
* }"
* :default-content="content"
* />
* </div>
* </template>
*
* <script>
* import { Editor } from "@progress/kendo-vue-editor";
* import content from "./content-overview";
*
* export default {
* components: {
* Editor,
* },
* data() {
* return {
* tools: [
* ["Bold", "Italic", "Underline", "Strikethrough"],
* ["Subscript", "Superscript"],
* ["AlignLeft", "AlignCenter", "AlignRight", "AlignJustify"],
* ["Indent", "Outdent"],
* ["OrderedList", "UnorderedList"],
* "FontSize",
* "FontName",
* "FormatBlock",
* ["Undo", "Redo"],
* ["Link", "Unlink", "InsertImage", "ViewHtml"],
* ["InsertTable"],
* ["AddRowBefore", "AddRowAfter", "AddColumnBefore", "AddColumnAfter"],
* ["DeleteRow", "DeleteColumn", "DeleteTable"],
* ["MergeCells", "SplitCell"],
* ],
* content: content,
* };
* },
* };
* </script>
* ```
*
*
*
* ### props <span class='code'>Readonly<[EditorProps]({% slug api_editor_editorprops %})</span>
* The props of the Editor component.
*
* ### contentElement <span class='code'>HTMLDivElement</span>
* Returns the content-editable DOM element of the Editor.
*
* ### element <span class='code'>HTMLElement</span>
* Returns the DOM element of the Editor.
*
* ### value <span class='code'>Node | string</span>
* The value of the Editor.
*
* ### view <span class='code'>EditorView<any></span>
* Returns the `view` object of the Editor.
*/
export declare const Editor: DefineComponent<ExtractPropTypes< {
defaultContent: PropType<string>;
value: PropType<string | Node_2>;
defaultEditMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
contentStyle: PropType<object>;
dir: PropType<string>;
tools: PropType<any[]>;
keyboardNavigation: {
type: PropType<boolean>;
default: boolean;
};
resizable: PropType<boolean>;
preserveWhitespace: {
type: PropType<string | boolean>;
default: string;
validator: (value: any) => any;
};
pasteHtml: PropType<(event: EditorPasteEvent) => string | void>;
extendView: PropType<(event: EditorMountEvent) => void | EditorView>;
ariaDescribedBy: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaLabel: PropType<string>;
}>, {}, {
updateGuid: any;
view: any;
linkDialog: boolean;
showLicenseWatermark: boolean;
licenseMessage: any;
}, {}, {
getView(): any;
getHTML(): string;
setHTML(value: string): void;
focus(): void;
updateTools(view: any): void;
iframeLoad(): void;
initialize(): void;
filterTransaction(transaction: Transaction, state: EditorState): true;
onPasteHtml(html: string): string;
dispatchTransaction(transaction: Transaction): void;
onFocus(_view: any, e: FocusEvent): false;
onBlur(_view: any, e: FocusEvent): false;
onPaste(_view: any, nativeEvent: any): false;
handleClose(): void;
computedValue(): any;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
focus: any;
blur: any;
change: any;
loaded: any;
execute: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
defaultContent: PropType<string>;
value: PropType<string | Node_2>;
defaultEditMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
contentStyle: PropType<object>;
dir: PropType<string>;
tools: PropType<any[]>;
keyboardNavigation: {
type: PropType<boolean>;
default: boolean;
};
resizable: PropType<boolean>;
preserveWhitespace: {
type: PropType<string | boolean>;
default: string;
validator: (value: any) => any;
};
pasteHtml: PropType<(event: EditorPasteEvent) => string | void>;
extendView: PropType<(event: EditorMountEvent) => void | EditorView>;
ariaDescribedBy: PropType<string>;
ariaLabelledBy: PropType<string>;
ariaLabel: PropType<string>;
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onChange?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onLoaded?: (...args: any[] | unknown[]) => any;
onExecute?: (...args: any[] | unknown[]) => any;
}>, {
keyboardNavigation: boolean;
preserveWhitespace: string | boolean;
defaultEditMode: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the object of the `onBlur` Editor event.
*/
export declare interface EditorBlurEvent extends EditorEvent {
/**
* The native blur event.
*/
event: FocusEvent;
}
/**
* Represents the object of the `onChange` Editor event.
*/
export declare interface EditorChangeEvent extends EditorEvent {
/**
* Represents the [Editor document](https://prosemirror.net/docs/guide/#doc).
*/
value: Node_2;
/**
* 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;
}
declare interface EditorEvent {
/**
* An event target.
*/
target: any;
}
/**
* Represents the object of the `onExecute` Editor event.
*/
export declare interface EditorExecuteEvent extends EditorEvent {
/**
* The transaction that will be executed.
*/
transaction: Transaction;
/**
* The state of the Editor.
*/
state: EditorState;
}
/**
* Represents the object of the `onFocus` Editor event.
*/
export declare interface EditorFocusEvent extends EditorEvent {
/**
* The native focus event.
*/
event: FocusEvent;
}
/**
* Represents the object of the `onMount` Editor event.
*/
export declare interface EditorMountEvent extends EditorEvent {
/**
* The content-editable DOM element of the Editor.
*/
dom: HTMLDivElement;
/**
* The default plugins collection of the Editor.
*/
plugins: Array<Plugin_2>;
/**
* The default key bindings of the Editor.
*/
shortcuts: EditorUtils.Shortcuts;
/**
* The default [viewProps](https://prosemirror.net/docs/ref/#view.DirectEditorProps) object of the Editor.
*/
viewProps: {
state: EditorState;
[key: string]: any;
};
}
/**
* Represents the object of the `onPaste` Editor event.
*/
export declare interface EditorPasteEvent extends EditorEvent {
/**
* The HTML that will be pasted in the Editor.
*/
pastedHtml: string;
/**
* The native paste event.
*/
event: ClipboardEvent;
}
/**
* Represents the props of the [Kendo UI for Vue Editor component]({% slug overview_editor %}).
*/
export declare 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' | string;
/**
* Sets styles to the content element wrapper of the Editor.
*/
contentStyle?: object;
/**
* Represents the `dir` HTML attribute.
*/
dir?: string;
/**
* Specifies if the Editor will be resizable.
*/
resizable?: boolean;
/**
* Sets the tools of the Editor. By default, the Editor renders no tools.
*/
tools?: Array<any>;
/**
* A funciton that fires each time the Editor is about to insert pasted content.
* Useful for modifying pasted content.
*/
pasteHtml?: (event: EditorPasteEvent) => string | void;
/**
* 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.
*/
extendView?: (event: EditorMountEvent) => EditorView | void;
/**
* 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.
*/
onLoaded?: (event: EditorMountEvent) => EditorView | void;
/**
* Fires each time the Editor is about to apply a transaction.
* To prevent the transaction, return `false`.
*/
onExecute?: (event: EditorExecuteEvent) => boolean | void;
/**
* Fires when the Editor's content element has received focus.
*/
onFocus?: (event: EditorFocusEvent) => void;
/**
* Fires when the Editor's content element has lost focus.
*/
onBlur?: (event: EditorBlurEvent) => void;
/**
* Fires each time the value of the Editor is about to change.
*/
onChange?: (event: EditorChangeEvent) => void;
/**
* The value of the Editor.
*/
value?: Node_2 | string;
/**
* If set to `false`, it will turn off the built-in keyboard navigation of the Editor's Toolbar.
*/
keyboardNavigation?: boolean;
/**
* Defines the options that will be used for parsing the HTML.
* If `false` is set, the whitespace is collapsed as per HTML's rules.
* Pass `true` to preserve whitespace, but normalize newlines to spaces.
* `full` will preserve whitespace entirely.
*
* Defaults to `full`.
*/
preserveWhitespace?: boolean | 'full' | string;
/**
* Identifies the element(s) which will describe the component, similar
* to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* The accessible label of the component.
*/
ariaLabel?: string;
}
/**
* Represents a wrapping namespace for the tool components, props, and functions of the Editor.
*/
export declare namespace EditorTools {
/**
* The props for the Align tool component of the Editor.
*/
export interface AlignToolProps extends ToolProps {
}
/**
* The props for the AlignLeft tool component of the Editor.
*/
export interface AlignLeftProps extends AlignToolProps {
}
/**
* The props for the AlignRight tool component of the Editor.
*/
export interface AlignRightProps extends AlignToolProps {
}
/**
* The props for the AlignCenter tool component of the Editor.
*/
export interface AlignCenterProps extends AlignToolProps {
}
/**
* The props for the AlignJustify tool component of the Editor.
*/
export interface AlignJustifyProps extends AlignToolProps {
}
/**
* The props for the Print tool component of the Editor.
*/
export interface PrintProps extends PrintProps {
}
/**
* The props for the Export to PDF tool component of the Editor.
*/
export interface PdfProps extends PdfProps {
}
/**
* The props for the AddRowBefore tool component of the Editor.
*/
export interface AddRowBeforeProps extends TableEditNS.AddRowBeforeProps {
}
/**
* The props for the AddRowAfter tool component of the Editor.
*/
export interface AddRowAfterProps extends TableEditNS.AddRowAfterProps {
}
/**
* The props for the AddColumnBefore tool component of the Editor.
*/
export interface AddColumnBeforeProps extends TableEditNS.AddColumnBeforeProps {
}
/**
* The props for the AddColumnAfter tool component of the Editor.
*/
export interface AddColumnAfterProps extends TableEditNS.AddColumnAfterProps {
}
/**
* The props for the DeleteRow tool component of the Editor.
*/
export interface DeleteRowProps extends TableEditNS.DeleteRowProps {
}
/**
* The props for the DeleteColumn tool component of the Editor.
*/
export interface DeleteColumnProps extends TableEditNS.DeleteColumnProps {
}
/**
* The props for the DeleteTable tool component of the Editor.
*/
export interface DeleteTableProps extends TableEditNS.DeleteTableProps {
}
/**
* The props for the MergeCells tool component of the Editor.
*/
export interface MergeCellsProps extends TableEditNS.MergeCellsProps {
}
/**
* The props for the SplitCell tool component of the Editor.
*/
export interface SplitCellProps extends TableEditNS.SplitCellProps {
}
/**
* The props for the FindAndReplace tool component of the Editor.
*/
export interface FindAndReplaceProps extends FindAndReplaceProps {
}
}
/**
* Represents a wrapping namespace for the tool settings of the Editor.
*/
export declare namespace EditorToolsSettings {
/**
* The type of the Editor command.
*/
export type Command = 'Bold' | 'Italic' | 'Underline' | 'Strikethrough' | 'Subscript' | 'Superscript' | 'Undo' | 'Redo' | 'Link' | 'Unlink' | 'InsertImage' | 'InsertFile' | 'AlignLeft' | 'AlignCenter' | 'AlignRight' | 'AlignJustify' | 'AlignRemove' | 'OrderedList' | 'UnorderedList' | 'Indent' | 'Outdent' | 'SetContent' | 'FontSize' | 'FontName' | 'ForeColor' | 'BackColor' | 'FormatBlock' | 'InsertTable' | 'AddRowBefore' | 'AddRowAfter' | 'AddColumnBefore' | 'AddColumnAfter' | 'DeleteRow' | 'DeleteColumn' | 'DeleteTable' | 'MergeCells' | 'SplitCell' | 'CleanFormatting' | 'Custom';
/**
* The settings of the toolbar tools.
*/
export interface ToolSettings {
/**
* The props which will be added to the Button component of the tool.
*/
props: ButtonProps;
/**
* The keys of the messages that are used by the tool.
*/
messages: {
[key: string]: string;
};
/**
* The name of the command that is used by the tool.
*/
commandName?: Command;
command?: any;
}
/**
* The `AlignAction` object.
*/
export interface AlignAction {
/**
* The name of the target node.
*/
node: string;
/**
* The styles that will be applied to the target node.
*/
style: Array<{
name: string;
value: string;
}>;
}
/**
* The settings of the Align tool.
*/
export interface AlignSettings extends ToolSettings {
/**
* A collection of `AlignAction` objects which defines the behavior of the Align tool.
*/
actions: Array<AlignAction>;
}
/**
* The settings of the Style tool which is presented by a DropDownList component.
*/
export interface StyleDropDownListSettings {
/**
* The name of the style which will be added or removed by the Style tool.
*/
style: string;
/**
* The default item of the Style tool.
*/
defaultItem: {
text: string;
value: string;
localizationKey?: string;
};
/**
* The data items of the Style tool.
*/
items: Array<{
text: string;
value: string;
style?: {};
}>;
/**
* The name of the command that is used by the Style tool.
*/
commandName?: Command;
}
/**
* The settings of the FormatBlock tool which is presented by a DropDownList.
*/
export interface FormatBlockDropDownListSettings {
/**
* The default item of the FormatBlock tool.
*/
defaultItem: {
text: string;
value: string;
localizationKey?: string;
};
/**
* The data items of the FormatBlock tool.
*/
items: Array<{
text: string;
value: string;
style?: {};
}>;
/**
* The name of the command that is used by the FormatBlock tool.
*/
commandName?: Command;
}
/**
* The inline-formatting options.
*/
export interface InlineFormatOptions {
/**
* The mark which will be applied or stripped.
*/
mark: string;
/**
* The additional marks which will be stripped.
*/
altMarks?: Array<string>;
/**
* An object which holds the style that will be stripped by the tool.
*/
altStyle?: {
/**
* The name of the style.
*/
name: string;
/**
* The regular expression which will be matched with the value of the style.
*/
value: RegExp;
};
}
/**
* The settings of the tool which applies inline formatting.
*/
export interface InlineFormatSettings extends ToolSettings, InlineFormatOptions {
}
/**
* The settings of the ForeColor and BackColor tools.
*/
export interface ApplyColorSettings {
/**
* The applied style by the tool (`color` or `background-color`).
*/
color: string;
/**
* The props of the underlying [Kendo UI for Vue ColorPicker component]({% slug overview_colorpicker %}).
*/
colorPickerProps: any;
/**
* The name of the applied command.
*/
commandName: string;
/**
* The dir of the applied command.
*/
dir?: String;
/**
* The ariaLabel of the applied command.
*/
ariaLabel?: String;
}
/**
* The setting of the IndentAction tool.
*/
export interface IndentAction {
node: string;
style: string;
rtlStyle: string;
step: number;
unit: string;
}
/**
* The settings of the tool which applies indentation.
*/
export interface IndentationSettings extends ToolSettings {
actions: Array<IndentAction>;
/**
* The list node types of the Indent and Outdent tools.
*/
listsTypes: {
orderedList: string;
bulletList: string;
listItem: string;
};
}
/**
* The settings of the Link tool or dialog.
*/
export interface LinkSettings extends ToolSettings {
mark: string;
linkTarget?: boolean;
}
/**
* The settings of the Unlink tool.
*/
export interface UnlinkSettings extends ToolSettings {
mark: string;
}
/**
* The settings of the InsertFile tool or dialog.
*/
export interface InsertFileSettings extends LinkSettings {
}
/**
* The settings of the tool which toggles lists.
*/
export interface ListSettings extends ToolSettings {
/**
* The list type of the tool.
*/
listType: string;
/**
* The types of the list nodes that are used by the tool.
*/
types: {
orderedList: string;
bulletList: string;
listItem: string;
};
}
/**
* The settings of the InsertTable tool.
*/
export interface InsertTableSettings extends ToolSettings {
}
/**
* The settings of the AddRowBefore tool.
*/
export interface AddRowBeforeSettings extends ToolSettings {
}
/**
* The settings of the AddRowAfter tool.
*/
export interface AddRowAfterSettings extends ToolSettings {
}
/**
* The settings of the AddColumnBefore tool.
*/
export interface AddColumnBeforeSettings extends ToolSettings {
}
/**
* The settings of the AddColumnAfter tool.
*/
export interface AddColumnAfterSettings extends ToolSettings {
}
/**
* The settings of the DeleteRow tool.
*/
export interface DeleteRowSettings extends ToolSettings {
}
/**
* The settings of the DeleteColumn tool.
*/
export interface DeleteColumnSettings extends ToolSettings {
}
/**
* The settings of the DeleteTable tool.
*/
export interface DeleteTableSettings extends ToolSettings {
}
/**
* The settings of the MergeCells tool.
*/
export interface MergeCellsSettings extends ToolSettings {
}
/**
* The settings of the SplitCell tool.
*/
export interface SplitCellSettings extends ToolSettings {
}
/**
* The settings of the Print tool.
*/
export interface PrintSettings extends ToolSettings {
}
/**
* The settings of the SelectAll tool.
*/
export interface SelectAllSettings extends ToolSettings {
}
/**
* The settings of the Pdf tool.
*/
export interface PdfSettings extends ToolSettings {
}
/**
* The settings of the CleanFormatting tool.
*/
export interface CleanFormattingSettings extends ToolSettings {
}
/**
* The settings of the InsertImage tool or dialog.
*/
export interface ImageSettings extends ToolSettings {
node: string;
}
/**
* The settings of the ViewHtml tool or dialog.
*/
export interface ViewHtmlSettings extends ToolSettings {
}
/**
* The settings of the Find and Replace tool or dialog.
*/
export interface FindReplaceSettings extends ToolSettings {
}
/**
* The object of the Bold tool settings.
*/
const bold: InlineFormatSettings;
/**
* The object of the Italic tool settings.
*/
const italic: InlineFormatSettings;
/**
* The object of the Underline tool settings.
*/
const underline: InlineFormatSettings;
/**
* The object of the Strikethrough tool settings.
*/
const strikethrough: InlineFormatSettings;
/**
* The object of the Subscript tool settings.
*/
const subscript: InlineFormatSettings;
/**
* The object of the Superscript tool settings.
*/
const superscript: InlineFormatSettings;
/**
* The object of the Link tool settings.
*/
const link: LinkSettings;
/**
* The object of the Link tool settings.
*/
const insertFile: InsertFileSettings;
/**
* The object of the InsertTable tool settings.
*/
const insertTable: InsertTableSettings;
/**
* The object of the AddRowBefore tool settings.
*/
const addRowBefore: AddRowBeforeSettings;
/**
* The object of the AddRowAfter tool settings.
*/
const addRowAfter: AddRowAfterSettings;
/**
* The object of the AddColumnBefore tool settings.
*/
const addColumnBefore: AddColumnBeforeSettings;
/**
* The object of the AddColumnAfter tool settings.
*/
const addColumnAfter: AddColumnAfterSettings;
/**
* The object of the DeleteRow tool settings.
*/
const deleteRow: DeleteRowSettings;
/**
* The object of the DeleteColumn tool settings.
*/
const deleteColumn: DeleteColumnSettings;
/**
* The object of the DeleteTable tool settings.
*/
const deleteTable: DeleteTableSettings;
/**
* The object of the MergeCells tool settings.
*/
const mergeCells: MergeCellsSettings;
/**
* The object of the SplitCell tool settings.
*/
const splitCell: SplitCellSettings;
/**
* The object of the Print tool settings.
*/
const print: PrintSettings;
/**
* The object of the Print tool settings.
*/
const selectAll: SelectAllSettings;
/**
* The object of the Print tool settings.
*/
const pdf: PdfSettings;
/**
* The PDF export options.
*
* const savePdfOptions = {
* fileName: 'editor.pdf',
* paperSize: 'A4',
* margin: '1cm'
* };
*/
const savePdfOptions: PDFExportProps;
/**
* The object of the CleanFormatting tool settings.
*/
const cleanFormatting: CleanFormattingSettings;
/**
* The object of the InsertImage tool settings.
*/
const image: ImageSettings;
/**
* The object of the ViewHtml tool settings.
*/
const viewHtml: ViewHtmlSettings;
/**
* The object of the Find and Replace tool settings.
*/
const findAndReplace: FindReplaceSettings;
/**
* The object of the Unlink tool settings.
*/
const unlink: UnlinkSettings;
/**
* The object of the Undo tool settings.
*/
const undo: ToolSettings;
/**
* The object of the Redo tool settings.
*/
const redo: ToolSettings;
/**
* The object of the FontSize tool settings.
*/
const fontSize: StyleDropDownListSettings;
/**
* The object of the FontName tool settings.
*/
const fontName: StyleDropDownListSettings;
/**
* The object of the FormatBlock tool settings.
*/
const formatBlock: FormatBlockDropDownListSettings;
/**
* The object of the ForeColor tool settings.
*/
const foreColor: ApplyColorSettings;
/**
* The object of the BackColor tool settings.
*/
const backColor: ApplyColorSettings;
/**
* The object of the AlignLeft tool settings.
*/
const alignLeft: AlignSettings;
/**
* The object of the AlignRight tool settings.
*/
const alignRight: AlignSettings;
/**
* The object of the AlignCenter tool settings.
*/
const alignCenter: AlignSettings;
/**
* The object of the AlignJustify tool settings.
*/
const alignJustify: AlignSettings;
/**
* The object of the AlignRemove tool settings.
*/
const alignRemove: AlignSettings;
/**
* The object of the Indent tool settings.
*/
const indent: IndentationSettings;
/**
* The object of the Outdent tool settings.
*/
const outdent: IndentationSettings;
/**
* The object of the OrderedList tool settings.
*/
const orderedList: ListSettings;
/**
* The object of the UnorderedList tool settings.
*/
const bulletList: ListSettings;
}
/**
* 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`.
*/
export 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`.
*/
export 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`.
*/
export 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}
*/
export 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.
*/
export function canInsert(state: EditorState, nodeType: NodeType): boolean;
/**
* Checks if any of the `list` elements in the selection can be outdented.
*
* @returns {boolean}
*/
export 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.
*/
export 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.
*/
export function createDocument(schema: Schema<any, any>, html: string, parseOptions?: ParseOptions): Node_2;
/**
* 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-vue-editor';
*
* const nodes = editorRef.view.state.schema.nodes;
* const rows = 3;
* const columns = 4;
*
* const table = EditorUtils.createTable(nodes, rows, columns);
* ```
*/
export function createTable(tableTypes: {
table: NodeType;
table_row: NodeType;
table_cell: NodeType;
}, rows: number, columns: number): Node_2;
/**
* Formats the paragraph and heading nodes in the selection.
*
* @returns {boolean} - If an element is formatted, returns `true`.
*/
export 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[]}
*/
export 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.
*/
export function getHtml(state: EditorState | {
doc: Node_2;
schema: Schema;
}): string;
/**
* @returns {string[]} - An array of matched styles that are found in the selection.
*/
export function getInlineStyles(state: EditorState, style: {
name: string;
value: RegExp;
}): string[];
/**
* Returns a mark of the specified type from the nodes in selection.
*
* @returns {Mark}
*/
export function getMark(state: EditorState, markType: MarkType): Mark | undefined;
/**
* Checks if according to the specified `InlineFormatOptions` a node in the selection is present.
*
* @returns {boolean}
*/
export function hasMark(state: EditorState, options: EditorToolsSettings.InlineFormatOptions): boolean;
/**
* Checks if the selection contains a specific type of node.
*
* @returns {boolean}
*/
export 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`.
*/
export 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.
*/
export 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.
*/
export function insertNode(view: EditorView | {
state: EditorState;
dispatch: (tr: Transaction) => void;
}, node: Node_2, scrollIntoView?: boolean | undefined): void;
/**
* Checks if any of the block elements in the selection is aligned.
*
* @returns {boolean}
*/
export function isAligned(state: EditorState, actions: EditorToolsSettings.AlignAction[]): boolean;
/**
* Checks if any of the block elements in the selection is indented.
*
* @returns {boolean}
*/
export 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-vue-editor';
* const html = EditorUtils.removeComments('<p>some content<!-- comment --></p>');
* ```
*/
export 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-vue-editor';
* const html = EditorUtils.removeTag('<p>some <span>content</span></p>', 'span|p');
* ```
*/
export 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.
*/
export 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.
*/
export 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.
*/
export 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.
*/
export 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-vue-editor';
* const html = EditorUtils.sanitize('something pasted from MS Word, containing <o:p>, <w:sdtPr>, <v:shapes tags');
* ```
*/
export 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.
*/
export 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.
*/
export function textHighlight(key?: PluginKey): Plugin_2;
/**
* The image resizing plugin options.
*/
export interface ImageResizeOptions extends ImageResizeOptions {
}
/**
* Creates a plugin which adds image resizing functionality.
*
* @param {ImageResizeOptions} options - The resizing option (Optional).
* @returns {Plugin} - The image resizing plugin.
*/
export function imageResizing(options?: ImageResizeOptions): Plugin_2;
/**
* 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' }`.
*/
export 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}
*/
export 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}
*/
export function toggleList(view: EditorView, types: {
listType: string;
orderedList: string;
bulletList: string;
listItem: string;
}, command?: EditorToolsSettings.Command): boolean;
/**
* Represents the `Shortcuts` object.
*/
export 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.
*/
export function getShortcuts(settings?: {
types?: {
listItem: string;