feat:将navbar和非markdown编辑器隐藏

Author: guanpengchn

src/App.css

@@ -6,22 +6,43 @@
   font-size: 16px;
 }
 
-.text-container {
+.nice-text-container {
   display: flex;
   height: 91vh;
   width: 100%;
 }
+
+.nice-text-container-immersive {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+}
+
+
+.nice-md-editing-immersive {
+  padding: 0px;
+  width: 100%;
+}
+
+.nice-md-editing-immersive .CodeMirror-lines {
+  padding: 20px 10%;
+}
+
 /* 编辑器最多会被分成三份width:33.3%，当两份时根据flex-grow:1伸展 */
-.text-box {
+.nice-md-editing, .nice-style-editing {
   width: 33.3%;
   flex-grow: 1;
   padding: 0 20px 20px 20px;
   word-wrap: break-word;
 }
 
-#marked-text {
+.nice-marked-text {
   display: flex;
   justify-content: center;
+  width: 33.3%;
+  flex-grow: 1;
+  padding: 0 20px 20px 20px;
+  word-wrap: break-word;
 }
 
 .wx-box {
@@ -45,3 +66,7 @@
   background: rgba(0, 0, 0, 0.12);
   box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
 }
+
+.nice-not-md-hide {
+  display: none;
+}

src/App.js

@@ -3,6 +3,7 @@ import CodeMirror from "@uiw/react-codemirror";
 import "codemirror/keymap/sublime";
 import "antd/dist/antd.css";
 import {observer, inject} from "mobx-react";
+import classnames from "classnames";
 
 import Dialog from "./layout/Dialog";
 import Navbar from "./layout/Navbar";
@@ -159,20 +160,40 @@ class App extends Component {
   };
 
   render() {
-    const {codeNum, isStyleEditorOpen, previewType} = this.props.navbar;
+    const {codeNum, isStyleEditorOpen, previewType, isImmersiveEditing} = this.props.navbar;
 
     const parseHtml =
       codeNum === 0
         ? markdownParserWechat.render(this.props.content.content)
         : markdownParser.render(this.props.content.content);
 
+    const mdEditingClass = classnames({
+      "nice-md-editing": !isImmersiveEditing,
+      "nice-md-editing-immersive": isImmersiveEditing,
+    });
+
+    const styleEditingClass = classnames({
+      "nice-style-editing": true,
+      "nice-not-md-hide": isImmersiveEditing,
+    });
+
+    const richTextClass = classnames({
+      "nice-marked-text": true,
+      "nice-not-md-hide": isImmersiveEditing,
+    });
+
+    const textContainerClass = classnames({
+      "nice-text-container": !isImmersiveEditing,
+      "nice-text-container-immersive": isImmersiveEditing,
+    });
+
     return (
       <appContext.Consumer>
         {({defaultTitle}) => (
           <div className="App">
             <Navbar title={defaultTitle} />
-            <div className="text-container">
-              <div className="text-box" onMouseOver={(e) => this.setCurrentIndex(1, e)}>
+            <div className={textContainerClass}>
+              <div className={mdEditingClass} onMouseOver={(e) => this.setCurrentIndex(1, e)}>
                 <CodeMirror
                   value={this.props.content.content}
                   options={{
@@ -192,7 +213,7 @@ class App extends Component {
                   ref={this.getInstance}
                 />
               </div>
-              <div id="marked-text" className="text-box" onMouseOver={(e) => this.setCurrentIndex(2, e)}>
+              <div className={richTextClass} onMouseOver={(e) => this.setCurrentIndex(2, e)}>
                 <div
                   id={BOX_ID}
                   className="wx-box"
@@ -215,7 +236,7 @@ class App extends Component {
               </div>
 
               {isStyleEditorOpen ? (
-                <div className="text-box">
+                <div className={styleEditingClass}>
                   <StyleEditor />
                 </div>
               ) : null}

src/component/FullScreen.js

@@ -1,10 +1,13 @@
 import React, {Component} from "react";
 import {Tooltip, Button} from "antd";
+import {observer, inject} from "mobx-react";
 
 // import fullscreenIcon from "../icon/fullscreen.svg";
 import {ENTER_DELAY, LEAVE_DELAY} from "../utils/constant";
 import SvgIcon from "../icon";
 
+@inject("navbar")
+@observer
 class FullScreen extends Component {
   constructor(props) {
     super(props);
@@ -15,6 +18,9 @@ class FullScreen extends Component {
 
   // fullScreen or !fullScreen
   toggleFullScreen = () => {
+    const {isImmersiveEditing} = this.props.navbar;
+    this.props.navbar.setImmersiveEditing(!isImmersiveEditing);
+
     this.setState((prevState) => ({
       isFullScreen: !prevState.isFullScreen,
     }));

src/layout/Navbar.css

@@ -0,0 +1,44 @@
+.nice-navbar {
+  height: 64px;
+  display: flex;
+  justify-content: space-between;
+  flex: none;
+  padding: 20px;
+  position: relative;
+}
+
+.nice-left-nav {
+  display: flex;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.nice-right-nav {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.nice-btn-group-margin {
+  margin-right: 10px;
+}
+
+.nice-btn-group-right {
+  margin-right: 20px;
+}
+
+.nice-icon-bar {
+  margin-top: 5;
+}
+
+.nice-title {
+  margin-right: 20px;
+  font-weight: bold;
+  font-size: 16px;
+  font-family: Apple Chancery, cursive;
+}
+
+.nice-navbar-hide {
+  display: none;
+}

src/layout/Navbar.js

@@ -1,6 +1,7 @@
 import React, {Component} from "react";
 import {observer, inject} from "mobx-react";
 import {Button} from "antd";
+import classnames from "classnames";
 
 import ThemeSelect from "../component/ThemeSelect";
 import Format from "../component/Format";
@@ -20,38 +21,45 @@ import FullScreen from "../component/FullScreen";
 import About from "../component/About";
 import Font from "../component/Font";
 
+import "./Navbar.css";
+
 const ButtonGroup = Button.Group;
 
 // @inject("userInfo")
-// @observer
+@inject("navbar")
+@observer
 class Navbar extends Component {
   render() {
     const {title} = this.props;
+    const niceNavbarClass = classnames({
+      "nice-navbar": true,
+      "nice-navbar-hide": this.props.navbar.isImmersiveEditing,
+    });
     return (
-      <div style={style.navBar}>
-        <div style={style.leftNav}>
-          {title === "" ? null : <section style={style.title}>{title}</section>}
-          <div style={style.iconBar}>
-            <ButtonGroup style={style.btnGroupMargin}>
+      <div className={niceNavbarClass}>
+        <div className="nice-left-nav">
+          {title === "" ? null : <section className="nice-title">{title}</section>}
+          <div className="nice-icon-bar">
+            <ButtonGroup className="nice-btn-group-margin">
               <Del />
               <Bold />
               <Italic />
               <Code />
             </ButtonGroup>
-            <ButtonGroup style={style.btnGroupMargin}>
+            <ButtonGroup className="nice-btn-group-margin">
               <Link />
               <Image />
               <Form />
             </ButtonGroup>
-            <ButtonGroup style={style.btnGroupMargin}>
+            <ButtonGroup className="nice-btn-group-margin">
               <FullScreen />
               <Font />
               <Reset />
               <About />
             </ButtonGroup>
           </div>
         </div>
-        <div style={style.rightNav}>
+        <div className="nice-right-nav">
           <Copy />
           <ThemeSelect />
           <Format />
@@ -64,40 +72,4 @@ class Navbar extends Component {
   }
 }
 
-const style = {
-  navBar: {
-    height: "64px",
-    display: "flex",
-    justifyContent: "space-between",
-    flex: "none",
-    padding: "20px",
-  },
-  leftNav: {
-    display: "flex",
-    flex: 1,
-    justifyContent: "flex-start",
-    alignItems: "center",
-  },
-  rightNav: {
-    display: "flex",
-    justifyContent: "flex-end",
-    alignItems: "center",
-  },
-  btnGroupMargin: {
-    marginRight: "10px",
-  },
-  btnGroupRight: {
-    marginRight: "20px",
-  },
-  iconBar: {
-    marginTop: 5,
-  },
-  title: {
-    marginRight: "20px",
-    fontWeight: "bold",
-    fontSize: "16px",
-    fontFamily: "Apple Chancery, cursive",
-  },
-};
-
 export default Navbar;

src/store/navbar.js

@@ -6,6 +6,7 @@ import {
   CODE_OPTIONS,
   IS_PASTE_CHECK_OPEN,
   IS_PRETTIER_OPEN,
+  IS_IMMERSIVE_EDITING,
   PREVIEW_TYPE,
 } from "../utils/constant";
 import TEMPLATE from "../template/index";
@@ -18,6 +19,8 @@ class Navbar {
 
   @observable isPrettierOpen = true;
 
+  @observable isImmersiveEditing = false;
+
   @observable templateNum;
 
   @observable codeNum;
@@ -34,6 +37,11 @@ class Navbar {
     this.isPasteCheckOpen = isPasteCheckOpen;
   };
 
+  @action
+  setImmersiveEditing = (isImmersiveEditing) => {
+    this.isImmersiveEditing = isImmersiveEditing;
+  };
+
   @action
   setPrettierOpen = (isPrettierOpen) => {
     this.isPrettierOpen = isPrettierOpen;
@@ -94,6 +102,7 @@ store.templateNum = parseInt(window.localStorage.getItem(TEMPLATE_NUM), 10);
 store.codeNum = parseInt(window.localStorage.getItem(CODE_NUM), 10);
 store.isPasteCheckOpen = window.localStorage.getItem(IS_PASTE_CHECK_OPEN) === "true";
 store.isPrettierOpen = window.localStorage.getItem(IS_PRETTIER_OPEN) === "true";
+store.isImmersiveEditing = window.localStorage.getItem(IS_IMMERSIVE_EDITING) === "false";
 store.previewType = window.localStorage.getItem(PREVIEW_TYPE);
 
 // 初始化代码主题

src/template/content.js

@@ -70,7 +70,7 @@ export default `请使用 **Chrome** 浏览器。
 
 粗体的使用是在需要加粗的文字前后各加两个\`*\`。
 
-而斜体的使用则是在需要斜体的文字前后各加一个\`_\`。
+而斜体的使用则是在需要斜体的文字前后各加一个\`*\`。
 
 如果要使用粗体和斜体，那么就是在需要操作的文字前后加三个\`*\`。如下：
 
@@ -111,8 +111,8 @@ export default `请使用 **Chrome** 浏览器。
 | 姓名   | 年龄 |     工作 |
 | :----- | :--: | -------: |
 | 小可爱 |  18  | 吃可爱多 |
-| 小勇敢 |  20  | 爬勇敢树 |
-| 小机智 |  22  | 看机智书 |
+| 小小勇敢 |  20  | 爬棵勇敢树 |
+| 小小小机智 |  22  | 看一本机智书 |
 
 ### 3.10 图片
 
@@ -142,7 +142,7 @@ export default `请使用 **Chrome** 浏览器。
 | mdnice | 图片只保存一天           |
 | SM.MS  | 失败率高可用性很差       |
 | 阿里云 | 配置繁琐，费用昂贵       |
-| 七牛云 | 需要长期域名替代测试域名 |
+| 七牛云 | 配置繁琐，需购买长期域名 |
 
 **建议：一次性排版推荐使用 mdnice，图片需要长期管理推荐使用七牛云**。
 
@@ -182,7 +182,7 @@ export default `请使用 **Chrome** 浏览器。
 
 Use the \`printf()\` function.
 
-在需要高亮的代码块的前一行及后一行使用三个反引号，同时**第一行反引号后面表面代码块所使用的语言**，如下：
+在需要高亮的代码块的前一行及后一行使用三个反引号，同时**第一行反引号后面表示代码块所使用的语言**，如下：
 
 \`\`\`java
 // FileName: HelloWorld.java

src/utils/constant.js

@@ -16,6 +16,7 @@ export const PREVIEW_TYPE = "preview_type";
 export const VERSION = "version";
 export const IS_PASTE_CHECK_OPEN = "is_paste_check_open";
 export const IS_PRETTIER_OPEN = "is_prettier_open";
+export const IS_IMMERSIVE_EDITING = "is_immersive_editing";
 export const ALIOSS_IMAGE_HOSTING = "alioss_image_hosting";
 export const QINIUOSS_IMAGE_HOSTING = "qiniuoss_image_hosting";
 export const IMAGE_HOSTING_TYPE = "image_hosting_type";