소스 검색

dev: Editor追加内容样式编辑

Roxas 4 년 전
부모
커밋
2e56a16dcc

+ 3
- 1
eslib/BraftEditor/index.d.ts 파일 보기

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

+ 3
- 1
eslib/BraftEditor/index.js 파일 보기

38
   var value = _ref.value,
38
   var value = _ref.value,
39
       onChange = _ref.onChange,
39
       onChange = _ref.onChange,
40
       controls = _ref.controls,
40
       controls = _ref.controls,
41
+      _ref$contentStyle = _ref.contentStyle,
42
+      contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
41
       FloatControls = _ref.FloatControls;
43
       FloatControls = _ref.FloatControls;
42
   var optionsControls = controls ? controls : ["bold", "italic", "underline", "separator", "link", "emoji", "separator", "media"];
44
   var optionsControls = controls ? controls : ["bold", "italic", "underline", "separator", "link", "emoji", "separator", "media"];
43
   var options = {
45
   var options = {
62
       display: "none"
64
       display: "none"
63
     },
65
     },
64
     contentClassName: classnames(styles.editorContent, (_classnames2 = {}, _defineProperty(_classnames2, styles.focus, focusState), _defineProperty(_classnames2, styles.hasFloatControls, options.showFloatControls), _classnames2)),
66
     contentClassName: classnames(styles.editorContent, (_classnames2 = {}, _defineProperty(_classnames2, styles.focus, focusState), _defineProperty(_classnames2, styles.hasFloatControls, options.showFloatControls), _classnames2)),
65
-    contentStyle: {},
67
+    contentStyle: contentStyle,
66
     onFocus: function onFocus() {
68
     onFocus: function onFocus() {
67
       return setFocusState(true);
69
       return setFocusState(true);
68
     },
70
     },

+ 1
- 1
eslib/BraftEditor/index.js.map
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 1
- 0
eslib/Editor/index.d.ts 파일 보기

13
     toolAlign?: "inner" | "bottom";
13
     toolAlign?: "inner" | "bottom";
14
     toolList?: Array<ToolListItem>;
14
     toolList?: Array<ToolListItem>;
15
     injectControlsToolBar?: any;
15
     injectControlsToolBar?: any;
16
+    injectBraftEditorProps?: any;
16
     toolBarContainerStyle?: any;
17
     toolBarContainerStyle?: any;
17
     appendToolBtn?: any;
18
     appendToolBtn?: any;
18
 }
19
 }

+ 4
- 2
eslib/Editor/index.js 파일 보기

120
       injectControlsToolBar = _props$injectControls === void 0 ? {} : _props$injectControls,
120
       injectControlsToolBar = _props$injectControls === void 0 ? {} : _props$injectControls,
121
       _props$toolBarContain = props.toolBarContainerStyle,
121
       _props$toolBarContain = props.toolBarContainerStyle,
122
       toolBarContainerStyle = _props$toolBarContain === void 0 ? {} : _props$toolBarContain,
122
       toolBarContainerStyle = _props$toolBarContain === void 0 ? {} : _props$toolBarContain,
123
+      _props$injectBraftEdi = props.injectBraftEditorProps,
124
+      injectBraftEditorProps = _props$injectBraftEdi === void 0 ? {} : _props$injectBraftEdi,
123
       _props$appendToolBtn = props.appendToolBtn,
125
       _props$appendToolBtn = props.appendToolBtn,
124
       appendToolBtn = _props$appendToolBtn === void 0 ? null : _props$appendToolBtn;
126
       appendToolBtn = _props$appendToolBtn === void 0 ? null : _props$appendToolBtn;
125
 
127
 
140
     });
142
     });
141
   }
143
   }
142
 
144
 
