Skip to content

Commit 1974a18

Browse files
jaywcjlovejaywcjlove
committed
Add tool bar.
1 parent 620db8b commit 1974a18

File tree

7 files changed

+150
-109
lines changed

7 files changed

+150
-109
lines changed

‎src/components/CodeMirror/codemirror.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@
128128
// .cm-operator {}
129129
.cm-variable-2 {color: #05a;}
130130
.cm-variable-3, .cm-s-default .cm-type {color: #085;}
131-
.cm-comment {color: #3c3c3c;}
131+
.cm-comment {color: #2C3E50;}
132132
.cm-string {color: #a11;}
133133
.cm-string-2 {color: #f50;}
134134
.cm-meta {color: #555;}
@@ -276,7 +276,7 @@
276276
padding: 0.1px; /* Force widget margins to stay inside of the container */
277277
}
278278

279-
.CodeMirror-widget {}
279+
// .CodeMirror-widget {}
280280

281281
.CodeMirror-rtl pre { direction: rtl; }
282282

‎src/components/CodeMirror/index.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import CodeMirror from 'codemirror';
2-
// import 'codemirror/lib/codemirror.css';
1+
import CodeMirror, { Doc, DocConstructor, Editor, EditorConfiguration, EditorFromTextArea } from 'codemirror';
32
import 'codemirror/mode/markdown/markdown';
43
import React, { Component } from 'react';
54
import { IReactCodeMirrorState } from '../../common/codemirror';
@@ -9,7 +8,7 @@ import './index.less';
98

109
export interface IReactCodeMirrorProps extends IProps, HTMLDivProps {
1110
value?: string,
12-
options: CodeMirror.EditorConfiguration,
11+
options: EditorConfiguration,
1312
width?: number | string,
1413
height?: number | string,
1514
}
@@ -18,14 +17,21 @@ export default class ReactCodeMirror extends Component<IReactCodeMirrorProps, IR
1817
public static defaultProps: IReactCodeMirrorProps = {
1918
height: '100%',
2019
options: {
20+
lineNumbers: true,
2121
mode: 'markdown',
2222
tabSize: 2,
2323
},
2424
value: '',
2525
width: '100%',
2626
}
2727
public textarea!: HTMLTextAreaElement;
28-
public editor!: CodeMirror.EditorFromTextArea;
28+
// public editor!: CodeMirror.Editor<Doc>;
29+
// public editor!: Doc | Editor | EditorFromTextArea;
30+
public editor!: any;
31+
// public editor!: CodeMirror.Editor | EditorFromTextArea;
32+
// public editor!: Doc | EditorFromTextArea;
33+
// public editor!: Doc | EditorFromTextArea;
34+
// public editor!: Doc | Editor | EditorFromTextArea | Editor;
2935
public constructor(props: Readonly<IReactCodeMirrorProps>) {
3036
super(props);
3137
}
@@ -35,37 +41,30 @@ export default class ReactCodeMirror extends Component<IReactCodeMirrorProps, IR
3541
)
3642
}
3743

38-
public async componentDidMount() {
44+
public componentDidMount() {
3945
this.renderCodeMirror(this.props);
4046
}
4147

4248
public async componentWillReceiveProps(nextPros: IReactCodeMirrorProps) {
4349
this.renderCodeMirror(nextPros);
44-
// await this.setState({
45-
// codeMirrorOptions: { ...this.state.codeMirrorOptions, ...nextPros.options },
46-
// });
4750
}
4851

4952
private async renderCodeMirror(props: IReactCodeMirrorProps) {
5053
const { value, width, height, options } = props;
51-
// await import(`codemirror/mode/${options.mode}/${options.mode}.js`);
52-
// console.log('options:', options);
54+
const editorOption = { tabSize: 2, lineNumbers: true, ...options, mode: 'markdown' }
5355
// 生成codemirror实例
54-
this.editor = CodeMirror.fromTextArea(this.textarea, options);
56+
this.editor = CodeMirror.fromTextArea(this.textarea, editorOption);
5557
// 获取CodeMirror用于获取其中的一些常量
5658
// this.codemirror = CodeMirror;
5759
// 事件处理映射
5860
// const eventDict = this.getEventHandleFromProps();
59-
6061
// Object.keys(eventDict).forEach((event: string) => {
6162
// this.editor.on(eventDict[event], this.props[event]);
6263
// });
6364

6465
// 初始化值
6566
this.editor.setValue(value || '');
66-
// markdown codemirror/mode/markdown/markdown.js
67-
68-
this.editor.setOption(name, options.mode);
67+
this.editor.setOption(name, editorOption.mode);
6968

7069
if (width || height) {
7170
// 设置尺寸

‎src/components/Icon/bar.tsx‎

Lines changed: 38 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,78 +2,63 @@ import React from 'react';
22

33
export default {
44
bold: (
5-
<svg viewBox="0 0 18 18">
6-
<path className="mde-stroke" d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z" />
7-
<path className="mde-stroke" d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z" />
5+
<svg width="13" height="13" viewBox="0 0 384 512">
6+
<path fill="currentColor" d="M304.793 243.891c33.639-18.537 53.657-54.16 53.657-95.693 0-48.236-26.25-87.626-68.626-104.179C265.138 34.01 240.849 32 209.661 32H24c-8.837 0-16 7.163-16 16v33.049c0 8.837 7.163 16 16 16h33.113v318.53H24c-8.837 0-16 7.163-16 16V464c0 8.837 7.163 16 16 16h195.69c24.203 0 44.834-1.289 66.866-7.584C337.52 457.193 376 410.647 376 350.014c0-52.168-26.573-91.684-71.207-106.123zM142.217 100.809h67.444c16.294 0 27.536 2.019 37.525 6.717 15.828 8.479 24.906 26.502 24.906 49.446 0 35.029-20.32 56.79-53.029 56.79h-76.846V100.809zm112.642 305.475c-10.14 4.056-22.677 4.907-31.409 4.907h-81.233V281.943h84.367c39.645 0 63.057 25.38 63.057 63.057.001 28.425-13.66 52.483-34.782 61.284z" />
87
</svg>
98
),
10-
italic: (
11-
<svg viewBox="0 0 18 18">
12-
<line className="mde-stroke" x1="7" x2="13" y1="4" y2="4" />
13-
<line className="mde-stroke" x1="5" x2="11" y1="14" y2="14" />
14-
<line className="mde-stroke" x1="8" x2="10" y1="14" y2="4" />
9+
header: (
10+
<svg width="12" height="12" viewBox="0 0 512 512">
11+
<path fill="currentColor" d="M496 80V48c0-8.837-7.163-16-16-16H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.621v128H154.379V96H192c8.837 0 16-7.163 16-16V48c0-8.837-7.163-16-16-16H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.275v320H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.621V288H357.62v128H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.275V96H480c8.837 0 16-7.163 16-16z" />
1512
</svg>
1613
),
17-
underline: (
18-
<svg viewBox="0 0 18 18">
19-
<path className="mde-stroke" d="M5,3V9a4.012,4.012,0,0,0,4,4H9a4.012,4.012,0,0,0,4-4V3" />
20-
<rect className="mde-fill" height="1" rx="0.5" ry="0.5" width="12" x="3" y="15" />
14+
image: (
15+
<svg width="14" height="14" viewBox="0 0 20 20">
16+
<path fill="currentColor" d="M15 9c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4-7H1c-.55 0-1 .45-1 1v14c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 13l-6-5-2 2-4-5-4 8V4h16v11z" />
2117
</svg>
2218
),
23-
// tslint:disable-next-line:object-literal-sort-keys
24-
strike: (
25-
<svg viewBox="0 0 18 18">
26-
<line className="mde-stroke mde-thin" x1="15.5" x2="2.5" y1="8.5" y2="9.5" />
27-
<path className="mde-fill" d="M9.007,8C6.542,7.791,6,7.519,6,6.5,6,5.792,7.283,5,9,5c1.571,0,2.765.679,2.969,1.309a1,1,0,0,0,1.9-.617C13.356,4.106,11.354,3,9,3,6.2,3,4,4.538,4,6.5a3.2,3.2,0,0,0,.5,1.843Z" />
28-
<path className="mde-fill" d="M8.984,10C11.457,10.208,12,10.479,12,11.5c0,0.708-1.283,1.5-3,1.5-1.571,0-2.765-.679-2.969-1.309a1,1,0,1,0-1.9.617C4.644,13.894,6.646,15,9,15c2.8,0,5-1.538,5-3.5a3.2,3.2,0,0,0-.5-1.843Z" />
19+
italic: (
20+
<svg width="12" height="12" viewBox="0 0 320 512">
21+
<path fill="currentColor" d="M204.758 416h-33.849l62.092-320h40.725a16 16 0 0 0 15.704-12.937l6.242-32C297.599 41.184 290.034 32 279.968 32H120.235a16 16 0 0 0-15.704 12.937l-6.242 32C96.362 86.816 103.927 96 113.993 96h33.846l-62.09 320H46.278a16 16 0 0 0-15.704 12.935l-6.245 32C22.402 470.815 29.967 480 40.034 480h158.479a16 16 0 0 0 15.704-12.935l6.245-32c1.927-9.88-5.638-19.065-15.704-19.065z" />
22+
</svg>
23+
),
24+
link: (
25+
<svg width="12" height="12" viewBox="0 0 512 512">
26+
<path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z" />
2927
</svg>
3028
),
3129
olist: (
32-
<svg viewBox="0 0 18 18">
33-
<line className="mde-stroke" x1="7" x2="15" y1="4" y2="4" />
34-
<line className="mde-stroke" x1="7" x2="15" y1="9" y2="9" />
35-
<line className="mde-stroke" x1="7" x2="15" y1="14" y2="14" />
36-
<line className="mde-stroke mde-thin" x1="2.5" x2="4.5" y1="5.5" y2="5.5" />
37-
<path className="mde-fill" d="M3.5,6A0.5,0.5,0,0,1,3,5.5V3.085l-0.276.138A0.5,0.5,0,0,1,2.053,3c-0.124-.247-0.023-0.324.224-0.447l1-.5A0.5,0.5,0,0,1,4,2.5v3A0.5,0.5,0,0,1,3.5,6Z" />
38-
<path className="mde-stroke mde-thin" d="M4.5,10.5h-2c0-.234,1.85-1.076,1.85-2.234A0.959,0.959,0,0,0,2.5,8.156" />
39-
<path className="mde-stroke mde-thin" d="M2.5,14.846a0.959,0.959,0,0,0,1.85-.109A0.7,0.7,0,0,0,3.75,14a0.688,0.688,0,0,0,.6-0.736,0.959,0.959,0,0,0-1.85-.109" />
30+
<svg width="12" height="12" viewBox="0 0 32 32">
31+
<path fill="currentColor" d="M12 2h20v4h-20v-4zM12 14h20v4h-20v-4zM12 26h20v4h-20v-4zM0 4c0 2.209 1.791 4 4 4s4-1.791 4-4c0-2.209-1.791-4-4-4s-4 1.791-4 4zM0 16c0 2.209 1.791 4 4 4s4-1.791 4-4c0-2.209-1.791-4-4-4s-4 1.791-4 4zM0 28c0 2.209 1.791 4 4 4s4-1.791 4-4c0-2.209-1.791-4-4-4s-4 1.791-4 4z" />
4032
</svg>
4133
),
42-
ulist: (
43-
<svg viewBox="0 0 18 18">
44-
<line className="mde-stroke" x1="6" x2="15" y1="4" y2="4" />
45-
<line className="mde-stroke" x1="6" x2="15" y1="9" y2="9" />
46-
<line className="mde-stroke" x1="6" x2="15" y1="14" y2="14" />
47-
<line className="mde-stroke" x1="3" x2="3" y1="4" y2="4" />
48-
<line className="mde-stroke" x1="3" x2="3" y1="9" y2="9" />
49-
<line className="mde-stroke" x1="3" x2="3" y1="14" y2="14" />
34+
preview: (
35+
<svg width="16" height="16" viewBox="0 0 32 32">
36+
<path fill="currentColor" d="M0 16c3.037-5.864 9.058-9.802 16-9.802s12.963 3.938 15.953 9.703l0.047 0.1c-3.037 5.864-9.058 9.802-16 9.802s-12.963-3.938-15.953-9.703l-0.047-0.1zM16 22.531c3.607 0 6.531-2.924 6.531-6.531s-2.924-6.531-6.531-6.531v0c-3.607 0-6.531 2.924-6.531 6.531s2.924 6.531 6.531 6.531v0zM16 19.265c-1.804 0-3.265-1.461-3.265-3.265s1.461-3.265 3.265-3.265v0c1.804 0 3.265 1.461 3.265 3.265s-1.461 3.265-3.265 3.265v0z" />
5037
</svg>
5138
),
52-
link: (
53-
<svg viewBox="0 0 18 18">
54-
<line className="mde-stroke" x1="7" x2="11" y1="7" y2="11" />
55-
<path className="mde-even mde-stroke" d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z" />
56-
<path className="mde-even mde-stroke" d="M13.423,9.1a3.476,3.476,0,0,0-4.679-.36,3.476,3.476,0,0,0,.36,4.679c1.392,1.392,2.5,2.542,4.679.36S14.815,10.5,13.423,9.1Z" />
39+
quote: (
40+
<svg width="12" height="12" viewBox="0 0 512 512">
41+
<path fill="currentColor" d="M512 80v128c0 137.018-63.772 236.324-193.827 271.172-15.225 4.08-30.173-7.437-30.173-23.199v-33.895c0-10.057 6.228-19.133 15.687-22.55C369.684 375.688 408 330.054 408 256h-72c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h128c26.51 0 48 21.49 48 48zM176 32H48C21.49 32 0 53.49 0 80v128c0 26.51 21.49 48 48 48h72c0 74.054-38.316 119.688-104.313 143.528C6.228 402.945 0 412.021 0 422.078v33.895c0 15.762 14.948 27.279 30.173 23.199C160.228 444.324 224 345.018 224 208V80c0-26.51-21.49-48-48-48z" />
5742
</svg>
5843
),
59-
image: (
60-
<svg viewBox="0 0 18 18">
61-
<rect className="mde-stroke" height="10" width="12" x="3" y="4" />
62-
<circle className="mde-fill" cx="6" cy="7" r="1" />
63-
<polyline className="mde-even mde-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12" />
44+
strike: (
45+
<svg width="12" height="12" viewBox="0 0 512 512">
46+
<path fill="currentColor" d="M496 288H16c-8.837 0-16-7.163-16-16v-32c0-8.837 7.163-16 16-16h480c8.837 0 16 7.163 16 16v32c0 8.837-7.163 16-16 16zm-214.666 16c27.258 12.937 46.524 28.683 46.524 56.243 0 33.108-28.977 53.676-75.621 53.676-32.325 0-76.874-12.08-76.874-44.271V368c0-8.837-7.164-16-16-16H113.75c-8.836 0-16 7.163-16 16v19.204c0 66.845 77.717 101.82 154.487 101.82 88.578 0 162.013-45.438 162.013-134.424 0-19.815-3.618-36.417-10.143-50.6H281.334zm-30.952-96c-32.422-13.505-56.836-28.946-56.836-59.683 0-33.92 30.901-47.406 64.962-47.406 42.647 0 64.962 16.593 64.962 32.985V136c0 8.837 7.164 16 16 16h45.613c8.836 0 16-7.163 16-16v-30.318c0-52.438-71.725-79.875-142.575-79.875-85.203 0-150.726 40.972-150.726 125.646 0 22.71 4.665 41.176 12.777 56.547h129.823z" />
6447
</svg>
6548
),
66-
quote: (
67-
<svg viewBox="0 0 18 18">
68-
<rect className="mde-fill mde-stroke" height="3" width="3" x="4" y="5" />
69-
<rect className="mde-fill mde-stroke" height="3" width="3" x="11" y="5" />
70-
<path className="mde-even mde-fill mde-stroke" d="M7,8c0,4.031-3,5-3,5" />
71-
<path className="mde-even mde-fill mde-stroke" d="M14,8c0,4.031-3,5-3,5" />
49+
todo: (
50+
<svg width="18" height="18" viewBox="0 0 1024 1024">
51+
<path fill="currentColor" d="M224 800.256L223.712 224H320v31.68c0 35.456 28.64 64.32 63.872 64.32h256.256A64.16 64.16 0 0 0 704 255.68V224l96-0.256L800.256 800 224 800.256zM640 192.32L640.128 256 384 255.68V192.32L383.872 192 640 192.32zM799.84 160H695.04c-11.072-19.04-31.424-32-54.912-32h-256.256c-23.488 0-43.808 12.928-54.912 32H223.712A63.776 63.776 0 0 0 160 223.744v576.512C160 835.392 188.608 864 223.744 864h576.512A63.84 63.84 0 0 0 864 800.256V223.744A64 64 0 0 0 799.84 160zM619.072 429.088l-151.744 165.888-62.112-69.6a32 32 0 1 0-47.744 42.624l85.696 96a32 32 0 0 0 23.68 10.688h0.192c8.96 0 17.536-3.776 23.616-10.4l175.648-192a32 32 0 0 0-47.232-43.2" />
7252
</svg>
7353
),
74-
preview: (
75-
<svg width="32" height="32" viewBox="0 0 32 32">
76-
<path d="M0 16c3.037-5.864 9.058-9.802 16-9.802s12.963 3.938 15.953 9.703l0.047 0.1c-3.037 5.864-9.058 9.802-16 9.802s-12.963-3.938-15.953-9.703l-0.047-0.1zM16 22.531c3.607 0 6.531-2.924 6.531-6.531s-2.924-6.531-6.531-6.531v0c-3.607 0-6.531 2.924-6.531 6.531s2.924 6.531 6.531 6.531v0zM16 19.265c-1.804 0-3.265-1.461-3.265-3.265s1.461-3.265 3.265-3.265v0c1.804 0 3.265 1.461 3.265 3.265s-1.461 3.265-3.265 3.265v0z" />
54+
ulist: (
55+
<svg width="14" height="14" viewBox="0 0 512 512">
56+
<path fill="currentColor" d="M3.263 139.527c0-7.477 3.917-11.572 11.573-11.572h15.131V88.078c0-5.163.534-10.503.534-10.503h-.356s-1.779 2.67-2.848 3.738c-4.451 4.273-10.504 4.451-15.666-1.068l-5.518-6.231c-5.342-5.341-4.984-11.216.534-16.379l21.72-19.938C32.815 33.602 36.732 32 42.785 32H54.89c7.656 0 11.749 3.916 11.749 11.572v84.384h15.488c7.655 0 11.572 4.094 11.572 11.572v8.901c0 7.477-3.917 11.572-11.572 11.572H14.836c-7.656 0-11.573-4.095-11.573-11.572v-8.902zM2.211 304.591c0-47.278 50.955-56.383 50.955-69.165 0-7.18-5.954-8.755-9.28-8.755-3.153 0-6.479 1.051-9.455 3.852-5.079 4.903-10.507 7.004-16.111 2.451l-8.579-6.829c-5.779-4.553-7.18-9.805-2.803-15.409C13.592 201.981 26.025 192 47.387 192c19.437 0 44.476 10.506 44.476 39.573 0 38.347-46.753 46.402-48.679 56.909h39.049c7.529 0 11.557 4.027 11.557 11.382v8.755c0 7.354-4.028 11.382-11.557 11.382h-67.94c-7.005 0-12.083-4.028-12.083-11.382v-4.028zM5.654 454.61l5.603-9.28c3.853-6.654 9.105-7.004 15.584-3.152 4.903 2.101 9.63 3.152 14.359 3.152 10.155 0 14.358-3.502 14.358-8.23 0-6.654-5.604-9.106-15.934-9.106h-4.728c-5.954 0-9.28-2.101-12.258-7.88l-1.05-1.926c-2.451-4.728-1.226-9.806 2.801-14.884l5.604-7.004c6.829-8.405 12.257-13.483 12.257-13.483v-.35s-4.203 1.051-12.608 1.051H16.685c-7.53 0-11.383-4.028-11.383-11.382v-8.755c0-7.53 3.853-11.382 11.383-11.382h58.484c7.529 0 11.382 4.027 11.382 11.382v3.327c0 5.778-1.401 9.806-5.079 14.183l-17.509 20.137c19.611 5.078 28.716 20.487 28.716 34.845 0 21.363-14.358 44.126-48.503 44.126-16.636 0-28.192-4.728-35.896-9.455-5.779-4.202-6.304-9.805-2.626-15.934zM144 132h352c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H144c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h352c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H144c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h352c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H144c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" />
57+
</svg>
58+
),
59+
underline: (
60+
<svg width="14" height="14" viewBox="0 0 20 20">
61+
<path fill="currentColor" d="M10 17c3.3 0 6-2.7 6-6V3.5c0-.8-.7-1.5-1.5-1.5S13 2.7 13 3.5V11c0 1.7-1.3 3-3 3s-3-1.3-3-3V3.5C7 2.7 6.3 2 5.5 2S4 2.7 4 3.5V11c0 3.3 2.7 6 6 6zM16.5 19h-13c-.3 0-.5.2-.5.5s.2.5.5.5h13c.3 0 .5-.2.5-.5s-.2-.5-.5-.5z" />
7762
</svg>
7863
),
7964
};

‎src/components/ToolBar/index.less‎

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
&-toolbar {
66
border-bottom: 1px solid #dfdfe0;
77
background-color: #fbfbfb;
8-
padding: 2px;
8+
padding: 4px 2px 4px 5px;
99
border-radius: 3px 3px 0 0;
1010
button {
1111
background: none;
@@ -14,33 +14,21 @@
1414
outline: 0;
1515
display: inline-block;
1616
height: 24px;
17-
padding: 3px 5px;
18-
width: 28px;
17+
width: 24px;
18+
padding: 3px 2px;
19+
border-radius: 2px;
20+
transition: all .3s;
1921
&:hover {
2022
color: #06c;
21-
.mde-stroke {
22-
stroke: #06c;
23-
}
24-
.mde-fill {
25-
fill: #06c;
26-
}
23+
background-color: #e8e8e8;
24+
}
25+
&:active {
26+
color: #6a57ff;
27+
background-color: #dadada;
28+
}
29+
svg {
30+
vertical-align: middle;
2731
}
28-
}
29-
.mde-stroke {
30-
fill: none;
31-
stroke: #444;
32-
stroke-linecap: round;
33-
stroke-linejoin: round;
34-
stroke-width: 2;
35-
}
36-
.mde-fill {
37-
fill: #444;
38-
}
39-
.mde-even {
40-
fill-rule: evenodd;
41-
}
42-
.mde-thin {
43-
stroke-width: 1;
4432
}
4533
}
4634
}

‎src/components/ToolBar/index.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,31 @@ import { HTMLDivProps, IProps } from '../../common/props';
44
import icon from '../Icon/bar';
55
import './index.less';
66

7-
interface IconType {
7+
export interface IIconProps {
88
[key: string]: HTMLElement
99
}
1010

11-
12-
const barIcons: string[] = ['bold', 'italic', 'strike', 'olist', 'ulist', 'link', 'image', 'quote'];
13-
14-
export interface IToolBarProps extends IProps, HTMLDivProps {
11+
export interface IToolBarProps extends IProps {
1512
prefixCls: string,
13+
toolbars: string[],
14+
onClick: (type: string) => void,
1615
}
1716

1817
export default class ToolBar extends React.PureComponent<IToolBarProps, {}> {
1918
public static displayName = 'ToolBar';
2019
public static defaultProps: IToolBarProps = {
20+
onClick: () => null,
2121
prefixCls: 'md-editor',
22+
toolbars: ['bold', 'italic', 'header', 'strike', 'underline', 'olist', 'ulist', 'todo', 'link', 'image', 'quote', 'preview'],
2223
};
2324
public render() {
24-
const { prefixCls, className, ...htmlProps } = this.props;
25+
const { prefixCls, className, onClick, toolbars, ...htmlProps } = this.props;
2526
return (
2627
<div className={classnames(`${prefixCls}-toolbar`, className)} {...htmlProps}>
27-
{barIcons.map((name: string, key) => {
28-
const Icon = (icon as unknown as IconType)[name];
28+
{toolbars.map((name: string, key) => {
29+
const Icon = (icon as unknown as IIconProps)[name];
2930
return (
30-
<button key={key}> {Icon} </button>
31+
<button key={key} onClick={onClick.bind(this, name)}> {Icon} </button>
3132
);
3233
})}
3334
</div>

0 commit comments

Comments
 (0)