Markdown editor improvements
This commit is contained in:
@@ -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
|
||||
// ====================================
|
||||
|
169
client/js/components/editor.js
Normal file
169
client/js/components/editor.js
Normal 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.');
|
||||
});
|
||||
|
||||
});
|
@@ -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
|
||||
|
||||
}
|
@@ -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
|
||||
|
||||
}
|
@@ -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 {
|
||||
}
|
@@ -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";
|
||||
|
||||
|
@@ -1,4 +1,12 @@
|
||||
|
||||
#header-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
#header {
|
||||
z-index: 5;
|
||||
}
|
||||
|
Reference in New Issue
Block a user