Code Block editor fixes + Image editor UI
This commit is contained in:
NGPixel committed
1 parent
b524cd9f79
commit
10441de4e8
7 files changed
+54
-7
No files matched your search
+1
-1
@@ -1 +1 @@
|
||||
"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function setInputSelection(e,t,a){if(e.focus(),"undefined"!=typeof e.selectionStart)e.selectionStart=t,e.selectionEnd=a;else if(document.selection&&document.selection.createRange){e.select();var o=document.selection.createRange();o.collapse(!0),o.moveEnd("character",a),o.moveStart("character",t),o.select()}}function makeSafePath(e){var t=_.split(_.trim(e),"/");return t=_.map(t,function(e){return _.kebabCase(_.deburr(_.trim(e)))}),_.join(_.filter(t,function(e){return!_.isEmpty(e)}),"/")}var _createClass=function(){function e(e,t){for(var a=0;a<t.length;a++){var o=t[a];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,a,o){return a&&e(t.prototype,a),o&&e(t,o),t}}();jQuery(document).ready(function(e){e("a").smoothScroll({speed:400,offset:-70});new Sticky(".stickyscroll");e(window).bind("beforeunload",function(){e("#notifload").addClass("active")}),e(document).ajaxSend(function(){e("#notifload").addClass("active")}).ajaxComplete(function(){e("#notifload").removeClass("active")});var t=new Alerts;alertsData&&_.forEach(alertsData,function(e){t.push(e)});var a=io(ioHost);if(jQuery(document).ready(function(e){if(e("#search-input").length){e("#search-input").focus(),Vue.transition("slide",{enterClass:"slideInDown",leaveClass:"fadeOutUp"}),e(".searchresults").css("display","block");var t=new Vue({el:"#header-container",data:{searchq:"",searchres:[],searchsuggest:[],searchload:0,searchactive:!1,searchmoveidx:0,searchmovekey:"",searchmovearr:[]},watch:{searchq:function(e,o){t.searchmoveidx=0,e.length>=3?(t.searchactive=!0,t.searchload++,a.emit("search",{terms:e},function(e){t.searchres=e.match,t.searchsuggest=e.suggest,t.searchmovearr=_.concat([],t.searchres,t.searchsuggest),t.searchload>0&&t.searchload--})):(t.searchactive=!1,t.searchres=[],t.searchsuggest=[],t.searchmovearr=[],t.searchload=0)},searchmoveidx:function(e,a){e>0?t.searchmovekey=t.searchmovearr[e-1].document?"res."+t.searchmovearr[e-1].document.entryPath:"sug."+t.searchmovearr[e-1]:t.searchmovekey=""}},methods:{useSuggestion:function(e){t.searchq=e},closeSearch:function(){t.searchq=""},moveSelectSearch:function(){if(!(t.searchmoveidx<1)){var e=t.searchmoveidx-1;t.searchmovearr[e].document?window.location.assign("/"+t.searchmovearr[e].document.entryPath):t.searchq=t.searchmovearr[e]}},moveDownSearch:function(){t.searchmoveidx<t.searchmovearr.length&&t.searchmoveidx++},moveUpSearch:function(){t.searchmoveidx>0&&t.searchmoveidx--}}});e("main").on("click",t.closeSearch)}}),e("#page-type-view").length&&!function(){var a="home"!==e("#page-type-view").data("entrypath")?e("#page-type-view").data("entrypath"):"",o=a+"/new-page";e(".btn-create-prompt").on("click",function(t){e("#txt-create-prompt").val(o),e("#modal-create-prompt").toggleClass("is-active"),setInputSelection(e("#txt-create-prompt").get(0),a.length+1,o.length),e("#txt-create-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-create-prompt").on("keypress",function(t){13===t.which&&e(".btn-create-go").trigger("click")}),e(".btn-create-go").on("click",function(t){var a=makeSafePath(e("#txt-create-prompt").val());_.isEmpty(a)?e("#txt-create-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-create-prompt").parent().addClass("is-loading"),window.location.assign("/create/"+a))}),""!==a&&e(".btn-move-prompt").removeClass("is-hidden");var n=_.lastIndexOf(a,"/")+1;e(".btn-move-prompt").on("click",function(t){e("#txt-move-prompt").val(a),e("#modal-move-prompt").toggleClass("is-active"),setInputSelection(e("#txt-move-prompt").get(0),n,a.length),e("#txt-move-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-move-prompt").on("keypress",function(t){13===t.which&&e(".btn-move-go").trigger("click")}),e(".btn-move-go").on("click",function(o){var n=makeSafePath(e("#txt-move-prompt").val());_.isEmpty(n)||n===a||"home"===n?e("#txt-move-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-move-prompt").parent().addClass("is-loading"),e.ajax(window.location.href,{data:{move:n},dataType:"json",method:"PUT"}).then(function(e,a,o){e.ok?window.location.assign("/"+n):t.pushError("Something went wrong",e.error)},function(e,a,o){t.pushError("Something went wrong","Save operation failed.")}))})}(),e("#page-type-create").length){var o;!function(){var a=e("#page-type-create").data("entrypath");e(".btn-create-discard").on("click",function(t){e("#modal-create-discard").toggleClass("is-active")}),1===e("#mk-editor").length&&!function(){var a=!1,n=ace.edit("codeblock-editor");n.setTheme("ace/theme/tomorrow_night"),n.getSession().setMode("ace/mode/markdown"),n.setOption("fontSize","14px"),n.setOption("hScrollBarAlwaysVisible",!1),n.setOption("wrap",!0);var i=ace.require("ace/ext/modelist"),r=new Vue({el:"#modal-editor-codeblock",data:{modes:i.modesByName,moLine truncated
|
||||
"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function setInputSelection(e,t,a){if(e.focus(),"undefined"!=typeof e.selectionStart)e.selectionStart=t,e.selectionEnd=a;else if(document.selection&&document.selection.createRange){e.select();var o=document.selection.createRange();o.collapse(!0),o.moveEnd("character",a),o.moveStart("character",t),o.select()}}function makeSafePath(e){var t=_.split(_.trim(e),"/");return t=_.map(t,function(e){return _.kebabCase(_.deburr(_.trim(e)))}),_.join(_.filter(t,function(e){return!_.isEmpty(e)}),"/")}var _createClass=function(){function e(e,t){for(var a=0;a<t.length;a++){var o=t[a];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,a,o){return a&&e(t.prototype,a),o&&e(t,o),t}}();jQuery(document).ready(function(e){e("a").smoothScroll({speed:400,offset:-70});new Sticky(".stickyscroll");e(window).bind("beforeunload",function(){e("#notifload").addClass("active")}),e(document).ajaxSend(function(){e("#notifload").addClass("active")}).ajaxComplete(function(){e("#notifload").removeClass("active")});var t=new Alerts;alertsData&&_.forEach(alertsData,function(e){t.push(e)});var a=io(ioHost);if(jQuery(document).ready(function(e){if(e("#search-input").length){e("#search-input").focus(),Vue.transition("slide",{enterClass:"slideInDown",leaveClass:"fadeOutUp"}),e(".searchresults").css("display","block");var t=new Vue({el:"#header-container",data:{searchq:"",searchres:[],searchsuggest:[],searchload:0,searchactive:!1,searchmoveidx:0,searchmovekey:"",searchmovearr:[]},watch:{searchq:function(e,o){t.searchmoveidx=0,e.length>=3?(t.searchactive=!0,t.searchload++,a.emit("search",{terms:e},function(e){t.searchres=e.match,t.searchsuggest=e.suggest,t.searchmovearr=_.concat([],t.searchres,t.searchsuggest),t.searchload>0&&t.searchload--})):(t.searchactive=!1,t.searchres=[],t.searchsuggest=[],t.searchmovearr=[],t.searchload=0)},searchmoveidx:function(e,a){e>0?t.searchmovekey=t.searchmovearr[e-1].document?"res."+t.searchmovearr[e-1].document.entryPath:"sug."+t.searchmovearr[e-1]:t.searchmovekey=""}},methods:{useSuggestion:function(e){t.searchq=e},closeSearch:function(){t.searchq=""},moveSelectSearch:function(){if(!(t.searchmoveidx<1)){var e=t.searchmoveidx-1;t.searchmovearr[e].document?window.location.assign("/"+t.searchmovearr[e].document.entryPath):t.searchq=t.searchmovearr[e]}},moveDownSearch:function(){t.searchmoveidx<t.searchmovearr.length&&t.searchmoveidx++},moveUpSearch:function(){t.searchmoveidx>0&&t.searchmoveidx--}}});e("main").on("click",t.closeSearch)}}),e("#page-type-view").length&&!function(){var a="home"!==e("#page-type-view").data("entrypath")?e("#page-type-view").data("entrypath"):"",o=a+"/new-page";e(".btn-create-prompt").on("click",function(t){e("#txt-create-prompt").val(o),e("#modal-create-prompt").toggleClass("is-active"),setInputSelection(e("#txt-create-prompt").get(0),a.length+1,o.length),e("#txt-create-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-create-prompt").on("keypress",function(t){13===t.which&&e(".btn-create-go").trigger("click")}),e(".btn-create-go").on("click",function(t){var a=makeSafePath(e("#txt-create-prompt").val());_.isEmpty(a)?e("#txt-create-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-create-prompt").parent().addClass("is-loading"),window.location.assign("/create/"+a))}),""!==a&&e(".btn-move-prompt").removeClass("is-hidden");var n=_.lastIndexOf(a,"/")+1;e(".btn-move-prompt").on("click",function(t){e("#txt-move-prompt").val(a),e("#modal-move-prompt").toggleClass("is-active"),setInputSelection(e("#txt-move-prompt").get(0),n,a.length),e("#txt-move-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-move-prompt").on("keypress",function(t){13===t.which&&e(".btn-move-go").trigger("click")}),e(".btn-move-go").on("click",function(o){var n=makeSafePath(e("#txt-move-prompt").val());_.isEmpty(n)||n===a||"home"===n?e("#txt-move-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-move-prompt").parent().addClass("is-loading"),e.ajax(window.location.href,{data:{move:n},dataType:"json",method:"PUT"}).then(function(e,a,o){e.ok?window.location.assign("/"+n):t.pushError("Something went wrong",e.error)},function(e,a,o){t.pushError("Something went wrong","Save operation failed.")}))})}(),e("#page-type-create").length){var o;!function(){var a=e("#page-type-create").data("entrypath");e(".btn-create-discard").on("click",function(t){e("#modal-create-discard").toggleClass("is-active")}),1===e("#mk-editor").length&&!function(){var a=!1,n=ace.edit("codeblock-editor");n.setTheme("ace/theme/tomorrow_night"),n.getSession().setMode("ace/mode/markdown"),n.setOption("fontSize","14px"),n.setOption("hScrollBarAlwaysVisible",!1),n.setOption("wrap",!0);var i=ace.require("ace/ext/modelist"),r=new Vue({el:"#modal-editor-codeblock",data:{modes:i.modesByName,moLine truncated
|
||||
@@ -32,7 +32,7 @@ let vueCodeBlock = new Vue({
|
||||
if(mde.codemirror.doc.somethingSelected()) {
|
||||
mde.codemirror.execCommand('singleSelection');
|
||||
}
|
||||
let codeBlockText = '```' + vueCodeBlock.modeSelected + '\n' + codeEditor.getValue() + '\n```';
|
||||
let codeBlockText = '\n```' + vueCodeBlock.modeSelected + '\n' + codeEditor.getValue() + '\n```\n';
|
||||
|
||||
mde.codemirror.doc.replaceSelection(codeBlockText);
|
||||
vueCodeBlock.cancel();
|
||||
|
||||
@@ -88,11 +88,19 @@ if($('#mk-editor').length === 1) {
|
||||
{
|
||||
name: "image",
|
||||
action: (editor) => {
|
||||
//todo
|
||||
$('#modal-editor-image').slideDown();
|
||||
},
|
||||
className: "fa fa-image",
|
||||
title: "Insert Image",
|
||||
},
|
||||
{
|
||||
name: "file",
|
||||
action: (editor) => {
|
||||
//todo
|
||||
},
|
||||
className: "fa fa-file-text-o",
|
||||
title: "Insert File",
|
||||
},
|
||||
'|',
|
||||
{
|
||||
name: "inline-code",
|
||||
@@ -106,7 +114,7 @@ if($('#mk-editor').length === 1) {
|
||||
return '`' + s + '`';
|
||||
});
|
||||
editor.codemirror.doc.replaceSelections(curSel);
|
||||
|
||||
|
||||
},
|
||||
className: "fa fa-terminal",
|
||||
title: "Inline Code",
|
||||
|
||||
@@ -77,6 +77,7 @@
|
||||
"remove-markdown": "^0.1.0",
|
||||
"search-index": "^0.8.15",
|
||||
"serve-favicon": "^2.3.0",
|
||||
"sharp": "^0.16.0",
|
||||
"simplemde": "^1.11.2",
|
||||
"snyk": "^1.19.1",
|
||||
"socket.io": "^1.4.8",
|
||||
|
||||
@@ -11,9 +11,11 @@
|
||||
select(style={width: '300px'}, v-model='modeSelected')
|
||||
option(v-for="mode in modes" v-bind:value='mode.name') {{ mode.caption }}
|
||||
.column.is-narrow
|
||||
a.button.is-warning.is-outlined(v-on:click="cancel") Cancel
|
||||
.column.is-narrow
|
||||
a.button.is-primary.is-outlined(v-on:click="insertCode") Insert Code Block
|
||||
.control.is-grouped
|
||||
p.control
|
||||
a.button.is-warning.is-outlined(v-on:click="cancel") Cancel
|
||||
p.control
|
||||
a.button.is-primary.is-outlined(v-on:click="insertCode") Insert Code Block
|
||||
|
||||
.ace-container(style={'border-radius':'5px'})
|
||||
#codeblock-editor
|
||||
@@ -0,0 +1,35 @@
|
||||
|
||||
.modallayer#modal-editor-image
|
||||
.modallayer-content
|
||||
|
||||
.columns
|
||||
.column
|
||||
h3 Image
|
||||
.column.is-narrow
|
||||
.control.is-grouped
|
||||
p.control
|
||||
a.button.is-dark.is-outlined(v-on:click="cancel")
|
||||
span.icon.is-small: i.fa.fa-folder
|
||||
span New Folder
|
||||
.control.has-addons
|
||||
a.button.is-info.is-outlined(v-on:click="cancel")
|
||||
span.icon.is-small: i.fa.fa-upload
|
||||
span Upload Image
|
||||
a.button.is-info.is-outlined(v-on:click="cancel")
|
||||
span.icon.is-small: i.fa.fa-download
|
||||
span Fetch from URL
|
||||
.column.is-narrow
|
||||
.control.is-grouped
|
||||
p.control
|
||||
a.button.is-warning.is-outlined(v-on:click="cancel") Cancel
|
||||
p.control
|
||||
a.button.is-primary.is-outlined(v-on:click="insertCode") Insert Image
|
||||
|
||||
.columns
|
||||
.column.is-one-quarter(style={'max-width':'350px'})
|
||||
.box
|
||||
| Folders
|
||||
.column
|
||||
| Files
|
||||
|
||||
|
||||
@@ -23,4 +23,5 @@ block content
|
||||
|
||||
include ../modals/edit-discard.pug
|
||||
include ../modals/editor-link.pug
|
||||
include ../modals/editor-image.pug
|
||||
include ../modals/editor-codeblock.pug
|
||||
Reference in new issue
Block a user