From 8fdc68fc9f862c5d591c7f7b5d10ef6889d03b0f Mon Sep 17 00:00:00 2001 From: Chris Vanderloo Date: Sat, 30 Jun 2018 13:11:47 -0400 Subject: [PATCH] Basic Markdown engine with header support --- index.html | 46 ++++++++++++++++---------------- index.js | 69 +++++++++++++++++++++++++++++++++++++++--------- style/main.scss | 48 ++++++++++++++++++++++++--------- style/theme.scss | 15 +++++++++-- 4 files changed, 128 insertions(+), 50 deletions(-) diff --git a/index.html b/index.html index 5265c31..5779d2f 100644 --- a/index.html +++ b/index.html @@ -1,27 +1,27 @@ - - untitled - - - - -
-
- untitled + + untitled + + + + +
+
+ Untitled +
-
-
-
-
Write here
+
+
+

Write here stuff

+
-
-
- - -
- +
+ + +
+ diff --git a/index.js b/index.js index 226b233..4ced7d1 100644 --- a/index.js +++ b/index.js @@ -1,27 +1,66 @@ require('electron-titlebar') -const electron = require('electron') +const {app,BrowserWindow,ipcRenderer} = require('electron') const {dialog} = require('electron').remote; const fs = require('fs'); -if (process.platform === 'darwin') { - document.getElementById('') +window.onload = () => { + initEditor(); } +// MARKDOWN REGEX + +function manageClass(regex, cl, element) { + if (element.innerHTML.search(regex) != -1) element.classList.add(cl); + else if (element.classList.contains(cl)) element.classList.remove(cl); +} + +function markdownEngine(editor) { + editor.querySelectorAll("p").forEach((p) => { + manageClass(/^#[^#].+/g, "h1", p); + manageClass(/^##[^#].+/g, "h2", p); + manageClass(/^###[^#].+/g, "h3", p); + manageClass(/^####[^#].+/g, "h4", p); + // if (p.innerHTML.search(/^#[^#].+/g) != -1) p.classList.add("h1"); + // else if (p.classList.contains("h1")) p.classList.remove("h1"); + }); +} + +function initEditor() { + let editor = document.getElementById('editor'); + editor.addEventListener('input', function(ev) { + if (ev.keyCode == '13') { + document.execCommand('formatBlock', false, 'p'); + return false; + } + markdownEngine(editor); + }, false); +} + +// FILE MANAGEMENT + var current_file = ""; function saveFile() { let writable_content = document.getElementById('editor').innerHTML .replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>') - .replace(/"/g, '"'); + .replace(/"/g, '"') + .replace(/
/g, '\u000a') + .replace(/<\/p>/g, '\u000a') + .replace(/

/g, '') + .replace(/ /g, '\u0020'); if (current_file === "") { - dialog.showSaveDialog((fileName) => { + dialog.showSaveDialog({ + filters: [ + {name: 'Markdown', extensions: ['md']}, + {name: 'Text', extensions: ['txt']}, + {name: 'All Files', extensions: ['*']} + ] + }, (fileName) => { if (fileName === undefined){ return; } - - // fileName is a string that contains the path and filename created in the save file dialog. fs.writeFile(fileName, writable_content, (err) => { if (err) { @@ -30,14 +69,16 @@ let writable_content = document.getElementById('editor').innerHTML document.getElementsByTagName('title')[0].innerHTML = fileName; document.getElementById('title').innerHTML = fileName; current_file = fileName; + + app.addRecentDocument(fileName); }); }); } else { fs.writeFile(current_file, writable_content, (err) => { - if (err) { - alert("An error occurred saving the file "+ err.message) - } + if (err) { + alert("An error occurred saving the file "+ err.message) + } }); } } @@ -52,14 +93,18 @@ function openFile() { fs.readFile(filePath, 'utf-8', (err, data) => { if (err) alert('Error reading the file: ' + err); - document.getElementById('editor').innerHTML = data + document.getElementById('editor').innerHTML = "

" + data .replace(/&/g, '&') .replace(//g, '>') - .replace(/"/g, '"'); + .replace(/"/g, '"') + .replace(/\u000a/g, '

') + .replace(/\u0020/g, ' '); }); document.getElementsByTagName('title')[0].innerHTML = filePath; document.getElementById('title').innerHTML = filePath; current_file = filePath; + + app.addRecentDocument(filePath); }); } diff --git a/style/main.scss b/style/main.scss index 96bd821..47cfff9 100644 --- a/style/main.scss +++ b/style/main.scss @@ -33,19 +33,6 @@ body { width: 100%; height: 100%; } - #editor { - font-size: 16px; - position: relative; - overflow: auto; - padding: 2px; - outline: none; - width: 80%; - height: 100%; - max-width: 800px; - text-align: left; - display: inline-block; - white-space: pre; - } } .footer { line-height: 40px; @@ -87,3 +74,38 @@ body { background: rgba(0,0,0,0.61); /* Some darker color when you click it */ -webkit-border-radius: 100px; } + +// EDITOR MARKDOWN STYLES + +#editor { + font-size: 16px; + position: relative; + overflow: auto; + padding: 2px; + outline: none; + width: 80%; + height: 100%; + max-width: 800px; + text-align: left; + display: inline-block; + .h1,.h2,.h3,.h4 { + font-weight: bold; + } + .h1,.h2 { + border-bottom: solid 1px gray; + padding-bottom: 5px; + margin-bottom: -5px; + } + .h1 { + font-size: 2em; + } + .h2 { + font-size: 1.6em; + } + .h3 { + font-size: 1.4em; + } + .h4 { + font-size: 1.2em; + } +} diff --git a/style/theme.scss b/style/theme.scss index fb796d7..20bac09 100644 --- a/style/theme.scss +++ b/style/theme.scss @@ -3,8 +3,19 @@ */ // COLORS +// desert-theme $text-color: #50514F; $background-color: #FAF3DD; +// deep-sea-theme +$text-color: #CDDFD1; +$background-color: #222E50; +// modern-dark-theme +$text-color: #FFFFFF; +$background-color: #273239; +// modern-bright-theme +// $text-color: #0C1713; +// $background-color: #EAF4F4; + // HEADER (blend options) $header-color: $background-color; @@ -15,5 +26,5 @@ $header-text-color: $text-color; // $header-text-color: black; // FONTS -$header-font: 'Arial'; -$body-font: 'Arial'; +$header-font: 'Helvetica'; +$body-font: 'Helvetica'; -- 2.51.2