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

package/EditorProps.d.ts

@@ -0,0 +1,406 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { EditorState, Plugin, Transaction, EditorView, Schema, Node } from '@progress/kendo-editor-common';
+import { EditorUtils } from './utils/index.js';
+import { Editor } from './Editor.js';
+interface EditorEvent {
+    /**
+     * An event target.
+     */
+    target: Editor;
+}
+/**
+ * Represents the object of the `onChange` Editor event.
+ */
+export interface EditorChangeEvent extends EditorEvent {
+    /**
+     * 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 object of the `onMount` Editor event.
+ */
+export interface EditorMountEvent extends EditorEvent {
+    /**
+     * The content-editable DOM element of the Editor.
+     */
+    dom: HTMLDivElement;
+    /**
+     * The default plugins collection of the Editor.
+     */
+    plugins: Array<Plugin>;
+    /**
+     * 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 interface EditorPasteEvent extends EditorEvent {
+    /**
+     * The HTML that will be pasted in the Editor.
+     */
+    pastedHtml: string;
+    /**
+     * The native paste event.
+     */
+    nativeEvent: ClipboardEvent;
+}
+/**
+ * Represents the object of the `onExecute` Editor event.
+ */
+export 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 interface EditorFocusEvent extends EditorEvent {
+    /**
+     * The native focus event.
+     */
+    nativeEvent: FocusEvent;
+}
+/**
+ * Represents the object of the `onBlur` Editor event.
+ */
+export interface EditorBlurEvent extends EditorEvent {
+    /**
+     * The native blur event.
+     */
+    nativeEvent: FocusEvent;
+}
+/**
+ * Represents the object of the `onIFrameInit` Editor event.
+ */
+export interface EditorIFrameInitEvent extends EditorEvent {
+    /**
+     * The object that represents the iframe element inside the Editor.
+     */
+    iframe: HTMLIFrameElement;
+}
+/**
+ * Represents the props of the [KendoReact Editor component](https://www.telerik.com/kendo-react-ui/components/editor).
+ */
+export interface EditorProps {
+    /**
+     * Sets the default HTML content of the Editor. This content is rendered
+     * when the Editor is initialized and no value is provided.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *         tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *         defaultContent="<p>Hello, World!</p>"
+     *     />
+     * ```
+     */
+    defaultContent?: string;
+    /**
+     * Sets the initial edit mode of the Editor. Defaults to `iframe`.
+     * - `iframe`: The Editor content is rendered inside an `<iframe>`.
+     * - `div`: The Editor content is rendered inside a `<div>` element.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *         tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *         defaultEditMode="div"
+     *     />
+     * ```
+     */
+    defaultEditMode?: 'iframe' | 'div';
+    /**
+     * Applies custom styles to the content element wrapper of the Editor.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *         tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *         contentStyle={{ backgroundColor: 'lightgray' }}
+     *     />
+     * ```
+     */
+    contentStyle?: React.CSSProperties;
+    /**
+     * Specifies the text directionality of the Editor content.
+     * Accepts `ltr` (left-to-right) or `rtl` (right-to-left).
+     *
+     * @example
+     * ```jsx
+     * <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} dir="rtl" />
+     * ```
+     */
+    dir?: string;
+    /**
+     * Adds custom CSS classes to the Editor's root element.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *         tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *         className="custom-editor-class"
+     *         contentStyle={{ backgroundColor: 'lightgray' }}
+     *     />
+     * ```
+     */
+    className?: string;
+    /**
+     * Applies custom styles to the Editor's root element.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *         tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *         style={{ border: '1px solid black' }}
+     *     />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Identifies the element(s) that describe the Editor component.
+     * Similar to the [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *         tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *         defaultEditMode="div"
+     *         ariaDescribedBy="description-element-id"
+     *     />
+     * ```
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) that label the Editor component.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *         tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *         defaultEditMode="div"
+     *         ariaLabelledBy="label-element-id"
+     *     />
+     * ```
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Provides an accessible label for the Editor component.
+     * Similar to the [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute.
+     *
+     * @example
+     * ```jsx
+     * <Editor ariaLabel="Rich Text Editor" />
+     * ```
+     */
+    ariaLabel?: string;
+    /**
+     * Enables or disables resizing of the Editor. Defaults to `false`.
+     *
+     * @example
+     * ```jsx
+     *
+     * <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     * resizable={true} />
+     * ```
+     */
+    resizable?: boolean;
+    /**
+     * Configures the tools available in the Editor's toolbar.
+     * By default, no tools are rendered.
+     *
+     * @example
+     * ```jsx
+     * <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} />
+     * ```
+     */
+    tools?: Array<any>;
+    /**
+     * Triggered when the Editor is about to mount. Useful for configuring the `EditorView` object.
+     * To initialize `EditorView`, use the properties of the `event` object.
+     *
+     * @param event - The event object containing initialization details.
+     * @returns An `EditorView` instance or `void`.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *       tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *       onMount={(event) => console.log(event.dom)}
+     *     />
+     * ```
+     */
+    onMount?: (event: EditorMountEvent) => EditorView | void;
+    /**
+     * Triggered when content is pasted into the Editor. Allows modification of the pasted content.
+     *
+     * @param event - The event object containing the pasted content details.
+     *
+     * @returns The modified HTML string or `void`.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *       tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *       onPasteHtml={(event) => event.pastedHtml.toUpperCase()}
+     *     />
+     * ```
+     */
+    onPasteHtml?: (event: EditorPasteEvent) => string | void;
+    /**
+     * Triggered when the Editor is about to apply a transaction.
+     * To prevent the transaction, return `false`.
+     *
+     * @param event - The event object containing transaction details.
+     * @returns `false` to cancel the transaction or `void`.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *       tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *       onExecute={(event) => {
+     *         console.log('onExecute called');
+     *         event.transaction.steps.length > 0;
+     *       }}
+     *     />
+     * ```
+     */
+    onExecute?: (event: EditorExecuteEvent) => boolean | void;
+    /**
+     * Triggered when the Editor's content element receives focus.
+     *
+     * @param event - The event object containing focus details.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *       tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *       onFocus={(event) => console.log('Editor focused')}
+     *     />
+     * ```
+     */
+    onFocus?: (event: EditorFocusEvent) => void;
+    /**
+     * Triggered when the Editor's content element loses focus.
+     *
+     * @param event - The event object containing blur details.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *       tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *       onBlur={(event) => console.log('Editor blurred')}
+     *     />
+     * ```
+     */
+    onBlur?: (event: EditorBlurEvent) => void;
+    /**
+     * Triggered when the value of the Editor is about to change.
+     *
+     * @param event - The event object containing change details.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *       tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *       onChange={(event) => console.log(event.value)}
+     *     />
+     * ```
+     */
+    onChange?: (event: EditorChangeEvent) => void;
+    /**
+     * Triggered during the initialization of an Editor with the `iframe` property set to `true`.
+     * Allows access to the iframe document for customization.
+     *
+     * @param event - The event object containing iframe details.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *       tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *       onIFrameInit={(event) => {
+     *         console.log('Iframe initialized');
+     *         event.iframe.style.border = 'none';
+     *       }}
+    />
+     * ```
+     */
+    onIFrameInit?: (event: EditorIFrameInitEvent) => void;
+    /**
+     * Specifies the value of the Editor. Can be a ProseMirror `Node` or an HTML string.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *       tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *       value="<p>Initial content</p>"
+     *     />
+     * ```
+     */
+    value?: Node | string;
+    /**
+     * Disables the built-in keyboard navigation of the Editor's toolbar when set to `false`.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *       tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *       keyboardNavigation={false}
+     *     />
+     * ```
+     */
+    keyboardNavigation?: boolean;
+    /**
+     * Defines options for parsing HTML content:
+     * - `false`: Collapses whitespace as per HTML rules.
+     * - `true`: Preserves whitespace but normalizes newlines to spaces.
+     * - `full`: Fully preserves whitespace.
+     * Defaults to `full`.
+     *
+     * @example
+     * ```jsx
+     *     <Editor
+     *       tools={[[EditorTools.Bold, EditorTools.Italic]]}
+     *       preserveWhitespace="full"
+     *     />
+     * ```
+     */
+    preserveWhitespace?: boolean | 'full';
+}
+export {};

package/config/defaultStyles.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const defaultStyle = "\nhtml, body {\n    margin: 0;\n    height: 100%;\n    padding: 0;\n}\nhtml {\n  min-height: 100%;\n}\nbody {\n  box-sizing: border-box;\n  position: relative;\n  word-wrap: break-word;\n  padding: 8px;\n}\nbody > .k-content {\n  outline: 0;\n  height: 100%;\n  white-space: pre-wrap;\n}\n.k-content > p {\n  margin: 0 0 1em;\n}\n.k-content table {\n  white-space: pre-wrap;\n}\n.k-content .k-text-selected {\n  color: HighlightText;\n  background-color: Highlight;\n}\n.k-content .k-text-highlighted {\n  background-color: #bbdefb;\n}\n.k-content .ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n.ProseMirror-hideselection *::selection { background: transparent; }\n.ProseMirror-hideselection *::-moz-selection { background: transparent; }\n.ProseMirror-hideselection { caret-color: transparent; }\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n.k-editor-resize-handles-wrapper {\n  position: absolute;\n  visibility: hidden;\n}\n.k-editor-resize-handle {\n  position: absolute;\n  visibility: visible;\n  background-color: #fff;\n  border: 1px solid #000;\n  z-index: 100;\n  width: 5px;\n  height: 5px;\n}\n.k-editor-resize-handle.northwest {\n  top: 0;\n  left: 0;\n  transform: translate(-50%, -50%);\n  cursor: nw-resize;\n}\n.k-editor-resize-handle.north {\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  cursor: n-resize;\n}\n.k-editor-resize-handle.northeast {\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  cursor: ne-resize;\n}\n.k-editor-resize-handle.southwest {\n  left: 0;\n  bottom: 0;\n  transform: translate(-50%, 50%);\n  cursor: sw-resize;\n}\n.k-editor-resize-handle.south {\n  bottom: 0;\n  left: 50%;\n  transform: translate(-50%, 50%);\n  cursor: s-resize;\n}\n.k-editor-resize-handle.southeast {\n  right: 0;\n  bottom: 0;\n  transform: translate(50%, 50%);\n  cursor: se-resize;\n}\n.k-editor-resize-handle.west {\n  top: 50%;\n  left: 0;\n  transform: translate(-50%, -50%);\n  cursor: w-resize;\n}\n.k-editor-resize-handle.east {\n  top: 50%;\n  right: 0;\n  transform: translate(50%, -50%);\n  cursor: e-resize;\n}\n.k-editor-resize-wrap-element {\n  display: inline-block;\n  position: relative;\n}\n.ProseMirror .row-resize-handle {\n  position: absolute;\n  right: 0; left: 0; bottom: 0;\n  transform: translate(0, 50%);\n  height: 4px;\n  z-index: 20;\n  background-color: #adf;\n  pointer-events: none;\n}\n.ProseMirror .column-resize-handle {\n  position: absolute;\n  right: -2px; top: 0; bottom: 0;\n  width: 4px;\n  z-index: 20;\n  background-color: #adf;\n  pointer-events: none;\n}\n.ProseMirror.resize-cursor {\n  cursor: ew-resize;\n  cursor: col-resize;\n}\n.ProseMirror.resize-cursor-vertical {\n  cursor: sn-resize;\n  cursor: row-resize;\n}\n.k-editor-resize-wrap-element table td p,\n.k-editor-resize-wrap-element table th p {\n  margin: 0 auto;\n}\n";
+/**
+ * @hidden
+ */
+export declare const tablesStyles = "\n  .ProseMirror .tableWrapper {\n    overflow-x: auto;\n    margin: 1em 0;\n  }\n  .ProseMirror table {\n    margin: 0;\n    border-collapse: collapse;\n    table-layout: fixed;\n    width: 100%;\n    overflow: hidden;\n  }\n  .ProseMirror td, .ProseMirror th {\n    min-width: 1em;\n    border: 1px solid #ddd;\n    padding: 3px 5px;\n    vertical-align: top;\n    box-sizing: border-box;\n    position: relative;\n  }\n  .ProseMirror th {\n    font-weight: bold;\n    text-align: left;\n  }\n  /* Give selected cells a blue overlay */\n  .ProseMirror .selectedCell:after {\n    z-index: 2;\n    position: absolute;\n    content: \"\";\n    left: 0; right: 0; top: 0; bottom: 0;\n    background: rgba(200, 200, 255, 0.4);\n    pointer-events: none;\n  }\n  .ProseMirror .selectedCell ::selection {\n    background-color: transparent;\n  }\n";
+/**
+ * @hidden
+ */
+export declare const rtlStyles = "body { direction: rtl }";

package/config/pasteSettings.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PasteCleanupSettings as PasteSettings } from '@progress/kendo-editor-common';
+/**
+ * The settings passed to `pasteCleanup` function ([see example](https://www.telerik.com/kendo-react-ui/components/editor/paste)).
+ */
+export interface PasteCleanupSettings extends PasteSettings {
+}

