Skip to content

Commit a0427a0

Browse files
jaywcjlovejaywcjlove
committed
Add ToolBar component.
1 parent 4368816 commit a0427a0

File tree

8 files changed

+193
-48
lines changed

8 files changed

+193
-48
lines changed

‎.babelrc‎

Lines changed: 9 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"presets": [
3-
"@babel/env",
3+
"@babel/preset-env",
44
"@babel/preset-react",
55
"@babel/typescript"
66
],
@@ -33,6 +33,14 @@
3333
[ "babel-plugin-transform-rename-import", { "original": "^(.+?)\\.less$", "replacement": "$1.css" } ]
3434
]
3535
},
36+
"esmdev": {
37+
"presets": [
38+
[ "@babel/preset-env", { "modules": false } ]
39+
],
40+
"plugins": [
41+
[ "@babel/plugin-transform-runtime", { "useESModules": true } ]
42+
]
43+
},
3644
"cjs": {
3745
"presets": [
3846
[ "@babel/preset-env", { "modules": false } ]
@@ -44,47 +52,3 @@
4452
}
4553
}
4654
}
47-
48-
// {
49-
// "presets": [
50-
// "@babel/preset-react",
51-
// ["@babel/preset-typescript", {
52-
// "isTSX": true,
53-
// "allExtensions": true
54-
// }]
55-
// ],
56-
// "env": {
57-
// "esm": {
58-
// "presets": [
59-
// "@babel/preset-react",
60-
// [
61-
// "@babel/preset-typescript",
62-
// {
63-
// "isTSX": true,
64-
// "allExtensions": true
65-
// }
66-
// ]
67-
// ],
68-
// "plugins": [
69-
// // [
70-
// // "@babel/plugin-transform-runtime",
71-
// // {
72-
// // "useESModules": true
73-
// // }
74-
// // ],
75-
// // [
76-
// // "babel-plugin-transform-rename-import",
77-
// // {
78-
// // "original": "^(.+?)\\.less$",
79-
// // "replacement": "$1.css"
80-
// // }
81-
// // ]
82-
// ]
83-
// },
84-
// "cjs": {
85-
// "presets": [
86-
// // "@babel/preset-env",
87-
// ],
88-
// }
89-
// }
90-
// }

‎package-lock.json‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@
1616
"build": "npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:types",
1717
"build:types": "tsc -p ./src --emitDeclarationOnly --outDir typing",
1818
"build:cjs": "BABEL_ENV=cjs babel ./src --out-dir cjs --extensions \".ts,.tsx\" --source-maps inline --delete-dir-on-start --verbose",
19+
"build:watch:esm": "BABEL_ENV=esmdev babel ./src --out-dir esm --extensions \"*.ts,.tsx\" --source-maps true --copy-files --delete-dir-on-start --verbose",
1920
"build:esm": "BABEL_ENV=esm babel ./src --out-dir esm --extensions \"*.ts,.tsx\" --source-maps true --delete-dir-on-start --verbose",
2021
"build:umd": "BABEL_ENV=umd babel ./src --out-dir umd --extensions \"*.ts,.tsx\" --source-maps true --delete-dir-on-start --verbose",
21-
"dev": "npm run build:cjs -- --watch & npm run build:esm -- --watch & npm run build:umd -- --watch",
22+
"dev": "npm run build:cjs -- --watch & npm run build:watch:esm -- --watch & npm run build:umd -- --watch",
2223
"compile:esnext": "tsc -p ./src -t esnext --outDir esnext",
2324
"compile:css": "compile-less -d src --combine dist/markdown-editor.css",
2425
"doc": "BABEL_ENV=cjs npm run doc:dev",
@@ -44,6 +45,7 @@
4445
"@babel/preset-env": "^7.4.3",
4546
"@babel/preset-react": "^7.0.0",
4647
"@babel/preset-typescript": "^7.3.3",
48+
"@types/classnames": "^2.2.7",
4749
"@types/jest": "^24.0.11",
4850
"@types/prop-types": "^15.7.0",
4951
"@types/react": "^16.8.10",

