diff --git a/.eslintignore b/.eslintignore index afc5e6bc..3c252177 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,3 +3,4 @@ test/unit/*.js test/e2e/*.js src/editor/parser/marked.js src/editor/assets/symbolIcon/index.js +src/renderer/assets/symbolIcon/index.js diff --git a/CHANGELOG.md b/CHANGELOG.md index c26a1fd1..e225a41d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,14 @@ - fix the bug that click at the edge of code block will caused the code block does not be focused. +**Optimization** + +- Optimize the display of word count in title bar. we also delete the background color of title bar to make it more concise. + +- Customize the style of checkbox in Task List Item. + +- Change the display of Insert Table dialog. + ### 0.3.0 **Features** diff --git a/README.md b/README.md index 221c78a9..984fa680 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ # MarkText +[![GitHub version](https://badge.fury.io/gh/jocs%2Fmarktext.svg)](https://badge.fury.io/gh/jocs%2Fmarktext) + **MarkText** is an **open source** Markdown editor for OS X, released under the **MIT license**. It is inspired by outstanding markdown editor **Typora**. ![](https://github.com/marktext/marktext/blob/master/summary.gif) diff --git a/TODOLIST.md b/TODOLIST.md index 0afc0d5d..8ad8fea3 100644 --- a/TODOLIST.md +++ b/TODOLIST.md @@ -1,11 +1,16 @@ #### TODO LIST -- [ ] Support Raw HTML in editor. - - [ ] Support Search and Replacement. +- [ ] add Dark, Light and GitHub theme. + +- [ ] source code edit mode. + +- [ ] Support Raw HTML in editor. + - [ ] Support auto accompliment. - [ ] Left click menu. - [ ] Rename and moveTo in **File Menu** + diff --git a/src/editor/config.js b/src/editor/config.js index 165f3c67..7985b64f 100644 --- a/src/editor/config.js +++ b/src/editor/config.js @@ -79,6 +79,7 @@ export const CLASS_OR_ID = genUpper2LowerKeyHash([ 'AG_TASK_LIST', 'AG_TASK_LIST_ITEM', 'AG_TASK_LIST_ITEM_CHECKBOX', + 'AG_CHECKBOX_CHECKED', 'AG_TABLE_TOOL_BAR' ]) diff --git a/src/editor/contentState/updateCtrl.js b/src/editor/contentState/updateCtrl.js index 5896090b..f2f4b30d 100644 --- a/src/editor/contentState/updateCtrl.js +++ b/src/editor/contentState/updateCtrl.js @@ -138,9 +138,9 @@ const updateCtrl = ContentState => { // handle task list item checkbox click ContentState.prototype.listItemCheckBoxClick = function (checkbox) { const { checked, id } = checkbox - console.log(checked) const block = this.getBlock(id) block.checked = checked + this.render() } ContentState.prototype.updateList = function (block, type, marker = '') { diff --git a/src/editor/floatBox/index.js b/src/editor/floatBox/index.js index 16fb53fb..945db25d 100644 --- a/src/editor/floatBox/index.js +++ b/src/editor/floatBox/index.js @@ -103,6 +103,7 @@ class FloatBox { this.index = 0 if (this.show) { this.box.classList.remove(CLASS_OR_ID['AG_SHOW_FLOAT_BOX']) + this.box.removeAttribute('style') } this.show = false } diff --git a/src/editor/index.css b/src/editor/index.css index 7ea58be4..bfb5d0c4 100644 --- a/src/editor/index.css +++ b/src/editor/index.css @@ -21,6 +21,10 @@ h6.ag-active::before { font-weight: 100; } +*::selection { + background: #efefef; +} + figure { padding: 0; margin: 0; @@ -28,6 +32,7 @@ figure { position: relative; } .ag-table-tool-bar { + width: 100%; user-select: none; position: absolute; top: -20px; @@ -40,6 +45,7 @@ figure { margin: 0; padding: 0; display: flex; + width: 100%; } .ag-table-tool-bar ul li { box-sizing: border-box; @@ -55,6 +61,9 @@ figure { .ag-table-tool-bar ul li[data-label=delete] { color: #E6A23C; + position: absolute; + right: 0; + top: 0; } .ag-table-tool-bar ul li.active { @@ -110,6 +119,43 @@ li.ag-task-list-item > input[type=checkbox] { left: -20px; } +li.ag-task-list-item > input.ag-checkbox-checked ~ p { + color: #909399; +} + +li.ag-task-list-item > input[type=checkbox]::before { + content: ''; + width: 16px; + height: 16px; + box-sizing: border-box; + display: inline-block; + border: 2px solid #606266; + border-radius: 2px; + background-color: #FFFFFF; + position: absolute; + top: 0; + left: 0; +} + +li.ag-task-list-item > input.ag-checkbox-checked::before { + border: none; + background-color: #606266; +} + +li.ag-task-list-item > input.ag-checkbox-checked::after { + content: ''; + transform: rotate(-45deg); + width: 7px; + height: 3px; + border: 2px solid #fff; + border-top: none; + border-right: none; + position: absolute; + display: inline-block; + top: 4px; + left: 4px; +} + li p .ag-hide:first-child { display: none; } @@ -193,7 +239,7 @@ pre.ag-active .ag-language-input { #ag-editor-id, [contenteditable] { outline: none; - caret-color: #333; + caret-color: #303133; } .ag-gray { color: lavender; diff --git a/src/editor/parser/StateRender.js b/src/editor/parser/StateRender.js index 88c62061..70451dcb 100644 --- a/src/editor/parser/StateRender.js +++ b/src/editor/parser/StateRender.js @@ -156,10 +156,11 @@ class StateRender { if (block.type === 'input') { const { checked, type, key } = block Object.assign(data.attrs, { type: 'checkbox' }) + blockSelector = `${type}#${key}.${CLASS_OR_ID['AG_TASK_LIST_ITEM_CHECKBOX']}` if (checked) { Object.assign(data.attrs, { checked: true }) + blockSelector += `.${CLASS_OR_ID['AG_CHECKBOX_CHECKED']}` } - blockSelector = `${type}#${key}.${CLASS_OR_ID['AG_TASK_LIST_ITEM_CHECKBOX']}` children = '' } diff --git a/src/editor/themes/light.css b/src/editor/themes/light.css new file mode 100644 index 00000000..1ca961b2 --- /dev/null +++ b/src/editor/themes/light.css @@ -0,0 +1,465 @@ +:root { + --side-bar-bg-color: #fafafa; + --control-text-color: #777; +} + +@include-when-export url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,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-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: normal; + src: local('Open Sans Italic'), url('./github/400i.woff') format('woff') +} + +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: bold; + src: local('Open Sans Bold'), url('./github/700.woff') format('woff') +} + +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: bold; + src: local('Open Sans Bold Italic'), url('./github/700i.woff') format('woff') +} + +html, body { + font-size: 16px; + background: rgb(252, 252, 252); +} + +body { + font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #303133; + line-height: 1.6; +} + +#ag-editor-id { + max-width: 860px; + margin: 0 auto; + padding: 20px 30px 40px 30px; + padding-top: 20px; + padding-bottom: 100px; +} + +#ag-editor-id>ul:first-child, +#ag-editor-id>ol:first-child { + margin-top: 30px; +} + +body>*:first-child { + margin-top: 0 !important; +} + +body>*:last-child { + margin-bottom: 0 !important; +} + +a { + color: #4183C4; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + position: relative; + margin-top: 1rem; + margin-bottom: 1rem; + font-weight: bold; + line-height: 1.4; + cursor: text; +} + +h1:hover a.anchor, +h2:hover a.anchor, +h3:hover a.anchor, +h4:hover a.anchor, +h5:hover a.anchor, +h6:hover a.anchor { + /*background: url("../../images/modules/styleguide/para.png") no-repeat 10px center;*/ + text-decoration: none; +} + +h1 tt, +h1 code { + font-size: inherit; +} + +h2 tt, +h2 code { + font-size: inherit; +} + +h3 tt, +h3 code { + font-size: inherit; +} + +h4 tt, +h4 code { + font-size: inherit; +} + +h5 tt, +h5 code { + font-size: inherit; +} + +h6 tt, +h6 code { + font-size: inherit; +} + +h1 { + padding-bottom: .3em; + font-size: 2.25em; + line-height: 1.2; + border-bottom: 1px solid #eee; +} + +h2 { + padding-bottom: .3em; + font-size: 1.75em; + line-height: 1.225; + border-bottom: 1px solid #eee; +} + +h3 { + font-size: 1.5em; + line-height: 1.43; +} + +h4 { + font-size: 1.25em; +} + +h5 { + font-size: 1em; +} + +h6 { + font-size: 1em; + color: #777; +} + +p, +blockquote, +ul, +ol, +dl, +table { + margin: 0.8em 0; +} + +li>ol, +li>ul { + margin: 0 0; +} + +hr { + height: 4px; + padding: 0; + margin: 16px 0; + background-color: #e7e7e7; + border: 0 none; + overflow: hidden; + box-sizing: content-box; + border-bottom: 1px solid #ddd; +} + +body>h2:first-child { + margin-top: 0; + padding-top: 0; +} + +body>h1:first-child { + margin-top: 0; + padding-top: 0; +} + +body>h1:first-child+h2 { + margin-top: 0; + padding-top: 0; +} + +body>h3:first-child, +body>h4:first-child, +body>h5:first-child, +body>h6:first-child { + margin-top: 0; + padding-top: 0; +} + +a:first-child h1, +a:first-child h2, +a:first-child h3, +a:first-child h4, +a:first-child h5, +a:first-child h6 { + margin-top: 0; + padding-top: 0; +} + +h1 p, +h2 p, +h3 p, +h4 p, +h5 p, +h6 p { + margin-top: 0; +} + +li p.first { + display: inline-block; +} + +ul, +ol { + padding-left: 30px; +} + +ul:first-child, +ol:first-child { + margin-top: 0; +} + +ul:last-child, +ol:last-child { + margin-bottom: 0; +} + +blockquote { + border-left: 4px solid #dddddd; + padding: 0 15px; + color: #777777; +} + +blockquote blockquote { + padding-right: 0; +} + +table { + padding: 0; + word-break: initial; +} + +table tr { + margin: 0; + padding: 0; +} + +table thead tr, +table tr:nth-child(2n) { + background-color: #fafafa; +} + +table tr th { + font-weight: bold; + border: 1px solid #ebeef5; + text-align: left; + margin: 0; + padding: 6px 13px; +} + +table tr td { + border: 1px solid #ebeef5; + text-align: left; + margin: 0; + padding: 6px 13px; +} + +table tr th:first-child, +table tr td:first-child { + margin-top: 0; +} + +table tr th:last-child, +table tr td:last-child { + margin-bottom: 0; +} + +.CodeMirror-gutters { + border-right: 1px solid #ddd; +} + +.md-fences, +code, +tt { + border: 1px solid #ddd; + background-color: #f8f8f8; + border-radius: 3px; + padding: 0; + font-family: Consolas, "Liberation Mono", Courier, monospace; + padding: 2px 4px 0px 4px; + font-size: 0.9em; +} + + +/* custom add */ + +.md-fences, +code { + border: none; + padding: 2px 4px; + font-size: 90%; + color: #c7254e; + background-color: #f9f2f4; + border-radius: 4px; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; +} + +.md-fences { + margin-bottom: 15px; + margin-top: 15px; + padding: 0.2em 1em; + padding-top: 8px; + padding-bottom: 6px; + border: none; +} + +.task-list { + padding-left: 0; +} + +.task-list-item { + padding-left: 32px; +} + +.task-list-item input { + top: 3px; + left: 8px; +} + +@media screen and (min-width: 914px) { + /*body { + width: 854px; + margin: 0 auto; + }*/ +} + +@media print { + html { + font-size: 13px; + } + table, + pre { + page-break-inside: avoid; + } + pre { + word-wrap: break-word; + } +} + +.md-fences { + background-color: #f8f8f8; +} + +#ag-editor-id pre.ag-code-block { + padding: .4rem 1rem; + font-size: 90%; + line-height: 1.6; + background-color: #f6f8fa; + border: 0; + border-radius: 3px; + color: #777777; + margin-top: 0; +} + +.mathjax-block>.code-tooltip { + bottom: .375rem; +} + +#ag-editor-id>h3.md-focus:before { + left: -1.5625rem; + top: .375rem; +} + +#ag-editor-id>h4.md-focus:before { + left: -1.5625rem; + top: .285714286rem; +} + +#ag-editor-id>h5.md-focus:before { + left: -1.5625rem; + top: .285714286rem; +} + +#ag-editor-id>h6.md-focus:before { + left: -1.5625rem; + top: .285714286rem; +} + +.md-image>.md-meta { + border: 1px solid #ddd; + border-radius: 3px; + font-family: Consolas, "Liberation Mono", Courier, monospace; + padding: 2px 4px 0px 4px; + font-size: 0.9em; + color: inherit; +} + +.md-tag { + color: inherit; +} + +.md-toc { + margin-top: 20px; + padding-bottom: 20px; +} + +.sidebar-tabs { + border-bottom: none; +} + +#typora-quick-open { + border: 1px solid #ddd; + background-color: #f8f8f8; +} + +#typora-quick-open-item { + background-color: #FAFAFA; + border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee; + border-style: solid; + border-width: 1px; +} + +#md-notification:before { + top: 10px; +} + + +/** focus mode */ + +.on-focus-mode blockquote { + border-left-color: rgba(85, 85, 85, 0.12); +} + +header, +.context-menu, +.megamenu-content, +footer { + font-family: "Segoe UI", "Arial", sans-serif; +} + +.file-node-content:hover .file-node-icon, +.file-node-content:hover .file-node-open-state { + visibility: visible; +} + +.mac-seamless-mode #typora-sidebar { + background-color: #fafafa; + background-color: var(--side-bar-bg-color); +} diff --git a/src/renderer/assets/logo.png b/src/renderer/assets/logo.png deleted file mode 100644 index 63736e2c..00000000 Binary files a/src/renderer/assets/logo.png and /dev/null differ diff --git a/src/renderer/assets/symbolIcon/index.js b/src/renderer/assets/symbolIcon/index.js new file mode 100644 index 00000000..f9386056 --- /dev/null +++ b/src/renderer/assets/symbolIcon/index.js @@ -0,0 +1 @@ +(function(window){var svgSprite='';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) diff --git a/src/renderer/components/Editor.vue b/src/renderer/components/Editor.vue index ef0476d4..19a68334 100644 --- a/src/renderer/components/Editor.vue +++ b/src/renderer/components/Editor.vue @@ -2,18 +2,24 @@
+
+ +
- Cancel - Ok + + + + + +
@@ -48,8 +63,8 @@ isShowClose: false, dialogTableVisible: false, tableChecker: { - rows: 2, - columns: 2 + rows: 4, + columns: 3 } } }, @@ -146,13 +161,21 @@ diff --git a/src/renderer/components/search.vue b/src/renderer/components/search.vue new file mode 100644 index 00000000..6ba046bf --- /dev/null +++ b/src/renderer/components/search.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/renderer/components/titleBar.vue b/src/renderer/components/titleBar.vue index 0470f975..607fa7e7 100644 --- a/src/renderer/components/titleBar.vue +++ b/src/renderer/components/titleBar.vue @@ -10,29 +10,7 @@
{{wordCount.word >= 2 ? `${wordCount.word} Words` : `${wordCount.word} Word`}}
- -
-
-
Words
-
{{wordCount.word}}
-
-
-
Paragraphs
-
{{wordCount.paragraph}}
-
-
-
Characters
-
{{wordCount.character}}
-
-
-
All
-
{{wordCount.all}}
-
+ >{{ `${HASH[show]} ${wordCount[show]}` }}
@@ -40,8 +18,14 @@ @@ -69,19 +52,17 @@ user-select: none; width: 100%; height: 22px; - border-bottom: 1px solid #ccc; box-sizing: border-box; - color: #999; - background: linear-gradient(180deg, #ffffff, #efefef); + color: #C0C4CC; position: fixed; top: 0; left: 0; right: 0; z-index: 1; + transition: color .4s ease-in; } .active { - background: linear-gradient(180deg, #efefef, #ccc); - color: #333; + color: #909399; } img { height: 90%; @@ -104,68 +85,21 @@ right: 0; width: 100px; display: flex; + flex-direction: row-reverse; } .word-count { + cursor: pointer; font-size: 12px; - color: #666; + color: #C0C4CC; height: 15px; line-height: 15px; - margin-top: 3px; - padding: 0 3px; - border-radius: 2px; - cursor: pointer; + margin-top: 4px; + padding: 1px 5px; + border-radius: 1px; transition: all .3s ease-in; } .word-count:hover { - background: #bbb; - color: #000; - } - .popup { - font-size: 12px; - font-weight: 500; - width: 150px; - height: auto; - padding: 10px; - background: rgb(239, 239, 239); - position: absolute; - top: 35px; - right: 10px; - border: 1px solid #ddd; - border-radius: 4px; - box-shadow: 0 2px 6px 0 rgba(0,0,0,.1); - transition: all .2s ease-out; - transform-origin: top; - transform: scale(0); - opacity: .3; - } - .show-popup { - transform: scale(1); - opacity: 1; - } - .popup::before { - content: ''; - width: 15px; - height: 15px; - background: rgb(239, 239, 239); - border: 1px solid #ddd; - display: inline-block; - position: absolute; - top: -9px; - right: 60px; - border-right: none; - border-bottom: none; - transform: rotate(45deg); - } - .pop-item { - display: flex; - } - .label { - width: 75px; - flex-shrink: 1; - text-align: right; - font-weight: 600; - } - .value { - padding-left: 25px; + background: #F2F6FC; + color: #606266; } diff --git a/src/renderer/index.css b/src/renderer/index.css index 9e7118e4..e697d9e9 100644 --- a/src/renderer/index.css +++ b/src/renderer/index.css @@ -1,3 +1,9 @@ +.icon { + width: 1em; height: 1em; + vertical-align: -0.15em; + fill: currentColor; + overflow: hidden; +} @media print { body .editor-component { height: auto !important; diff --git a/src/renderer/main.js b/src/renderer/main.js index be24d575..734f97c2 100644 --- a/src/renderer/main.js +++ b/src/renderer/main.js @@ -4,6 +4,7 @@ import axios from 'axios' import App from './App' import store from './store' +import './assets/symbolIcon' import './index.css' import { Dialog, Form, FormItem, InputNumber, Button } from 'element-ui'