editor.diff

2c2
<   <div class="CodeMirror cm-s-default CodeMirror-focused">
---
>   <div class="CodeMirror cm-s-default">
13c13
<       style="right: 0px; left: 30px; height: 18px; pointer-events: none;"
---
>       style="height: 18px; pointer-events: none;"
22c22
<         style="margin-left: 30px; margin-bottom: 0px; border-right-width: 30px; min-height: 155px; min-width: 687px; padding-right: 0px; padding-bottom: 0px;"
---
>         style="margin-left: 0px; min-width: 3px; margin-bottom: 0px; border-right-width: 30px; min-height: 155px; padding-right: 0px; padding-bottom: 0px;"
32c32
<               <div class="CodeMirror-cursors" style="visibility: hidden;"></div>
---
>               <div class="CodeMirror-cursors" style=""></div>
47c47
<                     style="left: -30px;"
---
>                     style="left: 0px;"
51c51
<                       style="left: 0px; width: 21px;"
---
>                       style="left: 0px; width: 1px;"
65c65
<                     style="left: -30px;"
---
>                     style="left: 0px;"
69c69
<                       style="left: 0px; width: 21px;"
---
>                       style="left: 0px; width: 1px;"
83c83
<                     style="left: -30px;"
---
>                     style="left: 0px;"
87c87
<                       style="left: 0px; width: 21px;"
---
>                       style="left: 0px; width: 1px;"
101c101
<                     style="left: -30px;"
---
>                     style="left: 0px;"
105c105
<                       style="left: 0px; width: 21px;"
---
>                       style="left: 0px; width: 1px;"
119c119
<                     style="left: -30px;"
---
>                     style="left: 0px;"
123c123
<                       style="left: 0px; width: 21px;"
---
>                       style="left: 0px; width: 1px;"
137c137
<                     style="left: -30px;"
---
>                     style="left: 0px;"
141c141
<                       style="left: 0px; width: 21px;"
---
>                       style="left: 0px; width: 1px;"
155c155
<                     style="left: -30px;"
---
>                     style="left: 0px;"
159c159
<                       style="left: 0px; width: 21px;"
---
>                       style="left: 0px; width: 1px;"
180c180
<           style="width: 29px;"
---
>           style="width: 1px;"

healthy.html

