@titaui/pc 1.11.52-beta.2 → 1.11.52-beta.5

package/lib/components/change-okr-modal/Item.js

@@ -198,14 +198,15 @@ var Item = /*#__PURE__*/function (_PureComponent) {
               isShowKr: isShowKr
             }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
               placement: "top",
-              overlay: htmlToText(item.mileStoneName)
+              overlay: (0, _openData.parseString)(htmlToText(item.mileStoneName))
             }, /*#__PURE__*/_react["default"].createElement(_styledComponents.OkrName, {
+              className: "okr-relate-modal__milestonename",
               isKr: true,
-              isShowKr: isShowKr,
-              dangerouslySetInnerHTML: {
-                __html: "KR".concat(index + 1, "\uFF1A").concat(item.mileStoneName)
-              }
-            }))));
+              isShowKr: isShowKr // dangerouslySetInnerHTML={{
+              //   __html: `KR${index + 1}：${parseString(item.mileStoneName)}`,
+              // }}
+
+            }, "KR".concat(index + 1, "\uFF1A"), (0, _openData.parseString)(item.mileStoneName)))));
           }
 
           if (active && item.mileStoneId === (active.workId || active.mileStoneId)) {
@@ -220,14 +221,15 @@ var Item = /*#__PURE__*/function (_PureComponent) {
               isShowKr: isShowKr
             }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
               placement: "top",
-              overlay: htmlToText(item.mileStoneName)
+              overlay: (0, _openData.parseString)(htmlToText(item.mileStoneName))
             }, /*#__PURE__*/_react["default"].createElement(_styledComponents.OkrName, {
+              className: "okr-relate-modal__milestonename",
               isKr: true,
-              isShowKr: isShowKr,
-              dangerouslySetInnerHTML: {
-                __html: "KR".concat(index + 1, "\uFF1A").concat(item.mileStoneName)
-              }
-            }))));
+              isShowKr: isShowKr // dangerouslySetInnerHTML={{
+              //   __html: KR${index + 1}：${parseString(item.mileStoneName)}`,
+              // }}
+
+            }, "KR".concat(index + 1, "\uFF1A"), (0, _openData.parseString)(item.mileStoneName)))));
           }
 
           return '';
@@ -282,14 +284,13 @@ var Item = /*#__PURE__*/function (_PureComponent) {
         isShowKr: isShowKr
       }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
         placement: "top",
