Skip to content

Commit

Permalink
Add toolbar for basic markdown formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
amitmerchant1990 committed May 25, 2016
1 parent faeec22 commit 491c831
Show file tree
Hide file tree
Showing 13 changed files with 907 additions and 19 deletions.
4 changes: 4 additions & 0 deletions css/font-awesome.min.css

Large diffs are not rendered by default.

Binary file added css/fonts/FontAwesome.otf
Binary file not shown.
Binary file added css/fonts/fontawesome-webfont.eot
Binary file not shown.
685 changes: 685 additions & 0 deletions css/fonts/fontawesome-webfont.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css/fonts/fontawesome-webfont.ttf
Binary file not shown.
Binary file added css/fonts/fontawesome-webfont.woff
Binary file not shown.
Binary file added css/fonts/fontawesome-webfont.woff2
Binary file not shown.
47 changes: 47 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,53 @@ html, body, section, .full-height {
outline: 1px solid #ECE6E6;
}

#toolbarArea{
position: fixed;
top: 25px;
left: 0;
z-index: 999;
width: 100%;
height: 28px;
display:none;
/*box-shadow: 0px 1px 11px -2px rgba(0,0,0,0.75);*/
border-bottom: 1px #BFBFBF solid;
}

.editor-toolbar{
display: inline-block;
text-align: center;
text-decoration: none!important;
color: #2c3e50!important;
width: 25px;
height: 25px;
margin: 0;
border: 1px solid transparent;
border-radius: 3px;
cursor: pointer;
line-height: 24px;
padding: 4px 10px 0px 6px;
}

.editor-toolbar:hover {
background: #fcfcfc;
border-color: #95a5a6;
}

.separator {
display: inline-block;
width: 0;
border-left: 1px solid #d9d9d9;
border-right: 1px solid #fff;
color: transparent;
text-indent: -10px;
margin: 0 6px;
}

.toolContainer{
width: 16px;
float: left;
}

::-webkit-scrollbar {
width: 12px;
}
Expand Down
Binary file modified img/favicon.ico
Binary file not shown.
Binary file added img/markdownify.icns
Binary file not shown.
28 changes: 23 additions & 5 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,36 @@
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/codemirror.css">
<link rel="stylesheet" href="css/base16-dark.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body class="container-fluid">
<div class="optContainer">
<div class="mode">
<input type="radio" name="changeTheme" value="light" onclick="changeTheme(this);" checked="checked"> <b>Light</b>
<input type="radio" name="changeTheme" value="dark" onclick="changeTheme(this);"> <b>Dark</b>
<span class="toolContainer">
<a id="angleToolBar" title="Toolbar" class="fa fa-angle-double-right" onclick="showToolBar();" style="cursor: pointer;text-decoration:none;"></a>
</span>
<span>
<input type="radio" name="changeTheme" value="light" onclick="changeTheme(this);" checked="checked"> <label style="vertical-align: middle;"><b>Light</b></label>
<input type="radio" name="changeTheme" value="dark" onclick="changeTheme(this);"> <label style="vertical-align: middle;"><b>Dark</b></label>
</span>
</div>
<div class="pref">
<input type="radio" name="showPreference" value="html" onclick="clkPref(this);"> <b>HTML</b>
<input type="radio" name="showPreference" value="preview" onclick="clkPref(this);" checked="checked"> <b>Preview</b>
<input type="radio" name="showPreference" value="html" onclick="clkPref(this);"> <label style="vertical-align: middle;"><b>HTML</b></label>
<input type="radio" name="showPreference" value="preview" onclick="clkPref(this);" checked="checked"> <label style="vertical-align: middle;"><b>Preview</b></label>
</div>
</div>
<section class="row" style="padding-top: 24px;">
<div id="toolbarArea">
<div style="padding-left:10px;">
<a onclick="toggleFormat('bold');" title="Bold" class="fa fa-bold editor-toolbar"></a>
<a onclick="toggleFormat('italic');" title="Italic" class="fa fa-italic editor-toolbar"></a>
<a onclick="toggleFormat('strikethrough');" title="StrikeThrough" class="fa fa-strikethrough editor-toolbar"></a>
<i class="separator">|</i>
<a onclick="toggleBlockquote();" title="Quote" class="fa fa-quote-left editor-toolbar"></a>
<a onclick="toggleUnorderedList();" title="Unordered List" class="fa fa-list-ul editor-toolbar"></a>
<a onclick="toggleOrderedList();" title="Ordered List" class="fa fa-list-ol editor-toolbar"></a>
</div>
</div>
<section class="row" id="editArea" style="padding-top: 24px;">
<div class="col-md-6 full-height" style="box-shadow: -10px 13px 6px 10px rgba(0,0,0,0.4);">
<textarea id="plainText" placeholder="Write your Markdown here.." autofocus></textarea>
</div>
Expand All @@ -32,6 +49,7 @@
<script src="js/libs/codemirror.js"></script>
<script src="js/markdown/markdown.js"></script>
<script src="js/app.js"></script>
<script src="js/format.js"></script>
<script src="js/functions.js"></script>
<script src="js/ipc_renderer.js"></script>
</body>
Expand Down
120 changes: 120 additions & 0 deletions js/format.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
function toggleFormat(type){
var startPoint = cm.getCursor("start");
var endPoint = cm.getCursor("end");
if(type == "bold") {
var start_chars = "**";
} else if(type == "italic") {
var start_chars = "_";
} else if(type == "strikethrough") {
var start_chars = "~~";
}
text = cm.getSelection();
var start = start_chars;
var end = start_chars;
text = text.split("**").join("");
text = text.split("__").join("");
if(type == "bold") {
text = text.split("**").join("");
text = text.split("__").join("");
} else if(type == "italic") {
text = text.split("*").join("");
text = text.split("_").join("");
} else if(type == "strikethrough") {
text = text.split("~~").join("");
}
cm.replaceSelection(start + text + end);
startPoint.ch += start_chars.length;
endPoint.ch = startPoint.ch + text.length;
cm.setSelection(startPoint, endPoint);
cm.focus();
}