<div id="editor" class="editor">
  <div class="CodeMirror cm-s-default CodeMirror-focused">
    <div
      class="CodeMirror-vscrollbar"
      cm-not-content="true"
      style="width: 18px; pointer-events: none;"
    >
      <div style="min-width: 1px; height: 0px;"></div>
    </div>
    <div
      class="CodeMirror-hscrollbar"
      cm-not-content="true"
      style="right: 0px; left: 30px; height: 18px; pointer-events: none;"
    >
      <div style="height: 100%; min-height: 1px; width: 0px;"></div>
    </div>
    <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
    <div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
    <div class="CodeMirror-scroll" tabindex="-1">
      <div
        class="CodeMirror-sizer"
        style="margin-left: 30px; margin-bottom: 0px; border-right-width: 30px; min-height: 155px; min-width: 687px; padding-right: 0px; padding-bottom: 0px;"
      >
        <div style="position: relative; top: 0px;">
          <div class="CodeMirror-lines" role="presentation">
            <div role="presentation" style="position: relative; outline: none;">
              <div class="CodeMirror-measure">
                <span><span>​</span>x</span>
              </div>
              <div class="CodeMirror-measure"></div>
              <div style="position: relative; z-index: 1;"></div>
              <div class="CodeMirror-cursors" style="visibility: hidden;"></div>
              <div
                class="CodeMirror-code"
                role="presentation"
                autocorrect="off"
                autocapitalize="off"
                spellcheck="false"
                contenteditable="true"
                tabindex="0"
                style=""
              >
                <div style="position: relative;">
                  <div
                    class="CodeMirror-gutter-wrapper"
                    contenteditable="false"
                    style="left: -30px;"
                  >
                    <div
                      class="CodeMirror-linenumber CodeMirror-gutter-elt"
                      style="left: 0px; width: 21px;"
                    >
                      1
                    </div>
                  </div>
                  <pre
                    class=" CodeMirror-line "
                    role="presentation"
                  ><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">words</span> <span class="cm-operator">=</span> [<span class="cm-string">'spray'</span>, <span class="cm-string">'limit'</span>, <span class="cm-string">'elite'</span>, <span class="cm-string">'exuberant'</span>, <span class="cm-string">'destruction'</span>, <span class="cm-string">'present'</span>];</span></pre>
                </div>
                <div style="position: relative;">
                  <div
                    class="CodeMirror-gutter-wrapper"
                    contenteditable="false"
                    style="left: -30px;"
                  >
                    <div
                      class="CodeMirror-linenumber CodeMirror-gutter-elt"
                      style="left: 0px; width: 21px;"
                    >
                      2
                    </div>
                  </div>
                  <pre
                    class=" CodeMirror-line "
                    role="presentation"
                  ><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre>
                </div>
                <div style="position: relative;">
                  <div
                    class="CodeMirror-gutter-wrapper"
                    contenteditable="false"
                    style="left: -30px;"
                  >
                    <div
                      class="CodeMirror-linenumber CodeMirror-gutter-elt"
                      style="left: 0px; width: 21px;"
                    >
                      3
                    </div>
                  </div>
                  <pre
                    class=" CodeMirror-line "
                    role="presentation"
                  ><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">result</span> <span class="cm-operator">=</span> <span class="cm-variable">words</span>.<span class="cm-property">filter</span>(<span class="cm-def">word</span> <span class="cm-operator">=&gt;</span> <span class="cm-variable-2">word</span>.<span class="cm-property">length</span> <span class="cm-operator">&gt;</span> <span class="cm-number">6</span>);</span></pre>
                </div>
                <div style="position: relative;">
                  <div
                    class="CodeMirror-gutter-wrapper"
                    contenteditable="false"
                    style="left: -30px;"
                  >
                    <div
                      class="CodeMirror-linenumber CodeMirror-gutter-elt"
                      style="left: 0px; width: 21px;"
                    >
                      4
                    </div>
                  </div>
                  <pre
                    class=" CodeMirror-line "
                    role="presentation"
                  ><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre>
                </div>
                <div style="position: relative;">
                  <div
                    class="CodeMirror-gutter-wrapper"
                    contenteditable="false"
                    style="left: -30px;"
                  >
                    <div
                      class="CodeMirror-linenumber CodeMirror-gutter-elt"
                      style="left: 0px; width: 21px;"
                    >
                      5
                    </div>
                  </div>
                  <pre
                    class=" CodeMirror-line "
                    role="presentation"
                  ><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">result</span>);</span></pre>
                </div>
                <div style="position: relative;">
                  <div
                    class="CodeMirror-gutter-wrapper"
                    contenteditable="false"
                    style="left: -30px;"
                  >
                    <div
                      class="CodeMirror-linenumber CodeMirror-gutter-elt"
                      style="left: 0px; width: 21px;"
                    >
                      6
                    </div>
                  </div>
                  <pre
                    class=" CodeMirror-line "
                    role="presentation"
                  ><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// expected output: Array ["exuberant", "destruction", "present"]</span></span></pre>
                </div>
                <div style="position: relative;">
                  <div
                    class="CodeMirror-gutter-wrapper"
                    contenteditable="false"
                    style="left: -30px;"
                  >
                    <div
                      class="CodeMirror-linenumber CodeMirror-gutter-elt"
                      style="left: 0px; width: 21px;"
                    >
                      7
                    </div>
                  </div>
                  <pre
                    class=" CodeMirror-line "
                    role="presentation"
                  ><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        style="position: absolute; height: 30px; width: 1px; border-bottom: 0px solid transparent; top: 155px;"
      ></div>
      <div class="CodeMirror-gutters" style="height: 185px;">
        <div
          class="CodeMirror-gutter CodeMirror-linenumbers"
          style="width: 29px;"
        ></div>
      </div>
    </div>
  </div>
</div>

unhealthy.html

