@progress/kendo-react-diagram 16.2.0-develop.2 → 16.2.0-develop.20

package/rich-text-editing/DiagramEditor.mjs

@@ -11,40 +11,40 @@ 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;
+import { defaultTextToolbarTools as Ce, defaultMainToolbarTools as Pe, defaultShapeToolbarTools as ke, defaultConnectionToolbarTools as De } from "./default-toolbar-tools.mjs";
+import { getContextToolbarAnchors as X, isDiagramItemVisibleInViewport as Y, EditingUtils as Ve } from "@progress/kendo-diagram-common";
+import { MainToolbar as Ae } from "./MainToolbar.mjs";
+import { FloatingToolbarPopup as K } from "./FloatingToolbarPopup.mjs";
+import { toolbarPopupWrapClass as z } from "./utils.mjs";
+import { useDiagramEditorController as Me, useRegisteredSurfaceRef as B, DiagramEditorProvider as Ne } from "./DiagramEditorContext.mjs";
+import { placeholder as Z, messages as Re } from "../messages/index.mjs";
+const { pmDocToRTContent: Oe, rtContentToPM: Ke, schemaSpec: ze, styleEditor: Be, scheduleRafCall: ee, recalcVerticalAlign: te } = Ve, ne = new b.Schema(ze), Ie = Ke(b.Node, ne), { imageResizing: Fe } = oe;
 class Le extends b.EditorView {
 }
