minor changes to hard-wrapping PR

This commit is contained in:
ansuz 2022-04-11 15:06:15 +05:30
parent 73f24cb732
commit 7ce8191232
5 changed files with 55 additions and 38 deletions

View File

@ -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 {

View File

@ -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;
});
});

View File

@ -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",

View File

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

View File

@ -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);
}