-        overlay: htmlToText(okrData.workName)
+        overlay: (0, _openData.parseString)(htmlToText(okrData.workName))
       }, /*#__PURE__*/_react["default"].createElement(_styledComponents.OkrName, {
+        className: "okr-relate-modal__workname",
         isKr: false,
-        isShowKr: isShowKr,
-        dangerouslySetInnerHTML: {
-          __html: okrData.workName
-        }
-      }))), this.isObjectiveRelevanceKr && isShowKr && data.Krs.length > 0 && /*#__PURE__*/_react["default"].createElement("span", {
+        isShowKr: isShowKr // dangerouslySetInnerHTML={{ __html: parseString(okrData.workName) }}
+
+      }, (0, _openData.parseString)(okrData.workName)))), this.isObjectiveRelevanceKr && isShowKr && data.Krs.length > 0 && /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(isExpand ? 'tu-icon-arrow-up' : 'tu-icon-arrow-down')
       })), /*#__PURE__*/_react["default"].createElement(_styledComponents.ItemBottom, null, !isShowKr && [/*#__PURE__*/_react["default"].createElement("span", null, (0, _constant.getTypeMap)()[data.okrType]), /*#__PURE__*/_react["default"].createElement(_styledComponents.Separator, null)], /*#__PURE__*/_react["default"].createElement(_styledComponents.PricipleName, null, /*#__PURE__*/_react["default"].createElement(_openData.OpenUserName, {
         name: data.principalUser.name,

package/lib/components/change-okr-modal/styledComponents.js

@@ -14,7 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 589px;\n  height: 488px;\n  margin-top: ", ";\n  background: #ffffff;\n  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);\n  border-radius: 4px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n"])), function (p) {
-  return p.okrPopType === 1 ? 0 : "32px";
+  return p.okrPopType === 1 ? 0 : '32px';
 });
 
 exports.Wrapper = Wrapper;
@@ -59,7 +59,7 @@ var OptionItem = _styledComponents["default"].span(_templateObject11 || (_templa
 
 exports.OptionItem = OptionItem;
 
-var List = _styledComponents["default"].ul(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  /* overflow: auto; */\n  flex: 1;\n  max-height: 310px;\n  overflow-y: scroll;\n  &:empty::after {\n    content: '\\6682\\65e0\\6570\\636e';\n    display: block;\n    color: #c5c5c5;\n    border: dashed 1px #c5c5c5;\n    padding: 30px 25px;\n    border-radius: 3px;\n    text-align: center;\n    font-size: 22px;\n    line-height: 30px;\n    margin-top: 100px;\n  }\n"], ["\n  /* overflow: auto; */\n  flex: 1;\n  max-height: 310px;\n  overflow-y: scroll;\n  &:empty::after {\n    content: '\\\\6682\\\\65e0\\\\6570\\\\636e';\n    display: block;\n    color: #c5c5c5;\n    border: dashed 1px #c5c5c5;\n    padding: 30px 25px;\n    border-radius: 3px;\n    text-align: center;\n    font-size: 22px;\n    line-height: 30px;\n    margin-top: 100px;\n  }\n"])));
+var List = _styledComponents["default"].ul(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  /* overflow: auto; */\n  flex: 1;\n  max-height: 358px;\n  overflow-y: scroll;\n  &:empty::after {\n    content: '\\6682\\65e0\\6570\\636e';\n    display: block;\n    color: #c5c5c5;\n    border: dashed 1px #c5c5c5;\n    padding: 30px 25px;\n    border-radius: 3px;\n    text-align: center;\n    font-size: 22px;\n    line-height: 30px;\n    margin-top: 100px;\n  }\n"], ["\n  /* overflow: auto; */\n  flex: 1;\n  max-height: 358px;\n  overflow-y: scroll;\n  &:empty::after {\n    content: '\\\\6682\\\\65e0\\\\6570\\\\636e';\n    display: block;\n    color: #c5c5c5;\n    border: dashed 1px #c5c5c5;\n    padding: 30px 25px;\n    border-radius: 3px;\n    text-align: center;\n    font-size: 22px;\n    line-height: 30px;\n    margin-top: 100px;\n  }\n"])));
 
 exports.List = List;
 
@@ -80,15 +80,15 @@ var ItemTop = _styledComponents["default"].div(_templateObject16 || (_templateOb
 exports.ItemTop = ItemTop;
 
 var WorkNameWrapper = _styledComponents["default"].div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  flex: 1px;\n  white-space: nowrap;\n  overflow: hidden;\n  cursor: ", ";\n"])), function (p) {
-  return p.isKr ? "default" : "pointer";
+  return p.isKr ? 'default' : 'pointer';
 });
 
 exports.WorkNameWrapper = WorkNameWrapper;
 
 var Radio = _styledComponents["default"].a(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 15px;\n  width: 15px;\n  border: 1px solid ", ";\n  border-radius: 50%;\n  &::after {\n    content: '';\n    display: ", ";\n    width: 9px;\n    height: 9px;\n    border-radius: 50%;\n    background-color: #2879ff;\n  }\n"])), function (p) {
-  return p.active ? "#2879ff" : "#BFC3C7";
+  return p.active ? '#2879ff' : '#BFC3C7';
 }, function (p) {
-  return p.active ? "block" : "none";
+  return p.active ? 'block' : 'none';
 });
 
 exports.Radio = Radio;
@@ -102,7 +102,7 @@ var Tag = _styledComponents["default"].div(_templateObject19 || (_templateObject
 exports.Tag = Tag;
 
 var OkrName = _styledComponents["default"].span(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  display: inline-block\n  flex: 1;\n  max-width: 400px;\n  font-size: 13px;\n  font-weight: ", ";\n  color: #33383d;\n  white-space: nowrap;\n  overflow: hidden;\n  word-break: keep-all;\n  text-overflow: ellipsis;\n  line-height: 1;\n"])), function (p) {
-  return p.isShowKr ? "normal" : "600";
+  return p.isShowKr ? 'normal' : '600';
 });
 
 exports.OkrName = OkrName;
@@ -128,11 +128,11 @@ var ButtonGroup = _styledComponents["default"].div(_templateObject25 || (_templa
 exports.ButtonGroup = ButtonGroup;
 
 var Button = _styledComponents["default"].a(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  display: block;\n  min-width: 28px;\n  height: 27px;\n  padding: 0 15px;\n  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.21);\n  border-radius: 2px;\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-align: center;\n  white-space: nowrap;\n  line-height: 27px;\n  &:hover {\n    color: ", ";\n  }\n"])), function (p) {
-  return p.type !== "confirm" ? "#FAFBFC" : p.disabled ? "#E7EEF3" : "#2879FF";
+  return p.type !== 'confirm' ? '#FAFBFC' : p.disabled ? '#E7EEF3' : '#2879FF';
 }, function (p) {
-  return p.type !== "confirm" ? "#565E66" : "#FFF";
+  return p.type !== 'confirm' ? '#565E66' : '#FFF';
 }, function (p) {
-  return p.type !== "confirm" ? "#565E66" : "#FFF";
+  return p.type !== 'confirm' ? '#565E66' : '#FFF';
 });
 
 exports.Button = Button;

package/lib/components/create-okr-modal/createSuccessCmp.js

@@ -35,6 +35,8 @@ var _createSuccessShadow = _interopRequireDefault(require("./img/create-success-
 
 var _getLocale = require("../../utils/getLocale");
 
+var _openData = require("../../utils/open-data");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -66,6 +68,16 @@ var CreateSuccessCmp = function CreateSuccessCmp(_ref) {
       dontShowValue = _useState2[0],
       setDontShowValue = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      okrName = _useState4[0],
+      setOkrName = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      krNames = _useState6[0],
+      setKrNames = _useState6[1];
+
   var handleCloseModel = (0, _react.useCallback)(function () {
     onCloseModel && onCloseModel(dontShowValue);
   }, [dontShowValue, onCloseModel]);
@@ -87,7 +99,7 @@ var CreateSuccessCmp = function CreateSuccessCmp(_ref) {
 
     var height = shareContent.clientHeight; // 获取dom 高度
 
-    var canvas = document.createElement("canvas"); // 创建一个canvas节点
+    var canvas = document.createElement('canvas'); // 创建一个canvas节点
 
     var scale = 2; // 定义任意放大倍数 支持小数
 
@@ -116,17 +128,17 @@ var CreateSuccessCmp = function CreateSuccessCmp(_ref) {
 
     };
     (0, _html2canvas["default"])(downLoadRef.current, opts).then(function (canvas) {
-      var imgUrl = canvas.toDataURL("image/png"); // 得到图片的base64编码数据
+      var imgUrl = canvas.toDataURL('image/png'); // 得到图片的base64编码数据
 
       var image = new Image();
-      image.setAttribute("crossOrigin", "anonymous");
+      image.setAttribute('crossOrigin', 'anonymous');
 
       image.onload = function () {
-        var a = document.createElement("a"); // 生成一个a元素
+        var a = document.createElement('a'); // 生成一个a元素
 
-        var event = new MouseEvent("click"); // 创建一个单击事件
+        var event = new MouseEvent('click'); // 创建一个单击事件
 
-        a.download = (0, _getLocale.getLocale)("OKR_MyO_Share"); // 设置图片名称
+        a.download = (0, _getLocale.getLocale)('OKR_MyO_Share'); // 设置图片名称
 
         a.href = imgUrl; // 将生成的URL设置为a.href属性
 
@@ -135,6 +147,22 @@ var CreateSuccessCmp = function CreateSuccessCmp(_ref) {
 
       image.src = imgUrl;
     });
+  }, []);
+  (0, _react.useEffect)(function () {
+    (0, _openData.parseOpenDataStringToImg)(createdSuccessInfo.workName, {
+      fontSize: 14,
+      fontWeight: '600',
+      color: '141c28',
+      lineHeight: 22
+    }).then(setOkrName);
+    Promise.all(createdSuccessInfo.Krs.map(function (kr) {
+      return (0, _openData.parseOpenDataStringToImg)(kr.mileStoneName, {
+        fontSize: 12,
+        fontWeight: 'normal',
+        color: '3f4755',
+        lineHeight: 18
+      });
+    })).then(setKrNames);
   }, []); // console.log(createdSuccessInfo)
 
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -149,10 +177,10 @@ var CreateSuccessCmp = function CreateSuccessCmp(_ref) {
     className: "create-success-model__top-block"
   }, /*#__PURE__*/_react["default"].createElement("img", {
     src: _light["default"],
-    className: "create-success-model__light ".concat(isDownload ? "create-success-model--animation-unset" : "")
+    className: "create-success-model__light ".concat(isDownload ? 'create-success-model--animation-unset' : '')
   }), isDownload ? null : /*#__PURE__*/_react["default"].createElement("img", {
     src: _shower["default"],
-    className: "create-success-model__shower ".concat(isDownload ? "create-success-model--animation-unset" : "")
+    className: "create-success-model__shower ".concat(isDownload ? 'create-success-model--animation-unset' : '')
   }), /*#__PURE__*/_react["default"].createElement("img", {
     src: _createSuccessHead["default"],
     className: "create-success-model__create-head"
@@ -163,7 +191,7 @@ var CreateSuccessCmp = function CreateSuccessCmp(_ref) {
     className: "create-success-model__avatar"
   }, createdSuccessInfo.principalUser.avatar.hasAvatar ? /*#__PURE__*/_react["default"].createElement("img", {
     className: "create-success-model__img",
-    src: "".concat(createdSuccessInfo.userAvatarBase64Url ? "data:image/png;base64,".concat(createdSuccessInfo.userAvatarBase64Url) : "")
+    src: "".concat(createdSuccessInfo.userAvatarBase64Url ? "data:image/png;base64,".concat(createdSuccessInfo.userAvatarBase64Url) : '')
   }) : /*#__PURE__*/_react["default"].createElement("div", {
     className: "create-success-model__text-avatar",
     style: {
@@ -182,10 +210,10 @@ var CreateSuccessCmp = function CreateSuccessCmp(_ref) {
     src: _createSuccessRightQuotation["default"]
   })), /*#__PURE__*/_react["default"].createElement("div", {
     className: "create-success-model__congratulation"
-  }, (0, _getLocale.getLocale)("OKR_MyO_Pop_OKRscreated"), "\xA0\xA0", /*#__PURE__*/_react["default"].createElement("span", {
+  }, (0, _getLocale.getLocale)('OKR_MyO_Pop_OKRscreated'), "\xA0\xA0", /*#__PURE__*/_react["default"].createElement("span", {
     className: "create-success-model__percent"
-  }, createdSuccessInfo.countSurpassPercentage, "%"), "\xA0\xA0", (0, _getLocale.getLocale)("OKR_MyO_Pop_ofpeople")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "create-success-model__okr-info ".concat(isDownload ? "" : "create-success-model--fix-height")
+  }, createdSuccessInfo.countSurpassPercentage, "%"), "\xA0\xA0", (0, _getLocale.getLocale)('OKR_MyO_Pop_ofpeople')), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "create-success-model__okr-info ".concat(isDownload ? '' : 'create-success-model--fix-height')
   }, isDownload ? null : /*#__PURE__*/_react["default"].createElement("img", {
     className: "create-success-model__shadow-img",
     src: _createSuccessShadow["default"]
@@ -196,7 +224,7 @@ var CreateSuccessCmp = function CreateSuccessCmp(_ref) {
     className: "create-success-model__o-name-icon"
   }), /*#__PURE__*/_react["default"].createElement("span", {
     className: "create-success-model__o-name-text"
-  }, createdSuccessInfo.workName)), createdSuccessInfo.Krs.map(function (kr, index) {
+  }, okrName)), krNames.map(function (kr, index) {
     return (
       /*#__PURE__*/
       // if(!isDownload && index > 2) {
@@ -207,11 +235,11 @@ var CreateSuccessCmp = function CreateSuccessCmp(_ref) {
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: "create-success-model__dot"
       }), /*#__PURE__*/_react["default"].createElement("li", {
-        className: "create-success-model__kr ".concat(isDownload ? "create-success-model__kr--no-wrap" : "")
-      }, kr.mileStoneName))
+        className: "create-success-model__kr ".concat(isDownload ? 'create-success-model__kr--no-wrap' : '')
+      }, kr))
     );
   })), isDownload ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "create-success-model__qrcode ".concat(isDownload ? "create-success-model--hidden-box-shadow" : "")
+    className: "create-success-model__qrcode ".concat(isDownload ? 'create-success-model--hidden-box-shadow' : '')
   }, /*#__PURE__*/_react["default"].createElement("img", {
     src: _qrCode["default"],
     width: "275"
@@ -222,10 +250,10 @@ var CreateSuccessCmp = function CreateSuccessCmp(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "create-success-model__common-btn-style create-success-model__return-list",
     onClick: handleShowDetail
-  }, (0, _getLocale.getLocale)("Mod_Checkdetails")), /*#__PURE__*/_react["default"].createElement("span", {
+  }, (0, _getLocale.getLocale)('Mod_Checkdetails')), /*#__PURE__*/_react["default"].createElement("span", {
     className: "create-success-model__common-btn-style create-success-model__download-img",
     onClick: handleDownloadPic
-  }, (0, _getLocale.getLocale)("OKR_MyO_Popup_Download"))), /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _getLocale.getLocale)('OKR_MyO_Popup_Download'))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "create-success-model__checkbox-wrapper"
   }, /*#__PURE__*/_react["default"].createElement("input", {
     id: "dontShowCreateSucess",
@@ -236,7 +264,7 @@ var CreateSuccessCmp = function CreateSuccessCmp(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("label", {
     htmlFor: "dontShowCreateSucess",
     className: "create-success-model__label"
-  }, (0, _getLocale.getLocale)("OKR_MyO_Pop_Nomore"))))));
+  }, (0, _getLocale.getLocale)('OKR_MyO_Pop_Nomore'))))));
 };
 
 var _default = CreateSuccessCmp;