package/config/schema.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+export { marks, nodes } from '@progress/kendo-editor-common';

package/config/shortcuts.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { EditorState, Transaction, EditorView } from '@progress/kendo-editor-common';
+import { EditorToolsSettings } from './toolsSettings.js';
+declare const bold: EditorToolsSettings.InlineFormatSettings, underline: EditorToolsSettings.InlineFormatSettings, italic: EditorToolsSettings.InlineFormatSettings;
+/**
+ * @hidden
+ */
+export interface Shortcuts {
+    [key: string]: (state: EditorState, dispatch: (tr: Transaction) => void, view?: EditorView) => boolean;
+}
+/**
+ * @hidden
+ */
+export declare const getShortcuts: (settings?: {
+    types?: {
+        listItem: string;
+        hardBreak: string;
+    };
+    toolsSettings?: {
+        bold?: EditorToolsSettings.InlineFormatOptions;
+        italic?: EditorToolsSettings.InlineFormatOptions;
+        underline?: EditorToolsSettings.InlineFormatOptions;
+    };
+}) => Shortcuts;
+export {};

package/config/shortcuts.mjs

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { chainCommands as u, exitCode as h, toggleInlineFormat as i, undo as p, redo as l, undoInputRule as f, splitListItem as S, goToNextCell as a } from "@progress/kendo-editor-common";
+import { chainCommands as u, exitCode as h, goToNextCell as l, splitListItem as p, undoInputRule as f, redo as a, undo as S, toggleInlineFormat as i } from "@progress/kendo-editor-common";
 import { EditorToolsSettings as M } from "./toolsSettings.mjs";
 const { bold: b, underline: y, italic: I } = M, c = typeof navigator != "undefined" ? /Mac/.test(navigator.platform) : !1, B = (e) => {
   const r = u(h, (t, o) => {
@@ -16,16 +16,16 @@ const { bold: b, underline: y, italic: I } = M, c = typeof navigator != "undefin
     "Mod-b": (t, o) => i(n.bold || b)(t, o),
     "Mod-i": (t, o) => i(n.italic || I)(t, o),
     "Mod-u": (t, o) => i(n.underline || y)(t, o),
-    "Mod-z": p,
-    "Shift-Mod-z": l,
-    ...c ? {} : { "Mod-y": l },
+    "Mod-z": S,
+    "Shift-Mod-z": a,
+    ...c ? {} : { "Mod-y": a },
     Backspace: f,
     "Mod-Enter": r,
     "Shift-Enter": r,
     ...c ? { "Ctrl-Enter": r } : {},
-    Enter: (t, o) => S(t.schema.nodes[s])(t, o),
-    Tab: a(1),
-    "Shift-Tab": a(-1)
+    Enter: (t, o) => p(t.schema.nodes[s])(t, o),
+    Tab: l(1),
+    "Shift-Tab": l(-1)
   };
 };
 export {