@progress/kendo-react-diagram 16.2.0-develop.1 → 16.2.0-develop.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-diagram",
-  "version": "16.2.0-develop.1",
+  "version": "16.2.0-develop.3",
   "description": "React Diagram component. KendoReact Diagram package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -26,12 +26,18 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-react-common": "16.2.0-develop.1",
+    "@progress/kendo-react-buttons": "16.2.0-develop.3",
+    "@progress/kendo-react-common": "16.2.0-develop.3",
+    "@progress/kendo-react-editor": "16.2.0-develop.3",
+    "@progress/kendo-react-inputs": "16.2.0-develop.3",
+    "@progress/kendo-react-intl": "16.2.0-develop.3",
+    "@progress/kendo-react-popup": "16.2.0-develop.3",
+    "@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@progress/kendo-diagram-common": "^2.7.0",
+    "@progress/kendo-diagram-common": "^2.7.2",
     "prop-types": "^15.6.0"
   },
   "keywords": [
@@ -52,7 +58,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1789024430,
+      "publishDate": 1789048806,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
     }
   },

package/rich-text-editing/ConnectionEditingToolbar.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 { Connection } from '@progress/kendo-diagram-common';
+import { ToolbarTools } from './types';
+import * as React from 'react';
+interface ConnectionEditingToolbarProps {
+    connection: Connection | null;
+    tools: ToolbarTools;
+}
+/** @hidden */
+export declare const ConnectionEditingToolbar: (props: ConnectionEditingToolbarProps) => React.JSX.Element | null;
+export {};

package/rich-text-editing/ConnectionEditingToolbar.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 j=require("react"),s=require("@progress/kendo-react-buttons"),B=require("@progress/kendo-react-inputs"),V=require("@progress/kendo-react-popup"),z=require("@progress/kendo-diagram-common"),_=require("./border-width.js"),N=require("./connection-types.js"),U=require("./connection-style.js"),S=require("./cap-type.js"),l=require("@progress/kendo-svg-icons"),f=require("./utils.js"),A=require("@progress/kendo-react-intl"),F=require("./default-toolbar-tools.js"),t=require("../messages/index.js"),m=require("./DiagramEditorContext.js");function G(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const a in n)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(n,a);Object.defineProperty(r,a,o.get?o:{enumerable:!0,get:()=>n[a]})}}return r.default=n,Object.freeze(r)}const b=G(j),{ConnectionCommands:v,Data:H}=z.EditingUtils,{leftCapTypes:k,rightCapTypes:h,floatingToolbarStyle:J}=H,K=n=>{var C,T;const{connection:r,tools:a=F.defaultConnectionToolbarTools}=n,{controller:o}=m.useDiagramEditorContext(),x=m.useDiagramEditorPopupProps("connection-toolbar"),i=A.useLocalization();if(!r)return null;const c=r.options,u=c.type||"cascading",p=typeof c.stroke=="string"?{color:c.stroke}:c.stroke||{},q=p.color||"#000000",E=p.dashType||"solid",D=p.width||1,d=v.getCapTypeValue(c.startCap,"start"),g=v.getCapTypeValue(c.endCap,"end"),I=e=>{e!==u&&o.execute({type:"setConnectionType",value:e})},O=e=>{o.execute({type:"setConnectionStrokeColor",value:e})},P=e=>{o.execute({type:"setConnectionStrokeWidth",value:e})},w=e=>{o.execute({type:"setConnectionStrokeDashType",value:e})},L=e=>{o.execute({type:"setConnectionStartCap",value:e})},M=e=>{o.execute({type:"setConnectionEndCap",value:e})},R=()=>{o.execute({type:"deleteSelection"})},W={color:{component:B.ColorPicker,props:{value:q,gradientSettings:{opacity:!1},fillMode:"flat",onChange:e=>O(e.value),title:i.toLanguageString(t.editingConnectionColor,t.messages[t.editingConnectionColor])}},width:{component:_.BorderWidth,props:{value:D,onSelect:e=>P(e),label:i.toLanguageString(t.editingConnectionWidth,t.messages[t.editingConnectionWidth]),min:1,overlayOwner:"connection-toolbar"}},style:{component:U.ConnectionStyle,props:{value:E,onSelect:e=>w(e),overlayOwner:"connection-toolbar"}},text:{component:s.Button,props:{type:"button",fillMode:"flat",svgIcon:l.freeTextIcon,onClick:()=>o.execute({type:"openSelectedTextEditor"}),title:i.toLanguageString(t.editingEditText,t.messages[t.editingEditText])}},startCap:{component:S.CapType,props:{value:d,onSelect:e=>L(e),data:k,buttonIcon:((C=k.find(e=>e.value===d))==null?void 0:C.icon)||l.arrowLeftIcon,buttonTitle:i.toLanguageString(t.editingStartCapType,t.messages[t.editingStartCapType]),overlayOwner:"connection-toolbar"}},type:{component:N.ConnectionTypes,props:{value:u,onSelect:e=>I(e),overlayOwner:"connection-toolbar"}},endCap:{component:S.CapType,props:{value:g,onSelect:e=>M(e),data:h,buttonIcon:((T=h.find(e=>e.value===g))==null?void 0:T.icon)||l.arrowRightIcon,buttonTitle:i.toLanguageString(t.editingEndCapType,t.messages[t.editingEndCapType]),overlayOwner:"connection-toolbar"}},delete:{component:s.Button,props:{fillMode:"flat",onClick:R,svgIcon:l.trashIcon,title:i.toLanguageString(t.editingDelete,t.messages[t.editingDelete])}},separator:{component:s.ToolbarSeparator,props:{}}},y=f.mapTools(a,W);return y.length===0?null:b.createElement(V.PopupPropsContext.Provider,{value:x},b.createElement(s.Toolbar,{fillMode:"flat",style:J,buttons:f.floatingToolbarButtons},y))};exports.ConnectionEditingToolbar=K;

