Allow custom fonts and improve side bar (#626)

.github/CHANGELOG.md

@@ -7,6 +7,9 @@
 **:butterfly:Optimization**
 
 - Respect existing image title if no source is specified (#562)
+- Separate font and font size for code blocks and source code mode (#373, #467)
+- Opened files and opened directories/files can now be folded (#475, #602)
+- You can now hide the quick insert hint (#621)
 
 **:beetle:Bug fix**
 
@@ -16,6 +19,8 @@
 - Restore default Mark Text style after exporting/printing
 - Prevent enter key as language identifier (#569)
 - Allow pasting text into the code block language text-box (#553)
+- Fixed a crash when opening a directory with an unknown file extension
+- Fixed an issue with `Save all` and `Delete all` buttons in the side bar
 
 ### 0.13.65
 

src/main/window.js

@@ -6,6 +6,7 @@ import appMenu from './menu'
 import Watcher from './watcher'
 import { isMarkdownFile, isDirectory, log } from './utils'
 import { TITLE_BAR_HEIGHT, defaultWinOptions, isLinux } from './config'
+import userPreference from './preference'
 
 class AppWindow {
   constructor () {
@@ -151,12 +152,20 @@ class AppWindow {
       win.webContents.send('AGANI::ask-for-close')
     })
 
+    // set renderer arguments
+    const { codeFontFamily, codeFontSize, theme } = userPreference.getAll()
+    win.stylePrefs = {
+      codeFontFamily,
+      codeFontSize,
+      theme
+    }
+
     const winURL = process.env.NODE_ENV === 'development'
       ? `http://localhost:9080`
       : `file://${__dirname}/index.html`
 
     win.loadURL(winURL)
-    win.setSheetOffset(TITLE_BAR_HEIGHT) // 21 is the title bar height
+    win.setSheetOffset(TITLE_BAR_HEIGHT)
 
     return win
   }

src/muya/lib/assets/styles/index.css

@@ -58,7 +58,7 @@ pre {
   font-style: italic;
 }
 
-p.ag-paragraph.ag-active > span.ag-line:first-of-type:empty::after {
+div.editor-wrapper:not(.hide-quick-insert-hint) p.ag-paragraph.ag-active > span.ag-line:first-of-type:empty::after {
   content: 'Type @ to insert';
   color: var(--placeholerColor);
 }

src/muya/themes/dark.css

@@ -1,31 +1,97 @@
-@include-when-export url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);
-
+/*
+ * Open Sans
+ * https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&subset=latin-ext
+ */
+ @font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Open Sans Light'), local('OpenSans-Light'),
+       url('./fonts/open-sans-v15-latin_latin-ext-300.woff') format('woff');
+}
 @font-face {
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: normal;
-    src: local('Open Sans Regular'),url('./github/400.woff') format('woff')
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
+       url('./fonts/open-sans-v15-latin_latin-ext-300italic.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+       url('./fonts/open-sans-v15-latin_latin-ext-regular.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Open Sans Italic'), local('OpenSans-Italic'),
+       url('./fonts/open-sans-v15-latin_latin-ext-italic.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+       url('./fonts/open-sans-v15-latin_latin-ext-600.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 600;
+  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
+       url('./fonts/open-sans-v15-latin_latin-ext-600italic.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'),
+       url('./fonts/open-sans-v15-latin_latin-ext-700.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
+       url('./fonts/open-sans-v15-latin_latin-ext-700italic.woff') format('woff');
 }
 
+/*
+ * DejaVu Sans Mono
+ */
 @font-face {
-    font-family: 'Open Sans';
-    font-style: italic;
-    font-weight: normal;
-    src: local('Open Sans Italic'),url('./github/400i.woff') format('woff')
+  font-family: "DejaVu Sans Mono";
+  src: local('DejaVu Sans Mono'), url('./fonts/DejaVuSansMono.ttf');
 }
-
 @font-face {
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: bold;
-    src: local('Open Sans Bold'),url('./github/700.woff') format('woff')
+  font-family: "DejaVu Sans Mono";
+  font-weight: bold;
+  src: url('./fonts/DejaVuSansMono-Bold.ttf');
 }
-
 @font-face {
-    font-family: 'Open Sans';
-    font-style: italic;
-    font-weight: bold;
-    src: local('Open Sans Bold Italic'),url('./github/700i.woff') format('woff')
+  font-family: "DejaVu Sans Mono";
+  font-style: oblique;
+  font-weight: bold;
+  src: url('./fonts/DejaVuSansMono-BoldOblique.ttf');
+}
+@font-face {
+  font-family: "DejaVu Sans Mono";
+  font-style: italic;
+  font-weight: bold;
+  src: url('./fonts/DejaVuSansMono-BoldOblique.ttf');
+}
+@font-face {
+  font-family: "DejaVu Sans Mono";
+  font-style: italic;
+  src: url('./fonts/DejaVuSansMono-Oblique.ttf');
+}
+@font-face {
+  font-family: "DejaVu Sans Mono";
+  font-style: oblique;
+  src: url('./fonts/DejaVuSansMono-Oblique.ttf');
 }
 
 html, body {
@@ -36,6 +102,17 @@ html, body {
   background: rgb(45, 45, 45);
 }
 
+span code,
+td code,
+th code,
+code,
+code[class*="language-"],
+.CodeMirror,
+pre.ag-paragraph {
+  font-family: "DejaVu Sans Mono", "Source Code Pro", "Droid Sans Mono", Consolas, monospace;
+  font-size: 14px;
+}
+
 ::-webkit-scrollbar {
   background: rgb(43, 43, 43);
 }
@@ -358,7 +435,7 @@ td code {
   color: #efefef;
   background-color: #606266;
   border-radius: 4px;
-  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  /*font-family: Menlo, Monaco, Consolas, "Courier New", monospace;*/
 }
 
 @media print {
@@ -432,7 +509,7 @@ td code {
 code[class*="language-"],
 pre.ag-paragraph {
    color: #f8f8f2;
-   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+   /*font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;*/
    text-align: left;
    white-space: pre;
    word-spacing: normal;

src/muya/themes/fonts/DejaVuSansMono_LICENSE

@@ -0,0 +1,187 @@
+Fonts are (c) Bitstream (see below). DejaVu changes are in public domain.
+Glyphs imported from Arev fonts are (c) Tavmjong Bah (see below)
+
+
+Bitstream Vera Fonts Copyright
+------------------------------
+
+Copyright (c) 2003 by Bitstream, Inc. All Rights Reserved. Bitstream Vera is
+a trademark of Bitstream, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of the fonts accompanying this license ("Fonts") and associated
+documentation files (the "Font Software"), to reproduce and distribute the
+Font Software, including without limitation the rights to use, copy, merge,
+publish, distribute, and/or sell copies of the Font Software, and to permit
+persons to whom the Font Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright and trademark notices and this permission notice shall
+be included in all copies of one or more of the Font Software typefaces.
+
+The Font Software may be modified, altered, or added to, and in particular
+the designs of glyphs or characters in the Fonts may be modified and
+additional glyphs or characters may be added to the Fonts, only if the fonts
+are renamed to names not containing either the words "Bitstream" or the word
+"Vera".
+
+This License becomes null and void to the extent applicable to Fonts or Font
+Software that has been modified and is distributed under the "Bitstream
+Vera" names.
+
+The Font Software may be sold as part of a larger software package but no
+copy of one or more of the Font Software typefaces may be sold by itself.
+
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT,
+TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL BITSTREAM OR THE GNOME
+FOUNDATION BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING
+ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF
+THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE
+FONT SOFTWARE.
+
+Except as contained in this notice, the names of Gnome, the Gnome
+Foundation, and Bitstream Inc., shall not be used in advertising or
+otherwise to promote the sale, use or other dealings in this Font Software
+without prior written authorization from the Gnome Foundation or Bitstream
+Inc., respectively. For further information, contact: fonts at gnome dot
+org.
+
+Arev Fonts Copyright
+------------------------------
+
+Copyright (c) 2006 by Tavmjong Bah. All Rights Reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the fonts accompanying this license ("Fonts") and
+associated documentation files (the "Font Software"), to reproduce
+and distribute the modifications to the Bitstream Vera Font Software,
+including without limitation the rights to use, copy, merge, publish,
+distribute, and/or sell copies of the Font Software, and to permit
+persons to whom the Font Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright and trademark notices and this permission notice
+shall be included in all copies of one or more of the Font Software
+typefaces.
+
+The Font Software may be modified, altered, or added to, and in
+particular the designs of glyphs or characters in the Fonts may be
+modified and additional glyphs or characters may be added to the
+Fonts, only if the fonts are renamed to names not containing either
+the words "Tavmjong Bah" or the word "Arev".
+
+This License becomes null and void to the extent applicable to Fonts
+or Font Software that has been modified and is distributed under the 
+"Tavmjong Bah Arev" names.
+
+The Font Software may be sold as part of a larger software package but
+no copy of one or more of the Font Software typefaces may be sold by
+itself.
+
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL
+TAVMJONG BAH BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+Except as contained in this notice, the name of Tavmjong Bah shall not
+be used in advertising or otherwise to promote the sale, use or other
+dealings in this Font Software without prior written authorization
+from Tavmjong Bah. For further information, contact: tavmjong @ free
+. fr.
+
+TeX Gyre DJV Math
+-----------------
+Fonts are (c) Bitstream (see below). DejaVu changes are in public domain.
+
+Math extensions done by B. Jackowski, P. Strzelczyk and P. Pianowski
+(on behalf of TeX users groups) are in public domain.
+
+Letters imported from Euler Fraktur from AMSfonts are (c) American
+Mathematical Society (see below).
+Bitstream Vera Fonts Copyright
+Copyright (c) 2003 by Bitstream, Inc. All Rights Reserved. Bitstream Vera
+is a trademark of Bitstream, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of the fonts accompanying this license (“Fonts”) and associated
+documentation
+files (the “Font Software”), to reproduce and distribute the Font Software,
+including without limitation the rights to use, copy, merge, publish,
+distribute,
+and/or sell copies of the Font Software, and to permit persons  to whom
+the Font Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright and trademark notices and this permission notice
+shall be
+included in all copies of one or more of the Font Software typefaces.
+
+The Font Software may be modified, altered, or added to, and in particular
+the designs of glyphs or characters in the Fonts may be modified and
+additional
+glyphs or characters may be added to the Fonts, only if the fonts are
+renamed
+to names not containing either the words “Bitstream” or the word “Vera”.
+
+This License becomes null and void to the extent applicable to Fonts or
+Font Software
+that has been modified and is distributed under the “Bitstream Vera”
+names.
+
+The Font Software may be sold as part of a larger software package but
+no copy
+of one or more of the Font Software typefaces may be sold by itself.
+
+THE FONT SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT,
+TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL BITSTREAM OR THE GNOME
+FOUNDATION
+BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL,
+SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN
+ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR
+INABILITY TO USE
+THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
+Except as contained in this notice, the names of GNOME, the GNOME
+Foundation,
+and Bitstream Inc., shall not be used in advertising or otherwise to promote
+the sale, use or other dealings in this Font Software without prior written
+authorization from the GNOME Foundation or Bitstream Inc., respectively.
+For further information, contact: fonts at gnome dot org.
+
+AMSFonts (v. 2.2) copyright
+
+The PostScript Type 1 implementation of the AMSFonts produced by and
+previously distributed by Blue Sky Research and Y&Y, Inc. are now freely
+available for general use. This has been accomplished through the
+cooperation
+of a consortium of scientific publishers with Blue Sky Research and Y&Y.
+Members of this consortium include:
+
+Elsevier Science IBM Corporation Society for Industrial and Applied
+Mathematics (SIAM) Springer-Verlag American Mathematical Society (AMS)
+
+In order to assure the authenticity of these fonts, copyright will be
+held by
+the American Mathematical Society. This is not meant to restrict in any way
+the legitimate use of the fonts, such as (but not limited to) electronic
+distribution of documents containing these fonts, inclusion of these fonts
+into other public domain or commercial font collections or computer
+applications, use of the outline data to create derivative fonts and/or
+faces, etc. However, the AMS does require that the AMS copyright notice be
+removed from any derivative versions of the fonts which have been altered in
+any way. In addition, to ensure the fidelity of TeX documents using Computer
+Modern fonts, Professor Donald Knuth, creator of the Computer Modern faces,
+has requested that any alterations which yield different font metrics be
+given a different name.
+
+$Id$

src/muya/themes/fonts/open-sans-LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

src/muya/themes/light.css

@@ -1,31 +1,97 @@
-@include-when-export url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);
-
+/*
+ * Open Sans
+ * https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&subset=latin-ext
+ */
 @font-face {
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: normal;
-    src: local('Open Sans Regular'),url('./github/400.woff') format('woff');
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Open Sans Light'), local('OpenSans-Light'),
+       url('./fonts/open-sans-v15-latin_latin-ext-300.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
+       url('./fonts/open-sans-v15-latin_latin-ext-300italic.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+       url('./fonts/open-sans-v15-latin_latin-ext-regular.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Open Sans Italic'), local('OpenSans-Italic'),
+       url('./fonts/open-sans-v15-latin_latin-ext-italic.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+       url('./fonts/open-sans-v15-latin_latin-ext-600.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 600;
+  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
+       url('./fonts/open-sans-v15-latin_latin-ext-600italic.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'),
+       url('./fonts/open-sans-v15-latin_latin-ext-700.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
+       url('./fonts/open-sans-v15-latin_latin-ext-700italic.woff') format('woff');
 }
 
+/*
+ * DejaVu Sans Mono
+ */
 @font-face {
-    font-family: 'Open Sans';
-    font-style: italic;
-    font-weight: normal;
-    src: local('Open Sans Italic'),url('./github/400i.woff') format('woff');
+  font-family: "DejaVu Sans Mono";
+  src: local('DejaVu Sans Mono'), url('./fonts/DejaVuSansMono.ttf');
 }
-
 @font-face {
-    font-family: 'Open Sans';
-    font-style: normal;
-    font-weight: bold;
-    src: local('Open Sans Bold'),url('./github/700.woff') format('woff');
+  font-family: "DejaVu Sans Mono";
+  font-weight: bold;
+  src: url('./fonts/DejaVuSansMono-Bold.ttf');
 }
-
 @font-face {
-    font-family: 'Open Sans';
-    font-style: italic;
-    font-weight: bold;
-    src: local('Open Sans Bold Italic'),url('./github/700i.woff') format('woff');
+  font-family: "DejaVu Sans Mono";
+  font-style: oblique;
+  font-weight: bold;
+  src: url('./fonts/DejaVuSansMono-BoldOblique.ttf');
+}
+@font-face {
+  font-family: "DejaVu Sans Mono";
+  font-style: italic;
+  font-weight: bold;
+  src: url('./fonts/DejaVuSansMono-BoldOblique.ttf');
+}
+@font-face {
+  font-family: "DejaVu Sans Mono";
+  font-style: italic;
+  src: url('./fonts/DejaVuSansMono-Oblique.ttf');
+}
+@font-face {
+  font-family: "DejaVu Sans Mono";
+  font-style: oblique;
+  src: url('./fonts/DejaVuSansMono-Oblique.ttf');
 }
 
 html, body {
@@ -36,6 +102,17 @@ html, body {
   background: rgb(252, 252, 252);
 }
 
+span code,
+td code,
+th code,
+code,
+code[class*="language-"],
+.CodeMirror,
+pre.ag-paragraph {
+  font-family: "DejaVu Sans Mono", "Source Code Pro", "Droid Sans Mono", Consolas, monospace;
+  font-size: 14px;
+}
+
 ::-webkit-scrollbar {
   background: rgb(252, 252, 252);
 }
@@ -320,7 +397,7 @@ th code {
   background-color: rgba(27, 31, 35, 0.05);
   border-radius: 3px;
   padding: 0;
-  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  /*font-family: Menlo, Monaco, Consolas, "Courier New", monospace;*/
   padding: 2px 4px 0px 4px;
   font-size: 85%;
   margin: 0;
@@ -389,7 +466,7 @@ p:not(.ag-active)[data-role="hr"]::before {
 code[class*="language-"],
 pre.ag-paragraph {
    color: black;
-   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+   /*font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;*/
    text-align: left;
    white-space: pre;
    word-spacing: normal;

src/renderer/app.vue

@@ -43,6 +43,8 @@
 </template>
 
 <script>
+  import { remote } from 'electron'
+  import { addStyles } from '@/util/theme'
   import Recent from '@/components/recent'
   import EditorWithTabs from '@/components/editorWithTabs'
   import TitleBar from '@/components/titleBar'
@@ -57,6 +59,7 @@
   import ImportModal from '@/components/import'
   import { mapState } from 'vuex'
   import bus from '@/bus'
+  import { DEFAULT_STYLE } from '@/config'
 
   export default {
     name: 'marktext',
@@ -167,6 +170,12 @@
           e.dataTransfer.dropEffect = 'none'
         }
       }, false)
+
+      this.$nextTick(() => {
+        const win = remote.getCurrentWindow()
+        const style = win.stylePrefs || DEFAULT_STYLE
+        addStyles(style)
+      })
     }
   }
 </script>

src/renderer/components/editorWithTabs/editor.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="editor-wrapper"
-    :class="[{ 'typewriter': typewriter, 'focus': focus, 'source': sourceCode }, theme]"
+    :class="[{ 'typewriter': typewriter, 'focus': focus, 'source': sourceCode, 'hide-quick-insert-hint': hideQuickInsertHint }, theme]"
     :style="{ 'color': theme === 'dark' ? darkColor : lightColor, 'lineHeight': lineHeight, 'fontSize': fontSize,
     'font-family': editorFontFamily ? `${editorFontFamily}, ${defaultFontFamily}` : `${defaultFontFamily}` }"
     :dir="textDirection"
@@ -74,6 +74,8 @@
   import { animatedScrollTo } from '../../util'
   import { showContextMenu } from '../../contextMenu/editor'
   import Printer from '@/services/printService'
+  import { DEFAULT_EDITOR_FONT_FAMILY } from '@/config'
+  import { addThemeStyle } from '@/util/theme'
 
   const STANDAR_Y = 320
 
@@ -106,6 +108,7 @@
         'lightColor': state => state.preferences.lightColor,
         'darkColor': state => state.preferences.darkColor,
         'editorFontFamily': state => state.preferences.editorFontFamily,
+        'hideQuickInsertHint': state => state.preferences.hideQuickInsertHint,
         // edit modes
         'typewriter': state => state.preferences.typewriter,
         'focus': state => state.preferences.focus,
@@ -113,7 +116,7 @@
       })
     },
     data () {
-      this.defaultFontFamily = '"Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif'
+      this.defaultFontFamily = DEFAULT_EDITOR_FONT_FAMILY
       return {
         selectionChange: null,
         editor: null,
@@ -139,7 +142,7 @@
         const { editor } = this
         if (value !== oldValue && editor) {
           editor.setTheme(value)
-          this.addThemeStyle(value)
+          addThemeStyle(value)
         }
       },
       fontSize: function (value, oldValue) {
@@ -208,7 +211,7 @@
         }
 
         // the default theme is light write in the store
-        this.addThemeStyle(theme)
+        addThemeStyle(theme)
 
         // listen for bus events.
         bus.$on('file-loaded', this.setMarkdownToEditor)
@@ -277,22 +280,6 @@
         editor && editor.showAutoImagePath(files)
       },
 
-      addThemeStyle (theme) {
-        const linkId = 'ag-theme'
-        const href = process.env.NODE_ENV !== 'production'
-          ? `./src/muya/themes/${theme}.css`
-          : `./static/themes/${theme}.css`
-        let link = document.querySelector(`#${linkId}`)
-
-        if (!link) {
-          link = document.createElement('link')
-          link.setAttribute('rel', 'stylesheet')
-          link.id = linkId
-          document.head.appendChild(link)
-        }
-        link.href = href
-      },
-
       handleUndo () {
         if (this.editor) {
           this.editor.undo()

src/renderer/components/sideBar/icon.vue

@@ -15,7 +15,12 @@
     },
     computed: {
       className () {
-        return fileIcons.getClassWithColor(this.name ? this.name : 'mock.md').split(/\s/)
+        let icon = fileIcons.getClassWithColor(this.name ? this.name : 'mock.md')
+        if (!icon) {
+          // Use fallback icon when the icon is unknown.
+          icon = fileIcons.getClassWithColor('mock.md')
+        }
+        return icon.split(/\s/)
       }
     }
   }

src/renderer/components/sideBar/tree.vue

@@ -23,10 +23,10 @@
     <!-- opened files -->
     <div class="opened-files">
       <div class="title">
-        <svg class="icon" aria-hidden="true">
+        <svg class="icon" aria-hidden="true" @click.stop="toggleOpenedFiles()">
           <use xlink:href="#icon-arrow"></use>
         </svg>
-        <span class="text-overflow">Opened files</span>
+        <span class="default-cursor text-overflow" @click.stop="toggleOpenedFiles()">Opened files</span>
         <a href="javascript:;" @click.stop="saveAll(false)" title="Save All">
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-save-all"></use>
@@ -38,7 +38,7 @@
           </svg>
         </a>
       </div>
-      <div class="opened-files-list">
+      <div class="opened-files-list" v-show="showOpenedFiles">
         <transition-group name="list">
           <!-- tab.id := mt-1, mt-2, ... -->
           <opened-file
@@ -54,12 +54,12 @@
       class="project-tree" v-if="projectTree"
     >
       <div class="title">
-        <svg class="icon" aria-hidden="true">
+        <svg class="icon" aria-hidden="true" @click.stop="toggleDirectories()">
           <use xlink:href="#icon-arrow"></use>
         </svg>
-        <span class="text-overflow">{{ projectTree.name }}</span>
+        <span class="default-cursor text-overflow" @click.stop="toggleDirectories()">{{ projectTree.name }}</span>
       </div>
-      <div class="tree-wrapper" v-show="active === 'tree'">
+      <div class="tree-wrapper" v-show="showDirectories && active === 'tree'">
         <folder
           v-for="(folder, index) of projectTree.folders" :key="index + 'folder'"
           :folder="folder"
@@ -115,7 +115,9 @@
       this.depth = 0
       return {
         active: 'tree', // tree or list
+        showDirectories: true,
         showNewInput: false,
+        showOpenedFiles: true,
         createName: ''
       }
     },
@@ -181,6 +183,12 @@
       createFile () {
         this.$store.dispatch('CHANGE_ACTIVE_ITEM', this.projectTree)
         bus.$emit('SIDEBAR::new', 'file')
+      },
+      toggleOpenedFiles () {
+        this.showOpenedFiles = !this.showOpenedFiles
+      },
+      toggleDirectories () {
+        this.showDirectories = !this.showDirectories
       }
     }
   }
@@ -257,7 +265,8 @@
       margin-left: 8px;
     }
   }
-  .opened-files div.title:hover > a {
+  .opened-files div.title:hover > a,
+  .opened-files div.title > a:hover {
     display: block;
     &:hover {
       color: var(--primary);
@@ -267,6 +276,9 @@
     display: flex;
     flex-direction: column;
   }
+  .default-cursor {
+    cursor: default;
+  }
   .opened-files .opened-files-list {
     max-height: 200px;
     overflow: auto;

src/renderer/config.js

@@ -0,0 +1,10 @@
+export const THEME_LINK_ID = 'ag-theme'
+export const COMMON_STYLE_ID = 'ag-common-style'
+
+export const DEFAULT_EDITOR_FONT_FAMILY = '"Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif'
+export const DEFAULT_CODE_FONT_FAMILY = '"DejaVu Sans Mono", "Source Code Pro", "Droid Sans Mono", monospace'
+export const DEFAULT_STYLE = {
+  codeFontFamily: DEFAULT_CODE_FONT_FAMILY,
+  codeFontSize: '14px',
+  theme: 'light'
+}

src/renderer/store/preferences.js

@@ -6,6 +6,8 @@ const state = {
   theme: 'light',
   editorFontFamily: 'Open Sans',
   fontSize: '16px',
+  codeFontFamily: 'DejaVu Sans Mono',
+  codeFontSize: '14px',
   lineHeight: 1.6,
   lightColor: '#303133', // color in light theme
   darkColor: 'rgb(217, 217, 217)', // color in dark theme
@@ -16,6 +18,7 @@ const state = {
   autoPairMarkdownSyntax: true,
   autoPairQuote: true,
   tabSize: 4,
+  hideQuickInsertHint: false,
   // edit modes (they are not in preference.md, but still put them here)
   typewriter: false, // typewriter mode
   focus: false, // focus mode

src/renderer/util/theme.js

@@ -0,0 +1,45 @@
+import { THEME_LINK_ID, COMMON_STYLE_ID, DEFAULT_CODE_FONT_FAMILY } from '../config'
+
+export const addThemeStyle = theme => {
+  const href = process.env.NODE_ENV !== 'production'
+    ? `./src/muya/themes/${theme}.css`
+    : `./static/themes/${theme}.css`
+
+    let link = document.querySelector(`#${THEME_LINK_ID}`)
+    if (!link) {
+      link = document.createElement('link')
+      link.setAttribute('rel', 'stylesheet')
+      link.id = THEME_LINK_ID
+      document.head.appendChild(link)
+    }
+    link.href = href
+}
+
+export const addCommonStyle = style => {
+  const { codeFontFamily, codeFontSize } = style
+  let sheet = document.querySelector(`#${COMMON_STYLE_ID}`)
+  if (!sheet) {
+    sheet = document.createElement('style')
+    sheet.id = COMMON_STYLE_ID
+    document.head.appendChild(sheet)
+  }
+  sheet.innerHTML = `
+span code,
+td code,
+th code,
+code,
+code[class*="language-"],
+.CodeMirror,
+pre.ag-paragraph {
+font-family: ${codeFontFamily}, ${DEFAULT_CODE_FONT_FAMILY};
+font-size: ${codeFontSize};
+}
+`
+}
+
+// Append common sheet and theme at the end of head - order is important.
+export const addStyles = style => {
+  const { theme } = style
+  addThemeStyle(theme)
+  addCommonStyle(style)
+}

static/preference.md

@@ -16,12 +16,15 @@ Edit and save to update preferences. You can only change the JSON below!
 {
   "fontSize": "16px",
   "editorFontFamily": "Open Sans",
+  "codeFontFamily": "DejaVu Sans Mono",
+  "codeFontSize": "14px",
   "lightColor": "#303133",
   "darkColor": "rgb(217, 217, 217)",
   "lineHeight": "1.6",
   "theme": "light",
   "autoSave": false,
   "aidou": false,
+  "hideQuickInsertHint": false,
   "preferLooseListItem": true,
   "bulletListMarker": "-",
   "autoPairBracket": true,