infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Add a preview of the markdown content in the code editor

Browse Source
pull/1/head
yflory 8 years ago
parent b72415b56b
commit 56bcdff890
6 changed files with 123 additions and 126 deletions
Show Stats Download Patch File Download Diff File

31
www/code/inner.html
Unescape Escape View File

@ -44,20 +44,51 @@
body { body {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
max-height: 100%;
min-height: auto;
} }
.CodeMirror { .CodeMirror {
display: inline-block;
height: 100%; height: 100%;
width: 50%;
min-width: 20%;
max-width: 80%;
resize: horizontal;
} }
.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;
background-repeat: repeat-x; background-repeat: repeat-x;
} }
#editorContainer {
flex: 1;
display: flex;
flex-flow: row;
height: 100%;
overflow: hidden;
}
#previewContainer {
flex: 1;
padding: 5px 20px;
overflow: auto;
display: inline-block;
height: 100%;
border: 1px solid black;
box-sizing: border-box;
font-family: Calibri,Ubuntu,sans-serif;
}
#preview {
max-width: 40vw;
margin: auto;
}
</style> </style>
</head> </head>
<body> <body>
<div id="cme_toolbox" class="toolbar-container"></div> <div id="cme_toolbox" class="toolbar-container"></div>
<div id="editorContainer">
<textarea id="editor1" name="editor1"></textarea> <textarea id="editor1" name="editor1"></textarea>
<div id="previewContainer"><div id="preview"></div></div>
</div>
</body> </body>
</html> </html>

49
www/code/main.js
Unescape Escape View File