143
-  return React.createElement("div", null, React.createElement(BarftEditorPage, {
145
+  return React.createElement("div", null, React.createElement(BarftEditorPage, Object.assign({
144
     value: value,
146
     value: value,
145
     onChange: onChange,
147
     onChange: onChange,
146
     controls: []
148
     controls: []
147
-  }), React.createElement("div", {
149
+  }, injectBraftEditorProps)), React.createElement("div", {
148
     style: toolBarContainerStyle
150
     style: toolBarContainerStyle
149
   }, React.createElement("div", {
151
   }, React.createElement("div", {
150
     className: styles.bottomToolBarWrapper
152
     className: styles.bottomToolBarWrapper

+ 1
- 1
eslib/Editor/index.js.map
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 3
- 1
lib/BraftEditor/index.d.ts 파일 보기

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

+ 3
- 1
lib/BraftEditor/index.js 파일 보기

46
   var value = _ref.value,
46
   var value = _ref.value,
47
       onChange = _ref.onChange,
47
       onChange = _ref.onChange,
48
       controls = _ref.controls,
48
       controls = _ref.controls,
49
+      _ref$contentStyle = _ref.contentStyle,
50
+      contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
49
       FloatControls = _ref.FloatControls;
51
       FloatControls = _ref.FloatControls;
50
   var optionsControls = controls ? controls : ["bold", "italic", "underline", "separator", "link", "emoji", "separator", "media"];
52
   var optionsControls = controls ? controls : ["bold", "italic", "underline", "separator", "link", "emoji", "separator", "media"];
51
   var options = {
53
   var options = {
70
       display: "none"
72
       display: "none"
71
     },
73
     },
72
     contentClassName: index.classnames(styles.editorContent, (_classnames2 = {}, defineProperty._defineProperty(_classnames2, styles.focus, focusState), defineProperty._defineProperty(_classnames2, styles.hasFloatControls, options.showFloatControls), _classnames2)),
74
     contentClassName: index.classnames(styles.editorContent, (_classnames2 = {}, defineProperty._defineProperty(_classnames2, styles.focus, focusState), defineProperty._defineProperty(_classnames2, styles.hasFloatControls, options.showFloatControls), _classnames2)),
73
-    contentStyle: {},
75
+    contentStyle: contentStyle,
74
     onFocus: function onFocus() {
76
     onFocus: function onFocus() {
75
       return setFocusState(true);
77
       return setFocusState(true);
76
     },
78
     },

+ 1
- 1
lib/BraftEditor/index.js.map
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 1
- 0
lib/Editor/index.d.ts 파일 보기

13
     toolAlign?: "inner" | "bottom";
13
     toolAlign?: "inner" | "bottom";
14
     toolList?: Array<ToolListItem>;
14
     toolList?: Array<ToolListItem>;
15
     injectControlsToolBar?: any;
15
     injectControlsToolBar?: any;
16
+    injectBraftEditorProps?: any;
16
     toolBarContainerStyle?: any;
17
     toolBarContainerStyle?: any;
17
     appendToolBtn?: any;
18
     appendToolBtn?: any;
18
 }
19
 }

+ 4
- 2
lib/Editor/index.js 파일 보기

126
       injectControlsToolBar = _props$injectControls === void 0 ? {} : _props$injectControls,
126
       injectControlsToolBar = _props$injectControls === void 0 ? {} : _props$injectControls,
127
       _props$toolBarContain = props.toolBarContainerStyle,
127
       _props$toolBarContain = props.toolBarContainerStyle,
128
       toolBarContainerStyle = _props$toolBarContain === void 0 ? {} : _props$toolBarContain,
128
       toolBarContainerStyle = _props$toolBarContain === void 0 ? {} : _props$toolBarContain,
129
+      _props$injectBraftEdi = props.injectBraftEditorProps,
130
+      injectBraftEditorProps = _props$injectBraftEdi === void 0 ? {} : _props$injectBraftEdi,
129
       _props$appendToolBtn = props.appendToolBtn,
131
       _props$appendToolBtn = props.appendToolBtn,
130
       appendToolBtn = _props$appendToolBtn === void 0 ? null : _props$appendToolBtn;
132
       appendToolBtn = _props$appendToolBtn === void 0 ? null : _props$appendToolBtn;
131
 
133
 
146
     });
148
     });
147
   }
149
   }
148
 
150
 
