dev: Editor追加内容样式编辑

eslib/BraftEditor/index.d.ts

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

eslib/BraftEditor/index.js

@@ -38,6 +38,8 @@ var BarftEditorPage = function BarftEditorPage(_ref) {
   var value = _ref.value,
       onChange = _ref.onChange,
       controls = _ref.controls,
+      _ref$contentStyle = _ref.contentStyle,
+      contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
       FloatControls = _ref.FloatControls;
   var optionsControls = controls ? controls : ["bold", "italic", "underline", "separator", "link", "emoji", "separator", "media"];
   var options = {
@@ -62,7 +64,7 @@ var BarftEditorPage = function BarftEditorPage(_ref) {
       display: "none"
     },
     contentClassName: classnames(styles.editorContent, (_classnames2 = {}, _defineProperty(_classnames2, styles.focus, focusState), _defineProperty(_classnames2, styles.hasFloatControls, options.showFloatControls), _classnames2)),
-    contentStyle: {},
+    contentStyle: contentStyle,
     onFocus: function onFocus() {
       return setFocusState(true);
     },

eslib/Editor/index.d.ts

@@ -13,6 +13,7 @@ interface SimpleEditorProps extends BaseEditorProps {
     toolAlign?: "inner" | "bottom";
     toolList?: Array<ToolListItem>;
     injectControlsToolBar?: any;
+    injectBraftEditorProps?: any;
     toolBarContainerStyle?: any;
     appendToolBtn?: any;
 }

eslib/Editor/index.js

@@ -120,6 +120,8 @@ var SimpleEditor = function SimpleEditor(props) {
       injectControlsToolBar = _props$injectControls === void 0 ? {} : _props$injectControls,
       _props$toolBarContain = props.toolBarContainerStyle,
       toolBarContainerStyle = _props$toolBarContain === void 0 ? {} : _props$toolBarContain,
+      _props$injectBraftEdi = props.injectBraftEditorProps,
+      injectBraftEditorProps = _props$injectBraftEdi === void 0 ? {} : _props$injectBraftEdi,
       _props$appendToolBtn = props.appendToolBtn,
       appendToolBtn = _props$appendToolBtn === void 0 ? null : _props$appendToolBtn;
 
@@ -140,11 +142,11 @@ var SimpleEditor = function SimpleEditor(props) {
     });
   }
 
-  return React.createElement("div", null, React.createElement(BarftEditorPage, {
+  return React.createElement("div", null, React.createElement(BarftEditorPage, Object.assign({
     value: value,
     onChange: onChange,
     controls: []
-  }), React.createElement("div", {
+  }, injectBraftEditorProps)), React.createElement("div", {
     style: toolBarContainerStyle
   }, React.createElement("div", {
     className: styles.bottomToolBarWrapper

lib/BraftEditor/index.d.ts

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

lib/BraftEditor/index.js

@@ -46,6 +46,8 @@ var BarftEditorPage = function BarftEditorPage(_ref) {
   var value = _ref.value,
       onChange = _ref.onChange,
       controls = _ref.controls,
+      _ref$contentStyle = _ref.contentStyle,
+      contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
       FloatControls = _ref.FloatControls;
   var optionsControls = controls ? controls : ["bold", "italic", "underline", "separator", "link", "emoji", "separator", "media"];
   var options = {
@@ -70,7 +72,7 @@ var BarftEditorPage = function BarftEditorPage(_ref) {
       display: "none"
     },
     contentClassName: index.classnames(styles.editorContent, (_classnames2 = {}, defineProperty._defineProperty(_classnames2, styles.focus, focusState), defineProperty._defineProperty(_classnames2, styles.hasFloatControls, options.showFloatControls), _classnames2)),
-    contentStyle: {},
+    contentStyle: contentStyle,
     onFocus: function onFocus() {
       return setFocusState(true);
     },

lib/Editor/index.d.ts

@@ -13,6 +13,7 @@ interface SimpleEditorProps extends BaseEditorProps {
     toolAlign?: "inner" | "bottom";
     toolList?: Array<ToolListItem>;
     injectControlsToolBar?: any;
+    injectBraftEditorProps?: any;
     toolBarContainerStyle?: any;
     appendToolBtn?: any;
 }

lib/Editor/index.js

@@ -126,6 +126,8 @@ var SimpleEditor = function SimpleEditor(props) {
       injectControlsToolBar = _props$injectControls === void 0 ? {} : _props$injectControls,
       _props$toolBarContain = props.toolBarContainerStyle,
       toolBarContainerStyle = _props$toolBarContain === void 0 ? {} : _props$toolBarContain,
+      _props$injectBraftEdi = props.injectBraftEditorProps,
+      injectBraftEditorProps = _props$injectBraftEdi === void 0 ? {} : _props$injectBraftEdi,
       _props$appendToolBtn = props.appendToolBtn,
       appendToolBtn = _props$appendToolBtn === void 0 ? null : _props$appendToolBtn;
 
@@ -146,11 +148,11 @@ var SimpleEditor = function SimpleEditor(props) {
     });
   }
 
-  return React__default.createElement("div", null, React__default.createElement(BraftEditor$1.BarftEditorPage, {
+  return React__default.createElement("div", null, React__default.createElement(BraftEditor$1.BarftEditorPage, Object.assign({
     value: value,
     onChange: onChange,
     controls: []
-  }), React__default.createElement("div", {
+  }, injectBraftEditorProps)), React__default.createElement("div", {
     style: toolBarContainerStyle
   }, React__default.createElement("div", {
     className: styles.bottomToolBarWrapper

src/components/Editor/BraftEditor/index.tsx

@@ -39,6 +39,7 @@ BraftEditor.use(Emoticon(emotionOptions));
 export interface BaseEditorProps {
   value: EditorState;
   onChange: (editorState: EditorState) => void;
+  contentStyle?: React.CSSProperties;
   controls?: ControlType[];
   FloatControls?: any;
 }
@@ -47,6 +48,7 @@ export const BarftEditorPage = ({
   value,
   onChange,
   controls,
+  contentStyle = {},
   FloatControls
 }: BaseEditorProps) => {
   const optionsControls = controls
@@ -84,7 +86,7 @@ export const BarftEditorPage = ({
           [styles.focus]: focusState,
           [styles.hasFloatControls]: options.showFloatControls
         })}
-        contentStyle={{}}
+        contentStyle={contentStyle}
         onFocus={() => setFocusState(true)}
         onBlur={() => setFocusState(false)}
         hooks={{

src/components/Editor/ImgTxtEditor/SimpleEditor.tsx

@@ -8,6 +8,7 @@ interface SimpleEditorProps extends BaseEditorProps {
   toolAlign?: 'inner' | 'bottom';
   toolList?: Array<ToolListItem>;
   injectControlsToolBar?: any;
+  injectBraftEditorProps?: any;
   toolBarContainerStyle?: any;
   appendToolBtn?: any;
 }
@@ -20,6 +21,7 @@ const SimpleEditor = (props: SimpleEditorProps) => {
     toolList = [],
     injectControlsToolBar = {},
     toolBarContainerStyle = {},
+    injectBraftEditorProps = {},
     appendToolBtn = null,
   } = props;
 
@@ -47,6 +49,7 @@ const SimpleEditor = (props: SimpleEditorProps) => {
         value={value}
         onChange={onChange}
         controls={[]}
+        {...injectBraftEditorProps}
       />
       <div style={toolBarContainerStyle}>
         <div className={styles.bottomToolBarWrapper}>

stories/Editor.stories.tsx

@@ -121,6 +121,11 @@ stories.add(
           value={editorState}
           onChange={setEditorState}
           controls={[]}
+          injectBraftEditorProps={{
+            contentStyle: {
+              height: '150px'
+            },
+          }}
           toolList={[
             {
               key: 1,