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

Atto: Indenting some content selects all content above editor

XMLWordPrintable

    • MOODLE_27_STABLE
    • MOODLE_27_STABLE
    • Hide
      • Insert the following html into an atto editor in html source view:

        <p>test<br></p><p></p><ul><li><span style="line-height: 16px;">test 1</span><br></li><li><span style="line-height: 16px;">test 2</span><br></li><li><span style="line-height: 16px;">test 3</span></li></ul><p><br></p><p></p><p></p><p></p>

      • Go back to WYSIWYG view
      • Click in the editor somewhere, and press CTRL+A to select all the text
      • Click the indent button

      Expected: Your selection is indented, and the originally selected text is selected and nothing else is.

      Show
      Insert the following html into an atto editor in html source view: <p>test<br></p><p></p><ul><li><span style="line-height: 16px;">test 1</span><br></li><li><span style="line-height: 16px;">test 2</span><br></li><li><span style="line-height: 16px;">test 3</span></li></ul><p><br></p><p></p><p></p><p></p> Go back to WYSIWYG view Click in the editor somewhere, and press CTRL+A to select all the text Click the indent button Expected: Your selection is indented, and the originally selected text is selected and nothing else is.

      It's possible to select content in atto, indent it, and then have all content from the top of the page to the end of your selection highlighted.

      Root cause appears to be that at the start of the indent operation, rangy saves the selection area. Once the document.execCommand('indent') call is made, the starting span that rangy made to flag the start of the selection is removed. Thus at the end of the function, rangy restores the selection; and since it can't find the starting dom entry, it uses the top of the dom instead.

      To replicate:

      • Insert the following html into an atto editor in html source view:

        <p>test<br></p><p></p><ul><li><span style="line-height: 16px;">test 1</span><br></li><li><span style="line-height: 16px;">test 2</span><br></li><li><span style="line-height: 16px;">test 3</span></li></ul><p><br></p><p></p><p></p><p></p>

      • Go back to WYSIWYG view
      • Click in the editor somewhere, and press CTRL+A to select all the text
      • Click the indent button
      • Observe that the top half of the page becomes selected instead of the originally selected text.

      Additionally, rangy warns of exactly what happened:
      Rangy warning: Module SaveRestore: Marker element has been removed. Cannot restore selection.

            aolley Adam Olley
            aolley Adam Olley
            Dan Poltawski Dan Poltawski
            Sam Hemelryk Sam Hemelryk
            Aparup Banerjee Aparup Banerjee
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

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