packages/react-cq-demo/src/jquery.highlight-within-textarea.js
function() {
      // take padding and border pixels from highlights div
      let padding = this.$highlights.css([
        "padding-top",
        "padding-right",
        "padding-bottom",
        "padding-left"
      ]);
      let border = this.$highlights.css([
        "border-top-width",
        "border-right-width",
        "border-bottom-width",
        "border-left-width"
      ]);
      this.$highlights.css({
        padding: "0",
        "border-width": "0"
      });

      this.$backdrop
        .css({
          // give padding pixels to backdrop div
          "margin-top": "+=" + padding["padding-top"],
          "margin-right": "+=" + padding["padding-right"],
          "margin-bottom": "+=" + padding["padding-bottom"],
          "margin-left": "+=" + padding["padding-left"]
        })
        .css({
          // give border pixels to backdrop div
          "margin-top": "+=" + border["border-top-width"],
          "margin-right": "+=" + border["border-right-width"],
          "margin-bottom": "+=" + border["border-bottom-width"],
          "margin-left": "+=" + border["border-left-width"]
        });
    }
function() {
      // take padding and border pixels from highlights div
      let padding = this.$highlights.css([
        "padding-top",
        "padding-right",
        "padding-bottom",
        "padding-left"
      ]);
      let border = this.$highlights.css([
        "border-top-width",
        "border-right-width",
        "border-bottom-width",
        "border-left-width"
      ]);
      this.$highlights.css({
        padding: "0",
        "border-width": "0"
      });

      this.$backdrop
        .css({
          // give padding pixels to backdrop div
          "margin-top": "+=" + padding["padding-top"],
          "margin-right": "+=" + padding["padding-right"],
          "margin-bottom": "+=" + padding["padding-bottom"],
          "margin-left": "+=" + padding["padding-left"]
        })
        .css({
          // give border pixels to backdrop div
          "margin-top": "+=" + border["border-top-width"],
          "margin-right": "+=" + border["border-right-width"],
          "margin-bottom": "+=" + border["border-bottom-width"],
          "margin-left": "+=" + border["border-left-width"]
        });
    }
function ( ) { // take padding and border pixels from highlights div let padding = this . $highlights . css ( [ "padding-top" , "padding-right" , "padding-bottom" , "padding-left" ] ) ; let border = this . $highlights . css ( [ "border-top-width" , "border-right-width" , "border-bottom-width" , "border-left-width" ] ) ; this . $highlights . css ( { padding : "0" , "border-width" : "0" } ) ; this . $backdrop . css ( { // give padding pixels to backdrop div "margin-top" : "+=" + padding [ "padding-top" ] , "margin-right" : "+=" + padding [ "padding-right" ] , "margin-bottom" : "+=" + padding [ "padding-bottom" ] , "margin-left" : "+=" + padding [ "padding-left" ] } ) . css ( { // give border pixels to backdrop div "margin-top" : "+=" + border [ "border-top-width" ] , "margin-right" : "+=" + border [ "border-right-width" ] , "margin-bottom" : "+=" + border [ "border-bottom-width" ] , "margin-left" : "+=" + border [ "border-left-width" ] } ) ; }
Firefox doesn't show text that scrolls into the padding of a textarea, so rearrange a couple box models to make highlights behave the same way
Firefox doesn t show text that scrolls into the padding of a textarea so rearrange a couple box models to make highlights behave the same way