@progress/kendo-react-editor 7.2.4-develop.3 → 7.3.0-develop.1

package/Editor.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 x=require("react"),s=require("prop-types"),b=require("@progress/kendo-react-buttons"),w=require("@progress/kendo-react-common"),n=require("@progress/kendo-editor-common"),E=require("./config/defaultStyles.js"),L=require("./config/toolsSettings.js"),W=require("./dialogs/index.js"),C=require("./utils/index.js"),P=require("./utils/props-key.js"),z=require("./utils/controlled-value.js"),T=require("./utils/browser-detection.js"),D=require("./package-metadata.js"),S=require("./messages/index.js"),B=require("@progress/kendo-react-intl");function j(f){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(f){for(const e in f)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(f,e);Object.defineProperty(o,e,t.get?t:{enumerable:!0,get:()=>f[e]})}}return o.default=f,Object.freeze(o)}const c=j(x),{link:q,bold:H,italic:F,underline:K}=L.EditorToolsSettings,_=class _ 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,i)=>this.state[i]&&c.createElement(e,{view:this.view,settings:t,dir:this.props.dir,onClose:()=>this.setState({[i]:!1})}),this.renderTool=(e,t)=>{const i=c.createElement(e,{view:this.view,dir:this.props.dir,key:t});return i.type===b.ToolbarSeparator?c.createElement(e,{key:t}):i},this.updateTools=(e,t)=>{this.setState({view:e})},this.filterTransaction=(e,t)=>{const i={target:this,transaction:e,state:t};return(this.props.onExecute&&this.props.onExecute.call(void 0,i))!==!1},this.onPasteHtml=e=>{if(this.props.onPasteHtml&&this.pasteEvent){const t={target:this,pastedHtml:e,nativeEvent:this.pasteEvent},i=this.props.onPasteHtml.call(void 0,t);if(this.pasteEvent=void 0,typeof i=="string")return i}return e},this.dispatchTransaction=e=>{const t=e.docChanged;if(this.props.onChange&&t){this.trOnChange=e;const i=e.doc,u=e.doc.type.schema,p={target:this,value:i,html:"",transaction:e,schema:u};Object.defineProperty(p,"html",{get:()=>(this.htmlOnChange=C.EditorUtils.getHtml({doc:i,schema:u}),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 i={target:this,nativeEvent:t};this.props.onFocus.call(void 0,i)}return!1},this.onBlur=(e,t)=>{if(this.props.onBlur){const i={target:this,nativeEvent:t};this.props.onBlur.call(void 0,i)}return!1},this.onPaste=(e,t)=>(this.props.onPasteHtml&&(this.pasteEvent=t),!1),w.validatePackage(D.packageMetadata),this.showLicenseWatermark=w.shouldShowValidationUI(D.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||!T.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:i,className:u}=this.props,p=B.provideLocalizationService(this);if(this.view){const a=P.editorPropsKey.getState(this.view.state);a.preserveWhitespace=t}let d=this.props.contentStyle;d===void 0&&(i||{}).height===void 0&&(d={height:"300px"});const v=o.map((a,m)=>Array.isArray(a)?c.createElement(b.ButtonGroup,{key:m},a.map(this.renderTool,m)):this.renderTool(a,m));return c.createElement("div",{ref:a=>this._element=a,className:w.classNames("k-editor",u,{"k-editor-resizable":this.props.resizable}),dir:this.props.dir,style:i},v.length>0&&c.createElement(b.Toolbar,{className:"k-editor-toolbar",keyboardNavigation:this.props.keyboardNavigation},v),e==="iframe"?c.createElement("div",{className:"k-editor-content"},c.createElement("iframe",{onLoad:T.firefox?()=>{this.initialize()}:void 0,ref:a=>this.iframe=a,frameBorder:"0",title:p.toLanguageString(S.keys.iframeTitle,S.messages[S.keys.iframeTitle]),style:d,className:"k-iframe"})):c.createElement("div",{style:d,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,q,"linkDialog"),this.showLicenseWatermark&&c.createElement(w.WatermarkOverlay,null))}initialize(){const o=this.iframe&&this.iframe.contentWindow;if(o){const r=o.document;[E.defaultStyle,E.tablesStyles,this.props.dir==="rtl"?E.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 i=[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:P.editorPropsKey,state:{init:()=>({preserveWhitespace:t}),apply:(r,h)=>h}}),n.spacesFix(),n.caretColor(),n.history(),n.dropCursor(),n.gapCursor(),n.tableEditing(),n.cspFix()],u={...C.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[q.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:d,onMount:v}=this.props,a=d&&typeof d!="string"?d:C.EditorUtils.createDocument(new n.Schema({nodes:n.nodes,marks:n.marks}),d||p,{preserveWhitespace:t}),m={state:n.EditorState.create({plugins:[...i,n.keymap(u),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,O=>{y=y||O.type.name==="table_caption_external"}),y}},M={plugins:i,shortcuts:u,target:this,viewProps:m,dom:e},N=this._view=v&&v.call(void 0,M)||new n.EditorView({mount:e},m);this.setState({view:N})}};_.propTypes={defaultContent:s.string,value:s.oneOfType([s.object,s.string]),defaultEditMode:s.oneOf(["iframe","div"]),contentStyle:s.object,dir:s.string,className:s.string,ariaDescribedBy:s.string,ariaLabelledBy:s.string,ariaLabel:s.string,style:s.object,tools:s.arrayOf(s.any),keyboardNavigation:s.bool,resizable:s.bool,preserveWhitespace:s.oneOf([!0,!1,"full"]),onMount:s.func,onFocus:s.func,onBlur:s.func,onChange:s.func,onPasteHtml:s.func,onExecute:s.func};let k=_;B.registerForLocalization(k);exports.Editor=k;

package/Editor.mjs

@@ -0,0 +1,327 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as a from "react";
+import s from "prop-types";
+import { ToolbarSeparator as L, ButtonGroup as N, 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 g, PluginKey as k, 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 C, 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";
+import { EditorUtils as y } from "./utils/index.mjs";
+import { editorPropsKey as _ } from "./utils/props-key.mjs";
+import { updateEditorValue as ot } from "./utils/controlled-value.mjs";
+import { firefox as S } from "./utils/browser-detection.mjs";
+import { packageMetadata as T } from "./package-metadata.mjs";
+import { keys as O, messages as nt } from "./messages/index.mjs";
+import { provideLocalizationService as rt, registerForLocalization as at } from "@progress/kendo-react-intl";
+const { link: P, bold: lt, italic: ht, underline: ct } = it, E = class E extends a.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, i) => this.state[i] && /* @__PURE__ */ a.createElement(
+      t,
+      {
+        view: this.view,
+        settings: e,
+        dir: this.props.dir,
+        onClose: () => this.setState({ [i]: !1 })
+      }
+    ), this.renderTool = (t, e) => {
+      const i = /* @__PURE__ */ a.createElement(
+        t,
+        {
+          view: this.view,
+          dir: this.props.dir,
+          key: e
+        }
+      );
+      return i.type === L ? /* @__PURE__ */ a.createElement(t, { key: e }) : i;
+    }, this.updateTools = (t, e) => {
+      this.setState({ view: t });
+    }, this.filterTransaction = (t, e) => {
+      const i = { target: this, transaction: t, state: e };
+      return (this.props.onExecute && this.props.onExecute.call(void 0, i)) !== !1;
+    }, this.onPasteHtml = (t) => {
+      if (this.props.onPasteHtml && this.pasteEvent) {
+        const e = {
+          target: this,
+          pastedHtml: t,
+          nativeEvent: this.pasteEvent
+        }, i = this.props.onPasteHtml.call(void 0, e);
+        if (this.pasteEvent = void 0, typeof i == "string")
+          return i;
+      }
+      return t;
+    }, this.dispatchTransaction = (t) => {
+      const e = t.docChanged;
+      if (this.props.onChange && e) {
+        this.trOnChange = t;
+        const i = t.doc, p = t.doc.type.schema, d = {
+          target: this,
+          value: i,
+          html: "",
+          transaction: t,
+          schema: p
+        };
+        Object.defineProperty(d, "html", {
+          get: () => (this.htmlOnChange = y.getHtml({ doc: i, schema: p }), this.htmlOnChange)
+        }), this.props.onChange.call(void 0, d);
+      }
+      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 i = {
+          target: this,
+          nativeEvent: e
+        };
+        this.props.onFocus.call(void 0, i);
+      }
+      return !1;
+    }, this.onBlur = (t, e) => {
+      if (this.props.onBlur) {
+        const i = {
+          target: this,
+          nativeEvent: e
+        };
+        this.props.onBlur.call(void 0, i);
+      }
+      return !1;
+    }, this.onPaste = (t, e) => (this.props.onPasteHtml && (this.pasteEvent = e), !1), M(T), this.showLicenseWatermark = z(T);
+  }
+  /**
+   * 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.iframe || !S) && 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() {
+    this.view && this.view.destroy(), this._view = void 0;
+    const l = this.iframe && this.iframe.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);
+    }
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const {
+      tools: l = [],
+      defaultEditMode: t = "iframe",
+      preserveWhitespace: e = "full",
+      style: i,
+      className: p
+    } = this.props, d = rt(this);
+    if (this.view) {
+      const n = _.getState(this.view.state);
+      n.preserveWhitespace = e;
+    }
+    let c = this.props.contentStyle;
+    c === void 0 && (i || {}).height === void 0 && (c = { height: "300px" });
+    const u = l.map((n, m) => Array.isArray(n) ? /* @__PURE__ */ a.createElement(N, { key: m }, n.map(this.renderTool, m)) : this.renderTool(n, m));
+    return /* @__PURE__ */ a.createElement(
+      "div",
+      {
+        ref: (n) => this._element = n,
+        className: H("k-editor", p, { "k-editor-resizable": this.props.resizable }),
+        dir: this.props.dir,
+        style: i
+      },
+      u.length > 0 && /* @__PURE__ */ a.createElement(W, { className: "k-editor-toolbar", keyboardNavigation: this.props.keyboardNavigation }, u),
+      t === "iframe" ? /* @__PURE__ */ a.createElement("div", { className: "k-editor-content" }, /* @__PURE__ */ a.createElement(
+        "iframe",
+        {
+          onLoad: S ? () => {
+            this.initialize();
+          } : void 0,
+          ref: (n) => this.iframe = n,
+          frameBorder: "0",
+          title: d.toLanguageString(O.iframeTitle, nt[O.iframeTitle]),
+          style: c,
+          className: "k-iframe"
+        }
+      )) : /* @__PURE__ */ a.createElement(
+        "div",
+        {
+          style: c,
+          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
+          }
+        )
+      ),
+      this.renderDialog(st.InsertLinkDialog, P, "linkDialog"),
+      this.showLicenseWatermark && /* @__PURE__ */ a.createElement(F, 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) => {
+        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 i = [
+      // https://prosemirror.net/docs/ref/#state.PluginSpec
+      new g({
+        view: () => ({ update: this.updateTools }),
+        key: new k("toolbar-tools-update-plugin")
+      }),
+      new g({
+        filterTransaction: this.filterTransaction,
+        key: new k("onExecute-event-plugin")
+      }),
+      new g({
+        key: _,
+        state: {
+          init: () => ({ preserveWhitespace: e }),
+          apply: (o, h) => h
+        }
+      }),
+      j(),
+      V(),
+      A(),
+      U(),
+      I(),
+      K(),
+      q()
+    ], p = {
+      ...y.getShortcuts({
+        types: { listItem: "list_item", hardBreak: "hard_break" },
+        toolsSettings: { bold: lt, italic: ht, underline: ct }
+      }),
+      "Mod-k": () => {
+        const { linkDialog: o } = this.state, h = this.view;
+        if (h) {
+          const r = h.state, f = r.selection.empty, v = G(r, r.schema.marks[P.mark]);
+          !o && !(f && !v) && this.setState({ linkDialog: !0 });
+        }
+        return !o;
+      },
+      "Alt-F10": () => {
+        var h;
+        const o = (h = this.element) == null ? void 0 : h.querySelector(".k-toolbar");
+        if (o) {
+          const r = o.querySelector(x.join(","));
+          if (r)
+            return r.focus(), !0;
+        }
+        return !1;
+      }
+    };
+    const { defaultContent: d = "", value: c, onMount: u } = this.props, n = c && typeof c != "string" ? c : y.createDocument(new R({ nodes: J, marks: Q }), c || d, { preserveWhitespace: e }), m = {
+      state: X.create({
+        plugins: [...i, C(p), C(Y)],
+        doc: n
+      }),
+      transformPastedHTML: this.onPasteHtml,
+      dispatchTransaction: this.dispatchTransaction,
+      handleDOMEvents: {
+        focus: this.onFocus,
+        blur: this.onBlur,
+        paste: this.onPaste
+      },
+      handleDrop: (o, h, r, f) => {
+        let v = !1;
+        return r.content.nodesBetween(0, r.content.size, (b) => {
+          v = v || b.type.name === "table_caption_external";
+        }), v;
+      }
+    }, D = { plugins: i, shortcuts: p, target: this, viewProps: m, dom: t }, B = this._view = u && u.call(void 0, D) || new Z({ mount: t }, m);
+    this.setState({
+      view: B
+    });
+  }
+};
+E.propTypes = {
+  defaultContent: s.string,
+  value: s.oneOfType([s.object, s.string]),
+  defaultEditMode: s.oneOf(["iframe", "div"]),
+  contentStyle: s.object,
+  dir: s.string,
+  className: s.string,
+  ariaDescribedBy: s.string,
+  ariaLabelledBy: s.string,
+  ariaLabel: s.string,
+  style: s.object,
+  tools: s.arrayOf(s.any),
+  keyboardNavigation: s.bool,
+  resizable: s.bool,
+  preserveWhitespace: s.oneOf([!0, !1, "full"]),
+  onMount: s.func,
+  onFocus: s.func,
+  onBlur: s.func,
+  onChange: s.func,
+  onPasteHtml: s.func,
+  onExecute: s.func
+};
+let w = E;
+at(w);
+export {
+  w as Editor
+};

package/config/defaultStyles.js

@@ -0,0 +1,229 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 e=`
+html, body {
+    margin: 0;
+    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;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  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;
+  background-color: #fff;
+  border: 1px solid #000;
+  z-index: 100;
+  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;
+  transform: translate(0, 50%);
+  height: 4px;
+  z-index: 20;
+  background-color: #adf;
+  pointer-events: none;
+}
+
+.ProseMirror .column-resize-handle {
+  position: absolute;
+  right: -2px; top: 0; bottom: 0;
+  width: 4px;
+  z-index: 20;
+  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;
+}
+`,r=`
+  .ProseMirror .tableWrapper {
+    overflow-x: auto;
+    margin: 1em 0;
+  }
+
+  .ProseMirror table {
+    margin: 0;
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .ProseMirror td, .ProseMirror th {
+    min-width: 1em;
+    border: 1px solid #ddd;
+    padding: 3px 5px;
+    vertical-align: top;
+    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;
+    position: absolute;
+    content: "";
+    left: 0; right: 0; top: 0; bottom: 0;
+    background: rgba(200, 200, 255, 0.4);
+    pointer-events: none;
+  }
+`,o="body { direction: rtl }";exports.defaultStyle=e;exports.rtlStyles=o;exports.tablesStyles=r;