fix：修改逻辑，保证state修改时不影响tooltip渲染

eslib/BraftEditor/index.d.ts

@@ -6,12 +6,16 @@ interface BaseEditorProps {
     onChange: (editorState: EditorState) => void;
     contentStyle?: React.CSSProperties;
     controls?: ControlType[];
-    FloatControls?: any;
     blockRenderMap?: any;
     blockRendererFn?: any;
+    onDelete?: Function;
+    onSave?: Function;
+    onTab?: Function;
+    onFocus?: Function;
+    onBlur?: Function;
     draftProps?: any;
     placeholder?: string;
     converts?: any;
 }
-declare const BarftEditorPage: ({ value, onChange, controls, contentStyle, FloatControls, draftProps, placeholder, blockRenderMap, blockRendererFn, converts, }: BaseEditorProps) => JSX.Element;
+declare const BarftEditorPage: ({ value, onChange, controls, contentStyle, draftProps, placeholder, blockRenderMap, blockRendererFn, onDelete, onSave, onTab, onFocus, onBlur, converts, }: BaseEditorProps) => JSX.Element;
 export { BarftEditorPage as default, BarftEditorPage, BaseEditorProps };

eslib/BraftEditor/index.js

@@ -9,13 +9,12 @@ import 'braft-extensions/dist/emoticon.css';
 import Emoticon, { defaultEmoticons } from 'braft-extensions/dist/emoticon';
 import MaxLength from 'braft-extensions/dist/max-length';
 
-var css = ".index_baseWrapper__1_-58 {\n  position: relative;\n}\n.index_baseWrapper__1_-58 .bf-container {\n  display: flex;\n  flex-direction: column;\n}\n.index_baseWrapper__1_-58 .bf-container .index_controlBar__3SzSH {\n  box-shadow: none;\n}\n.index_baseWrapper__1_-58 .bf-container .index_editorContent__2UOaX {\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  height: auto;\n  transition: border-color 0.3s;\n}\n.index_baseWrapper__1_-58 .bf-container .index_editorContent__2UOaX.index_focus__puDJA {\n  border-color: #1790ff;\n}\n.index_baseWrapper__1_-58 .index_floatControls__2hVPf {\n  position: absolute;\n  right: 15px;\n  bottom: 15px;\n  display: flex;\n  z-index: 2;\n}\n";
+var css = ".index_baseWrapper__1_-58 {\n  position: relative;\n}\n.index_baseWrapper__1_-58 .bf-container {\n  display: flex;\n  flex-direction: column;\n}\n.index_baseWrapper__1_-58 .bf-container .index_controlBar__3SzSH {\n  box-shadow: none;\n}\n.index_baseWrapper__1_-58 .bf-container .index_editorContent__2UOaX {\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  height: auto;\n  transition: border-color 0.3s;\n}\n.index_baseWrapper__1_-58 .bf-container .index_editorContent__2UOaX.index_focus__puDJA {\n  border-color: #1790ff;\n}\n";
 var styles = {
   "baseWrapper": "index_baseWrapper__1_-58",
   "controlBar": "index_controlBar__3SzSH",
   "editorContent": "index_editorContent__2UOaX",
-  "focus": "index_focus__puDJA",
-  "floatControls": "index_floatControls__2hVPf"
+  "focus": "index_focus__puDJA"
 };
 styleInject(css);
 
@@ -33,24 +32,25 @@ var emotionOptions = {
 };
 BraftEditor.use(Emoticon(emotionOptions));
 var BarftEditorPage = function BarftEditorPage(_ref) {
-  var _classnames2;
-
   var value = _ref.value,
       onChange = _ref.onChange,
       controls = _ref.controls,
       _ref$contentStyle = _ref.contentStyle,
       contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
-      FloatControls = _ref.FloatControls,
       draftProps = _ref.draftProps,
       placeholder = _ref.placeholder,
       blockRenderMap = _ref.blockRenderMap,
       blockRendererFn = _ref.blockRendererFn,
+      onDelete = _ref.onDelete,
+      onSave = _ref.onSave,
+      onTab = _ref.onTab,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
       converts = _ref.converts;
   var optionsControls = controls ? controls : ["bold", "italic", "underline", "separator", "link", "emoji", "separator", "media"];
   var options = {
     controls: optionsControls,
-    showControlsBar: optionsControls && optionsControls.length > 0 && !FloatControls,
-    showFloatControls: FloatControls
+    showControlsBar: optionsControls && optionsControls.length > 0
   };
 
   var _useState = useState(false),
@@ -68,7 +68,7 @@ var BarftEditorPage = function BarftEditorPage(_ref) {
     controlBarStyle: options.showControlsBar ? {} : {
       display: "none"
     },
-    contentClassName: classnames(styles.editorContent, (_classnames2 = {}, _defineProperty(_classnames2, styles.focus, focusState), _defineProperty(_classnames2, styles.hasFloatControls, options.showFloatControls), _classnames2)),
+    contentClassName: classnames(styles.editorContent, _defineProperty({}, styles.focus, focusState)),
     contentStyle: contentStyle,
     onFocus: function onFocus() {
       return setFocusState(true);
@@ -92,13 +92,13 @@ var BarftEditorPage = function BarftEditorPage(_ref) {
     blockRendererFn: blockRendererFn,
     converts: converts,
     placeholder: placeholder,
-    draftProps: draftProps
-  })), options.showFloatControls ? React.createElement("div", {
-    className: classnames(styles.floatControls)
-  }, React.createElement(FloatControls, {
-    editorState: value,
-    setEditorState: onChange
-  })) : null);
+    draftProps: draftProps,
+    onDelete: onDelete,
+    onSave: onSave,
+    onTab: onTab,
+    onFocus: onFocus,
+    onBlur: onBlur
+  })));
 };
 
 export default BarftEditorPage;

eslib/Editor/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
 import { _ as _defineProperty } from '../defineProperty-18999f8e.js';
-import '../index-e3cf212a.js';
+import { c as classnames } from '../index-e3cf212a.js';
 import '../slicedToArray-4cd9e6d3.js';
 import 'braft-editor';
 import { BarftEditorPage } from '../BraftEditor/index.js';
@@ -104,9 +104,11 @@ var ControlsToolBar = function ControlsToolBar(props) {
   }));
 };
 
-var css = ".index_bottomToolBarWrapper__DzhzC {\n  display: flex;\n}\n";
+var css = ".index_bottomToolBarWrapper__DzhzC {\n  display: flex;\n}\n.index_innerWrapper__1oX5A {\n  position: relative;\n}\n.index_innerWrapper__1oX5A .index_floatControls__16aMl {\n  position: absolute;\n  right: 15px;\n  bottom: 15px;\n  display: flex;\n  z-index: 2;\n}\n";
 var styles = {
-  "bottomToolBarWrapper": "index_bottomToolBarWrapper__DzhzC"
+  "bottomToolBarWrapper": "index_bottomToolBarWrapper__DzhzC",
+  "innerWrapper": "index_innerWrapper__1oX5A",
+  "floatControls": "index_floatControls__16aMl"
 };
 styleInject(css);
 
