@progress/kendo-react-editor 8.3.0-develop.9 → 8.4.0-develop.1

package/Editor.js

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

package/Editor.mjs

@@ -8,9 +8,9 @@
 "use client";
 import * as a from "react";
 import i from "prop-types";
-import { ToolbarSeparator as B, ButtonGroup as L, Toolbar as W, toolbarButtons as x } from "@progress/kendo-react-buttons";
-import { validatePackage as M, shouldShowValidationUI as z, classNames as H, WatermarkOverlay as F } from "@progress/kendo-react-common";
-import { Plugin as w, PluginKey as _, spacesFix as j, caretColor as V, history as A, dropCursor as U, gapCursor as I, tableEditing as K, cspFix as q, getMark as G, Schema as R, nodes as J, marks as Q, EditorState as X, keymap as S, baseKeymap as Y, EditorView as Z } from "@progress/kendo-editor-common";
+import { ToolbarSeparator as I, ButtonGroup as B, Toolbar as F, toolbarButtons as L } from "@progress/kendo-react-buttons";
+import { validatePackage as W, shouldShowValidationUI as x, classNames as M, WatermarkOverlay as z } from "@progress/kendo-react-common";
+import { Plugin as w, PluginKey as _, spacesFix as H, caretColor as j, history as V, dropCursor as A, gapCursor as U, tableEditing as K, cspFix as q, getMark as G, Schema as R, nodes as J, marks as Q, EditorState as X, keymap as S, baseKeymap as Y, EditorView as Z } from "@progress/kendo-editor-common";
 import { defaultStyle as $, tablesStyles as tt, rtlStyles as et } from "./config/defaultStyles.mjs";
 import { EditorToolsSettings as it } from "./config/toolsSettings.mjs";
 import { EditorDialogs as st } from "./dialogs/index.mjs";
@@ -46,7 +46,7 @@ const { link: N, bold: lt, italic: ht, underline: ct } = it, k = class k extends
           className: s ? "k-toolbar-button" : void 0
         }
       );
-      return c.type === B ? /* @__PURE__ */ a.createElement(t, { key: e }) : c;
+      return c.type === I ? /* @__PURE__ */ a.createElement(t, { key: e }) : c;
     }, this.updateTools = (t, e) => {
       this.setState({ view: t });
     }, this.filterTransaction = (t, e) => {
@@ -97,7 +97,16 @@ const { link: N, bold: lt, italic: ht, underline: ct } = it, k = class k extends
         this.props.onBlur.call(void 0, s);
       }
       return !1;
