@progress/kendo-react-editor/Editor.js

React Editor enables users to create rich text content through a WYSIWYG interface. KendoReact Editor package

/**
 * @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 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=_;