Markdown editor improvements

This commit is contained in:
NGPixel
2016-09-10 22:53:21 -04:00
parent 492bb9efa6
commit 97602b51c8
160 changed files with 558 additions and 123 deletions

View File

@@ -8,7 +8,7 @@ jQuery( document ).ready(function( $ ) {
$('a').smoothScroll({
speed: 400,
offset: -20
offset: -70
});
var sticky = new Sticky('.stickyscroll');
@@ -33,25 +33,6 @@ jQuery( document ).ready(function( $ ) {
});
}
// ====================================
// Markdown Editor
// ====================================
if($('#mk-editor').length === 1) {
var mde = new SimpleMDE({
autofocus: true,
autoDownloadFontAwesome: false,
element: $("#mk-editor").get(0),
hideIcons: ['heading', 'quote'],
placeholder: 'Enter Markdown formatted content here...',
showIcons: ['strikethrough', 'heading-1', 'heading-2', 'heading-3', 'code', 'table', 'horizontal-rule'],
spellChecker: false,
status: false
});
}
// ====================================
// Establish WebSocket connection
// ====================================

View File

@@ -0,0 +1,169 @@
// ====================================
// Markdown Editor
// ====================================
if($('#mk-editor').length === 1) {
require.config({paths: { "ace" : "/assets/js/ace"}});
let scEditor = ace.edit("codeblock-editor");
scEditor.setTheme("ace/theme/tomorrow_night");
scEditor.getSession().setMode("ace/mode/markdown");
scEditor.setOption('hScrollBarAlwaysVisible', false);
scEditor.setOption('wrap', true);
var modelist = ace.require("ace/ext/modelist");
var mde = new SimpleMDE({
autofocus: true,
autoDownloadFontAwesome: false,
element: $("#mk-editor").get(0),
placeholder: 'Enter Markdown formatted content here...',
spellChecker: false,
status: false,
toolbar: [{
name: "bold",
action: SimpleMDE.toggleBold,
className: "fa fa-bold",
title: "Bold",
},
{
name: "italic",
action: SimpleMDE.toggleItalic,
className: "fa fa-italic",
title: "Italic",
},
{
name: "strikethrough",
action: SimpleMDE.toggleStrikethrough,
className: "fa fa-strikethrough",
title: "Strikethrough",
},
'|',
{
name: "heading-1",
action: SimpleMDE.toggleHeading1,
className: "fa fa-header fa-header-x fa-header-1",
title: "Big Heading",
},
{
name: "heading-2",
action: SimpleMDE.toggleHeading2,
className: "fa fa-header fa-header-x fa-header-2",
title: "Medium Heading",
},
{
name: "heading-3",
action: SimpleMDE.toggleHeading3,
className: "fa fa-header fa-header-x fa-header-3",
title: "Small Heading",
},
{
name: "quote",
action: SimpleMDE.toggleBlockquote,
className: "fa fa-quote-left",
title: "Quote",
},
'|',
{
name: "unordered-list",
action: SimpleMDE.toggleUnorderedList,
className: "fa fa-list-ul",
title: "Bullet List",
},
{
name: "ordered-list",
action: SimpleMDE.toggleOrderedList,
className: "fa fa-list-ol",
title: "Numbered List",
},
'|',
{
name: "link",
action: (editor) => {
$('#modal-editor-link').slideToggle();
},
className: "fa fa-link",
title: "Insert Link",
},
{
name: "image",
action: (editor) => {
//todo
},
className: "fa fa-image",
title: "Insert Image",
},
'|',
{
name: "inline-code",
action: (editor) => {
if(!editor.codemirror.doc.somethingSelected()) {
return alerts.pushError('Invalid selection','You must select at least 1 character first.');
}
let curSel = editor.codemirror.doc.getSelections();
curSel = _.map(curSel, (s) => {
return '`' + s + '`';
});
editor.codemirror.doc.replaceSelections(curSel);
},
className: "fa fa-terminal",
title: "Inline Code",
},
{
name: "code-block",
action: (editor) => {
$('#modal-editor-codeblock').slideDown(400, () => {
scEditor.resize();
scEditor.focus();
});
},
className: "fa fa-code",
title: "Code Block",
},
'|',
{
name: "table",
action: (editor) => {
//todo
},
className: "fa fa-table",
title: "Insert Table",
},
{
name: "horizontal-rule",
action: SimpleMDE.drawHorizontalRule,
className: "fa fa-minus",
title: "Horizontal Rule",
}
],
shortcuts: {
"toggleBlockquote": null,
"toggleFullScreen": null
}
});
}
//-> Save
$('.btn-edit-save').on('click', (ev) => {
$.ajax(window.location.href, {
data: {
markdown: mde.value()
},
dataType: 'json',
method: 'PUT'
}).then((rData, rStatus, rXHR) => {
if(rData.ok) {
window.location.assign('/' + pageEntryPath);
} else {
alerts.pushError('Something went wrong', rData.error);
}
}, (rXHR, rStatus, err) => {
alerts.pushError('Something went wrong', 'Save operation failed.');
});
});

View File

@@ -1,32 +1,14 @@
if($('#page-type-create').length) {
let pageEntryPath = $('#page-type-create').data('entrypath');
//-> Discard
$('.btn-create-discard').on('click', (ev) => {
$('#modal-create-discard').toggleClass('is-active');
});
//-> Save
$('.btn-create-save').on('click', (ev) => {
$.ajax(window.location.href, {
data: {
markdown: mde.value()
},
dataType: 'json',
method: 'PUT'
}).then((rData, rStatus, rXHR) => {
if(rData.ok) {
window.location.assign('/' + $('#page-type-create').data('entrypath'));
} else {
alerts.pushError('Something went wrong', rData.error);
}
}, (rXHR, rStatus, err) => {
alerts.pushError('Something went wrong', 'Save operation failed.');
});
});
//=include ../components/editor.js
}

View File

@@ -1,8 +1,7 @@
if($('#page-type-edit').length) {
$('.editor-toolbar').attr('data-margin-top', $('#header').height());
var editorToolbarSticky = new Sticky('.editor-toolbar');
let pageEntryPath = $('#page-type-edit').data('entrypath');
//-> Discard
@@ -10,26 +9,6 @@ if($('#page-type-edit').length) {
$('#modal-edit-discard').toggleClass('is-active');
});
//-> Save
$('.btn-edit-save').on('click', (ev) => {
$.ajax(window.location.href, {
data: {
markdown: mde.value()
},
dataType: 'json',
method: 'PUT'
}).then((rData, rStatus, rXHR) => {
if(rData.ok) {
window.location.assign('/' + $('#page-type-edit').data('entrypath'));
} else {
alerts.pushError('Something went wrong', rData.error);
}
}, (rXHR, rStatus, err) => {
alerts.pushError('Something went wrong', 'Save operation failed.');
});
});
//=include ../components/editor.js
}