-    }, this.onPaste = (t, e) => (this.props.onPasteHtml && (this.pasteEvent = e), !1), M(P), this.showLicenseWatermark = z(P);
+    }, 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);
+      }
+      return !1;
+    }, W(P), this.showLicenseWatermark = x(P);
   }
   /**
    * The value of the Editor.
@@ -140,42 +149,39 @@ const { link: N, bold: lt, italic: ht, underline: ct } = it, k = class k extends
    * @hidden
    */
   componentWillUnmount() {
+    var t;
     this.view && this.view.destroy(), this._view = void 0;
-    const l = this.iframe && this.iframe.contentWindow;
+    const l = (t = this.iframe) == null ? void 0 : t.contentWindow;
     if (l) {
       this._contentElement && this._contentElement.parentNode && this._contentElement.parentNode.removeChild(this._contentElement);
-      const t = l.document.head;
-      for (; t && t.firstChild; )
-        t.removeChild(t.firstChild);
+      const e = l.document.head;
+      for (; e && e.firstChild; )
+        e.removeChild(e.firstChild);
     }
   }
   /**
    * @hidden
    */
   render() {
-    const {
-      tools: l = [],
-      defaultEditMode: t = "iframe",
-      preserveWhitespace: e = "full",
-      style: s,
-      className: c
-    } = this.props, d = rt(this);
+    const { tools: l = [], defaultEditMode: t = "iframe", preserveWhitespace: e = "full", style: s, className: c } = this.props, d = rt(this);
     if (this.view) {
       const n = T.getState(this.view.state);
       n.preserveWhitespace = e;
     }
     let p = this.props.contentStyle;
     p === void 0 && (s || {}).height === void 0 && (p = { height: "300px" });
-    const m = l.map((n, u) => Array.isArray(n) ? /* @__PURE__ */ a.createElement(L, { key: u, className: "k-toolbar-button-group k-button-group-solid" }, n.map((g, y) => this.renderTool(g, y))) : this.renderTool(n, u, !0));
+    const m = l.map(
+      (n, u) => Array.isArray(n) ? /* @__PURE__ */ a.createElement(B, { key: u, className: "k-toolbar-button-group k-button-group-solid" }, n.map((g, y) => this.renderTool(g, y))) : this.renderTool(n, u, !0)
+    );
     return /* @__PURE__ */ a.createElement(
       "div",
       {
         ref: (n) => this._element = n,
-        className: H("k-editor", c, { "k-editor-resizable": this.props.resizable }),
+        className: M("k-editor", c, { "k-editor-resizable": this.props.resizable }),
         dir: this.props.dir,
         style: s
       },
-      m.length > 0 && /* @__PURE__ */ a.createElement(W, { className: "k-editor-toolbar", keyboardNavigation: this.props.keyboardNavigation }, m),
+      m.length > 0 && /* @__PURE__ */ a.createElement(F, { className: "k-editor-toolbar", keyboardNavigation: this.props.keyboardNavigation }, m),
       t === "iframe" ? /* @__PURE__ */ a.createElement("div", { className: "k-editor-content" }, /* @__PURE__ */ a.createElement(
         "iframe",
         {
@@ -188,46 +194,36 @@ const { link: N, bold: lt, italic: ht, underline: ct } = it, k = class k extends
           style: p,
           className: "k-iframe"
         }
-      )) : /* @__PURE__ */ a.createElement(
+      )) : /* @__PURE__ */ a.createElement("div", { style: p, className: "k-editor-content" }, /* @__PURE__ */ a.createElement(
         "div",
         {
-          style: p,
-          className: "k-editor-content"
-        },
-        /* @__PURE__ */ a.createElement(
-          "div",
-          {
-            ref: (n) => this._contentElement = n,
-            suppressContentEditableWarning: !0,
-            role: "textbox",
-            "aria-labelledby": this.props.ariaLabelledBy,
-            "aria-describedby": this.props.ariaDescribedBy,
-            "aria-label": this.props.ariaLabel
-          }
-        )
-      ),
+          ref: (n) => this._contentElement = n,
+          suppressContentEditableWarning: !0,
+          role: "textbox",
+          "aria-labelledby": this.props.ariaLabelledBy,
+          "aria-describedby": this.props.ariaDescribedBy,
+          "aria-label": this.props.ariaLabel
+        }
+      )),
       this.renderDialog(st.InsertLinkDialog, N, "linkDialog"),
