Bug 24764

Summary: TinyMCE shouldnt do automatic code cleanup when editing HTML in News Feature
Product: Koha Reporter: Lucas Gass (lukeg) <lucas>
Component: ToolsAssignee: Lucas Gass (lukeg) <lucas>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: normal    
Priority: P5 - low CC: 1joynelson, black23, dcook, margaret
Version: Main   
Hardware: All   
OS: All   
See Also: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22660
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34463
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
20.05.00, 19.11.06, 19.05.11
Circulation function:
Attachments: Bug 24764: TinyMCE shouldnt do automatic code cleanup when editing HTML in News Feature
Bug 24764: TinyMCE shouldnt do automatic code cleanup when editing HTML in News Feature
Bug 24764: TinyMCE shouldnt do automatic code cleanup when editing HTML in News Feature

Description Lucas Gass (lukeg) 2020-02-28 19:16:37 UTC
Currently if you use the HTML option in the news tool TinyMCE does automatic code cleanup and this can be problematic. 

If I enter into the HTML field:

<i class="fa fa-facebook-official" aria-hidden="true"></i>

The editor thinks this is nothing and won't update code at all. 

IF I enter:

<i class="fa fa-facebook-official" aria-hidden="true">TEST</i>

the editor changes it to: 

<p><em class="fa fa-facebook-official">TEST</em></p>


It would be better if the feature didn't auto cleanup HTML.
Comment 1 Katrin Fischer 2020-02-29 21:53:05 UTC
+1
Comment 2 Margaret Hade 2020-03-09 23:30:23 UTC
+1
Comment 3 Lucas Gass (lukeg) 2020-03-26 22:18:37 UTC
In my opinion we should replace TinyMCE with CodeMirror here.
Comment 4 Katrin Fischer 2020-03-26 22:34:02 UTC
(In reply to Lucas Gass from comment #3)
> In my opinion we should replace TinyMCE with CodeMirror here.

Making it an option like the WYSIQY editor for prefs is might be nice.
So you can switch if you want to do more elaborate things and keep the editor for people not fond of code?
Comment 5 Lucas Gass (lukeg) 2020-03-26 22:50:04 UTC
Created attachment 101917 [details] [review]
Bug 24764: TinyMCE shouldnt do automatic code cleanup when editing HTML in News Feature

TEST PLAN:
1. Make a new news item and use the TinyMCE editor, click on the <> icon to go to the Source code editor
2. Add some HTML like <i class="fa fa-facebook-official" aria-hidden="true">TEST</i> and save it.
3. Go back in and notice that TinyMCE has changed it to: <p><em class="fa fa-facebook-official">TEST</em></p>
4. It should not auto clean up and also it should not autowrap with <p> tag.
5. Apply patch patch, and repeat step 2. Save again.
6. It should not have automatiicly changed any HTML or added any <p> wrapper.
Comment 6 Lucas Gass (lukeg) 2020-03-26 22:51:41 UTC
This patch fixes the automatic code clean up problem with tinyMCE. A discussion of wether CodeMirror might be a better option (or ability to use either) is for a different bug, I think.
Comment 7 Katrin Fischer 2020-03-26 22:54:08 UTC
(In reply to Lucas Gass from comment #6)
> This patch fixes the automatic code clean up problem with tinyMCE. A
> discussion of wether CodeMirror might be a better option (or ability to use
> either) is for a different bug, I think.

Agreed, I filed bug 22660 :)
Comment 8 David Cook 2020-03-26 23:42:33 UTC
Awesome! I'm going to put this on my todo list. In the middle of something else at the moment, but hoping to sign this off today. Been bitten by this issue more often than I'd like.
Comment 9 David Cook 2020-03-27 00:19:48 UTC
Created attachment 101929 [details] [review]
Bug 24764: TinyMCE shouldnt do automatic code cleanup when editing HTML in News Feature

TEST PLAN:
1. Make a new news item and use the TinyMCE editor, click on the <> icon to go to the Source code editor
2. Add some HTML like <i class="fa fa-facebook-official" aria-hidden="true">TEST</i> and save it.
3. Go back in and notice that TinyMCE has changed it to: <p><em class="fa fa-facebook-official">TEST</em></p>
4. It should not auto clean up and also it should not autowrap with <p> tag.
5. Apply patch patch, and repeat step 2. Save again.
6. It should not have automatiicly changed any HTML or added any <p> wrapper.

Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 10 Katrin Fischer 2020-04-12 22:49:23 UTC
Created attachment 102778 [details] [review]
Bug 24764: TinyMCE shouldnt do automatic code cleanup when editing HTML in News Feature

TEST PLAN:
1. Make a new news item and use the TinyMCE editor, click on the <> icon to go to the Source code editor
2. Add some HTML like <i class="fa fa-facebook-official" aria-hidden="true">TEST</i> and save it.
3. Go back in and notice that TinyMCE has changed it to: <p><em class="fa fa-facebook-official">TEST</em></p>
4. It should not auto clean up and also it should not autowrap with <p> tag.
5. Apply patch patch, and repeat step 2. Save again.
6. It should not have automatiicly changed any HTML or added any <p> wrapper.

Signed-off-by: David Cook <dcook@prosentient.com.au>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

https://bugs.koha-community.org/show_bug.cgi?id=24709

https://bugs.koha-community.org/show_bug.cgi?id=24706
Comment 11 Martin Renvoize (ashimema) 2020-04-14 07:36:55 UTC
Nice work everyone!

Pushed to master for 20.05
Comment 12 Joy Nelson 2020-05-04 21:40:53 UTC
backported to 19.11.x for 19.11.06
Comment 13 Lucas Gass (lukeg) 2020-05-13 21:52:15 UTC
backported to 19.05.x for 19.05.11