package/lib/components/create-okr-modal/fields/index.css

@@ -97,6 +97,7 @@
 .okr-o-new-name .okr-o-new-name__left-block {
   flex: 1;
   display: flex;
+  align-items: center;
   position: relative;
 }
 
@@ -133,6 +134,16 @@
   right: 8px;
 }
 
+.okr-o-new-name .okr-o-new-name__left-block .tita-rich-editor__inline-editor {
+  flex: 1;
+  width: 0;
+  margin-right: 8px;
+}
+
+.okr-o-new-name .okr-o-new-name__left-block .tita-rich-editor .ProseMirror > p {
+  font-weight: 600;
+}
+
 .user-info {
   font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
   display: flex;
@@ -177,7 +188,7 @@
 }
 
 .error-popup-text-wrapper::after {
-  content: "";
+  content: '';
   display: block;
   border: 6px solid transparent;
   position: absolute;
@@ -223,7 +234,7 @@
 }
 
 .okr-create-suggest .okr-create-suggest__triangle::after {
-  content: "";
+  content: '';
   display: block;
   border: 8px solid #fffffd;
   border-top: 8px solid transparent;
@@ -235,7 +246,7 @@
 }
 
 .okr-create-suggest .okr-create-suggest__triangle::before {
-  content: "";
+  content: '';
   display: block;
   border: 8px solid #f6bd16;
   border-top: 8px solid transparent;

package/lib/components/create-okr-modal/fields/o-new-name.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _richEditor = require("@titaui/rich-editor");
+
 var _toast = _interopRequireDefault(require("../../toast"));
 
 var _constant = require("../constant");
@@ -53,8 +55,8 @@ var initOCheckResult = function initOCheckResult() {
 };
 
 function ONewName(_ref) {
-  var okrName = _ref.okrName,
-      setOkrName = _ref.setOkrName,
+  var okrNameData = _ref.okrNameData,
+      setOkrNameData = _ref.setOkrNameData,
       container = _ref.container,
       user = _ref.user,
       setUser = _ref.setUser,
@@ -63,9 +65,10 @@ function ONewName(_ref) {
       _ref$setIsInputConten = _ref.setIsInputContent,
       setIsInputContent = _ref$setIsInputConten === void 0 ? function () {} : _ref$setIsInputConten;
   var oCheckId = 0;
+  var mentionInputRef = (0, _react.useRef)();
   var timerRef = (0, _react.useRef)();
-  var okrNameIsEmpty = (0, _react.useRef)(!okrName);
-  var oldONameRef = (0, _react.useRef)("");
+  var okrNameIsEmpty = (0, _react.useRef)(!okrNameData.pureText);
+  var oldONameRef = (0, _react.useRef)('');
   var formatUser = (0, _react.useMemo)(function () {
     var medium = user.avatar && (user.avatar.Medium || user.avatar.medium);
     var color = user.avatar && (user.avatar.Color || user.avatar.color);
@@ -99,7 +102,7 @@ function ONewName(_ref) {
     var tempCheckId = oCheckId; // @ts-ignore
 
     return (0, _requestApi.getOAnalysisInfos)({
-      text: okrName
+      text: okrNameData.pureTextExcludeAt
     }) // @ts-ignore
     .then(function (data) {
       if (tempCheckId !== oCheckId) {
@@ -132,12 +135,18 @@ function ONewName(_ref) {
     })["finally"](function () {
       setIsInputContent(false);
     });
-  }, [okrName, setIsInputContent]);
+  }, [okrNameData, setIsInputContent]);
+
+  var onChangeHandler = function onChangeHandler(data) {
+    setOkrNameData(data);
+    setIsInputContent(true);
+  };
+
   (0, _react.useEffect)(function () {
     // 防抖
-    okrNameIsEmpty.current = !okrName;
+    okrNameIsEmpty.current = !okrNameData.pureText;
 
-    if (!okrName) {
+    if (!okrNameData.pureText) {
       setONameCheckResult(initOCheckResult());
       setIsInputContent(false);
     } else if (timerRef.current) {
@@ -150,7 +159,7 @@ function ONewName(_ref) {
     return function () {
       clearTimeout(timerRef.current);
     };
-  }, [okrName]);
+  }, [okrNameData]);
   var handleInputFocus = (0, _react.useCallback)(function () {
     if (onOInputFocusStateChange) {
       onOInputFocusStateChange(true);
@@ -180,21 +189,18 @@ function ONewName(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "left-block__title"
   }, "O"), /*#__PURE__*/_react["default"].createElement(_inputWithErrPopup["default"], {
-    strLength: okrName.length,
+    strLength: okrNameData.pureText.length,
     maxLength: 500,
     position: "top"
-  }, /*#__PURE__*/_react["default"].createElement("input", {
+  }, /*#__PURE__*/_react["default"].createElement(_richEditor.TitaInlineRichEditor, {
+    initialState: okrNameData.richText,
+    onChange: onChangeHandler,
     onFocus: handleInputFocus,
     onBlur: handleInputBlur,
-    className: "left-block__input",
-    placeholder: (0, _getLocale.getLocale)("OKR_MyO_Pop_PleInspObjective"),
-    type: "text",
-    value: okrName,
-    onChange: function onChange(e) {
-      return setOkrName(e.target.value);
-    },
     onKeyDown: handleOnKeyDown,
-    onKeyUp: handleOnKeyUp
+    onKeyUp: handleOnKeyUp,
+    placeholder: (0, _getLocale.getLocale)('OKR_MyO_Pop_PleInspObjective'),
+    ref: mentionInputRef
   })), /*#__PURE__*/_react["default"].createElement("div", {
     className: "left-block__right-text-mask"
   })), /*#__PURE__*/_react["default"].createElement(_okrNewUserSelector["default"], {