mirror of
https://github.com/cryptpad/cryptpad.git
synced 2026-09-14 11:05:41 +05:00
minor changes to hard-wrapping PR
This commit is contained in:
parent
73f24cb732
commit
7ce8191232
@ -7,6 +7,12 @@
|
||||
}
|
||||
|
||||
& {
|
||||
input[type="number"] {
|
||||
&[disabled] {
|
||||
color: @cp_forms-disabled !important;
|
||||
}
|
||||
}
|
||||
|
||||
@alertify_padding-base: @variables_padding;
|
||||
|
||||
input:not(.numInput):not(.form-control):not([type="checkbox"]), textarea, div.cp-textarea {
|
||||
|
||||
@ -159,34 +159,24 @@ define([
|
||||
/**
|
||||
* Wraps a text based on column set by user in setting.
|
||||
* For example, if the number of characters exceed the value set by user,
|
||||
* then it will wrap the text such that its within the character set by user
|
||||
* then it will wrap the text such that its within the character set by user
|
||||
*/
|
||||
module.wrapParagraph = function (editor, CodeMirror, metadataMgr) {
|
||||
var wait, options = { column: 60 }, changing = false;
|
||||
var data = metadataMgr.getPrivateData().settings;
|
||||
if (!data.codemirror) { return; }
|
||||
var options = { column: 60 };
|
||||
var column = data.codemirror.hardWrapMaxWidth;
|
||||
var hardWrapEnabled = data.codemirror.hardWrapMaxWidthEnabled;
|
||||
// FIXME a reload of codemirror documents is required
|
||||
// in order for changes in settings to be applied
|
||||
if (!hardWrapEnabled) { return; }
|
||||
options.column = typeof(column) === 'number' && !isNaN(column) ? column : 60;
|
||||
|
||||
/**
|
||||
* Need to ensure that the codemirror is not a null object
|
||||
*/
|
||||
if (data.codemirror) {
|
||||
var column = data.codemirror.hardWrapMaxWidth;
|
||||
var hardWrapEnabled = data.codemirror.hardWrapMaxWidthEnabled;
|
||||
options.column = typeof(column) === 'number' && !isNaN(column) ? column : 60;
|
||||
var wrap = Util.throttle(function (cm, change) {
|
||||
cm.wrapParagraphsInRange(change.from, CodeMirror.CodeMirror.changeEnd(change), options);
|
||||
}, 200);
|
||||
|
||||
if (hardWrapEnabled) {
|
||||
editor.on('change', (cm, change) => {
|
||||
if (changing) { return; }
|
||||
|
||||
clearTimeout(wait);
|
||||
|
||||
wait = setTimeout(function () {
|
||||
changing = true;
|
||||
cm.wrapParagraphsInRange(change.from, CodeMirror.CodeMirror.changeEnd(change), options);
|
||||
changing = false;
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
}
|
||||
editor.on('change', wrap);
|
||||
};
|
||||
|
||||
module.mkIndentSettings = function (editor, metadataMgr) {
|
||||
@ -647,4 +637,4 @@ define([
|
||||
};
|
||||
|
||||
return module;
|
||||
});
|
||||
});
|
||||
|
||||
@ -423,8 +423,6 @@
|
||||
"settings_codeIndentation": "Code editor indentation (spaces)",
|
||||
"settings_codeUseTabs": "Indent using tabs (instead of spaces)",
|
||||
"settings_codeFontSize": "Font size in the code editor",
|
||||
"settings_codeMaxWidth": "Max width before code wraps to next line",
|
||||
"settings_codeMaxWidthDescription": "If checked, this feature is enabled. You can change the width at which the line will wrap. If not checked, this feature is disabled, so the input will be disabled as well.",
|
||||
"settings_padWidth": "Editor's maximum width",
|
||||
"settings_padWidthHint": "Switch between page mode (default) that limits the width of the text editor, and using the full width of the screen.",
|
||||
"settings_padWidthLabel": "Reduce the editor's width",
|
||||
|
||||
@ -21,6 +21,11 @@
|
||||
div.alert {
|
||||
font-size: @colortheme_app-font-size;
|
||||
padding: 10px;
|
||||
&.alert-warning {
|
||||
padding: 5px;
|
||||
margin-top: 15px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.export_main();
|
||||
|
||||
@ -1570,25 +1570,38 @@ define([
|
||||
return $div;
|
||||
};
|
||||
|
||||
|
||||
Messages.settings_codeMaxWidth = "Max width before code wraps to next line"; // XXX
|
||||
Messages.settings_codeMaxWidthDescription = "If checked, this feature is enabled. You can change the width at which the line will wrap. If not checked, this feature is disabled, so the input will be disabled as well."; // XXX
|
||||
Messages.ui_experimental = "This feature is considered experimental."; // XXX
|
||||
|
||||
create['code-max-width'] = function () {
|
||||
var key = 'hardWrapMaxWidth';
|
||||
var hardWrapMaxWidthEnabledKey = `${key}Enabled`;
|
||||
var defaultInitialMaxWidth = 60;
|
||||
|
||||
var $div = $('<div>', {
|
||||
'class': 'cp-settings-code-max-width cp-sidebarlayout-element'
|
||||
});
|
||||
var cbox = UI.createCheckbox('cp-settings-code-max-width');
|
||||
var container = h('span.cp-sidebarlayout-input-block', [
|
||||
cbox,
|
||||
]);
|
||||
|
||||
$('<label>').text(Messages.settings_codeMaxWidth).appendTo($div);
|
||||
$('<span>', {'class': 'cp-sidebarlayout-description'})
|
||||
.text(Messages.settings_codeMaxWidthDescription).appendTo($div);
|
||||
var experimental = h('div.alert.alert-warning', [
|
||||
'⚠️ ',
|
||||
Messages.ui_experimental,
|
||||
]);
|
||||
|
||||
var $container = $('<span>', {
|
||||
'class': 'cp-sidebarlayout-input-block'
|
||||
}).appendTo($div);
|
||||
var div = h('div.cp-settings-code-max-width.cp-sidebarlayout-element', [
|
||||
h('span.cp-sidebarlayout-description', [
|
||||
h('label', [Messages.settings_codeMaxWidth]),
|
||||
experimental,
|
||||
Messages.settings_codeMaxWidthDescription
|
||||
]),
|
||||
container,
|
||||
]);
|
||||
|
||||
var $cbox = $(UI.createCheckbox('cp-settings-code-max-width'));
|
||||
$cbox.appendTo($container);
|
||||
var $div= $(div);
|
||||
var $container = $(container);
|
||||
var $cbox = $(cbox);
|
||||
|
||||
var $input = $('<input>', {
|
||||
'min': defaultInitialMaxWidth,
|
||||
@ -1596,6 +1609,11 @@ define([
|
||||
})
|
||||
.on('change', function () {
|
||||
var val = parseInt($input.val());
|
||||
if (val < defaultInitialMaxWidth) {
|
||||
$input.val(defaultInitialMaxWidth);
|
||||
return console.log(`max-width cannot be less than ${defaultInitialMaxWidth}`);
|
||||
}
|
||||
|
||||
if (!isNaN(val) && typeof (val) !== 'number') { return; }
|
||||
common.setAttribute(['codemirror', key], val);
|
||||
}).appendTo($container);
|
||||
@ -1603,7 +1621,7 @@ define([
|
||||
$cbox.find('input').change(
|
||||
function () {
|
||||
// If enable hard wrap max width is enabled, then disabled=false
|
||||
// otherwise, disabled=true
|
||||
// otherwise, disabled=true
|
||||
$input.attr('disabled', !this.checked);
|
||||
common.setAttribute(['codemirror', hardWrapMaxWidthEnabledKey], this.checked);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user