Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-63589

Atto produces invalid HTML for nested lists, breaks Forum

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.5.2
    • Fix Version/s: None
    • Component/s: HTML Editor (Atto)
    • Labels:
      None
    • Affected Branches:
      MOODLE_35_STABLE

      Description

      The Atto Editor produces invalid HTML when nesting lists using the toolbar buttons "Ordered List", "Unordered list", and "Indent". In most cases this is not apparent because web browsers render the invalid HTML correctly. However, when creating/editing Forum posts with nested lists of different types (ordered/unordered), the HTML is munged and the nesting is broken.

      TinyMCE had a similar bug which was fixed: MDL-30470, MDL-30902

      FULL STEPS
      Log in to the Moodle sandbox demo (https://demo.moodle.net/) as "teacher".
      My First Course > New forum > Add new topic.
      Type something for the subject.
      In the Message box:

      • type "foo"
      • click the "Ordered list" button
      • press Enter, type "bar"
      • click the "Show more buttons" (arrow) button, "Indent", then "Unordered list"
      • should look like screenshot 1

      Post to forum.
      EXPECT: The unordered list should be nested inside the ordered list as displayed while editing.
      ACTUAL: The unordered list is after and outside the ordered list, see screenshot 2.

      If I switch to HTML mode while editing using the "</>" button, the content is

      <ol><li>foo</li><ul><li>bar<br></li></ul></ol>

      When I edit the message after posting, the content is

      <ol><li>foo</li></ol><ul><li>bar<br></li></ul>

      (note how the </ol> tag moved, breaking the nesting)

      The original HTML is invalid according to the W3C validator (https://validator.w3.org) because <ul> cannot be directly inside <ol>. It should be

      <ol><li>foo<ul><li>bar<br></li></ul></li></ol>

      The root cause appears to be document.execCommand('indent'), which produces the invalid HTML in most browsers. There is a bug report against the HTML5 spec which explains this and requests that the nesting is to be considered valid, but it was rejected: https://www.w3.org/Bugs/Public/show_bug.cgi?id=12609.

      The munging in Forum posts appears to be because the invalid HTML is handled badly by HTML Purifier. The TinyMCE bugs above mention this and link to http://htmlpurifier.org/phorum/read.php?3,5451.

      It appears that HTML Purifier can handle the invalid HTML correctly since version 4.4 (released 2012), but only in some configurations. On the live demo (http://htmlpurifier.org/demo.php) the output has incorrect nesting like on Moodle, but the following program produces the correct nesting with HTML Purifier 4.4 through 4.10:

      <?php
      require_once 'library/HTMLPurifier.auto.php';
      $config = HTMLPurifier_Config::createDefault();
      $purifier = new HTMLPurifier($config);
      $clean_html = $purifier->purify("<ol><li>foo</li><ul><li>bar<br></li></ul></ol>");
      print $clean_html;
      // output: <ol><li>foo<ul><li>bar<br /></li></ul></li></ol>
      ?>

        Attachments

        1. MDL-63589.jpg
          MDL-63589.jpg
          12 kB
        2. screenshot-1.png
          screenshot-1.png
          48 kB
        3. screenshot-2.png
          screenshot-2.png
          39 kB

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              hddqsb Tom Levy
              Participants:
              Component watchers:
              Andrew Nicols, Mathew May, Michael Hawkins, Shamim Rezaie, Simey Lameze
            • Votes:
              2 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated: