Skip to content

Commit df92275

Browse files
committed
added command shortcuts
1 parent 56542fc commit df92275

File tree

3 files changed

+326
-8
lines changed

3 files changed

+326
-8
lines changed

draceditor/static/css/draceditor.css

Lines changed: 126 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
left: 50%;
2727
right: 0;
2828
overflow: auto;
29-
background: #f0f0f0
29+
background: #F9F9F9;
3030
}
3131

3232
@media print {
@@ -39,6 +39,130 @@
3939
}
4040
}
4141

42-
.marked-emoji {
42+
.main-draceditor .markdown-preview .marked-emoji {
4343
max-width: 20px;
4444
}
45+
.main-draceditor .markdown-preview{font-size:14px;line-height:1.6;}
46+
.main-draceditor .markdown-preview>*:first-child{margin-top:0 !important}
47+
.main-draceditor .markdown-preview>*:last-child{margin-bottom:20px !important}
48+
.main-draceditor .markdown-preview a.absent{color:#c00}
49+
.main-draceditor .markdown-preview a.anchor{display:block;padding-left:30px;margin-left:-30px;cursor:pointer;position:absolute;top:0;left:0;bottom:0}
50+
.main-draceditor .markdown-preview h1,
51+
.main-draceditor .markdown-preview h2,
52+
.main-draceditor .markdown-preview h3,
53+
.main-draceditor .markdown-preview h4,
54+
.main-draceditor .markdown-preview h5,
55+
.main-draceditor .markdown-preview h6{margin:20px 0 10px;padding:0;font-weight:bold;-webkit-font-smoothing:antialiased;cursor:text;position:relative}
56+
57+
.main-draceditor .markdown-preview h1:hover a.anchor,
58+
.main-draceditor .markdown-preview h2:hover a.anchor,
59+
.main-draceditor .markdown-preview h3:hover a.anchor,
60+
.main-draceditor .markdown-preview h4:hover a.anchor,
61+
.main-draceditor .markdown-preview h5:hover a.anchor,
62+
.main-draceditor .markdown-preview h6:hover a.anchor{text-decoration:none;line-height:1;padding-left:0;margin-left:-22px;top:15%}
63+
64+
.main-draceditor .markdown-preview h1 tt,
65+
.main-draceditor .markdown-preview h1 code,
66+
.main-draceditor .markdown-preview h2 tt,
67+
.main-draceditor .markdown-preview h2 code,
68+
.main-draceditor .markdown-preview h3 tt,
69+
.main-draceditor .markdown-preview h3 code,
70+
.main-draceditor .markdown-preview h4 tt,
71+
.main-draceditor .markdown-preview h4 code,
72+
.main-draceditor .markdown-preview h5 tt,
73+
.main-draceditor .markdown-preview h5 code,
74+
.main-draceditor .markdown-preview h6 tt,
75+
.main-draceditor .markdown-preview h6 code{font-size:inherit}
76+
77+
.main-draceditor .markdown-preview h1{font-size:28px;color:#000}
78+
.main-draceditor .markdown-preview h2{font-size:24px;border-bottom:1px solid #ccc;color:#000}
79+
.main-draceditor .markdown-preview h3{font-size:18px}
80+
.main-draceditor .markdown-preview h4{font-size:16px}
81+
.main-draceditor .markdown-preview h5{font-size:14px}
82+
.main-draceditor .markdown-preview h6{color:#777;font-size:14px}
83+
.main-draceditor .markdown-preview p,
84+
.main-draceditor .markdown-preview blockquote,
85+
.main-draceditor .markdown-preview ul,
86+
.main-draceditor .markdown-preview ol,
87+
.main-draceditor .markdown-preview dl,
88+
.main-draceditor .markdown-preview table,
89+
.main-draceditor .markdown-preview pre{margin:15px 0}
90+
.main-draceditor .markdown-preview hr{
91+
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;
92+
border:0 none;
93+
color:#ccc;
94+
height:4px;
95+
padding:0
96+
}
97+
.main-draceditor .markdown-preview>h2:first-child,
98+
.main-draceditor .markdown-preview>h1:first-child,
99+
.main-draceditor .markdown-preview>h1:first-child+h2,
100+
.main-draceditor .markdown-preview>h3:first-child,
101+
.main-draceditor .markdown-preview>h4:first-child,
102+
.main-draceditor .markdown-preview>h5:first-child,
103+
.main-draceditor .markdown-preview>h6:first-child{margin-top:0;padding-top:0}
104+
.main-draceditor .markdown-preview a:first-child h1,
105+
.main-draceditor .markdown-preview a:first-child h2,
106+
.main-draceditor .markdown-preview a:first-child h3,
107+
.main-draceditor .markdown-preview a:first-child h4,
108+
.main-draceditor .markdown-preview a:first-child h5,
109+
.main-draceditor .markdown-preview a:first-child h6{margin-top:0;padding-top:0}
110+
.main-draceditor .markdown-preview h1+p,
111+
.main-draceditor .markdown-preview h2+p,
112+
.main-draceditor .markdown-preview h3+p,
113+
.main-draceditor .markdown-preview h4+p,
114+
.main-draceditor .markdown-preview h5+p,
115+
.main-draceditor .markdown-preview h6+p{margin-top:0}
116+
.main-draceditor .markdown-preview li p.first{display:inline-block}
117+
.main-draceditor .markdown-preview ul li {list-style: disc;}
118+
.main-draceditor .markdown-preview ul,
119+
.main-draceditor .markdown-preview ol{padding-left:30px}
120+
.main-draceditor .markdown-preview ul.no-list,
121+
.main-draceditor .markdown-preview ol.no-list{list-style-type:none;padding:0}
122+
.main-draceditor .markdown-preview ul li>:first-child,
123+
.main-draceditor .markdown-preview ul li ul:first-of-type,
124+
.main-draceditor .markdown-preview ol li>:first-child,
125+
.main-draceditor .markdown-preview ol li ul:first-of-type{margin-top:0px}
126+
.main-draceditor .markdown-preview ul ul,
127+
.main-draceditor .markdown-preview ul ol,
128+
.main-draceditor .markdown-preview ol ol,
129+
.main-draceditor .markdown-preview ol ul{margin-bottom:0}
130+
.main-draceditor .markdown-preview dl{padding:0}
131+
.main-draceditor .markdown-preview dl dt{font-size:14px;font-weight:bold;font-style:italic;padding:0;margin:15px 0 5px}
132+
.main-draceditor .markdown-preview dl dt:first-child{padding:0}
133+
.main-draceditor .markdown-preview dl dt>:first-child{margin-top:0px}
134+
.main-draceditor .markdown-preview dl dt>:last-child{margin-bottom:0px}
135+
.main-draceditor .markdown-preview dl dd{margin:0 0 15px;padding:0 15px}
136+
.main-draceditor .markdown-preview dl dd>:first-child{margin-top:0px}
137+
.main-draceditor .markdown-preview dl dd>:last-child{margin-bottom:0px}
138+
.main-draceditor .markdown-preview blockquote{border-left:4px solid #DDD;padding:0 15px;color:#777;background-color: #f0f0f0}
139+
.main-draceditor .markdown-preview blockquote>:first-child{margin-top:0px}
140+
.main-draceditor .markdown-preview blockquote>:last-child{margin-bottom:0px}
141+
.main-draceditor .markdown-preview table th{font-weight:bold}
142+
.main-draceditor .markdown-preview table th,
143+
.main-draceditor .markdown-preview table td{border:1px solid #ccc;padding:6px 13px}
144+
.main-draceditor .markdown-preview table tr{border-top:1px solid #ccc;background-color:#fff}
145+
.main-draceditor .markdown-preview table tr:nth-child(2n){background-color:#f8f8f8}
146+
.main-draceditor .markdown-preview img{max-width:100%;-moz-box-sizing:border-box;box-sizing:border-box}
147+
.main-draceditor .markdown-preview span.frame{display:block;overflow:hidden}
148+
.main-draceditor .markdown-preview span.frame>span{border:1px solid #ddd;display:block;float:left;overflow:hidden;margin:13px 0 0;padding:7px;width:auto}
149+
.main-draceditor .markdown-preview span.frame span img{display:block;float:left}
150+
.main-draceditor .markdown-preview span.frame span span{clear:both;color:#333;display:block;padding:5px 0 0}
151+
.main-draceditor .markdown-preview span.align-center{display:block;overflow:hidden;clear:both}
152+
.main-draceditor .markdown-preview span.align-center>span{display:block;overflow:hidden;margin:13px auto 0;text-align:center}
153+
.main-draceditor .markdown-preview span.align-center span img{margin:0 auto;text-align:center}
154+
.main-draceditor .markdown-preview span.align-right{display:block;overflow:hidden;clear:both}
155+
.main-draceditor .markdown-preview span.align-right>span{display:block;overflow:hidden;margin:13px 0 0;text-align:right}
156+
.main-draceditor .markdown-preview span.align-right span img{margin:0;text-align:right}
157+
.main-draceditor .markdown-preview span.float-left{display:block;margin-right:13px;overflow:hidden;float:left}
158+
.main-draceditor .markdown-preview span.float-left span{margin:13px 0 0}
159+
.main-draceditor .markdown-preview span.float-right{display:block;margin-left:13px;overflow:hidden;float:right}
160+
.main-draceditor .markdown-preview span.float-right>span{display:block;overflow:hidden;margin:13px auto 0;text-align:right}
161+
.main-draceditor .markdown-preview code,
162+
.main-draceditor .markdown-preview tt{margin:0 2px;padding:0px 5px;border:1px solid #eaeaea;background-color:#f8f8f8;border-radius:3px}
163+
.main-draceditor .markdown-preview code{white-space:nowrap}
164+
.main-draceditor .markdown-preview pre>code{margin:0;padding:0;white-space:pre;border:none;background:transparent}
165+
.main-draceditor .markdown-preview .highlight pre,
166+
.main-draceditor .markdown-preview pre{background-color:#f8f8f8;border:1px solid #ccc;font-size:13px;line-height:19px;overflow:auto;padding:6px 10px;border-radius:3px}
167+
.main-draceditor .markdown-preview pre code,
168+
.main-draceditor .markdown-preview pre tt{margin:0;padding:0;background-color:transparent;border:none}

draceditor/static/js/draceditor.js

Lines changed: 199 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,8 @@
143143
editor.setOptions({
144144
enableBasicAutocompletion: true,
145145
enableSnippets: true,
146-
enableLiveAutocompletion: true
146+
enableLiveAutocompletion: true,
147+
enableMultiselect: false
147148
});
148149

149150
// Ace autocomplete
@@ -189,18 +190,211 @@
189190
});
190191
}
191192

192-
//var container_area = $(editor.container);
193-
//container_area.attr({'contenteditable': 'true'});
194-
195193
editor.on('change', function(e){
196194
//onEmoji(container_area);
197195
//onMention(editor);
198196
onRender();
199197
});
200198

201-
// set initial value
199+
// Set initial value
202200
editor.setValue(draceditor.val());
203201
onRender();
202+
203+
// Trigger Keyboards
204+
var onKeyboard = function(editor) {
205+
/*
206+
var commandChars = {
207+
'bold' : ['**', '**'],
208+
'italic' : ['_', '_'],
209+
'h1' : ['# ', ''],
210+
'h2' : ['## ', ''],
211+
'h3' : ['### ', ''],
212+
'pre' : ['```', '\n```'],
213+
'code' : ['`', '``'],
214+
'blockquote' : ['> ', '']
215+
'unordered-list' : ['* ', ''],
216+
'ordered-list' : ['1. ', ''],
217+
'link' : ['[', '](http://)'],
218+
'image-link' : ['![', '](http://)']
219+
}*/
220+
221+
// win/linux: Ctrl+B, mac: Command+B
222+
var markdownToBold = function() {
223+
var originalRange = editor.getSelectionRange();
224+
if (editor.selection.isEmpty()) {
225+
var curpos = editor.getCursorPosition();
226+
editor.session.insert(curpos, ' **** ')
227+
editor.selection.moveTo(curpos.row, curpos.column+3);
228+
}else {
229+
var range = editor.getSelectionRange();
230+
var text = editor.session.getTextRange(range);
231+
editor.session.replace(range, '**'+text+'**');
232+
originalRange.end.column += 4; // this because injected from 4 `*` characters.
233+
editor.selection.setSelectionRange(originalRange);
234+
}
235+
};
236+
// win/linux: Ctrl+I, mac: Command+I
237+
var markdownToItalic = function() {
238+
var originalRange = editor.getSelectionRange();
239+
if (editor.selection.isEmpty()) {
240+
var curpos = editor.getCursorPosition();
241+
editor.session.insert(curpos, ' __ ')
242+
editor.selection.moveTo(curpos.row, curpos.column+2);
243+
}else {
244+
var range = editor.getSelectionRange();
245+
var text = editor.session.getTextRange(range);
246+
editor.session.replace(range, '_'+text+'_');
247+
originalRange.end.column += 2; // this because injected from 2 `_` characters.
248+
editor.selection.setSelectionRange(originalRange);
249+
}
250+
};
251+
// win/linux: Ctrl+Q, mac: Command+Q
252+
var markdownToBlockQuote = function() {
253+
var originalRange = editor.getSelectionRange();
254+
if (editor.selection.isEmpty()) {
255+
var curpos = editor.getCursorPosition();
256+
editor.session.insert(curpos, '\n\n> ');
257+
editor.selection.moveTo(curpos.row+2, curpos.column+2);
258+
}
259+
else {
260+
var range = editor.getSelectionRange();
261+
var text = editor.session.getTextRange(range);
262+
editor.session.replace(range, '\n\n> '+text);
263+
editor.selection.moveTo(
264+
originalRange.end.row+2,
265+
originalRange.end.column+2
266+
);
267+
}
268+
};
269+
// win/linux: Ctrl+U, mac: Command+U
270+
var markdownToUnorderedList = function() {
271+
var originalRange = editor.getSelectionRange();
272+
if (editor.selection.isEmpty()) {
273+
var curpos = editor.getCursorPosition();
274+
editor.session.insert(curpos, '\n\n* ');
275+
editor.selection.moveTo(curpos.row+2, curpos.column+2);
276+
}
277+
else {
278+
var range = editor.getSelectionRange();
279+
var text = editor.session.getTextRange(range);
280+
editor.session.replace(range, '\n\n> '+text);
281+
editor.selection.moveTo(
282+
originalRange.end.row+2,
283+
originalRange.end.column+2
284+
);
285+
}
286+
};
287+
// win/linux: Ctrl+Shift+O, mac: Command+Option+O
288+
var markdownToOrderedList = function() {
289+
var originalRange = editor.getSelectionRange();
290+
if (editor.selection.isEmpty()) {
291+
var curpos = editor.getCursorPosition();
292+
editor.session.insert(curpos, '\n\n1. ');
293+
editor.selection.moveTo(curpos.row+3, curpos.column+3);
294+
}
295+
else {
296+
var range = editor.getSelectionRange();
297+
var text = editor.session.getTextRange(range);
298+
editor.session.replace(range, '\n\n1. '+text);
299+
editor.selection.moveTo(
300+
originalRange.end.row+3,
301+
originalRange.end.column+3
302+
);
303+
}
304+
};
305+
// win/linux: Ctrl+L, mac: Command+L
306+
var markdownToLink = function() {
307+
var originalRange = editor.getSelectionRange();
308+
if (editor.selection.isEmpty()) {
309+
var curpos = editor.getCursorPosition();
310+
editor.session.insert(curpos, ' [](http://) ')
311+
editor.selection.moveTo(curpos.row, curpos.column+2);
312+
}else {
313+
var range = editor.getSelectionRange();
314+
var text = editor.session.getTextRange(range);
315+
editor.session.replace(range, '['+text+'](http://) ');
316+
editor.selection.moveTo(
317+
originalRange.end.row,
318+
originalRange.end.column+10
319+
);
320+
}
321+
};
322+
// win/linux: Ctrl+Shift+I, mac: Command+Option+I
323+
var markdownToImageLink = function() {
324+
var originalRange = editor.getSelectionRange();
325+
if (editor.selection.isEmpty()) {
326+
var curpos = editor.getCursorPosition();
327+
editor.session.insert(curpos, ' ![](http://) ')
328+
editor.selection.moveTo(curpos.row, curpos.column+3);
329+
}else {
330+
var range = editor.getSelectionRange();
331+
var text = editor.session.getTextRange(range);
332+
editor.session.replace(range, '!['+text+'](http://) ');
333+
editor.selection.moveTo(
334+
originalRange.end.row,
335+
originalRange.end.column+11
336+
);
337+
}
338+
};
339+
340+
editor.commands.addCommand({
341+
name: 'markdownToBold',
342+
bindKey: {win: 'Ctrl-B', mac: 'Command-B'},
343+
exec: function(editor) {
344+
markdownToBold()
345+
},
346+
readOnly: true
347+
});
348+
editor.commands.addCommand({
349+
name: 'markdownToItalic',
350+
bindKey: {win: 'Ctrl-I', mac: 'Command-I'},
351+
exec: function(editor) {
352+
markdownToItalic()
353+
},
354+
readOnly: true
355+
});
356+
editor.commands.addCommand({
357+
name: 'markdownToBlockQuote',
358+
bindKey: {win: 'Ctrl-Q', mac: 'Command-Q'},
359+
exec: function(editor) {
360+
markdownToBlockQuote()
361+
},
362+
readOnly: true
363+
});
364+
editor.commands.addCommand({
365+
name: 'markdownToUnorderedList',
366+
bindKey: {win: 'Ctrl-U', mac: 'Command-U'},
367+
exec: function(editor) {
368+
markdownToUnorderedList()
369+
},
370+
readOnly: true
371+
});
372+
editor.commands.addCommand({
373+
name: 'markdownToOrderedList',
374+
bindKey: {win: 'Ctrl-Shift+O', mac: 'Command-Option-O'},
375+
exec: function(editor) {
376+
markdownToOrderedList()
377+
},
378+
readOnly: true
379+
});
380+
editor.commands.addCommand({
381+
name: 'markdownToLink',
382+
bindKey: {win: 'Ctrl-L', mac: 'Command-L'},
383+
exec: function(editor) {
384+
markdownToLink()
385+
},
386+
readOnly: true
387+
});
388+
editor.commands.addCommand({
389+
name: 'markdownToImageLink',
390+
bindKey: {win: 'Ctrl-Shift-I', mac: 'Command-Option-I'},
391+
exec: function(editor) {
392+
markdownToImageLink()
393+
},
394+
readOnly: true
395+
});
396+
}
397+
onKeyboard(editor);
204398
};
205399

206400
$(function() {
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="main-draceditor">
22
<div id="editor"></div>
33
{{ draceditor }}
4-
<div id="preview"></div>
4+
<div id="preview" class="markdown-preview"></div>
55
</div>

0 commit comments

Comments
 (0)