[base-ui] 修改 editor

Summary: - 增加 tab - 修改 b-button size-sm 的 font-weight Test Plan: none Reviewers: #web_reviewers, panezhang Reviewed By: #web_reviewers, panezhang Subscribers: panezhang Differential Revision: https://code.yangqianguan.com/D50117
sin-group · Oct 10, 2018 · 5701252 · 5701252
1 parent eedc95d
commit 5701252
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 5 deletions.
diff --git a/dist/base-ui.css b/dist/base-ui.css
diff --git a/dist/base-ui.min.js b/dist/base-ui.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "base-ui",
-  "version": "0.0.139",
+  "version": "0.0.140",
   "description": "A component library for Better Vue developmemt",
   "main": "./dist/base-ui.min.js",
   "repository": {

diff --git a/src/component/b-md-editor/action/tab.js b/src/component/b-md-editor/action/tab.js
@@ -0,0 +1,30 @@
+/**
+ * @author yutiangan
+ * @date 2018/10/10-13:32
+ * @file tab
+ */
+
+export default {
+    name: 'tab',
+
+    modify({text, selectionStart, selectionEnd}) {
+        const lineFirstCharIndex = text.lastIndexOf('\n', selectionStart - 1) + 1;
+        const selectionText = text.slice(selectionStart, selectionEnd);
+
+        let newText;
+        if (selectionStart === selectionEnd) {
+            newText = `${text.slice(0, selectionStart)}    ${text.slice(selectionStart)}`;
+        } else {
+            newText = `${text.slice(0, lineFirstCharIndex)
+                }    ${text.slice(lineFirstCharIndex, selectionStart)
+                }${selectionText.replace(/\n/g, '\n    ')}${text.slice(selectionEnd)}`;
+        }
+
+        const lengthRevise = newText.length - text.length;
+        return {
+            text: newText,
+            selectionStart: selectionStart + 4,
+            selectionEnd: selectionEnd + lengthRevise
+        };
+    }
+};
diff --git a/src/component/b-md-editor/b-md-editor.vue b/src/component/b-md-editor/b-md-editor.vue
@@ -21,7 +21,8 @@
                 ref="textarea"
                 :value="value"
                 class="textarea"
-                @input="onInput"></textarea>
+                @input="onInput"
+                @keydown="handleKeyDown"></textarea>
 
             <b-md-view :md-text="value" class="md-view"/>
         </div>
@@ -31,12 +32,15 @@
 
 <script type="text/babel">
 
+    import KeyCodeMap from '../../util/keyCodeMap';
+
     import bold from './action/bold';
     import code from './action/code';
     import header from './action/header';
     import italic from './action/italic';
     import link from './action/link';
     import quote from './action/quote';
+    import tab from './action/tab';
 
     const DEFAULT_ACTION_LIST = [
         header,
@@ -53,6 +57,10 @@
         actionOrder: null // 定义 action 展示的顺序，用 name 指定
     };
 
+    const KeyCodeEventMap = {
+        [KeyCodeMap.tab]: tab
+    };
+
     export default {
         name: 'BMdEditor',
 
@@ -146,6 +154,14 @@
                 return null;
             },
 
+            handleKeyDown(event) {
+                if (KeyCodeEventMap[event.keyCode]) {
+                    event.preventDefault();
+                    this.callAction(KeyCodeEventMap[event.keyCode]);
+                }
+                return false;
+            },
+
             async handleInsert(action) {
                 const {textarea, text, selectionText, selectionStart, selectionEnd} = this;
                 const replaceText = await action.insert(selectionText);

diff --git a/src/style/component/b-button.scss b/src/style/component/b-button.scss
@@ -224,7 +224,7 @@
     &.size-sm {
         button {
             font-size: 10px;
-            font-weight: 300;
+            font-weight: 350;
             padding: 0 10px;
             min-height: 24px;
         }