‎src/components/Icon/bar.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from 'react';
2+
3+
export default {
4+
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" />
8+
</svg>
9+
),
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" />
15+
</svg>
16+
),
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" />
21+
</svg>
22+
),
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" />
29+
</svg>
30+
),
31+
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" />
40+
</svg>
41+
),
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" />
50+
</svg>
51+
),
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" />
57+
</svg>
58+
),
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" />
64+
</svg>
65+
),
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" />
72+
</svg>
73+
),
74+
};

‎src/components/ToolBar/index.less‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@editor-prefix:~"md-editor";
2+
3+
:global {
4+
.@{editor-prefix} {
5+
&-toolbar {
6+
border-bottom: 1px solid #CCC;
7+
background-color: #fbfbfb;
8+
padding: 2px;
9+
border-radius: 3px 3px 0 0;
10+
button {
11+
background: none;
12+
border: none;
13+
cursor: pointer;
14+
outline: 0;
15+
display: inline-block;
16+
height: 24px;
17+
padding: 3px 5px;
18+
width: 28px;
19+
&:hover {
20+
color: #06c;
21+
.mde-stroke {
22+
stroke: #06c;
23+
}
24+
.mde-fill {
25+
fill: #06c;
26+
}
27+
}
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;
44+
}
45+
}
46+
}
47+
}

‎src/components/ToolBar/index.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import classnames from 'classnames';
2+
import * as React from "react";
3+
import { HTMLDivProps, IProps } from '../../common/props';
4+
import icon from '../Icon/bar';
5+
import './index.less';
6+
7+
interface IconType {
8+
[key: string]: HTMLElement
9+
}
10+
11+
12+
const barIcons: string[] = ['bold', 'italic', 'strike', 'olist', 'ulist', 'link', 'image', 'quote'];
13+
14+
export interface IToolBarProps extends IProps, HTMLDivProps {
15+
prefixCls: string,
16+
}
17+
18+
export default class ToolBar extends React.PureComponent<IToolBarProps, {}> {
19+
public static displayName = 'ToolBar';
20+
public static defaultProps: IToolBarProps = {
21+
prefixCls: 'md-editor',
22+
};
23+
public render() {
24+
const { prefixCls, className, ...htmlProps } = this.props;
25+
return (
26+
<div className={classnames(`${prefixCls}-toolbar`, className)} {...htmlProps}>
27+
{barIcons.map((name: string, key) => {
28+
const Icon = (icon as unknown as IconType)[name];
29+
return (
30+
<button key={key}> {Icon} </button>
31+
);
32+
})}
33+
</div>
34+
);
35+
}
36+
}

‎src/index.less‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@editor-prefix:~"md-editor";
2+
3+
:global {
4+
.@{editor-prefix} {
5+
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.2);
6+
border-radius: 3px;
7+
}
8+
}

‎src/index.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
1+
import classnames from 'classnames';
12
import * as React from "react";
23
import { HTMLDivProps, IProps } from './common/props';
4+
import ToolBar from './components/ToolBar';
5+
import './index.less';
36

47
export interface IMarkdownEditorProps extends IProps, HTMLDivProps {
8+
prefixCls: string,
59
value?: string,
610
}
711

812
export default class MarkdownEditor extends React.PureComponent<IMarkdownEditorProps, {}> {
913
public static displayName = 'MarkdownEditor';
1014
public static defaultProps: IMarkdownEditorProps = {
15+
prefixCls: 'md-editor',
1116
value: '',
1217
};
1318
public render() {
14-
// const { className } = this.props;
19+
const { prefixCls, className } = this.props;
1520
return (
16-
<div> tests </div>
21+
<div className={classnames(prefixCls, className)}>
22+
<ToolBar />
23+
tests
24+
</div>
1725
);
1826
}
1927
}

0 commit comments

Comments
 (0)