vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat: Add font sizes dropdown in text editor(quill) (#16910)

Browse source
This commit is contained in:
Shariq Ansari 2022-05-17 12:12:03 +05:30 • committed by GitHub
parent 1a4f1a6243
commit fcfb5ca901
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frappe/public/js/frappe/form/controls/text_editor.js
View file

@ -9,6 +9,12 @@ const CodeBlockContainer = Quill.import('formats/code-block-container');
CodeBlockContainer.tagName = 'PRE';
Quill.register(CodeBlockContainer, true);
// font size
let font_sizes = [false, '8px', '9px', '10px', '11px', '12px', '13px', '14px', '15px', '16px', '18px', '20px', '22px', '24px', '32px', '36px', '40px', '48px', '54px', '64px', '96px', '128px'];
const Size = Quill.import('attributors/style/size');
Size.whitelist = font_sizes;
Quill.register(Size, true);
// table
const Table = Quill.import('formats/table-container');
const superCreate = Table.create.bind(Table);
@ -145,6 +151,15 @@ frappe.ui.form.ControlTextEditor = class ControlTextEditor extends frappe.ui.for
e.preventDefault();
});
// font size dropdown
let $font_size_label = this.$wrapper.find('.ql-size .ql-picker-label:first');
let $default_font_size = this.$wrapper.find('.ql-size .ql-picker-item:first');
if ($font_size_label.length) {
$font_size_label.attr('data-value', '---');
$default_font_size.attr('data-value', '---');
}
}
is_quill_dirty(source) {
@ -167,7 +182,8 @@ frappe.ui.form.ControlTextEditor = class ControlTextEditor extends frappe.ui.for
get_toolbar_options() {
return [
[{ 'header': [1, 2, 3, false] }],
[{ header: [1, 2, 3, false] }],
[{ size: font_sizes }],
['bold', 'italic', 'underline', 'clean'],
[{ 'color': [] }, { 'background': [] }],
['blockquote', 'code-block'],

19
frappe/public/scss/common/quill.scss
View file

@ -88,6 +88,25 @@
color: var(--text-light);
}
// font-size dropdown
.ql-snow .ql-picker.ql-size {
width: 58px;
&.ql-expanded {
.ql-picker-options {
overflow-y: auto;
height: 200px;
}
}
.ql-picker-label,
.ql-picker-item {
&:before {
content: attr(data-value) !important;
}
}
}
.ql-snow .ql-picker-label {
outline: none;
}