##// END OF EJS Templates
codemirror rempo moved, update links in comments
Matthias Bussonnier -
Show More
@@ -1,557 +1,557 b''
1 1 // Copyright (c) IPython Development Team.
2 2 // Distributed under the terms of the Modified BSD License.
3 3
4 4 define([
5 5 'base/js/namespace',
6 6 'jquery',
7 7 'base/js/utils',
8 8 ], function(IPython, $, utils) {
9 9 // TODO: remove IPython dependency here
10 10 "use strict";
11 11
12 12 // monkey patch CM to be able to syntax highlight cell magics
13 13 // bug reported upstream,
14 // see https://github.com/marijnh/CodeMirror2/issues/670
14 // see https://github.com/codemirror/CodeMirror/issues/670
15 15 if(CodeMirror.getMode(1,'text/plain').indent === undefined ){
16 16 CodeMirror.modes.null = function() {
17 17 return {token: function(stream) {stream.skipToEnd();},indent : function(){return 0;}};
18 18 };
19 19 }
20 20
21 21 CodeMirror.patchedGetMode = function(config, mode){
22 22 var cmmode = CodeMirror.getMode(config, mode);
23 23 if(cmmode.indent === null) {
24 24 console.log('patch mode "' , mode, '" on the fly');
25 25 cmmode.indent = function(){return 0;};
26 26 }
27 27 return cmmode;
28 28 };
29 29 // end monkey patching CodeMirror
30 30
31 31 var Cell = function (options) {
32 32 // Constructor
33 33 //
34 34 // The Base `Cell` class from which to inherit.
35 35 //
36 36 // Parameters:
37 37 // options: dictionary
38 38 // Dictionary of keyword arguments.
39 39 // events: $(Events) instance
40 40 // config: dictionary
41 41 // keyboard_manager: KeyboardManager instance
42 42 options = options || {};
43 43 this.keyboard_manager = options.keyboard_manager;
44 44 this.events = options.events;
45 45 var config = utils.mergeopt(Cell, options.config);
46 46 // superclass default overwrite our default
47 47
48 48 this.placeholder = config.placeholder || '';
49 49 this.read_only = config.cm_config.readOnly;
50 50 this.selected = false;
51 51 this.rendered = false;
52 52 this.mode = 'command';
53 53 this.metadata = {};
54 54 // load this from metadata later ?
55 55 this.user_highlight = 'auto';
56 56 this.cm_config = config.cm_config;
57 57 this.cell_id = utils.uuid();
58 58 this._options = config;
59 59
60 60 // For JS VM engines optimization, attributes should be all set (even
61 61 // to null) in the constructor, and if possible, if different subclass
62 62 // have new attributes with same name, they should be created in the
63 63 // same order. Easiest is to create and set to null in parent class.
64 64
65 65 this.element = null;
66 66 this.cell_type = this.cell_type || null;
67 67 this.code_mirror = null;
68 68
69 69 this.create_element();
70 70 if (this.element !== null) {
71 71 this.element.data("cell", this);
72 72 this.bind_events();
73 73 this.init_classes();
74 74 }
75 75 };
76 76
77 77 Cell.options_default = {
78 78 cm_config : {
79 79 indentUnit : 4,
80 80 readOnly: false,
81 81 theme: "default",
82 82 extraKeys: {
83 83 "Cmd-Right":"goLineRight",
84 84 "End":"goLineRight",
85 85 "Cmd-Left":"goLineLeft"
86 86 }
87 87 }
88 88 };
89 89
90 90 // FIXME: Workaround CM Bug #332 (Safari segfault on drag)
91 91 // by disabling drag/drop altogether on Safari
92 // https://github.com/marijnh/CodeMirror/issues/332
92 // https://github.com/codemirror/CodeMirror/issues/332
93 93 if (utils.browser[0] == "Safari") {
94 94 Cell.options_default.cm_config.dragDrop = false;
95 95 }
96 96
97 97 /**
98 98 * Empty. Subclasses must implement create_element.
99 99 * This should contain all the code to create the DOM element in notebook
100 100 * and will be called by Base Class constructor.
101 101 * @method create_element
102 102 */
103 103 Cell.prototype.create_element = function () {
104 104 };
105 105
106 106 Cell.prototype.init_classes = function () {
107 107 // Call after this.element exists to initialize the css classes
108 108 // related to selected, rendered and mode.
109 109 if (this.selected) {
110 110 this.element.addClass('selected');
111 111 } else {
112 112 this.element.addClass('unselected');
113 113 }
114 114 if (this.rendered) {
115 115 this.element.addClass('rendered');
116 116 } else {
117 117 this.element.addClass('unrendered');
118 118 }
119 119 if (this.mode === 'edit') {
120 120 this.element.addClass('edit_mode');
121 121 } else {
122 122 this.element.addClass('command_mode');
123 123 }
124 124 };
125 125
126 126 /**
127 127 * Subclasses can implement override bind_events.
128 128 * Be carefull to call the parent method when overwriting as it fires event.
129 129 * this will be triggerd after create_element in constructor.
130 130 * @method bind_events
131 131 */
132 132 Cell.prototype.bind_events = function () {
133 133 var that = this;
134 134 // We trigger events so that Cell doesn't have to depend on Notebook.
135 135 that.element.click(function (event) {
136 136 if (!that.selected) {
137 137 that.events.trigger('select.Cell', {'cell':that});
138 138 }
139 139 });
140 140 that.element.focusin(function (event) {
141 141 if (!that.selected) {
142 142 that.events.trigger('select.Cell', {'cell':that});
143 143 }
144 144 });
145 145 if (this.code_mirror) {
146 146 this.code_mirror.on("change", function(cm, change) {
147 147 that.events.trigger("set_dirty.Notebook", {value: true});
148 148 });
149 149 }
150 150 if (this.code_mirror) {
151 151 this.code_mirror.on('focus', function(cm, change) {
152 152 that.events.trigger('edit_mode.Cell', {cell: that});
153 153 });
154 154 }
155 155 if (this.code_mirror) {
156 156 this.code_mirror.on('blur', function(cm, change) {
157 157 that.events.trigger('command_mode.Cell', {cell: that});
158 158 });
159 159 }
160 160 };
161 161
162 162 /**
163 163 * This method gets called in CodeMirror's onKeyDown/onKeyPress
164 164 * handlers and is used to provide custom key handling.
165 165 *
166 166 * To have custom handling, subclasses should override this method, but still call it
167 167 * in order to process the Edit mode keyboard shortcuts.
168 168 *
169 169 * @method handle_codemirror_keyevent
170 170 * @param {CodeMirror} editor - The codemirror instance bound to the cell
171 171 * @param {event} event - key press event which either should or should not be handled by CodeMirror
172 172 * @return {Boolean} `true` if CodeMirror should ignore the event, `false` Otherwise
173 173 */
174 174 Cell.prototype.handle_codemirror_keyevent = function (editor, event) {
175 175 var shortcuts = this.keyboard_manager.edit_shortcuts;
176 176
177 177 // if this is an edit_shortcuts shortcut, the global keyboard/shortcut
178 178 // manager will handle it
179 179 if (shortcuts.handles(event)) { return true; }
180 180
181 181 return false;
182 182 };
183 183
184 184
185 185 /**
186 186 * Triger typsetting of math by mathjax on current cell element
187 187 * @method typeset
188 188 */
189 189 Cell.prototype.typeset = function () {
190 190 if (window.MathJax) {
191 191 var cell_math = this.element.get(0);
192 192 MathJax.Hub.Queue(["Typeset", MathJax.Hub, cell_math]);
193 193 }
194 194 };
195 195
196 196 /**
197 197 * handle cell level logic when a cell is selected
198 198 * @method select
199 199 * @return is the action being taken
200 200 */
201 201 Cell.prototype.select = function () {
202 202 if (!this.selected) {
203 203 this.element.addClass('selected');
204 204 this.element.removeClass('unselected');
205 205 this.selected = true;
206 206 return true;
207 207 } else {
208 208 return false;
209 209 }
210 210 };
211 211
212 212 /**
213 213 * handle cell level logic when a cell is unselected
214 214 * @method unselect
215 215 * @return is the action being taken
216 216 */
217 217 Cell.prototype.unselect = function () {
218 218 if (this.selected) {
219 219 this.element.addClass('unselected');
220 220 this.element.removeClass('selected');
221 221 this.selected = false;
222 222 return true;
223 223 } else {
224 224 return false;
225 225 }
226 226 };
227 227
228 228 /**
229 229 * handle cell level logic when a cell is rendered
230 230 * @method render
231 231 * @return is the action being taken
232 232 */
233 233 Cell.prototype.render = function () {
234 234 if (!this.rendered) {
235 235 this.element.addClass('rendered');
236 236 this.element.removeClass('unrendered');
237 237 this.rendered = true;
238 238 return true;
239 239 } else {
240 240 return false;
241 241 }
242 242 };
243 243
244 244 /**
245 245 * handle cell level logic when a cell is unrendered
246 246 * @method unrender
247 247 * @return is the action being taken
248 248 */
249 249 Cell.prototype.unrender = function () {
250 250 if (this.rendered) {
251 251 this.element.addClass('unrendered');
252 252 this.element.removeClass('rendered');
253 253 this.rendered = false;
254 254 return true;
255 255 } else {
256 256 return false;
257 257 }
258 258 };
259 259
260 260 /**
261 261 * Delegates keyboard shortcut handling to either IPython keyboard
262 262 * manager when in command mode, or CodeMirror when in edit mode
263 263 *
264 264 * @method handle_keyevent
265 265 * @param {CodeMirror} editor - The codemirror instance bound to the cell
266 266 * @param {event} - key event to be handled
267 267 * @return {Boolean} `true` if CodeMirror should ignore the event, `false` Otherwise
268 268 */
269 269 Cell.prototype.handle_keyevent = function (editor, event) {
270 270
271 271 // console.log('CM', this.mode, event.which, event.type)
272 272
273 273 if (this.mode === 'command') {
274 274 return true;
275 275 } else if (this.mode === 'edit') {
276 276 return this.handle_codemirror_keyevent(editor, event);
277 277 }
278 278 };
279 279
280 280 /**
281 281 * @method at_top
282 282 * @return {Boolean}
283 283 */
284 284 Cell.prototype.at_top = function () {
285 285 var cm = this.code_mirror;
286 286 var cursor = cm.getCursor();
287 287 if (cursor.line === 0 && cursor.ch === 0) {
288 288 return true;
289 289 }
290 290 return false;
291 291 };
292 292
293 293 /**
294 294 * @method at_bottom
295 295 * @return {Boolean}
296 296 * */
297 297 Cell.prototype.at_bottom = function () {
298 298 var cm = this.code_mirror;
299 299 var cursor = cm.getCursor();
300 300 if (cursor.line === (cm.lineCount()-1) && cursor.ch === cm.getLine(cursor.line).length) {
301 301 return true;
302 302 }
303 303 return false;
304 304 };
305 305
306 306 /**
307 307 * enter the command mode for the cell
308 308 * @method command_mode
309 309 * @return is the action being taken
310 310 */
311 311 Cell.prototype.command_mode = function () {
312 312 if (this.mode !== 'command') {
313 313 this.element.addClass('command_mode');
314 314 this.element.removeClass('edit_mode');
315 315 this.mode = 'command';
316 316 return true;
317 317 } else {
318 318 return false;
319 319 }
320 320 };
321 321
322 322 /**
323 323 * enter the edit mode for the cell
324 324 * @method command_mode
325 325 * @return is the action being taken
326 326 */
327 327 Cell.prototype.edit_mode = function () {
328 328 if (this.mode !== 'edit') {
329 329 this.element.addClass('edit_mode');
330 330 this.element.removeClass('command_mode');
331 331 this.mode = 'edit';
332 332 return true;
333 333 } else {
334 334 return false;
335 335 }
336 336 };
337 337
338 338 /**
339 339 * Focus the cell in the DOM sense
340 340 * @method focus_cell
341 341 */
342 342 Cell.prototype.focus_cell = function () {
343 343 this.element.focus();
344 344 };
345 345
346 346 /**
347 347 * Focus the editor area so a user can type
348 348 *
349 349 * NOTE: If codemirror is focused via a mouse click event, you don't want to
350 350 * call this because it will cause a page jump.
351 351 * @method focus_editor
352 352 */
353 353 Cell.prototype.focus_editor = function () {
354 354 this.refresh();
355 355 this.code_mirror.focus();
356 356 };
357 357
358 358 /**
359 359 * Refresh codemirror instance
360 360 * @method refresh
361 361 */
362 362 Cell.prototype.refresh = function () {
363 363 this.code_mirror.refresh();
364 364 };
365 365
366 366 /**
367 367 * should be overritten by subclass
368 368 * @method get_text
369 369 */
370 370 Cell.prototype.get_text = function () {
371 371 };
372 372
373 373 /**
374 374 * should be overritten by subclass
375 375 * @method set_text
376 376 * @param {string} text
377 377 */
378 378 Cell.prototype.set_text = function (text) {
379 379 };
380 380
381 381 /**
382 382 * should be overritten by subclass
383 383 * serialise cell to json.
384 384 * @method toJSON
385 385 **/
386 386 Cell.prototype.toJSON = function () {
387 387 var data = {};
388 388 data.metadata = this.metadata;
389 389 data.cell_type = this.cell_type;
390 390 return data;
391 391 };
392 392
393 393
394 394 /**
395 395 * should be overritten by subclass
396 396 * @method fromJSON
397 397 **/
398 398 Cell.prototype.fromJSON = function (data) {
399 399 if (data.metadata !== undefined) {
400 400 this.metadata = data.metadata;
401 401 }
402 402 this.celltoolbar.rebuild();
403 403 };
404 404
405 405
406 406 /**
407 407 * can the cell be split into two cells
408 408 * @method is_splittable
409 409 **/
410 410 Cell.prototype.is_splittable = function () {
411 411 return true;
412 412 };
413 413
414 414
415 415 /**
416 416 * can the cell be merged with other cells
417 417 * @method is_mergeable
418 418 **/
419 419 Cell.prototype.is_mergeable = function () {
420 420 return true;
421 421 };
422 422
423 423
424 424 /**
425 425 * @return {String} - the text before the cursor
426 426 * @method get_pre_cursor
427 427 **/
428 428 Cell.prototype.get_pre_cursor = function () {
429 429 var cursor = this.code_mirror.getCursor();
430 430 var text = this.code_mirror.getRange({line:0, ch:0}, cursor);
431 431 text = text.replace(/^\n+/, '').replace(/\n+$/, '');
432 432 return text;
433 433 };
434 434
435 435
436 436 /**
437 437 * @return {String} - the text after the cursor
438 438 * @method get_post_cursor
439 439 **/
440 440 Cell.prototype.get_post_cursor = function () {
441 441 var cursor = this.code_mirror.getCursor();
442 442 var last_line_num = this.code_mirror.lineCount()-1;
443 443 var last_line_len = this.code_mirror.getLine(last_line_num).length;
444 444 var end = {line:last_line_num, ch:last_line_len};
445 445 var text = this.code_mirror.getRange(cursor, end);
446 446 text = text.replace(/^\n+/, '').replace(/\n+$/, '');
447 447 return text;
448 448 };
449 449
450 450 /**
451 451 * Show/Hide CodeMirror LineNumber
452 452 * @method show_line_numbers
453 453 *
454 454 * @param value {Bool} show (true), or hide (false) the line number in CodeMirror
455 455 **/
456 456 Cell.prototype.show_line_numbers = function (value) {
457 457 this.code_mirror.setOption('lineNumbers', value);
458 458 this.code_mirror.refresh();
459 459 };
460 460
461 461 /**
462 462 * Toggle CodeMirror LineNumber
463 463 * @method toggle_line_numbers
464 464 **/
465 465 Cell.prototype.toggle_line_numbers = function () {
466 466 var val = this.code_mirror.getOption('lineNumbers');
467 467 this.show_line_numbers(!val);
468 468 };
469 469
470 470 /**
471 471 * Force codemirror highlight mode
472 472 * @method force_highlight
473 473 * @param {object} - CodeMirror mode
474 474 **/
475 475 Cell.prototype.force_highlight = function(mode) {
476 476 this.user_highlight = mode;
477 477 this.auto_highlight();
478 478 };
479 479
480 480 /**
481 481 * Try to autodetect cell highlight mode, or use selected mode
482 482 * @methods _auto_highlight
483 483 * @private
484 484 * @param {String|object|undefined} - CodeMirror mode | 'auto'
485 485 **/
486 486 Cell.prototype._auto_highlight = function (modes) {
487 487 //Here we handle manually selected modes
488 488 var mode;
489 489 if( this.user_highlight !== undefined && this.user_highlight != 'auto' )
490 490 {
491 491 mode = this.user_highlight;
492 492 CodeMirror.autoLoadMode(this.code_mirror, mode);
493 493 this.code_mirror.setOption('mode', mode);
494 494 return;
495 495 }
496 496 var current_mode = this.code_mirror.getOption('mode', mode);
497 497 var first_line = this.code_mirror.getLine(0);
498 498 // loop on every pairs
499 499 for(mode in modes) {
500 500 var regs = modes[mode].reg;
501 501 // only one key every time but regexp can't be keys...
502 502 for(var i=0; i<regs.length; i++) {
503 503 // here we handle non magic_modes
504 504 if(first_line.match(regs[i]) !== null) {
505 505 if(current_mode == mode){
506 506 return;
507 507 }
508 508 if (mode.search('magic_') !== 0) {
509 509 this.code_mirror.setOption('mode', mode);
510 510 CodeMirror.autoLoadMode(this.code_mirror, mode);
511 511 return;
512 512 }
513 513 var open = modes[mode].open || "%%";
514 514 var close = modes[mode].close || "%%end";
515 515 var mmode = mode;
516 516 mode = mmode.substr(6);
517 517 if(current_mode == mode){
518 518 return;
519 519 }
520 520 CodeMirror.autoLoadMode(this.code_mirror, mode);
521 521 // create on the fly a mode that swhitch between
522 522 // plain/text and smth else otherwise `%%` is
523 523 // source of some highlight issues.
524 524 // we use patchedGetMode to circumvent a bug in CM
525 525 CodeMirror.defineMode(mmode , function(config) {
526 526 return CodeMirror.multiplexingMode(
527 527 CodeMirror.patchedGetMode(config, 'text/plain'),
528 528 // always set someting on close
529 529 {open: open, close: close,
530 530 mode: CodeMirror.patchedGetMode(config, mode),
531 531 delimStyle: "delimit"
532 532 }
533 533 );
534 534 });
535 535 this.code_mirror.setOption('mode', mmode);
536 536 return;
537 537 }
538 538 }
539 539 }
540 540 // fallback on default
541 541 var default_mode;
542 542 try {
543 543 default_mode = this._options.cm_config.mode;
544 544 } catch(e) {
545 545 default_mode = 'text/plain';
546 546 }
547 547 if( current_mode === default_mode){
548 548 return;
549 549 }
550 550 this.code_mirror.setOption('mode', default_mode);
551 551 };
552 552
553 553 // Backwards compatibility.
554 554 IPython.Cell = Cell;
555 555
556 556 return {'Cell': Cell};
557 557 });
@@ -1,44 +1,44 b''
1 1 // IPython GFM (GitHub Flavored Markdown) mode is just a slightly altered GFM
2 2 // Mode with support for latex.
3 3 //
4 4 // Latex support was supported by Codemirror GFM as of
5 // https://github.com/marijnh/CodeMirror/pull/567
5 // https://github.com/codemirror/CodeMirror/pull/567
6 6 // But was later removed in
7 // https://github.com/marijnh/CodeMirror/commit/d9c9f1b1ffe984aee41307f3e927f80d1f23590c
7 // https://github.com/codemirror/CodeMirror/commit/d9c9f1b1ffe984aee41307f3e927f80d1f23590c
8 8
9 9 CodeMirror.requireMode('gfm', function(){
10 10 CodeMirror.requireMode('stex', function(){
11 11 CodeMirror.defineMode("ipythongfm", function(config, parserConfig) {
12 12
13 13 var gfm_mode = CodeMirror.getMode(config, "gfm");
14 14 var tex_mode = CodeMirror.getMode(config, "stex");
15 15
16 16 return CodeMirror.multiplexingMode(
17 17 gfm_mode,
18 18 {
19 19 open: "$", close: "$",
20 20 mode: tex_mode,
21 21 delimStyle: "delimit"
22 22 },
23 23 {
24 24 open: "$$", close: "$$",
25 25 mode: tex_mode,
26 26 delimStyle: "delimit"
27 27 },
28 28 {
29 29 open: "\\(", close: "\\)",
30 30 mode: tex_mode,
31 31 delimStyle: "delimit"
32 32 },
33 33 {
34 34 open: "\\[", close: "\\]",
35 35 mode: tex_mode,
36 36 delimStyle: "delimit"
37 37 }
38 38 // .. more multiplexed styles can follow here
39 39 );
40 40 }, 'gfm');
41 41
42 42 CodeMirror.defineMIME("text/x-ipythongfm", "ipythongfm");
43 43 });
44 44 });
General Comments 0
You need to be logged in to leave comments. Login now