Atto editor EXTENSIVE markup

Atto editor EXTENSIVE markup

by Bob Puffer -
Number of replies: 15

This has probably been brought forth before but if so it deserves another airing. Using 2.93, maybe it's gotten better. Here's the text:

Thank you for taking care of the pre-registration assessments.  Because you live so far from campus, your registration will take place on FRIDAY, AUGUST 26 (one day before the official Orientation period begins for first-year students). Please plan to be on campus by noon, Friday, August 26.  We look forward to seeing you then and getting your registration complete for the fall semester.

Here's the markup:

<p><span style="color: rgb(34, 34, 34); font-family: arial, sans-serif; 

font-size: small; font-style: normal; font-variant: normal; font-weight:
 normal; letter-spacing: normal; line-height: normal; orphans: auto; 
 text-align: start; text-indent: 0px; text-transform: none; 
 white-space: normal; widows: 1; word-spacing: 0px; 
 -webkit-text-stroke-width: 0px; display: inline !important; 
 float: none; background-color: rgb(255, 255, 255);">Thank you for 
 taking care of the pre-registration assessments.&nbsp; Because you 
 live so far from campus, your registration will take place on&nbsp;
 </span><span style="color: rgb(34, 34, 34); font-family: arial, 
 sans-serif; font-size: small; font-style: normal; font-variant: 
 normal; font-weight: normal; letter-spacing: normal; line-height: 
 normal; orphans: auto; text-align: start; text-indent: 0px; 
 text-transform: none; white-space: normal; widows: 1; 
 word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: 
 rgb(255, 255, 255);"><span class="aBn" data-term="goog_1227801475" 
 tabindex="0" style="border-bottom-width: 1px; border-bottom-style: 
 dashed; border-bottom-color: rgb(204, 204, 204); position: relative; 
 top: -2px; z-index: 0;"><span class="aQJ" style="position: relative; 
 top: 2px; z-index: -1;">FRIDAY, AUGUST 26</span></span></span>
 <span style="color: rgb(34, 34, 34); font-family: arial, sans-serif; 
 font-size: small; font-style: normal; font-variant: normal; 
 font-weight: normal; letter-spacing: normal; line-height: normal; 
 orphans: auto; text-align: start; text-indent: 0px; text-transform: 
 none; white-space: normal; widows: 1; word-spacing: 0px; 
 -webkit-text-stroke-width: 0px; display: inline !important; 
 float: none; background-color: rgb(255, 255, 255);">&nbsp;
 (one day before the official Orientation period begins for first-year 
 students). Please plan to be on campus by&nbsp;</span>
 <span style="color: rgb(34, 34, 34); font-family: arial, 
 sans-serif; font-size: small; font-style: normal; font-variant: 
 normal; font-weight: normal; letter-spacing: normal; line-height: 
 normal; orphans: auto; text-align: start; text-indent: 0px; 
 text-transform: none; white-space: normal; widows: 1; word-spacing: 
 0px; -webkit-text-stroke-width: 0px; background-color: 
 rgb(255, 255, 255);"><span class="aBn" data-term="goog_1227801476" 
 tabindex="0" style="border-bottom-width: 1px; border-bottom-style: 
 dashed; border-bottom-color: rgb(204, 204, 204); position: relative; 
 top: -2px; z-index: 0;"><span class="aQJ" style="position: relative; 
 top: 2px; z-index: -1;">noon</span></span></span><span style="color: 
 rgb(34, 34, 34); font-family: arial, sans-serif; font-size: small; 
 font-style: normal; font-variant: normal; font-weight: normal; 
 letter-spacing: normal; line-height: normal; orphans: auto; 
 text-align: start; text-indent: 0px; text-transform: none; 
 white-space: normal; widows: 1; word-spacing: 0px; 
 -webkit-text-stroke-width: 0px; display: inline !important; 
 float: none; background-color: rgb(255, 255, 255);">,&nbsp;</span>
 <span style="color: rgb(34, 34, 34); font-family: arial, sans-serif; 
 font-size: small; font-style: normal; font-variant: normal; 
 font-weight: normal; letter-spacing: normal; line-height: normal; 
 orphans: auto; text-align: start; text-indent: 0px; text-transform: 
 none; white-space: normal; widows: 1; word-spacing: 0px; 
 -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">
 <span class="aBn" data-term="goog_1227801477" tabindex="0" 
 style="border-bottom-width: 1px; border-bottom-style: dashed; 
 border-bottom-color: rgb(204, 204, 204); position: relative; 
 top: -2px; z-index: 0;"><span class="aQJ" style="position: 
 relative; top: 2px; z-index: -1;">Friday, August 26</span></span>
 </span><span style="color: rgb(34, 34, 34); font-family: arial, 
 sans-serif; font-size: small; font-style: normal; font-variant: 
 normal; font-weight: normal; letter-spacing: normal; line-height: 
 normal; orphans: auto; text-align: start; text-indent: 0px; 
 text-transform: none; white-space: normal; widows: 1; word-spacing: 
 0px; -webkit-text-stroke-width: 0px; display: inline !important; 
 float: none; background-color: rgb(255, 255, 255);">.&nbsp; 
 We look forward to seeing you then and getting your registration 
 complete for the fall semester.</span><br></p>


Average of ratings: -
In reply to Bob Puffer

Re: Atto editor EXTENSIVE markup

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
it that well-formed? That's insane! Who typed that in a https://en.wikipedia.org/wiki/Text_editor ?
;-P
Average of ratings: -
In reply to Visvanath Ratnaweera

Re: Atto editor EXTENSIVE markup

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Clearly that is not typed by a human.

That is the sort of mess you get when you copy and paste. Atto is based on HTML5 content-editable http://www.w3.org/TR/html5/editing.html#contenteditable.

Different browsers implement that sightly differently, particularly with regards to what happens when you copy and paste. Some browsers (e.g. Chrome) try harder to keep the style of what you pasted similar to what you copied. That tends to lead to lots of mess like the above in the HTML.

Other browser (e.g Firefox) seem to give cleaner HTML, but that means styles are less likely to be preserved.

Average of ratings: Useful (1)
In reply to Tim Hunt

Re: Atto editor EXTENSIVE markup

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
Tim Hunt wrote:
> Clearly that is not typed by a human.

I am relieved. I got scared thinking that there are super-humen amoung us!
smile

> Different browsers implement that sightly differently, particularly with regards to what happens when you copy and paste.

This must have been some GUI. If the said editor was a text editor, the author would have seen the explosion in mark-up.

If "copy and paste" behaves that way I expect "drag and drop" to be worse. The other day, a teacher alleged that an image in a quiz has suddenly vanished. My text editor showed that the URL of the image was something webkit-fake-url://HUGEHASHORSOMETHING/image.tiff. That is what Safari does with drag-and-dropped images! (Here's an example: "Pasted images disappear from quiz. Help! (Atto problem?)" https://moodle.org/mod/forum/discuss.php?d=269988.) The complication was that the author did not have a local copy!

> Other browser (e.g Firefox) seem to give cleaner HTML, but that means styles are less likely to be preserved.

Tell that to a Apple devotee!
sad
Average of ratings: Useful (1)
In reply to Visvanath Ratnaweera

Re: Atto editor EXTENSIVE markup

by Mauno Korpelainen -

I am not sure if this original problem is caused by webkit / Safari or the way how Atto has used browser commands but somebody has at least tried to change that Style behaviour https://webkit.org/blog/1737/apple-style-span-is-gone/

Average of ratings: -
In reply to Mauno Korpelainen

Safari can not drag and drop images to Moodle WYSIWYG editor(s)

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
Mauno

From the "feature" https://bugs.webkit.org/show_bug.cgi?id=49141, final comment 2016-02-11 05:17:49 PST:
"Guys, this bug is 5 years old and Safari is the only browser which is not capable of pasting images. It affects a lot software like JIRA, Google Docs, Online Office, CKEditor and many many more. Is there any plan to fix that?"

And there is something called "Apple style span" https://webkit.org/blog/1737/apple-style-span-is-gone/. Imagine that, this is not the era of IE4 which bulldozed W3 standards.
sad

Anyway, I don't use Safari, and the teacher I mentioned was not helpful at all. (Initially alleged that the image "suddenly vanished". Refused even to say that he was working in Safari and drag-and-dropping images, neither disclosed whether he is in Atto or TinyMCE. Perhaps that is the psychology of the iFollowers.) Personally, I don't use any GUI editor, unless I am forced to (like uploading images to Moodle). So I have no clue what is happening. Just glad there are people around who understand.

P.S. I noticed that we've side-tracked. I have the discussion a new name, in case the Moderator decides to split the discussion here https://moodle.org/mod/forum/discuss.php?d=328446#p1321651.
Average of ratings: -
In reply to Visvanath Ratnaweera

Re: Safari can not drag and drop images to Moodle WYSIWYG editor(s)

by Mauno Korpelainen -
In my opinion your comment about drag and drop (images) was not side-tracked. The point that this "feature" has been non-fixed in Safari for 5 years just tells that browsers have always had some custom methods to handle different tasks.

I think the main source of problems is execCommand - http://help.dottoro.com/ljcvtcaw.php

TinyMCE used to have different buttons (plugins) for "Paste from Word" and "Paste text" & different buttons for cleaning unwanted styles - or you can also use HTML button in Atto ( < > ) - but typically somebody is always unhappy, no matter what solution you suggest. Some people want to use editor, some don't. Some people want to copy/paste styles, some don't.
Average of ratings: -
In reply to Bob Puffer

Re: Atto editor EXTENSIVE markup

by Ken Task -
Picture of Particularly helpful Moodlers

Am kinda confused ... an issue?

From where is the text shown generated?

In looking through the massive markup clip, elements referencing webkit can be seen.
Webkit was Googles (thus Android browser and Chromes) chosen layout engine. I might be wrong, but didn't Apple also use webkit in their native browsers for iphones/ipad's? 

In Moodle's language editor, as you know, one can change what an 'element' says, etc..  Could use copy and paste from something that was using webkit engine into the dialog box for the changes?  Those dialog boxes don't display a Atto editor and if it did, is there a 'webkit tidy' button for Atto.   So whatever is copied and pasted is accepted.   Filtering doesn't catch webkit elements?  Recorded into the DB so whenever that is displayed to a client the markup contains webkit markup.

Is this the issue?

'spirit of sharing', Ken


Average of ratings: -
In reply to Ken Task

Re: Atto editor EXTENSIVE markup

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Thank you for taking care of the pre-registration assessments.  Because you live so far from campus, your registration will take place on FRIDAY, AUGUST 26 (one day before the official Orientation period begins for first-year students). Please plan to be on campus by noon, Friday, August 26.  We look forward to seeing you then and getting your registration complete for the fall semester.

And the atto code for the same text if its just typed in or copied from a plain text editor

<p>Thank you for taking care of the pre-registration assessments.&nbsp; Because you live so far from campus, your registration will take place on FRIDAY, AUGUST 26 (one day before the official Orientation period begins for first-year students). Please plan to be on campus by noon, Friday, August 26.&nbsp; We look forward to seeing you then and getting your registration complete for the fall semester.<br></p>

Presumably using the clear formatiing tool in Atto would help get rid of some of the imported code, or maybe that is the issue being reported? Certainly copying and pasting via a plain text editor does (the same as I have always advised my staff with TinyMCE if copying from Word etc.)

Average of ratings: -
In reply to Richard Oelmann

Re: Atto editor EXTENSIVE markup

by Bob Puffer -

This was imported via a the plain text button.  I think it likely that where the editor came up is that the text was imported via plain text, removed and then imported again via plain text.

Average of ratings: Useful (1)
In reply to Bob Puffer

Re: Atto editor EXTENSIVE markup

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

If it was imported using the plain text button and retained all that formatting, then it definitely needs reporting as a BUG in the tracker, with testing details so it can be replicated and corrected.

Average of ratings: Useful (1)
In reply to Bob Puffer

Re: Atto editor EXTENSIVE markup

by Mihai Bojonca -
Picture of Testers

Bob, were you able to find a fix for the issue ? I am seeing the same behaviour. 

1. Create text in ATTO anywhere in moodle

2. Copy the text

3. Paste the text in the same window as plain text or simply paste it

If you toggle code view you can see the original code very clean however everything that was pasted afterwards is all marked up extensively.


As we are working with multilingual filters we find that as very inconvenient. 


We use MOODLE 3.0.2 with essential theme and OpenSans as default fonts in headers and body.

Please advise.

Average of ratings: -
In reply to Mihai Bojonca

Re: Atto editor EXTENSIVE markup

by David Scotson -

Are you using Chrome as a browser?


You may be affected by this bug MDL-50795 "Copying and Pasting within or between Atto boxes adds background color definition in Chrome".


The current resolution of the bug is just to remove the background color part, but the bug also discusses lots of other bits of style that get added. If that is the same thing you may wish to ensure that they open a follow-on bug to discuss what to do about the rest of the styles that get cut'n'pasted into Atto.


Average of ratings: Useful (1)
In reply to David Scotson

Re: Atto editor EXTENSIVE markup

by Bob Puffer -

Yes, I am using Chrome as a browser.


I've seen less of this, not nearly as severe as my example but still there seems to be a good deal more markup than needed when things get a bit complex

Average of ratings: -