package/rich-text-editing/ConnectionEditingToolbar.mjs

@@ -0,0 +1,126 @@
+/**
+ * @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 d from "react";
+import { Toolbar as j, ToolbarSeparator as q, Button as g } from "@progress/kendo-react-buttons";
+import { ColorPicker as A } from "@progress/kendo-react-inputs";
+import { PopupPropsContext as F } from "@progress/kendo-react-popup";
+import { EditingUtils as G } from "@progress/kendo-diagram-common";
+import { BorderWidth as H } from "./border-width.mjs";
+import { ConnectionTypes as J } from "./connection-types.mjs";
+import { ConnectionStyle as K } from "./connection-style.mjs";
+import { CapType as C } from "./cap-type.mjs";
+import { arrowRightIcon as N, arrowLeftIcon as Q, trashIcon as X, freeTextIcon as Y } from "@progress/kendo-svg-icons";
+import { mapTools as Z, floatingToolbarButtons as _ } from "./utils.mjs";
+import { useLocalization as $ } from "@progress/kendo-react-intl";
+import { defaultConnectionToolbarTools as oo } from "./default-toolbar-tools.mjs";
+import { editingDelete as y, messages as r, editingEndCapType as f, editingStartCapType as T, editingEditText as S, editingConnectionWidth as v, editingConnectionColor as b } from "../messages/index.mjs";
+import { useDiagramEditorContext as to, useDiagramEditorPopupProps as eo } from "./DiagramEditorContext.mjs";
+const { ConnectionCommands: h, Data: no } = G, { leftCapTypes: k, rightCapTypes: x, floatingToolbarStyle: ro } = no, vo = (E) => {
+  var u, m;
+  const { connection: p, tools: w = oo } = E, { controller: t } = to(), D = eo("connection-toolbar"), e = $();
+  if (!p)
+    return null;
+  const n = p.options, l = n.type || "cascading", a = typeof n.stroke == "string" ? { color: n.stroke } : n.stroke || {}, I = a.color || "#000000", L = a.dashType || "solid", P = a.width || 1, i = h.getCapTypeValue(n.startCap, "start"), c = h.getCapTypeValue(n.endCap, "end"), M = (o) => {
+    o !== l && t.execute({ type: "setConnectionType", value: o });
+  }, O = (o) => {
+    t.execute({ type: "setConnectionStrokeColor", value: o });
+  }, W = (o) => {
+    t.execute({ type: "setConnectionStrokeWidth", value: o });
+  }, V = (o) => {
+    t.execute({ type: "setConnectionStrokeDashType", value: o });
+  }, B = (o) => {
+    t.execute({ type: "setConnectionStartCap", value: o });
+  }, z = (o) => {
+    t.execute({ type: "setConnectionEndCap", value: o });
+  }, R = () => {
+    t.execute({ type: "deleteSelection" });
+  }, U = {
+    color: {
+      component: A,
+      props: {
+        value: I,
+        gradientSettings: { opacity: !1 },
+        fillMode: "flat",
+        onChange: (o) => O(o.value),
+        title: e.toLanguageString(b, r[b])
+      }
+    },
+    width: {
+      component: H,
+      props: {
+        value: P,
+        onSelect: (o) => W(o),
+        label: e.toLanguageString(v, r[v]),
+        min: 1,
+        overlayOwner: "connection-toolbar"
+      }
+    },
+    style: {
+      component: K,
+      props: {
+        value: L,
+        onSelect: (o) => V(o),
+        overlayOwner: "connection-toolbar"
+      }
+    },
+    text: {
+      component: g,
+      props: {
+        type: "button",
+        fillMode: "flat",
+        svgIcon: Y,
+        onClick: () => t.execute({ type: "openSelectedTextEditor" }),
+        title: e.toLanguageString(S, r[S])
+      }
+    },
+    startCap: {
+      component: C,
+      props: {
+        value: i,
+        onSelect: (o) => B(o),
+        data: k,
+        buttonIcon: ((u = k.find((o) => o.value === i)) == null ? void 0 : u.icon) || Q,
+        buttonTitle: e.toLanguageString(T, r[T]),
+        overlayOwner: "connection-toolbar"
+      }
+    },
+    type: {
+      component: J,
+      props: {
+        value: l,
+        onSelect: (o) => M(o),
+        overlayOwner: "connection-toolbar"
+      }
+    },
+    endCap: {
+      component: C,
+      props: {
+        value: c,
+        onSelect: (o) => z(o),
+        data: x,
+        buttonIcon: ((m = x.find((o) => o.value === c)) == null ? void 0 : m.icon) || N,
+        buttonTitle: e.toLanguageString(f, r[f]),
+        overlayOwner: "connection-toolbar"
+      }
+    },
+    delete: {
+      component: g,
+      props: {
+        fillMode: "flat",
+        onClick: R,
+        svgIcon: X,
+        title: e.toLanguageString(y, r[y])
+      }
+    },
+    separator: { component: q, props: {} }
+  }, s = Z(w, U);
+  return s.length === 0 ? null : /* @__PURE__ */ d.createElement(F.Provider, { value: D }, /* @__PURE__ */ d.createElement(j, { fillMode: "flat", style: ro, buttons: _ }, s));
+};
+export {
+  vo as ConnectionEditingToolbar
+};

