Merge pull request #2 from mdnice/develop

375ro · web-flow · commit 901045681821 · 2019-11-03T19:54:03.000+08:00
update develop branch
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@ v1.4.0 发布日期：2019-11-02
 - 修复 Safari 无法复制问题
 - 新增主题「极客黑」、「简」
 - 修改主题「蓝山」为「前端之巅同款」
+- 新增快捷键
 
 v1.3.1 发布日期：2019-10-28
 
diff --git a/src/component/Dialog/FormDialog.js b/src/component/Dialog/FormDialog.js
@@ -1,6 +1,6 @@
 import React from "react";
 import {observer, inject} from "mobx-react";
-import {Modal, Input, Form, message} from "antd";
+import {Modal, InputNumber, Form} from "antd";
 
 @inject("dialog")
 @inject("content")
@@ -26,7 +26,7 @@ class FormDialog extends React.Component {
         appendText += "     |";
       }
     }
-    return appendText + (/macintosh|mac\sos\sx+/i.test(navigator.userAgent) ? "\n" : "\r\n");
+    return appendText + (/windows|win32/i.test(navigator.userAgent) ? "\r\n" : "\n");
   };
 
   buildFormFormat = (rowNum, columnNum) => {
@@ -41,17 +41,13 @@ class FormDialog extends React.Component {
   };
 
   handleOk = () => {
-    const columnCheck = this.state.columnNum <= 10;
-    const rowCheck = this.state.rowNum <= 10;
-    if (columnCheck && rowCheck) {
-      const {markdownEditor} = this.props.content;
-      const cursor = markdownEditor.getCursor();
-      const text = this.buildFormFormat(this.state.rowNum, this.state.columnNum);
-      markdownEditor.replaceSelection(text, cursor);
+    const {markdownEditor} = this.props.content;
+    const cursor = markdownEditor.getCursor();
+    const text = this.buildFormFormat(this.state.rowNum, this.state.columnNum);
+    markdownEditor.replaceSelection(text, cursor);
 
-      const content = markdownEditor.getValue();
-      this.props.content.setContent(content);
-    } else message.error(`${rowCheck ? "" : "行数"}${columnCheck ? "" : "列数"}不能大于10`);
+    const content = markdownEditor.getValue();
+    this.props.content.setContent(content);
 
     this.handleCancel();
   };
@@ -61,12 +57,6 @@ class FormDialog extends React.Component {
     this.props.dialog.setFormOpen(false);
   };
 
-  handleChange = (value, target) => {
-    this.setState({
-      [target]: value,
-    });
-  };
-
   render() {
     return (
       <Modal
@@ -77,37 +67,32 @@ class FormDialog extends React.Component {
         onOk={this.handleOk}
         onCancel={this.handleCancel}
       >
-        <div style={style.column}>
-          <Form.Item label="行">
-            <Input
-              placeholder="请输入表格的行数"
-              value={this.state.rowNum}
-              onChange={(e) => this.handleChange(e.target.value, "rowNum")}
-            />
-          </Form.Item>
-          <Form.Item label="列">
-            <Input
-              placeholder="请输入表格的列数"
-              value={this.state.columnNum}
-              onChange={(e) => this.handleChange(e.target.value, "columnNum")}
-            />
-          </Form.Item>
-        </div>
+        <Form.Item label="行数" labelCol={{span: 4}}>
+          <InputNumber
+            min={2}
+            max={10}
+            value={this.state.rowNum}
+            defaultValue={1}
+            onChange={(value) => this.setState({rowNum: value})}
+          />
+        </Form.Item>
+        <Form.Item label="列数" labelCol={{span: 4}}>
+          <InputNumber
+            min={1}
+            max={10}
+            value={this.state.columnNum}
+            defaultValue={1}
+            onChange={(value) => this.setState({columnNum: value})}
+          />
+        </Form.Item>
       </Modal>
     );
   }
 }
 
 const initialState = {
-  columnNum: 0,
-  rowNum: 0,
-};
-
-const style = {
-  column: {
-    display: "flex",
-    flexDirection: "column",
-  },
+  columnNum: 1,
+  rowNum: 2,
 };
 
 export default FormDialog;
diff --git a/src/component/Form.js b/src/component/Form.js
@@ -0,0 +1,37 @@
+import React, {Component} from "react";
+import {inject, observer} from "mobx-react";
+import {Tooltip, Button} from "antd";
+
+import {ENTER_DELAY, LEAVE_DELAY} from "../utils/constant";
+import SvgIcon from "../icon";
+
+@inject("dialog")
+@observer
+class Form extends Component {
+  showModal = () => {
+    this.props.dialog.setFormOpen(true);
+  };
+
+  render() {
+    return (
+      <Tooltip placement="bottom" mouseEnterDelay={ENTER_DELAY} mouseLeaveDelay={LEAVE_DELAY} title="表格">
+        <Button style={style.btnPadding} onClick={this.showModal}>
+          <SvgIcon name="form" style={style.svgIcon} />
+        </Button>
+      </Tooltip>
+    );
+  }
+}
+
+const style = {
+  btnPadding: {
+    padding: "0",
+  },
+  svgIcon: {
+    padding: "6px 7px 10px 7px",
+    width: "33px",
+    height: "33px",
+  },
+};
+
+export default Form;
diff --git a/src/icon/Form.js b/src/icon/Form.js
@@ -0,0 +1,11 @@
+import React from "react";
+import "./index.css";
+
+export default ({fill = "rgba(0,0,0,0.65)", style = {}, className = "icon", viewBox = "0 0 1024 1024"}) => (
+  <svg style={style} viewBox={viewBox} className={className} fill={fill} xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 208H676V232h212v136z m0 224H676V432h212v160zM412 432h200v160H412V432z m200-64H412V232h200v136z m-476 64h212v160H136V432z m0-200h212v136H136V232z m0 424h212v136H136V656z m276 0h200v136H412V656z m476 136H676V656h212v136z"
+      p-id="1250"
+    />
+  </svg>
+);
diff --git a/src/icon/index.js b/src/icon/index.js
@@ -8,6 +8,7 @@ import Del from "./Del";
 import Down from "./Down";
 import Environment from "./Environment";
 import Font from "./Font";
+import Form from "./Form";
 import FullScreen from "./FullScreen";
 import GitHub from "./GitHub";
 import Inbox from "./Inbox";
@@ -66,6 +67,8 @@ export default (props) => {
       return <PC {...props} />;
     case "mobile":
       return <Mobile {...props} />;
+    case "form":
+      return <Form {...props} />;
     default:
       return <svg />;
   }
diff --git a/src/layout/Navbar.js b/src/layout/Navbar.js
@@ -8,6 +8,7 @@ import Copy from "../component/Copy";
 import Reset from "../component/Reset";
 import Image from "../component/Image";
 import Link from "../component/Link";
+import Form from "../component/Form";
 import Code from "../component/Code";
 import Italic from "../component/Italic";
 import Bold from "../component/Bold";
@@ -40,6 +41,7 @@ class Navbar extends Component {
             <ButtonGroup style={style.btnGroupMargin}>
               <Link />
               <Image />
+              <Form />
             </ButtonGroup>
             <ButtonGroup style={style.btnGroupRight}>
               <Reset />
diff --git a/src/layout/StyleEditor.js b/src/layout/StyleEditor.js
@@ -26,9 +26,9 @@ class StyleEditor extends Component {
   getStyleInstance = (instance) => {
     if (instance) {
       this.styleEditor = instance.editor;
-      this.styleEditor.on("keyup", (cm, e) => {
-        if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
-          cm.showHint(e);
+      this.styleEditor.on("keyup", (cm, event) => {
+        if ((event.keyCode >= 65 && event.keyCode <= 90) || event.keyCode === 189) {
+          cm.showHint({completeSingle: false});
         }
       });
     }
diff --git a/src/utils/hotkey.js b/src/utils/hotkey.js
@@ -2,6 +2,7 @@ const handlePressHotkey = (type, content) => {
   const {markdownEditor} = content;
   const cursor = markdownEditor.getCursor();
   const selection = markdownEditor.getSelection();
+  const wrapChar = /windows|win32/i.test(navigator.userAgent) ? "\r\n" : "\n";
   switch (type) {
     case "Bold":
       markdownEditor.replaceSelection(`**${selection}**`, cursor);
@@ -13,6 +14,9 @@ const handlePressHotkey = (type, content) => {
       markdownEditor.replaceSelection(`*${selection}*`, cursor);
       break;
     case "Code":
+      markdownEditor.replaceSelection(`${wrapChar}\`\`\`${wrapChar}${selection}${wrapChar}\`\`\`${wrapChar}`);
+      break;
+    case "InlineCode":
       markdownEditor.replaceSelection(`\`${selection}\``, cursor);
       break;
     case "H1":
@@ -24,12 +28,6 @@ const handlePressHotkey = (type, content) => {
     case "H3":
       markdownEditor.replaceSelection(`### ${selection}`, cursor);
       break;
-    case "H4":
-      markdownEditor.replaceSelection(`#### ${selection}`, cursor);
-      break;
-    case "H5":
-      markdownEditor.replaceSelection(`##### ${selection}`, cursor);
-      break;
     default:
       return;
   }
@@ -39,80 +37,75 @@ const handlePressHotkey = (type, content) => {
 };
 
 const bindHotkeys = (content, dialog) =>
-  /macintosh|mac\sos\s+x/i.test(navigator.userAgent)
+  // /macintosh|mac\sos\s+x/i.test(navigator.userAgent)
+  /windows|win32/i.test(navigator.userAgent)
     ? {
-        "Cmd-B": () => {
+        "Ctrl-B": () => {
           handlePressHotkey("Bold", content);
         },
-        "Cmd-U": () => {
+        "Ctrl-U": () => {
           handlePressHotkey("Del", content);
         },
-        "Cmd-I": () => {
+        "Ctrl-I": () => {
           handlePressHotkey("Italic", content);
         },
-        "Cmd-Alt-C": () => {
+        "Ctrl-Alt-C": () => {
           handlePressHotkey("Code", content);
         },
-        "Cmd-Alt-1": () => {
+        "Ctrl-Alt-F": () => {
+          handlePressHotkey("InlineCode", content);
+        },
+        "Ctrl-Alt-1": () => {
           handlePressHotkey("H1", content);
         },
-        "Cmd-Alt-2": () => {
+        "Ctrl-Alt-2": () => {
           handlePressHotkey("H2", content);
         },
-        "Cmd-Alt-3": () => {
+        "Ctrl-Alt-3": () => {
           handlePressHotkey("H3", content);
         },
-        "Cmd-Alt-4": () => {
-          handlePressHotkey("H4", content);
-        },
-        "Cmd-Alt-5": () => {
-          handlePressHotkey("H5", content);
-        },
-        "Cmd-K": () => {
+        "Ctrl-K": () => {
           dialog.setLinkOpen(true);
         },
-        "Cmd-Alt-I": () => {
+        "Ctrl-Alt-I": () => {
           dialog.setImageOpen(true);
         },
-        "Cmd-Alt-T": () => {
+        "Ctrl-Alt-T": () => {
           dialog.setFormOpen(true);
         },
       }
     : {
-        "Ctrl-B": () => {
+        "Cmd-B": () => {
           handlePressHotkey("Bold", content);
         },
-        "Ctrl-U": () => {
+        "Cmd-U": () => {
           handlePressHotkey("Del", content);
         },
-        "Ctrl-I": () => {
+        "Cmd-I": () => {
           handlePressHotkey("Italic", content);
         },
-        "Ctrl-Alt-F": () => {
+        "Cmd-Alt-C": () => {
           handlePressHotkey("Code", content);
         },
-        "Ctrl-Alt-1": () => {
+        "Cmd-Alt-F": () => {
+          handlePressHotkey("InlineCode", content);
+        },
+        "Cmd-Alt-1": () => {
           handlePressHotkey("H1", content);
         },
-        "Ctrl-Alt-2": () => {
+        "Cmd-Alt-2": () => {
           handlePressHotkey("H2", content);
         },
-        "Ctrl-Alt-3": () => {
+        "Cmd-Alt-3": () => {
           handlePressHotkey("H3", content);
         },
-        "Ctrl-Alt-4": () => {
-          handlePressHotkey("H4", content);
-        },
-        "Ctrl-Alt-5": () => {
-          handlePressHotkey("H5", content);
-        },
-        "Ctrl-K": () => {
+        "Cmd-K": () => {
           dialog.setLinkOpen(true);
         },
-        "Ctrl-Alt-I": () => {
+        "Cmd-Alt-I": () => {
           dialog.setImageOpen(true);
         },
-        "Ctrl-Alt-T": () => {
+        "Cmd-Alt-T": () => {
           dialog.setFormOpen(true);
         },
       };
diff --git a/src/utils/mdMirror.css b/src/utils/mdMirror.css
@@ -18,6 +18,11 @@
 .cm-s-md-mirror div.CodeMirror-selected {
   background: #e0e0e0;
 }
+
+.cm-s-md-mirror pre.CodeMirror-line {
+  word-break: break-all;
+}
+
 .cm-s-md-mirror .CodeMirror-line::selection,
 .cm-s-md-mirror .CodeMirror-line > span::selection,
 .cm-s-md-mirror .CodeMirror-line > span > span::selection {
diff --git a/src/utils/styleMirror.css b/src/utils/styleMirror.css
@@ -98,6 +98,25 @@
   background: #dddcdc;
 }
 .cm-s-style-mirror .CodeMirror-matchingbracket {
-  color: rgb(32,32,32) !important;
-  background-color: rgba(0,0,0,0.1) !important;
+  color: rgb(32, 32, 32) !important;
+  background-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+.CodeMirror-hints {
+  background-color: rgb(245, 245, 245);
+  font-size: 14px;
+  font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace;
+}
+
+.CodeMirror-hints li {
+  line-height: 20px;
+}
+
+li.CodeMirror-hint-active  {
+  color: black;
+  background-color: rgb(202,222,185);
+}
+
+.CodeMirror-hints li:hover {
+  background-color: rgb(224, 224, 224);
 }

Original file line number	Diff line number	Diff line change
`@@ -26,9 +26,9 @@ class StyleEditor extends Component {`
`26`	`26`	`getStyleInstance = (instance) => {`
`27`	`27`	`if (instance) {`
`28`	`28`	`this.styleEditor = instance.editor;`
`29`		`- this.styleEditor.on("keyup", (cm, e) => {`
`30`		`- if ((e.keyCode >= 65 && e.keyCode <= 90) \|\| e.keyCode === 189) {`
`31`		`- cm.showHint(e);`
	`29`	`+ this.styleEditor.on("keyup", (cm, event) => {`
	`30`	`+ if ((event.keyCode >= 65 && event.keyCode <= 90) \|\| event.keyCode === 189) {`
	`31`	`+ cm.showHint({completeSingle: false});`
`32`	`32`	`}`
`33`	`33`	`});`
`34`	`34`	`}`