-      this.showLicenseWatermark && /* @__PURE__ */ a.createElement(F, null)
+      this.showLicenseWatermark && /* @__PURE__ */ a.createElement(z, null)
     );
   }
   initialize() {
     const l = this.iframe && this.iframe.contentWindow;
     if (l) {
-      const o = l.document;
-      [$, tt, this.props.dir === "rtl" ? et : void 0].forEach((r) => {
+      const o = l.document, h = o.createElement("meta");
+      h.setAttribute("charset", "utf-8"), o.head.appendChild(h), this._contentElement = o.createElement("div"), o.body.appendChild(this._contentElement), this._contentElement.classList.add("k-content"), this.iframe && this.props.onIFrameInit ? this.onIFrameInit(this.iframe) : [$, tt, this.props.dir === "rtl" ? et : void 0].forEach((r) => {
         if (r) {
           const f = o.createElement("style");
           f.appendChild(o.createTextNode(r)), o.head.appendChild(f);
         }
       });
-      const h = o.createElement("meta");
-      h.setAttribute("charset", "utf-8"), o.head.appendChild(h), this._contentElement = o.createElement("div"), o.body.appendChild(this._contentElement), this._contentElement.classList.add("k-content");
     }
     const t = this._contentElement;
     if (!t)
       return;
-    const { preserveWhitespace: e = "full" } = this.props;
-    let s = [
+    const { preserveWhitespace: e = "full" } = this.props, s = [
       // https://prosemirror.net/docs/ref/#state.PluginSpec
       new w({
         view: () => ({ update: this.updateTools }),
@@ -244,11 +240,11 @@ const { link: N, bold: lt, italic: ht, underline: ct } = it, k = class k extends
           apply: (o, h) => h
         }
       }),
+      H(),
       j(),
       V(),
       A(),
       U(),
-      I(),
       K(),
       q()
     ], c = {
@@ -268,14 +264,15 @@ const { link: N, bold: lt, italic: ht, underline: ct } = it, k = class k extends
         var h;
         const o = (h = this.element) == null ? void 0 : h.querySelector(".k-toolbar");
         if (o) {
-          const r = o.querySelector(x.join(","));
+          const r = o.querySelector(L.join(","));
           if (r)
             return r.focus(), !0;
         }
         return !1;
       }
-    };
-    const { defaultContent: d = "", value: p, onMount: m } = this.props, n = p && typeof p != "string" ? p : b.createDocument(new R({ nodes: J, marks: Q }), p || d, { preserveWhitespace: e }), u = {
+    }, { defaultContent: d = "", value: p, onMount: m } = this.props, n = p && typeof p != "string" ? p : b.createDocument(new R({ nodes: J, marks: Q }), p || d, {
+      preserveWhitespace: e
+    }), u = {
       state: X.create({
         plugins: [...s, S(c), S(Y)],
         doc: n
@@ -319,7 +316,8 @@ k.propTypes = {
   onBlur: i.func,
   onChange: i.func,
   onPasteHtml: i.func,
-  onExecute: i.func
+  onExecute: i.func,
+  onIFrameInit: i.func
 };
 let E = k;
 at(E);

package/config/defaultStyles.js

@@ -11,55 +11,44 @@ html, body {
     height: 100%;
     padding: 0;
 }
-
 html {
   min-height: 100%;
 }
-
 body {
   box-sizing: border-box;
   position: relative;
   word-wrap: break-word;
   padding: 8px;
 }
-
 body > .k-content {
   outline: 0;
   height: 100%;
   white-space: pre-wrap;
 }
-
 .k-content > p {
   margin: 0 0 1em;
 }
-
 .k-content table {
   white-space: pre-wrap;
 }
-
 .k-content .k-text-selected, .k-content::selection {
   color: HighlightText;
   background-color: Highlight;
 }
-
 .k-content .k-text-highlighted {
   background-color: #bbdefb;
 }
-
 .k-content .ProseMirror-selectednode {
   outline: 2px solid #8cf;
 }
-
 .ProseMirror-hideselection *::selection { background: transparent; }
 .ProseMirror-hideselection *::-moz-selection { background: transparent; }
 .ProseMirror-hideselection { caret-color: transparent; }
-
 .ProseMirror-gapcursor {
   display: none;
   pointer-events: none;
   position: absolute;
 }
-
 .ProseMirror-gapcursor:after {
   content: "";
   display: block;
@@ -69,22 +58,18 @@ body > .k-content {
   border-top: 1px solid black;
   animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
 }
-
 @keyframes ProseMirror-cursor-blink {
   to {
     visibility: hidden;
   }
 }
-
 .ProseMirror-focused .ProseMirror-gapcursor {
   display: block;
 }
-
 .k-editor-resize-handles-wrapper {
   position: absolute;
   visibility: hidden;
 }
-
 .k-editor-resize-handle {
   position: absolute;
   visibility: visible;
@@ -94,68 +79,58 @@ body > .k-content {
   width: 5px;
   height: 5px;
 }
-
 .k-editor-resize-handle.northwest {
   top: 0;
   left: 0;
   transform: translate(-50%, -50%);
   cursor: nw-resize;
 }
-
 .k-editor-resize-handle.north {
   top: 0;
   left: 50%;
   transform: translate(-50%, -50%);
   cursor: n-resize;
 }
-
 .k-editor-resize-handle.northeast {
   top: 0;
   right: 0;
   transform: translate(50%, -50%);
   cursor: ne-resize;
 }
-
 .k-editor-resize-handle.southwest {
   left: 0;
   bottom: 0;
   transform: translate(-50%, 50%);
   cursor: sw-resize;
 }
-
 .k-editor-resize-handle.south {
   bottom: 0;
   left: 50%;
   transform: translate(-50%, 50%);
   cursor: s-resize;
 }
-
 .k-editor-resize-handle.southeast {
   right: 0;
   bottom: 0;
   transform: translate(50%, 50%);
   cursor: se-resize;
 }
-
 .k-editor-resize-handle.west {
   top: 50%;
   left: 0;
   transform: translate(-50%, -50%);
   cursor: w-resize;
 }
-
 .k-editor-resize-handle.east {
   top: 50%;
   right: 0;
   transform: translate(50%, -50%);
   cursor: e-resize;
 }
-
 .k-editor-resize-wrap-element {
   display: inline-block;
   position: relative;
 }
-
 .ProseMirror .row-resize-handle {
   position: absolute;
   right: 0; left: 0; bottom: 0;
@@ -165,7 +140,6 @@ body > .k-content {
   background-color: #adf;
   pointer-events: none;
 }
-
 .ProseMirror .column-resize-handle {
   position: absolute;
   right: -2px; top: 0; bottom: 0;
@@ -174,17 +148,14 @@ body > .k-content {
   background-color: #adf;
   pointer-events: none;
 }
-
 .ProseMirror.resize-cursor {
   cursor: ew-resize;
   cursor: col-resize;
 }
-
 .ProseMirror.resize-cursor-vertical {
   cursor: sn-resize;
   cursor: row-resize;
 }
-
 .k-editor-resize-wrap-element table td p,
 .k-editor-resize-wrap-element table th p {
   margin: 0 auto;
@@ -194,7 +165,6 @@ body > .k-content {
     overflow-x: auto;
     margin: 1em 0;
   }
-
   .ProseMirror table {
     margin: 0;
     border-collapse: collapse;
@@ -202,7 +172,6 @@ body > .k-content {
     width: 100%;
     overflow: hidden;
   }
-
   .ProseMirror td, .ProseMirror th {
     min-width: 1em;
     border: 1px solid #ddd;
@@ -211,12 +180,10 @@ body > .k-content {
     box-sizing: border-box;
     position: relative;
   }
-
   .ProseMirror th {
     font-weight: bold;
     text-align: left;
   }
-
   /* Give selected cells a blue overlay */
   .ProseMirror .selectedCell:after {
     z-index: 2;

package/config/defaultStyles.mjs

@@ -12,55 +12,44 @@ html, body {
     height: 100%;
     padding: 0;
 }
-
 html {
   min-height: 100%;
 }
-
 body {
   box-sizing: border-box;
   position: relative;
   word-wrap: break-word;
   padding: 8px;
 }
-
 body > .k-content {
   outline: 0;
   height: 100%;
   white-space: pre-wrap;
 }
-
 .k-content > p {
   margin: 0 0 1em;
 }
-
 .k-content table {
   white-space: pre-wrap;
 }
-
 .k-content .k-text-selected, .k-content::selection {
   color: HighlightText;
   background-color: Highlight;
 }
-
 .k-content .k-text-highlighted {
   background-color: #bbdefb;
 }
-
 .k-content .ProseMirror-selectednode {
   outline: 2px solid #8cf;
 }
-
 .ProseMirror-hideselection *::selection { background: transparent; }
 .ProseMirror-hideselection *::-moz-selection { background: transparent; }
 .ProseMirror-hideselection { caret-color: transparent; }
-
 .ProseMirror-gapcursor {
   display: none;
   pointer-events: none;
   position: absolute;
 }
-
 .ProseMirror-gapcursor:after {
   content: "";
   display: block;
@@ -70,22 +59,18 @@ body > .k-content {
   border-top: 1px solid black;
   animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
 }
-
 @keyframes ProseMirror-cursor-blink {
   to {
     visibility: hidden;
   }
 }
-
 .ProseMirror-focused .ProseMirror-gapcursor {
   display: block;
 }
-
 .k-editor-resize-handles-wrapper {
   position: absolute;
   visibility: hidden;
 }
-
 .k-editor-resize-handle {
   position: absolute;
   visibility: visible;
@@ -95,68 +80,58 @@ body > .k-content {
   width: 5px;
   height: 5px;
 }
-
 .k-editor-resize-handle.northwest {
   top: 0;
   left: 0;
   transform: translate(-50%, -50%);
   cursor: nw-resize;
 }
-
 .k-editor-resize-handle.north {
   top: 0;
   left: 50%;
   transform: translate(-50%, -50%);
   cursor: n-resize;
 }
-
 .k-editor-resize-handle.northeast {
   top: 0;
   right: 0;
   transform: translate(50%, -50%);
   cursor: ne-resize;
 }
-
 .k-editor-resize-handle.southwest {
   left: 0;
   bottom: 0;
   transform: translate(-50%, 50%);
   cursor: sw-resize;
 }
-
 .k-editor-resize-handle.south {
   bottom: 0;
   left: 50%;
   transform: translate(-50%, 50%);
   cursor: s-resize;
 }
-
 .k-editor-resize-handle.southeast {
   right: 0;
   bottom: 0;
   transform: translate(50%, 50%);
   cursor: se-resize;
 }
-
 .k-editor-resize-handle.west {
   top: 50%;
   left: 0;
   transform: translate(-50%, -50%);
   cursor: w-resize;
 }
-
 .k-editor-resize-handle.east {
   top: 50%;
   right: 0;
   transform: translate(50%, -50%);
   cursor: e-resize;
 }
-
 .k-editor-resize-wrap-element {
   display: inline-block;
   position: relative;
 }
-
 .ProseMirror .row-resize-handle {
   position: absolute;
   right: 0; left: 0; bottom: 0;
@@ -166,7 +141,6 @@ body > .k-content {
   background-color: #adf;
   pointer-events: none;
 }
-
 .ProseMirror .column-resize-handle {
   position: absolute;
   right: -2px; top: 0; bottom: 0;
@@ -175,17 +149,14 @@ body > .k-content {
   background-color: #adf;
   pointer-events: none;
 }
-
 .ProseMirror.resize-cursor {
   cursor: ew-resize;
   cursor: col-resize;
 }
-
 .ProseMirror.resize-cursor-vertical {
   cursor: sn-resize;
   cursor: row-resize;
 }
-
 .k-editor-resize-wrap-element table td p,
 .k-editor-resize-wrap-element table th p {
   margin: 0 auto;
@@ -195,7 +166,6 @@ body > .k-content {
     overflow-x: auto;
     margin: 1em 0;
   }
-
   .ProseMirror table {
     margin: 0;
     border-collapse: collapse;
@@ -203,7 +173,6 @@ body > .k-content {
     width: 100%;
     overflow: hidden;
   }
-
   .ProseMirror td, .ProseMirror th {
     min-width: 1em;
     border: 1px solid #ddd;
@@ -212,12 +181,10 @@ body > .k-content {
     box-sizing: border-box;
     position: relative;
   }
-
   .ProseMirror th {
     font-weight: bold;
     text-align: left;
   }
-
   /* Give selected cells a blue overlay */
   .ProseMirror .selectedCell:after {
     z-index: 2;

package/dialogs/insertImage.mjs

@@ -26,7 +26,10 @@ let A = class extends e.Component {
         width: this.width ? this.width.value : null,
         height: this.height ? this.height.value : null
       }, c = Object.keys(n).filter((l) => n[l] !== null && n[l] !== "").reduce((l, r) => Object.assign(l, { [r]: n[r] }), {}), d = p.createAndFill(c);
-      d && y(d, !0)(s.state, (r) => s.dispatch(r.setMeta("commandName", m.commandName).setMeta("args", c))), this.onClose();
+      d && y(d, !0)(
+        s.state,
+        (r) => s.dispatch(r.setMeta("commandName", m.commandName).setMeta("args", c))
+      ), this.onClose();
     };
   }
   /**
@@ -48,7 +51,10 @@ let A = class extends e.Component {
     const I = /* @__PURE__ */ e.createElement(
       T,
       {
-        render: () => /* @__PURE__ */ e.createElement(z, { horizontal: !0 }, /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement("label", { htmlFor: "k-editor-image-url", className: "k-form-label" }, i.toLanguageString(c, a[c])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
+        render: () => /* @__PURE__ */ e.createElement(z, { horizontal: !0 }, /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement("label", { htmlFor: "k-editor-image-url", className: "k-form-label" }, i.toLanguageString(
+          c,
+          a[c]
+        )), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
           h,
           {
             type: "text",
@@ -57,7 +63,10 @@ let A = class extends e.Component {
             ref: (t) => this.src = t,
             autoFocus: !0
           }
-        ))), /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement("label", { htmlFor: "k-editor-image-url", className: "k-form-label" }, i.toLanguageString(l, a[l])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
+        ))), /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement("label", { htmlFor: "k-editor-image-url", className: "k-form-label" }, i.toLanguageString(
+          l,
+          a[l]
+        )), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
           h,
           {
             type: "text",
@@ -90,7 +99,10 @@ let A = class extends e.Component {
           }
         ))))
       }
-    ), v = [/* @__PURE__ */ e.createElement(b, { onClick: this.onClose, dir: f, key: "cancel" }, i.toLanguageString(k, a[k])), /* @__PURE__ */ e.createElement(b, { onClick: this.onInsert, themeColor: "primary", dir: f, key: "insert" }, i.toLanguageString(w, a[w]))], N = /* @__PURE__ */ e.createElement(
+    ), v = [
+      /* @__PURE__ */ e.createElement(b, { onClick: this.onClose, dir: f, key: "cancel" }, i.toLanguageString(k, a[k])),
+      /* @__PURE__ */ e.createElement(b, { onClick: this.onInsert, themeColor: "primary", dir: f, key: "insert" }, i.toLanguageString(w, a[w]))
+    ], N = /* @__PURE__ */ e.createElement(
       x,
       {
         initialWidth: 500,