package/rich-text-editing/DiagramEditor.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DiagramEditorProps } from './types';
+import * as React from 'react';
+/**
+ * The `DiagramEditor` component provides tools for editing diagram shapes, connections, and text, including rich-text editing capabilities.
+ */
+export declare const DiagramEditor: React.FC<DiagramEditorProps>;

package/rich-text-editing/DiagramEditor.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 Ee=require("react"),l=require("@progress/kendo-react-editor"),Se=require("@progress/kendo-react-intl"),ye=require("./TextEditingToolbar.js"),xe=require("./ShapeEditingToolbar.js"),Pe=require("./ConnectionEditingToolbar.js"),k=require("./default-toolbar-tools.js"),y=require("@progress/kendo-diagram-common"),Ce=require("./MainToolbar.js"),I=require("./FloatingToolbarPopup.js"),K=require("./utils.js"),S=require("./DiagramEditorContext.js"),z=require("../messages/index.js");function ve(n){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const b in n)if(b!=="default"){const m=Object.getOwnPropertyDescriptor(n,b);Object.defineProperty(s,b,m.get?m:{enumerable:!0,get:()=>n[b]})}}return s.default=n,Object.freeze(s)}const t=ve(Ee),{pmDocToRTContent:we,rtContentToPM:ke,schemaSpec:Me,styleEditor:De,scheduleRafCall:te,recalcVerticalAlign:oe}=y.EditingUtils,ne=new l.ProseMirror.Schema(Me),Re=ke(l.ProseMirror.Node,ne),{imageResizing:Oe}=l.EditorUtils;class Ve extends l.ProseMirror.EditorView{}class Ie extends l.ProseMirror.Node{}const qe='[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdownlist, .k-colorpicker',Ae=n=>{const s=n.content.firstChild;return n.childCount===0||!!(n.childCount===1&&(s!=null&&s.inlineContent)&&s.childCount===0)},Ne=n=>{var $,G;const{diagram:s,toolbars:b={}}=n,m={position:"top",tools:k.defaultMainToolbarTools,shapes:n.shapes},F={tools:k.defaultShapeToolbarTools,shapes:n.shapes},_={tools:k.defaultConnectionToolbarTools},j={tools:k.defaultTextToolbarTools,fontNames:n.fontTypes,fontSizes:n.fontSizes},{diagram:M=m,shape:D=F,connection:R=_,text:O=j}=b,B=typeof M=="boolean"?M?m:{position:"top",tools:[]}:M,V=typeof D=="boolean"?D?F:{tools:[]}:D,q=typeof R=="boolean"?R?_:{tools:[]}:R,L=typeof O=="boolean"?O?j:{tools:[]}:O,{controller:r,snapshot:e}=S.useDiagramEditorController(s),re=S.useRegisteredSurfaceRef(r),se=S.useRegisteredSurfaceRef(r),U=S.useRegisteredSurfaceRef(r),W=t.useRef(null),[h,A]=t.useState(null),x=t.useRef(null),[u,T]=t.useState(null),i=t.useRef(null),ie=Se.useLocalization(),ae=e.editingSession?`${e.editingSession.target.type}:${e.editingSession.target.id}`:null,le=t.useCallback(o=>{var a;(a=i.current)==null||a.call(i),i.current=o&&r?r.registerSurface(o):null},[r]),ce=t.useCallback(o=>{W.current=o,U(o)},[U]),ue=t.useCallback(()=>{var a;const o=(a=W.current)==null?void 0:a.querySelector(qe);return o?(o.focus({preventScroll:!0}),!0):!1},[]);t.useEffect(()=>()=>{var o;(o=i.current)==null||o.call(i),i.current=null},[]),t.useLayoutEffect(()=>{var a;if(!r||!e.editingSession){A(null),x.current=null,T(null),r==null||r.setTextEditingAdapter(null),(a=i.current)==null||a.call(i),i.current=null;return}const o=Re(e.editingSession.item._contentVisual.options);return A(o),x.current=o,T(null),r.setTextEditingAdapter({getCommitPayload:()=>{const d=x.current;return d?{content:we(d),isEmpty:Ae(d),textContent:d.textContent}:null}}),()=>{r.setTextEditingAdapter(null)}},[r,ae,e.editingSession]);const de=e.editingSession?e.editingSession.item._contentVisual.options:{},g=e.selectedShape,p=e.selectedConnection,f=($=s==null?void 0:s.element)!=null?$:null,P=t.useMemo(()=>y.getContextToolbarAnchors(g,e.anchors.shape),[g,e.anchors.shape]),C=t.useMemo(()=>y.getContextToolbarAnchors(p,e.anchors.connection),[p,e.anchors.connection]),be=t.useMemo(()=>!!(g&&P.base&&e.visibility.shape&&V.tools.length>0&&y.isDiagramItemVisibleInViewport(g,f)),[g,P.base,e.visibility.shape,V.tools.length,f]),ge=t.useMemo(()=>!!(p&&C.base&&e.visibility.connection&&q.tools.length>0&&y.isDiagramItemVisibleInViewport(p,f)),[p,C.base,e.visibility.connection,q.tools.length,f]),pe=o=>{A(o.value),x.current=o.value,u&&T({view:u.view})},fe=o=>{var Q;const a=o.target;if(!e.editingSession||!a.element||!r||!h)return;const d=a.element;le(d);const{item:v}=e.editingSession,H=v.name==="Shape"?v._contentVisual.padding():{top:0,bottom:0,left:0,right:0},N=o.dom,J=ie.toLanguageString(z.placeholder,z.messages[z.placeholder]);let E;const he=new l.ProseMirror.Plugin({filterTransaction:w=>(te(oe,[w.doc.attrs.alignment,N,H]),T({view:E}),!0)}),Te=l.ProseMirror.EditorState.create({doc:h,schema:ne,plugins:[Oe(),...o.viewProps.state.plugins,l.EditorUtils.placeholder(J),he]});return E=new Ve({mount:N},{...o.viewProps,state:Te,handleKeyDown:(w,c)=>{var X,Y,Z,ee;return c.key==="Escape"?(r.handleKeyDown(c),c.defaultPrevented||((Y=(X=o.viewProps).handleKeyDown)==null?void 0:Y.call(X,w,c))===!0):c.key==="F10"&&c.altKey&&ue()?(c.preventDefault(),!0):(ee=(Z=o.viewProps).handleKeyDown)==null?void 0:ee.call(Z,w,c)}}),De(v,d,J),E.focus(),te(oe,[(Q=v.options.content)==null?void 0:Q.align,N,H]),T({view:E}),E},me=t.useCallback(o=>{o.key!=="Tab"||o.shiftKey||u&&(o.preventDefault(),u.view.focus())},[u]);return r?t.createElement(S.DiagramEditorProvider,{value:{controller:r,snapshot:e}},t.createElement(t.Fragment,null,t.createElement("div",{style:{position:"relative"}},t.createElement(Ce.MainToolbar,{diagram:s,visible:e.visibility.main&&B.tools.length>0,...B}),t.createElement(I.FloatingToolbarPopup,{show:be,baseAnchor:P.base,fallbackAnchor:P.fallback,boundaryElement:f},t.createElement("div",{ref:re,className:K.toolbarPopupWrapClass},t.createElement(xe.ShapeEditingToolbar,{shape:g,...V}))),t.createElement(I.FloatingToolbarPopup,{show:ge,baseAnchor:C.base,fallbackAnchor:C.fallback,boundaryElement:f},t.createElement("div",{ref:se,className:K.toolbarPopupWrapClass},t.createElement(Pe.ConnectionEditingToolbar,{connection:p,...q}))),t.createElement(I.FloatingToolbarPopup,{show:!!(e.editingSession&&u&&h&&e.anchors.textEditing&&e.visibility.textEditing&&L.tools.length>0),baseAnchor:e.anchors.textEditing?{left:e.anchors.textEditing.x,top:e.anchors.textEditing.y}:null},t.createElement("div",{ref:ce,className:K.toolbarPopupWrapClass,onKeyDown:me},t.createElement(ye.TextEditingToolbar,{editorView:u,editItem:(G=e.editingSession)==null?void 0:G.item,defaultStyles:de,...L})))),e.editingSession&&h&&t.createElement(l.Editor,{value:h,onChange:pe,defaultEditMode:"div",className:"k-diagram-rich-text-editor",style:{background:"transparent"},onMount:fe}))):null};exports.DiagramEditor=Ne;

package/rich-text-editing/DiagramEditor.mjs

@@ -0,0 +1,197 @@
+/**
+ * @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 t from "react";
+import { Editor as ye, ProseMirror as b, EditorUtils as oe } from "@progress/kendo-react-editor";
+import { useLocalization as Se } from "@progress/kendo-react-intl";
+import { TextEditingToolbar as xe } from "./TextEditingToolbar.mjs";
+import { ShapeEditingToolbar as ve } from "./ShapeEditingToolbar.mjs";
+import { ConnectionEditingToolbar as we } from "./ConnectionEditingToolbar.mjs";
+import { defaultTextToolbarTools as Ce, defaultMainToolbarTools as Pe, defaultShapeToolbarTools as ke, defaultConnectionToolbarTools as Ve } from "./default-toolbar-tools.mjs";
+import { getContextToolbarAnchors as X, isDiagramItemVisibleInViewport as Y, EditingUtils as Ae } from "@progress/kendo-diagram-common";
+import { MainToolbar as De } from "./MainToolbar.mjs";
+import { FloatingToolbarPopup as M } from "./FloatingToolbarPopup.mjs";
+import { toolbarPopupWrapClass as R } from "./utils.mjs";
+import { useDiagramEditorController as Me, useRegisteredSurfaceRef as N, DiagramEditorProvider as Re } from "./DiagramEditorContext.mjs";
+import { placeholder as Z, messages as Ne } from "../messages/index.mjs";
+const { pmDocToRTContent: Oe, rtContentToPM: Ke, schemaSpec: ze, styleEditor: Be, scheduleRafCall: ee, recalcVerticalAlign: te } = Ae, ne = new b.Schema(ze), Ie = Ke(b.Node, ne), { imageResizing: Fe } = oe;
+class Le extends b.EditorView {
+}
+class tt extends b.Node {
+}
+const _e = '[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdownlist, .k-colorpicker', Ue = (i) => {
+  const r = i.content.firstChild;
+  return i.childCount === 0 || !!(i.childCount === 1 && (r != null && r.inlineContent) && r.childCount === 0);
+}, ot = (i) => {
+  var U, $;
+  const { diagram: r, toolbars: se = {} } = i, O = {
+    position: "top",
+    tools: Pe,
+    shapes: i.shapes
+  }, K = { tools: ke, shapes: i.shapes }, z = { tools: Ve }, B = {
+    tools: Ce,
+    fontNames: i.fontTypes,
+    fontSizes: i.fontSizes
+  }, {
+    diagram: v = O,
+    shape: w = K,
+    connection: C = z,
+    text: P = B
+  } = se, I = typeof v == "boolean" ? v ? O : { position: "top", tools: [] } : v, k = typeof w == "boolean" ? w ? K : { tools: [] } : w, V = typeof C == "boolean" ? C ? z : { tools: [] } : C, F = typeof P == "boolean" ? P ? B : { tools: [] } : P, { controller: n, snapshot: e } = Me(r), ie = N(n), le = N(n), L = N(n), _ = t.useRef(null), [p, A] = t.useState(null), T = t.useRef(null), [c, g] = t.useState(null), s = t.useRef(null), re = Se(), ae = e.editingSession ? `${e.editingSession.target.type}:${e.editingSession.target.id}` : null, ce = t.useCallback(
+    (o) => {
+      var l;
+      (l = s.current) == null || l.call(s), s.current = o && n ? n.registerSurface(o) : null;
+    },
+    [n]
+  ), ue = t.useCallback(
+    (o) => {
+      _.current = o, L(o);
+    },
+    [L]
+  ), de = t.useCallback(() => {
+    var l;
+    const o = (l = _.current) == null ? void 0 : l.querySelector(_e);
+    return o ? (o.focus({ preventScroll: !0 }), !0) : !1;
+  }, []);
+  t.useEffect(() => () => {
+    var o;
+    (o = s.current) == null || o.call(s), s.current = null;
+  }, []), t.useLayoutEffect(() => {
+    var l;
+    if (!n || !e.editingSession) {
+      A(null), T.current = null, g(null), n == null || n.setTextEditingAdapter(null), (l = s.current) == null || l.call(s), s.current = null;
+      return;
+    }
+    const o = Ie(e.editingSession.item._contentVisual.options);
+    return A(o), T.current = o, g(null), n.setTextEditingAdapter({
+      getCommitPayload: () => {
+        const u = T.current;
+        return u ? {
+          content: Oe(u),
+          isEmpty: Ue(u),
+          textContent: u.textContent
+        } : null;
+      }
+    }), () => {
+      n.setTextEditingAdapter(null);
+    };
+  }, [n, ae, e.editingSession]);
+  const me = e.editingSession ? e.editingSession.item._contentVisual.options : {}, d = e.selectedShape, m = e.selectedConnection, f = (U = r == null ? void 0 : r.element) != null ? U : null, E = t.useMemo(() => X(d, e.anchors.shape), [d, e.anchors.shape]), y = t.useMemo(() => X(m, e.anchors.connection), [m, e.anchors.connection]), fe = t.useMemo(() => !!(d && E.base && e.visibility.shape && k.tools.length > 0 && Y(d, f)), [
+    d,
+    E.base,
+    e.visibility.shape,
+    k.tools.length,
+    f
+  ]), be = t.useMemo(() => !!(m && y.base && e.visibility.connection && V.tools.length > 0 && Y(m, f)), [
+    m,
+    y.base,
+    e.visibility.connection,
+    V.tools.length,
+    f
+  ]), pe = (o) => {
+    A(o.value), T.current = o.value, c && g({ view: c.view });
+  }, ge = (o) => {
+    var j;
+    const l = o.target;
+    if (!e.editingSession || !l.element || !n || !p)
+      return;
+    const u = l.element;
+    ce(u);
+    const { item: S } = e.editingSession, q = S.name === "Shape" ? S._contentVisual.padding() : { top: 0, bottom: 0, left: 0, right: 0 }, D = o.dom, W = re.toLanguageString(Z, Ne[Z]);
+    let h;
+    const Te = new b.Plugin({
+      filterTransaction: (x) => (ee(te, [x.doc.attrs.alignment, D, q]), g({ view: h }), !0)
+    }), Ee = b.EditorState.create({
+      doc: p,
+      schema: ne,
+      plugins: [
+        Fe(),
+        ...o.viewProps.state.plugins,
+        oe.placeholder(W),
+        Te
+      ]
+    });
+    return h = new Le(
+      { mount: D },
+      {
+        ...o.viewProps,
+        state: Ee,
+        handleKeyDown: (x, a) => {
+          var G, H, J, Q;
+          return a.key === "Escape" ? (n.handleKeyDown(a), a.defaultPrevented || ((H = (G = o.viewProps).handleKeyDown) == null ? void 0 : H.call(G, x, a)) === !0) : a.key === "F10" && a.altKey && de() ? (a.preventDefault(), !0) : (Q = (J = o.viewProps).handleKeyDown) == null ? void 0 : Q.call(J, x, a);
+        }
+      }
+    ), Be(S, u, W), h.focus(), ee(te, [(j = S.options.content) == null ? void 0 : j.align, D, q]), g({ view: h }), h;
+  }, he = t.useCallback(
+    (o) => {
+      o.key !== "Tab" || o.shiftKey || c && (o.preventDefault(), c.view.focus());
+    },
+    [c]
+  );
+  return n ? /* @__PURE__ */ t.createElement(Re, { value: { controller: n, snapshot: e } }, /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ t.createElement(
+    De,
+    {
+      diagram: r,
+      visible: e.visibility.main && I.tools.length > 0,
+      ...I
+    }
+  ), /* @__PURE__ */ t.createElement(
+    M,
+    {
+      show: fe,
+      baseAnchor: E.base,
+      fallbackAnchor: E.fallback,
+      boundaryElement: f
+    },
+    /* @__PURE__ */ t.createElement("div", { ref: ie, className: R }, /* @__PURE__ */ t.createElement(ve, { shape: d, ...k }))
+  ), /* @__PURE__ */ t.createElement(
+    M,
+    {
+      show: be,
+      baseAnchor: y.base,
+      fallbackAnchor: y.fallback,
+      boundaryElement: f
+    },
+    /* @__PURE__ */ t.createElement("div", { ref: le, className: R }, /* @__PURE__ */ t.createElement(we, { connection: m, ...V }))
+  ), /* @__PURE__ */ t.createElement(
+    M,
+    {
+      show: !!(e.editingSession && c && p && e.anchors.textEditing && e.visibility.textEditing && F.tools.length > 0),
+      baseAnchor: e.anchors.textEditing ? { left: e.anchors.textEditing.x, top: e.anchors.textEditing.y } : null
+    },
+    /* @__PURE__ */ t.createElement(
+      "div",
+      {
+        ref: ue,
+        className: R,
+        onKeyDown: he
+      },
+      /* @__PURE__ */ t.createElement(
+        xe,
+        {
+          editorView: c,
+          editItem: ($ = e.editingSession) == null ? void 0 : $.item,
+          defaultStyles: me,
+          ...F
+        }
+      )
+    )
+  )), e.editingSession && p && /* @__PURE__ */ t.createElement(
+    ye,
+    {
+      value: p,
+      onChange: pe,
+      defaultEditMode: "div",
+      className: "k-diagram-rich-text-editor",
+      style: { background: "transparent" },
+      onMount: ge
+    }
+  ))) : null;
+};
+export {
+  ot as DiagramEditor
+};

