From 71656d2c37a3e89f398005bed80e0ac54f866b20 Mon Sep 17 00:00:00 2001
From: Gerhard Schlager <mail@gerhard-schlager.at>
Date: Fri, 22 Jan 2021 16:03:43 +0100
Subject: [PATCH] UX: Makes the theme editor display placeholder correctly for
 RTL languages (#11800)

This fixes https://discourse.crowdin.com/translate/f3230e7607a36bb0a2f97fd90605a44e/246/en-he#53834
---
 .../admin/addon/components/ace-editor.js      | 33 +++++++++++++++++++
 .../addon/components/admin-theme-editor.js    | 15 +++++++--
 .../components/admin-theme-editor.hbs         |  2 +-
 .../discourse/app/lib/text-direction.js       |  4 +++
 app/assets/stylesheets/common/base/rtl.scss   |  9 +++++
 config/locales/client.en.yml                  |  4 +--
 6 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/ace-editor.js b/app/assets/javascripts/admin/addon/components/ace-editor.js
index 4f703450030..862d6111884 100644
--- a/app/assets/javascripts/admin/addon/components/ace-editor.js
+++ b/app/assets/javascripts/admin/addon/components/ace-editor.js
@@ -10,6 +10,7 @@ export default Component.extend({
   _editor: null,
   _skipContentChangeEvent: null,
   disabled: false,
+  htmlPlaceholder: false,
 
   @observes("editorId")
   editorIdChanged() {
@@ -86,6 +87,10 @@ export default Component.extend({
         loadedAce.config.set("loadWorkerFromBlob", false);
         loadedAce.config.set("workerPath", getURL("/javascripts/ace")); // Do not use CDN for workers
 
+        if (this.htmlPlaceholder) {
+          this._overridePlaceholder(loadedAce);
+        }
+
         if (!this.element || this.isDestroying || this.isDestroyed) {
           return;
         }
@@ -131,4 +136,32 @@ export default Component.extend({
       }
     },
   },
+
+  _overridePlaceholder(loadedAce) {
+    const originalPlaceholderSetter =
+      loadedAce.config.$defaultOptions.editor.placeholder.set;
+
+    loadedAce.config.$defaultOptions.editor.placeholder.set = function () {
+      if (!this.$updatePlaceholder) {
+        const originalRendererOn = this.renderer.on;
+        this.renderer.on = function () {};
+        originalPlaceholderSetter.call(this, ...arguments);
+        this.renderer.on = originalRendererOn;
+
+        const originalUpdatePlaceholder = this.$updatePlaceholder;
+
+        this.$updatePlaceholder = function () {
+          originalUpdatePlaceholder.call(this, ...arguments);
+
+          if (this.renderer.placeholderNode) {
+            this.renderer.placeholderNode.innerHTML = this.$placeholder || "";
+          }
+        }.bind(this);
+
+        this.on("input", this.$updatePlaceholder);
+      }
+
+      this.$updatePlaceholder();
+    };
+  },
 });
diff --git a/app/assets/javascripts/admin/addon/components/admin-theme-editor.js b/app/assets/javascripts/admin/addon/components/admin-theme-editor.js
index ac073c4b551..ebf733e749b 100644
--- a/app/assets/javascripts/admin/addon/components/admin-theme-editor.js
+++ b/app/assets/javascripts/admin/addon/components/admin-theme-editor.js
@@ -2,6 +2,7 @@ import Component from "@ember/component";
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import { fmt } from "discourse/lib/computed";
+import { isDocumentRTL } from "discourse/lib/text-direction";
 import { next } from "@ember/runloop";
 
 export default Component.extend({
@@ -43,9 +44,17 @@ export default Component.extend({
 
   @discourseComputed("currentTargetName", "fieldName")
   placeholder(targetName, fieldName) {
-    return fieldName && fieldName === "color_definitions"
-      ? I18n.t("admin.customize.theme.color_definitions.placeholder")
-      : "";
+    if (fieldName && fieldName === "color_definitions") {
+      const example =
+        ":root {\n" +
+        "  --mytheme-tertiary-or-quaternary: #{dark-light-choose($tertiary, $quaternary)};\n" +
+        "}";
+
+      return I18n.t("admin.customize.theme.color_definitions.placeholder", {
+        example: isDocumentRTL() ? `<div dir="ltr">${example}</div>` : example,
+      });
+    }
+    return "";
   },
 
   @discourseComputed("fieldName", "currentTargetName", "theme")
diff --git a/app/assets/javascripts/admin/addon/templates/components/admin-theme-editor.hbs b/app/assets/javascripts/admin/addon/templates/components/admin-theme-editor.hbs
index ce928108a21..5458ee10d8b 100644
--- a/app/assets/javascripts/admin/addon/templates/components/admin-theme-editor.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/admin-theme-editor.hbs
@@ -87,4 +87,4 @@
   <pre class="field-error">{{error}}</pre>
 {{/if}}
 
-{{ace-editor content=activeSection editorId=editorId mode=activeSectionMode autofocus="true" placeholder=placeholder}}
+{{ace-editor content=activeSection editorId=editorId mode=activeSectionMode autofocus="true" placeholder=placeholder htmlPlaceholder=true}}
diff --git a/app/assets/javascripts/discourse/app/lib/text-direction.js b/app/assets/javascripts/discourse/app/lib/text-direction.js
index 013cbdaed48..b3da0964b6e 100644
--- a/app/assets/javascripts/discourse/app/lib/text-direction.js
+++ b/app/assets/javascripts/discourse/app/lib/text-direction.js
@@ -29,3 +29,7 @@ export function siteDir() {
   }
   return _siteDir;
 }
+
+export function isDocumentRTL() {
+  return siteDir() === "rtl";
+}
diff --git a/app/assets/stylesheets/common/base/rtl.scss b/app/assets/stylesheets/common/base/rtl.scss
index de3ac13d76d..0995f19ca62 100644
--- a/app/assets/stylesheets/common/base/rtl.scss
+++ b/app/assets/stylesheets/common/base/rtl.scss
@@ -120,3 +120,12 @@
     }
   }
 }
+
+.rtl .ace_placeholder {
+  direction: rtl !important;
+  text-align: right !important;
+
+  [dir="ltr"] {
+    text-align: left !important;
+  }
+}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index c5492d634c6..330dcb19814 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -4166,9 +4166,7 @@ en:
 
               Example:
 
-              :root {
-                --mytheme-tertiary-or-quaternary: #{dark-light-choose($tertiary, $quaternary)};
-              }
+              %{example}
 
               Prefixing the property names is highly recommended to avoid conflicts with plugins and/or core.
           head_tag: