##// END OF EJS Templates
Merge pull request #7055 from foogunlana/codemirror_bug_fix...
Matthias Bussonnier -
r19100:ead33abc merge
parent child Browse files
Show More
@@ -1,570 +1,571
1 1 // Copyright (c) IPython Development Team.
2 2 // Distributed under the terms of the Modified BSD License.
3 3 /**
4 4 *
5 5 *
6 6 * @module codecell
7 7 * @namespace codecell
8 8 * @class CodeCell
9 9 */
10 10
11 11
12 12 define([
13 13 'base/js/namespace',
14 14 'jquery',
15 15 'base/js/utils',
16 16 'base/js/keyboard',
17 17 'notebook/js/cell',
18 18 'notebook/js/outputarea',
19 19 'notebook/js/completer',
20 20 'notebook/js/celltoolbar',
21 21 'codemirror/lib/codemirror',
22 22 'codemirror/mode/python/python',
23 23 'notebook/js/codemirror-ipython'
24 24 ], function(IPython, $, utils, keyboard, cell, outputarea, completer, celltoolbar, CodeMirror, cmpython, cmip) {
25 25 "use strict";
26 26
27 27 var Cell = cell.Cell;
28 28
29 29 /* local util for codemirror */
30 30 var posEq = function(a, b) {return a.line == b.line && a.ch == b.ch;};
31 31
32 32 /**
33 33 *
34 34 * function to delete until previous non blanking space character
35 35 * or first multiple of 4 tabstop.
36 36 * @private
37 37 */
38 38 CodeMirror.commands.delSpaceToPrevTabStop = function(cm){
39 39 var from = cm.getCursor(true), to = cm.getCursor(false), sel = !posEq(from, to);
40 40 if (!posEq(from, to)) { cm.replaceRange("", from, to); return; }
41 41 var cur = cm.getCursor(), line = cm.getLine(cur.line);
42 42 var tabsize = cm.getOption('tabSize');
43 43 var chToPrevTabStop = cur.ch-(Math.ceil(cur.ch/tabsize)-1)*tabsize;
44 44 from = {ch:cur.ch-chToPrevTabStop,line:cur.line};
45 45 var select = cm.getRange(from,cur);
46 46 if( select.match(/^\ +$/) !== null){
47 47 cm.replaceRange("",from,cur);
48 48 } else {
49 49 cm.deleteH(-1,"char");
50 50 }
51 51 };
52 52
53 53 var keycodes = keyboard.keycodes;
54 54
55 55 var CodeCell = function (kernel, options) {
56 56 // Constructor
57 57 //
58 58 // A Cell conceived to write code.
59 59 //
60 60 // Parameters:
61 61 // kernel: Kernel instance
62 62 // The kernel doesn't have to be set at creation time, in that case
63 63 // it will be null and set_kernel has to be called later.
64 64 // options: dictionary
65 65 // Dictionary of keyword arguments.
66 66 // events: $(Events) instance
67 67 // config: dictionary
68 68 // keyboard_manager: KeyboardManager instance
69 69 // notebook: Notebook instance
70 70 // tooltip: Tooltip instance
71 71 this.kernel = kernel || null;
72 72 this.notebook = options.notebook;
73 73 this.collapsed = false;
74 74 this.events = options.events;
75 75 this.tooltip = options.tooltip;
76 76 this.config = options.config;
77 77
78 78 // create all attributed in constructor function
79 79 // even if null for V8 VM optimisation
80 80 this.input_prompt_number = null;
81 81 this.celltoolbar = null;
82 82 this.output_area = null;
83 83 // Keep a stack of the 'active' output areas (where active means the
84 84 // output area that recieves output). When a user activates an output
85 85 // area, it gets pushed to the stack. Then, when the output area is
86 86 // deactivated, it's popped from the stack. When the stack is empty,
87 87 // the cell's output area is used.
88 88 this.active_output_areas = [];
89 89 var that = this;
90 90 Object.defineProperty(this, 'active_output_area', {
91 91 get: function() {
92 92 if (that.active_output_areas && that.active_output_areas.length > 0) {
93 93 return that.active_output_areas[that.active_output_areas.length-1];
94 94 } else {
95 95 return that.output_area;
96 96 }
97 97 },
98 98 });
99 99
100 100 this.last_msg_id = null;
101 101 this.completer = null;
102 102
103 103
104 104 var config = utils.mergeopt(CodeCell, this.config);
105 105 Cell.apply(this,[{
106 106 config: config,
107 107 keyboard_manager: options.keyboard_manager,
108 108 events: this.events}]);
109 109
110 110 // Attributes we want to override in this subclass.
111 111 this.cell_type = "code";
112 112 this.element.focusout(
113 113 function() { that.auto_highlight(); }
114 114 );
115 115 };
116 116
117 117 CodeCell.options_default = {
118 118 cm_config : {
119 119 extraKeys: {
120 120 "Tab" : "indentMore",
121 121 "Shift-Tab" : "indentLess",
122 122 "Backspace" : "delSpaceToPrevTabStop",
123 123 "Cmd-/" : "toggleComment",
124 124 "Ctrl-/" : "toggleComment"
125 125 },
126 126 mode: 'ipython',
127 127 theme: 'ipython',
128 128 matchBrackets: true
129 129 }
130 130 };
131 131
132 132 CodeCell.msg_cells = {};
133 133
134 134 CodeCell.prototype = Object.create(Cell.prototype);
135 135
136 136 /**
137 137 * @method push_output_area
138 138 */
139 139 CodeCell.prototype.push_output_area = function (output_area) {
140 140 this.active_output_areas.push(output_area);
141 141 };
142 142
143 143 /**
144 144 * @method pop_output_area
145 145 */
146 146 CodeCell.prototype.pop_output_area = function (output_area) {
147 147 var index = this.active_output_areas.lastIndexOf(output_area);
148 148 if (index > -1) {
149 149 this.active_output_areas.splice(index, 1);
150 150 }
151 151 };
152 152
153 153 /**
154 154 * @method auto_highlight
155 155 */
156 156 CodeCell.prototype.auto_highlight = function () {
157 157 this._auto_highlight(this.config.cell_magic_highlight);
158 158 };
159 159
160 160 /** @method create_element */
161 161 CodeCell.prototype.create_element = function () {
162 162 Cell.prototype.create_element.apply(this, arguments);
163 163
164 164 var cell = $('<div></div>').addClass('cell code_cell');
165 165 cell.attr('tabindex','2');
166 166
167 167 var input = $('<div></div>').addClass('input');
168 168 var prompt = $('<div/>').addClass('prompt input_prompt');
169 169 var inner_cell = $('<div/>').addClass('inner_cell');
170 170 this.celltoolbar = new celltoolbar.CellToolbar({
171 171 cell: this,
172 172 notebook: this.notebook});
173 173 inner_cell.append(this.celltoolbar.element);
174 174 var input_area = $('<div/>').addClass('input_area');
175 175 this.code_mirror = new CodeMirror(input_area.get(0), this.cm_config);
176 176 this.code_mirror.on('keydown', $.proxy(this.handle_keyevent,this))
177 177 $(this.code_mirror.getInputField()).attr("spellcheck", "false");
178 178 inner_cell.append(input_area);
179 179 input.append(prompt).append(inner_cell);
180 180
181 181 var widget_area = $('<div/>')
182 182 .addClass('widget-area')
183 183 .hide();
184 184 this.widget_area = widget_area;
185 185 var widget_prompt = $('<div/>')
186 186 .addClass('prompt')
187 187 .appendTo(widget_area);
188 188 var widget_subarea = $('<div/>')
189 189 .addClass('widget-subarea')
190 190 .appendTo(widget_area);
191 191 this.widget_subarea = widget_subarea;
192 192 var widget_clear_buton = $('<button />')
193 193 .addClass('close')
194 194 .html('&times;')
195 195 .click(function() {
196 196 widget_area.slideUp('', function(){ widget_subarea.html(''); });
197 197 })
198 198 .appendTo(widget_prompt);
199 199
200 200 var output = $('<div></div>');
201 201 cell.append(input).append(widget_area).append(output);
202 202 this.element = cell;
203 203 this.output_area = new outputarea.OutputArea({
204 204 selector: output,
205 205 prompt_area: true,
206 206 events: this.events,
207 207 keyboard_manager: this.keyboard_manager});
208 208 this.completer = new completer.Completer(this, this.events);
209 209 };
210 210
211 211 /** @method bind_events */
212 212 CodeCell.prototype.bind_events = function () {
213 213 Cell.prototype.bind_events.apply(this);
214 214 var that = this;
215 215
216 216 this.element.focusout(
217 217 function() { that.auto_highlight(); }
218 218 );
219 219 };
220 220
221 221
222 222 /**
223 223 * This method gets called in CodeMirror's onKeyDown/onKeyPress
224 224 * handlers and is used to provide custom key handling. Its return
225 225 * value is used to determine if CodeMirror should ignore the event:
226 226 * true = ignore, false = don't ignore.
227 227 * @method handle_codemirror_keyevent
228 228 */
229
229 230 CodeCell.prototype.handle_codemirror_keyevent = function (editor, event) {
230 231
231 232 var that = this;
232 233 // whatever key is pressed, first, cancel the tooltip request before
233 234 // they are sent, and remove tooltip if any, except for tab again
234 235 var tooltip_closed = null;
235 236 if (event.type === 'keydown' && event.which != keycodes.tab ) {
236 237 tooltip_closed = this.tooltip.remove_and_cancel_tooltip();
237 238 }
238 239
239 240 var cur = editor.getCursor();
240 241 if (event.keyCode === keycodes.enter){
241 242 this.auto_highlight();
242 243 }
243 244
244 245 if (event.which === keycodes.down && event.type === 'keypress' && this.tooltip.time_before_tooltip >= 0) {
245 246 // triger on keypress (!) otherwise inconsistent event.which depending on plateform
246 247 // browser and keyboard layout !
247 248 // Pressing '(' , request tooltip, don't forget to reappend it
248 249 // The second argument says to hide the tooltip if the docstring
249 250 // is actually empty
250 251 this.tooltip.pending(that, true);
251 252 } else if ( tooltip_closed && event.which === keycodes.esc && event.type === 'keydown') {
252 253 // If tooltip is active, cancel it. The call to
253 254 // remove_and_cancel_tooltip above doesn't pass, force=true.
254 255 // Because of this it won't actually close the tooltip
255 256 // if it is in sticky mode. Thus, we have to check again if it is open
256 257 // and close it with force=true.
257 258 if (!this.tooltip._hidden) {
258 259 this.tooltip.remove_and_cancel_tooltip(true);
259 260 }
260 261 // If we closed the tooltip, don't let CM or the global handlers
261 262 // handle this event.
262 263 event.codemirrorIgnore = true;
263 264 event.preventDefault();
264 265 return true;
265 266 } else if (event.keyCode === keycodes.tab && event.type === 'keydown' && event.shiftKey) {
266 267 if (editor.somethingSelected() || editor.getSelections().length !== 1){
267 268 var anchor = editor.getCursor("anchor");
268 269 var head = editor.getCursor("head");
269 270 if( anchor.line != head.line){
270 271 return false;
271 272 }
272 273 }
273 274 this.tooltip.request(that);
274 275 event.codemirrorIgnore = true;
275 276 event.preventDefault();
276 277 return true;
277 278 } else if (event.keyCode === keycodes.tab && event.type == 'keydown') {
278 279 // Tab completion.
279 280 this.tooltip.remove_and_cancel_tooltip();
280 281
281 282 // completion does not work on multicursor, it might be possible though in some cases
282 283 if (editor.somethingSelected() || editor.getSelections().length > 1) {
283 284 return false;
284 285 }
285 286 var pre_cursor = editor.getRange({line:cur.line,ch:0},cur);
286 287 if (pre_cursor.trim() === "") {
287 288 // Don't autocomplete if the part of the line before the cursor
288 289 // is empty. In this case, let CodeMirror handle indentation.
289 290 return false;
290 291 } else {
291 292 event.codemirrorIgnore = true;
292 293 event.preventDefault();
293 294 this.completer.startCompletion();
294 295 return true;
295 296 }
296 297 }
297 298
298 299 // keyboard event wasn't one of those unique to code cells, let's see
299 300 // if it's one of the generic ones (i.e. check edit mode shortcuts)
300 301 return Cell.prototype.handle_codemirror_keyevent.apply(this, [editor, event]);
301 302 };
302 303
303 304 // Kernel related calls.
304 305
305 306 CodeCell.prototype.set_kernel = function (kernel) {
306 307 this.kernel = kernel;
307 308 };
308 309
309 310 /**
310 311 * Execute current code cell to the kernel
311 312 * @method execute
312 313 */
313 314 CodeCell.prototype.execute = function () {
314 315 if (!this.kernel || !this.kernel.is_connected()) {
315 316 console.log("Can't execute, kernel is not connected.");
316 317 return;
317 318 }
318 319
319 320 this.active_output_area.clear_output();
320 321
321 322 // Clear widget area
322 323 this.widget_subarea.html('');
323 324 this.widget_subarea.height('');
324 325 this.widget_area.height('');
325 326 this.widget_area.hide();
326 327
327 328 this.set_input_prompt('*');
328 329 this.element.addClass("running");
329 330 if (this.last_msg_id) {
330 331 this.kernel.clear_callbacks_for_msg(this.last_msg_id);
331 332 }
332 333 var callbacks = this.get_callbacks();
333 334
334 335 var old_msg_id = this.last_msg_id;
335 336 this.last_msg_id = this.kernel.execute(this.get_text(), callbacks, {silent: false, store_history: true});
336 337 if (old_msg_id) {
337 338 delete CodeCell.msg_cells[old_msg_id];
338 339 }
339 340 CodeCell.msg_cells[this.last_msg_id] = this;
340 341 this.render();
341 342 this.events.trigger('execute.CodeCell', {cell: this});
342 343 };
343 344
344 345 /**
345 346 * Construct the default callbacks for
346 347 * @method get_callbacks
347 348 */
348 349 CodeCell.prototype.get_callbacks = function () {
349 350 var that = this;
350 351 return {
351 352 shell : {
352 353 reply : $.proxy(this._handle_execute_reply, this),
353 354 payload : {
354 355 set_next_input : $.proxy(this._handle_set_next_input, this),
355 356 page : $.proxy(this._open_with_pager, this)
356 357 }
357 358 },
358 359 iopub : {
359 360 output : function() {
360 361 that.active_output_area.handle_output.apply(that.active_output_area, arguments);
361 362 },
362 363 clear_output : function() {
363 364 that.active_output_area.handle_clear_output.apply(that.active_output_area, arguments);
364 365 },
365 366 },
366 367 input : $.proxy(this._handle_input_request, this)
367 368 };
368 369 };
369 370
370 371 CodeCell.prototype._open_with_pager = function (payload) {
371 372 this.events.trigger('open_with_text.Pager', payload);
372 373 };
373 374
374 375 /**
375 376 * @method _handle_execute_reply
376 377 * @private
377 378 */
378 379 CodeCell.prototype._handle_execute_reply = function (msg) {
379 380 this.set_input_prompt(msg.content.execution_count);
380 381 this.element.removeClass("running");
381 382 this.events.trigger('set_dirty.Notebook', {value: true});
382 383 };
383 384
384 385 /**
385 386 * @method _handle_set_next_input
386 387 * @private
387 388 */
388 389 CodeCell.prototype._handle_set_next_input = function (payload) {
389 390 var data = {'cell': this, 'text': payload.text};
390 391 this.events.trigger('set_next_input.Notebook', data);
391 392 };
392 393
393 394 /**
394 395 * @method _handle_input_request
395 396 * @private
396 397 */
397 398 CodeCell.prototype._handle_input_request = function (msg) {
398 399 this.active_output_area.append_raw_input(msg);
399 400 };
400 401
401 402
402 403 // Basic cell manipulation.
403 404
404 405 CodeCell.prototype.select = function () {
405 406 var cont = Cell.prototype.select.apply(this);
406 407 if (cont) {
407 408 this.code_mirror.refresh();
408 409 this.auto_highlight();
409 410 }
410 411 return cont;
411 412 };
412 413
413 414 CodeCell.prototype.render = function () {
414 415 var cont = Cell.prototype.render.apply(this);
415 416 // Always execute, even if we are already in the rendered state
416 417 return cont;
417 418 };
418 419
419 420 CodeCell.prototype.select_all = function () {
420 421 var start = {line: 0, ch: 0};
421 422 var nlines = this.code_mirror.lineCount();
422 423 var last_line = this.code_mirror.getLine(nlines-1);
423 424 var end = {line: nlines-1, ch: last_line.length};
424 425 this.code_mirror.setSelection(start, end);
425 426 };
426 427
427 428
428 429 CodeCell.prototype.collapse_output = function () {
429 430 this.output_area.collapse();
430 431 };
431 432
432 433
433 434 CodeCell.prototype.expand_output = function () {
434 435 this.output_area.expand();
435 436 this.output_area.unscroll_area();
436 437 };
437 438
438 439 CodeCell.prototype.scroll_output = function () {
439 440 this.output_area.expand();
440 441 this.output_area.scroll_if_long();
441 442 };
442 443
443 444 CodeCell.prototype.toggle_output = function () {
444 445 this.output_area.toggle_output();
445 446 };
446 447
447 448 CodeCell.prototype.toggle_output_scroll = function () {
448 449 this.output_area.toggle_scroll();
449 450 };
450 451
451 452
452 453 CodeCell.input_prompt_classical = function (prompt_value, lines_number) {
453 454 var ns;
454 455 if (prompt_value === undefined || prompt_value === null) {
455 456 ns = "&nbsp;";
456 457 } else {
457 458 ns = encodeURIComponent(prompt_value);
458 459 }
459 460 return 'In&nbsp;[' + ns + ']:';
460 461 };
461 462
462 463 CodeCell.input_prompt_continuation = function (prompt_value, lines_number) {
463 464 var html = [CodeCell.input_prompt_classical(prompt_value, lines_number)];
464 465 for(var i=1; i < lines_number; i++) {
465 466 html.push(['...:']);
466 467 }
467 468 return html.join('<br/>');
468 469 };
469 470
470 471 CodeCell.input_prompt_function = CodeCell.input_prompt_classical;
471 472
472 473
473 474 CodeCell.prototype.set_input_prompt = function (number) {
474 475 var nline = 1;
475 476 if (this.code_mirror !== undefined) {
476 477 nline = this.code_mirror.lineCount();
477 478 }
478 479 this.input_prompt_number = number;
479 480 var prompt_html = CodeCell.input_prompt_function(this.input_prompt_number, nline);
480 481 // This HTML call is okay because the user contents are escaped.
481 482 this.element.find('div.input_prompt').html(prompt_html);
482 483 };
483 484
484 485
485 486 CodeCell.prototype.clear_input = function () {
486 487 this.code_mirror.setValue('');
487 488 };
488 489
489 490
490 491 CodeCell.prototype.get_text = function () {
491 492 return this.code_mirror.getValue();
492 493 };
493 494
494 495
495 496 CodeCell.prototype.set_text = function (code) {
496 497 return this.code_mirror.setValue(code);
497 498 };
498 499
499 500
500 501 CodeCell.prototype.clear_output = function (wait) {
501 502 this.active_output_area.clear_output(wait);
502 503 this.set_input_prompt();
503 504 };
504 505
505 506
506 507 // JSON serialization
507 508
508 509 CodeCell.prototype.fromJSON = function (data) {
509 510 Cell.prototype.fromJSON.apply(this, arguments);
510 511 if (data.cell_type === 'code') {
511 512 if (data.source !== undefined) {
512 513 this.set_text(data.source);
513 514 // make this value the starting point, so that we can only undo
514 515 // to this state, instead of a blank cell
515 516 this.code_mirror.clearHistory();
516 517 this.auto_highlight();
517 518 }
518 519 this.set_input_prompt(data.execution_count);
519 520 this.output_area.trusted = data.metadata.trusted || false;
520 521 this.output_area.fromJSON(data.outputs);
521 522 if (data.metadata.collapsed !== undefined) {
522 523 if (data.metadata.collapsed) {
523 524 this.collapse_output();
524 525 } else {
525 526 this.expand_output();
526 527 }
527 528 }
528 529 }
529 530 };
530 531
531 532
532 533 CodeCell.prototype.toJSON = function () {
533 534 var data = Cell.prototype.toJSON.apply(this);
534 535 data.source = this.get_text();
535 536 // is finite protect against undefined and '*' value
536 537 if (isFinite(this.input_prompt_number)) {
537 538 data.execution_count = this.input_prompt_number;
538 539 } else {
539 540 data.execution_count = null;
540 541 }
541 542 var outputs = this.output_area.toJSON();
542 543 data.outputs = outputs;
543 544 data.metadata.trusted = this.output_area.trusted;
544 545 data.metadata.collapsed = this.output_area.collapsed;
545 546 return data;
546 547 };
547 548
548 549 /**
549 550 * handle cell level logic when a cell is unselected
550 551 * @method unselect
551 552 * @return is the action being taken
552 553 */
553 554 CodeCell.prototype.unselect = function () {
554 555 var cont = Cell.prototype.unselect.apply(this);
555 556 if (cont) {
556 557 // When a code cell is usnelected, make sure that the corresponding
557 558 // tooltip and completer to that cell is closed.
558 559 this.tooltip.remove_and_cancel_tooltip(true);
559 560 if (this.completer !== null) {
560 561 this.completer.close();
561 562 }
562 563 }
563 564 return cont;
564 565 };
565 566
566 567 // Backwards compatability.
567 568 IPython.CodeCell = CodeCell;
568 569
569 570 return {'CodeCell': CodeCell};
570 571 });
@@ -1,346 +1,344
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 'base/js/utils',
7 7 'jquery',
8 8 'notebook/js/cell',
9 9 'base/js/security',
10 10 'notebook/js/mathjaxutils',
11 11 'notebook/js/celltoolbar',
12 12 'components/marked/lib/marked',
13 13 'codemirror/lib/codemirror',
14 14 'codemirror/mode/gfm/gfm',
15 15 'notebook/js/codemirror-ipythongfm'
16 16 ], function(IPython,utils , $, cell, security, mathjaxutils, celltoolbar, marked, CodeMirror, gfm, ipgfm) {
17 17 "use strict";
18 18 var Cell = cell.Cell;
19 19
20 20 var TextCell = function (options) {
21 21 // Constructor
22 22 //
23 23 // Construct a new TextCell, codemirror mode is by default 'htmlmixed',
24 24 // and cell type is 'text' cell start as not redered.
25 25 //
26 26 // Parameters:
27 27 // options: dictionary
28 28 // Dictionary of keyword arguments.
29 29 // events: $(Events) instance
30 30 // config: dictionary
31 31 // keyboard_manager: KeyboardManager instance
32 32 // notebook: Notebook instance
33 33 options = options || {};
34 34
35 35 // in all TextCell/Cell subclasses
36 36 // do not assign most of members here, just pass it down
37 37 // in the options dict potentially overwriting what you wish.
38 38 // they will be assigned in the base class.
39 39 this.notebook = options.notebook;
40 40 this.events = options.events;
41 41 this.config = options.config;
42 42
43 43 // we cannot put this as a class key as it has handle to "this".
44 var cm_overwrite_options = {
45 onKeyEvent: $.proxy(this.handle_keyevent,this)
46 };
47 var config = utils.mergeopt(TextCell, this.config, {cm_config:cm_overwrite_options});
44 var config = utils.mergeopt(TextCell, this.config);
48 45 Cell.apply(this, [{
49 46 config: config,
50 47 keyboard_manager: options.keyboard_manager,
51 48 events: this.events}]);
52 49
53 50 this.cell_type = this.cell_type || 'text';
54 51 mathjaxutils = mathjaxutils;
55 52 this.rendered = false;
56 53 };
57 54
58 55 TextCell.prototype = Object.create(Cell.prototype);
59 56
60 57 TextCell.options_default = {
61 58 cm_config : {
62 59 extraKeys: {"Tab": "indentMore","Shift-Tab" : "indentLess"},
63 60 mode: 'htmlmixed',
64 61 lineWrapping : true,
65 62 }
66 63 };
67 64
68 65
69 66 /**
70 67 * Create the DOM element of the TextCell
71 68 * @method create_element
72 69 * @private
73 70 */
74 71 TextCell.prototype.create_element = function () {
75 72 Cell.prototype.create_element.apply(this, arguments);
76 73
77 74 var cell = $("<div>").addClass('cell text_cell');
78 75 cell.attr('tabindex','2');
79 76
80 77 var prompt = $('<div/>').addClass('prompt input_prompt');
81 78 cell.append(prompt);
82 79 var inner_cell = $('<div/>').addClass('inner_cell');
83 80 this.celltoolbar = new celltoolbar.CellToolbar({
84 81 cell: this,
85 82 notebook: this.notebook});
86 83 inner_cell.append(this.celltoolbar.element);
87 84 var input_area = $('<div/>').addClass('input_area');
88 85 this.code_mirror = new CodeMirror(input_area.get(0), this.cm_config);
86 this.code_mirror.on('keydown', $.proxy(this.handle_keyevent,this))
89 87 // The tabindex=-1 makes this div focusable.
90 88 var render_area = $('<div/>').addClass('text_cell_render rendered_html')
91 89 .attr('tabindex','-1');
92 90 inner_cell.append(input_area).append(render_area);
93 91 cell.append(inner_cell);
94 92 this.element = cell;
95 93 };
96 94
97 95
98 96 // Cell level actions
99 97
100 98 TextCell.prototype.select = function () {
101 99 var cont = Cell.prototype.select.apply(this);
102 100 if (cont) {
103 101 if (this.mode === 'edit') {
104 102 this.code_mirror.refresh();
105 103 }
106 104 }
107 105 return cont;
108 106 };
109 107
110 108 TextCell.prototype.unrender = function () {
111 109 if (this.read_only) return;
112 110 var cont = Cell.prototype.unrender.apply(this);
113 111 if (cont) {
114 112 var text_cell = this.element;
115 113 var output = text_cell.find("div.text_cell_render");
116 114 if (this.get_text() === this.placeholder) {
117 115 this.set_text('');
118 116 }
119 117 this.refresh();
120 118 }
121 119 return cont;
122 120 };
123 121
124 122 TextCell.prototype.execute = function () {
125 123 this.render();
126 124 };
127 125
128 126 /**
129 127 * setter: {{#crossLink "TextCell/set_text"}}{{/crossLink}}
130 128 * @method get_text
131 129 * @retrun {string} CodeMirror current text value
132 130 */
133 131 TextCell.prototype.get_text = function() {
134 132 return this.code_mirror.getValue();
135 133 };
136 134
137 135 /**
138 136 * @param {string} text - Codemiror text value
139 137 * @see TextCell#get_text
140 138 * @method set_text
141 139 * */
142 140 TextCell.prototype.set_text = function(text) {
143 141 this.code_mirror.setValue(text);
144 142 this.unrender();
145 143 this.code_mirror.refresh();
146 144 };
147 145
148 146 /**
149 147 * setter :{{#crossLink "TextCell/set_rendered"}}{{/crossLink}}
150 148 * @method get_rendered
151 149 * */
152 150 TextCell.prototype.get_rendered = function() {
153 151 return this.element.find('div.text_cell_render').html();
154 152 };
155 153
156 154 /**
157 155 * @method set_rendered
158 156 */
159 157 TextCell.prototype.set_rendered = function(text) {
160 158 this.element.find('div.text_cell_render').html(text);
161 159 };
162 160
163 161
164 162 /**
165 163 * Create Text cell from JSON
166 164 * @param {json} data - JSON serialized text-cell
167 165 * @method fromJSON
168 166 */
169 167 TextCell.prototype.fromJSON = function (data) {
170 168 Cell.prototype.fromJSON.apply(this, arguments);
171 169 if (data.cell_type === this.cell_type) {
172 170 if (data.source !== undefined) {
173 171 this.set_text(data.source);
174 172 // make this value the starting point, so that we can only undo
175 173 // to this state, instead of a blank cell
176 174 this.code_mirror.clearHistory();
177 175 // TODO: This HTML needs to be treated as potentially dangerous
178 176 // user input and should be handled before set_rendered.
179 177 this.set_rendered(data.rendered || '');
180 178 this.rendered = false;
181 179 this.render();
182 180 }
183 181 }
184 182 };
185 183
186 184 /** Generate JSON from cell
187 185 * @return {object} cell data serialised to json
188 186 */
189 187 TextCell.prototype.toJSON = function () {
190 188 var data = Cell.prototype.toJSON.apply(this);
191 189 data.source = this.get_text();
192 190 if (data.source == this.placeholder) {
193 191 data.source = "";
194 192 }
195 193 return data;
196 194 };
197 195
198 196
199 197 var MarkdownCell = function (options) {
200 198 // Constructor
201 199 //
202 200 // Parameters:
203 201 // options: dictionary
204 202 // Dictionary of keyword arguments.
205 203 // events: $(Events) instance
206 204 // config: dictionary
207 205 // keyboard_manager: KeyboardManager instance
208 206 // notebook: Notebook instance
209 207 options = options || {};
210 208 var config = utils.mergeopt(MarkdownCell, options.config);
211 209 TextCell.apply(this, [$.extend({}, options, {config: config})]);
212 210
213 211 this.cell_type = 'markdown';
214 212 };
215 213
216 214 MarkdownCell.options_default = {
217 215 cm_config: {
218 216 mode: 'ipythongfm'
219 217 },
220 218 placeholder: "Type *Markdown* and LaTeX: $\\alpha^2$"
221 219 };
222 220
223 221 MarkdownCell.prototype = Object.create(TextCell.prototype);
224 222
225 223 MarkdownCell.prototype.set_heading_level = function (level) {
226 224 // make a markdown cell a heading
227 225 level = level || 1;
228 226 var source = this.get_text();
229 227 source = source.replace(/^(#*)\s?/,
230 228 new Array(level + 1).join('#') + ' ');
231 229 this.set_text(source);
232 230 this.refresh();
233 231 if (this.rendered) {
234 232 this.render();
235 233 }
236 234 };
237 235
238 236 /**
239 237 * @method render
240 238 */
241 239 MarkdownCell.prototype.render = function () {
242 240 var cont = TextCell.prototype.render.apply(this);
243 241 if (cont) {
244 242 var that = this;
245 243 var text = this.get_text();
246 244 var math = null;
247 245 if (text === "") { text = this.placeholder; }
248 246 var text_and_math = mathjaxutils.remove_math(text);
249 247 text = text_and_math[0];
250 248 math = text_and_math[1];
251 249 marked(text, function (err, html) {
252 250 html = mathjaxutils.replace_math(html, math);
253 251 html = security.sanitize_html(html);
254 252 html = $($.parseHTML(html));
255 253 // add anchors to headings
256 254 html.find(":header").addBack(":header").each(function (i, h) {
257 255 h = $(h);
258 256 var hash = h.text().replace(/ /g, '-');
259 257 h.attr('id', hash);
260 258 h.append(
261 259 $('<a/>')
262 260 .addClass('anchor-link')
263 261 .attr('href', '#' + hash)
264 262 .text('ΒΆ')
265 263 );
266 264 });
267 265 // links in markdown cells should open in new tabs
268 266 html.find("a[href]").not('[href^="#"]').attr("target", "_blank");
269 267 that.set_rendered(html);
270 268 that.typeset();
271 269 that.events.trigger("rendered.MarkdownCell", {cell: that});
272 270 });
273 271 }
274 272 return cont;
275 273 };
276 274
277 275
278 276 var RawCell = function (options) {
279 277 // Constructor
280 278 //
281 279 // Parameters:
282 280 // options: dictionary
283 281 // Dictionary of keyword arguments.
284 282 // events: $(Events) instance
285 283 // config: dictionary
286 284 // keyboard_manager: KeyboardManager instance
287 285 // notebook: Notebook instance
288 286 options = options || {};
289 287 var config = utils.mergeopt(RawCell, options.config);
290 288 TextCell.apply(this, [$.extend({}, options, {config: config})]);
291 289
292 290 this.cell_type = 'raw';
293 291 };
294 292
295 293 RawCell.options_default = {
296 294 placeholder : "Write raw LaTeX or other formats here, for use with nbconvert. " +
297 295 "It will not be rendered in the notebook. " +
298 296 "When passing through nbconvert, a Raw Cell's content is added to the output unmodified."
299 297 };
300 298
301 299 RawCell.prototype = Object.create(TextCell.prototype);
302 300
303 301 /** @method bind_events **/
304 302 RawCell.prototype.bind_events = function () {
305 303 TextCell.prototype.bind_events.apply(this);
306 304 var that = this;
307 305 this.element.focusout(function() {
308 306 that.auto_highlight();
309 307 that.render();
310 308 });
311 309
312 310 this.code_mirror.on('focus', function() { that.unrender(); });
313 311 };
314 312
315 313 /**
316 314 * Trigger autodetection of highlight scheme for current cell
317 315 * @method auto_highlight
318 316 */
319 317 RawCell.prototype.auto_highlight = function () {
320 318 this._auto_highlight(this.config.raw_cell_highlight);
321 319 };
322 320
323 321 /** @method render **/
324 322 RawCell.prototype.render = function () {
325 323 var cont = TextCell.prototype.render.apply(this);
326 324 if (cont){
327 325 var text = this.get_text();
328 326 if (text === "") { text = this.placeholder; }
329 327 this.set_text(text);
330 328 this.element.removeClass('rendered');
331 329 }
332 330 return cont;
333 331 };
334 332
335 333 // Backwards compatability.
336 334 IPython.TextCell = TextCell;
337 335 IPython.MarkdownCell = MarkdownCell;
338 336 IPython.RawCell = RawCell;
339 337
340 338 var textcell = {
341 339 TextCell: TextCell,
342 340 MarkdownCell: MarkdownCell,
343 341 RawCell: RawCell,
344 342 };
345 343 return textcell;
346 344 });
General Comments 0
You need to be logged in to leave comments. Login now