package/rich-text-editing/DiagramEditorContext.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PopupProps } from '@progress/kendo-react-popup';
+import { Diagram, DiagramEditorController, DiagramEditorOverlayOwner, DiagramEditorSnapshot } from '@progress/kendo-diagram-common';
+import * as React from 'react';
+interface DiagramEditorContextValue {
+    controller: DiagramEditorController;
+    snapshot: DiagramEditorSnapshot;
+}
+/** @hidden */
+export declare const DiagramEditorProvider: React.Provider<DiagramEditorContextValue | null>;
+/** @hidden */
+export declare const useDiagramEditorController: (diagram: Diagram | null) => {
+    controller: DiagramEditorController | null;
+    snapshot: DiagramEditorSnapshot;
+};
+/** @hidden */
+export declare const useDiagramEditorContext: () => DiagramEditorContextValue;
+/** @hidden */
+export declare const useRegisteredSurfaceRef: <T extends HTMLElement>(controller: DiagramEditorController | null) => (element: T | null) => void;
+/** @hidden */
+export declare const useControlledDiagramOverlay: (owner: DiagramEditorOverlayOwner) => {
+    overlayId: string;
+    open: boolean;
+    setOpen: (nextOpen: boolean | ((current: boolean) => boolean)) => void;
+};
+/** @hidden */
+export declare const useDiagramEditorPopupProps: (owner: DiagramEditorOverlayOwner) => (popupProps: PopupProps) => PopupProps;
+export {};

