|
1 | 1 | const mouseUp = () => {
|
2 |
| - let mark = document.getElementById('getm'); |
3 |
| - let lineno = document.getElementById('lineno'); |
4 |
| - let colno = document.getElementById('colno'); |
5 |
| - let textLines = mark.value.substr(0, mark.selectionStart).split("\n"); |
6 |
| - lineno.innerHTML = `Line ${textLines.length}`; |
7 |
| - colno.innerHTML = `Col ${textLines[textLines.length - 1].length}`; |
| 2 | + let mark = document.getElementById('getm') |
| 3 | + let lineno = document.getElementById('lineno') |
| 4 | + let colno = document.getElementById('colno') |
| 5 | + let textLines = mark.value.substr(0, mark.selectionStart).split('\n') |
| 6 | + lineno.innerHTML = `Line ${textLines.length}` |
| 7 | + colno.innerHTML = `Col ${textLines[textLines.length - 1].length}` |
8 | 8 | }
|
9 | 9 | const keyUp = () => {
|
10 |
| - let mark = document.getElementById('getm').value; |
11 |
| - let viewer = document.getElementById('viewer'); |
12 |
| - let wordcount = document.getElementById('wordcount'); |
13 |
| - let charcount = document.getElementById('charcount'); |
14 |
| - let save = document.getElementById('save'); |
15 |
| - let regex = /\s+/gi; |
| 10 | + let mark = document.getElementById('getm').value |
| 11 | + let viewer = document.getElementById('viewer') |
| 12 | + let wordcount = document.getElementById('wordcount') |
| 13 | + let charcount = document.getElementById('charcount') |
| 14 | + let save = document.getElementById('save') |
| 15 | + let regex = /\s+/gi |
16 | 16 | if (mark !== '') {
|
17 |
| - viewer.innerHTML = marked(mark); |
18 |
| - let wordCount = viewer.innerText.trim().replace(regex, ' ').split(' ').length; |
19 |
| - let charCount = viewer.innerText.replace(regex, '').length; |
20 |
| - wordcount.innerHTML = `${wordCount} words`; |
21 |
| - charcount.innerHTML = `${charCount} chars`; |
22 |
| - save.disabled = false; |
| 17 | + viewer.innerHTML = marked(mark) |
| 18 | + let wordCount = viewer.innerText.trim().replace(regex, ' ').split(' ').length |
| 19 | + let charCount = viewer.innerText.replace(regex, '').length |
| 20 | + wordcount.innerHTML = `${wordCount} words` |
| 21 | + charcount.innerHTML = `${charCount} chars` |
| 22 | + save.disabled = false |
23 | 23 | document.querySelectorAll('pre code').forEach((block) => {
|
24 |
| - hljs.highlightBlock(block); |
25 |
| - }); |
26 |
| - mouseUp(); |
| 24 | + hljs.highlightBlock(block) |
| 25 | + }) |
| 26 | + mouseUp() |
27 | 27 | } else {
|
28 |
| - viewer.innerHTML = ""; |
29 |
| - wordcount.innerHTML = "0 words"; |
30 |
| - charcount.innerHTML = "0 chars"; |
31 |
| - save.disabled = true; |
| 28 | + viewer.innerHTML = '' |
| 29 | + wordcount.innerHTML = '0 words' |
| 30 | + charcount.innerHTML = '0 chars' |
| 31 | + save.disabled = true |
32 | 32 | }
|
33 | 33 | }
|
34 |
| -const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'); |
| 34 | +const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]') |
35 | 35 | const switchTheme = ({
|
36 | 36 | target
|
37 | 37 | }) => {
|
38 | 38 | if (target.checked) {
|
39 |
| - document.documentElement.setAttribute('data-theme', 'dark'); |
| 39 | + document.documentElement.setAttribute('data-theme', 'dark') |
40 | 40 | } else {
|
41 |
| - document.documentElement.setAttribute('data-theme', 'light'); |
| 41 | + document.documentElement.setAttribute('data-theme', 'light') |
42 | 42 | }
|
43 | 43 | }
|
44 |
| -toggleSwitch.addEventListener('change', switchTheme, false); |
| 44 | +toggleSwitch.addEventListener('change', switchTheme, false) |
45 | 45 | const download = () => {
|
46 |
| - let text = document.getElementById("getm").value; |
47 |
| - text = text.replace(/\n/g, "\r\n"); |
| 46 | + let text = document.getElementById('getm').value |
| 47 | + text = text.replace(/\n/g, '\r\n') |
48 | 48 | let blob = new Blob([text], {
|
49 |
| - type: "text/plain" |
50 |
| - }); |
51 |
| - let anchor = document.createElement("a"); |
52 |
| - anchor.download = "marcdown.md"; |
53 |
| - anchor.href = window.URL.createObjectURL(blob); |
54 |
| - anchor.target = "_blank"; |
55 |
| - anchor.style.display = "none"; |
56 |
| - document.body.appendChild(anchor); |
57 |
| - anchor.click(); |
58 |
| - document.body.removeChild(anchor); |
| 49 | + type: 'text/plain' |
| 50 | + }) |
| 51 | + let anchor = document.createElement('a') |
| 52 | + anchor.download = 'marcdown.md' |
| 53 | + anchor.href = window.URL.createObjectURL(blob) |
| 54 | + anchor.target = '_blank' |
| 55 | + anchor.style.display = 'none' |
| 56 | + document.body.appendChild(anchor) |
| 57 | + anchor.click() |
| 58 | + document.body.removeChild(anchor) |
59 | 59 | }
|
60 | 60 | let openFile = ({
|
61 | 61 | target
|
62 | 62 | }) => {
|
63 |
| - let input = target; |
64 |
| - let reader = new FileReader(); |
| 63 | + let input = target |
| 64 | + let reader = new FileReader() |
65 | 65 | reader.onload = () => {
|
66 |
| - document.getElementById('getm').value = reader.result; |
67 |
| - keyUp(); |
68 |
| - input.value = ''; |
69 |
| - }; |
70 |
| - reader.readAsText(input.files[0]); |
71 |
| -}; |
| 66 | + document.getElementById('getm').value = reader.result |
| 67 | + keyUp() |
| 68 | + input.value = '' |
| 69 | + } |
| 70 | + reader.readAsText(input.files[0]) |
| 71 | +} |
72 | 72 | document.onkeyup = ({
|
73 | 73 | altKey,
|
74 | 74 | which
|
75 | 75 | }) => {
|
76 | 76 | if (altKey && which == 79) {
|
77 |
| - document.getElementById("file").click(); |
| 77 | + document.getElementById('file').click() |
78 | 78 | } else if (altKey && which == 83) {
|
79 |
| - document.getElementById("save").click(); |
| 79 | + document.getElementById('save').click() |
80 | 80 | }
|
81 |
| -}; |
| 81 | +} |
82 | 82 | const apply = (e) => {
|
83 |
| - let myField = document.getElementById("getm"); |
84 |
| - let myValueBefore; |
85 |
| - let myValueAfter; |
| 83 | + let myField = document.getElementById('getm') |
| 84 | + let myValueBefore |
| 85 | + let myValueAfter |
86 | 86 | switch (e) {
|
87 | 87 | case 'bold':
|
88 |
| - myValueBefore = "**"; |
89 |
| - myValueAfter = "**"; |
90 |
| - break; |
| 88 | + myValueBefore = '**' |
| 89 | + myValueAfter = '**' |
| 90 | + break |
91 | 91 | case 'italic':
|
92 |
| - myValueBefore = "*"; |
93 |
| - myValueAfter = "*"; |
94 |
| - break; |
| 92 | + myValueBefore = '*' |
| 93 | + myValueAfter = '*' |
| 94 | + break |
95 | 95 | case 'strike':
|
96 |
| - myValueBefore = "~"; |
97 |
| - myValueAfter = "~"; |
98 |
| - break; |
| 96 | + myValueBefore = '~' |
| 97 | + myValueAfter = '~' |
| 98 | + break |
99 | 99 | case 'h1':
|
100 |
| - myValueBefore = "# "; |
101 |
| - myValueAfter = ""; |
102 |
| - break; |
| 100 | + myValueBefore = '# ' |
| 101 | + myValueAfter = '' |
| 102 | + break |
103 | 103 | case 'h2':
|
104 |
| - myValueBefore = "## "; |
105 |
| - myValueAfter = ""; |
106 |
| - break; |
| 104 | + myValueBefore = '## ' |
| 105 | + myValueAfter = '' |
| 106 | + break |
107 | 107 | case 'h3':
|
108 |
| - myValueBefore = "### "; |
109 |
| - myValueAfter = ""; |
110 |
| - break; |
| 108 | + myValueBefore = '### ' |
| 109 | + myValueAfter = '' |
| 110 | + break |
111 | 111 | case 'bq':
|
112 |
| - myValueBefore = "> "; |
113 |
| - myValueAfter = ""; |
114 |
| - break; |
| 112 | + myValueBefore = '> ' |
| 113 | + myValueAfter = '' |
| 114 | + break |
115 | 115 | case 'ol':
|
116 |
| - myValueBefore = "1. "; |
117 |
| - myValueAfter = ""; |
118 |
| - break; |
| 116 | + myValueBefore = '1. ' |
| 117 | + myValueAfter = '' |
| 118 | + break |
119 | 119 | case 'ul':
|
120 |
| - myValueBefore = "- "; |
121 |
| - myValueAfter = ""; |
122 |
| - break; |
| 120 | + myValueBefore = '- ' |
| 121 | + myValueAfter = '' |
| 122 | + break |
123 | 123 | case 'code':
|
124 |
| - myValueBefore = "```"; |
125 |
| - myValueAfter = "```"; |
126 |
| - break; |
| 124 | + myValueBefore = '```' |
| 125 | + myValueAfter = '```' |
| 126 | + break |
127 | 127 | case 'link':
|
128 |
| - myValueBefore = "["; |
129 |
| - myValueAfter = "]()"; |
130 |
| - break; |
| 128 | + myValueBefore = '[' |
| 129 | + myValueAfter = ']()' |
| 130 | + break |
131 | 131 | case 'check':
|
132 |
| - myValueBefore = "- [x] "; |
133 |
| - myValueAfter = ""; |
134 |
| - break; |
| 132 | + myValueBefore = '- [x] ' |
| 133 | + myValueAfter = '' |
| 134 | + break |
135 | 135 | case 'image':
|
136 |
| - myValueBefore = ""; |
137 |
| - myValueAfter = ""; |
138 |
| - break; |
| 136 | + myValueBefore = '' |
| 137 | + myValueAfter = '' |
| 138 | + break |
139 | 139 | case 'hr':
|
140 |
| - myValueBefore = "---\n"; |
141 |
| - myValueAfter = ""; |
142 |
| - break; |
| 140 | + myValueBefore = '---\n' |
| 141 | + myValueAfter = '' |
| 142 | + break |
143 | 143 | case 'table':
|
144 |
| - myValueBefore = "| Header | Title |\n| ----------- | ----------- |\n| Paragraph | Text |\n"; |
145 |
| - myValueAfter = ""; |
146 |
| - break; |
| 144 | + myValueBefore = '| Header | Title |\n| ----------- | ----------- |\n| Paragraph | Text |\n' |
| 145 | + myValueAfter = '' |
| 146 | + break |
147 | 147 | }
|
148 | 148 | if (document.selection) {
|
149 |
| - myField.focus(); |
150 |
| - document.selection.createRange().text = myValueBefore + document.selection.createRange().text + myValueAfter; |
| 149 | + myField.focus() |
| 150 | + document.selection.createRange().text = myValueBefore + document.selection.createRange().text + myValueAfter |
151 | 151 | } else if (myField.selectionStart || myField.selectionStart == '0') {
|
152 |
| - let startPos = myField.selectionStart; |
153 |
| - let endPos = myField.selectionEnd; |
154 |
| - myField.value = myField.value.substring(0, startPos) + myValueBefore + myField.value.substring(startPos, endPos) + myValueAfter + myField.value.substring(endPos, myField.value.length); |
155 |
| - myField.selectionStart = startPos + myValueBefore.length; |
156 |
| - myField.selectionEnd = endPos + myValueBefore.length; |
157 |
| - myField.focus(); |
| 152 | + let startPos = myField.selectionStart |
| 153 | + let endPos = myField.selectionEnd |
| 154 | + myField.value = myField.value.substring(0, startPos) + myValueBefore + myField.value.substring(startPos, endPos) + myValueAfter + myField.value.substring(endPos, myField.value.length) |
| 155 | + myField.selectionStart = startPos + myValueBefore.length |
| 156 | + myField.selectionEnd = endPos + myValueBefore.length |
| 157 | + myField.focus() |
158 | 158 | }
|
159 |
| - keyUp(); |
| 159 | + keyUp() |
160 | 160 | }
|
161 | 161 | const preview = (e) => {
|
162 |
| - let viewer = document.getElementById('viewer'); |
163 |
| - let mark = document.getElementById('getm'); |
| 162 | + let viewer = document.getElementById('viewer') |
| 163 | + let mark = document.getElementById('getm') |
164 | 164 | switch (e) {
|
165 | 165 | case 'nill':
|
166 |
| - viewer.style.width = '100vw'; |
167 |
| - viewer.style.padding = "16px"; |
168 |
| - mark.style.width = "0"; |
169 |
| - mark.style.padding = "0"; |
170 |
| - break; |
| 166 | + viewer.style.width = '100vw' |
| 167 | + viewer.style.padding = '16px' |
| 168 | + mark.style.width = '0' |
| 169 | + mark.style.padding = '0' |
| 170 | + break |
171 | 171 | case 'half':
|
172 |
| - viewer.style.width = '50vw'; |
173 |
| - viewer.style.padding = "16px"; |
174 |
| - mark.style.width = "50vw"; |
175 |
| - mark.style.padding = "16px"; |
176 |
| - break; |
| 172 | + viewer.style.width = '50vw' |
| 173 | + viewer.style.padding = '16px' |
| 174 | + mark.style.width = '50vw' |
| 175 | + mark.style.padding = '16px' |
| 176 | + break |
177 | 177 | case 'full':
|
178 |
| - viewer.style.width = '0'; |
179 |
| - viewer.style.padding = "0"; |
180 |
| - mark.style.width = "100vw"; |
181 |
| - mark.style.padding = "16px"; |
182 |
| - break; |
| 178 | + viewer.style.width = '0' |
| 179 | + viewer.style.padding = '0' |
| 180 | + mark.style.width = '100vw' |
| 181 | + mark.style.padding = '16px' |
| 182 | + break |
183 | 183 | }
|
184 | 184 | }
|
0 commit comments