@@ -114,7 +116,7 @@ var SimpleEditor = function SimpleEditor(props) {
   var value = props.value,
       onChange = props.onChange,
       _props$toolAlign = props.toolAlign,
-      toolAlign = _props$toolAlign === void 0 ? 'inner' : _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,
@@ -128,32 +130,32 @@ var SimpleEditor = function SimpleEditor(props) {
       _props$appendInnderBa = props.appendInnderBar,
       appendInnderBar = _props$appendInnderBa === void 0 ? null : _props$appendInnderBa;
 
-  if (toolAlign === 'inner') {
-    return React.createElement(BarftEditorPage, Object.assign({
+  if (toolAlign === "inner") {
+    return React.createElement("div", {
+      className: styles.innerWrapper
+    }, React.createElement(BarftEditorPage, Object.assign({
       value: value,
       onChange: onChange,
-      controls: [],
-      FloatControls: function FloatControls(_ref) {
-        var editorState = _ref.editorState,
-            setEditorState = _ref.setEditorState;
-        return React.createElement(ControlsToolBar, Object.assign({
-          editorState: editorState,
-          setEditorState: setEditorState,
-          toolList: toolList
-        }, injectControlsToolBar));
-      }
-    }, injectBraftEditorProps));
+      controls: []
+    }, injectBraftEditorProps)), React.createElement("div", {
+      className: classnames(styles.floatControls)
+    }, React.createElement(ControlsToolBar, Object.assign({
+      editorState: value,
+      setEditorState: onChange,
+      toolList: toolList
+    }, injectControlsToolBar))));
   }
 
-  if (toolAlign === 'both') {
-    return React.createElement("div", null, React.createElement(BarftEditorPage, Object.assign({
+  if (toolAlign === "both") {
+    return React.createElement("div", null, React.createElement("div", {
+      className: styles.innerWrapper
+    }, React.createElement(BarftEditorPage, Object.assign({
       value: value,
       onChange: onChange,
-      controls: [],
-      FloatControls: function FloatControls() {
-        return appendInnderBar;
-      }
+      controls: []
     }, injectBraftEditorProps)), React.createElement("div", {
+      className: classnames(styles.floatControls)
+    }, appendInnderBar)), React.createElement("div", {
       style: toolBarContainerStyle
     }, React.createElement("div", {
       className: styles.bottomToolBarWrapper

lib/BraftEditor/index.d.ts

@@ -6,12 +6,16 @@ interface BaseEditorProps {
     onChange: (editorState: EditorState) => void;
     contentStyle?: React.CSSProperties;
     controls?: ControlType[];
-    FloatControls?: any;
     blockRenderMap?: any;
     blockRendererFn?: any;
+    onDelete?: Function;
+    onSave?: Function;
+    onTab?: Function;
+    onFocus?: Function;
+    onBlur?: Function;
     draftProps?: any;
     placeholder?: string;
     converts?: any;
 }
-declare const BarftEditorPage: ({ value, onChange, controls, contentStyle, FloatControls, draftProps, placeholder, blockRenderMap, blockRendererFn, converts, }: BaseEditorProps) => JSX.Element;
+declare const BarftEditorPage: ({ value, onChange, controls, contentStyle, draftProps, placeholder, blockRenderMap, blockRendererFn, onDelete, onSave, onTab, onFocus, onBlur, converts, }: BaseEditorProps) => JSX.Element;
 export { BarftEditorPage as default, BarftEditorPage, BaseEditorProps };

lib/BraftEditor/index.js

@@ -17,13 +17,12 @@ var Emoticon = require('braft-extensions/dist/emoticon');
 var Emoticon__default = _interopDefault(Emoticon);
 var MaxLength = _interopDefault(require('braft-extensions/dist/max-length'));
 
-var css = ".index_baseWrapper__1_-58 {\n  position: relative;\n}\n.index_baseWrapper__1_-58 .bf-container {\n  display: flex;\n  flex-direction: column;\n}\n.index_baseWrapper__1_-58 .bf-container .index_controlBar__3SzSH {\n  box-shadow: none;\n}\n.index_baseWrapper__1_-58 .bf-container .index_editorContent__2UOaX {\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  height: auto;\n  transition: border-color 0.3s;\n}\n.index_baseWrapper__1_-58 .bf-container .index_editorContent__2UOaX.index_focus__puDJA {\n  border-color: #1790ff;\n}\n.index_baseWrapper__1_-58 .index_floatControls__2hVPf {\n  position: absolute;\n  right: 15px;\n  bottom: 15px;\n  display: flex;\n  z-index: 2;\n}\n";
+var css = ".index_baseWrapper__1_-58 {\n  position: relative;\n}\n.index_baseWrapper__1_-58 .bf-container {\n  display: flex;\n  flex-direction: column;\n}\n.index_baseWrapper__1_-58 .bf-container .index_controlBar__3SzSH {\n  box-shadow: none;\n}\n.index_baseWrapper__1_-58 .bf-container .index_editorContent__2UOaX {\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  height: auto;\n  transition: border-color 0.3s;\n}\n.index_baseWrapper__1_-58 .bf-container .index_editorContent__2UOaX.index_focus__puDJA {\n  border-color: #1790ff;\n}\n";
 var styles = {
   "baseWrapper": "index_baseWrapper__1_-58",
   "controlBar": "index_controlBar__3SzSH",
   "editorContent": "index_editorContent__2UOaX",
-  "focus": "index_focus__puDJA",
-  "floatControls": "index_floatControls__2hVPf"
+  "focus": "index_focus__puDJA"
 };
 styleInject_es.styleInject(css);
 
@@ -41,24 +40,25 @@ var emotionOptions = {
 };
 BraftEditor.use(Emoticon__default(emotionOptions));
 var BarftEditorPage = function BarftEditorPage(_ref) {
-  var _classnames2;
-
   var value = _ref.value,
       onChange = _ref.onChange,
       controls = _ref.controls,
       _ref$contentStyle = _ref.contentStyle,
       contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
-      FloatControls = _ref.FloatControls,
       draftProps = _ref.draftProps,
       placeholder = _ref.placeholder,
       blockRenderMap = _ref.blockRenderMap,
       blockRendererFn = _ref.blockRendererFn,
+      onDelete = _ref.onDelete,
+      onSave = _ref.onSave,
+      onTab = _ref.onTab,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
       converts = _ref.converts;
   var optionsControls = controls ? controls : ["bold", "italic", "underline", "separator", "link", "emoji", "separator", "media"];
   var options = {
     controls: optionsControls,
-    showControlsBar: optionsControls && optionsControls.length > 0 && !FloatControls,
-    showFloatControls: FloatControls
+    showControlsBar: optionsControls && optionsControls.length > 0
   };
 
   var _useState = React.useState(false),
@@ -76,7 +76,7 @@ var BarftEditorPage = function BarftEditorPage(_ref) {
     controlBarStyle: options.showControlsBar ? {} : {
       display: "none"
     },
-    contentClassName: index.classnames(styles.editorContent, (_classnames2 = {}, defineProperty._defineProperty(_classnames2, styles.focus, focusState), defineProperty._defineProperty(_classnames2, styles.hasFloatControls, options.showFloatControls), _classnames2)),
+    contentClassName: index.classnames(styles.editorContent, defineProperty._defineProperty({}, styles.focus, focusState)),
     contentStyle: contentStyle,
     onFocus: function onFocus() {
       return setFocusState(true);
@@ -100,13 +100,13 @@ var BarftEditorPage = function BarftEditorPage(_ref) {
     blockRendererFn: blockRendererFn,
     converts: converts,
     placeholder: placeholder,
-    draftProps: draftProps
-  })), options.showFloatControls ? React__default.createElement("div", {
-    className: index.classnames(styles.floatControls)
-  }, React__default.createElement(FloatControls, {
-    editorState: value,
-    setEditorState: onChange
-  })) : null);
+    draftProps: draftProps,
+    onDelete: onDelete,
+    onSave: onSave,
+    onTab: onTab,
+    onFocus: onFocus,
+    onBlur: onBlur
+  })));
 };
 
 exports.BarftEditorPage = BarftEditorPage;

lib/Editor/index.js

@@ -8,7 +8,7 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
 var defineProperty = require('../defineProperty-ba7cd53d.js');
-require('../index-4c407188.js');
+var index = require('../index-4c407188.js');
 require('../slicedToArray-172f4624.js');
 require('braft-editor');
 var BraftEditor$1 = require('../BraftEditor/index.js');
@@ -110,9 +110,11 @@ var ControlsToolBar = function ControlsToolBar(props) {
   }));
 };
 
-var css = ".index_bottomToolBarWrapper__DzhzC {\n  display: flex;\n}\n";
+var css = ".index_bottomToolBarWrapper__DzhzC {\n  display: flex;\n}\n.index_innerWrapper__1oX5A {\n  position: relative;\n}\n.index_innerWrapper__1oX5A .index_floatControls__16aMl {\n  position: absolute;\n  right: 15px;\n  bottom: 15px;\n  display: flex;\n  z-index: 2;\n}\n";
 var styles = {
-  "bottomToolBarWrapper": "index_bottomToolBarWrapper__DzhzC"
+  "bottomToolBarWrapper": "index_bottomToolBarWrapper__DzhzC",
+  "innerWrapper": "index_innerWrapper__1oX5A",
+  "floatControls": "index_floatControls__16aMl"
 };
 styleInject_es.styleInject(css);
 
@@ -120,7 +122,7 @@ var SimpleEditor = function SimpleEditor(props) {
   var value = props.value,
       onChange = props.onChange,
       _props$toolAlign = props.toolAlign,
-      toolAlign = _props$toolAlign === void 0 ? 'inner' : _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,
@@ -134,32 +136,32 @@ var SimpleEditor = function SimpleEditor(props) {
       _props$appendInnderBa = props.appendInnderBar,
       appendInnderBar = _props$appendInnderBa === void 0 ? null : _props$appendInnderBa;
 
-  if (toolAlign === 'inner') {
-    return React__default.createElement(BraftEditor$1.BarftEditorPage, Object.assign({
+  if (toolAlign === "inner") {
+    return React__default.createElement("div", {
+      className: styles.innerWrapper
+    }, React__default.createElement(BraftEditor$1.BarftEditorPage, Object.assign({
       value: value,
       onChange: onChange,
-      controls: [],
-      FloatControls: function FloatControls(_ref) {
-        var editorState = _ref.editorState,
-            setEditorState = _ref.setEditorState;
-        return React__default.createElement(ControlsToolBar, Object.assign({
-          editorState: editorState,
-          setEditorState: setEditorState,
-          toolList: toolList
-        }, injectControlsToolBar));
-      }
-    }, injectBraftEditorProps));
+      controls: []
+    }, injectBraftEditorProps)), React__default.createElement("div", {
+      className: index.classnames(styles.floatControls)
+    }, React__default.createElement(ControlsToolBar, Object.assign({
+      editorState: value,
+      setEditorState: onChange,
+      toolList: toolList
+    }, injectControlsToolBar))));
   }
 
-  if (toolAlign === 'both') {
-    return React__default.createElement("div", null, React__default.createElement(BraftEditor$1.BarftEditorPage, Object.assign({
+  if (toolAlign === "both") {
+    return React__default.createElement("div", null, React__default.createElement("div", {
+      className: styles.innerWrapper
+    }, React__default.createElement(BraftEditor$1.BarftEditorPage, Object.assign({
       value: value,
       onChange: onChange,
-      controls: [],
-      FloatControls: function FloatControls() {
-        return appendInnderBar;
-      }
+      controls: []
     }, injectBraftEditorProps)), React__default.createElement("div", {
+      className: index.classnames(styles.floatControls)
+    }, appendInnderBar)), React__default.createElement("div", {
       style: toolBarContainerStyle
     }, React__default.createElement("div", {
       className: styles.bottomToolBarWrapper

src/components/Editor/BraftEditor/index.less

@@ -20,12 +20,4 @@
       }
     }
   }
-
-  .floatControls {
-    position: absolute;
-    right: 15px;
-    bottom: 15px;
-    display: flex;
-    z-index: 2;
-  }
 }

src/components/Editor/BraftEditor/index.tsx

@@ -41,10 +41,14 @@ export interface BaseEditorProps {
   onChange: (editorState: EditorState) => void;
   contentStyle?: React.CSSProperties;
   controls?: ControlType[];
-  FloatControls?: any;
   
   blockRenderMap?: any;
   blockRendererFn?: any;
+  onDelete?: Function;
+  onSave?: Function;
+  onTab?: Function;
+  onFocus?: Function;
+  onBlur?: Function;
   draftProps?: any;
   placeholder?: string;
   converts?: any;
@@ -55,11 +59,15 @@ export const BarftEditorPage = ({
   onChange,
   controls,
   contentStyle = {},
-  FloatControls,
   draftProps,
   placeholder,
   blockRenderMap,
   blockRendererFn,
+  onDelete,
+  onSave,
+  onTab,
+  onFocus,
+  onBlur,
   converts,
 }: BaseEditorProps) => {
   const optionsControls = controls
@@ -77,8 +85,7 @@ export const BarftEditorPage = ({
   const options: any = {
     controls: optionsControls,
     showControlsBar:
-      optionsControls && optionsControls.length > 0 && !FloatControls,
-    showFloatControls: FloatControls
+      optionsControls && optionsControls.length > 0,
   };
 
   const [focusState, setFocusState] = useState(false);
@@ -95,7 +102,6 @@ export const BarftEditorPage = ({
         controlBarStyle={options.showControlsBar ? {} : { display: "none" }}
         contentClassName={classnames(styles.editorContent, {
           [styles.focus]: focusState,
-          [styles.hasFloatControls]: options.showFloatControls
         })}
         contentStyle={contentStyle}
         onFocus={() => setFocusState(true)}
@@ -112,18 +118,13 @@ export const BarftEditorPage = ({
           converts,
           placeholder,
           draftProps,
+          onDelete,
+          onSave,
+          onTab,
+          onFocus,
+          onBlur,
         }}
       />
-      {options.showFloatControls ? (
-        <div className={classnames(styles.floatControls)}>
-          {
-            <FloatControls
-              editorState={value}
-              setEditorState={onChange}
-            />
-          }
-        </div>
-      ) : null}
     </div>
   );
 };

src/components/Editor/ImgTxtEditor/SimpleEditor.tsx

@@ -1,11 +1,18 @@
-import React from 'react';
-import { BarftEditorPage, BaseEditorProps } from "@components/Editor/BraftEditor";
-import { ControlsToolBar, ToolListItem } from "@components/Editor/CommonTool/ControlsToolBar";
+import React from "react";
+import classnames from "classnames";
+import {
+  BarftEditorPage,
+  BaseEditorProps,
+} from "@components/Editor/BraftEditor";
+import {
+  ControlsToolBar,
+  ToolListItem,
+} from "@components/Editor/CommonTool/ControlsToolBar";
 import { ContentUtils } from "braft-utils";
-import styles from './index.less';
+import styles from "./index.less";
 
 interface SimpleEditorProps extends BaseEditorProps {
-  toolAlign?: 'inner' | 'bottom' | 'both';
+  toolAlign?: "inner" | "bottom" | "both";
   toolList?: Array<ToolListItem>;
   injectControlsToolBar?: any;
   injectBraftEditorProps?: any;
@@ -17,8 +24,8 @@ interface SimpleEditorProps extends BaseEditorProps {
 const SimpleEditor = (props: SimpleEditorProps) => {
   const {
     value,
-    onChange, 
-    toolAlign = 'inner',
+    onChange,
+    toolAlign = "inner",
     toolList = [],
     injectControlsToolBar = {},
     toolBarContainerStyle = {},
@@ -27,36 +34,41 @@ const SimpleEditor = (props: SimpleEditorProps) => {
     appendInnderBar = null,
   } = props;
 
-
-  if (toolAlign === 'inner') {
+  if (toolAlign === "inner") {
     return (
-      <BarftEditorPage
-        value={value}
-        onChange={onChange}
-        controls={[]}
-        FloatControls={({ editorState, setEditorState }: any) => (
+      <div className={styles.innerWrapper}>
+        <BarftEditorPage
+          value={value}
+          onChange={onChange}
+          controls={[]}
+          {...injectBraftEditorProps}
+        />
+        <div className={classnames(styles.floatControls)}>
           <ControlsToolBar
-            editorState={editorState}
-            setEditorState={setEditorState}
+            editorState={value}
+            setEditorState={onChange}
             toolList={toolList}
             {...injectControlsToolBar}
-          />)
-        }
-        {...injectBraftEditorProps}
-      />
-    )
+          />
+        </div>
+      </div>
+    );
   }
 
-  if (toolAlign === 'both') {
+  if (toolAlign === "both") {
     return (
       <div>
-        <BarftEditorPage
-          value={value}
-          onChange={onChange}
-          controls={[]}
-          FloatControls={() => appendInnderBar}
-          {...injectBraftEditorProps}
-        />
+        <div className={styles.innerWrapper}>
+          <BarftEditorPage
+            value={value}
+            onChange={onChange}
+            controls={[]}
+            {...injectBraftEditorProps}
+          />
+          <div className={classnames(styles.floatControls)}>
+            {appendInnderBar}
+          </div>
+        </div>
         <div style={toolBarContainerStyle}>
           <div className={styles.bottomToolBarWrapper}>
             <ControlsToolBar
@@ -69,7 +81,7 @@ const SimpleEditor = (props: SimpleEditorProps) => {
           {appendToolBtn}
         </div>
       </div>
-    )
+    );
   }
 
   return (
@@ -93,6 +105,6 @@ const SimpleEditor = (props: SimpleEditorProps) => {
       </div>
     </div>
   );
-}
+};
 
-export default SimpleEditor;
+export default SimpleEditor;

src/components/Editor/ImgTxtEditor/index.less

@@ -1,3 +1,14 @@
 .bottomToolBarWrapper {
   display: flex;
+}
+.innerWrapper {
+  position: relative;
+
+  .floatControls {
+    position: absolute;
+    right: 15px;
+    bottom: 15px;
+    display: flex;
+    z-index: 2;
+  }
 }

stories/Editor.stories.tsx

@@ -11,7 +11,7 @@ import { ControlsToolBar } from "@components/Editor/CommonTool/ControlsToolBar";
 import { ContentUtils } from "braft-utils";
 
 import EditorData from "./data/articleData.json";
-import { Divider, Popover, Checkbox } from "antd";
+import { Divider, Popover, Checkbox, Tooltip } from "antd";
 import BraftEditor from "braft-editor";
 
 import styles from './index.less';
@@ -193,6 +193,7 @@ stories.add(
           toolAlign={select("toolAlign", {
             Inner: 'inner',
             Bottom: 'bottom',
+            Both: 'both',
           }, "bottom")}
           toolBarContainerStyle={{
             display: 'flex',
@@ -228,6 +229,9 @@ stories.add(
               </div>
             </div>
           )}
+          appendInnderBar={(
+            <div><Tooltip visible={true} title="123">123</Tooltip></div>
+          )}
         />
       </>
     );