• 
      

    Make TextEditorView a component and improve toolbar styling/layout.

    Review Request #13210 — Created Aug. 14, 2023 and submitted — Latest diff uploaded

    Information

    Review Board
    release-6.x

    Reviewers

    This change addresses some problems inherent to the way the formatting
    toolbar was placed in CodeMirror's DOM, and uses the opportunity to turn
    this all into a documented component and tweak styling.

    TextEditorView is now backed by a .rb-c-text-editor CSS component
    class, replacing the old .text-editor and plain textarea /
    .CodeMirror nesting. This gives us a solid structure for the
    component that we can build upon. Some scattered rules were cleaned up
    in the process, helping reduce how widespread our styling was.

    The formatting toolbar now lives within .rbc-text-editor, and not
    within .CodeMirror. This addresses problems with spacing and layout.
    By being placed in .CodeMirror, we ended up overlapping a horizontal
    scrollbar, and this ends up causing some layout wonkiness when stressing
    the text editor (such as filling the comment dialog with enough text to
    force scrolling).

    To provide some visual separation, the background of the toolbar is now
    a light grey, with 2em of spacing above it (technically, an offset of
    2em at the bottom of the CodeMirror scroll container). This gives enough
    breathing room to write without the toolbar being too far away.

    In the inline editors with growing text fields, we get those 2em of
    space at all times. In the comment dialog, it's allowed to reach down to
    the top of the toolbar, so that the scrollbar is flush against it. This
    mirrors the behaviors prior to adding the toolbar.

    To reduce visual noise and focus on the buttons, the vertical separators
    in the toolbar have been replaced with additional spacing. The hit areas
    for the buttons are also a bit larger now, making them easier to press
    on mobile.

    Tested the following in Chrome, Safari, and Firefox with both plain text
    and Markdown:

    • Inline editors in the review request field
    • Inline editors in the review dialog
    • Comment dialog

    Each was tested with small amounts of text and many pages of text, to check
    for any scrolling or padding issues.

    Made sure that the ancient styles that were removed weren't actually being
    used and that their removal didn't affect any display or usage.


    Commits

    Files