Minor qol and logo

README.md

@@ -1,5 +1,10 @@
 <p align="center"><img src="static/logo-small.png" alt="MarkText" width="100" height="100"></p>
 
+<h1 align="center">MarkText+</h1>
+
+<div align="center">Minor QoL changes made to the original MarkText.</div>
+
+
 <h1 align="center">MarkText</h1>
 
 <div align="center">
@@ -198,8 +203,8 @@ Names and company logos of all sponsors (from both Patreon and Open Collective)
 
 ![platform](https://img.shields.io/static/v1.svg?label=Platform&message=Linux-64%20|%20macOS-64%20|%20Win-32%20|%20Win-64&style=for-the-badge)
 
-| ![](https://raw.githubusercontent.com/wiki/ryanoasis/nerd-fonts/screenshots/v1.0.x/mac-pass-sm.png)  | ![](https://raw.githubusercontent.com/wiki/ryanoasis/nerd-fonts/screenshots/v1.0.x/windows-pass-sm.png)  | ![](https://raw.githubusercontent.com/wiki/ryanoasis/nerd-fonts/screenshots/v1.0.x/linux-pass-sm.png)  |
-|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
+| ![](https://raw.githubusercontent.com/wiki/ryanoasis/nerd-fonts/screenshots/v1.0.x/mac-pass-sm.png) | ![](https://raw.githubusercontent.com/wiki/ryanoasis/nerd-fonts/screenshots/v1.0.x/windows-pass-sm.png) | ![](https://raw.githubusercontent.com/wiki/ryanoasis/nerd-fonts/screenshots/v1.0.x/linux-pass-sm.png) |
+|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
 | [![latest version](https://img.shields.io/github/downloads/marktext/marktext/latest/marktext-x64.dmg.svg)](https://github.com/marktext/marktext/releases/download/v0.17.1/marktext-x64.dmg) | [![latest version](https://img.shields.io/github/downloads/marktext/marktext/latest/marktext-setup.exe.svg)](https://github.com/marktext/marktext/releases/download/v0.17.1/marktext-setup.exe) | [![latest version](https://img.shields.io/github/downloads/marktext/marktext/latest/marktext-x86_64.AppImage.svg)](https://github.com/marktext/marktext/releases/download/v0.17.1/marktext-x86_64.AppImage) |
 
 Want to see new features of the latest version? Please refer to [CHANGELOG](.github/CHANGELOG.md).
@@ -253,7 +258,6 @@ If you have any questions regarding MarkText, you are welcome to write an issue.
 
 MarkText is in development, please make sure to read the [Contributing Guide](CONTRIBUTING.md) before making a pull request. Want to add some features to MarkText? Refer to our [roadmap](https://github.com/marktext/marktext/projects) and open issues.
 
-
 ## Contributors
 
 Thank you to all the people who have already contributed to MarkText[[contributors](https://github.com/marktext/marktext/graphs/contributors)].

docs/PREFERENCES.md

@@ -9,6 +9,7 @@ Preferences can be controlled and modified in the settings window or via the `pr
 | autoSave | Boolean | false | Automatically save the content being edited. option value: true, false |
 | autoSaveDelay | Number | 5000 | The delay in milliseconds after a changed file is saved automatically? 1000 ~10000 |
 | titleBarStyle | String | custom | The title bar style on Linux and Window: `custom` or `native` |
+| showWordCount | Boolean | true | Show word count on the title bar |
 | openFilesInNewWindow | Boolean | false | true, false |
 | openFolderInNewWindow | Boolean | false | true, false |
 | zoom | Number | 1.0 | The zoom level. Between 0.5 and 2.0 inclusive. |
@@ -35,6 +36,8 @@ Preferences can be controlled and modified in the settings window or via the `pr
 | codeFontFamily | String | `DejaVu Sans Mono` | Code font family |
 | trimUnnecessaryCodeBlockEmptyLines | Boolean | true | Whether to trim the beginning and end empty line in Code block |
 | hideQuickInsertHint | Boolean | false | Hide hint for quickly creating paragraphs |
+| hideFrontIcon | Boolean | false | Hide icon to the left of the active block |
+| hideFormatPicker | Boolean | false | Hide the format picker pop up on selecting text |
 | imageDropAction | String | folder | The default behavior after paste or drag the image to MarkText, upload it to the image cloud (if configured), move to the specified folder, insert the path |
 | defaultEncoding | String | `utf8` | The default file encoding |
 | autoGuessEncoding | Boolean | true | Try to automatically guess the file encoding when opening files |

docs/dev/ARCHITECTURE.md

@@ -27,7 +27,7 @@ Muya provides realtime preview and markdown editing via multiple modules based o
 
 > NOTE: Muya requires a core refactoring to provide better modularization, APIs and plugins. Furthermore, the data structure need improvements for better performance and stability.
 
-The editor represents the view and is split into two parts. The first is the main process that have full access to Electron and all OS features. It's mainly used for IO, user interaction with native dialogs and controlls the editor windows. The main process should not (be long) blocked by synchronous operations. The renderer process is the real editor and also a host for Muya. It's responsible for all graphical elements (`src/renderer/components`), data (`src/renderer/store`) and data synchronization. A renderer process is spawned for each window, operates on its own and is controlled by the main process. It contains two text editors: the realtime preview editor provided by Muya and the source-code one by CodeMirror with special features such as tabs, sidebar and editing features.
+The editor represents the view and is split into two parts. The first is the main process that have full access to Electron and all OS features. It's mainly used for IO, user interaction with native dialogs and controlls the editor windows. The main process should not be (long) blocked by synchronous operations. The renderer process is the real editor and also a host for Muya. It's responsible for all graphical elements (`src/renderer/components`), data (`src/renderer/store`) and data synchronization. A renderer process is spawned for each window, operates on its own and is controlled by the main process. It contains two text editors: the realtime preview editor provided by Muya and the source-code one by CodeMirror with special features such as tabs, sidebar and editing features.
 
 ### Application entry points
 

docs/dev/code/IPC.md

@@ -1,6 +1,6 @@
 # Inter-Process Communication (IPC)
 
-[Electron](https://electronjs.org/docs/api/ipc-main) provides `ipcMain` and `ipcRenderer` to communicate asynchronously between the main process and renderer processes. The event name/channel must be prefixed with `mt::` if used between main process and renderer processes. The default argument list will be `(event, ...args)`. The event name/channel is not prefixed when using `ipcMain` to emit events to the main process directly and emitted events don't have an `event` parameter. The parameter list will only be `(...args)`! When simulate a renderer event you must specify a [event](https://electronjs.org/docs/api/ipc-main#event-object) parameter (`null` or `undefined` may lead to unexpected exceptions).
+[Electron](https://electronjs.org/docs/api/ipc-main) provides `ipcMain` and `ipcRenderer` to communicate asynchronously between the main process and renderer processes. The event name/channel must be namespaced with `mt::` if used between main process and renderer processes. The default argument list will be `(event, ...args)`. The event name/channel is not prefixed when using `ipcMain` to emit events to the main process directly and emitted events don't have an `event` parameter. The parameter list will only be `(...args)`! When simulate a renderer event you must specify a [event](https://electronjs.org/docs/api/ipc-main#event-object) parameter (`null` or `undefined` may lead to unexpected exceptions).
 
 ## Examples
 
@@ -24,7 +24,7 @@ ipcMain.on('some-event-name', (arg1, arg2) => {
 
 
 ipcMain.emit('some-event-name', 'arg 1', 'arg 2')
-// ipcMain.emit('mt::some-event-name-response', undefined, 'arg 1', 'arg 2') // crash because event is used
+// ipcMain.emit('mt::some-event-name-response', undefined, 'arg 1', 'arg 2') // crash because event is used in a responder but undefined here
 ```
 
 Listening to a main event in the renderer process:

src/main/preferences/index.js

@@ -146,7 +146,10 @@ class Preference extends EventEmitter {
  this.setItems(settings)
  })
  ipcMain.on('mt::cmd-toggle-autosave', e => {
- this.setItem('autoSave', !!this.getItem('autoSave'))
+ this.setItem('autoSave', !this.getItem('autoSave'))
+ })
+ ipcMain.on('mt::toggle-spellchecker-underline', e => {
+ this.setItem('spellcheckerNoUnderline', !this.getItem('spellcheckerNoUnderline'))
  })
 
  ipcMain.on('set-user-preference', settings => {

src/main/preferences/schema.json

@@ -18,6 +18,11 @@
  ],
  "default": "custom"
  },
+ "showWordCount": {
+ "description": "Show word count",
+ "type": "boolean",
+ "default": true
+ },
  "openFilesInNewWindow": {
  "description": "General--Open files in a new window.",
  "type": "boolean",
@@ -215,6 +220,16 @@
  "type": "boolean",
  "default": false
  },
+ "hideFrontIcon": {
+ "description": "Editor--hide icon next to blocks",
+ "type": "boolean",
+ "default": false
+ },
+ "hideFormatPicker": {
+ "description": "Editor--hide the format picker pop up on selecting text",
+ "type": "boolean",
+ "default": false
+ },
  "hideLinkPopup": {
  "description": "Editor--Hide link popup when the cursor is hover on the link",
  "type": "boolean",

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

@@ -63,11 +63,16 @@ mark::after {
  background: var(--highlightColor);
 }
 
+/* Removing this class (with classList.remove) will remove the entire selector */
 div.ag-show-quick-insert-hint p.ag-paragraph.ag-active > span.ag-paragraph-content:first-of-type:empty::after {
  content: 'Type @ to insert';
  color: var(--editorColor10);
 }
 
+div.ag-show-front-icon p.ag-paragraph.ag-active > a.ag-front-icon {
+ visibility: visible !important;
+}
+
 .ag-paragraph {
  position: relative;
 }
@@ -600,6 +605,10 @@ pre.ag-front-matter {
  margin: 1rem 0;
 }
 
+pre.ag-front-matter > code > span.language-yaml {
+ white-space: break-spaces !important;
+}
+
 pre.ag-front-matter span.ag-code-content:first-of-type:empty::after {
  content: 'Input YAML Front Matter...';
  color: var(--editorColor10);
@@ -1130,6 +1139,7 @@ span.ag-reference-link {
 }
 
 .ag-front-icon {
+ visibility: hidden;
  position: absolute;
  width: 20px;
  height: 20px;

src/muya/lib/config/index.js

@@ -270,6 +270,7 @@ export const MUYA_DEFAULT_OPTION = Object.freeze({
  mermaidTheme: 'default', // dark / forest / default
  vegaTheme: 'latimes', // excel / ggplot2 / quartz / vox / fivethirtyeight / dark / latimes
  hideQuickInsertHint: false,
+ hideFrontIcon: false,
  hideLinkPopup: false,
  autoCheck: false,
  // Whether we should set spellcheck attribute on our container to highlight misspelled words.

src/muya/lib/index.js

@@ -400,6 +400,17 @@ class Muya {
  }
  }
 
+ // Set "front icon" visibility (icon left of paragraph blocks, see ./parser/render/renderBlock.js)
+ const hideFrontIcon = options.hideFrontIcon
+ if (typeof hideFrontIcon !== 'undefined') {
+ const hasClass = this.container.classList.contains('ag-show-front-icon')
+ if (hideFrontIcon && hasClass) {
+ this.container.classList.remove('ag-show-front-icon')
+ } else if (!hideFrontIcon && !hasClass) {
+ this.container.classList.add('ag-show-front-icon')
+ }
+ }
+
  // Set spellcheck container attribute
  const spellcheckEnabled = options.spellcheckEnabled
  if (typeof spellcheckEnabled !== 'undefined') {
@@ -460,7 +471,7 @@ class Muya {
  * [ensureContainerDiv ensure container element is div]
  */
 function getContainer (originContainer, options) {
- const { hideQuickInsertHint, spellcheckEnabled } = options
+ const { hideQuickInsertHint, hideFrontIcon, spellcheckEnabled } = options
  const container = document.createElement('div')
  const rootDom = document.createElement('div')
  const attrs = originContainer.attributes
@@ -473,6 +484,10 @@ function getContainer (originContainer, options) {
  container.classList.add('ag-show-quick-insert-hint')
  }
 
+ if (!hideFrontIcon) {
+ container.classList.add('ag-show-front-icon')
+ }
+
  container.setAttribute('contenteditable', true)
  container.setAttribute('autocorrect', false)
  container.setAttribute('autocomplete', 'off')

src/renderer/commands/descriptions.js

@@ -116,6 +116,7 @@ const commandDescriptions = Object.freeze({
  'paragraph.reset-paragraph': 'Paragraph: Transform into Paragraph',
  'window.change-theme': 'Theme: Change Theme...',
  'view.text-direction': 'View: Set Text Direction',
+ 'view.toggle-spellchecker-underline': 'View: Toggle underline for spelling errors',
  'docs.user-guide': 'MarkText: End User Guide',
  'docs.markdown-syntax': 'MarkText: Markdown Syntax Guide'
 })

src/renderer/commands/index.js

@@ -606,6 +606,12 @@ const commands = [
  ipcRenderer.send('mt::set-user-preference', { textDirection: value })
  }
  },
+ {
+ id: 'view.toggle-spellchecker-underline',
+ execute: async () => {
+ ipcRenderer.send('mt::toggle-spellchecker-underline')
+ }
+ },
 
  // --------------------------------------------------------------------------
  // MarkText

src/renderer/components/editorWithTabs/editor.vue

@@ -152,6 +152,8 @@ export default {
  trimUnnecessaryCodeBlockEmptyLines: state => state.preferences.trimUnnecessaryCodeBlockEmptyLines,
  editorFontFamily: state => state.preferences.editorFontFamily,
  hideQuickInsertHint: state => state.preferences.hideQuickInsertHint,
+ hideFrontIcon: state => state.preferences.hideFrontIcon,
+ hideFormatPicker: state => state.preferences.hideFormatPicker,
  hideLinkPopup: state => state.preferences.hideLinkPopup,
  autoCheck: state => state.preferences.autoCheck,
  editorLineWidth: state => state.preferences.editorLineWidth,
@@ -308,6 +310,20 @@ export default {
  }
  },
 
+ hideFrontIcon: function (value, oldValue) {
+ const { editor } = this
+ if (value !== oldValue && editor) {
+ editor.setOptions({ hideFrontIcon: value })
+ }
+ },
+
+ hideFormatPicker: function (value, oldValue) {
+ const { editor } = this
+ if (value !== oldValue && editor) {
+ editor.setOptions({ hideFormatPicker: value })
+ }
+ },
+
  editorLineWidth: function (value, oldValue) {
  if (value !== oldValue) {
  setEditorWidth(value)
@@ -477,6 +493,8 @@ export default {
  isHtmlEnabled,
  isGitlabCompatibilityEnabled,
  hideQuickInsertHint,
+ hideFrontIcon,
+ hideFormatPicker,
  editorLineWidth,
  theme,
  sequenceTheme,
@@ -498,7 +516,9 @@ export default {
  })
  Muya.use(Transformer)
  Muya.use(ImageToolbar)
- Muya.use(FormatPicker)
+ if (!hideFormatPicker) {
+ Muya.use(FormatPicker)
+ }
  Muya.use(FrontMenu)
  Muya.use(LinkTools, {
  jumpClick: this.jumpClick
@@ -527,6 +547,8 @@ export default {
  disableHtml: !isHtmlEnabled,
  isGitlabCompatibilityEnabled,
  hideQuickInsertHint,
+ hideFrontIcon,
+ hideFormatPicker,
  hideLinkPopup,
  autoCheck,
  sequenceTheme,

src/renderer/components/titleBar/index.vue

@@ -39,7 +39,7 @@
  <span class="text-center-vertical">&#9776;</span>
  </div>
  <el-tooltip
- v-if="wordCount"
+ v-if="wordCount && showWordCount"
  class="item"
  :content="`${wordCount[show]} ${HASH[show].full + (wordCount[show] > 1 ? 's' : '')}`"
  placement="bottom-end"
@@ -56,7 +56,7 @@
  </div>
  </div>
  <div
- v-if="wordCount"
+ v-if="wordCount && showWordCount"
  class="word-count"
  :class="[{ 'title-no-drag': platform !== 'darwin' }]"
  @click.stop="handleWordClick"
@@ -154,6 +154,7 @@ export default {
  computed: {
  ...mapState({
  titleBarStyle: state => state.preferences.titleBarStyle,
+ showWordCount: state => state.preferences.showWordCount,
  showTabBar: state => state.layout.showTabBar
  }),
  paths () {
@@ -330,7 +331,7 @@ export default {
  }
 
  .left-toolbar {
- padding: 0 10px;
+ /* padding: 0 10px; */
  height: 100%;
  position: absolute;
  top: 0;
@@ -391,6 +392,11 @@ export default {
  }
  .frameless-titlebar-menu {
  color: var(--sideBarColor);
+ width: 55px;
+ text-align: center;
+ background: var(--editorColor04);
+ font-weight: bold;
+ cursor: pointer;
  }
  .frameless-titlebar-close:hover {
  background-color: rgb(228, 79, 79);