package/rich-text-editing/DiagramEditorContext.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 y=require("react"),f=require("@progress/kendo-diagram-common");function E(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const n in r)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(r,n);Object.defineProperty(e,n,t.get?t:{enumerable:!0,get:()=>r[n]})}}return e.default=r,Object.freeze(e)}const a=E(y),v=()=>{};let C=0;const m=a.createContext(null),O=m.Provider,D=r=>{const[e,n]=a.useState(null);a.useEffect(()=>{if(!r){n(null);return}const o=new f.DiagramEditorController({diagram:r});return n(o),()=>{o.destroy(),n(c=>c===o?null:c)}},[r]);const t=a.useCallback(o=>e?e.subscribe(o):v,[e]),l=a.useCallback(()=>e?e.getSnapshot():f.emptyDiagramEditorSnapshot,[e]),s=a.useSyncExternalStore(t,l,()=>f.emptyDiagramEditorSnapshot);return{controller:e,snapshot:s}},g=()=>{const r=a.useContext(m);if(!r)throw new Error("DiagramEditorContext is not available.");return r},b=r=>{const e=a.useRef(null);return a.useEffect(()=>()=>{var n;(n=e.current)==null||n.call(e),e.current=null},[]),a.useCallback(n=>{var t;(t=e.current)==null||t.call(e),e.current=n&&r?r.registerSurface(n):null},[r])},S=r=>{const{controller:e,snapshot:n}=g(),t=a.useId(),l=n.openOverlays.has(t);a.useEffect(()=>()=>{e.closeOverlay(t)},[e,t]);const s=a.useCallback(o=>{const c=typeof o=="function"?o(l):o;if(c!==l){if(c){e.openOverlay(t,r);return}e.closeOverlay(t)}},[e,l,t,r]);return{overlayId:t,open:l,setOpen:s}},h=r=>{const{controller:e}=g(),n=a.useRef(new Map);return a.useEffect(()=>()=>{n.current.forEach((t,l)=>{t(),e.closeOverlay(l)}),n.current.clear()},[e]),a.useCallback(t=>({...t,animate:!1,onOpen:l=>{var c,u,i,d;(c=t.onOpen)==null||c.call(t,l);const s=(i=(u=l.target)==null?void 0:u.element)==null?void 0:i.querySelector(".k-popup");if(!(s instanceof HTMLElement))return;let o=s.dataset.diagramEditorOverlayId;o||(o=`${r}-${C++}`,s.dataset.diagramEditorOverlayId=o),e.openOverlay(o,r),(d=n.current.get(o))==null||d(),n.current.set(o,e.registerSurface(s))},onClose:l=>{var c,u,i,d;const s=(u=(c=l.target)==null?void 0:c.element)==null?void 0:u.querySelector(".k-popup"),o=s instanceof HTMLElement?s.dataset.diagramEditorOverlayId:void 0;o&&((i=n.current.get(o))==null||i(),n.current.delete(o),e.closeOverlay(o)),(d=t.onClose)==null||d.call(t,l)}}),[e,r])};exports.DiagramEditorProvider=O;exports.useControlledDiagramOverlay=S;exports.useDiagramEditorContext=g;exports.useDiagramEditorController=D;exports.useDiagramEditorPopupProps=h;exports.useRegisteredSurfaceRef=b;

