While editing a page, the cursor jumps to the top of the page if the user clicks the white space slightly outside the bounds editor window.

XMLWordPrintable

    • 5
    • Severity 3 - Minor
    • 10

      Issue Summary

      While editing a long page, cursor jumps to the top when clicking slightly out of the text editor window, either right or left.

      Additionally, the bottom-right of the existing text at the bottom near the UPDATE button.  

      Note

      This appears to be related to or a regression of CONFSERVER-100547 - While editing a large page (scrollable both bottom and right), cursor jumps to the top when clicking far to the right of the existing text at the bottom.

      Steps to Reproduce

      1. Install Confluence DC 9.2.14 
      2. Edit an existing page and add lots of text (I used Lorum Ipsum text)
      3. The page should be long and scrollable both bottom and right
      4. Scroll to the bottom of the page
      5. On the left hand side of the text box, click in the white space slightly outside the editor.
      6. Page Jumps to the top (or near the top).

      Expected Results

      The cursor should not jump to the top of the page, but instead just invalidate the click if it's outside the editor bounds.

      Actual Results

      Page Jumps to the top or near the top.

      You can see while editing, click slight out of the editor window causes the cursor to jump to the top (or near the top). Also, clicking the bottom right white space, near the UPDATE button, the issue also can occur.

      Workaround

      1. On the Confluence General Administration screen, navigate to the Custom HTML page
      2. On the Custom HTML screen, click Edit and enter the below in the At the beginning of the BODY section ( Be sure NOT to place this in the HEAD section as it can prevent the Confluence main page from rendering):
      <script>
    try {
        require('confluence/api/event').bind('rte-ready', () => { 
            const iframe = document.getElementById('wysiwygTextarea_ifr');
            const contentDoc = iframe?.contentDocument;
            if (contentDoc?.body?.style) {
                contentDoc.body.style.height = 'auto';
            }
            // Add an event listener to prevent cursor jumping
            contentDoc?.addEventListener('mousedown', (event) => {
                const bodyRect = contentDoc.body.getBoundingClientRect();
                const clickX = event.clientX;
                const clickY = event.clientY;
                // Check if the click is outside the text area horizontally
                if (clickX > bodyRect.right || clickX < bodyRect.left) {
                    event.preventDefault();
                    event.stopPropagation();
                    return;
                }
                // Check if the click is outside the text area vertically
                if (clickY > bodyRect.bottom || clickY < bodyRect.top) {
                    event.preventDefault();
                    event.stopPropagation();
                    return;
                }
            });
        });
    } catch (e) {
        console.error('Editor height patching error', e);
    }
</script>

        1. EditorSnapsToTop.gif
          EditorSnapsToTop.gif
          2.82 MB

              Assignee:
              Nam Ho
              Reporter:
              David Maye
              Votes:
              3 Vote for this issue
              Watchers:
              7 Start watching this issue

                Created:
                Updated:
                Resolved: