From 253e73ed66db97d21f2690ad8c62bb547cbb4fdc Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Fri, 5 Jun 2020 18:23:50 +0530 Subject: [PATCH 1/5] fix(text-editor): List UI - Remove hacks for list render - Use quill styles for read-only mode and print-format to keep style consistent --- .../js/frappe/form/controls/text_editor.js | 94 +---------- frappe/public/less/print.less | 16 +- frappe/public/less/quill.less | 158 +++++++++--------- .../print_formats/standard_macros.html | 2 +- 4 files changed, 85 insertions(+), 185 deletions(-) diff --git a/frappe/public/js/frappe/form/controls/text_editor.js b/frappe/public/js/frappe/form/controls/text_editor.js index 5e73889490..3c0f7d5110 100644 --- a/frappe/public/js/frappe/form/controls/text_editor.js +++ b/frappe/public/js/frappe/form/controls/text_editor.js @@ -1,10 +1,5 @@ import Quill from 'quill'; -// replace

tag with

-const Block = Quill.import('blots/block'); -Block.tagName = 'DIV'; -Quill.register(Block, true); - const CodeBlockContainer = Quill.import('formats/code-block-container'); CodeBlockContainer.tagName = 'PRE'; Quill.register(CodeBlockContainer, true); @@ -17,7 +12,8 @@ Table.create = (value) => { node.classList.add('table'); node.classList.add('table-bordered'); return node; -} +}; + Quill.register(Table, true); // link without href @@ -28,7 +24,7 @@ class MyLink extends Link { let node = super.create(value); value = this.sanitize(value); node.setAttribute('href', value); - if(value.startsWith('/') || value.indexOf(window.location.host)) { + if (value.startsWith('/') || value.indexOf(window.location.host)) { // no href if internal link node.removeAttribute('target'); } @@ -73,7 +69,7 @@ Quill.register(CustomColor, true); frappe.ui.form.ControlTextEditor = frappe.ui.form.ControlCode.extend({ make_wrapper() { this._super(); - this.$wrapper.find(".like-disabled-input").addClass('text-editor-print'); + this.$wrapper.find(".like-disabled-input").addClass('ql-editor'); }, make_input() { @@ -203,91 +199,9 @@ frappe.ui.form.ControlTextEditor = frappe.ui.form.ControlCode.extend({ get_input_value() { let value = this.quill ? this.quill.root.innerHTML : ''; - // quill keeps ol as a common container for both type of lists - // and uses css for appearances, this is not semantic - // so we convert ol to ul if it is unordered - const $value = $(`
${value}
`); - $value.find('ol li[data-list=bullet]:first-child').each((i, li) => { - let $li = $(li); - let $parent = $li.parent(); - let $children = $parent.children(); - let $ul = $('