package/rich-text-editing/DiagramEditorContext.mjs

@@ -0,0 +1,117 @@
+/**
+ * @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 a from "react";
+import { DiagramEditorController as y, emptyDiagramEditorSnapshot as f } from "@progress/kendo-diagram-common";
+const g = () => {
+};
+let v = 0;
+const E = a.createContext(null), O = E.Provider, S = (o) => {
+  const [e, n] = a.useState(null);
+  a.useEffect(() => {
+    if (!o) {
+      n(null);
+      return;
+    }
+    const r = new y({ diagram: o });
+    return n(r), () => {
+      r.destroy(), n((c) => c === r ? null : c);
+    };
+  }, [o]);
+  const t = a.useCallback(
+    (r) => e ? e.subscribe(r) : g,
+    [e]
+  ), l = a.useCallback(() => e ? e.getSnapshot() : f, [e]), s = a.useSyncExternalStore(t, l, () => f);
+  return {
+    controller: e,
+    snapshot: s
+  };
+}, m = () => {
+  const o = a.useContext(E);
+  if (!o)
+    throw new Error("DiagramEditorContext is not available.");
+  return o;
+}, b = (o) => {
+  const e = a.useRef(null);
+  return a.useEffect(
+    () => () => {
+      var n;
+      (n = e.current) == null || n.call(e), e.current = null;
+    },
+    []
+  ), a.useCallback(
+    (n) => {
+      var t;
+      (t = e.current) == null || t.call(e), e.current = n && o ? o.registerSurface(n) : null;
+    },
+    [o]
+  );
+}, D = (o) => {
+  const { controller: e, snapshot: n } = m(), t = a.useId(), l = n.openOverlays.has(t);
+  a.useEffect(
+    () => () => {
+      e.closeOverlay(t);
+    },
+    [e, t]
+  );
+  const s = a.useCallback(
+    (r) => {
+      const c = typeof r == "function" ? r(l) : r;
+      if (c !== l) {
+        if (c) {
+          e.openOverlay(t, o);
+          return;
+        }
+        e.closeOverlay(t);
+      }
+    },
+    [e, l, t, o]
+  );
+  return {
+    overlayId: t,
+    open: l,
+    setOpen: s
+  };
+}, h = (o) => {
+  const { controller: e } = m(), n = a.useRef(/* @__PURE__ */ new Map());
+  return a.useEffect(
+    () => () => {
+      n.current.forEach((t, l) => {
+        t(), e.closeOverlay(l);
+      }), n.current.clear();
+    },
+    [e]
+  ), a.useCallback(
+    (t) => ({
+      ...t,
+      animate: !1,
+      onOpen: (l) => {
+        var c, u, i, d;
+        (c = t.onOpen) == null || c.call(t, l);
+        const s = (i = (u = l.target) == null ? void 0 : u.element) == null ? void 0 : i.querySelector(".k-popup");
+        if (!(s instanceof HTMLElement))
+          return;
+        let r = s.dataset.diagramEditorOverlayId;
+        r || (r = `${o}-${v++}`, s.dataset.diagramEditorOverlayId = r), e.openOverlay(r, o), (d = n.current.get(r)) == null || d(), n.current.set(r, e.registerSurface(s));
+      },
+      onClose: (l) => {
+        var c, u, i, d;
+        const s = (u = (c = l.target) == null ? void 0 : c.element) == null ? void 0 : u.querySelector(".k-popup"), r = s instanceof HTMLElement ? s.dataset.diagramEditorOverlayId : void 0;
+        r && ((i = n.current.get(r)) == null || i(), n.current.delete(r), e.closeOverlay(r)), (d = t.onClose) == null || d.call(t, l);
+      }
+    }),
+    [e, o]
+  );
+};
+export {
+  O as DiagramEditorProvider,
+  D as useControlledDiagramOverlay,
+  m as useDiagramEditorContext,
+  S as useDiagramEditorController,
+  h as useDiagramEditorPopupProps,
+  b as useRegisteredSurfaceRef
+};

