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

Add a markdown toolbar to help with the markdown syntax

Browse Source
This commit is contained in:
yflory
2017-11-27 12:17:35 +01:00
parent 9795ac32cb
commit b0f553e9ea
11 changed files with 300 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
www/code/app-code.less
View File

@@ -17,21 +17,27 @@
max-height: 100%;
min-height: auto;
.CodeMirror {
display: inline-block;
#cp-app-code-container {
display: inline-flex;
flex-flow: column;
height: 100%;
min-height: 100%;
width: 50%;
min-width: 20%;
max-width: 80%;
resize: horizontal;
font-size: initial;
overflow: hidden;
&.cp-app-code-fullpage {
max-width: 100%;
resize: none;
flex: 1;
}
}
.CodeMirror.cp-app-code-fullpage {
//min-width: 100%;
max-width: 100%;
resize: none;
.CodeMirror {
flex: 1;
font-size: initial;
width: 100%;
}
.CodeMirror-focused .cm-matchhighlight {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
@@ -68,6 +74,7 @@
max-height:50vh;
}
}
.markdown_main();
}
#cp-app-code-preview-content {

4
www/code/inner.html
View File

@@ -12,7 +12,9 @@
<body class="cp-app-code">
<div id="cme_toolbox" class="cp-toolbar-container"></div>
<div id="cp-app-code-editor">
<textarea id="editor1" name="editor1"></textarea>
<div id="cp-app-code-container">
<textarea id="editor1" name="editor1"></textarea>
</div>
<div id="cp-app-code-preview">
<div id="cp-app-code-preview-content"></div>
</div>

23
www/code/inner.js
View File

@@ -67,10 +67,13 @@ define([
var $previewContainer = $('#cp-app-code-preview');
var $preview = $('#cp-app-code-preview-content');
var $editorContainer = $('#cp-app-code-editor');
var $codeMirrorContainer = $('#cp-app-code-container');
var $codeMirror = $('.CodeMirror');
var $previewButton = framework._.sfCommon.createButton(null, true);
var markdownTb = framework._.sfCommon.createMarkdownToolbar(editor);
$codeMirrorContainer.prepend(markdownTb.toolbar);
var $previewButton = framework._.sfCommon.createButton(null, true);
var forceDrawPreview = function () {
try {
DiffMd.apply(DiffMd.render(editor.getValue()), $preview);
@@ -101,20 +104,21 @@ define([
$previewContainer.toggle();
if ($previewContainer.is(':visible')) {
forceDrawPreview();
$codeMirror.removeClass('cp-app-code-fullpage');
$codeMirrorContainer.removeClass('cp-app-code-fullpage');
$previewButton.addClass('cp-toolbar-button-active');
framework._.sfCommon.setPadAttribute('previewMode', true, function (e) {
if (e) { return console.log(e); }
});
} else {
$codeMirror.addClass('cp-app-code-fullpage');
$codeMirrorContainer.addClass('cp-app-code-fullpage');
$previewButton.removeClass('cp-toolbar-button-active');
framework._.sfCommon.setPadAttribute('previewMode', false, function (e) {
if (e) { return console.log(e); }
});
}
});
framework._.toolbar.$rightside.append($previewButton);
framework._.toolbar.$rightside.append($previewButton).append(markdownTb.button);
$preview.click(function (e) {
if (!e.target) { return; }
@@ -135,19 +139,20 @@ define([
if (data !== false) {
$previewContainer.show();
$previewButton.addClass('cp-toolbar-button-active');
$codeMirror.removeClass('cp-app-code-fullpage');
$codeMirrorContainer.removeClass('cp-app-code-fullpage');
if (isPresentMode) {
$editorContainer.addClass('cp-app-code-present');
}
}
});
return;
markdownTb.setState(true);
}
$editorContainer.removeClass('cp-app-code-present');
$previewButton.hide();
$previewContainer.hide();
$previewButton.removeClass('active');
$codeMirror.addClass('cp-app-code-fullpage');
$codeMirrorContainer.addClass('cp-app-code-fullpage');
markdownTb.setState(true);
};
var isVisible = function () {
@@ -164,7 +169,7 @@ define([
splitter.css('top', $preview.scrollTop() + 'px');
});
var $target = $('.CodeMirror');
var $target = $codeMirrorContainer;
splitter.on('mousedown', function (e) {
e.preventDefault();
@@ -372,7 +377,7 @@ define([
SFCommon.create(waitFor(function (c) { common = c; }));
}).nThen(function () {
CodeMirror = common.initCodeMirrorApp(null, CMeditor);
$('.CodeMirror').addClass('cp-app-code-fullpage');
$('#cp-app-code-container').addClass('cp-app-code-fullpage');
editor = CodeMirror.editor;
}).nThen(waitFor());