fix(print): semantic nested lists for text editor

frappe/public/build.json

@@ -137,6 +137,11 @@
 		"public/css/desk-rtl.css",
 		"public/css/report-rtl.css"
 	],
+	"css/printview.css": [
+		"public/css/bootstrap.css",
+		"public/css/font-awesome.css",
+		"public/less/print.less"
+	],
 	"concat:js/libs.min.js": [
 		"public/js/lib/awesomplete/awesomplete.min.js",
 		"public/js/lib/Sortable.min.js",

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

@@ -57,7 +57,7 @@ Quill.register(DirectionStyle, true);
 frappe.ui.form.ControlTextEditor = frappe.ui.form.ControlCode.extend({
 	make_wrapper() {
 		this._super();
-		this.$wrapper.find(".like-disabled-input").addClass("ql-editor");
+		this.$wrapper.find(".like-disabled-input").addClass('text-editor-print');
 	},
 
 	make_input() {
@@ -198,7 +198,78 @@ frappe.ui.form.ControlTextEditor = frappe.ui.form.ControlCode.extend({
 			let $ul = $('<ul>').append($children);
 			$parent.replaceWith($ul);
 		});
-		value = $value.html();
+		value = this.convertLists($value.html());
 		return value;
+	},
+
+	// hack
+	// https://github.com/quilljs/quill/issues/979
+	convertLists(richtext) {
+		const tempEl = window.document.createElement('div');
+		tempEl.setAttribute('style', 'display: none;');
+		tempEl.innerHTML = richtext;
+		const startLi = '::startli::';
+		const endLi = '::endli::';
+
+		['ul','ol'].forEach((type) => {
+			const startTag = `::start${type}::`;
+			const endTag = `::end${type}::`;
+
+			// Grab each list, and work on it in turn
+			Array.from(tempEl.querySelectorAll(type)).forEach((outerListEl) => {
+				const listChildren = Array.from(outerListEl.children).filter((el) => el.tagName === 'LI');
+
+				let lastLiLevel = 0;
+				let currentLiLevel = 0;
+				let difference = 0;
+
+				// Now work through each li in this list
+				for (let i = 0; i < listChildren.length; i++) {
+					const currentLi = listChildren[i];
+					lastLiLevel = currentLiLevel;
+					currentLiLevel = this.getListLevel(currentLi);
+					difference = currentLiLevel - lastLiLevel;
+
+					// we only need to add tags if the level is changing
+					if (difference > 0) {
+						currentLi.before((startLi + startTag).repeat(difference));
+					} else if (difference < 0) {
+						currentLi.before((endTag + endLi).repeat(-difference));
+					}
+
+					if (i === listChildren.length - 1) {
+						// last li, account for the fact that it might not be at level 0
+						currentLi.after((endTag + endLi).repeat(currentLiLevel));
+					}
+				}
+			});
+		});
+
+		//  Get the content in the element and replace the temporary tags with new ones
+		let newContent = tempEl.innerHTML;
+
+		newContent = newContent.replace(/::startul::/g, '<ul>');
+		newContent = newContent.replace(/::endul::/g, '</ul>');
+		newContent = newContent.replace(/::startol::/g, '<ol>');
+		newContent = newContent.replace(/::endol::/g, '</ol>');
+		newContent = newContent.replace(/::startli::/g, '<li>');
+		newContent = newContent.replace(/::endli::/g, '</li>');
+
+		// remove quill classes
+		newContent = newContent.replace(/data-list=.bullet./g, '');
+		newContent = newContent.replace(/class=.ql-indent-../g, '');
+
+		// ul/ol should not be inside another li
+		newContent = newContent.replace(/<\/li><li><ul>/g, '<ul>');
+		newContent = newContent.replace(/<\/li><li><ol>/g, '<ol>');
+		tempEl.remove();
+
+		return newContent;
+	},
+
+	getListLevel(el) {
+		const className = el.className || '0';
+		return +className.replace(/[^\d]/g, '');
 	}
+
 });

frappe/public/less/desk.less

@@ -2,6 +2,7 @@
 @import "mixins.less";
 @import "common.less";
 @import "quill.less";
+@import "print.less";
 
 .nav-pills a, .nav-pills a:hover {
 	border-bottom: none;

frappe/public/less/print.less

@@ -0,0 +1,15 @@
+.text-editor-print {
+	ul li {
+		list-style-type: none;
+		padding-left: 1.5em;
+	}
+
+	ul li:before {
+		content: '\2022';
+		margin-left: -1.5em;
+		margin-right: 0.3em;
+		text-align: right;
+		white-space: nowrap;
+		width: 1.2em;
+	}
+}

frappe/templates/print_formats/standard_macros.html

@@ -97,8 +97,10 @@ data-fieldname="{{ df.fieldname }}" data-fieldtype="{{ df.fieldtype }}"
 	{%- if df.fieldtype=="Code" %}
 		<pre class="value">{{ doc.get(df.fieldname) }}</pre>
 	{% else -%}
+		{%- if df.fieldtype=="Text Editor" -%}<div class='text-editor-print'>{%- endif -%}
 		{{ doc.get_formatted(df.fieldname, parent_doc or doc, translated=df.translatable) }}
-	{% endif -%}
+		{%- if df.fieldtype=="Text Editor" -%}</div>{%- endif -%}
+  {% endif -%}
 </div>
 {%- endif -%}
 {%- endmacro -%}

frappe/www/printview.html

@@ -5,10 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>{{ title }}</title>
 	<meta name="generator" content="frappe">
-	<link type="text/css" rel="stylesheet"
-        href="/assets/frappe/css/bootstrap.css">
-	<link type="text/css" rel="stylesheet"
-        href="/assets/frappe/css/font-awesome.css">
+	<link type="text/css" rel="stylesheet" href="/assets/css/printview.css">
 	{%- if has_rtl -%}
 		<link type="text/css" rel="stylesheet" href="assets/css/frappe-rtl.css">
 	{%- endif -%}