[base-ui] 修改 b-md-editor

Summary: - 增加 shift + tab Test Plan: none Reviewers: #web_reviewers, kuilin Reviewed By: #web_reviewers, kuilin Differential Revision: https://code.yangqianguan.com/D50147
sin-group · Oct 11, 2018 · 16282a2 · 16282a2
1 parent 94663c1
commit 16282a2
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 9 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/src/component/b-md-editor/action/tab.js b/src/component/b-md-editor/action/tab.js
@@ -4,26 +4,38 @@
  * @file tab
  */
 
+const TabString = '    ';
+
 export default {
     name: 'tab',
 
     modify({text, selectionStart, selectionEnd}) {
         const lineFirstCharIndex = text.lastIndexOf('\n', selectionStart - 1) + 1;
+
+        const preText = text.slice(0, lineFirstCharIndex);
+        const selectionFirstLineText = text.slice(lineFirstCharIndex, selectionStart);
         const selectionText = text.slice(selectionStart, selectionEnd);
+        const postText = text.slice(selectionEnd);
+
+        let newSelectionFirstLineText = selectionFirstLineText;
+        let newSelectionText = selectionText;
 
-        let newText;
         if (selectionStart === selectionEnd) {
-            newText = `${text.slice(0, selectionStart)}    ${text.slice(selectionStart)}`;
+            newSelectionText = TabString;
         } else {
-            newText = `${text.slice(0, lineFirstCharIndex)
-                }    ${text.slice(lineFirstCharIndex, selectionStart)
-                }${selectionText.replace(/\n/g, '\n    ')}${text.slice(selectionEnd)}`;
+            newSelectionFirstLineText = `${TabString}${selectionFirstLineText}`;
+            newSelectionText = selectionText.replace(/\n/g, `\n${TabString}`);
+            if (selectionText[selectionText.length - 1] === '\n') {
+                newSelectionText = newSelectionText.slice(0, newSelectionText.length - TabString.length);
+            }
         }
 
+        const newText = `${preText}${newSelectionFirstLineText}${newSelectionText}${postText}`;
+
         const lengthRevise = newText.length - text.length;
         return {
             text: newText,
-            selectionStart: selectionStart + 4,
+            selectionStart: selectionStart + TabString.length,
             selectionEnd: selectionEnd + lengthRevise
         };
     }

diff --git a/src/component/b-md-editor/action/untab.js b/src/component/b-md-editor/action/untab.js
@@ -0,0 +1,61 @@
+/**
+ * @author yutiangan
+ * @date 2018/10/10-15:03
+ * @file untab
+ */
+
+const TabReg = new RegExp(/(\n( {4})*( {1,3})+)|(\n( {4})+)|(\n( {1,3}))/g);
+
+const TabSpaceReg = new RegExp(/\n(\s)+/);
+
+export default {
+    name: 'untab',
+
+    modify({text, selectionStart, selectionEnd}) {
+        const lineFirstCharIndex = text.lastIndexOf('\n', selectionStart - 1) + 1;
+
+        let preText = text.slice(0, lineFirstCharIndex - 1);
+        let selectionFirstLineText = text.slice(lineFirstCharIndex - 1, selectionStart);
+        if (!lineFirstCharIndex) {
+            preText = '';
+            selectionFirstLineText = `\n${text.slice(0, selectionStart)}`;
+        }
+        const selectionText = text.slice(selectionStart, selectionEnd);
+        const postText = text.slice(selectionEnd);
+
+        let newSelectionStart = selectionStart;
+        let newSelectionFirstLineText = selectionFirstLineText;
+        let newSelectionText = selectionText;
+
+        if (selectionFirstLineText.match(TabReg)) {
+            const spaceNum = selectionFirstLineText.match(TabReg)[0].length - 1;
+            const length = spaceNum % 4 ? spaceNum % 4 : 4;
+            newSelectionFirstLineText = `\n${selectionFirstLineText.slice(length + 1)}`;
+            newSelectionStart -= length;
+        }
+        if (selectionText.match(TabReg)) {
+            const selectionRestTextArray = selectionText.split('\n');
+            newSelectionText = selectionRestTextArray[0];
+            for (let i = 1; i < selectionRestTextArray.length; i += 1) {
+                let length = 0;
+                const spaces = `\n${selectionRestTextArray[i]}`.match(TabSpaceReg);
+                if (spaces) {
+                    length = (spaces[0].length - 1) % 4 ? (spaces[0].length - 1) % 4 : 4;
+                }
+                newSelectionText += `\n${selectionRestTextArray[i].slice(length)}`;
+            }
+        }
+        if (!lineFirstCharIndex) {
+            newSelectionFirstLineText = newSelectionFirstLineText.slice(1);
+        }
+
+        const newText = `${preText}${newSelectionFirstLineText}${newSelectionText}${postText}`;
+
+        const lengthRevise = newText.length - text.length;
+        return {
+            text: newText,
+            selectionStart: newSelectionStart,
+            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
@@ -36,6 +36,7 @@
 
     import bold from './action/bold';
     import code from './action/code';
+    import untab from './action/untab';
     import header from './action/header';
     import italic from './action/italic';
     import link from './action/link';
@@ -61,6 +62,10 @@
         [KeyCodeMap.tab]: tab
     };
 
+    const KeyCodeShiftEventMap = {
+        [KeyCodeMap.tab]: untab
+    };
+
     export default {
         name: 'BMdEditor',
 
@@ -155,11 +160,17 @@
             },
 
             handleKeyDown(event) {
+                if (event.shiftKey && KeyCodeShiftEventMap[event.keyCode]) {
+                    event.preventDefault();
+                    this.callAction(KeyCodeShiftEventMap[event.keyCode]);
+                    return;
+                }
                 if (KeyCodeEventMap[event.keyCode]) {
                     event.preventDefault();
                     this.callAction(KeyCodeEventMap[event.keyCode]);
+
                 }
-                return false;
+
             },
 
             async handleInsert(action) {