web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add a preview of the markdown content in the code editor

Browse Source
This commit is contained in:
yflory
2017-05-18 12:16:26 +02:00
parent b72415b56b
commit 56bcdff890
6 changed files with 123 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
www/code/inner.html
View File

@@ -32,32 +32,63 @@
<script src="/bower_components/codemirror/addon/fold/comment-fold.js"></script>
<script src="/bower_components/codemirror/addon/display/placeholder.js"></script>
<style>
html, body{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
body {
display: flex;
flex-flow: column;
}
.CodeMirror {
height: 100%;
}
.CodeMirror-focused .cm-matchhighlight {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
background-position: bottom;
background-repeat: repeat-x;
}
html, body{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
body {
display: flex;
flex-flow: column;
max-height: 100%;
min-height: auto;
}
.CodeMirror {
display: inline-block;
height: 100%;
width: 50%;
min-width: 20%;
max-width: 80%;
resize: horizontal;
}
.CodeMirror-focused .cm-matchhighlight {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
background-position: bottom;
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>
</head>
<body>
<div id="cme_toolbox" class="toolbar-container"></div>
<textarea id="editor1" name="editor1"></textarea>
<div id="editorContainer">
<textarea id="editor1" name="editor1"></textarea>
<div id="previewContainer"><div id="preview"></div></div>
</div>
</body>
</html>

49
www/code/main.js
View File

@@ -8,7 +8,9 @@ define([
'/bower_components/chainpad-json-validator/json-ot.js',
'/common/cryptpad-common.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 module = window.APP = {
@@ -25,6 +27,18 @@ define([
var toolbar;
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 readOnly = secret.keys && !secret.keys.editKeyStr;
@@ -102,6 +116,8 @@ define([
editor.save();
DiffMd.apply(DiffMd.render(editor.getValue()), $preview);
var textValue = canonicalize(CodeMirror.$textarea.val());
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) {
UserList = Cryptpad.createUserList(info, config.onLocal, Cryptget, Cryptpad);
@@ -193,8 +217,19 @@ define([
var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
$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) {
CodeMirror.configureLanguage(CodeMirror.configureTheme);
CodeMirror.configureLanguage(CodeMirror.configureTheme, onModeChanged);
}
else {
CodeMirror.configureTheme();
@@ -231,12 +266,12 @@ define([
newDoc = hjson.content;
if (hjson.highlightMode) {
CodeMirror.setMode(hjson.highlightMode);
CodeMirror.setMode(hjson.highlightMode, onModeChanged);
}
}
if (!CodeMirror.highlightMode) {
CodeMirror.setMode('javascript');
CodeMirror.setMode('markdown', onModeChanged);
console.log("%s => %s", CodeMirror.highlightMode, CodeMirror.$language.val());
}
@@ -274,9 +309,11 @@ define([
var hjson = JSON.parse(shjson);
var remoteDoc = hjson.content;
DiffMd.apply(DiffMd.render(remoteDoc), $preview);
var highlightMode = hjson.highlightMode;
if (highlightMode && highlightMode !== module.highlightMode) {
CodeMirror.setMode(highlightMode);
CodeMirror.setMode(highlightMode, onModeChanged);
}
CodeMirror.setValueAndCursor(oldDoc, remoteDoc, TextPatcher);