1berry/webmin
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve design by factoring out HTML editor related subs into a lib

Browse Source
This commit is contained in:
iliajie 2023-06-16 15:01:34 +03:00
parent 61e80f5d9f
commit a353a11653
No known key found for this signature in database
GPG Key ID: 121E166DD9C821AB
3 changed files with 215 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

209
html-editor-lib.pl Normal file
View File

@ -0,0 +1,209 @@
# html-editor-lib.pl
# Quill HTML editor related subs
sub html_editor_load_bundle
{
my $wp = &get_webprefix();
my $ts = &get_webmin_version();
$ts =~ s/[.-]+//g;
my $html_editor_load_scripts =
<<EOF;
<link href="$wp/unauthenticated/css/quill.min.css?$ts" rel="stylesheet">
<script type="text/javascript" src="$wp/unauthenticated/js/quill.min.js?$ts"></script>
EOF
return $html_editor_load_scripts;
}
sub html_editor_template
{
my ($opts) = @_;
$opts ||= {};
$html_editor_template =
<<EOF;
$opts->{'before'}->{'container'}
<div class="ql-compose-container $opts->{'class'}->{'container'}">
$opts->{'before'}->{'editor'}
<div data-composer="html" class="ql-compose ql-container $opts->{'class'}->{'editor'}"></div>
$opts->{'after'}->{'editor'}
</div>
$opts->{'after'}->{'container'}
EOF
return $html_editor_template;
}
sub html_editor_styles
{
my ($type) = @_;
# HTML editor toolbar styles
if ($type eq 'toolbar') {
return
<<EOF;
<style>
.ql-compose-container .ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-compose-container .ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: '$text{'editor_fontfamily_default'}';
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="0.75em"]::before,
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="0.75em"]::before {
content: '$text{'editor_font_small'}';
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="0.75em"]::before {
font-size: 0.75em;
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '$text{'editor_font_normal'}';
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item::before {
font-size: 1em;
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="1.15em"]::before,
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1.15em"]::before {
content: '$text{'editor_font_medium'}';
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1.15em"]::before {
font-size: 1.15em;
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="1.3em"]::before,
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1.3em"]::before {
content: '$text{'editor_font_large'}';
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1.3em"]::before {
font-size: 1.3em;
}
</style>
EOF
}
}
sub html_editor_parts
{
my ($part, $type) = @_;
# Editor toolbars
if ($part eq 'toolbar') {
# Toolbar for mail editor
if ($type eq 'mail') {
return
<<EOF;
[
[{'font': [false, 'monospace']},
{'size': ['0.75em', false, "1.15em", '1.3em']}],
['bold', 'italic', 'underline', 'strike'],
[{'color': []}, {'background': []}],
[{'align': []}],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'indent': '-1'}, {'indent': '+1'}],
['blockquote', 'code-block'],
['link', 'image'],
[{'direction': 'rtl'}],
['clean']
]
EOF
}
}
}
sub html_editor_init_script
{
my ($type, $opts) = @_;
$opts ||= {};
my $html_editor_init_script =
<<EOF;
<script type="text/javascript">
const mail_init_editor = function() {
const targ = document.querySelector('[name="body"]'),
qs = Quill.import('attributors/style/size'),
qf = Quill.import('attributors/style/font'),
escapeHTML_ = function(htmlStr) {
return htmlStr.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#39;");
},
isMac = navigator.userAgent.toLowerCase().includes('mac');
qs.whitelist = ["0.75em", "1.15em", "1.3em"];
Quill.register(qs, true);
qf.whitelist = ["monospace"],
Quill.register(qf, true);
// Whitelist attrs
const pc = Quill.import('parchment'),
pc_attrs_whitelist =
[
'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
'border', 'border-right', 'border-left',
'font-size', 'font-family', 'href', 'target',
]
pc_attrs_whitelist.forEach(function(attr) {
Quill.register(new pc.Attributor.Style(attr, attr, {}));
});
const editor = new Quill('.ql-container', {
modules: {
formula: false,
syntax: false,
imageDrop: true,
imageResize: {
modules: [
'DisplaySize',
'Resize',
],
},
toolbar: @{[&html_editor_parts('toolbar', $type)]},
},
bounds: '.ql-compose-container',
theme: 'snow'
});
// Google Mail editor like keybind for quoting
editor.keyboard.addBinding({
key: '9',
shiftKey: true,
ctrlKey: !isMac,
metaKey: isMac,
format: ['blockquote'],
}, function(range, context) {
this.quill.format('blockquote', false);
});
editor.keyboard.addBinding({
key: '9',
shiftKey: true,
ctrlKey: !isMac,
metaKey: isMac,
}, function(range, context) {
this.quill.format('blockquote', true);
});
editor.on('text-change', function() {
targ.value = escapeHTML_(editor.root.innerHTML + "<br><br>");
let quoteHTML = String(),
err = false;
try {
quoteHTML =
document.querySelector('#quote-mail-iframe')
.contentWindow.document
.querySelector('.iframe_quote[contenteditable]#webmin-iframe-quote').innerHTML;
} catch(e) {
err = true;
}
if (!err) {
targ.value = targ.value + escapeHTML_(quoteHTML);
}
});
editor.pasteHTML(targ.value);
// Prevent loosing focus for toolbar selects (color picker, font select and etc)
editor.getModule("toolbar").container.addEventListener("mousedown", (e) => {
e.preventDefault();
});
}
@{[$opts->{'load'} ? 'mail_init_editor()' : '']}
</script>
EOF
return $html_editor_init_script;
}
1;

168
mailboxes/reply_mail.cgi
View File

