@progress/kendo-react-editor 14.5.0-develop.13 → 14.5.0-develop.15

package/Editor.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),i=require("prop-types"),w=require("@progress/kendo-react-buttons"),E=require("@progress/kendo-react-common"),n=require("@progress/kendo-editor-common"),_=require("./config/defaultStyles.js"),I=require("./config/toolsSettings.js"),x=require("./dialogs/index.js"),S=require("./utils/index.js"),D=require("./utils/props-key.js"),F=require("./utils/controlled-value.js"),M=require("./package-metadata.js"),O=require("./messages/index.js"),q=require("@progress/kendo-react-intl");function L(v){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(v){for(const e in v)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(v,e);Object.defineProperty(a,e,t.get?t:{enumerable:!0,get:()=>v[e]})}}return a.default=v,Object.freeze(a)}const h=L(B),{link:N,bold:W,italic:j,underline:z}=I.EditorToolsSettings,P=class P extends h.Component{constructor(a){super(a),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=(e,t,s)=>this.state[s]&&h.createElement(e,{view:this.view,settings:t,dir:this.props.dir,onClose:()=>this.setState({[s]:!1})}),this.renderTool=(e,t,s=!1)=>{const d=h.createElement(e,{view:this.view,dir:this.props.dir,key:t,className:s?"k-toolbar-button":void 0});return d.type===w.ToolbarSeparator?h.createElement(e,{key:t}):d},this.updateTools=(e,t)=>{this.setState({view:e})},this.filterTransaction=(e,t)=>{const s={target:this,transaction:e,state:t};return(this.props.onExecute&&this.props.onExecute.call(void 0,s))!==!1},this.onPasteHtml=e=>{if(this.props.onPasteHtml&&this.pasteEvent){const t={target:this,pastedHtml:e,nativeEvent:this.pasteEvent},s=this.props.onPasteHtml.call(void 0,t);if(this.pasteEvent=void 0,typeof s=="string")return s}return e},this.dispatchTransaction=e=>{const t=e.docChanged;if(this.props.onChange&&t){this.trOnChange=e;const s=e.doc,d=e.doc.type.schema,m={target:this,value:s,html:"",transaction:e,schema:d};Object.defineProperty(m,"html",{get:()=>(this.htmlOnChange=S.EditorUtils.getHtml({doc:s,schema:d}),this.htmlOnChange)}),this.props.onChange.call(void 0,m)}this.view&&(this.props.value===void 0||!t)&&this.view.updateState(this.view.state.apply(e))},this.onFocus=(e,t)=>{if(this.props.onFocus){const s={target:this,nativeEvent:t};this.props.onFocus.call(void 0,s)}return!1},this.onBlur=(e,t)=>{if(this.props.onBlur){const s={target:this,nativeEvent:t};this.props.onBlur.call(void 0,s)}return!1},this.onPaste=(e,t)=>(this.props.onPasteHtml&&(this.pasteEvent=t),!1),this.onIFrameInit=e=>{if(this.props.onIFrameInit){const t={target:this,iframe:e};this.props.onIFrameInit.call(void 0,t)}return!1},this.showLicenseWatermark=!E.validatePackage(M.packageMetadata,{component:"Editor"}),this.licenseMessage=E.getLicenseMessage(M.packageMetadata)}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||""}get element(){return this._element}get contentElement(){return this._contentElement}get view(){return this._view}componentDidMount(){this.initialize()}componentDidUpdate(a){const{value:e}=this.props,t=this.view;e===void 0||!t||(F.updateEditorValue(t,e,a.value,this.trOnChange,this.htmlOnChange),this.trOnChange=null,this.htmlOnChange=null)}componentWillUnmount(){var e;this.view&&this.view.destroy(),this._view=void 0;const a=(e=this.iframe)==null?void 0:e.contentWindow;if(a){this._contentElement&&this._contentElement.parentNode&&this._contentElement.parentNode.removeChild(this._contentElement);const t=a.document.head;for(;t&&t.firstChild;)t.removeChild(t.firstChild)}}render(){const{tools:a=[],defaultEditMode:e="iframe",preserveWhitespace:t="full",style:s,className:d}=this.props,m=q.provideLocalizationService(this);if(this.view){const o=D.editorPropsKey.getState(this.view.state);o.preserveWhitespace=t}let p=this.props.contentStyle;p===void 0&&(s||{}).height===void 0&&(p={height:"300px"});const f=(o,u)=>o.displayName||o.name||`tool-${u}`,C=(o,u)=>o.map((r,l)=>f(r,l)).join("-")||`group-${u}`,g=a.map((o,u)=>Array.isArray(o)?h.createElement(w.ButtonGroup,{key:C(o,u),className:"k-toolbar-button-group"},o.map((r,l)=>this.renderTool(r,f(r,l)))):this.renderTool(o,f(o,u),!0));return h.createElement("div",{ref:o=>{this._element=o},className:E.classNames("k-editor",d,{"k-editor-resizable":this.props.resizable}),dir:this.props.dir,style:s},g.length>0&&h.createElement(w.Toolbar,{className:"k-editor-toolbar",keyboardNavigation:this.props.keyboardNavigation},g),e==="iframe"?h.createElement("div",{className:"k-editor-content"},h.createElement("iframe",{ref:o=>{this.iframe=o},frameBorder:"0",title:m.toLanguageString(O.keys.iframeTitle,O.messages[O.keys.iframeTitle]),style:p,className:"k-iframe"})):h.createElement("div",{style:p,className:"k-editor-content"},h.createElement("div",{ref:o=>{this._contentElement=o},suppressContentEditableWarning:!0,role:"textbox","aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-label":this.props.ariaLabel})),this.renderDialog(x.EditorDialogs.InsertLinkDialog,N,"linkDialog"),this.showLicenseWatermark&&h.createElement(E.WatermarkOverlay,{message:this.licenseMessage}))}initialize(){const a=this.iframe&&this.iframe.contentWindow;if(a){const r=a.document,l=r.createElement("meta");l.setAttribute("charset","utf-8"),r.head.appendChild(l),this._contentElement=r.createElement("div"),r.body.appendChild(this._contentElement),this._contentElement.classList.add("k-content"),this.iframe&&this.props.onIFrameInit?this.onIFrameInit(this.iframe):[_.defaultStyle,_.tablesStyles,this.props.dir==="rtl"?_.rtlStyles:void 0].forEach(c=>{if(c){const y=r.createElement("style");y.appendChild(r.createTextNode(c)),r.head.appendChild(y)}})}const e=this._contentElement;if(!e)return;const{preserveWhitespace:t="full"}=this.props,s=[new n.Plugin({view:(()=>({update:this.updateTools})),key:new n.PluginKey("toolbar-tools-update-plugin")}),new n.Plugin({filterTransaction:this.filterTransaction,key:new n.PluginKey("onExecute-event-plugin")}),new n.Plugin({key:D.editorPropsKey,state:{init:()=>({preserveWhitespace:t}),apply:(r,l)=>l}}),n.spacesFix(),n.caretColor(),n.history(),n.dropCursor(),n.gapCursor(),n.tableEditing(),n.cspFix()],d={...S.EditorUtils.getShortcuts({types:{listItem:"list_item",hardBreak:"hard_break"},toolsSettings:{bold:W,italic:j,underline:z}}),"Mod-k":()=>{const{linkDialog:r}=this.state,l=this.view;if(l){const c=l.state,y=c.selection.empty,b=n.getMark(c,c.schema.marks[N.mark]);!r&&!(y&&!b)&&this.setState({linkDialog:!0})}return!r},"Alt-F10":()=>{var l;const r=(l=this.element)==null?void 0:l.querySelector(".k-toolbar");if(r){const c=r.querySelector(w.toolbarButtons.join(","));if(c)return c.focus(),!0}return!1}},{defaultContent:m="",value:p,onMount:f}=this.props,C=p&&typeof p!="string"?p:S.EditorUtils.createDocument(new n.Schema({nodes:n.nodes,marks:n.marks}),p||m,{preserveWhitespace:t}),g={state:n.EditorState.create({plugins:[...s,n.keymap(d),n.keymap(n.baseKeymap)],doc:C}),transformPastedHTML:this.onPasteHtml,dispatchTransaction:this.dispatchTransaction,handleDOMEvents:{focus:this.onFocus,blur:this.onBlur,paste:this.onPaste},handleDrop:(r,l,c,y)=>{let b=!1;return c.content.nodesBetween(0,c.content.size,T=>{b=b||T.type.name==="table_caption_external"}),b}},o={plugins:s,shortcuts:d,target:this,viewProps:g,dom:e},u=this._view=f&&f.call(void 0,o)||new n.EditorView({mount:e},g);this.setState({view:u})}};P.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 k=P;q.registerForLocalization(k);exports.Editor=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),i=require("prop-types"),w=require("@progress/kendo-react-buttons"),C=require("@progress/kendo-react-common"),o=require("@progress/kendo-editor-common"),S=require("./config/defaultStyles.js"),q=require("./config/toolsSettings.js"),x=require("./dialogs/index.js"),L=require("./utils/index.js"),D=require("./utils/props-key.js"),A=require("./utils/controlled-value.js"),B=require("./package-metadata.js"),h=require("./messages/index.js"),O=require("@progress/kendo-react-intl");function I(g){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(g){for(const e in g)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(g,e);Object.defineProperty(c,e,t.get?t:{enumerable:!0,get:()=>g[e]})}}return c.default=g,Object.freeze(c)}const p=I(N),{link:M,bold:F,italic:W,underline:j}=q.EditorToolsSettings,P=class P extends p.Component{constructor(c){super(c),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=(e,t,s)=>this.state[s]&&p.createElement(e,{view:this.view,settings:t,dir:this.props.dir,onClose:()=>this.setState({[s]:!1})}),this.renderTool=(e,t,s=!1)=>{const d=p.createElement(e,{view:this.view,dir:this.props.dir,key:t,className:s?"k-toolbar-button":void 0});return d.type===w.ToolbarSeparator?p.createElement(e,{key:t}):d},this.updateTools=(e,t)=>{this.setState({view:e})},this.filterTransaction=(e,t)=>{const s={target:this,transaction:e,state:t};return(this.props.onExecute&&this.props.onExecute.call(void 0,s))!==!1},this.onPasteHtml=e=>{if(this.props.onPasteHtml&&this.pasteEvent){const t={target:this,pastedHtml:e,nativeEvent:this.pasteEvent},s=this.props.onPasteHtml.call(void 0,t);if(this.pasteEvent=void 0,typeof s=="string")return s}return e},this.dispatchTransaction=e=>{const t=e.docChanged;if(this.props.onChange&&t){this.trOnChange=e;const s=e.doc,d=e.doc.type.schema,u={target:this,value:s,html:"",transaction:e,schema:d};Object.defineProperty(u,"html",{get:()=>(this.htmlOnChange=L.EditorUtils.getHtml({doc:s,schema:d}),this.htmlOnChange)}),this.props.onChange.call(void 0,u)}this.view&&(this.props.value===void 0||!t)&&this.view.updateState(this.view.state.apply(e))},this.onFocus=(e,t)=>{if(this.props.onFocus){const s={target:this,nativeEvent:t};this.props.onFocus.call(void 0,s)}return!1},this.onBlur=(e,t)=>{if(this.props.onBlur){const s={target:this,nativeEvent:t};this.props.onBlur.call(void 0,s)}return!1},this.onPaste=(e,t)=>(this.props.onPasteHtml&&(this.pasteEvent=t),!1),this.onIFrameInit=e=>{if(this.props.onIFrameInit){const t={target:this,iframe:e};this.props.onIFrameInit.call(void 0,t)}return!1},this.showLicenseWatermark=!C.validatePackage(B.packageMetadata,{component:"Editor"}),this.licenseMessage=C.getLicenseMessage(B.packageMetadata)}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||""}get element(){return this._element}get contentElement(){return this._contentElement}get view(){return this._view}componentDidMount(){this.initialize()}componentDidUpdate(c){const{value:e}=this.props,t=this.view;e===void 0||!t||(A.updateEditorValue(t,e,c.value,this.trOnChange,this.htmlOnChange),this.trOnChange=null,this.htmlOnChange=null)}componentWillUnmount(){var e;this.view&&this.view.destroy(),this._view=void 0;const c=(e=this.iframe)==null?void 0:e.contentWindow;if(c){this._contentElement&&this._contentElement.parentNode&&this._contentElement.parentNode.removeChild(this._contentElement);const t=c.document.head;for(;t&&t.firstChild;)t.removeChild(t.firstChild)}}render(){const{tools:c=[],defaultEditMode:e="iframe",preserveWhitespace:t="full",style:s,className:d}=this.props,u=O.provideLocalizationService(this),f=this.props.ariaLabel||u.toLanguageString(h.keys.contentAreaLabel,h.messages[h.keys.contentAreaLabel]);if(this.view){const r=D.editorPropsKey.getState(this.view.state);r.preserveWhitespace=t}let m=this.props.contentStyle;m===void 0&&(s||{}).height===void 0&&(m={height:"300px"});const v=(r,n)=>r.displayName||r.name||`tool-${n}`,k=(r,n)=>r.map((a,l)=>v(a,l)).join("-")||`group-${n}`,E=c.map((r,n)=>Array.isArray(r)?p.createElement(w.ButtonGroup,{key:k(r,n),className:"k-toolbar-button-group"},r.map((a,l)=>this.renderTool(a,v(a,l)))):this.renderTool(r,v(r,n),!0));return p.createElement("div",{ref:r=>{this._element=r},className:C.classNames("k-editor",d,{"k-editor-resizable":this.props.resizable}),dir:this.props.dir,style:s},E.length>0&&p.createElement(w.Toolbar,{className:"k-editor-toolbar",ariaLabel:u.toLanguageString(h.keys.toolbarAriaLabel,h.messages[h.keys.toolbarAriaLabel]),keyboardNavigation:this.props.keyboardNavigation},E),e==="iframe"?p.createElement("iframe",{ref:r=>{this.iframe=r},frameBorder:"0",title:u.toLanguageString(h.keys.iframeTitle,h.messages[h.keys.iframeTitle]),style:m,className:"k-iframe"}):p.createElement("div",{ref:r=>{this._contentElement=r},style:m,className:"k-editor-content",role:"textbox","aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-label":f,suppressContentEditableWarning:!0}),this.renderDialog(x.EditorDialogs.InsertLinkDialog,M,"linkDialog"),this.showLicenseWatermark&&p.createElement(C.WatermarkOverlay,{message:this.licenseMessage}))}initialize(){const c=this.iframe&&this.iframe.contentWindow;if(c){const n=c.document,a=n.createElement("meta");a.setAttribute("charset","utf-8"),n.head.appendChild(a),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("aria-label",this.props.ariaLabel||O.provideLocalizationService(this).toLanguageString(h.keys.contentAreaLabel,h.messages[h.keys.contentAreaLabel])),this.iframe&&this.props.onIFrameInit?this.onIFrameInit(this.iframe):[S.defaultStyle,S.tablesStyles,this.props.dir==="rtl"?S.rtlStyles:void 0].forEach(l=>{if(l){const b=n.createElement("style");b.appendChild(n.createTextNode(l)),n.head.appendChild(b)}})}const e=this._contentElement;if(!e)return;const{preserveWhitespace:t="full"}=this.props,s=[new o.Plugin({view:(()=>({update:this.updateTools})),key:new o.PluginKey("toolbar-tools-update-plugin")}),new o.Plugin({filterTransaction:this.filterTransaction,key:new o.PluginKey("onExecute-event-plugin")}),new o.Plugin({key:D.editorPropsKey,state:{init:()=>({preserveWhitespace:t}),apply:(n,a)=>a}}),o.spacesFix(),o.caretColor(),o.history(),o.dropCursor(),o.gapCursor(),o.tableEditing(),o.cspFix()],d={...L.EditorUtils.getShortcuts({types:{listItem:"list_item",hardBreak:"hard_break"},toolsSettings:{bold:F,italic:W,underline:j}}),"Mod-k":()=>{const{linkDialog:n}=this.state,a=this.view;if(a){const l=a.state,b=l.selection.empty,y=o.getMark(l,l.schema.marks[M.mark]);!n&&!(b&&!y)&&this.setState({linkDialog:!0})}return!n},"Alt-F10":()=>{var a;const n=(a=this.element)==null?void 0:a.querySelector(".k-toolbar");if(n){const l=n.querySelector(w.toolbarButtons.join(","));if(l)return l.focus(),!0}return!1}},{defaultContent:u="",value:f,onMount:m}=this.props,v=f&&typeof f!="string"?f:L.EditorUtils.createDocument(new o.Schema({nodes:o.nodes,marks:o.marks}),f||u,{preserveWhitespace:t}),k={state:o.EditorState.create({plugins:[...s,o.keymap(d),o.keymap(o.baseKeymap)],doc:v}),transformPastedHTML:this.onPasteHtml,dispatchTransaction:this.dispatchTransaction,handleDOMEvents:{focus:this.onFocus,blur:this.onBlur,paste:this.onPaste},handleDrop:(n,a,l,b)=>{let y=!1;return l.content.nodesBetween(0,l.content.size,T=>{y=y||T.type.name==="table_caption_external"}),y}},E={plugins:s,shortcuts:d,target:this,viewProps:k,dom:e},r=this._view=m&&m.call(void 0,E)||new o.EditorView({mount:e},k);this.setState({view:r})}};P.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 _=P;O.registerForLocalization(_);exports.Editor=_;

