@progress/kendo-react-editor 10.1.1-develop.1 → 10.2.0-develop.10

package/index.d.mts

@@ -52,7 +52,7 @@ 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 { JSX as JSX_2 } from 'react/jsx-runtime';
+import { JSX } from 'react/jsx-runtime';
 import { keydownHandler } from '@progress/kendo-editor-common';
 import { keymap } from '@progress/kendo-editor-common';
 import { liftListItem } from '@progress/kendo-editor-common';
@@ -241,7 +241,7 @@ export declare class Editor extends React_2.Component<EditorProps, EditorStateIn
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX.Element;
     private renderDialog;
     private renderTool;
     private updateTools;
@@ -447,97 +447,224 @@ export declare interface EditorPasteEvent extends EditorEvent {
  */
 export declare interface EditorProps {
     /**
-     * Sets the default HTML content of the Editor.
+     * 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 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 defaultEditMode="div" />
+     * ```
      */
     defaultEditMode?: 'iframe' | 'div';
     /**
-     * Sets styles to the content element wrapper of the Editor.
+     * Applies custom styles to the content element wrapper of the Editor.
+     *
+     * @example
+     * ```jsx
+     * <Editor contentStyle={{ backgroundColor: "lightgray" }} />
+     * ```
      */
     contentStyle?: React.CSSProperties;
     /**
-     * Represents the `dir` HTML attribute.
+     * Specifies the text directionality of the Editor content.
+     * Accepts `ltr` (left-to-right) or `rtl` (right-to-left).
+     *
+     * @example
+     * ```jsx
+     * <Editor dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
-     * Sets additional classes to the Editor.
+     * Adds custom CSS classes to the Editor's root element.
+     *
+     * @example
+     * ```jsx
+     * <Editor className="custom-editor-class" />
+     * ```
      */
     className?: string;
     /**
-     * Sets styles to the Editor.
+     * Applies custom styles to the Editor's root element.
+     *
+     * @example
+     * ```jsx
+     * <Editor style={{ border: "1px solid black" }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
-     * 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).
+     * 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 ariaDescribedBy="description-element-id" />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
-     * Identifies the element(s) which will label the component.
+     * Identifies the element(s) that label the Editor component.
+     *
+     * @example
+     * ```jsx
+     * <Editor ariaLabelledBy="label-element-id" />
+     * ```
      */
     ariaLabelledBy?: string;
     /**
-     * The accessible label of the component.
+     * 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;
     /**
-     * Specifies if the Editor will be resizable.
+     * Enables or disables resizing of the Editor. Defaults to `false`.
+     *
+     * @example
+     * ```jsx
+     * <Editor resizable={true} />
+     * ```
      */
     resizable?: boolean;
     /**
-     * Sets the tools of the Editor. By default, the Editor renders no tools.
+     * Configures the tools available in the Editor's toolbar.
+     * By default, no tools are rendered.
+     *
+     * @example
+     * ```jsx
+     * <Editor tools={[{ name: "bold" }, { name: "italic" }]} />
+     * ```
      */
     tools?: Array<any>;
     /**
-     * Fires each time the Editor is about to mount.
-     * Useful for configuring the `EditorView` object.
+     * 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 onMount={(event) => console.log(event.dom)} />
+     * ```
      */
     onMount?: (event: EditorMountEvent) => EditorView | void;
     /**
-     * Fires each time the Editor is about to insert pasted content.
-     * Useful for modifying pasted content.
+     * 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 onPasteHtml={(event) => event.pastedHtml.toUpperCase()} />
+     * ```
      */
     onPasteHtml?: (event: EditorPasteEvent) => string | void;
     /**
-     * Fires each time the Editor is about to apply a transaction.
+     * 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 onExecute={(event) => event.transaction.steps.length > 0} />
+     * ```
      */
     onExecute?: (event: EditorExecuteEvent) => boolean | void;
     /**
-     * Fires when the Editor's content element has received focus.
+     * Triggered when the Editor's content element receives focus.
+     *
+     * @param event - The event object containing focus details.
+     *
+     * @example
+     * ```jsx
+     * <Editor onFocus={(event) => console.log("Editor focused")} />
+     * ```
      */
     onFocus?: (event: EditorFocusEvent) => void;
     /**
-     * Fires when the Editor's content element has lost focus.
+     * Triggered when the Editor's content element loses focus.
+     *
+     * @param event - The event object containing blur details.
+     *
+     * @example
+     * ```jsx
+     * <Editor onBlur={(event) => console.log("Editor blurred")} />
+     * ```
      */
     onBlur?: (event: EditorBlurEvent) => void;
     /**
-     * Fires each time the value of the Editor is about to change.
+     * Triggered when the value of the Editor is about to change.
+     *
+     * @param event - The event object containing change details.
+     *
+     * @example
+     * ```jsx
+     * <Editor onChange={(event) => console.log(event.value)} />
+     * ```
      */
     onChange?: (event: EditorChangeEvent) => void;
     /**
-     * Fires on the initialization of an Editor with iFrame property set to true.
-     * The event is used to access the iFrame document, change its properties or add custom styles.
+     * 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 onIFrameInit={(event) => { event.iframe.style.border = "none"; }} />
+     * ```
      */
     onIFrameInit?: (event: EditorIFrameInitEvent) => void;
     /**
-     * The value of the Editor.
+     * Specifies the value of the Editor. Can be a ProseMirror `Node` or an HTML string.
+     *
+     * @example
+     * ```jsx
+     * <Editor value="<p>Initial content</p>" />
+     * ```
      */
     value?: Node_2 | string;
     /**
-     * If set to `false`, it will turn off the built-in keyboard navigation of the Editor's Toolbar.
+     * Disables the built-in keyboard navigation of the Editor's toolbar when set to `false`.
+     *
+     * @example
+     * ```jsx
+     * <Editor keyboardNavigation={false} />
+     * ```
      */
     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.
-     *
+     * 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 preserveWhitespace="full" />
+     * ```
      */
     preserveWhitespace?: boolean | 'full';
 }
@@ -925,12 +1052,12 @@ export declare namespace EditorTools {
      * The BulletedList tool component.
      * Will render a SplitButton which applies `<ol>` HTML element with predefined styles - disc and square.
      */
-    const BulletedList: (props: any) => JSX_2.Element;
+    const BulletedList: (props: any) => JSX.Element;
     /**
      * The NumberedList tool component.
      * Will render a SplitButton which applies `<ul>` HTML element with predefined styles - upper-roman, lower-roman, upper-latin and lower-latin.
      */
-    const NumberedList: (props: any) => JSX_2.Element;
+    const NumberedList: (props: any) => JSX.Element;
     /**
      * The TableCellProperties tool component.
      */
@@ -988,7 +1115,7 @@ export declare namespace EditorTools {
      * To modify the default PDF export options, see the following example:
      *
      * @example
-     * ```tsx-no-run
+     * ```jsx-no-run
      * import { Editor, EditorTools } from '@progress/kendo-react-editor';
      * const { Bold, Italic, Pdf } = EditorTools;
      *
@@ -2099,7 +2226,7 @@ declare class FindAndReplace extends React_2.Component<FindAndReplaceProps, Find
     /**
      * @hidden
      */
-    render(): (false | JSX_2.Element | undefined)[];
+    render(): (false | JSX.Element | undefined)[];
     private onClose;
     private onOpen;
 }
@@ -2121,7 +2248,7 @@ declare class FindAndReplaceDialog extends React_2.Component<FindAndReplaceDialo
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX.Element;
     private onTabSelect;
     private onClose;
     private matchesMessage;
@@ -2337,7 +2464,7 @@ declare class InsertImageDialog extends React_2.Component<InsertImageDialogProps
     /**
      * @hidden
      */
-    render(): string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<React_2.ReactNode> | Promise<string | number | bigint | boolean | React_2.ReactPortal | React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>> | Iterable<React_2.ReactNode> | null | undefined> | JSX.Element | null | undefined;
     private onClose;
     private onInsert;
 }
@@ -2362,7 +2489,7 @@ declare class InsertLinkDialog extends React_2.Component<InsertLinkDialogProps>
     /**
      * @hidden
      */
-    render(): string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<React_2.ReactNode> | Promise<string | number | bigint | boolean | React_2.ReactPortal | React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>> | Iterable<React_2.ReactNode> | null | undefined> | JSX.Element | null | undefined;
     private onClose;
     private onInsert;
 }
@@ -2463,7 +2590,7 @@ declare namespace InsertTablePopupNS {
         /**
          * @hidden
          */
-        render(): JSX_2.Element;
+        render(): JSX.Element;
         private onWindowDown;
         private onPointerDown;
     }
@@ -2917,7 +3044,7 @@ declare class ViewHtmlDialog extends React_2.Component<ViewHtmlDialogProps> {
     /**
      * @hidden
      */
-    render(): string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<React_2.ReactNode> | Promise<string | number | bigint | boolean | React_2.ReactPortal | React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>> | Iterable<React_2.ReactNode> | null | undefined> | JSX.Element | null | undefined;
     private textAreaRef;
     private onUpdate;
     private onClose;