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

Atto editor wrongfully creates UL tags inside SVG

XMLWordPrintable

    • 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.)

      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>

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

            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

              Created:
              Updated:
              Resolved:

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

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