Add the task list code to the markdown renderer

This commit is contained in:
yflory 2017-05-18 14:57:04 +02:00
parent 2b60b81a68
commit 0bd4caeb7e
4 changed files with 53 additions and 37 deletions

View File

@ -55,6 +55,11 @@
max-width: 80%; max-width: 80%;
resize: horizontal; resize: horizontal;
} }
.CodeMirror.fullPage {
min-width: 100%;
max-width: 100%;
resize: none;
}
.CodeMirror-focused .cm-matchhighlight { .CodeMirror-focused .cm-matchhighlight {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
background-position: bottom; background-position: bottom;

View File

@ -13,14 +13,14 @@ define([
Cryptget, DiffMd) { Cryptget, DiffMd) {
var Messages = Cryptpad.Messages; var Messages = Cryptpad.Messages;
var module = window.APP = { var APP = window.APP = {
Cryptpad: Cryptpad, Cryptpad: Cryptpad,
}; };
$(function () { $(function () {
Cryptpad.addLoadingScreen(); Cryptpad.addLoadingScreen();
var ifrw = module.ifrw = $('#pad-iframe')[0].contentWindow; var ifrw = APP.ifrw = $('#pad-iframe')[0].contentWindow;
var stringify = function (obj) { var stringify = function (obj) {
return JSONSortify(obj); return JSONSortify(obj);
}; };
@ -28,6 +28,7 @@ define([
var toolbar; var toolbar;
var editor; var editor;
var $iframe = $('#pad-iframe').contents(); var $iframe = $('#pad-iframe').contents();
var $previewContainer = $iframe.find('#previewContainer');
var $preview = $iframe.find('#preview'); var $preview = $iframe.find('#preview');
$preview.click(function (e) { $preview.click(function (e) {
if (!e.target) { return; } if (!e.target) { return; }
@ -58,7 +59,7 @@ define([
var isHistoryMode = false; var isHistoryMode = false;
var setEditable = module.setEditable = function (bool) { var setEditable = APP.setEditable = function (bool) {
if (readOnly && bool) { return; } if (readOnly && bool) { return; }
editor.setOption('readOnly', !bool); editor.setOption('readOnly', !bool);
}; };
@ -121,21 +122,24 @@ define([
var textValue = canonicalize(CodeMirror.$textarea.val()); var textValue = canonicalize(CodeMirror.$textarea.val());
var shjson = stringifyInner(textValue); var shjson = stringifyInner(textValue);
module.patchText(shjson); APP.patchText(shjson);
if (module.realtime.getUserDoc() !== shjson) { if (APP.realtime.getUserDoc() !== shjson) {
console.error("realtime.getUserDoc() !== shjson"); console.error("realtime.getUserDoc() !== shjson");
} }
}; };
var onModeChanged = function (mode) { var onModeChanged = function (mode) {
if (mode === "markdown") { var $codeMirror = $iframe.find('.CodeMirror');
if (mode === "markdown") {
APP.$previewButton.show(); APP.$previewButton.show();
$preview.show(); $previewContainer.show();
$codeMirror.removeClass('fullPage');
return; return;
} }
APP.$previewButton.hide(); APP.$previewButton.hide();
$preview.hide(); $previewContainer.hide();
$codeMirror.addClass('fullPage');
}; };
config.onInit = function (info) { config.onInit = function (info) {
@ -161,7 +165,7 @@ define([
network: info.network, network: info.network,
$container: $bar $container: $bar
}; };
toolbar = module.toolbar = Toolbar.create(configTb); toolbar = APP.toolbar = Toolbar.create(configTb);
Title.setToolbar(toolbar); Title.setToolbar(toolbar);
CodeMirror.init(config.onLocal, Title, toolbar); CodeMirror.init(config.onLocal, Title, toolbar);
@ -221,10 +225,16 @@ define([
$previewButton.removeClass('fa-question').addClass('fa-eye'); $previewButton.removeClass('fa-question').addClass('fa-eye');
$previewButton.attr('title', 'TODO Preview'); //TODO $previewButton.attr('title', 'TODO Preview'); //TODO
$previewButton.click(function () { $previewButton.click(function () {
var $codeMirror = $iframe.find('.CodeMirror');
if (CodeMirror.highlightMode !== 'markdown') { if (CodeMirror.highlightMode !== 'markdown') {
return void $preview.hide(); $previewContainer.show();
}
$previewContainer.toggle();
if ($previewContainer.is(':visible')) {
$codeMirror.removeClass('fullPage');
} else {
$codeMirror.addClass('fullPage');
} }
$preview.toggle();
}); });
$rightside.append($previewButton); $rightside.append($previewButton);
@ -240,15 +250,15 @@ define([
}; };
config.onReady = function (info) { config.onReady = function (info) {
if (module.realtime !== info.realtime) { if (APP.realtime !== info.realtime) {
var realtime = module.realtime = info.realtime; var realtime = APP.realtime = info.realtime;
module.patchText = TextPatcher.create({ APP.patchText = TextPatcher.create({
realtime: realtime, realtime: realtime,
//logging: true //logging: true
}); });
} }
var userDoc = module.realtime.getUserDoc(); var userDoc = APP.realtime.getUserDoc();
var isNew = false; var isNew = false;
if (userDoc === "" || userDoc === "{}") { isNew = true; } if (userDoc === "" || userDoc === "{}") { isNew = true; }
@ -301,7 +311,7 @@ define([
if (isHistoryMode) { return; } if (isHistoryMode) { return; }
var oldDoc = canonicalize(CodeMirror.$textarea.val()); var oldDoc = canonicalize(CodeMirror.$textarea.val());
var shjson = module.realtime.getUserDoc(); var shjson = APP.realtime.getUserDoc();
// Update the user list (metadata) from the hyperjson // Update the user list (metadata) from the hyperjson
Metadata.update(shjson); Metadata.update(shjson);
@ -312,7 +322,7 @@ define([
DiffMd.apply(DiffMd.render(remoteDoc), $preview); DiffMd.apply(DiffMd.render(remoteDoc), $preview);
var highlightMode = hjson.highlightMode; var highlightMode = hjson.highlightMode;
if (highlightMode && highlightMode !== module.highlightMode) { if (highlightMode && highlightMode !== APP.highlightMode) {
CodeMirror.setMode(highlightMode, onModeChanged); CodeMirror.setMode(highlightMode, onModeChanged);
} }
@ -324,7 +334,7 @@ define([
if (shjson2 !== shjson) { if (shjson2 !== shjson) {
console.error("shjson2 !== shjson"); console.error("shjson2 !== shjson");
TextPatcher.log(shjson, TextPatcher.diff(shjson, shjson2)); TextPatcher.log(shjson, TextPatcher.diff(shjson, shjson2));
module.patchText(shjson2); APP.patchText(shjson2);
} }
} }
if (oldDoc !== remoteDoc) { Cryptpad.notify(); } if (oldDoc !== remoteDoc) { Cryptpad.notify(); }
@ -351,7 +361,7 @@ define([
config.onError = onConnectError; config.onError = onConnectError;
module.realtime = Realtime.start(config); APP.realtime = Realtime.start(config);
editor.on('change', onLocal); editor.on('change', onLocal);

View File

@ -6,7 +6,7 @@ define([
var DiffMd = {} var DiffMd = {}
var DiffDOM = window.diffDOM; var DiffDOM = window.diffDOM;
var renderer = DiffMd.renderer = new Marked.Renderer(); var renderer = new Marked.Renderer();
Marked.setOptions({ Marked.setOptions({
renderer: renderer renderer: renderer
@ -16,6 +16,24 @@ define([
return Marked(md); return Marked(md);
}; };
// Tasks list
var checkedTaskItemPtn = /^\s*\[x\]\s*/;
var uncheckedTaskItemPtn = /^\s*\[ \]\s*/;
renderer.listitem = function (text) {
var isCheckedTaskItem = checkedTaskItemPtn.test(text);
var isUncheckedTaskItem = uncheckedTaskItemPtn.test(text);
if (isCheckedTaskItem) {
text = text.replace(checkedTaskItemPtn,
'<i class="fa fa-check-square" aria-hidden="true"></i>&nbsp;') + '\n';
}
if (isUncheckedTaskItem) {
text = text.replace(uncheckedTaskItemPtn,
'<i class="fa fa-square-o" aria-hidden="true"></i>&nbsp;') + '\n';
}
var cls = (isCheckedTaskItem || isUncheckedTaskItem) ? ' class="todo-list-item"' : '';
return '<li'+ cls + '>' + text + '</li>\n';
};
var forbiddenTags = [ var forbiddenTags = [
'SCRIPT', 'SCRIPT',
'IFRAME', 'IFRAME',

View File

@ -2,23 +2,6 @@ define([
'jquery', 'jquery',
'/common/diffMarked.js', '/common/diffMarked.js',
],function ($, DiffMd) { ],function ($, DiffMd) {
// Tasks list
var checkedTaskItemPtn = /^\s*\[x\]\s*/;
var uncheckedTaskItemPtn = /^\s*\[ \]\s*/;
DiffMd.renderer.listitem = function (text) {
var isCheckedTaskItem = checkedTaskItemPtn.test(text);
var isUncheckedTaskItem = uncheckedTaskItemPtn.test(text);
if (isCheckedTaskItem) {
text = text.replace(checkedTaskItemPtn,
'<i class="fa fa-check-square" aria-hidden="true"></i>&nbsp;') + '\n';
}
if (isUncheckedTaskItem) {
text = text.replace(uncheckedTaskItemPtn,
'<i class="fa fa-square-o" aria-hidden="true"></i>&nbsp;') + '\n';
}
var cls = (isCheckedTaskItem || isUncheckedTaskItem) ? ' class="todo-list-item"' : '';
return '<li'+ cls + '>' + text + '</li>\n';
};
var Slide = { var Slide = {
index: 0, index: 0,