package/rich-text-editing/FloatingToolbarPopup.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PopupProps } from '@progress/kendo-react-popup';
+import { DiagramFloatingToolbarPoint } from '@progress/kendo-diagram-common';
+import * as React from 'react';
+interface FloatingToolbarPopupProps {
+    show: boolean;
+    baseAnchor: DiagramFloatingToolbarPoint | null;
+    fallbackAnchor?: DiagramFloatingToolbarPoint | null;
+    boundaryElement?: HTMLElement | null;
+    anchorAlign?: PopupProps['anchorAlign'];
+    popupAlign?: PopupProps['popupAlign'];
+    offset?: PopupProps['offset'];
+    children: React.ReactNode;
+}
+/** @hidden */
+export declare const FloatingToolbarPopup: ({ show, baseAnchor, fallbackAnchor, boundaryElement, anchorAlign, popupAlign, offset, children }: FloatingToolbarPopupProps) => React.JSX.Element;
+/** @hidden */
+export declare const floatingToolbarPopupAlign: {
+    above: {
+        readonly horizontal: "center";
+        readonly vertical: "bottom";
+    };
+    below: {
+        readonly horizontal: "center";
+        readonly vertical: "top";
+    };
+    top: {
+        readonly horizontal: "center";
+        readonly vertical: "top";
+    };
+};
+export {};

package/rich-text-editing/FloatingToolbarPopup.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 F=require("react"),L=require("@progress/kendo-react-popup"),z=require("@progress/kendo-diagram-common");function _(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const r=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(t,c,r.get?r:{enumerable:!0,get:()=>e[c]})}}return t.default=e,Object.freeze(t)}const s=_(F),{floatingToolbarStyle:S}=z.EditingUtils.Data,x={horizontal:"center",vertical:"center"},B={horizontal:"center",vertical:"bottom"},V={horizontal:"center",vertical:"top"},W={above:B,below:V},P={left:0,top:0},y={offset:P,placement:"above",visible:!1},j=(e,t)=>({left:e.left+(t?t.left:0),top:e.top+(t?t.top:0)}),O=(e,t,c)=>({offset:e||P,placement:t,visible:c}),Y=e=>(e==null?void 0:e.vertical)==="top"?"below":"above",g=(e,t)=>e.visible===t.visible&&e.offset.left===t.offset.left&&e.offset.top===t.offset.top&&e.placement===t.placement,N=({show:e,baseAnchor:t,fallbackAnchor:c=null,boundaryElement:r,anchorAlign:D=x,popupAlign:T=B,offset:f=P,children:H})=>{const h=s.useRef(null),u=s.useRef(0),m=Y(T),l=s.useMemo(()=>t?j(t,f):null,[t,f]),b=s.useMemo(()=>c?j(c,f):null,[c,f]),[i,d]=s.useState(()=>l?O(l,m,!0):y),k=s.useCallback(o=>{var a;const p=(a=o==null?void 0:o.element)==null?void 0:a.querySelector(".k-popup");h.current=p instanceof HTMLElement?p:null,p instanceof HTMLElement&&Object.keys(S).forEach(R=>{const v=S[R];p.style[R]=v})},[]),w=e&&!!t;s.useLayoutEffect(()=>{var A,M;if(!w||!l){d(n=>g(n,y)?n:y);return}let o;if(!r||!b){o=O(l,m,!0),d(n=>g(n,o)?n:o);return}const p=((A=h.current)==null?void 0:A.getBoundingClientRect().height)||u.current;if(p>0&&(u.current=p),u.current<=0){o=O(l,m,!0),d(n=>g(n,o)?n:o);return}const a=r.getBoundingClientRect(),v=(((M=r.ownerDocument)==null?void 0:M.defaultView)||window).scrollY;o=z.resolveFloatingToolbarPlacement({baseAnchor:l,fallbackAnchor:b,popupHeight:u.current,boundaryTop:a.top+v,boundaryBottom:a.bottom+v}),d(n=>g(n,o)?n:o)},[r,m,w,l,b]);const q=w&&(i.visible||u.current<=0||!r||!b),C=i.visible?i.offset:l||P,E=i.visible?W[i.placement]:T;return s.createElement(L.Popup,{show:q,anchorAlign:D,popupAlign:E,offset:C,positionMode:"fixed",ref:k,animate:!1},H)};exports.FloatingToolbarPopup=N;