149
-  return React__default.createElement("div", null, React__default.createElement(BraftEditor$1.BarftEditorPage, {
151
+  return React__default.createElement("div", null, React__default.createElement(BraftEditor$1.BarftEditorPage, Object.assign({
150
     value: value,
152
     value: value,
151
     onChange: onChange,
153
     onChange: onChange,
152
     controls: []
154
     controls: []
153
-  }), React__default.createElement("div", {
155
+  }, injectBraftEditorProps)), React__default.createElement("div", {
154
     style: toolBarContainerStyle
156
     style: toolBarContainerStyle
155
   }, React__default.createElement("div", {
157
   }, React__default.createElement("div", {
156
     className: styles.bottomToolBarWrapper
158
     className: styles.bottomToolBarWrapper

+ 1
- 1
lib/Editor/index.js.map
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 3
- 1
src/components/Editor/BraftEditor/index.tsx 파일 보기

39
 export interface BaseEditorProps {
39
 export interface BaseEditorProps {
40
   value: EditorState;
40
   value: EditorState;
41
   onChange: (editorState: EditorState) => void;
41
   onChange: (editorState: EditorState) => void;
42
+  contentStyle?: React.CSSProperties;
42
   controls?: ControlType[];
43
   controls?: ControlType[];
43
   FloatControls?: any;
44
   FloatControls?: any;
44
 }
45
 }
47
   value,
48
   value,
48
   onChange,
49
   onChange,
49
   controls,
50
   controls,
51
+  contentStyle = {},
50
   FloatControls
52
   FloatControls
51
 }: BaseEditorProps) => {
53
 }: BaseEditorProps) => {
52
   const optionsControls = controls
54
   const optionsControls = controls
84
           [styles.focus]: focusState,
86
           [styles.focus]: focusState,
85
           [styles.hasFloatControls]: options.showFloatControls
87
           [styles.hasFloatControls]: options.showFloatControls
86
         })}
88
         })}
87
-        contentStyle={{}}
89
+        contentStyle={contentStyle}
88
         onFocus={() => setFocusState(true)}
90
         onFocus={() => setFocusState(true)}
89
         onBlur={() => setFocusState(false)}
91
         onBlur={() => setFocusState(false)}
90
         hooks={{
92
         hooks={{

+ 3
- 0
src/components/Editor/ImgTxtEditor/SimpleEditor.tsx 파일 보기

8
   toolAlign?: 'inner' | 'bottom';
8
   toolAlign?: 'inner' | 'bottom';
9
   toolList?: Array<ToolListItem>;
9
   toolList?: Array<ToolListItem>;
10
   injectControlsToolBar?: any;
10
   injectControlsToolBar?: any;
11
+  injectBraftEditorProps?: any;
11
   toolBarContainerStyle?: any;
12
   toolBarContainerStyle?: any;
12
   appendToolBtn?: any;
13
   appendToolBtn?: any;
13
 }
14
 }
20
     toolList = [],
21
     toolList = [],
21
     injectControlsToolBar = {},
22
     injectControlsToolBar = {},
22
     toolBarContainerStyle = {},
23
     toolBarContainerStyle = {},
24
+    injectBraftEditorProps = {},
23
     appendToolBtn = null,
25
     appendToolBtn = null,
24
   } = props;
26
   } = props;
25
 
27
 
47
         value={value}
49
         value={value}
48
         onChange={onChange}
50
         onChange={onChange}
49
         controls={[]}
51
         controls={[]}
52
+        {...injectBraftEditorProps}
50
       />
53
       />
51
       <div style={toolBarContainerStyle}>
54
       <div style={toolBarContainerStyle}>
52
         <div className={styles.bottomToolBarWrapper}>
55
         <div className={styles.bottomToolBarWrapper}>

+ 1
- 1
stats.html
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 5
- 0
stories/Editor.stories.tsx 파일 보기

121
           value={editorState}
121
           value={editorState}
122
           onChange={setEditorState}
122
           onChange={setEditorState}
123
           controls={[]}
123
           controls={[]}
124
+          injectBraftEditorProps={{
125
+            contentStyle: {
126
+              height: '150px'
127
+            },
128
+          }}
124
           toolList={[
129
           toolList={[
125
             {
130
             {
126
               key: 1,
131
               key: 1,