@progress/kendo-react-editor 15.2.0-develop.5 → 15.2.0-develop.6

package/Editor.mjs

@@ -5,339 +5,332 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as c from "react";
-import i from "prop-types";
-import { ToolbarSeparator as A, ButtonGroup as N, Toolbar as x, toolbarButtons as F } from "@progress/kendo-react-buttons";
-import { validatePackage as I, getLicenseMessage as M, classNames as W, WatermarkOverlay as H } from "@progress/kendo-react-common";
-import { Plugin as E, PluginKey as S, spacesFix as z, caretColor as j, history as K, dropCursor as V, gapCursor as U, tableEditing as q, cspFix as G, Schema as $, marks as R, nodes as J, EditorState as Q, keymap as T, baseKeymap as X, EditorView as Y, getMark as Z } from "@progress/kendo-editor-common";
-import { defaultStyle as tt, tablesStyles as et, rtlStyles as it } from "./config/defaultStyles.mjs";
-import { EditorToolsSettings as st } from "./config/toolsSettings.mjs";
-import { EditorDialogs as nt } from "./dialogs/index.mjs";
-import { EditorUtils as k } from "./utils/index.mjs";
-import { editorPropsKey as B } from "./utils/props-key.mjs";
-import { updateEditorValue as ot } from "./utils/controlled-value.mjs";
-import { packageMetadata as D } from "./package-metadata.mjs";
-import { keys as d, messages as w } from "./messages/index.mjs";
-import { provideLocalizationService as O, registerForLocalization as rt } from "@progress/kendo-react-intl";
-const { link: P, bold: at, italic: lt, underline: ht } = st, _ = class _ extends c.Component {
-  constructor(l) {
-    super(l), this.state = {
-      view: void 0,
-      linkDialog: !1
-    }, this._element = null, this._contentElement = null, this.iframe = null, this.trOnChange = null, this.htmlOnChange = null, this.showLicenseWatermark = !1, this.focus = () => {
-      this.view && this.view.focus();
-    }, this.renderDialog = (t, e, s) => this.state[s] && /* @__PURE__ */ c.createElement(
-      t,
-      {
-        view: this.view,
-        settings: e,
-        dir: this.props.dir,
-        onClose: () => this.setState({ [s]: !1 })
-      }
-    ), this.renderTool = (t, e, s = !1) => {
-      const h = /* @__PURE__ */ c.createElement(
-        t,
-        {
-          view: this.view,
-          dir: this.props.dir,
-          key: e,
-          className: s ? "k-toolbar-button" : void 0
-        }
-      );
-      return h.type === A ? /* @__PURE__ */ c.createElement(t, { key: e }) : h;
-    }, this.updateTools = (t, e) => {
-      this.setState({ view: t });
-    }, this.filterTransaction = (t, e) => {
-      const s = { target: this, transaction: t, state: e };
-      return (this.props.onExecute && this.props.onExecute.call(void 0, s)) !== !1;
-    }, this.onPasteHtml = (t) => {
-      if (this.props.onPasteHtml && this.pasteEvent) {
-        const e = {
-          target: this,
-          pastedHtml: t,
-          nativeEvent: this.pasteEvent
-        }, s = this.props.onPasteHtml.call(void 0, e);
-        if (this.pasteEvent = void 0, typeof s == "string")
-          return s;
-      }
-      return t;
-    }, this.dispatchTransaction = (t) => {
-      const e = t.docChanged;
-      if (this.props.onChange && e) {
-        this.trOnChange = t;
-        const s = t.doc, h = t.doc.type.schema, p = {
-          target: this,
-          value: s,
-          html: "",
-          transaction: t,
-          schema: h
-        };
-        Object.defineProperty(p, "html", {
-          get: () => (this.htmlOnChange = k.getHtml({ doc: s, schema: h }), this.htmlOnChange)
-        }), this.props.onChange.call(void 0, p);
-      }
-      this.view && (this.props.value === void 0 || !e) && this.view.updateState(this.view.state.apply(t));
-    }, this.onFocus = (t, e) => {
-      if (this.props.onFocus) {
-        const s = {
-          target: this,
-          nativeEvent: e
-        };
-        this.props.onFocus.call(void 0, s);
-      }
-      return !1;
-    }, this.onBlur = (t, e) => {
-      if (this.props.onBlur) {
-        const s = {
-          target: this,
-          nativeEvent: e
-        };
-        this.props.onBlur.call(void 0, s);
-      }
-      return !1;
-    }, this.onPaste = (t, e) => (this.props.onPasteHtml && (this.pasteEvent = e), !1), this.onIFrameInit = (t) => {
-      if (this.props.onIFrameInit) {
-        const e = {
-          target: this,
-          iframe: t
-        };
-        this.props.onIFrameInit.call(void 0, e);
+import * as t from "react";
+import c from "prop-types";
+import { ButtonGroup as ke, Toolbar as Ee, toolbarButtons as Re, ToolbarSeparator as we } from "@progress/kendo-react-buttons";
+import { validatePackage as Ce, getLicenseMessage as Se, useWebMcpRegister as Le, classNames as Ae, WatermarkOverlay as Be } from "@progress/kendo-react-common";
+import { Plugin as W, PluginKey as j, spacesFix as Ne, caretColor as Pe, history as De, dropCursor as Ie, gapCursor as Te, tableEditing as We, cspFix as xe, Schema as He, marks as Me, nodes as _e, EditorState as Fe, keymap as z, baseKeymap as Oe, EditorView as Ve, getMark as je } from "@progress/kendo-editor-common";
+import { defaultStyle as ze, tablesStyles as qe, rtlStyles as Ke } from "./config/defaultStyles.mjs";
+import { EditorToolsSettings as $e } from "./config/toolsSettings.mjs";
+import { EditorDialogs as Ge } from "./dialogs/index.mjs";
+import { EditorUtils as x } from "./utils/index.mjs";
+import { editorPropsKey as q } from "./utils/props-key.mjs";
+import { updateEditorValue as Ue } from "./utils/controlled-value.mjs";
+import { packageMetadata as K } from "./package-metadata.mjs";
+import { keys as b, messages as N } from "./messages/index.mjs";
+import { useLocalization as Je } from "@progress/kendo-react-intl";
+const { link: $, bold: Qe, italic: Xe, underline: Ye } = $e, G = t.forwardRef((d, U) => {
+  const { tools: J = [], defaultEditMode: Q = "iframe", preserveWhitespace: X = "full", style: k, className: Y } = d, [Z, E] = t.useState({
+    view: void 0,
+    linkDialog: !1
+  }), P = t.useRef(null), f = t.useRef(null), H = t.useRef(null), i = t.useRef(void 0), v = t.useRef(null), R = t.useRef(null), w = t.useRef(void 0), a = t.useRef(d);
+  a.current = d;
+  const ee = t.useCallback((e) => {
+    P.current = e;
+  }, []), te = t.useCallback((e) => {
+    H.current = e;
+  }, []), re = t.useCallback((e) => {
+    f.current = e;
+  }, []), [ne] = t.useState(() => !Ce(K, { component: "Editor" })), [ae] = t.useState(() => Se(K)), C = Je(), S = t.useRef(null);
+  t.useImperativeHandle(
+    S,
+    () => ({
+      get element() {
+        return P.current;
+      },
+      get contentElement() {
+        return f.current;
+      },
+      get view() {
+        return i.current;
+      },
+      get value() {
+        return v.current !== null ? v.current.doc : a.current.value !== void 0 ? a.current.value : i.current ? i.current.state.doc : a.current.defaultContent || "";
+      },
+      get props() {
+        return a.current;
+      },
+      focus: () => {
+        i.current && i.current.focus();
       }
-      return !1;
-    }, this.showLicenseWatermark = !I(D, { component: "Editor" }), this.licenseMessage = M(D);
-  }
-  /**
-   * The value of the Editor.
-   */
-  get value() {
-    return this.trOnChange !== null ? this.trOnChange.doc : this.props.value !== void 0 ? this.props.value : this.view ? this.view.state.doc : this.props.defaultContent || "";
-  }
-  /**
-   * Returns the DOM element of the Editor.
-   */
-  get element() {
-    return this._element;
-  }
-  /**
-   * Returns the content-editable DOM element of the Editor.
-   */
-  get contentElement() {
-    return this._contentElement;
-  }
-  /**
-   * Returns the `view` object of the Editor.
-   */
-  get view() {
-    return this._view;
-  }
-  /**
-   * @hidden
-   */
-  componentDidMount() {
-    this.initialize();
-  }
-  /**
-   * @hidden
-   */
-  componentDidUpdate(l) {
-    const { value: t } = this.props, e = this.view;
-    t === void 0 || !e || (ot(e, t, l.value, this.trOnChange, this.htmlOnChange), this.trOnChange = null, this.htmlOnChange = null);
-  }
-  /**
-   * @hidden
-   */
-  componentWillUnmount() {
-    var t;
-    this.view && this.view.destroy(), this._view = void 0;
-    const l = (t = this.iframe) == null ? void 0 : t.contentWindow;
-    if (l) {
-      this._contentElement && this._contentElement.parentNode && this._contentElement.parentNode.removeChild(this._contentElement);
-      const e = l.document.head;
-      for (; e && e.firstChild; )
-        e.removeChild(e.firstChild);
+    })
+  ), t.useImperativeHandle(U, () => S.current), Le("editor", S, d, d.webMcp);
+  const p = () => S.current, oe = t.useRef((e, r) => {
+    var s, g;
+    const n = { target: p(), transaction: e, state: r };
+    return ((g = (s = a.current).onExecute) == null ? void 0 : g.call(s, n)) !== !1;
+  }).current, ce = t.useRef((e) => {
+    if (a.current.onPasteHtml && w.current) {
+      const r = {
+        target: p(),
+        pastedHtml: e,
+        nativeEvent: w.current
+      }, n = a.current.onPasteHtml(r);
+      if (w.current = void 0, typeof n == "string")
+        return n;
     }
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const { tools: l = [], defaultEditMode: t = "iframe", preserveWhitespace: e = "full", style: s, className: h } = this.props, p = O(this), u = this.props.ariaLabel || p.toLanguageString(d.contentAreaLabel, w[d.contentAreaLabel]);
-    if (this.view) {
-      const o = B.getState(this.view.state);
-      o.preserveWhitespace = e;
+    return e;
+  }).current, se = t.useRef((e) => {
+    const r = e.docChanged;
+    if (a.current.onChange && r) {
+      v.current = e;
+      const s = e.doc, g = e.doc.type.schema, y = {
+        target: p(),
+        value: s,
+        html: "",
+        transaction: e,
+        schema: g
+      };
+      Object.defineProperty(y, "html", {
+        get: () => (R.current = x.getHtml({ doc: s, schema: g }), R.current)
+      }), a.current.onChange(y);
     }
-    let m = this.props.contentStyle;
-    m === void 0 && (s || {}).height === void 0 && (m = { height: "300px" });
-    const f = (o, n) => o.displayName || o.name || `tool-${n}`, b = (o, n) => o.map((r, a) => f(r, a)).join("-") || `group-${n}`, y = l.map(
-      (o, n) => Array.isArray(o) ? /* @__PURE__ */ c.createElement(N, { key: b(o, n), className: "k-toolbar-button-group" }, o.map((r, a) => this.renderTool(r, f(r, a)))) : this.renderTool(o, f(o, n), !0)
-    );
-    return /* @__PURE__ */ c.createElement(
-      "div",
-      {
-        ref: (o) => {
-          this._element = o;
-        },
-        className: W("k-editor", h, { "k-editor-resizable": this.props.resizable }),
-        dir: this.props.dir,
-        style: s
-      },
-      y.length > 0 && /* @__PURE__ */ c.createElement(
-        x,
-        {
-          className: "k-editor-toolbar",
-          ariaLabel: p.toLanguageString(d.toolbarAriaLabel, w[d.toolbarAriaLabel]),
-          keyboardNavigation: this.props.keyboardNavigation
-        },
-        y
-      ),
-      t === "iframe" ? /* @__PURE__ */ c.createElement(
-        "iframe",
-        {
-          ref: (o) => {
-            this.iframe = o;
-          },
-          frameBorder: "0",
-          title: p.toLanguageString(d.iframeTitle, w[d.iframeTitle]),
-          style: m,
-          className: "k-iframe"
-        }
-      ) : /* @__PURE__ */ c.createElement(
-        "div",
-        {
-          ref: (o) => {
-            this._contentElement = o;
-          },
-          style: m,
-          className: "k-editor-content",
-          role: "textbox",
-          "aria-labelledby": this.props.ariaLabelledBy,
-          "aria-describedby": this.props.ariaDescribedBy,
-          "aria-label": u,
-          suppressContentEditableWarning: !0
-        }
-      ),
-      this.renderDialog(nt.InsertLinkDialog, P, "linkDialog"),
-      this.showLicenseWatermark && /* @__PURE__ */ c.createElement(H, { message: this.licenseMessage })
-    );
-  }
-  initialize() {
-    const l = this.iframe && this.iframe.contentWindow;
-    if (l) {
-      const n = l.document, r = n.createElement("meta");
-      r.setAttribute("charset", "utf-8"), n.head.appendChild(r), this._contentElement = n.createElement("div"), n.body.appendChild(this._contentElement), this._contentElement.classList.add("k-content"), this._contentElement.setAttribute("role", "textbox"), this.props.ariaLabelledBy && this._contentElement.setAttribute("aria-labelledby", this.props.ariaLabelledBy), this.props.ariaDescribedBy && this._contentElement.setAttribute("aria-describedby", this.props.ariaDescribedBy), this._contentElement.setAttribute(
+    const n = i.current;
+    n && (a.current.value === void 0 || !r) && n.updateState(n.state.apply(e));
+  }).current, ie = t.useRef((e, r) => {
+    if (a.current.onFocus) {
+      const n = {
+        target: p(),
+        nativeEvent: r
+      };
+      a.current.onFocus(n);
+    }
+    return !1;
+  }).current, ue = t.useRef((e, r) => {
+    if (a.current.onBlur) {
+      const n = {
+        target: p(),
+        nativeEvent: r
+      };
+      a.current.onBlur(n);
+    }
+    return !1;
+  }).current, le = t.useRef((e, r) => (a.current.onPasteHtml && (w.current = r), !1)).current, de = t.useRef((e) => {
+    if (a.current.onIFrameInit) {
+      const r = {
+        target: p(),
+        iframe: e
+      };
+      a.current.onIFrameInit(r);
+    }
+    return !1;
+  }).current, fe = t.useRef((e, r) => {
+    E((n) => ({ ...n, view: e }));
+  }).current;
+  t.useEffect(() => {
+    var V;
+    const e = H.current, r = e == null ? void 0 : e.contentWindow;
+    if (r) {
+      const o = r.document;
+      if (!o.head.querySelector("meta[charset]")) {
+        const l = o.createElement("meta");
+        l.setAttribute("charset", "utf-8"), o.head.appendChild(l);
+      }
+      const u = o.body.querySelector(".k-content");
+      u ? (u.textContent = "", f.current = u) : (f.current = o.createElement("div"), o.body.appendChild(f.current), f.current.classList.add("k-content")), f.current.setAttribute("role", "textbox"), f.current.setAttribute(
         "aria-label",
-        this.props.ariaLabel || O(this).toLanguageString(
-          d.contentAreaLabel,
-          w[d.contentAreaLabel]
-        )
-      ), this.iframe && this.props.onIFrameInit ? this.onIFrameInit(this.iframe) : [tt, et, this.props.dir === "rtl" ? it : void 0].forEach((a) => {
-        if (a) {
-          const v = n.createElement("style");
-          v.appendChild(n.createTextNode(a)), n.head.appendChild(v);
+        a.current.ariaLabel || C.toLanguageString(b.contentAreaLabel, N[b.contentAreaLabel])
+      ), a.current.ariaLabelledBy && f.current.setAttribute("aria-labelledby", a.current.ariaLabelledBy), a.current.ariaDescribedBy && f.current.setAttribute("aria-describedby", a.current.ariaDescribedBy), e && a.current.onIFrameInit ? de(e) : o.head.querySelector("style") || [ze, qe, a.current.dir === "rtl" ? Ke : void 0].forEach(
+        (l) => {
+          if (l) {
+            const m = o.createElement("style");
+            m.appendChild(o.createTextNode(l)), o.head.appendChild(m);
+          }
         }
-      });
+      );
     }
-    const t = this._contentElement;
-    if (!t)
+    const n = f.current;
+    if (!n)
       return;
-    const { preserveWhitespace: e = "full" } = this.props, s = [
+    const s = (V = a.current.preserveWhitespace) != null ? V : "full", g = [
       // https://prosemirror.net/docs/ref/#state.PluginSpec
-      new E({
-        view: (() => ({ update: this.updateTools })),
-        key: new S("toolbar-tools-update-plugin")
+      new W({
+        view: (() => ({ update: fe })),
+        key: new j("toolbar-tools-update-plugin")
       }),
-      new E({
-        filterTransaction: this.filterTransaction,
-        key: new S("onExecute-event-plugin")
+      new W({
+        filterTransaction: oe,
+        key: new j("onExecute-event-plugin")
       }),
-      new E({
-        key: B,
+      new W({
+        key: q,
         state: {
-          init: () => ({ preserveWhitespace: e }),
-          apply: (n, r) => r
+          init: () => ({ preserveWhitespace: s }),
+          apply: (o, u) => u
         }
       }),
-      z(),
-      j(),
-      K(),
-      V(),
-      U(),
-      q(),
-      G()
-    ], h = {
-      ...k.getShortcuts({
+      Ne(),
+      Pe(),
+      De(),
+      Ie(),
+      Te(),
+      We(),
+      xe()
+    ], y = {
+      ...x.getShortcuts({
         types: { listItem: "list_item", hardBreak: "hard_break" },
-        toolsSettings: { bold: at, italic: lt, underline: ht }
+        toolsSettings: { bold: Qe, italic: Xe, underline: Ye }
       }),
       "Mod-k": () => {
-        const { linkDialog: n } = this.state, r = this.view;
-        if (r) {
-          const a = r.state, v = a.selection.empty, g = Z(a, a.schema.marks[P.mark]);
-          !n && !(v && !g) && this.setState({ linkDialog: !0 });
+        const o = i.current;
+        if (o) {
+          const u = o.state, l = u.selection.empty, m = je(u, u.schema.marks[$.mark]);
+          l && !m || E((h) => h.linkDialog ? h : { ...h, linkDialog: !0 });
         }
-        return !n;
+        return !0;
       },
       "Alt-F10": () => {
-        var r;
-        const n = (r = this.element) == null ? void 0 : r.querySelector(".k-toolbar");
-        if (n) {
-          const a = n.querySelector(F.join(","));
-          if (a)
-            return a.focus(), !0;
+        var u;
+        const o = (u = P.current) == null ? void 0 : u.querySelector(".k-toolbar");
+        if (o) {
+          const l = o.querySelector(Re.join(","));
+          if (l)
+            return l.focus(), !0;
         }
         return !1;
       }
-    }, { defaultContent: p = "", value: u, onMount: m } = this.props, f = u && typeof u != "string" ? u : k.createDocument(new $({ nodes: J, marks: R }), u || p, {
-      preserveWhitespace: e
-    }), b = {
-      state: Q.create({
-        plugins: [...s, T(h), T(X)],
-        doc: f
+    }, { defaultContent: ve = "", value: A, onMount: T } = a.current, ye = A && typeof A != "string" ? A : x.createDocument(new He({ nodes: _e, marks: Me }), A || ve, {
+      preserveWhitespace: s
+    }), F = {
+      state: Fe.create({
+        plugins: [...g, z(y), z(Oe)],
+        doc: ye
       }),
-      transformPastedHTML: this.onPasteHtml,
-      dispatchTransaction: this.dispatchTransaction,
+      transformPastedHTML: ce,
+      dispatchTransaction: se,
       handleDOMEvents: {
-        focus: this.onFocus,
-        blur: this.onBlur,
-        paste: this.onPaste
+        focus: ie,
+        blur: ue,
+        paste: le
       },
-      handleDrop: (n, r, a, v) => {
-        let g = !1;
-        return a.content.nodesBetween(0, a.content.size, (L) => {
-          g = g || L.type.name === "table_caption_external";
-        }), g;
+      handleDrop: (o, u, l, m) => {
+        let B = !1;
+        return l.content.nodesBetween(0, l.content.size, (h) => {
+          B = B || h.type.name === "table_caption_external";
+        }), B;
       }
-    }, y = { plugins: s, shortcuts: h, target: this, viewProps: b, dom: t }, o = this._view = m && m.call(void 0, y) || new Y({ mount: t }, b);
-    this.setState({
-      view: o
-    });
+    }, he = { plugins: g, shortcuts: y, target: p(), viewProps: F, dom: n }, O = (T == null ? void 0 : T(he)) || new Ve({ mount: n }, F);
+    return i.current = O, E((o) => ({ ...o, view: O })), () => {
+      var u, l;
+      i.current && i.current.destroy(), i.current = void 0;
+      const o = e == null ? void 0 : e.contentWindow;
+      if (o != null && o.document) {
+        (l = (u = f.current) == null ? void 0 : u.parentNode) == null || l.removeChild(f.current);
+        const m = o.document.head;
+        for (; m != null && m.firstChild; )
+          m.removeChild(m.firstChild);
+      }
+    };
+  }, []);
+  const D = t.useRef(d.value);
+  if (t.useEffect(() => {
+    const { value: e } = a.current, r = i.current;
+    if (e === void 0 || !r) {
+      D.current = e;
+      return;
+    }
+    Ue(r, e, D.current, v.current, R.current), v.current = null, R.current = null, D.current = e;
+  }), i.current) {
+    const e = q.getState(i.current.state);
+    e.preserveWhitespace = X;
   }
+  let L = d.contentStyle;
+  L === void 0 && (k == null ? void 0 : k.height) === void 0 && (L = { height: "300px" });
+  const I = (e, r, n) => e.displayName || e.name || `tool-${r}-${n}`, me = (e, r) => e.map((n, s) => I(n, r, s)).join("-") || `group-${r}`, M = (e, r, n = !1) => {
+    const s = /* @__PURE__ */ t.createElement(
+      e,
+      {
+        view: i.current,
+        dir: d.dir,
+        key: r,
+        className: n ? "k-toolbar-button" : void 0
+      }
+    );
+    return s.type === we ? /* @__PURE__ */ t.createElement(e, { key: r }) : s;
+  }, ge = (e, r, n) => Z[n] && /* @__PURE__ */ t.createElement(
+    e,
+    {
+      view: i.current,
+      settings: r,
+      dir: d.dir,
+      onClose: () => E((s) => ({ ...s, [n]: !1 }))
+    }
+  ), _ = J.map(
+    (e, r) => Array.isArray(e) ? /* @__PURE__ */ t.createElement(ke, { key: me(e, r), className: "k-toolbar-button-group" }, e.map((n, s) => M(n, I(n, r, s)))) : M(e, I(e, r, 0), !0)
+  ), be = C.toLanguageString(
+    b.toolbarAriaLabel,
+    N[b.toolbarAriaLabel]
+  ), pe = C.toLanguageString(
+    b.contentAreaLabel,
+    N[b.contentAreaLabel]
+  );
+  return /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      ref: ee,
+      className: Ae("k-editor", Y, { "k-editor-resizable": d.resizable }),
+      dir: d.dir,
+      style: k
+    },
+    _.length > 0 && /* @__PURE__ */ t.createElement(
+      Ee,
+      {
+        className: "k-editor-toolbar",
+        keyboardNavigation: d.keyboardNavigation,
+        ariaLabel: be
+      },
+      _
+    ),
+    Q === "iframe" ? /* @__PURE__ */ t.createElement("div", { className: "k-editor-content" }, /* @__PURE__ */ t.createElement(
+      "iframe",
+      {
+        ref: te,
+        frameBorder: "0",
+        title: C.toLanguageString(b.iframeTitle, N[b.iframeTitle]),
+        style: L,
+        className: "k-iframe"
+      }
+    )) : /* @__PURE__ */ t.createElement(
+      "div",
+      {
+        ref: re,
+        style: L,
+        className: "k-editor-content",
+        role: "textbox",
+        "aria-label": pe,
+        "aria-labelledby": d.ariaLabelledBy,
+        "aria-describedby": d.ariaDescribedBy,
+        suppressContentEditableWarning: !0
+      }
+    ),
+    ge(Ge.InsertLinkDialog, $, "linkDialog"),
+    ne && /* @__PURE__ */ t.createElement(Be, { message: ae })
+  );
+});
+G.propTypes = {
+  defaultContent: c.string,
+  value: c.oneOfType([c.object, c.string]),
+  defaultEditMode: c.oneOf(["iframe", "div"]),
+  contentStyle: c.object,
+  dir: c.string,
+  className: c.string,
+  ariaDescribedBy: c.string,
+  ariaLabelledBy: c.string,
+  ariaLabel: c.string,
+  style: c.object,
+  tools: c.arrayOf(c.any),
+  keyboardNavigation: c.bool,
+  resizable: c.bool,
+  preserveWhitespace: c.oneOf([!0, !1, "full"]),
+  onMount: c.func,
+  onFocus: c.func,
+  onBlur: c.func,
+  onChange: c.func,
+  onPasteHtml: c.func,
+  onExecute: c.func,
+  onIFrameInit: c.func
 };
-_.propTypes = {
-  defaultContent: i.string,
-  value: i.oneOfType([i.object, i.string]),
-  defaultEditMode: i.oneOf(["iframe", "div"]),
-  contentStyle: i.object,
-  dir: i.string,
-  className: i.string,
-  ariaDescribedBy: i.string,
-  ariaLabelledBy: i.string,
-  ariaLabel: i.string,
-  style: i.object,
-  tools: i.arrayOf(i.any),
-  keyboardNavigation: i.bool,
-  resizable: i.bool,
-  preserveWhitespace: i.oneOf([!0, !1, "full"]),
-  onMount: i.func,
-  onFocus: i.func,
-  onBlur: i.func,
-  onChange: i.func,
-  onPasteHtml: i.func,
-  onExecute: i.func,
-  onIFrameInit: i.func
-};
-let C = _;
-rt(C);
+G.displayName = "KendoReactEditor";
 export {
-  C as Editor
+  G as Editor
 };

package/EditorProps.d.ts

@@ -7,13 +7,13 @@
  */
 import { EditorState, Plugin, Transaction, EditorView, Schema, Node } from '@progress/kendo-editor-common';
 import { EditorUtils } from './utils/index.js';
-import { Editor } from './Editor.js';
+import { EditorHandle } from './Editor.js';
 import { WebMcpProps } from '@progress/kendo-react-common';
 interface EditorEvent {
     /**
      * An event target.
      */
-    target: Editor;
+    target: EditorHandle;
 }
 /**
  * Represents the object of the `onChange` Editor event.