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

frappe/public/js/frappe/form/controls/text_editor.js

@@ -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'],

frappe/public/scss/common/quill.scss

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