feat(TabInsert): use iconfont

docs/plugin.md

@@ -26,6 +26,7 @@ Those plugins are built-in plugin:
 * mode-toggle: toggle view mode
 * full-screen: toggle full screen
 * auto-resize: auto-resize plugin (disabled by default)
+* tab-insert: insert tab or spaces (disabled by default)
 ```js
 [
   'header',
@@ -66,7 +67,7 @@ Editor.use(Plugins.AutoResize, {
 });
 ```
 ### Use tab-insert plugin
-By default, Markdown Editor will lose input focus when user tpye a Tab key. You can use the built-in tab-insert plugin to solve this problem.
+By default, Markdown Editor will lose input focus when user type a Tab key. You can use the built-in tab-insert plugin to solve this problem.
 ```js
 import Editor, { Plugins } from 'react-markdown-editor-lite';
 

docs/plugin.zh-CN.md

@@ -26,6 +26,7 @@
 * mode-toggle：显示模式切换
 * full-screen：全屏模式切换
 * auto-resize：编辑器自动调整尺寸插件（默认不启用）
+* tab-insert：插入制表符或空格（默认不启用）
 ```js
 [
   'header',
@@ -66,7 +67,7 @@ Editor.use(Plugins.AutoResize, {
 });
 ```
 ### 使用 tab 输入插件
-在默认情况下，用户在 Markdown 编辑区按下 Tab 键时会失去输入焦点，可以使用内置的 tab 输入插件来解决这个问题。
+在默认情况下，用户在 Markdown 编辑区按下 Tab 键时会失去输入焦点，可以使用内置的 Tab 输入插件来解决这个问题。
 ```js
 import Editor, { Plugins } from 'react-markdown-editor-lite';
 

package.json

@@ -47,6 +47,7 @@
     "@nowa/solution-react-component": "^0.2.1",
     "@testing-library/react": "^10.2.1",
     "@types/chai": "^4.2.7",
+    "@types/classnames": "^2.2.11",
     "@types/markdown-it": "^0.0.8",
     "@types/mocha": "^5.2.7",
     "@types/node": "^13.5.1",
@@ -108,5 +109,8 @@
       "html"
     ],
     "all": true
+  },
+  "dependencies": {
+    "classnames": "^2.2.6"
   }
 }

src/components/Icon/fonts/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {font-family: "rmel-iconfont";
-  src: url('iconfont.eot?t=1582613725792'); /* IE9 */
-  src: url('iconfont.ttf?t=1582613725792') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  src: url('iconfont.eot?t=1609742889962'); /* IE9 */
+  src: url('iconfont.ttf?t=1609742889962') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
 }
 
 .rmel-iconfont {
@@ -11,6 +11,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.rmel-icon-tab:before {
+  content: "\e76d";
+}
+
 .rmel-icon-keyboard:before {
   content: "\ed80";
 }

src/i18n/lang/en-US.ts

@@ -23,4 +23,6 @@ export default {
   btnModePreview: 'Only display preview',
   btnModeAll: 'Display both editor and preview',
   selectTabMap: 'Actually input when typing a Tab key',
+  tab: 'Tab',
+  spaces: 'Spaces',
 };

src/i18n/lang/zh-CN.ts

@@ -23,4 +23,6 @@ export default {
   btnModePreview: '仅显示预览',
   btnModeAll: '显示编辑器与预览',
   selectTabMap: '按下 Tab 键时实际的输入',
+  tab: '制表符',
+  spaces: '空格',
 };

src/plugins/header/index.tsx

@@ -28,6 +28,7 @@ export default class Header extends PluginComponent<State> {
       show: true,
     });
   }
+
   private hide() {
     this.setState({
       show: false,

src/plugins/tabInsert/TabMapList.less

@@ -1,11 +1,14 @@
 .rc-md-editor {
   .tab-map-list {  
     .list-item {
-      width: 70px;
+      width: 120px;
       box-sizing: border-box;
       &:hover {
         background: #f5f5f5
       }
+      &.active {
+        font-weight: bold;
+      }
     }
   }
 }

src/plugins/tabInsert/TabMapList.tsx

@@ -1,7 +1,10 @@
+import classNames from 'classnames';
 import * as React from 'react';
+import i18n from '../../i18n';
 import './TabMapList.less';
 
 interface TabMapListProps {
+  value: number;
   onSelectMapValue?: (mapValue: number) => void;
 }
 
@@ -12,21 +15,26 @@ class TabMapList extends React.Component<TabMapListProps, any> {
       onSelectMapValue(mapValue);
     }
   }
+
   render() {
+    const { value } = this.props;
+
     return (
       <ul className="tab-map-list">
-        <li className="list-item">
-          <div onClick={this.handleSelectMapValue.bind(this, 1)}>1 Tab</div>
-        </li>
-        <li className="list-item">
-          <div onClick={this.handleSelectMapValue.bind(this, 2)}>2 Spaces</div>
-        </li>
-        <li className="list-item">
-          <div onClick={this.handleSelectMapValue.bind(this, 4)}>4 Spaces</div>
-        </li>
-        <li className="list-item">
-          <div onClick={this.handleSelectMapValue.bind(this, 8)}>8 Spaces</div>
-        </li>
+        {[1, 2, 4, 8].map(it => {
+          return (
+            <li
+              key={it}
+              className={classNames('list-item', {
+                active: value === it,
+              })}
+            >
+              <div onClick={this.handleSelectMapValue.bind(this, it)}>
+                {it === 1 ? i18n.get('tab') : `${it} ${i18n.get('spaces')}`}
+              </div>
+            </li>
+          );
+        })}
       </ul>
     );
   }

src/plugins/tabInsert/index.tsx

@@ -10,6 +10,7 @@ import { PluginComponent } from '../Plugin';
 import DropList from '../../components/DropList';
 import i18n from '../../i18n';
 import TabMapList from './TabMapList';
+import Icon from '../../components/Icon';
 
 /**
  * @field tabMapValue:  Number of spaces will be inputted. Especially, note that 1 means a '\t' instead of ' '.
@@ -53,11 +54,13 @@ export default class TabInsert extends PluginComponent<TabInsertState> {
       show: true,
     });
   }
+
   private hide() {
     this.setState({
       show: false,
     });
   }
+
   private handleChangeMapValue(mapValue: number) {
     this.setState({
       tabMapValue: mapValue,
@@ -82,12 +85,9 @@ export default class TabInsert extends PluginComponent<TabInsertState> {
         onClick={this.show}
         onMouseLeave={this.hide}
       >
-        <span>
-          {'\u2B7E'}
-          {this.state.tabMapValue}
-        </span>
+        <Icon type="tab" />
         <DropList show={this.state.show} onClose={this.hide}>
-          <TabMapList onSelectMapValue={this.handleChangeMapValue} />
+          <TabMapList value={this.state.tabMapValue} onSelectMapValue={this.handleChangeMapValue} />
         </DropList>
       </span>
     );

yarn.lock

@@ -1127,6 +1127,11 @@
   resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.12.tgz#6160ae454cd89dae05adc3bb97997f488b608201"
   integrity sha512-aN5IAC8QNtSUdQzxu7lGBgYAOuU1tmRU4c9dIq5OKGf/SBVjXo+ffM2wEjudAWbgpOhy60nLoAGH1xm8fpCKFQ==
 
+"@types/classnames@^2.2.11":
+  version "2.2.11"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.11.tgz#2521cc86f69d15c5b90664e4829d84566052c1cf"
+  integrity sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -2371,6 +2376,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 clean-css@4.2.x:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"