View File

@@ -1,25 +1,61 @@
.editor-toolbar {
z-index: 2;
background-color: #FFF;
background-color: rgba(0,0,0,0.65);
border: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
opacity: 0.9;
opacity: 1;
position: fixed;
top: 52px;
left: 0;
width: 100%;
&:hover {
opacity: 1;
}
a {
color: #FFF !important;
&.active, &:hover {
background-color: rgba(0,0,0,0.5);
border-color: #888;
}
}
i.separator {
margin-top: 5px;
border-left-color: #000;
border-right-color: #AAA;
}
}
.CodeMirror {
border-left: none;
border-right: none;
padding-top: 52px;
}
.editor-toolbar i.separator {
margin-top: 5px;
.CodeMirror .CodeMirror-code .cm-url {
color: #00ACC1;
}
.CodeMirror .CodeMirror-code .cm-header-1 {
color: #635c8c;
font-size: 2em;
font-weight: 400;
}
.CodeMirror .CodeMirror-code .cm-header-2 {
color: #222324;
font-size: 1.75em;
font-weight: 300;
}
.CodeMirror .CodeMirror-code .cm-header-3 {
color: #222324;
font-size: 1.5em;
font-weight: 300;
}
.editor-toolbar .fa {
@@ -28,13 +64,43 @@
.ace-container {
position: relative;
}
#page-type-source .ace-container {
min-height: 95vh;
}
#source-display {
#modal-editor-codeblock .ace-container {
height: 400px;
}
#source-display, #codeblock-editor {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.modallayer {
position: fixed;
top: 100px;
width: 100%;
background-color: rgba(255,255,255,0.95);
border-bottom: 1px solid $grey-light;
z-index: 6;
padding: 20px;
border-bottom: 1px solid #CCC;
box-shadow: 0 2px 3px rgba(17,17,17,.1);
display: none;
> h3, .column > h3 {
color: $grey-dark;
font-size: 24px;
font-weight: 300;
}
}
.modallayer-content {
}

View File

@@ -5,6 +5,10 @@ html {
box-sizing: inherit;
}
#root {
padding-top: 52px;
}
//$family-sans-serif: "Roboto", "Helvetica", "Arial", sans-serif;
$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

View File

@@ -1,4 +1,12 @@
#header-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 4;
}
#header {
z-index: 5;
}