function getState(cm, pos) {
pos = pos || cm.getCursor("start");
var stat = cm.getTokenAt(pos);
if(!stat.type) return {};

var types = stat.type.split(" ");

var ret = {},
data, text;
for(var i = 0; i < types.length; i++) {
data = types[i];
if(data === "strong") {
ret.bold = true;
} else if(data === "variable-2") {
text = cm.getLine(pos.line);
if(/^\s*\d+\.\s/.test(text)) {
ret["ordered-list"] = true;
} else {
ret["unordered-list"] = true;
}
} else if(data === "atom") {
ret.quote = true;
} else if(data === "em") {
ret.italic = true;
} else if(data === "quote") {
ret.quote = true;
} else if(data === "strikethrough") {
ret.strikethrough = true;
} else if(data === "comment") {
ret.code = true;
} else if(data === "link") {
ret.link = true;
} else if(data === "tag") {
ret.image = true;
} else if(data.match(/^header(\-[1-6])?$/)) {
ret[data.replace("header", "heading")] = true;
}
}
return ret;
}

function toggleBlockquote() {
_toggleLine(cm, "quote");
}

function toggleUnorderedList(editor) {
_toggleLine(cm, "unordered-list");
}

function toggleOrderedList(editor) {
_toggleLine(cm, "ordered-list");
}

function _toggleLine(cm, name) {
if(/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
return;

var stat = getState(cm);
var startPoint = cm.getCursor("start");
var endPoint = cm.getCursor("end");
var repl = {
"quote": /^(\s*)\>\s+/,
"unordered-list": /^(\s*)(\*|\-|\+)\s+/,
"ordered-list": /^(\s*)\d+\.\s+/
};
var map = {
"quote": "> ",
"unordered-list": "* ",
"ordered-list": "1. "
};
for(var i = startPoint.line; i <= endPoint.line; i++) {
(function(i) {
var text = cm.getLine(i);
if(stat[name]) {
text = text.replace(repl[name], "$1");
} else {
text = map[name] + text;
}
cm.replaceRange(text, {
line: i,
ch: 0
}, {
line: i,
ch: 99999999999999
});
})(i);
}
cm.focus();
}
42 changes: 28 additions & 14 deletions js/functions.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,33 @@
var clkPref = function (opt) {
currentValue = opt.value;
if ( currentValue=='preview' ) {
document.getElementById("htmlPreview").style.display = "none";
document.getElementById("markdown").style.display = "block";
} else if ( currentValue=='html' ) {
document.getElementById("markdown").style.display = "none";
document.getElementById("htmlPreview").style.display = "block";
}
currentValue = opt.value;
if ( currentValue=='preview' ) {
document.getElementById("htmlPreview").style.display = "none";
document.getElementById("markdown").style.display = "block";
} else if ( currentValue=='html' ) {
document.getElementById("markdown").style.display = "none";
document.getElementById("htmlPreview").style.display = "block";
}
}

var changeTheme = function (opt) {
currentValueTheme = opt.value;
if ( currentValueTheme=='light' ) {
cm.setOption("theme", "default");
} else if ( currentValueTheme=='dark' ) {
cm.setOption("theme", "base16-dark");
}
currentValueTheme = opt.value;
if ( currentValueTheme=='light' ) {
cm.setOption("theme", "default");
} else if ( currentValueTheme=='dark' ) {
cm.setOption("theme", "base16-dark");
}
}

function showToolBar(){
if(document.getElementById("toolbarArea").style.display == "block"){
document.getElementById("angleToolBar").className = "";
document.getElementById("angleToolBar").className = "fa fa-angle-double-right";
document.getElementById("toolbarArea").style.display = "none";
document.getElementById("editArea").style.paddingTop = "24px";
}else{
document.getElementById("angleToolBar").className = "";
document.getElementById("angleToolBar").className = "fa fa-angle-double-down";
document.getElementById("toolbarArea").style.display = "block";
document.getElementById("editArea").style.paddingTop = "53px";
}
}

0 comments on commit 491c831

Please sign in to comment.