@ -8,7 +8,9 @@ define([
'/bower_components/chainpad-json-validator/json-ot.js', '/bower_components/chainpad-json-validator/json-ot.js',
'/common/cryptpad-common.js', '/common/cryptpad-common.js',
'/common/cryptget.js', '/common/cryptget.js',
], function ($, Crypto, Realtime, TextPatcher, Toolbar, JSONSortify, JsonOT, Cryptpad, Cryptget) { '/common/diffMarked.js',
], function ($, Crypto, Realtime, TextPatcher, Toolbar, JSONSortify, JsonOT, Cryptpad,
Cryptget, DiffMd) {
var Messages = Cryptpad.Messages; var Messages = Cryptpad.Messages;
var module = window.APP = { var module = window.APP = {
@ -25,6 +27,18 @@ define([
var toolbar; var toolbar;
var editor; var editor;
var $iframe = $('#pad-iframe').contents();
var $preview = $iframe.find('#preview');
$preview.click(function (e) {
if (!e.target) { return; }
var $t = $(e.target);
if ($t.is('a') || $t.parents('a').length) {
e.preventDefault();
var $a = $t.is('a') ? $t : $t.parents('a').first();
var href = $a.attr('href');
window.open(href);
}
});
var secret = Cryptpad.getSecrets(); var secret = Cryptpad.getSecrets();
var readOnly = secret.keys && !secret.keys.editKeyStr; var readOnly = secret.keys && !secret.keys.editKeyStr;
@ -102,6 +116,8 @@ define([
editor.save(); editor.save();
DiffMd.apply(DiffMd.render(editor.getValue()), $preview);
var textValue = canonicalize(CodeMirror.$textarea.val()); var textValue = canonicalize(CodeMirror.$textarea.val());
var shjson = stringifyInner(textValue); var shjson = stringifyInner(textValue);
@ -112,7 +128,15 @@ define([
} }
}; };
var onModeChanged = function (mode) {
if (mode === "markdown") {
APP.$previewButton.show();
$preview.show();
return;
}
APP.$previewButton.hide();
$preview.hide();
};
config.onInit = function (info) { config.onInit = function (info) {
UserList = Cryptpad.createUserList(info, config.onLocal, Cryptget, Cryptpad); UserList = Cryptpad.createUserList(info, config.onLocal, Cryptget, Cryptpad);
@ -193,8 +217,19 @@ define([
var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb); var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
$rightside.append($forgetPad); $rightside.append($forgetPad);
var $previewButton = APP.$previewButton = Cryptpad.createButton(null, true);
$previewButton.removeClass('fa-question').addClass('fa-eye');
$previewButton.attr('title', 'TODO Preview'); //TODO
$previewButton.click(function () {
if (CodeMirror.highlightMode !== 'markdown') {
return void $preview.hide();
}
$preview.toggle();
});
$rightside.append($previewButton);
if (!readOnly) { if (!readOnly) {
CodeMirror.configureLanguage(CodeMirror.configureTheme); CodeMirror.configureLanguage(CodeMirror.configureTheme, onModeChanged);
} }
else { else {
CodeMirror.configureTheme(); CodeMirror.configureTheme();
@ -231,12 +266,12 @@ define([
newDoc = hjson.content; newDoc = hjson.content;
if (hjson.highlightMode) { if (hjson.highlightMode) {
CodeMirror.setMode(hjson.highlightMode); CodeMirror.setMode(hjson.highlightMode, onModeChanged);
} }
} }
if (!CodeMirror.highlightMode) { if (!CodeMirror.highlightMode) {
CodeMirror.setMode('javascript'); CodeMirror.setMode('markdown', onModeChanged);
console.log("%s => %s", CodeMirror.highlightMode, CodeMirror.$language.val()); console.log("%s => %s", CodeMirror.highlightMode, CodeMirror.$language.val());
} }
@ -274,9 +309,11 @@ define([
var hjson = JSON.parse(shjson); var hjson = JSON.parse(shjson);
var remoteDoc = hjson.content; var remoteDoc = hjson.content;
DiffMd.apply(DiffMd.render(remoteDoc), $preview);
var highlightMode = hjson.highlightMode; var highlightMode = hjson.highlightMode;
if (highlightMode && highlightMode !== module.highlightMode) { if (highlightMode && highlightMode !== module.highlightMode) {
CodeMirror.setMode(highlightMode); CodeMirror.setMode(highlightMode, onModeChanged);
} }
CodeMirror.setValueAndCursor(oldDoc, remoteDoc, TextPatcher); CodeMirror.setValueAndCursor(oldDoc, remoteDoc, TextPatcher);

8
www/common/common-codemirror.js
Unescape Escape View File

@ -46,10 +46,11 @@ define([
}); });
editor.setValue(Messages.codeInitialState); editor.setValue(Messages.codeInitialState);
var setMode = exp.setMode = function (mode) { var setMode = exp.setMode = function (mode, cb) {
exp.highlightMode = mode; exp.highlightMode = mode;
if (mode === 'text') { if (mode === 'text') {
editor.setOption('mode', 'text'); editor.setOption('mode', 'text');
if (cb) { cb('text'); }
return; return;
} }
CMeditor.autoLoadMode(editor, mode); CMeditor.autoLoadMode(editor, mode);
@ -58,6 +59,7 @@ define([
var name = exp.$language.find('a[data-value="' + mode + '"]').text() || 'Mode'; var name = exp.$language.find('a[data-value="' + mode + '"]').text() || 'Mode';
exp.$language.setValue(name); exp.$language.setValue(name);
} }
if(cb) { cb(mode); }
}; };
var setTheme = exp.setTheme = (function () { var setTheme = exp.setTheme = (function () {
@ -131,7 +133,7 @@ define([
return text.trim(); return text.trim();
}; };
exp.configureLanguage = function (cb) { exp.configureLanguage = function (cb, onModeChanged) {
var options = []; var options = [];
Modes.list.forEach(function (l) { Modes.list.forEach(function (l) {
options.push({ options.push({
@ -151,7 +153,7 @@ define([
}; };
var $block = exp.$language = Cryptpad.createDropdown(dropdownConfig); var $block = exp.$language = Cryptpad.createDropdown(dropdownConfig);
$block.find('a').click(function () { $block.find('a').click(function () {
setMode($(this).attr('data-value'), $block); setMode($(this).attr('data-value'), onModeChanged);
onLocal(); onLocal();
}); });

5
www/drive/main.js
Unescape Escape View File

@ -2357,9 +2357,12 @@ define([
e.stopPropagation(); e.stopPropagation();
var path = $(this).data('path'); var path = $(this).data('path');
var onCreated = function (err, info) { var onCreated = function (err, info) {
if (err && err === E_OVER_LIMIT) { if (err === E_OVER_LIMIT) {
return void Cryptpad.alert(Messages.pinLimitDrive, null, true); return void Cryptpad.alert(Messages.pinLimitDrive, null, true);
} }
if (err) {
return void console.error("Unable to create the file", err);
}
module.newFolder = info.newPath; module.newFolder = info.newPath;
refresh(); refresh();
}; };

11
www/slide/main.js
Unescape Escape View File

@ -79,6 +79,17 @@ define([
var $print = $pad.contents().find('#print'); var $print = $pad.contents().find('#print');
var slideOptions = {}; var slideOptions = {};
$content.click(function (e) {
if (!e.target) { return; }
var $t = $(e.target);
if ($t.is('a') || $t.parents('a').length) {
e.preventDefault();
var $a = $t.is('a') ? $t : $t.parents('a').first();
var href = $a.attr('href');
window.open(href);
}
});
Slide.setModal(APP, $modal, $content, $pad, ifrw, slideOptions, initialState); Slide.setModal(APP, $modal, $content, $pad, ifrw, slideOptions, initialState);
var enterPresentationMode = function (shouldLog) { var enterPresentationMode = function (shouldLog) {

101
www/slide/slide.js
Unescape Escape View File

@ -1,15 +1,11 @@
define([ define([
'jquery', 'jquery',
'/bower_components/marked/marked.min.js', '/common/diffMarked.js',
'/bower_components/diff-dom/diffDOM.js' ],function ($, DiffMd) {
],function ($, Marked) { // Tasks list
var DiffDOM = window.diffDOM;
var renderer = new Marked.Renderer();
var checkedTaskItemPtn = /^\s*\[x\]\s*/; var checkedTaskItemPtn = /^\s*\[x\]\s*/;
var uncheckedTaskItemPtn = /^\s*\[ \]\s*/; var uncheckedTaskItemPtn = /^\s*\[ \]\s*/;
renderer.listitem = function (text) { DiffMd.renderer.listitem = function (text) {
var isCheckedTaskItem = checkedTaskItemPtn.test(text); var isCheckedTaskItem = checkedTaskItemPtn.test(text);
var isUncheckedTaskItem = uncheckedTaskItemPtn.test(text); var isUncheckedTaskItem = uncheckedTaskItemPtn.test(text);
if (isCheckedTaskItem) { if (isCheckedTaskItem) {
@ -24,10 +20,6 @@ define([
return '<li'+ cls + '>' + text + '</li>\n'; return '<li'+ cls + '>' + text + '</li>\n';
}; };
Marked.setOptions({
renderer: renderer
});
var Slide = { var Slide = {
index: 0, index: 0,
lastIndex: 0, lastIndex: 0,
@ -63,78 +55,6 @@ define([
} }
}; };
var forbiddenTags = Slide.forbiddenTags = [
'SCRIPT',
'IFRAME',
'OBJECT',
'APPLET',
'VIDEO',
'AUDIO',
];
var unsafeTag = function (info) {
if (['addAttribute', 'modifyAttribute'].indexOf(info.diff.action) !== -1) {
if (/^on/.test(info.diff.name)) {
console.log("Rejecting forbidden element attribute with name", info.diff.name);
return true;
}
}
if (['addElement', 'replaceElement'].indexOf(info.diff.action) !== -1) {
var msg = "Rejecting forbidden tag of type (%s)";
if (info.diff.element && forbiddenTags.indexOf(info.diff.element.nodeName) !== -1) {
console.log(msg, info.diff.element.nodeName);
return true;
} else if (info.diff.newValue && forbiddenTags.indexOf(info.diff.newValue.nodeName) !== -1) {
console.log("Replacing restricted element type (%s) with PRE", info.diff.newValue.nodeName);
info.diff.newValue.nodeName = 'PRE';
}
}
};
var domFromHTML = Slide.domFromHTML = function (html) {
return new DOMParser().parseFromString(html, "text/html");
};
var DD = new DiffDOM({
preDiffApply: function (info) {
if (unsafeTag(info)) { return true; }
}
});
var makeDiff = function (A, B) {
var Err;
var Els = [A, B].map(function (frag) {
if (typeof(frag) === 'object') {
if (!frag || (frag && !frag.body)) {
Err = "No body";
return;
}
var els = frag.body.querySelectorAll('#content');
if (els.length) {
return els[0];
}
}
Err = 'No candidate found';
});
if (Err) { return Err; }
var patch = DD.diff(Els[0], Els[1]);
return patch;
};
var slice = function (coll) {
return Array.prototype.slice.call(coll);
};
/* remove listeners from the DOM */
var removeListeners = function (root) {
slice(root.attributes).map(function (attr) {
if (/^on/.test(attr.name)) {
root.attributes.removeNamedItem(attr.name);
}
});
// all the way down
slice(root.children).forEach(removeListeners);
};
var updateFontSize = Slide.updateFontSize = function() { var updateFontSize = Slide.updateFontSize = function() {
// 20vh // 20vh
// 20 * 16 / 9vw // 20 * 16 / 9vw
@ -157,17 +77,10 @@ define([
if (typeof(Slide.content) !== 'string') { return; } if (typeof(Slide.content) !== 'string') { return; }
var c = Slide.content; var c = Slide.content;
var m = '<span class="slide-container"><span class="'+slideClass+'">'+Marked(c).replace(separatorReg, '</span></span><span class="slide-container"><span class="'+slideClass+'">')+'</span></span>'; var m = '<span class="slide-container"><span class="'+slideClass+'">'+DiffMd.render(c).replace(separatorReg, '</span></span><span class="slide-container"><span class="'+slideClass+'">')+'</span></span>';
var Dom = domFromHTML('<div id="content">' + m + '</div>'); DiffMd.apply(m, $content);
removeListeners(Dom.body);
var patch = makeDiff(domFromHTML($content[0].outerHTML), Dom);
if (typeof(patch) === 'string') {
$content.html(m);
} else {
DD.apply($content[0], patch);
}
var length = getNumberOfSlides(); var length = getNumberOfSlides();
$modal.find('style.slideStyle').remove(); $modal.find('style.slideStyle').remove();
if (options.style && Slide.shown) { if (options.style && Slide.shown) {
@ -185,7 +98,7 @@ define([
} }
}); });
$content.removeClass('transition'); $content.removeClass('transition');
if (options.transition) { if (options.transition || typeof(options.transition) === "undefined") {
$content.addClass('transition'); $content.addClass('transition');
} }
//$content.find('.' + slideClass).hide(); //$content.find('.' + slideClass).hide();

Write Preview
Loading…
Cancel
Save