@riil-frontend/component-topology 5.0.0-alpha.9 → 5.0.2

package/es/common/components/ColorPicker/ColorPicker.js

@@ -1,4 +1,5 @@
 import _Balloon from "@alifd/next/es/balloon";
+import _extends from "@babel/runtime/helpers/extends";
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component, useRef } from 'react';
 import { SketchPicker } from 'react-color';
@@ -37,7 +38,8 @@ var ColorPicker = /*#__PURE__*/function (_Component) {
   _proto.render = function render() {
     var _this$props2 = this.props,
         value = _this$props2.value,
-        align = _this$props2.align;
+        align = _this$props2.align,
+        balloonProps = _this$props2.balloonProps;
     var defaultTrigger = /*#__PURE__*/React.createElement("div", {
       className: styles.swatch,
       style: {
@@ -46,7 +48,7 @@ var ColorPicker = /*#__PURE__*/function (_Component) {
     });
     return /*#__PURE__*/React.createElement("div", {
       className: "topo-color-picker"
-    }, /*#__PURE__*/React.createElement(_Balloon, {
+    }, /*#__PURE__*/React.createElement(_Balloon, _extends({
       trigger: defaultTrigger,
       closable: false,
       triggerType: "click",
@@ -57,7 +59,7 @@ var ColorPicker = /*#__PURE__*/function (_Component) {
       style: {
         paddingBottom: 0
       }
-    }, /*#__PURE__*/React.createElement(SketchPicker, {
+    }, balloonProps), /*#__PURE__*/React.createElement(SketchPicker, {
       color: value // width={230}
       ,
       disableAlpha: true,

package/es/components/BatchAttrMetric/setting.js

@@ -5,7 +5,7 @@ import _Grid from "@alifd/next/es/grid";
 import _Message from "@alifd/next/es/message";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["defaultSet", "showType"];
+var _excluded = ["defaultSet", "allCiSet", "showType"];
 import React, { useState, useMemo } from "react";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import ActionTree from "@riil-frontend/component-action-tree";
@@ -17,6 +17,7 @@ import styles from "./index.module.scss";
 
 var Setting = function Setting(_ref) {
   var defaultSet = _ref.defaultSet,
+      allCiSet = _ref.allCiSet,
       showType = _ref.showType,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -31,10 +32,7 @@ var Setting = function Setting(_ref) {
       topoDispatchers = _topo$store$useModel[1];
 
   var resAndMetrics = topoState.resAndMetrics;
-  var allCiModSet = resAndMetrics.allCiModSet,
-      allLinkModSet = resAndMetrics.allLinkModSet;
-  rlog.debug("Setting-resAndMetrics-allCiSet-elementType", showType, props, resAndMetrics, elementType);
-  var allCiSet = elementType === "node" ? allCiModSet : allLinkModSet;
+  rlog.debug("Setting-resAndMetrics-allCiSet-elementType", showType, props, elementType);
   rlog.debug("Setting----allCiSet", allCiSet);
 
   var _useState = useState(Object.keys(allCiSet)[0]),

package/es/components/ResourceSelectDrawer/ResourceSelectDrawer.js

@@ -2,6 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
+import rlog from '@riil-frontend/component-topology-utils/lib/rlog';
 import Drawer from "../Drawer";
 import ResourceSelectList from "./ResourceSelectList";
 import styles from "./ResourceSelectDrawer.module.scss";
@@ -64,7 +65,7 @@ function ResourceSelectDrawer(props) {
               _context.prev = 9;
               _context.t0 = _context["catch"](1);
               setLoading(false);
-              console.error('ResourceSelectDrawer.handleOk', _context.t0);
+              rlog.error('ResourceSelectDrawer.handleOk', _context.t0);
 
             case 13:
             case "end":

package/es/core/components/DisplaySettingDrawer/DisplaySettingDrawer.js

@@ -3,6 +3,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _extends from "@babel/runtime/helpers/extends";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect, useRef, useState } from 'react';
+import rlog from '@riil-frontend/component-topology-utils/lib/rlog';
 import Drawer from "../../../components/Drawer";
 import DisplaySetting from "./DisplaySetting";
 import useDisplaySetting from "./hooks/useDisplaySetting";
@@ -45,7 +46,7 @@ export default function DisplaySettingDrawer(props) {
               _context.prev = 9;
               _context.t0 = _context["catch"](1);
               setLoading(false);
-              console.error('DisplaySettingDrawer.handleOk', _context.t0);
+              rlog.error('DisplaySettingDrawer.handleOk', _context.t0);
 
               _Message.warn('保存失败');
 

package/es/core/components/DisplaySettingDrawer/LinkTip.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { DEFAULT_TIP_COMMON_CONFIG } from "../../../constants/ResourceInfoDisplay";
+import LinkAttrCustomSettingDrawer from "../../../networkTopo/components/viewer/displaySetting/LinkAttrCustomSettingDrawer";
 import BasicConfig from "./ResourceDisplay/BasicConfig"; // 源端口、目的端口、总流量、带宽利用率
 
 var CommonOptions = [{
@@ -30,7 +31,10 @@ function LinkTip(props, ref) {
     elementType: "link",
     showType: "tip",
     commonOptions: CommonOptions,
-    defaultCommonConfig: DEFAULT_TIP_COMMON_CONFIG
+    defaultCommonConfig: DEFAULT_TIP_COMMON_CONFIG,
+    customSettingDrawer: function customSettingDrawer(params) {
+      return /*#__PURE__*/React.createElement(LinkAttrCustomSettingDrawer, params);
+    }
   }));
 }
 

package/es/core/components/DisplaySettingDrawer/demo/Demo.js

@@ -0,0 +1,63 @@
+import React from 'react';
+export default function Demo() {
+  var dataSource = [{
+    id: 'switch',
+    label: '交换机',
+    icon: '/img/model/switch.svg',
+    list: [{
+      code: 'graph:name',
+      name: '图片名称',
+      typeName: null
+    }, {
+      code: 'ciType:name',
+      name: '资源类型',
+      typeName: null
+    }, {
+      code: 'attr:ipv4_address',
+      name: 'IPv4地址',
+      typeName: '属性'
+    }, {
+      code: 'metric:ping_status',
+      name: 'ping状态',
+      typeName: '指标'
+    }]
+  }, {
+    id: 'router',
+    label: '路由器',
+    icon: '/img/model/switch.svg',
+    list: [{
+      code: 'graph:name',
+      name: '图片名称',
+      typeName: null
+    }, {
+      code: 'ciType:name',
+      name: '资源类型',
+      typeName: null
+    }, {
+      code: 'attr:ipv4_address',
+      name: 'IPv4地址',
+      typeName: '属性'
+    }, {
+      code: 'metric:ping_status',
+      name: 'ping状态',
+      typeName: '指标'
+    }]
+  }];
+  return /*#__PURE__*/React.createElement(AttributeSelectDrawer, {
+    visible: true,
+    value: {} // 示例： {'switch': ['graph:name','ciType:name'], ...}
+    ,
+    dataSource: dataSource // key为监控模板code，value为配置项列表
+    ,
+    limit: 3 // 单个模板最大可选择选项数量
+    ,
+    onChange: function onChange(value) {
+      console.log('onChange');
+    },
+    onCancel: function onCancel() {
+      console.log('onCancel');
+    },
+    showType: "tip" // 数据类型。
+
+  });
+}

package/es/core/components/ResourceViewAttributeSetting/Setting.js

@@ -12,7 +12,8 @@ var ResourceDiplayInfoSetting = /*#__PURE__*/forwardRef(function (props, ref) {
       elementType = props.elementType,
       showType = props.showType,
       limit = props.limit,
-      onChange = props.onChange;
+      onChange = props.onChange,
+      queryData = props.queryData;
   var batchAttrMetric = useRef();
 
   var _useState = useState({}),
@@ -29,38 +30,13 @@ var ResourceDiplayInfoSetting = /*#__PURE__*/forwardRef(function (props, ref) {
       allLinkModSet = resAndMetrics.allLinkModSet;
 
   var openMarkSetting = function openMarkSetting(parm) {
-    // rlog.debug('openMarkSetting', parm, allCiSet, ciSetDoc, setConfig,allCiModSet,allLinkModSet);
     rlog.debug("openMarkSetting", parm, elementType, showType, allCiModSet, allLinkModSet);
-    setMarkarkData(elementType === "node" ? allCiModSet : allLinkModSet);
-    /**
-     * 已修改，目前只有批量设置
-     */
-    // if (parm.selectType === 'batch') {
-    //   setMarkarkData(setConfig ?? allCiModSet);
-    // } else {
-    //   const setObj = {};
-    //   if (ciSetDoc?.hasOwnProperty(parm.ciId)) {
-    //     setObj[parm.ciId] = {
-    //       ...ciSetDoc[parm.ciId],
-    //       tag: ((ciSetDoc[parm.ciId] || {}).tag || []).map((t) => {
-    //         // return t.split('-')[0];
-    //         return t.code;
-    //       }),
-    //       tip: ((ciSetDoc[parm.ciId] || {}).tip || []).map((t) => {
-    //         return t.code;
-    //       }),
-    //     };
-    //   } else {
-    //     setObj[parm.ciId] = {
-    //       code: '',
-    //       list: [],
-    //       tag: [],
-    //       tip: [],
-    //     };
-    //   }
-    //   rlog.debug('setMarkarkData', setObj);
-    //   setMarkarkData(setObj);
-    // }
+
+    if (queryData) {
+      setMarkarkData(queryData());
+    } else {
+      setMarkarkData(elementType === "node" ? allCiModSet : allLinkModSet);
+    }
 
     batchAttrMetric.current.show({
       showType: showType
@@ -83,22 +59,7 @@ var ResourceDiplayInfoSetting = /*#__PURE__*/forwardRef(function (props, ref) {
         isCustom: true,
         data: parm
       });
-    } // const doc = ciSetDoc;
-    // let ciDoc = {};
-    // let allCiset = allCiSet;
-    // if (selectType === 'single') {
-    //   const singleResult = updateCiDoc(dataType, parm, doc, allCiSet);
-    //   ciDoc = singleResult.cidoc;
-    //   allCiset = singleResult.allciset;
-    // } else {
-    //   const allResult = updateAllCiDoc(dataType, parm, doc, allCiSet);
-    //   ciDoc = allResult.cidoc;
-    //   allCiset = allResult.allciset;
-    // }
-    // rlog.debug('saveMarkSetting', {parm, allCiSet, ciDoc, allCiset});
-    // topo.view.topoClient.setTagAndTipConfig(ciDoc);
-    // bizDispatchers.update({ ciSetDoc: ciDoc, setConfig: allCiset });
-
+    }
   };
 
   useImperativeHandle(ref, function () {

package/es/core/components/TopoView/TopoView.module.scss

@@ -19,7 +19,7 @@
 // 解决拓扑图容器绝对定位z-index>0时浮层和右键菜单不显示问题
 :global {
   body > .ht-ui-view {
-    z-index: 1000;
+    z-index: 10000;
   }
   body > div[ht="ht-view ht.ui.ContextMenu"] {
     z-index: 1000;

package/es/core/components/TopoView/topoView.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useState, useEffect, useRef, useCallback } from "react";
-import PropTypes from "prop-types";
-import classnames from "classnames";
-import TopoGraph, { TopoEvent } from "@riil-frontend/component-topology-graph";
-import rlog from "@riil-frontend/component-topology-utils/es/rlog";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import TopoGraph, { TopoEvent } from '@riil-frontend/component-topology-graph';
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import useTopoEdit from "../../hooks/useTopoEdit";
 import useSelection from "../../hooks/useSelection";
 import showMessage from "../../utils/showMessage";
@@ -48,16 +48,16 @@ var Topology = function Topology(props) {
   topo.viewProps = props;
   var store = topo.store;
 
-  var _store$useModel = store.useModel("topoMod"),
+  var _store$useModel = store.useModel('topoMod'),
       topoState = _store$useModel[0],
       topoDispatchers = _store$useModel[1];
 
-  var bizDispatchers = store.useModelDispatchers("topoBizMod");
+  var bizDispatchers = store.useModelDispatchers('topoBizMod');
   var topoId = topoState.topoId,
       viewState = topoState.viewState,
       topoData = topoState.topoData,
       urlParams = topoState.urlParams;
-  var isEditMode = viewState === "edit";
+  var isEditMode = viewState === 'edit';
   var topoShowType = topoState.type;
   var isLayerTopo = topoShowType === TPL_TREE;
 
@@ -97,7 +97,7 @@ var Topology = function Topology(props) {
     topo: topo
   });
   useEffect(function () {
-    if (viewState === "view" && topoId) {
+    if (viewState === 'view' && topoId) {
       // TODO 移到模型中
       // rlog.debug('useEffect-viewState', topoId, viewState);
       setTData(null);
@@ -120,7 +120,7 @@ var Topology = function Topology(props) {
   }, []);
   var onGraphCreated = useCallback(function (topoClient) {
     topo.view.onCreatedView(topoClient);
-    rlog.info("TopoView.onGraphCreated");
+    rlog.info('TopoView.onGraphCreated');
     initSelection();
 
     if (onReady) {
@@ -128,22 +128,27 @@ var Topology = function Topology(props) {
     }
   }, []);
   var handleGraphDataLoaded = useCallback(function () {
-    rlog.info("TopoView.handleGraphDataLoaded", topoData, topo.getDataModel().getDatas().toArray());
+    rlog.info('TopoView.handleGraphDataLoaded', topoData, topo.getDataModel().getDatas().toArray());
     upgradeV103GraphClusterNode(topo, topoData);
     fixLink(topo);
     handleClusterNoPermission(topo);
     updateEdgeExpanded(topo);
+    var htHistoryManager = topo.getDataModel().getHistoryManager();
+
+    if (htHistoryManager) {
+      topo.historyManager = new HistoryManager(topo, htHistoryManager);
+    }
+
     topoDispatchers.update({
       graphLoaded2: true
     });
-    topo.historyManager = new HistoryManager(topo);
 
     if (onLoad) {
       onLoad();
     }
   }, [topoData]);
   var handleGraphLoaded = useCallback(function () {
-    rlog.info("TopoView.handleGraphLoaded", topoData, topo.getDataModel().getDatas().toArray());
+    rlog.info('TopoView.handleGraphLoaded', topoData, topo.getDataModel().getDatas().toArray());
     upgradeV103GraphClusterNode(topo, topoData);
     fixLink(topo);
     handleClusterNoPermission(topo);
@@ -162,7 +167,7 @@ var Topology = function Topology(props) {
   }, [topoData]); // TODO 之后把事件方法都转移出去
 
   var rightEventHandle = function rightEventHandle(event) {
-    rlog.debug("右键事件", event);
+    rlog.debug('右键事件', event);
     var contextMenu = topo.view.contextMenu;
 
     if (contextMenu.containsCommand(event.data.id)) {
@@ -171,7 +176,7 @@ var Topology = function Topology(props) {
   };
 
   var onRefresh = function onRefresh(e) {
-    rlog.debug("TopoView:onRefresh", e);
+    rlog.debug('TopoView:onRefresh', e);
     onRefreshTopo ? onRefreshTopo() : topoDispatchers.refreshTopo();
   };
   /**
@@ -181,7 +186,7 @@ var Topology = function Topology(props) {
 
 
   var handleEvent = function handleEvent(event) {
-    rlog.debug("TopoView:onEvent", event);
+    rlog.debug('TopoView:onEvent', event);
     onEvent && onEvent(event);
     topoEdit.onEvent(event);
 
@@ -220,7 +225,7 @@ var Topology = function Topology(props) {
         break;
 
       case TopoEvent.EVENT_CONTEXT_TOOL:
-        rlog.debug("自定义工具栏事件", event);
+        rlog.debug('自定义工具栏事件', event);
         break;
 
       default:
@@ -251,7 +256,10 @@ var Topology = function Topology(props) {
     onEnterEdit: onEnterEdit,
     topoEditApi: topoEdit
   })), /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles.viewPanel, (_classnames = {}, _classnames[styles.viewPanelEditMode] = isEditMode, _classnames))
+    className: classnames(styles.viewPanel, (_classnames = {}, _classnames[styles.viewPanelEditMode] = isEditMode, _classnames)),
+    onKeyDown: function onKeyDown(e) {
+      topo.historyManager && topo.historyManager.handleKeyDown(e);
+    }
   }, /*#__PURE__*/React.createElement(TopoGraph, _extends({}, graphViewProps, {
     createHtTopoProps: _extends({}, graphViewProps.createHtTopoProps, {
       editor: _extends({}, ((_graphViewProps$creat = graphViewProps.createHtTopoProps) === null || _graphViewProps$creat === void 0 ? void 0 : _graphViewProps$creat.editor) || {})
@@ -266,10 +274,10 @@ var Topology = function Topology(props) {
     onDestroy: onDestroy,
     onEvent: handleEvent,
     style: {
-      width: "100%",
-      height: "100%",
-      position: "relative",
-      overflow: "hidden"
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+      overflow: 'hidden'
     },
     debugId: topo.debugId
   }))), !isEditMode && /*#__PURE__*/React.createElement(ViewerPlugin, {
@@ -316,4 +324,5 @@ Topology.defaultProps = {
   topoContext: {} // titleBar: false,
 
 };
+Topology.displayName = 'Topology';
 export default Topology;

package/es/core/editor/components/BackgroundView/index.js

@@ -131,25 +131,25 @@ export default function BackgroundView(props) {
   }
 
   function _getBackground() {
-    _getBackground = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    _getBackground = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
       var res;
-      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              _context3.next = 2;
+              _context4.next = 2;
               return api.getBackgroundList();
 
             case 2:
-              res = _context3.sent;
+              res = _context4.sent;
               setBgList(res);
 
             case 4:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
         }
-      }, _callee3);
+      }, _callee4);
     }));
     return _getBackground.apply(this, arguments);
   }
@@ -160,34 +160,42 @@ export default function BackgroundView(props) {
 
 
   function _removeBg() {
-    _removeBg = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(id) {
+    _removeBg = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(id) {
       var res;
-      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
         while (1) {
-          switch (_context4.prev = _context4.next) {
+          switch (_context5.prev = _context5.next) {
             case 0:
-              _context4.next = 2;
+              _context5.next = 2;
               return api.deleteBackground(id);
 
             case 2:
-              res = _context4.sent;
+              res = _context5.sent;
 
-              // 删除当前选中
-              if (id === (current === null || current === void 0 ? void 0 : current.id)) {
-                reset();
-                setHtTopoBackground(null);
+              if (!(id === (current === null || current === void 0 ? void 0 : current.id))) {
+                _context5.next = 9;
+                break;
               }
 
+              topo.historyManager.setDisabled(true, '删除背景');
+              _context5.next = 7;
+              return reset();
+
+            case 7:
+              setHtTopoBackground(null);
+              topo.historyManager.setDisabled(false, '删除背景');
+
+            case 9:
               getBackground();
 
               _Message.success('删除成功');
 
-            case 6:
+            case 11:
             case "end":
-              return _context4.stop();
+              return _context5.stop();
           }
         }
-      }, _callee4);
+      }, _callee5);
     }));
     return _removeBg.apply(this, arguments);
   }
@@ -204,36 +212,43 @@ export default function BackgroundView(props) {
           switch (_context2.prev = _context2.next) {
             case 0:
               if (!(currentBg !== null && currentBg !== void 0 && currentBg.id && currentBg.id !== (current === null || current === void 0 ? void 0 : current.id))) {
-                _context2.next = 16;
+                _context2.next = 19;
                 break;
               }
 
               setLoadingBackground(true);
+              topo.historyManager.beginTransaction();
               imgUrl = getBackgroundImageUrl(currentBg);
-              _context2.prev = 3;
-              _context2.next = 6;
+              _context2.prev = 4;
+              _context2.next = 7;
               return getImageSize(imgUrl);
 
-            case 6:
+            case 7:
               size = _context2.sent;
               rlog.debug('获取图片大小', size);
-              setBackground(_extends({}, currentBg, size));
+              _context2.next = 11;
+              return setBackground(_extends({}, currentBg, size));
+
+            case 11:
               topo.getHtTopo().setBackgroundImgUrl(imgUrl, size.width, size.height);
-              setLoadingBackground(false);
-              _context2.next = 16;
+              _context2.next = 17;
               break;
 
-            case 13:
-              _context2.prev = 13;
-              _context2.t0 = _context2["catch"](3);
+            case 14:
+              _context2.prev = 14;
+              _context2.t0 = _context2["catch"](4);
+              rlog.error('设置背景失败', _context2.t0);
+
+            case 17:
+              topo.historyManager.endTransaction();
               setLoadingBackground(false);
 
-            case 16:
+            case 19:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[3, 13]]);
+      }, _callee2, null, [[4, 14]]);
     }));
 
     return function handleSelect(_x4) {
@@ -241,16 +256,40 @@ export default function BackgroundView(props) {
     };
   }();
 
+  var resetDefault = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              topo.historyManager.beginTransaction();
+              _context3.next = 3;
+              return reset();
+
+            case 3:
+              setHtTopoBackground(null);
+              topo.historyManager.endTransaction();
+
+            case 5:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function resetDefault() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
   return /*#__PURE__*/React.createElement("div", {
     className: styles['background-view']
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.option
   }, /*#__PURE__*/React.createElement(_Button, {
     title: "\u6062\u590D\u9ED8\u8BA4",
-    onClick: function onClick() {
-      reset();
-      setHtTopoBackground(null);
-    }
+    onClick: resetDefault
   }, /*#__PURE__*/React.createElement(_Icon, {
     type: "topo_button_icon_recovery"
   })), /*#__PURE__*/React.createElement("a", {

package/es/core/editor/components/settings/common/LineType/index.js

@@ -88,9 +88,15 @@ var LineType = function LineType(props) {
 
   var handleChange = function handleChange(data) {
     console.log("handleChange", data);
-    onChange && onChange(data.value);
+    topo.historyManager.beginTransaction();
+
+    if (onChange) {
+      onChange(data.value);
+    }
+
     setValue(data.value);
     setLineType(data.value);
+    topo.historyManager.endTransaction();
   };
 
   return /*#__PURE__*/React.createElement(_Box, {

package/es/core/editor/components/settings/common/text/FontStyleCheckbox.js

@@ -6,7 +6,7 @@ import styles from "./FontStyleCheckbox.module.scss";
 import b from "./img/bold.svg";
 import i from "./img/italics.svg";
 import u from "./img/underline.svg";
-export default function FontStyleCheckbox(props) {
+var FontStyleCheckbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var value = props.value,
       onChange = props.onChange;
   var options = [{
@@ -46,5 +46,5 @@ export default function FontStyleCheckbox(props) {
       alt: ""
     }));
   }));
-}
-;
+});
+export default FontStyleCheckbox;