build: 添加QASimpleEditor、修正PriceInput部分逻辑

eslib/BraftEditor/index.d.ts

 /// <reference types="react" />
 import { ControlType, EditorState } from "braft-editor";
-declare const BarftEditorPage: ({ initValue, value, onChange, controls, FloatControls }: {
-    initValue?: string | undefined;
-    value?: EditorState | undefined;
-    onChange?: ((editorState: EditorState) => void) | undefined;
-    controls?: ControlType[] | undefined;
+interface BaseEditorProps {
+    value: EditorState;
+    onChange: (editorState: EditorState) => void;
+    controls?: ControlType[];
     FloatControls?: any;
-}) => JSX.Element;
-export { BarftEditorPage as default, BarftEditorPage };
+}
+declare const BarftEditorPage: ({ value, onChange, controls, FloatControls }: BaseEditorProps) => JSX.Element;
+export { BarftEditorPage as default, BarftEditorPage, BaseEditorProps };

eslib/BraftEditor/index.js

 var BarftEditorPage = function BarftEditorPage(_ref) {
   var _classnames2;
 
-  var initValue = _ref.initValue,
-      value = _ref.value,
+  var value = _ref.value,
       onChange = _ref.onChange,
       controls = _ref.controls,
       FloatControls = _ref.FloatControls;
   var optionsControls = controls ? controls : ["bold", "italic", "underline", "separator", "link", "emoji", "separator", "media"];
   var options = {
     controls: optionsControls,
-    uncontrolled: !value && !onChange,
     showControlsBar: optionsControls && optionsControls.length > 0 && !FloatControls,
     showFloatControls: FloatControls
   };
 
-  var _useState = useState(BraftEditor.createEditorState(initValue || "<p>Hello <b>World!</b></p>")),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      insideValue = _useState2[0],
-      setInsideValue = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      focusState = _useState4[0],
-      setFocusState = _useState4[1];
-
-  var resultValue;
-  var resultAction;
-
-  if (options.uncontrolled) {
-    resultValue = insideValue;
-    resultAction = setInsideValue;
-  } else {
-    resultValue = value;
-    resultAction = onChange;
-  }
+      focusState = _useState2[0],
+      setFocusState = _useState2[1];
 
   return React.createElement("div", {
     className: styles.baseWrapper
   }, React.createElement(BraftEditor, {
-    value: resultValue,
-    onChange: resultAction,
+    value: value,
+    onChange: onChange,
     controls: options.controls,
     controlBarClassName: classnames(styles.controlBar, _defineProperty$1({}, styles.focus, focusState)),
     controlBarStyle: options.showControlsBar ? {} : {
   }), options.showFloatControls ? React.createElement("div", {
     className: classnames(styles.floatControls)
   }, React.createElement(FloatControls, {
-    editorState: resultValue,
-    setEditorState: resultAction
+    editorState: value,
+    setEditorState: onChange
   })) : null);
 };
 

eslib/Editor/index.d.ts

+/// <reference types="react" />
+import { BaseEditorProps } from "../BraftEditor/index";
+import React from "react";
+interface ToolListItem {
+    key: any;
+    color: string;
+    iconClass: string;
+    onClick: any;
+    text?: string;
+    render?: (i: ToolListItem, innerIcon: any, innerText: any, divWrapStyle: React.CSSProperties | undefined) => any;
+}
+interface QASimpleEditorProps extends BaseEditorProps {
+    toolAlign?: "inner" | "bottom";
+    toolList?: Array<ToolListItem>;
+    injectControlsToolBar?: any;
+    toolBarContainerStyle?: any;
+    appendToolBtn?: any;
+}
+declare const QASimpleEditor: (props: QASimpleEditorProps) => JSX.Element;
 export { default as BraftEditor } from "../BraftEditor/index";
+export { QASimpleEditor };

eslib/Editor/index.js

-import 'react';
+import React from 'react';
 import 'react-dom';
-import '../style-inject.es-1f59c1d0.js';
-import '../defineProperty-18999f8e.js';
+import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
+import { _ as _defineProperty } from '../defineProperty-18999f8e.js';
 import '../index-b8d80d39.js';
 import '../slicedToArray-4cd9e6d3.js';
+import { BarftEditorPage } from '../BraftEditor/index.js';
 export { default as BraftEditor } from '../BraftEditor/index.js';
 import 'react-dom/server';
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+var ControlsToolBar = function ControlsToolBar(props) {
+  var editorState = props.editorState,
+      setEditorState = props.setEditorState,
+      _props$toolList = props.toolList,
+      toolList = _props$toolList === void 0 ? [] : _props$toolList,
+      _props$injectIconWrap = props.injectIconWrapStyle,
+      injectIconWrapStyle = _props$injectIconWrap === void 0 ? {} : _props$injectIconWrap,
+      _props$injectIconStyl = props.injectIconStyle,
+      injectIconStyle = _props$injectIconStyl === void 0 ? {} : _props$injectIconStyl,
+      _props$injectIconText = props.injectIconTextStyle,
+      injectIconTextStyle = _props$injectIconText === void 0 ? {} : _props$injectIconText;
+
+  var IconWrapStyle = _objectSpread({
+    display: 'flex',
+    alignItems: 'center',
+    cursor: "pointer",
+    textAlign: "center",
+    minWidth: "42px"
+  }, injectIconWrapStyle);
+
+  var IconStyle = _objectSpread({
+    fontSize: "21px"
+  }, injectIconStyle);
+
+  var IconTextStyle = _objectSpread({
+    margin: "0 4px"
+  }, injectIconTextStyle);
+
+  if (toolList.length < 1) {
+    return null;
+  }
+
+  return React.createElement(React.Fragment, null, toolList.map(function (i) {
+    var innerIcon = React.createElement("i", {
+      className: i.iconClass,
+      style: IconStyle
+    });
+    var innerText = i.text ? React.createElement("span", {
+      style: IconTextStyle
+    }, i.text) : null;
+
+    var divWrapStyle = _objectSpread({
+      color: i.color
+    }, IconWrapStyle);
+
+    var wrapperDom = React.createElement("div", {
+      key: "toolList_".concat(i.key),
+      style: divWrapStyle,
+      onClick: i.onClick
+    }, innerIcon, innerText);
+
+    if (i.render) {
+      return i.render(i, innerIcon, innerText, divWrapStyle);
+    }
+
+    return wrapperDom;
+  }));
+};
+
+var css = ".index_bottomToolBarWrapper__3mYXO {\n  display: flex;\n}\n";
+var styles = {
+  "bottomToolBarWrapper": "index_bottomToolBarWrapper__3mYXO"
+};
+styleInject(css);
+
+var QASimpleEditor = function QASimpleEditor(props) {
+  var value = props.value,
+      onChange = props.onChange,
+      _props$toolAlign = props.toolAlign,
+      toolAlign = _props$toolAlign === void 0 ? 'inner' : _props$toolAlign,
+      _props$toolList = props.toolList,
+      toolList = _props$toolList === void 0 ? [] : _props$toolList,
+      _props$injectControls = props.injectControlsToolBar,
+      injectControlsToolBar = _props$injectControls === void 0 ? {} : _props$injectControls,
+      _props$toolBarContain = props.toolBarContainerStyle,
+      toolBarContainerStyle = _props$toolBarContain === void 0 ? {} : _props$toolBarContain,
+      _props$appendToolBtn = props.appendToolBtn,
+      appendToolBtn = _props$appendToolBtn === void 0 ? null : _props$appendToolBtn;
+
+  if (toolAlign === 'inner') {
+    return React.createElement(BarftEditorPage, {
+      value: value,
+      onChange: onChange,
+      controls: [],
+      FloatControls: function FloatControls(_ref) {
+        var editorState = _ref.editorState,
+            setEditorState = _ref.setEditorState;
+        return React.createElement(ControlsToolBar, {
+          editorState: editorState,
+          setEditorState: setEditorState,
+          toolList: toolList
+        });
+      }
+    });
+  }
+
+  return React.createElement("div", null, React.createElement(BarftEditorPage, {
+    value: value,
+    onChange: onChange,
+    controls: []
+  }), React.createElement("div", {
+    style: toolBarContainerStyle
+  }, React.createElement("div", {
+    className: styles.bottomToolBarWrapper
+  }, React.createElement(ControlsToolBar, Object.assign({
+    editorState: value,
+    setEditorState: onChange,
+    toolList: toolList
+  }, injectControlsToolBar))), appendToolBtn));
+};
+
+export { QASimpleEditor };
 //# sourceMappingURL=index.js.map

eslib/PriceOptions/index.js

   }, defaultOptions.map(function (item) {
     var _objectSpread3;
 
+    var isActive = price === item && !inputStatus;
     return React.createElement("span", {
-      className: classnames(_objectSpread((_objectSpread3 = {}, _defineProperty(_objectSpread3, styles.priceItem, true), _defineProperty(_objectSpread3, styles.active, price === item && !inputStatus), _objectSpread3), injectOptions.priceBtnClass(price === item && !inputStatus))),
+      className: classnames(_objectSpread((_objectSpread3 = {}, _defineProperty(_objectSpread3, styles.priceItem, true), _defineProperty(_objectSpread3, styles.active, !injectOptions.priceBtnClass(isActive) && isActive), _objectSpread3), injectOptions.priceBtnClass(isActive))),
       key: item,
       onClick: function onClick() {
         onPriceChange(item);

lib/BraftEditor/index.d.ts

 /// <reference types="react" />
 import { ControlType, EditorState } from "braft-editor";
-declare const BarftEditorPage: ({ initValue, value, onChange, controls, FloatControls }: {
-    initValue?: string | undefined;
-    value?: EditorState | undefined;
-    onChange?: ((editorState: EditorState) => void) | undefined;
-    controls?: ControlType[] | undefined;
+interface BaseEditorProps {
+    value: EditorState;
+    onChange: (editorState: EditorState) => void;
+    controls?: ControlType[];
     FloatControls?: any;
-}) => JSX.Element;
-export { BarftEditorPage as default, BarftEditorPage };
+}
+declare const BarftEditorPage: ({ value, onChange, controls, FloatControls }: BaseEditorProps) => JSX.Element;
+export { BarftEditorPage as default, BarftEditorPage, BaseEditorProps };

lib/BraftEditor/index.js

 var BarftEditorPage = function BarftEditorPage(_ref) {
   var _classnames2;
 
-  var initValue = _ref.initValue,
-      value = _ref.value,
+  var value = _ref.value,
       onChange = _ref.onChange,
       controls = _ref.controls,
       FloatControls = _ref.FloatControls;
   var optionsControls = controls ? controls : ["bold", "italic", "underline", "separator", "link", "emoji", "separator", "media"];
   var options = {
     controls: optionsControls,
-    uncontrolled: !value && !onChange,
     showControlsBar: optionsControls && optionsControls.length > 0 && !FloatControls,
     showFloatControls: FloatControls
   };
 
-  var _useState = React.useState(BraftEditor.createEditorState(initValue || "<p>Hello <b>World!</b></p>")),
+  var _useState = React.useState(false),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
-      insideValue = _useState2[0],
-      setInsideValue = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-      focusState = _useState4[0],
-      setFocusState = _useState4[1];
-
-  var resultValue;
-  var resultAction;
-
-  if (options.uncontrolled) {
-    resultValue = insideValue;
-    resultAction = setInsideValue;
-  } else {
-    resultValue = value;
-    resultAction = onChange;
-  }
+      focusState = _useState2[0],
+      setFocusState = _useState2[1];
 
   return React__default.createElement("div", {
     className: styles.baseWrapper
   }, React__default.createElement(BraftEditor, {
-    value: resultValue,
-    onChange: resultAction,
+    value: value,
+    onChange: onChange,
     controls: options.controls,
     controlBarClassName: index.classnames(styles.controlBar, defineProperty._defineProperty({}, styles.focus, focusState)),
     controlBarStyle: options.showControlsBar ? {} : {
   }), options.showFloatControls ? React__default.createElement("div", {
     className: index.classnames(styles.floatControls)
   }, React__default.createElement(FloatControls, {
-    editorState: resultValue,
-    setEditorState: resultAction
+    editorState: value,
+    setEditorState: onChange
   })) : null);
 };
 

lib/Editor/index.d.ts

+/// <reference types="react" />
+import { BaseEditorProps } from "../BraftEditor/index";
+import React from "react";
+interface ToolListItem {
+    key: any;
+    color: string;
+    iconClass: string;
+    onClick: any;
+    text?: string;
+    render?: (i: ToolListItem, innerIcon: any, innerText: any, divWrapStyle: React.CSSProperties | undefined) => any;
+}
+interface QASimpleEditorProps extends BaseEditorProps {
+    toolAlign?: "inner" | "bottom";
+    toolList?: Array<ToolListItem>;
+    injectControlsToolBar?: any;
+    toolBarContainerStyle?: any;
+    appendToolBtn?: any;
+}
+declare const QASimpleEditor: (props: QASimpleEditorProps) => JSX.Element;
 export { default as BraftEditor } from "../BraftEditor/index";
+export { QASimpleEditor };

lib/Editor/index.js

 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('react');
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
 require('react-dom');
-require('../style-inject.es-dcee06b6.js');
-require('../defineProperty-ba7cd53d.js');
+var styleInject_es = require('../style-inject.es-dcee06b6.js');
+var defineProperty = require('../defineProperty-ba7cd53d.js');
 require('../index-1143667e.js');
 require('../slicedToArray-172f4624.js');
 var BraftEditor = require('../BraftEditor/index.js');
 require('react-dom/server');
 
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        defineProperty._defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+var ControlsToolBar = function ControlsToolBar(props) {
+  var editorState = props.editorState,
+      setEditorState = props.setEditorState,
+      _props$toolList = props.toolList,
+      toolList = _props$toolList === void 0 ? [] : _props$toolList,
+      _props$injectIconWrap = props.injectIconWrapStyle,
+      injectIconWrapStyle = _props$injectIconWrap === void 0 ? {} : _props$injectIconWrap,
+      _props$injectIconStyl = props.injectIconStyle,
+      injectIconStyle = _props$injectIconStyl === void 0 ? {} : _props$injectIconStyl,
+      _props$injectIconText = props.injectIconTextStyle,
+      injectIconTextStyle = _props$injectIconText === void 0 ? {} : _props$injectIconText;
+
+  var IconWrapStyle = _objectSpread({
+    display: 'flex',
+    alignItems: 'center',
+    cursor: "pointer",
+    textAlign: "center",
+    minWidth: "42px"
+  }, injectIconWrapStyle);
+
+  var IconStyle = _objectSpread({
+    fontSize: "21px"
+  }, injectIconStyle);
+
+  var IconTextStyle = _objectSpread({
+    margin: "0 4px"
+  }, injectIconTextStyle);
+
+  if (toolList.length < 1) {
+    return null;
+  }
+
+  return React__default.createElement(React__default.Fragment, null, toolList.map(function (i) {
+    var innerIcon = React__default.createElement("i", {
+      className: i.iconClass,
+      style: IconStyle
+    });
+    var innerText = i.text ? React__default.createElement("span", {
+      style: IconTextStyle
+    }, i.text) : null;
+
+    var divWrapStyle = _objectSpread({
+      color: i.color
+    }, IconWrapStyle);
+
+    var wrapperDom = React__default.createElement("div", {
+      key: "toolList_".concat(i.key),
+      style: divWrapStyle,
+      onClick: i.onClick
+    }, innerIcon, innerText);
+
+    if (i.render) {
+      return i.render(i, innerIcon, innerText, divWrapStyle);
+    }
+
+    return wrapperDom;
+  }));
+};
+
+var css = ".index_bottomToolBarWrapper__3mYXO {\n  display: flex;\n}\n";
+var styles = {
+  "bottomToolBarWrapper": "index_bottomToolBarWrapper__3mYXO"
+};
+styleInject_es.styleInject(css);
+
+var QASimpleEditor = function QASimpleEditor(props) {
+  var value = props.value,
+      onChange = props.onChange,
+      _props$toolAlign = props.toolAlign,
+      toolAlign = _props$toolAlign === void 0 ? 'inner' : _props$toolAlign,
+      _props$toolList = props.toolList,
+      toolList = _props$toolList === void 0 ? [] : _props$toolList,
+      _props$injectControls = props.injectControlsToolBar,
+      injectControlsToolBar = _props$injectControls === void 0 ? {} : _props$injectControls,
+      _props$toolBarContain = props.toolBarContainerStyle,
+      toolBarContainerStyle = _props$toolBarContain === void 0 ? {} : _props$toolBarContain,
+      _props$appendToolBtn = props.appendToolBtn,
+      appendToolBtn = _props$appendToolBtn === void 0 ? null : _props$appendToolBtn;
+
+  if (toolAlign === 'inner') {
+    return React__default.createElement(BraftEditor.BarftEditorPage, {
+      value: value,
+      onChange: onChange,
+      controls: [],
+      FloatControls: function FloatControls(_ref) {
+        var editorState = _ref.editorState,
+            setEditorState = _ref.setEditorState;
+        return React__default.createElement(ControlsToolBar, {
+          editorState: editorState,
+          setEditorState: setEditorState,
+          toolList: toolList
+        });
+      }
+    });
+  }
 
+  return React__default.createElement("div", null, React__default.createElement(BraftEditor.BarftEditorPage, {
+    value: value,
+    onChange: onChange,
+    controls: []
+  }), React__default.createElement("div", {
+    style: toolBarContainerStyle
+  }, React__default.createElement("div", {
+    className: styles.bottomToolBarWrapper
+  }, React__default.createElement(ControlsToolBar, Object.assign({
+    editorState: value,
+    setEditorState: onChange,
+    toolList: toolList
+  }, injectControlsToolBar))), appendToolBtn));
+};
 
 exports.BraftEditor = BraftEditor.default;
+exports.QASimpleEditor = QASimpleEditor;
 //# sourceMappingURL=index.js.map

lib/PriceOptions/index.js

   }, defaultOptions.map(function (item) {
     var _objectSpread3;
 
+    var isActive = price === item && !inputStatus;
     return React__default.createElement("span", {
-      className: index.classnames(_objectSpread((_objectSpread3 = {}, defineProperty._defineProperty(_objectSpread3, styles.priceItem, true), defineProperty._defineProperty(_objectSpread3, styles.active, price === item && !inputStatus), _objectSpread3), injectOptions.priceBtnClass(price === item && !inputStatus))),
+      className: index.classnames(_objectSpread((_objectSpread3 = {}, defineProperty._defineProperty(_objectSpread3, styles.priceItem, true), defineProperty._defineProperty(_objectSpread3, styles.active, !injectOptions.priceBtnClass(isActive) && isActive), _objectSpread3), injectOptions.priceBtnClass(isActive))),
       key: item,
       onClick: function onClick() {
         onPriceChange(item);

src/components/Editor/CommonTool/ControlsToolBar.tsx

 import React from "react";
 import { EditorState } from "braft-editor";
+import { render } from '@testing-library/react';
 
 export interface ToolListItem {
   key: any;
   iconClass: string;
   onClick: any;
   text?: string;
+  render?: (i: ToolListItem, innerIcon: any, innerText: any, divWrapStyle: React.CSSProperties | undefined) => any;
 };
 interface ControlsToolBarProps {
   editorState: EditorState;
   return (
     <>
     {
-      toolList.map(i => (
-        <div
-          key={`toolList_${i.key}`}
-          style={{ color: i.color, ...IconWrapStyle }}
-          onClick={i.onClick}
-        >
-          <i className={i.iconClass} style={IconStyle} />
-          {
-            i.text ? <span style={IconTextStyle}>{i.text}</span> : null
-          }
-        </div>
-      ))
+      toolList.map(i => {
+        const innerIcon = <i className={i.iconClass} style={IconStyle} />;
+        const innerText = i.text ? <span style={IconTextStyle}>{i.text}</span> : null;
+        const divWrapStyle = { color: i.color, ...IconWrapStyle };
+        const wrapperDom = (
+          <div
+            key={`toolList_${i.key}`}
+            style={divWrapStyle}
+            onClick={i.onClick}
+          >
+            {innerIcon}
+            {innerText}
+          </div>
+        );
+
+        if (i.render) {
+          return i.render(i, innerIcon, innerText, divWrapStyle);
+        }
+
+        return wrapperDom;
+      })
     }
     </>
   );

src/components/Editor/CommonTool/TopicPop.tsx

+import React from 'react';
+
+interface TopicPopProps {
+
+}
+
+const TopicPop = (props: TopicPopProps) => {
+  
+}

src/components/Editor/index.ts

-export { default as BraftEditor } from './BraftEditor';
+export { default as BraftEditor } from './BraftEditor';
+export { default as QASimpleEditor } from './QAEditor/SimpleEditor';

src/components/Payment/PriceOptions/index.tsx

       {withTitle ? (titleText || null) : null}
       <div className={styles.infoItem}>
         <span className={styles.priceBtn}>
-          {defaultOptions.map(item => (
-            <span
-              className={classnames({
-                [styles.priceItem]: true,
-                [styles.active]: price === item && !inputStatus,
-                ...injectOptions.priceBtnClass(price === item && !inputStatus),
-              })}
-              key={item}
-              onClick={() => {
-                onPriceChange(item);
-                setInputStatus(false);
-              }}
-            >
-              {priceRender(item)}
-            </span>
-          ))}
+          {defaultOptions.map(item => {
+            const isActive = price === item && !inputStatus;
+            return (
+              <span
+                className={classnames({
+                  [styles.priceItem]: true,
+                  [styles.active]: !injectOptions.priceBtnClass(isActive) && isActive,
+                  ...injectOptions.priceBtnClass(isActive),
+                })}
+                key={item}
+                onClick={() => {
+                  onPriceChange(item);
+                  setInputStatus(false);
+                }}
+              >
+                {priceRender(item)}
+              </span>
+              );
+          })}
         </span>
         <Input
           ref={inputRef}

stories/Editor.stories.tsx

                 setEditorState(
                   ContentUtils.insertText(editorState, "Hello World")
                 );
-              }
+              },
             },
             {
               key: 2,
                 setEditorState(
                   ContentUtils.insertText(editorState, "Hello World")
                 );
-              }
+              },
+              render: (i, icon, text, style) => {
+                return (
+                  <Popover
+                    trigger="click"
+                    content="123"
+                  >
+                    <div style={style}>
+                      {icon}
+                      {text}
+                    </div>
+                  </Popover>
+                )
+              },
             },
             {
               key: 4,