UX: Makes the theme editor display placeholder correctly for RTL languages (#11800)

This fixes https://discourse.crowdin.com/translate/f3230e7607a36bb0a2f97fd90605a44e/246/en-he#53834

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();
+    };
+  },
 });

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")

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}}

app/assets/javascripts/discourse/app/lib/text-direction.js

@@ -29,3 +29,7 @@ export function siteDir() {
   }
   return _siteDir;
 }
+
+export function isDocumentRTL() {
+  return siteDir() === "rtl";
+}

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;
+  }
+}

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: