From b652791a208a12ae79c288314e923a61b3c5b1f5 Mon Sep 17 00:00:00 2001
From: scossar <scossar3@gmail.com>
Date: Thu, 28 Dec 2017 12:47:34 -0800
Subject: [PATCH 1/2] Add id to clone div; override inline styles for rtl
 locales

---
 app/assets/stylesheets/common/base/rtl.scss | 6 ++++++
 vendor/assets/javascripts/caret_position.js | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/common/base/rtl.scss b/app/assets/stylesheets/common/base/rtl.scss
index ad7e5c4af7a..1af800b288c 100644
--- a/app/assets/stylesheets/common/base/rtl.scss
+++ b/app/assets/stylesheets/common/base/rtl.scss
@@ -56,3 +56,9 @@ float: left !important;
 .rtl .dashboard-right {
   float: left !important;
 }
+
+// Right and left will be flipped by the r2 gem
+.rtl #caret-clone[style] {
+  right: auto !important;
+  left: -7000px !important;
+}
diff --git a/vendor/assets/javascripts/caret_position.js b/vendor/assets/javascripts/caret_position.js
index e3f94b3597d..beadddffdbd 100644
--- a/vendor/assets/javascripts/caret_position.js
+++ b/vendor/assets/javascripts/caret_position.js
@@ -45,7 +45,7 @@ $.fn.caretPosition = function(options) {
   };
 
   styles = getStyles(textarea[0]);
-  clone = $("<div><p></p></div>").appendTo("body");
+  clone = $("<div id='caret-clone'><p></p></div>").appendTo("body");
   p = clone.find("p");
   clone.width(textarea.width());
   clone.height(textarea.height());

From d0c467babcbb0acc52bd98c7898c6688778e7f32 Mon Sep 17 00:00:00 2001
From: scossar <scossar3@gmail.com>
Date: Wed, 17 Jan 2018 12:09:27 -0800
Subject: [PATCH 2/2] Set caret-clone position based on rtl class

---
 app/assets/stylesheets/common/base/rtl.scss | 6 ------
 vendor/assets/javascripts/caret_position.js | 6 ++++--
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/common/base/rtl.scss b/app/assets/stylesheets/common/base/rtl.scss
index 1af800b288c..ad7e5c4af7a 100644
--- a/app/assets/stylesheets/common/base/rtl.scss
+++ b/app/assets/stylesheets/common/base/rtl.scss
@@ -56,9 +56,3 @@ float: left !important;
 .rtl .dashboard-right {
   float: left !important;
 }
-
-// Right and left will be flipped by the r2 gem
-.rtl #caret-clone[style] {
-  right: auto !important;
-  left: -7000px !important;
-}
diff --git a/vendor/assets/javascripts/caret_position.js b/vendor/assets/javascripts/caret_position.js
index beadddffdbd..8a7b2e0616e 100644
--- a/vendor/assets/javascripts/caret_position.js
+++ b/vendor/assets/javascripts/caret_position.js
@@ -45,7 +45,7 @@ $.fn.caretPosition = function(options) {
   };
 
   styles = getStyles(textarea[0]);
-  clone = $("<div id='caret-clone'><p></p></div>").appendTo("body");
+  clone = $("<div><p></p></div>").appendTo("body");
   p = clone.find("p");
   clone.width(textarea.width());
   clone.height(textarea.height());
@@ -54,6 +54,7 @@ $.fn.caretPosition = function(options) {
     return styles.getPropertyValue(prop);
   };
 
+  const isRTL = $('html').hasClass('rtl');
   clone.css({
     border: "1px solid black",
     padding: important("padding"),
@@ -62,7 +63,8 @@ $.fn.caretPosition = function(options) {
     "overflow-y": "auto",
     "word-wrap": "break-word",
     position: "absolute",
-    left: "-7000px"
+    left: isRTL ? "auto" : "-7000px",
+    right: isRTL ? "-7000px" : "auto"
   });
 
   p.css({