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

Add a markdown toolbar to help with the markdown syntax

pull/1/head
yflory 2017-11-27 12:17:35 +01:00
parent 9795ac32cb
commit b0f553e9ea
11 changed files with 300 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
customize.dist/src/less2/include/markdown.less
View File

@ -23,5 +23,15 @@
}
}
.markdown_main() {
blockquote {
background: #e5e5e5;
padding: 10px;
border-left: 3px solid #999;
padding-right: 0;
p { margin: 0; }
blockquote { margin: 0; }
}
}
// todo ul, ol

70
customize.dist/src/less2/include/toolbar.less
View File

@ -23,6 +23,33 @@
display: flex;
}
.toolbar_button {
height: @toolbar_line-height;
box-sizing: border-box;
padding: 3px 10px;
margin: 0;
transition: all 0.15s;
.tools_unselectable();
&.cp-toolbar-hidden {
display: none;
}
.cp-toolbar-drawer-element {
display: none;
}
// Bootstrap 4 colors (btn-secondary)
border: 1px solid transparent;
color: inherit;
font: @toolbar_button-font;
* {
color: inherit;
font: @toolbar_button-font;
}
background: transparent;
&:hover {
background-color: rgba(50,50,50,0.3);
}
}
.cp-toolbar-userlist-drawer {
background-color: @colortheme_default-bg;
font: @colortheme_app-font-size @colortheme_font;
@ -143,6 +170,20 @@
}
.addToolbarColors (@color, @bg-color, @barWidth: 600px) {
.cp-markdown-toolbar {
height: @toolbar_line-height;
background-color: lighten(@bg-color, 20%);
button {
outline: 0;
color: @color;
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
background-color: lighten(@bgcolor, 8%);
}
&.cp-markdown-help { float: right; }
}
}
.cp-toolbar-userlist-drawer {
background-color: @bgcolor;
color: @color;
@ -282,7 +323,6 @@
.addToolbarColors(@color, @bgcolor);
}
.cp-toolbar {
* {
outline-width: 0;
@ -328,28 +368,7 @@
}
button {
transition: all 0.15s;
.tools_unselectable();
&.cp-toolbar-hidden {
display: none;
}
.cp-toolbar-drawer-element {
display: none;
}
// Bootstrap 4 colors (btn-secondary)
border: 1px solid transparent;
color: inherit;
font: @toolbar_button-font;
* {
color: inherit;
font: @toolbar_button-font;
}
}
.cp-toolbar-rightside button, .cp-toolbar-leftside button {
background: transparent;
&:hover {
background-color: rgba(50,50,50,0.3);
}
.toolbar_button;
}
.cp-toolbar-limit {
@ -373,13 +392,12 @@
white-space: normal;
}
button, select {
/*button, select {
height: @toolbar_line-height;
box-sizing: border-box;
padding: 3px 10px;
margin: 0;
}
}*/
.cp-toolbar-rightside-button {
float: right;

16
customize.dist/translations/messages.fr.js
View File

@ -559,6 +559,22 @@ define(function () {
// general warnings
out.warn_notPinned = "Ce pad n'est stocké dans aucun CryptDrive. Il va expirer après 3 mois d'inactivité. <a href='/about.html#pinning'>En savoir plus...</a>";
// markdown toolbar
out.mdToolbar_button = "Afficher ou cacher la barre d'outils Markdown";
out.mdToolbar_defaultText = "Votre texte ici";
out.mdToolbar_help = "Aide";
out.mdToolbar_tutorial = "https://blog.wax-o.com/2014/04/tutoriel-un-guide-pour-bien-commencer-avec-markdown/";
out.mdToolbar_bold = "Gras";
out.mdToolbar_italic = "Italique";
out.mdToolbar_strikethrough = "Barré";
out.mdToolbar_heading = "Titre";
out.mdToolbar_link = "Lien";
out.mdToolbar_quote = "Citation";
out.mdToolbar_nlist = "Liste ordonnée";
out.mdToolbar_list = "Liste à puces";
out.mdToolbar_check = "Liste de tâches";
out.mdToolbar_code = "Code";
// index.html
//about.html

16
customize.dist/translations/messages.js
View File

@ -564,6 +564,22 @@ define(function () {
// general warnings
out.warn_notPinned = "This pad is not in anyone's CryptDrive. It will expire after 3 months. <a href='/about.html#pinning'>Learn more...</a>";
// markdown toolbar
out.mdToolbar_button = "Show or hide the Markdown toolbar";
out.mdToolbar_defaultText = "Your text here";
out.mdToolbar_help = "Help";
out.mdToolbar_tutorial = "http://www.markdowntutorial.com/";
out.mdToolbar_bold = "Bold";
out.mdToolbar_italic = "Italic";
out.mdToolbar_strikethrough = "Strikethrough";
out.mdToolbar_heading = "Heading";
out.mdToolbar_link = "Link";
out.mdToolbar_quote = "Quote";
out.mdToolbar_nlist = "Ordered list";
out.mdToolbar_list = "Bullet list";
out.mdToolbar_check = "Task list";
out.mdToolbar_code = "Code";
// index.html

1
www/bounce/main.js
View File

@ -6,5 +6,6 @@ define([], function () {
}
var bounceTo = decodeURIComponent(window.location.hash.slice(1));
if (!bounceTo) { return; }
window.opener = null;
window.location.href = bounceTo;
});

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());

172
www/common/common-ui-elements.js
View File

@ -227,6 +227,27 @@ define([
.click(common.prepareFeedback(type))
.click(function () { UIElements.updateTags(common, null); });
break;
case 'toggle':
button = $('<button>', {
'class': 'fa fa-caret-down',
})
.click(common.prepareFeedback(type));
window.setTimeout(function () {
button.attr('title', data.title);
});
var updateIcon = function (isVisible) {
button.removeClass('fa-caret-down').removeClass('fa-caret-up');
if (!isVisible) { button.addClass('fa-caret-down'); }
else { button.addClass('fa-caret-up'); }
};
button.click(function () {
data.element.toggle();
var isVisible = data.element.is(':visible');
if (callback) { callback(isVisible); }
updateIcon(isVisible);
});
updateIcon(data.element.is(':visible'));
break;
default:
button = $('<button>', {
'class': "fa fa-question",
@ -240,6 +261,157 @@ define([
return button;
};
var createMdToolbar = function (editor) {
var $toolbar = $('<div>', {
'class': 'cp-markdown-toolbar'
});
var clean = function (str) {
return str.replace(/^(\n)+/, '').replace(/(\n)+$/, '');
};
var actions = {
'bold': {
expr: '**{0}**',
icon: 'fa-bold'
},
'italic': {
expr: '_{0}_',
icon: 'fa-italic'
},
'strikethrough': {
expr: '~~{0}~~',
icon: 'fa-strikethrough'
},
'heading': {
apply: function (str) {
return '\n'+clean(str).split('\n').map(function (line) {
return '# '+line;
}).join('\n')+'\n';
},
icon: 'fa-header'
},
'link': {
expr: '[{0}](http://)',
icon: 'fa-link'
},
'quote': {
apply: function (str) {
return '\n\n'+str.split('\n').map(function (line) {
return '> '+line;
}).join('\n')+'\n\n';
},
icon: 'fa-quote-right'
},
'nlist': {
apply: function (str) {
return '\n'+clean(str).split('\n').map(function (line) {
return '1. '+line;
}).join('\n')+'\n';
},
icon: 'fa-list-ol'
},
'list': {
apply: function (str) {
return '\n'+clean(str).split('\n').map(function (line) {
return '* '+line;
}).join('\n')+'\n';
},
icon: 'fa-list-ul'
},
'check': {
apply: function (str) {
return '\n' + clean(str).split('\n').map(function (line) {
return '* [ ] ' + line;
}).join('\n') + '\n';
},
icon: 'fa-check-square-o'
},
'code': {
apply: function (str) {
if (str.indexOf('\n') !== -1) {
return '\n```\n' + clean(str) + '\n```\n';
}
return '`' + str + '`';
},
icon: 'fa-code'
}
};
var onClick = function () {
var type = $(this).attr('data-type');
var texts = editor.getSelections();
var newTexts = texts.map(function (str) {
str = str || Messages.mdToolbar_defaultText;
if (actions[type].apply) {
return actions[type].apply(str);
}
return actions[type].expr.replace('{0}', str);
});
editor.replaceSelections(newTexts, 'around');
};
for (var k in actions) {
$('<button>', {
'data-type': k,
'class': 'fa ' + actions[k].icon,
title: Messages['mdToolbar_' + k] || k
}).click(onClick).appendTo($toolbar);
}
$('<button>', {
'class': 'fa fa-question cp-markdown-help',
title: Messages.mdToolbar_help
}).click(function () {
var href = Messages.mdToolbar_tutorial;
var bounceHref = window.location.origin + '/bounce/#' + encodeURIComponent(href);
window.open(bounceHref);
}).appendTo($toolbar);
return $toolbar;
};
UIElements.createMarkdownToolbar = function (common, editor) {
var $toolbar = createMdToolbar(editor);
var cfg = {
title: Messages.mdToolbar_button,
element: $toolbar
};
var onClick = function (visible) {
common.setAttribute(['general', 'markdown-help'], visible, function (e) {
if (e) { return void console.error(e); }
});
};
var $toolbarButton = common.createButton('toggle', true, cfg, onClick);
common.getAttribute(['general', 'markdown-help'], function (e, data) {
if (e) { return void console.error(e); }
if (data === true && $toolbarButton) {
$toolbarButton.click();
}
});
// setState provides the ability to disable the toolbar and the button in case we don't
// have the markdown editor available (in code we can switch mode, in poll we can publish)
var setState = function (state) {
if (!state) {
$toolbar.hide();
$toolbarButton.hide();
return;
}
common.getAttribute(['general', 'markdown-help'], function (e, data) {
if (e) { return void console.error(e); }
if (data === true && $toolbarButton) {
// Show the toolbar using the button to make sure the icon in the button is
// correct (caret-down / caret-up)
$toolbar.hide();
$toolbarButton.click();
return;
}
$toolbar.show();
$toolbarButton.click();
});
$toolbarButton.show();
};
return {
toolbar: $toolbar,
button: $toolbarButton,
setState: setState
};
};
// Avatars
// Enable mediatags

1
www/common/sframe-common.js
View File

@ -87,6 +87,7 @@ define([
funcs.createUsageBar = callWithCommon(UIElements.createUsageBar);
funcs.updateTags = callWithCommon(UIElements.updateTags);
funcs.createLanguageSelector = callWithCommon(UIElements.createLanguageSelector);
funcs.createMarkdownToolbar = callWithCommon(UIElements.createMarkdownToolbar);
// Thumb
funcs.displayThumbnail = callWithCommon(Thumb.displayThumbnail);

36
www/pad/inner.js
View File

@ -263,38 +263,20 @@ define([
var addToolbarHideBtn = function (framework, $bar) {
// Expand / collapse the toolbar
var $collapse = framework._.sfCommon.createButton(null, true);
$collapse.removeClass('fa-question');
var updateIcon = function (isVisible) {
$collapse.removeClass('fa-caret-down').removeClass('fa-caret-up');
if (!isVisible) {
framework.feedback('HIDETOOLBAR_PAD');
$collapse.addClass('fa-caret-down');
}
else {
framework.feedback('SHOWTOOLBAR_PAD');
$collapse.addClass('fa-caret-up');
}
var cfg = {
element: $bar.find('.cke_toolbox_main')
};
updateIcon();
$collapse.click(function () {
var onClick = function (visible) {
$(window).trigger('resize');
$('.cke_toolbox_main').toggle();
$(window).trigger('cryptpad-ck-toolbar');
var isVisible = $bar.find('.cke_toolbox_main').is(':visible');
framework._.sfCommon.setAttribute(['pad', 'showToolbar'], isVisible);
updateIcon(isVisible);
});
framework._.sfCommon.setAttribute(['pad', 'showToolbar'], visible);
};
framework._.sfCommon.getAttribute(['pad', 'showToolbar'], function (err, data) {
if (typeof(data) === "undefined" || data) {
$('.cke_toolbox_main').show();
updateIcon(true);
return;
}
$('.cke_toolbox_main').hide();
updateIcon(false);
if (typeof(data) === "undefined" || data) { $('.cke_toolbox_main').show(); }
else { $('.cke_toolbox_main').hide(); }
var $collapse = framework._.sfCommon.createButton('toggle', true, cfg, onClick);
framework._.toolbar.$rightside.append($collapse);
});
framework._.toolbar.$rightside.append($collapse);
};
var displayMediaTags = function (framework, dom, mediaTagMap) {