package/Editor.mjs

@@ -5,28 +5,28 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as l from "react";
+import * as c from "react";
 import i from "prop-types";
-import { ToolbarSeparator as D, ButtonGroup as B, Toolbar as F, toolbarButtons as I } from "@progress/kendo-react-buttons";
-import { validatePackage as L, getLicenseMessage as M, classNames as W, WatermarkOverlay as x } from "@progress/kendo-react-common";
-import { Plugin as w, PluginKey as _, spacesFix as H, caretColor as z, history as j, dropCursor as K, gapCursor as A, tableEditing as V, cspFix as U, Schema as q, marks as G, nodes as $, EditorState as R, keymap as S, baseKeymap as J, EditorView as Q, getMark as X } from "@progress/kendo-editor-common";
-import { defaultStyle as Y, tablesStyles as Z, rtlStyles as tt } from "./config/defaultStyles.mjs";
-import { EditorToolsSettings as et } from "./config/toolsSettings.mjs";
-import { EditorDialogs as it } from "./dialogs/index.mjs";
-import { EditorUtils as b } from "./utils/index.mjs";
-import { editorPropsKey as T } from "./utils/props-key.mjs";
-import { updateEditorValue as st } from "./utils/controlled-value.mjs";
-import { packageMetadata as O } from "./package-metadata.mjs";
-import { keys as N, messages as ot } from "./messages/index.mjs";
-import { provideLocalizationService as nt, registerForLocalization as rt } from "@progress/kendo-react-intl";
-const { link: P, bold: at, italic: lt, underline: ht } = et, k = class k extends l.Component {
-  constructor(h) {
-    super(h), this.state = {
+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__ */ l.createElement(
+    }, this.renderDialog = (t, e, s) => this.state[s] && /* @__PURE__ */ c.createElement(
       t,
       {
         view: this.view,
@@ -35,7 +35,7 @@ const { link: P, bold: at, italic: lt, underline: ht } = et, k = class k extends
         onClose: () => this.setState({ [s]: !1 })
       }
     ), this.renderTool = (t, e, s = !1) => {
-      const c = /* @__PURE__ */ l.createElement(
+      const h = /* @__PURE__ */ c.createElement(
         t,
         {
           view: this.view,
@@ -44,7 +44,7 @@ const { link: P, bold: at, italic: lt, underline: ht } = et, k = class k extends
           className: s ? "k-toolbar-button" : void 0
         }
       );
-      return c.type === D ? /* @__PURE__ */ l.createElement(t, { key: e }) : c;
+      return h.type === A ? /* @__PURE__ */ c.createElement(t, { key: e }) : h;
     }, this.updateTools = (t, e) => {
       this.setState({ view: t });
     }, this.filterTransaction = (t, e) => {
@@ -65,16 +65,16 @@ const { link: P, bold: at, italic: lt, underline: ht } = et, k = class k extends
       const e = t.docChanged;
       if (this.props.onChange && e) {
         this.trOnChange = t;
-        const s = t.doc, c = t.doc.type.schema, m = {
+        const s = t.doc, h = t.doc.type.schema, p = {
           target: this,
           value: s,
           html: "",
           transaction: t,
-          schema: c
+          schema: h
         };
-        Object.defineProperty(m, "html", {
-          get: () => (this.htmlOnChange = b.getHtml({ doc: s, schema: c }), this.htmlOnChange)
-        }), this.props.onChange.call(void 0, m);
+        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) => {
@@ -104,7 +104,7 @@ const { link: P, bold: at, italic: lt, underline: ht } = et, k = class k extends
         this.props.onIFrameInit.call(void 0, e);
       }
       return !1;
-    }, this.showLicenseWatermark = !L(O, { component: "Editor" }), this.licenseMessage = M(O);
+    }, this.showLicenseWatermark = !I(D, { component: "Editor" }), this.licenseMessage = M(D);
   }
   /**
    * The value of the Editor.
@@ -139,9 +139,9 @@ const { link: P, bold: at, italic: lt, underline: ht } = et, k = class k extends
   /**
    * @hidden
    */
-  componentDidUpdate(h) {
+  componentDidUpdate(l) {
     const { value: t } = this.props, e = this.view;
-    t === void 0 || !e || (st(e, t, h.value, this.trOnChange, this.htmlOnChange), this.trOnChange = null, this.htmlOnChange = null);
+    t === void 0 || !e || (ot(e, t, l.value, this.trOnChange, this.htmlOnChange), this.trOnChange = null, this.htmlOnChange = null);
   }
   /**
    * @hidden
@@ -149,10 +149,10 @@ const { link: P, bold: at, italic: lt, underline: ht } = et, k = class k extends
   componentWillUnmount() {
     var t;
     this.view && this.view.destroy(), this._view = void 0;
-    const h = (t = this.iframe) == null ? void 0 : t.contentWindow;
-    if (h) {
+    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 = h.document.head;
+      const e = l.document.head;
       for (; e && e.firstChild; )
         e.removeChild(e.firstChild);
     }
@@ -161,60 +161,76 @@ const { link: P, bold: at, italic: lt, underline: ht } = et, k = class k extends
    * @hidden
    */
   render() {
-    const { tools: h = [], defaultEditMode: t = "iframe", preserveWhitespace: e = "full", style: s, className: c } = this.props, m = nt(this);
+    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 = T.getState(this.view.state);
+      const o = B.getState(this.view.state);
       o.preserveWhitespace = e;
     }
-    let p = this.props.contentStyle;
-    p === void 0 && (s || {}).height === void 0 && (p = { height: "300px" });
-    const u = (o, d) => o.displayName || o.name || `tool-${d}`, y = (o, d) => o.map((n, r) => u(n, r)).join("-") || `group-${d}`, f = h.map(
-      (o, d) => Array.isArray(o) ? /* @__PURE__ */ l.createElement(B, { key: y(o, d), className: "k-toolbar-button-group" }, o.map((n, r) => this.renderTool(n, u(n, r)))) : this.renderTool(o, u(o, d), !0)
+    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__ */ l.createElement(
+    return /* @__PURE__ */ c.createElement(
       "div",
       {
         ref: (o) => {
           this._element = o;
         },
-        className: W("k-editor", c, { "k-editor-resizable": this.props.resizable }),
+        className: W("k-editor", h, { "k-editor-resizable": this.props.resizable }),
         dir: this.props.dir,
         style: s
       },
-      f.length > 0 && /* @__PURE__ */ l.createElement(F, { className: "k-editor-toolbar", keyboardNavigation: this.props.keyboardNavigation }, f),
-      t === "iframe" ? /* @__PURE__ */ l.createElement("div", { className: "k-editor-content" }, /* @__PURE__ */ l.createElement(
+      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: m.toLanguageString(N.iframeTitle, ot[N.iframeTitle]),
-          style: p,
+          title: p.toLanguageString(d.iframeTitle, w[d.iframeTitle]),
+          style: m,
           className: "k-iframe"
         }
-      )) : /* @__PURE__ */ l.createElement("div", { style: p, className: "k-editor-content" }, /* @__PURE__ */ l.createElement(
+      ) : /* @__PURE__ */ c.createElement(
         "div",
         {
           ref: (o) => {
             this._contentElement = o;
           },
-          suppressContentEditableWarning: !0,
+          style: m,
+          className: "k-editor-content",
           role: "textbox",
           "aria-labelledby": this.props.ariaLabelledBy,
           "aria-describedby": this.props.ariaDescribedBy,
-          "aria-label": this.props.ariaLabel
+          "aria-label": u,
+          suppressContentEditableWarning: !0
         }
-      )),
-      this.renderDialog(it.InsertLinkDialog, P, "linkDialog"),
-      this.showLicenseWatermark && /* @__PURE__ */ l.createElement(x, { message: this.licenseMessage })
+      ),
+      this.renderDialog(nt.InsertLinkDialog, P, "linkDialog"),
+      this.showLicenseWatermark && /* @__PURE__ */ c.createElement(H, { message: this.licenseMessage })
     );
   }
   initialize() {
-    const h = this.iframe && this.iframe.contentWindow;
-    if (h) {
-      const n = h.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.iframe && this.props.onIFrameInit ? this.onIFrameInit(this.iframe) : [Y, Z, this.props.dir === "rtl" ? tt : void 0].forEach((a) => {
+    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(
+        "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);
@@ -226,37 +242,37 @@ const { link: P, bold: at, italic: lt, underline: ht } = et, k = class k extends
       return;
     const { preserveWhitespace: e = "full" } = this.props, s = [
       // https://prosemirror.net/docs/ref/#state.PluginSpec
-      new w({
+      new E({
         view: (() => ({ update: this.updateTools })),
-        key: new _("toolbar-tools-update-plugin")
+        key: new S("toolbar-tools-update-plugin")
       }),
-      new w({
+      new E({
         filterTransaction: this.filterTransaction,
-        key: new _("onExecute-event-plugin")
+        key: new S("onExecute-event-plugin")
       }),
-      new w({
-        key: T,
+      new E({
+        key: B,
         state: {
           init: () => ({ preserveWhitespace: e }),
           apply: (n, r) => r
         }
       }),
-      H(),
       z(),
       j(),
       K(),
-      A(),
       V(),
-      U()
-    ], c = {
-      ...b.getShortcuts({
+      U(),
+      q(),
+      G()
+    ], h = {
+      ...k.getShortcuts({
         types: { listItem: "list_item", hardBreak: "hard_break" },
         toolsSettings: { bold: at, italic: lt, underline: ht }
       }),
       "Mod-k": () => {
         const { linkDialog: n } = this.state, r = this.view;
         if (r) {
-          const a = r.state, v = a.selection.empty, g = X(a, a.schema.marks[P.mark]);
+          const a = r.state, v = a.selection.empty, g = Z(a, a.schema.marks[P.mark]);
           !n && !(v && !g) && this.setState({ linkDialog: !0 });
         }
         return !n;
@@ -265,18 +281,18 @@ const { link: P, bold: at, italic: lt, underline: ht } = et, k = class k extends
         var r;
         const n = (r = this.element) == null ? void 0 : r.querySelector(".k-toolbar");
         if (n) {
-          const a = n.querySelector(I.join(","));
+          const a = n.querySelector(F.join(","));
           if (a)
             return a.focus(), !0;
         }
         return !1;
       }
-    }, { defaultContent: m = "", value: p, onMount: u } = this.props, y = p && typeof p != "string" ? p : b.createDocument(new q({ nodes: $, marks: G }), p || m, {
+    }, { 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
-    }), f = {
-      state: R.create({
-        plugins: [...s, S(c), S(J)],
-        doc: y
+    }), b = {
+      state: Q.create({
+        plugins: [...s, T(h), T(X)],
+        doc: f
       }),
       transformPastedHTML: this.onPasteHtml,
       dispatchTransaction: this.dispatchTransaction,
@@ -287,17 +303,17 @@ const { link: P, bold: at, italic: lt, underline: ht } = et, k = class k extends
       },
       handleDrop: (n, r, a, v) => {
         let g = !1;
-        return a.content.nodesBetween(0, a.content.size, (C) => {
-          g = g || C.type.name === "table_caption_external";
+        return a.content.nodesBetween(0, a.content.size, (L) => {
+          g = g || L.type.name === "table_caption_external";
         }), g;
       }
-    }, o = { plugins: s, shortcuts: c, target: this, viewProps: f, dom: t }, d = this._view = u && u.call(void 0, o) || new Q({ mount: t }, f);
+    }, 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: d
+      view: o
     });
   }
 };
-k.propTypes = {
+_.propTypes = {
   defaultContent: i.string,
   value: i.oneOfType([i.object, i.string]),
   defaultEditMode: i.oneOf(["iframe", "div"]),
@@ -320,8 +336,8 @@ k.propTypes = {
   onExecute: i.func,
   onIFrameInit: i.func
 };
-let E = k;
-rt(E);
+let C = _;
+rt(C);
 export {
-  E as Editor
+  C as Editor
 };

package/EditorMcpWrapper.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Editor as EditorClassComponent } from './Editor.js';
+import { EditorProps } from './EditorProps';
+/**
+ * Editor wrapper that integrates the Web MCP hook.
+ *
+ * @hidden
+ */
+import * as React from 'react';
+/** @hidden */
+export declare const EditorWrapper: React.ForwardRefExoticComponent<EditorProps & React.RefAttributes<EditorClassComponent>>;

package/EditorMcpWrapper.js

@@ -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
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),d=require("./Editor.js"),n=require("@progress/kendo-react-common");function u(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const c=u(i),a=c.forwardRef((e,r)=>{const[t,o]=n.useMergedRef(r);return n.useWebMcpRegister("editor",t,e,e.webMcp),c.createElement(d.Editor,{...e,ref:o})});a.displayName="KendoReactEditor";exports.EditorWrapper=a;

package/EditorMcpWrapper.mjs

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as r from "react";
+import { Editor as d } from "./Editor.mjs";
+import { useMergedRef as f, useWebMcpRegister as m } from "@progress/kendo-react-common";
+const a = r.forwardRef((e, t) => {
+  const [o, i] = f(t);
+  return m("editor", o, e, e.webMcp), /* @__PURE__ */ r.createElement(d, { ...e, ref: i });
+});
+a.displayName = "KendoReactEditor";
+export {
+  a as EditorWrapper
+};

package/EditorProps.d.ts

@@ -8,6 +8,7 @@
 import { EditorState, Plugin, Transaction, EditorView, Schema, Node } from '@progress/kendo-editor-common';
 import { EditorUtils } from './utils/index.js';
 import { Editor } from './Editor.js';
+import { WebMcpProps } from '@progress/kendo-react-common';
 interface EditorEvent {
     /**
      * An event target.
@@ -411,5 +412,21 @@ export interface EditorProps {
      * ```
      */
     preserveWhitespace?: boolean | 'full';
+    /**
+     * Enables browser-native AI agent tools via Web MCP (Chrome 146+).
+     *
+     * Pass `true` for defaults or an object for fine-grained control.
+     * AI agents are multilingual — `dataName` accepts any language.
+     *
+     * @example
+     * ```tsx
+     * // Boolean: generic "editor" label
+     * <Editor webMcp tools={[[EditorTools.Bold, EditorTools.Italic]]} />
+     *
+     * // Config object: explicit name
+     * <Editor webMcp={{ dataName: 'article' }} tools={[[EditorTools.Bold, EditorTools.Italic]]} />
+     * ```
+     */
+    webMcp?: boolean | WebMcpProps;
 }
 export {};