textcell.js
344 lines
| 11.0 KiB
| application/javascript
|
JavascriptLexer
|
r17196 | // Copyright (c) IPython Development Team. | ||
// Distributed under the terms of the Modified BSD License. | ||||
define([ | ||||
'base/js/namespace', | ||||
|
r17764 | 'base/js/utils', | ||
|
r17200 | 'jquery', | ||
|
r17196 | 'notebook/js/cell', | ||
'base/js/security', | ||||
|
r17200 | 'notebook/js/mathjaxutils', | ||
'notebook/js/celltoolbar', | ||||
|
r17205 | 'components/marked/lib/marked', | ||
|
r18280 | 'codemirror/lib/codemirror', | ||
'codemirror/mode/gfm/gfm', | ||||
'notebook/js/codemirror-ipythongfm' | ||||
], function(IPython,utils , $, cell, security, mathjaxutils, celltoolbar, marked, CodeMirror, gfm, ipgfm) { | ||||
|
r11526 | "use strict"; | ||
|
r17203 | var Cell = cell.Cell; | ||
|
r4349 | |||
|
r17210 | var TextCell = function (options) { | ||
|
r17211 | // Constructor | ||
// | ||||
// Construct a new TextCell, codemirror mode is by default 'htmlmixed', | ||||
// and cell type is 'text' cell start as not redered. | ||||
// | ||||
// Parameters: | ||||
// options: dictionary | ||||
// Dictionary of keyword arguments. | ||||
// events: $(Events) instance | ||||
// config: dictionary | ||||
// keyboard_manager: KeyboardManager instance | ||||
// notebook: Notebook instance | ||||
|
r17210 | options = options || {}; | ||
|
r17211 | |||
|
r10165 | // in all TextCell/Cell subclasses | ||
// do not assign most of members here, just pass it down | ||||
// in the options dict potentially overwriting what you wish. | ||||
// they will be assigned in the base class. | ||||
|
r17210 | this.notebook = options.notebook; | ||
this.events = options.events; | ||||
this.config = options.config; | ||||
|
r17200 | |||
|
r10165 | // we cannot put this as a class key as it has handle to "this". | ||
|
r19098 | var config = utils.mergeopt(TextCell, this.config); | ||
|
r17210 | Cell.apply(this, [{ | ||
config: config, | ||||
keyboard_manager: options.keyboard_manager, | ||||
|
r17212 | events: this.events}]); | ||
|
r9537 | |||
|
r13668 | this.cell_type = this.cell_type || 'text'; | ||
|
r17200 | mathjaxutils = mathjaxutils; | ||
|
r4352 | this.rendered = false; | ||
}; | ||||
|
r18377 | TextCell.prototype = Object.create(Cell.prototype); | ||
|
r10165 | |||
TextCell.options_default = { | ||||
cm_config : { | ||||
extraKeys: {"Tab": "indentMore","Shift-Tab" : "indentLess"}, | ||||
mode: 'htmlmixed', | ||||
|
r9537 | lineWrapping : true, | ||
} | ||||
|
r10165 | }; | ||
|
r9537 | |||
|
r8711 | /** | ||
* Create the DOM element of the TextCell | ||||
|
r8709 | * @method create_element | ||
* @private | ||||
*/ | ||||
|
r4508 | TextCell.prototype.create_element = function () { | ||
|
r17203 | Cell.prototype.create_element.apply(this, arguments); | ||
|
r13776 | |||
|
r17422 | var cell = $("<div>").addClass('cell text_cell'); | ||
|
r4629 | cell.attr('tabindex','2'); | ||
|
r9144 | |||
|
r13776 | var prompt = $('<div/>').addClass('prompt input_prompt'); | ||
cell.append(prompt); | ||||
var inner_cell = $('<div/>').addClass('inner_cell'); | ||||
|
r17214 | this.celltoolbar = new celltoolbar.CellToolbar({ | ||
cell: this, | ||||
notebook: this.notebook}); | ||||
|
r13776 | inner_cell.append(this.celltoolbar.element); | ||
|
r15552 | var input_area = $('<div/>').addClass('input_area'); | ||
|
r15497 | this.code_mirror = new CodeMirror(input_area.get(0), this.cm_config); | ||
|
r19098 | this.code_mirror.on('keydown', $.proxy(this.handle_keyevent,this)) | ||
|
r4499 | // The tabindex=-1 makes this div focusable. | ||
|
r17426 | var render_area = $('<div/>').addClass('text_cell_render rendered_html') | ||
.attr('tabindex','-1'); | ||||
|
r13776 | inner_cell.append(input_area).append(render_area); | ||
cell.append(inner_cell); | ||||
|
r4352 | this.element = cell; | ||
}; | ||||
|
r14014 | // Cell level actions | ||
|
r4508 | TextCell.prototype.select = function () { | ||
|
r17203 | var cont = Cell.prototype.select.apply(this); | ||
|
r14015 | if (cont) { | ||
|
r14014 | if (this.mode === 'edit') { | ||
this.code_mirror.refresh(); | ||||
} | ||||
|
r15497 | } | ||
|
r14015 | return cont; | ||
|
r5833 | }; | ||
|
r14014 | TextCell.prototype.unrender = function () { | ||
if (this.read_only) return; | ||||
|
r17203 | var cont = Cell.prototype.unrender.apply(this); | ||
|
r14015 | if (cont) { | ||
|
r4508 | var text_cell = this.element; | ||
|
r8709 | var output = text_cell.find("div.text_cell_render"); | ||
|
r5943 | if (this.get_text() === this.placeholder) { | ||
this.set_text(''); | ||||
|
r5479 | } | ||
|
r15502 | this.refresh(); | ||
|
r15497 | } | ||
|
r14015 | return cont; | ||
}; | ||||
TextCell.prototype.execute = function () { | ||||
this.render(); | ||||
|
r14014 | }; | ||
|
r4349 | |||
|
r8709 | /** | ||
* setter: {{#crossLink "TextCell/set_text"}}{{/crossLink}} | ||||
* @method get_text | ||||
* @retrun {string} CodeMirror current text value | ||||
*/ | ||||
|
r5943 | TextCell.prototype.get_text = function() { | ||
|
r4499 | return this.code_mirror.getValue(); | ||
|
r4352 | }; | ||
|
r4349 | |||
|
r8709 | /** | ||
* @param {string} text - Codemiror text value | ||||
* @see TextCell#get_text | ||||
* @method set_text | ||||
* */ | ||||
|
r5943 | TextCell.prototype.set_text = function(text) { | ||
|
r4499 | this.code_mirror.setValue(text); | ||
|
r17464 | this.unrender(); | ||
|
r4499 | this.code_mirror.refresh(); | ||
|
r4352 | }; | ||
|
r4349 | |||
|
r8709 | /** | ||
* setter :{{#crossLink "TextCell/set_rendered"}}{{/crossLink}} | ||||
* @method get_rendered | ||||
* */ | ||||
|
r4513 | TextCell.prototype.get_rendered = function() { | ||
|
r4508 | return this.element.find('div.text_cell_render').html(); | ||
}; | ||||
|
r8709 | /** | ||
* @method set_rendered | ||||
*/ | ||||
|
r4508 | TextCell.prototype.set_rendered = function(text) { | ||
this.element.find('div.text_cell_render').html(text); | ||||
|
r4352 | }; | ||
|
r4349 | |||
|
r8711 | /** | ||
* Create Text cell from JSON | ||||
|
r8709 | * @param {json} data - JSON serialized text-cell | ||
|
r8711 | * @method fromJSON | ||
|
r8709 | */ | ||
|
r4508 | TextCell.prototype.fromJSON = function (data) { | ||
|
r17203 | Cell.prototype.fromJSON.apply(this, arguments); | ||
|
r4508 | if (data.cell_type === this.cell_type) { | ||
|
r4499 | if (data.source !== undefined) { | ||
|
r5943 | this.set_text(data.source); | ||
|
r7587 | // make this value the starting point, so that we can only undo | ||
// to this state, instead of a blank cell | ||||
this.code_mirror.clearHistory(); | ||||
|
r15407 | // TODO: This HTML needs to be treated as potentially dangerous | ||
// user input and should be handled before set_rendered. | ||||
|
r4513 | this.set_rendered(data.rendered || ''); | ||
this.rendered = false; | ||||
this.render(); | ||||
|
r5479 | } | ||
} | ||||
|
r4513 | }; | ||
|
r4349 | |||
|
r8711 | /** Generate JSON from cell | ||
* @return {object} cell data serialised to json | ||||
*/ | ||||
|
r4508 | TextCell.prototype.toJSON = function () { | ||
|
r17203 | var data = Cell.prototype.toJSON.apply(this); | ||
|
r5943 | data.source = this.get_text(); | ||
|
r13668 | if (data.source == this.placeholder) { | ||
data.source = ""; | ||||
} | ||||
|
r4484 | return data; | ||
|
r4349 | }; | ||
|
r4508 | |||
|
r17210 | var MarkdownCell = function (options) { | ||
|
r17211 | // Constructor | ||
// | ||||
// Parameters: | ||||
// options: dictionary | ||||
// Dictionary of keyword arguments. | ||||
// events: $(Events) instance | ||||
// config: dictionary | ||||
// keyboard_manager: KeyboardManager instance | ||||
// notebook: Notebook instance | ||||
|
r17210 | options = options || {}; | ||
|
r17764 | var config = utils.mergeopt(MarkdownCell, options.config); | ||
|
r17210 | TextCell.apply(this, [$.extend({}, options, {config: config})]); | ||
|
r10165 | |||
|
r4508 | this.cell_type = 'markdown'; | ||
}; | ||||
|
r10165 | MarkdownCell.options_default = { | ||
cm_config: { | ||||
|
r16787 | mode: 'ipythongfm' | ||
|
r10165 | }, | ||
placeholder: "Type *Markdown* and LaTeX: $\\alpha^2$" | ||||
|
r15497 | }; | ||
|
r10165 | |||
|
r18377 | MarkdownCell.prototype = Object.create(TextCell.prototype); | ||
|
r4508 | |||
|
r18596 | MarkdownCell.prototype.set_heading_level = function (level) { | ||
// make a markdown cell a heading | ||||
level = level || 1; | ||||
var source = this.get_text(); | ||||
|
r18597 | source = source.replace(/^(#*)\s?/, | ||
new Array(level + 1).join('#') + ' '); | ||||
this.set_text(source); | ||||
|
r18596 | this.refresh(); | ||
if (this.rendered) { | ||||
this.render(); | ||||
} | ||||
}; | ||||
|
r8711 | /** | ||
* @method render | ||||
*/ | ||||
|
r4508 | MarkdownCell.prototype.render = function () { | ||
|
r17196 | var cont = TextCell.prototype.render.apply(this); | ||
|
r14015 | if (cont) { | ||
|
r18864 | var that = this; | ||
|
r5943 | var text = this.get_text(); | ||
|
r11843 | var math = null; | ||
|
r5479 | if (text === "") { text = this.placeholder; } | ||
|
r17200 | var text_and_math = mathjaxutils.remove_math(text); | ||
|
r11843 | text = text_and_math[0]; | ||
math = text_and_math[1]; | ||||
|
r18864 | marked(text, function (err, html) { | ||
html = mathjaxutils.replace_math(html, math); | ||||
html = security.sanitize_html(html); | ||||
html = $($.parseHTML(html)); | ||||
// add anchors to headings | ||||
html.find(":header").addBack(":header").each(function (i, h) { | ||||
h = $(h); | ||||
var hash = h.text().replace(/ /g, '-'); | ||||
h.attr('id', hash); | ||||
h.append( | ||||
$('<a/>') | ||||
.addClass('anchor-link') | ||||
.attr('href', '#' + hash) | ||||
.text('¶') | ||||
); | ||||
}); | ||||
// links in markdown cells should open in new tabs | ||||
html.find("a[href]").not('[href^="#"]').attr("target", "_blank"); | ||||
that.set_rendered(html); | ||||
that.typeset(); | ||||
that.events.trigger("rendered.MarkdownCell", {cell: that}); | ||||
}); | ||||
|
r15497 | } | ||
|
r14015 | return cont; | ||
|
r4508 | }; | ||
|
r17210 | var RawCell = function (options) { | ||
|
r17211 | // Constructor | ||
// | ||||
// Parameters: | ||||
// options: dictionary | ||||
// Dictionary of keyword arguments. | ||||
// events: $(Events) instance | ||||
// config: dictionary | ||||
// keyboard_manager: KeyboardManager instance | ||||
// notebook: Notebook instance | ||||
|
r17210 | options = options || {}; | ||
|
r17764 | var config = utils.mergeopt(RawCell, options.config); | ||
|
r17210 | TextCell.apply(this, [$.extend({}, options, {config: config})]); | ||
|
r14016 | |||
|
r17210 | this.cell_type = 'raw'; | ||
|
r4508 | }; | ||
|
r10165 | RawCell.options_default = { | ||
|
r15859 | placeholder : "Write raw LaTeX or other formats here, for use with nbconvert. " + | ||
"It will not be rendered in the notebook. " + | ||||
|
r13668 | "When passing through nbconvert, a Raw Cell's content is added to the output unmodified." | ||
|
r10165 | }; | ||
|
r18377 | RawCell.prototype = Object.create(TextCell.prototype); | ||
|
r4508 | |||
|
r14015 | /** @method bind_events **/ | ||
RawCell.prototype.bind_events = function () { | ||||
TextCell.prototype.bind_events.apply(this); | ||||
|
r15497 | var that = this; | ||
|
r14015 | this.element.focusout(function() { | ||
that.auto_highlight(); | ||||
|
r15858 | that.render(); | ||
|
r14015 | }); | ||
|
r15768 | |||
this.code_mirror.on('focus', function() { that.unrender(); }); | ||||
|
r14015 | }; | ||
|
r8711 | /** | ||
* Trigger autodetection of highlight scheme for current cell | ||||
* @method auto_highlight | ||||
*/ | ||||
|
r8202 | RawCell.prototype.auto_highlight = function () { | ||
|
r17200 | this._auto_highlight(this.config.raw_cell_highlight); | ||
|
r8202 | }; | ||
|
r4508 | |||
|
r8711 | /** @method render **/ | ||
|
r6248 | RawCell.prototype.render = function () { | ||
|
r17196 | var cont = TextCell.prototype.render.apply(this); | ||
|
r15768 | if (cont){ | ||
var text = this.get_text(); | ||||
if (text === "") { text = this.placeholder; } | ||||
this.set_text(text); | ||||
|
r15858 | this.element.removeClass('rendered'); | ||
|
r14015 | } | ||
|
r15768 | return cont; | ||
|
r6017 | }; | ||
|
r17196 | // Backwards compatability. | ||
|
r4508 | IPython.TextCell = TextCell; | ||
IPython.MarkdownCell = MarkdownCell; | ||||
|
r6248 | IPython.RawCell = RawCell; | ||
|
r4508 | |||
|
r17214 | var textcell = { | ||
|
r18596 | TextCell: TextCell, | ||
MarkdownCell: MarkdownCell, | ||||
|
r18999 | RawCell: RawCell | ||
|
r17196 | }; | ||
|
r17214 | return textcell; | ||
|
r17196 | }); | ||