fix(HTMLEditor): Inherit HTML Editor from Markdown Editor (#6573)

frappe/database/mariadb/database.py

@@ -36,6 +36,7 @@ class MariaDBDatabase(Database):
 			'Code':			('longtext', ''),
 			'Text Editor':	('longtext', ''),
 			'Markdown Editor':	('longtext', ''),
+			'HTML Editor':	('longtext', ''),
 			'Date':			('date', ''),
 			'Datetime':		('datetime', '6'),
 			'Time':			('time', '6'),

frappe/database/postgres/database.py

@@ -41,6 +41,7 @@ class PostgresDatabase(Database):
 			'Code':			('text', ''),
 			'Text Editor':	('text', ''),
 			'Markdown Editor':	('longtext', ''),
+			'HTML Editor':	('longtext', ''),
 			'Date':			('date', ''),
 			'Datetime':		('timestamp', None),
 			'Time':			('time', '6'),

frappe/public/build.json

@@ -78,8 +78,8 @@
 		"public/js/frappe/form/controls/read_only.js",
 		"public/js/frappe/form/controls/button.js",
 		"public/js/frappe/form/controls/html.js",
-		"public/js/frappe/form/controls/html_editor.js",
 		"public/js/frappe/form/controls/markdown_editor.js",
+		"public/js/frappe/form/controls/html_editor.js",
 		"public/js/frappe/form/controls/heading.js",
 		"public/js/frappe/form/controls/autocomplete.js",
 		"public/js/frappe/form/controls/barcode.js",

frappe/public/js/frappe/form/controls/html_editor.js

@@ -1,32 +1,12 @@
-frappe.ui.form.ControlHTMLEditor = frappe.ui.form.ControlCode.extend({
-	make_input() {
+frappe.ui.form.ControlHTMLEditor = frappe.ui.form.ControlMarkdownEditor.extend({
+	editor_class: 'html',
+	set_language() {
+		this.df.options = 'HTML';
 		this._super();
-		this.$input.height(150);
-		this.make_preview_container();
 	},
-
-	make_preview_container() {
-		this.html_preview_container = $('<div>').appendTo(this.input_area).addClass('html-preview-container');
-		this.preview_label = $('<div>').appendTo(this.html_preview_container).addClass('html-preview-label');
-		this.html_preview_area = $('<div>').appendTo(this.html_preview_container).addClass('html-preview-area');
-		this.$input.on('change keyup paste', frappe.utils.debounce(() => {
-			this.build_preview();
-		}, 300));
-	},
-
-	set_formatted_input(value) {
-		this._super(value);
-		this.build_preview();
-	},
-
-	build_preview() {
-		if (this.get_value() == '') {
-			this.preview_label.text(__('No Preview available'));
-			this.html_preview_area.hide();
-		} else {
-			this.preview_label.text(__('Preview'));
-			this.html_preview_area.show();
-			this.html_preview_area.html(this.get_value());
-		}
+	update_preview() {
+		let value = this.get_value() || '';
+		value = frappe.dom.remove_script_and_style(value);
+		this.markdown_preview.html(value);
 	}
 });

frappe/public/js/frappe/form/controls/markdown_editor.js

@@ -1,12 +1,13 @@
 frappe.ui.form.ControlMarkdownEditor = frappe.ui.form.ControlCode.extend({
+	editor_class: 'markdown',
 	make_ace_editor() {
 		this._super();
 
-		this.ace_editor_target.wrap('<div class="markdown-container">');
-		this.markdown_container = this.$input_wrapper.find('.markdown-container');
+		this.ace_editor_target.wrap(`<div class="${this.editor_class}-container">`);
+		this.markdown_container = this.$input_wrapper.find(`.${this.editor_class}-container`);
 
 		this.showing_preview = false;
-		this.preview_toggle_btn = $(`<button class="btn btn-default btn-xs markdown-toggle">${__('Preview')}</button>`)
+		this.preview_toggle_btn = $(`<button class="btn btn-default btn-xs ${this.editor_class}-toggle">${__('Preview')}</button>`)
 			.click(e => {
 				if (!this.showing_preview) {
 					this.update_preview();
@@ -19,12 +20,10 @@ frappe.ui.form.ControlMarkdownEditor = frappe.ui.form.ControlCode.extend({
 				this.showing_preview = !this.showing_preview;
 
 				$btn.text(this.showing_preview ? __('Edit') : __('Preview'));
-
-
 			});
 		this.markdown_container.prepend(this.preview_toggle_btn);
 
-		this.markdown_preview = $('<div class="markdown-preview border rounded">').hide();
+		this.markdown_preview = $(`<div class="${this.editor_class}-preview border rounded">`).hide();
 		this.markdown_container.append(this.markdown_preview);
 	},
 

frappe/public/less/controls.less

@@ -44,13 +44,13 @@
 	z-index: 3;
 }
 
-.markdown-preview {
+.markdown-preview, .html-preview {
 	padding: 12px 15px;
 	min-height: 300px;
 	max-height: 600px;
 	overflow: auto;
 }
 
-.markdown-toggle {
+.markdown-toggle, .html-toggle {
 	margin-bottom: 5px;
 }