-class tt extends b.Node {
+class ot 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) => {
+  const l = i.content.firstChild;
+  return i.childCount === 0 || !!(i.childCount === 1 && (l != null && l.inlineContent) && l.childCount === 0);
+}, $e = (i) => {
   var U, $;
-  const { diagram: r, toolbars: se = {} } = i, O = {
+  const { diagram: l, toolbars: se = {} } = i, v = {
     position: "top",
     tools: Pe,
     shapes: i.shapes
-  }, K = { tools: ke, shapes: i.shapes }, z = { tools: Ve }, B = {
+  }, w = { tools: ke, shapes: i.shapes }, C = { tools: De }, P = {
     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(
+    diagram: k = v,
+    shape: D = w,
+    connection: V = C,
+    text: A = P
+  } = se, I = typeof k == "boolean" ? k ? v : { position: "top", tools: [] } : { ...v, ...k }, M = typeof D == "boolean" ? D ? w : { tools: [] } : { ...w, ...D }, N = typeof V == "boolean" ? V ? C : { tools: [] } : { ...C, ...V }, F = typeof A == "boolean" ? A ? P : { tools: [] } : { ...P, ...A }, { controller: n, snapshot: e } = Me(l), ie = B(n), re = B(n), L = B(n), _ = t.useRef(null), [p, R] = t.useState(null), T = t.useRef(null), [c, g] = t.useState(null), s = t.useRef(null), le = 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;
+      var r;
+      (r = s.current) == null || r.call(s), s.current = o && n ? n.registerSurface(o) : null;
     },
     [n]
   ), ue = t.useCallback(
@@ -53,21 +53,21 @@ const _e = '[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdown
     },
     [L]
   ), de = t.useCallback(() => {
-    var l;
-    const o = (l = _.current) == null ? void 0 : l.querySelector(_e);
+    var r;
+    const o = (r = _.current) == null ? void 0 : r.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;
+    var r;
     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;
+      R(null), T.current = null, g(null), n == null || n.setTextEditingAdapter(null), (r = s.current) == null || r.call(s), s.current = null;
       return;
     }
     const o = Ie(e.editingSession.item._contentVisual.options);
-    return A(o), T.current = o, g(null), n.setTextEditingAdapter({
+    return R(o), T.current = o, g(null), n.setTextEditingAdapter({
       getCommitPayload: () => {
         const u = T.current;
         return u ? {
@@ -80,31 +80,31 @@ const _e = '[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdown
       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)), [
+  const me = e.editingSession ? e.editingSession.item._contentVisual.options : {}, d = e.selectedShape, m = e.selectedConnection, f = (U = l == null ? void 0 : l.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 && M.tools.length > 0 && Y(d, f)), [
     d,
     E.base,
     e.visibility.shape,
-    k.tools.length,
+    M.tools.length,
     f
-  ]), be = t.useMemo(() => !!(m && y.base && e.visibility.connection && V.tools.length > 0 && Y(m, f)), [
+  ]), be = t.useMemo(() => !!(m && y.base && e.visibility.connection && N.tools.length > 0 && Y(m, f)), [
     m,
     y.base,
     e.visibility.connection,
-    V.tools.length,
+    N.tools.length,
     f
   ]), pe = (o) => {
-    A(o.value), T.current = o.value, c && g({ view: c.view });
+    R(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)
+    const r = o.target;
+    if (!e.editingSession || !r.element || !n || !p)
       return;
-    const u = l.element;
+    const u = r.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]);
+    const { item: S } = e.editingSession, q = S.name === "Shape" ? S._contentVisual.padding() : { top: 0, bottom: 0, left: 0, right: 0 }, O = o.dom, W = le.toLanguageString(Z, Re[Z]);
     let h;
     const Te = new b.Plugin({
-      filterTransaction: (x) => (ee(te, [x.doc.attrs.alignment, D, q]), g({ view: h }), !0)
+      filterTransaction: (x) => (ee(te, [x.doc.attrs.alignment, O, q]), g({ view: h }), !0)
     }), Ee = b.EditorState.create({
       doc: p,
       schema: ne,
@@ -116,7 +116,7 @@ const _e = '[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdown
       ]
     });
     return h = new Le(
-      { mount: D },
+      { mount: O },
       {
         ...o.viewProps,
         state: Ee,
@@ -125,40 +125,40 @@ const _e = '[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdown
           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;
+    ), Be(S, u, W), h.focus(), ee(te, [(j = S.options.content) == null ? void 0 : j.align, O, 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,
+  return n ? /* @__PURE__ */ t.createElement(Ne, { value: { controller: n, snapshot: e } }, /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ t.createElement(
+    Ae,
     {
-      diagram: r,
+      diagram: l,
       visible: e.visibility.main && I.tools.length > 0,
       ...I
     }
   ), /* @__PURE__ */ t.createElement(
-    M,
+    K,
     {
       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("div", { ref: ie, className: z }, /* @__PURE__ */ t.createElement(ve, { shape: d, ...M }))
   ), /* @__PURE__ */ t.createElement(
-    M,
+    K,
     {
       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("div", { ref: re, className: z }, /* @__PURE__ */ t.createElement(we, { connection: m, ...N }))
   ), /* @__PURE__ */ t.createElement(
-    M,
+    K,
     {
       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
@@ -167,7 +167,7 @@ const _e = '[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdown
       "div",
       {
         ref: ue,
-        className: R,
+        className: z,
         onKeyDown: he
       },
       /* @__PURE__ */ t.createElement(
@@ -192,6 +192,7 @@ const _e = '[tabindex]:not([tabindex="-1"]), button:not([disabled]), .k-dropdown
     }
   ))) : null;
 };
+$e.displayName = "KendoDiagramEditor";
 export {
-  ot as DiagramEditor
+  $e as DiagramEditor
 };

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

@@ -17,5 +17,5 @@ interface MainToolbarProps extends MainToolbarOptions {
     visible?: boolean;
 }
 /** @hidden */
-export declare const MainToolbar: (props: MainToolbarProps) => React.ReactPortal | null;
+export declare const MainToolbar: (props: MainToolbarProps) => React.JSX.Element | null;
 export {};

package/rich-text-editing/MainToolbar.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("react"),B=require("react-dom"),a=require("@progress/kendo-react-buttons"),L=require("@progress/kendo-react-popup"),w=require("@progress/kendo-diagram-common"),u=require("@progress/kendo-svg-icons"),O=require("@progress/kendo-react-intl"),e=require("../messages/index.js"),j=require("./shapes-dropdown.js"),m=require("./utils.js"),f=require("./DiagramEditorContext.js");function U(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const s in n)if(s!=="default"){const p=Object.getOwnPropertyDescriptor(n,s);Object.defineProperty(t,s,p.get?p:{enumerable:!0,get:()=>n[s]})}}return t.default=n,Object.freeze(t)}const c=U(D),{floatingToolbarStyle:v}=w.EditingUtils.Data,S=2,z=10,N=n=>{const{diagram:t,tools:s,position:p="top",shapes:h,visible:d=!0}=n,{controller:i,snapshot:T}=f.useDiagramEditorContext(),P=f.useRegisteredSurfaceRef(i),k=f.useDiagramEditorPopupProps("main-toolbar"),r=T.activeTool,x=!!(t&&t.canUndo()),C=!!(t&&t.canRedo()),l=O.useLocalization();c.useEffect(()=>{if(!t)return;const{element:o}=t,y=o.ownerDocument.defaultView;if(!y||y.getComputedStyle(o).position!=="static")return;const M=o.style.position;return o.style.position="relative",()=>{o.style.position=M}},[t]);const g=c.useCallback(o=>{i.dispatch({type:"setActiveTool",tool:o})},[i]),I=o=>{g({type:"insert-shape",shape:o})},E={undo:{component:a.Button,props:{svgIcon:u.undoIcon,fillMode:"flat",onClick:()=>i.execute({type:"undo"}),disabled:!x,title:l.toLanguageString(e.editingUndo,e.messages[e.editingUndo])}},redo:{component:a.Button,props:{svgIcon:u.redoIcon,fillMode:"flat",onClick:()=>i.execute({type:"redo"}),disabled:!C,title:l.toLanguageString(e.editingRedo,e.messages[e.editingRedo])}},select:{component:a.Button,props:{svgIcon:u.pointerIcon,fillMode:"flat",onClick:()=>g({type:"select"}),togglable:!0,selected:r.type==="select",title:l.toLanguageString(e.editingSelect,e.messages[e.editingSelect])}},pan:{component:a.Button,props:{svgIcon:u.handIcon,fillMode:"flat",onClick:()=>g({type:"pan"}),togglable:!0,selected:r.type==="pan",title:l.toLanguageString(e.editingPan,e.messages[e.editingPan])}},text:{component:a.Button,props:{svgIcon:u.freeTextIcon,fillMode:"flat",onClick:()=>g({type:"insert-text"}),togglable:!0,selected:r.type==="insert-text",title:l.toLanguageString(e.editingText,e.messages[e.editingText])}},shape:{component:j.ShapeSelector,props:{onSelect:I,value:r.type==="insert-shape"?r.shape:null,active:r.type==="insert-shape",buttonTitle:l.toLanguageString(e.editingShape,e.messages[e.editingShape]),shapes:h,popupClass:m.mainToolbarPopupClass,overlayOwner:"main-toolbar"}},separator:{component:a.ToolbarSeparator,props:{}}},b=m.mapTools(s,E);if(!t||b.length===0)return null;const R={position:"absolute",left:0,right:0,top:p==="top"?S:void 0,bottom:p==="bottom"?S+z:void 0,display:"flex",justifyContent:"center",pointerEvents:"none",zIndex:1},q={opacity:d?1:0,visibility:d?"visible":"hidden",pointerEvents:d?"auto":"none",transition:d?"opacity 140ms ease":"opacity 140ms ease, visibility 0s linear 140ms",...v};return B.createPortal(c.createElement("div",{style:R,className:"k-animation-container k-animation-container-shown"},c.createElement("div",{ref:P,className:"k-popup k-diagram-top-toolbar-container",style:q,onPointerEnter:()=>i.handlePointerEnter(),onPointerLeave:()=>i.handlePointerLeave()},c.createElement(L.PopupPropsContext.Provider,{value:k},c.createElement(a.Toolbar,{fillMode:"flat",style:v,buttons:m.floatingToolbarButtons},b)))),t.element)};exports.MainToolbar=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),a=require("@progress/kendo-react-buttons"),y=require("@progress/kendo-react-popup"),E=require("@progress/kendo-diagram-common"),g=require("@progress/kendo-svg-icons"),w=require("@progress/kendo-react-intl"),e=require("../messages/index.js"),O=require("./shapes-dropdown.js"),m=require("./utils.js"),f=require("./DiagramEditorContext.js");function L(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const s in n)if(s!=="default"){const r=Object.getOwnPropertyDescriptor(n,s);Object.defineProperty(t,s,r.get?r:{enumerable:!0,get:()=>n[s]})}}return t.default=n,Object.freeze(t)}const i=L(B),{floatingToolbarStyle:S}=E.EditingUtils.Data,v=2,z=10,j={zIndex:1},U={type:"fade",openDuration:140,closeDuration:140},A=n=>{const{diagram:t,tools:s,position:r="top",shapes:h,visible:T=!0}=n,{controller:p,snapshot:P}=f.useDiagramEditorContext(),I=f.useRegisteredSurfaceRef(p),x=f.useDiagramEditorPopupProps("main-toolbar"),l=P.activeTool,C=!!(t&&t.canUndo()),M=!!(t&&t.canRedo()),c=w.useLocalization();i.useEffect(()=>{if(!t)return;const{element:o}=t,u=o.ownerDocument.defaultView;if(!u||u.getComputedStyle(o).position!=="static")return;const q=o.style.position;return o.style.position="relative",()=>{o.style.position=q}},[t]);const d=i.useCallback(o=>{p.dispatch({type:"setActiveTool",tool:o})},[p]),k=o=>{d({type:"insert-shape",shape:o})},R={undo:{component:a.Button,props:{svgIcon:g.undoIcon,fillMode:"flat",onClick:()=>p.execute({type:"undo"}),disabled:!C,title:c.toLanguageString(e.editingUndo,e.messages[e.editingUndo])}},redo:{component:a.Button,props:{svgIcon:g.redoIcon,fillMode:"flat",onClick:()=>p.execute({type:"redo"}),disabled:!M,title:c.toLanguageString(e.editingRedo,e.messages[e.editingRedo])}},select:{component:a.Button,props:{svgIcon:g.pointerIcon,fillMode:"flat",onClick:()=>d({type:"select"}),togglable:!0,selected:l.type==="select",title:c.toLanguageString(e.editingSelect,e.messages[e.editingSelect])}},pan:{component:a.Button,props:{svgIcon:g.handIcon,fillMode:"flat",onClick:()=>d({type:"pan"}),togglable:!0,selected:l.type==="pan",title:c.toLanguageString(e.editingPan,e.messages[e.editingPan])}},text:{component:a.Button,props:{svgIcon:g.freeTextIcon,fillMode:"flat",onClick:()=>d({type:"insert-text"}),togglable:!0,selected:l.type==="insert-text",title:c.toLanguageString(e.editingText,e.messages[e.editingText])}},shape:{component:O.ShapeSelector,props:{onSelect:k,value:l.type==="insert-shape"?l.shape:null,active:l.type==="insert-shape",buttonTitle:c.toLanguageString(e.editingShape,e.messages[e.editingShape]),shapes:h,popupClass:m.mainToolbarPopupClass,overlayOwner:"main-toolbar"}},separator:{component:a.ToolbarSeparator,props:{}}},D=i.useMemo(()=>{const o={horizontal:0,vertical:r==="top"?v:v+z},u={vertical:r,horizontal:"center"};return{anchorAlign:u,popupAlign:{...u},margin:o}},[r]),b=m.mapTools(s,R);return!t||b.length===0?null:i.createElement(y.Popup,{appendTo:t.element,show:T,animate:U,style:j,anchor:t.element,...D},i.createElement("div",{ref:I,style:S},i.createElement(y.PopupPropsContext.Provider,{value:x},i.createElement(a.Toolbar,{fillMode:"flat",style:S,buttons:m.floatingToolbarButtons},b))))};exports.MainToolbar=A;

package/rich-text-editing/MainToolbar.mjs

@@ -5,139 +5,123 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as a from "react";
-import { createPortal as U } from "react-dom";
-import { Toolbar as z, ToolbarSeparator as A, Button as l } from "@progress/kendo-react-buttons";
-import { PopupPropsContext as N } from "@progress/kendo-react-popup";
+import * as e from "react";
+import { Toolbar as z, ToolbarSeparator as A, Button as s } from "@progress/kendo-react-buttons";
+import { Popup as B, PopupPropsContext as U } from "@progress/kendo-react-popup";
 import { EditingUtils as O } from "@progress/kendo-diagram-common";
-import { freeTextIcon as W, handIcon as j, pointerIcon as V, redoIcon as q, undoIcon as F } from "@progress/kendo-svg-icons";
+import { freeTextIcon as W, handIcon as V, pointerIcon as j, redoIcon as q, undoIcon as F } from "@progress/kendo-svg-icons";
 import { useLocalization as G } from "@progress/kendo-react-intl";
-import { editingShape as u, messages as r, editingText as g, editingPan as f, editingSelect as y, editingRedo as b, editingUndo as v } from "../messages/index.mjs";
+import { editingShape as g, messages as i, editingText as m, editingPan as d, editingSelect as f, editingRedo as y, editingUndo as b } from "../messages/index.mjs";
 import { ShapeSelector as H } from "./shapes-dropdown.mjs";
-import { mapTools as J, floatingToolbarButtons as K, mainToolbarPopupClass as Q } from "./utils.mjs";
-import { useDiagramEditorContext as X, useRegisteredSurfaceRef as Y, useDiagramEditorPopupProps as Z } from "./DiagramEditorContext.mjs";
-const { floatingToolbarStyle: h } = O.Data, S = 2, _ = 10, pt = (T) => {
-  const { diagram: t, tools: P, position: c = "top", shapes: x, visible: s = !0 } = T, { controller: e, snapshot: C } = X(), E = Y(e), I = Z("main-toolbar"), n = C.activeTool, k = !!(t && t.canUndo()), L = !!(t && t.canRedo()), i = G();
-  a.useEffect(() => {
+import { mapTools as J, floatingToolbarButtons as K, mainToolbarPopupClass as N } from "./utils.mjs";
+import { useDiagramEditorContext as Q, useRegisteredSurfaceRef as X, useDiagramEditorPopupProps as Y } from "./DiagramEditorContext.mjs";
+const { floatingToolbarStyle: h } = O.Data, v = 2, Z = 10, _ = { zIndex: 1 }, $ = { type: "fade", openDuration: 140, closeDuration: 140 }, po = (S) => {
+  const { diagram: t, tools: T, position: c = "top", shapes: I, visible: P = !0 } = S, { controller: r, snapshot: x } = Q(), C = X(r), M = Y("main-toolbar"), n = x.activeTool, E = !!(t && t.canUndo()), L = !!(t && t.canRedo()), a = G();
+  e.useEffect(() => {
     if (!t)
       return;
-    const { element: o } = t, d = o.ownerDocument.defaultView;
-    if (!d || d.getComputedStyle(o).position !== "static")
+    const { element: o } = t, l = o.ownerDocument.defaultView;
+    if (!l || l.getComputedStyle(o).position !== "static")
       return;
     const D = o.style.position;
     return o.style.position = "relative", () => {
       o.style.position = D;
     };
   }, [t]);
-  const p = a.useCallback(
+  const p = e.useCallback(
     (o) => {
-      e.dispatch({ type: "setActiveTool", tool: o });
+      r.dispatch({ type: "setActiveTool", tool: o });
     },
-    [e]
-  ), M = (o) => {
+    [r]
+  ), R = (o) => {
     p({ type: "insert-shape", shape: o });
-  }, R = {
+  }, k = {
     undo: {
-      component: l,
+      component: s,
       props: {
         svgIcon: F,
         fillMode: "flat",
-        onClick: () => e.execute({ type: "undo" }),
-        disabled: !k,
-        title: i.toLanguageString(v, r[v])
+        onClick: () => r.execute({ type: "undo" }),
+        disabled: !E,
+        title: a.toLanguageString(b, i[b])
       }
     },
     redo: {
-      component: l,
+      component: s,
       props: {
         svgIcon: q,
         fillMode: "flat",
-        onClick: () => e.execute({ type: "redo" }),
+        onClick: () => r.execute({ type: "redo" }),
         disabled: !L,
-        title: i.toLanguageString(b, r[b])
+        title: a.toLanguageString(y, i[y])
       }
     },
     select: {
-      component: l,
+      component: s,
       props: {
-        svgIcon: V,
+        svgIcon: j,
         fillMode: "flat",
         onClick: () => p({ type: "select" }),
         togglable: !0,
         selected: n.type === "select",
-        title: i.toLanguageString(y, r[y])
+        title: a.toLanguageString(f, i[f])
       }
     },
     pan: {
-      component: l,
+      component: s,
       props: {
-        svgIcon: j,
+        svgIcon: V,
         fillMode: "flat",
         onClick: () => p({ type: "pan" }),
         togglable: !0,
         selected: n.type === "pan",
-        title: i.toLanguageString(f, r[f])
+        title: a.toLanguageString(d, i[d])
       }
     },
     text: {
-      component: l,
+      component: s,
       props: {
         svgIcon: W,
         fillMode: "flat",
         onClick: () => p({ type: "insert-text" }),
         togglable: !0,
         selected: n.type === "insert-text",
-        title: i.toLanguageString(g, r[g])
+        title: a.toLanguageString(m, i[m])
       }
     },
     shape: {
       component: H,
       props: {
-        onSelect: M,
+        onSelect: R,
         value: n.type === "insert-shape" ? n.shape : null,
         active: n.type === "insert-shape",
-        buttonTitle: i.toLanguageString(u, r[u]),
-        shapes: x,
-        popupClass: Q,
+        buttonTitle: a.toLanguageString(g, i[g]),
+        shapes: I,
+        popupClass: N,
         overlayOwner: "main-toolbar"
       }
     },
     separator: { component: A, props: {} }
-  }, m = J(P, R);
-  if (!t || m.length === 0)
-    return null;
-  const w = {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    top: c === "top" ? S : void 0,
-    bottom: c === "bottom" ? S + _ : void 0,
-    display: "flex",
-    justifyContent: "center",
-    pointerEvents: "none",
-    zIndex: 1
-  }, B = {
-    opacity: s ? 1 : 0,
-    visibility: s ? "visible" : "hidden",
-    pointerEvents: s ? "auto" : "none",
-    transition: s ? "opacity 140ms ease" : "opacity 140ms ease, visibility 0s linear 140ms",
-    ...h
-  };
-  return U(
-    /* @__PURE__ */ a.createElement("div", { style: w, className: "k-animation-container k-animation-container-shown" }, /* @__PURE__ */ a.createElement(
-      "div",
-      {
-        ref: E,
-        className: "k-popup k-diagram-top-toolbar-container",
-        style: B,
-        onPointerEnter: () => e.handlePointerEnter(),
-        onPointerLeave: () => e.handlePointerLeave()
-      },
-      /* @__PURE__ */ a.createElement(N.Provider, { value: I }, /* @__PURE__ */ a.createElement(z, { fillMode: "flat", style: h, buttons: K }, m))
-    )),
-    t.element
+  }, w = e.useMemo(() => {
+    const o = {
+      horizontal: 0,
+      vertical: c === "top" ? v : v + Z
+    }, l = { vertical: c, horizontal: "center" };
+    return { anchorAlign: l, popupAlign: { ...l }, margin: o };
+  }, [c]), u = J(T, k);
+  return !t || u.length === 0 ? null : /* @__PURE__ */ e.createElement(
+    B,
+    {
+      appendTo: t.element,
+      show: P,
+      animate: $,
+      style: _,
+      anchor: t.element,
+      ...w
+    },
+    /* @__PURE__ */ e.createElement("div", { ref: C, style: h }, /* @__PURE__ */ e.createElement(U.Provider, { value: M }, /* @__PURE__ */ e.createElement(z, { fillMode: "flat", style: h, buttons: K }, u)))
   );
 };
 export {
-  pt as MainToolbar
+  po as MainToolbar
 };

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

@@ -10,5 +10,5 @@ export type { ToolbarTools, FontTypeItem, FontSizeItem, ConnectionToolbarOptions
 /**
  * The props of the `DiagramEditor` component.
  */
-export interface DiagramEditorProps extends DiagramEditorOptions {
+export interface DiagramEditorProps extends Omit<DiagramEditorOptions, 'diagram'> {
 }

package/utils/consts.d.ts

@@ -5,6 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+import { ShapeRichTextContent, ConnectionRichTextContent } from '@progress/kendo-diagram-common';
 import { DiagramNavigationOptions, DiagramDataItem } from '../interfaces/index.js';
 import { ConnectionOptions } from '../interfaces/ConnectionTypes';
 import { ShapeOptions } from '../interfaces/ShapeTypes';
@@ -35,3 +36,7 @@ export declare const diagramDefaultProps: {
     zoomRate: number;
     role: string;
 };
+/**
+ * The default content style for shapes and connections in the diagram for text editing.
+ */
+export declare const diagramEditingContentDefaults: ShapeRichTextContent | ConnectionRichTextContent;

package/utils/consts.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={enabled:!0,smallStep:1,largeStep:5},a={connections:[],shapes:[],editable:!0,pannable:{enabled:!0,showScrollbars:!0,autoHideScrollbars:!0},selectable:!0,zoom:1,zoomMax:2,zoomMin:.1,zoomRate:.1,role:"application"};exports.DEFAULT_NAVIGABLE_OPTIONS=e;exports.diagramDefaultProps=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@progress/kendo-diagram-common"),t={enabled:!0,smallStep:1,largeStep:5},a={connections:[],shapes:[],editable:!0,pannable:{enabled:!0,showScrollbars:!0,autoHideScrollbars:!0},selectable:!0,zoom:1,zoomMax:2,zoomMin:.1,zoomRate:.1,role:"application"},o={fontSize:16,fontFamily:e.EditingUtils.Data.fontNames[0].value};exports.DEFAULT_NAVIGABLE_OPTIONS=t;exports.diagramDefaultProps=a;exports.diagramEditingContentDefaults=o;

package/utils/consts.mjs

@@ -5,7 +5,8 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-const e = { enabled: !0, smallStep: 1, largeStep: 5 }, o = {
+import { EditingUtils as e } from "@progress/kendo-diagram-common";
+const a = { enabled: !0, smallStep: 1, largeStep: 5 }, o = {
   connections: [],
   shapes: [],
   editable: !0,
@@ -20,8 +21,12 @@ const e = { enabled: !0, smallStep: 1, largeStep: 5 }, o = {
   zoomMin: 0.1,
   zoomRate: 0.1,
   role: "application"
+}, l = {
+  fontSize: 16,
+  fontFamily: e.Data.fontNames[0].value
 };
 export {
-  e as DEFAULT_NAVIGABLE_OPTIONS,
-  o as diagramDefaultProps
+  a as DEFAULT_NAVIGABLE_OPTIONS,
+  o as diagramDefaultProps,
+  l as diagramEditingContentDefaults
 };