@ -2,6 +2,7 @@
# Display a form for replying to or composing an email
require './mailboxes-lib.pl';
require '../html-editor-lib.pl';
&ReadParse();
&can_user($in{'user'}) || &error($text{'mail_ecannot'});
@uinfo = &get_mail_user($in{'user'});
@ -448,174 +449,15 @@ my $html_editor_styles;
my $html_editor_scripts;
my $html_editor_load_scripts;
if ($html_edit) {
$html_editor_template = <<EOF;
<div class="ql-compose-container">
<div data-composer="html" class="ql-compose ql-container ql-container-toolbar-bottom"></div>
$html_editor_quote
</div>
EOF
$html_editor_styles = <<EOF;
<style>
.ql-compose-container .ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-compose-container .ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: '$text{'editor_fontfamily_default'}';
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="0.75em"]::before,
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="0.75em"]::before {
content: '$text{'editor_font_small'}';
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="0.75em"]::before {
font-size: 0.75em;
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '$text{'editor_font_normal'}';
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item::before {
font-size: 1em;
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="1.15em"]::before,
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1.15em"]::before {
content: '$text{'editor_font_medium'}';
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1.15em"]::before {
font-size: 1.15em;
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="1.3em"]::before,
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1.3em"]::before {
content: '$text{'editor_font_large'}';
}
.ql-compose-container .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1.3em"]::before {
font-size: 1.3em;
}
</style>
EOF
$html_editor_template = &html_editor_template({after => {editor => $html_editor_quote}});
$html_editor_styles = &html_editor_styles('toolbar');
my %tinfo = &get_theme_info($current_theme);
if (!$tinfo{'spa'}) {
# Load HTML editor files
my $ts = &get_webmin_version();
$ts =~ s/[.-]+//g;
$html_editor_load_scripts = <<EOF;
<link href="/unauthenticated/css/quill.min.css?$ts" rel="stylesheet">
<script type="text/javascript" src="/unauthenticated/js/quill.min.js?$ts"></script>
EOF
$html_editor_load_scripts = &html_editor_load_bundle();
}
# HTML editor init
$html_editor_scripts = <<EOF;
<script type="text/javascript">
const mail_init_editor = function() {
const targ = document.querySelector('[name="body"]'),
qs = Quill.import('attributors/style/size'),
qf = Quill.import('attributors/style/font'),
escapeHTML_ = function(htmlStr) {
return htmlStr.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#39;");
},
isMac = navigator.userAgent.toLowerCase().includes('mac');
qs.whitelist = ["0.75em", "1.15em", "1.3em"];
Quill.register(qs, true);
qf.whitelist = ["monospace"],
Quill.register(qf, true);
// Whitelist attrs
const pc = Quill.import('parchment'),
pc_attrs_whitelist =
[
'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
'border', 'border-right', 'border-left',
'font-size', 'font-family', 'href', 'target',
]
pc_attrs_whitelist.forEach(function(attr) {
Quill.register(new pc.Attributor.Style(attr, attr, {}));
});
const editor = new Quill('.ql-container', {
modules: {
formula: false,
syntax: false,
imageDrop: true,
imageResize: {
modules: [
'DisplaySize',
'Resize',
],
},
toolbar:
[
[{ 'font': [false, 'monospace'] },
{ 'size': ['0.75em', false, "1.15em", '1.3em'] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'color': [] }, { 'background': [] }],
[{ 'align': [] }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
['blockquote', 'code-block'],
['link', 'image'],
[{ 'direction': 'rtl' }],
['clean']
],
},
bounds: '.ql-compose-container',
theme: 'snow'
});
// Google Mail editor like keybind for quoting
editor.keyboard.addBinding({
key: '9',
shiftKey: true,
ctrlKey: !isMac,
metaKey: isMac,
format: ['blockquote'],
}, function(range, context) {
this.quill.format('blockquote', false);
});
editor.keyboard.addBinding({
key: '9',
shiftKey: true,
ctrlKey: !isMac,
metaKey: isMac,
}, function(range, context) {
this.quill.format('blockquote', true);
});
editor.on('text-change', function() {
targ.value = escapeHTML_(editor.root.innerHTML + "<br><br>");
let quoteHTML = String(),
err = false;
try {
quoteHTML =
document.querySelector('#quote-mail-iframe')
.contentWindow.document
.querySelector('.iframe_quote[contenteditable]#webmin-iframe-quote').innerHTML;
} catch(e) {
err = true;
}
if (!err) {
targ.value = targ.value + escapeHTML_(quoteHTML);
}
});
editor.pasteHTML(targ.value);
// Prevent loosing focus for toolbar selects (color picker, font select and etc)
editor.getModule("toolbar").container.addEventListener("mousedown", (e) => {
e.preventDefault();
});
}
</script>
EOF
if (!$tinfo{'spa'}) {
$html_editor_scripts .= <<EOF;
<script type="text/javascript">
mail_init_editor();
</script>
EOF
}
$html_editor_scripts = &html_editor_init_script('mail', {load => !$tinfo{'spa'}});
$sig =~ s/\n/<br>\n/g,
$sig =~ s/^\s+//g
if ($sig);

2
makedist.pl
View File

@ -59,7 +59,7 @@ $vers || usage();
"uptracker.cgi", "create-module.pl", "webmin_search.cgi",
"webmin-search-lib.pl", "WebminCore.pm",
"record-login.pl", "record-logout.pl", "record-failed.pl",
"robots.txt", "unauthenticated", "bin",
"robots.txt", "unauthenticated", "bin", "html-editor-lib.pl",
);
if ($min) {
# Only those required by others