<div id="editor" class="editor">
  <div class="CodeMirror cm-s-default">
    <div
      class="CodeMirror-vscrollbar"
      cm-not-content="true"
      style="width: 18px; pointer-events: none;"
    >
      <div style="min-width: 1px; height: 0px;"></div>
    </div>
    <div
      class="CodeMirror-hscrollbar"
      cm-not-content="true"
      style="height: 18px; pointer-events: none;"
    >
      <div style="height: 100%; min-height: 1px; width: 0px;"></div>
    </div>
    <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
    <div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
    <div class="CodeMirror-scroll" tabindex="-1">
      <div
        class="CodeMirror-sizer"
        style="margin-left: 0px; min-width: 3px; margin-bottom: 0px; border-right-width: 30px; min-height: 155px; padding-right: 0px; padding-bottom: 0px;"
      >
        <div style="position: relative; top: 0px;">
          <div class="CodeMirror-lines" role="presentation">
            <div role="presentation" style="position: relative; outline: none;">
              <div class="CodeMirror-measure">
                <span><span>​</span>x</span>
              </div>
              <div class="CodeMirror-measure"></div>
              <div style="position: relative; z-index: 1;"></div>
              <div class="CodeMirror-cursors" style=""></div>
              <div
                class="CodeMirror-code"
                role="presentation"
                autocorrect="off"
                autocapitalize="off"
                spellcheck="false"
                contenteditable="true"
                tabindex="0"
                style=""
              >
                <div style="position: relative;">
                  <div
                    class="CodeMirror-gutter-wrapper"
                    contenteditable="false"
                    style="left: 0px;"
                  >
                    <div
                      class="CodeMirror-linenumber CodeMirror-gutter-elt"
                      style="left: 0px; width: 1px;"
                    >
                      1
                    </div>
                  </div>
                  <pre
                    class=" CodeMirror-line "
                    role="presentation"
                  ><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">words</span> <span class="cm-operator">=</span> [<span class="cm-string">'spray'</span>, <span class="cm-string">'limit'</span>, <span class="cm-string">'elite'</span>, <span class="cm-string">'exuberant'</span>, <span class="cm-string">'destruction'</span>, <span class="cm-string">'present'</span>];</span></pre>
                </div>
                <div style="position: relative;">
                  <div
                    class="CodeMirror-gutter-wrapper"
                    contenteditable="false"
                    style="left: 0px;"
                  >
                    <div
                      class="CodeMirror-linenumber CodeMirror-gutter-elt"
                      style="left: 0px; width: 1px;"
                    >
                      2
                    </div>
                  </div>
                  <pre
                    class=" CodeMirror-line "
                    role="presentation"
                  ><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre>
                </div>
                <div style="position: relative;">
                  <div
                    class="CodeMirror-gutter-wrapper"
                    contenteditable="false"
                    style="left: 0px;"
                  >
                    <div
                      class="CodeMirror-linenumber CodeMirror-gutter-elt"
                      style="left: 0px; width: 1px;"
                    >
                      3
                    </div>
                  </div>
                  <pre
                    class=" CodeMirror-line "
                    role="presentation"
                  ><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">result</span> <span class="cm-operator">=</span> <span class="cm-variable">words</span>.<span class="cm-property">filter</span>(<span class="cm-def">word</span> <span class="cm-operator">=&gt;</span> <span class="cm-variable-2">word</span>.<span class="cm-property">length</span> <span class="cm-operator">&gt;</span> <span class="cm-number">6</span>);</span></pre>
                </div>
                <div style="position: relative;">
                  <div
                    class="CodeMirror-gutter-wrapper"
                    contenteditable="false"
                    style="left: 0px;"
                  >
                    <div
                      class="CodeMirror-linenumber CodeMirror-gutter-elt"
                      style="left: 0px; width: 1px;"
                    >
                      4
                    </div>
                  </div>
                  <pre
                    class=" CodeMirror-line "
                    role="presentation"
                  ><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre>
                </div>
                <div style="position: relative;">
                  <div
                    class="CodeMirror-gutter-wrapper"
                    contenteditable="false"
                    style="left: 0px;"
                  >
                    <div
                      class="CodeMirror-linenumber CodeMirror-gutter-elt"
                      style="left: 0px; width: 1px;"
                    >
                      5
                    </div>
                  </div>
                  <pre
                    class=" CodeMirror-line "
                    role="presentation"
                  ><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">result</span>);</span></pre>
                </div>
                <div style="position: relative;">
                  <div
                    class="CodeMirror-gutter-wrapper"
                    contenteditable="false"
                    style="left: 0px;"
                  >
                    <div
                      class="CodeMirror-linenumber CodeMirror-gutter-elt"
                      style="left: 0px; width: 1px;"
                    >
                      6
                    </div>
                  </div>
                  <pre
                    class=" CodeMirror-line "
                    role="presentation"
                  ><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// expected output: Array ["exuberant", "destruction", "present"]</span></span></pre>
                </div>
                <div style="position: relative;">
                  <div
                    class="CodeMirror-gutter-wrapper"
                    contenteditable="false"
                    style="left: 0px;"
                  >
                    <div
                      class="CodeMirror-linenumber CodeMirror-gutter-elt"
                      style="left: 0px; width: 1px;"
                    >
                      7
                    </div>
                  </div>
                  <pre
                    class=" CodeMirror-line "
                    role="presentation"
                  ><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        style="position: absolute; height: 30px; width: 1px; border-bottom: 0px solid transparent; top: 155px;"
      ></div>
      <div class="CodeMirror-gutters" style="height: 185px;">
        <div
          class="CodeMirror-gutter CodeMirror-linenumbers"
          style="width: 1px;"
        ></div>
      </div>
    </div>
  </div>
</div>