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

Atto editor wrongfully creates UL tags inside SVG

    XMLWordPrintable

Details

    • MOODLE_311_STABLE, MOODLE_400_STABLE
    • MOODLE_311_STABLE, MOODLE_400_STABLE
    • MDL-74492-Atto_UL_fix
    • Hide

      Open Atto Editor and switch to HTML mode. Enter the following text:

      <svg width="100" height="100">
      <line x1="0" y1="0" x2="100" y2="100" stroke="black"></line>
      </svg>
      <ul><li>foo</ul>

      Switch to normal mode. Verify you see a diagonal black line and a single bullet point "foo".

      Switch back to HTML mode and verify that the list part has been corrected but the SVG part has not changed:

      <svg width="100" height="100">
      <line x1="0" y1="0" x2="100" y2="100" stroke="black"></line>
      </svg>
      <ul>
      <li>foo</li>
      </ul>

      (You will probably see different indentation and formatting.)

      Show
      Open Atto Editor and switch to HTML mode. Enter the following text: <svg width="100" height="100"> <line x1="0" y1="0" x2="100" y2="100" stroke="black"></line> </svg> <ul><li>foo</ul> Switch to normal mode. Verify you see a diagonal black line and a single bullet point "foo". Switch back to HTML mode and verify that the list part has been corrected but the SVG part has not changed: <svg width="100" height="100"> <line x1="0" y1="0" x2="100" y2="100" stroke="black"></line> </svg> <ul> <li>foo</li> </ul> (You will probably see different indentation and formatting.)

    Description

      The Atto editor is misinterpreting the <line> tag inside an <svg> graphic as <li> item and thus creates a surrounding <ul> environment. The error comes from a too generic regex in clean.js.

      I suggest changing the regexp to 

      <(\/?)(li(?!ne)|ul|ol)[^>]*>

      so that line tags are not matched.

      Example: Open Atto Editor and switch to HTML mode. Enter the following text:

      <svg width="100" height="100">
      <line x1="0" y1="0" x2="100" y2="100"></line>
      <svg>

      Switch to normal mode. No image is shown. Then switch back to HTML mode and see that the text has been changed to:

      <svg width="100" height="100">
          </svg>
      <ul>
          <line x1="0" y1="0" x2="100" y2="100"></line>
      </ul>
      <svg>

      Attachments

        1. MDL-74492__corrected.png
          MDL-74492__corrected.png
          36 kB
        2. MDL-74492__entry.png
          MDL-74492__entry.png
          35 kB
        3. MDL-74492__rendered.png
          MDL-74492__rendered.png
          23 kB
        4. 1_MDL-74492_master.png
          1_MDL-74492_master.png
          14 kB
        5. 1_MDL-74492_v400.png
          1_MDL-74492_v400.png
          14 kB
        6. 2_MDL-74492_master.png
          2_MDL-74492_master.png
          23 kB
        7. 1_MDL-74492_v311.png
          1_MDL-74492_v311.png
          14 kB
        8. 2_MDL-74492_v311.png
          2_MDL-74492_v311.png
          23 kB
        9. 2_MDL-74492_v400.png
          2_MDL-74492_v400.png
          23 kB

        Issue Links

          Activity

            People

              philippimhof Philipp Imhof
              philippimhof Philipp Imhof
              Tim Hunt Tim Hunt
              Andrew Lyons Andrew Lyons
              John Edward Pedregosa John Edward Pedregosa
              Votes:
              1 Vote for this issue
              Watchers:
              6 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 45 minutes
                  45m

                  Clockify

                    Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.