diff --git a/app/assets/javascripts/discourse/app/lib/text-direction.js b/app/assets/javascripts/discourse/app/lib/text-direction.js index 9c01d1d3fa1..26c2b3f6593 100644 --- a/app/assets/javascripts/discourse/app/lib/text-direction.js +++ b/app/assets/javascripts/discourse/app/lib/text-direction.js @@ -16,7 +16,11 @@ export function isLTR(text) { export function setTextDirections(elem) { for (let e of elem.children) { if (e.textContent) { - e.setAttribute("dir", isRTL(e.textContent) ? "rtl" : "ltr"); + if (e.tagName === "ASIDE" && e.classList.contains("quote")) { + setTextDirectionsForQuote(e); + } else { + e.setAttribute("dir", isRTL(e.textContent) ? "rtl" : "ltr"); + } } } } @@ -33,3 +37,15 @@ export function siteDir() { export function isDocumentRTL() { return siteDir() === "rtl"; } + +function setTextDirectionsForQuote(quoteElem) { + for (let titleElem of quoteElem.querySelectorAll(".title")) { + titleElem.setAttribute("dir", siteDir()); + } + for (let quoteParagraphElem of quoteElem.querySelectorAll("blockquote > p")) { + quoteParagraphElem.setAttribute( + "dir", + isRTL(quoteParagraphElem.textContent) ? "rtl" : "ltr" + ); + } +} diff --git a/app/assets/javascripts/discourse/tests/unit/lib/text-direction-test.js b/app/assets/javascripts/discourse/tests/unit/lib/text-direction-test.js index 1efb4c17c1d..6a6e28c7a8a 100644 --- a/app/assets/javascripts/discourse/tests/unit/lib/text-direction-test.js +++ b/app/assets/javascripts/discourse/tests/unit/lib/text-direction-test.js @@ -1,6 +1,35 @@ -import { isLTR, isRTL } from "discourse/lib/text-direction"; +import { isLTR, isRTL, setTextDirections } from "discourse/lib/text-direction"; import { module, test } from "qunit"; +function quoteHtml() { + return ` + +
Testing quotes with mixed text direction!
+تجربة الاقتباسات مع نصوص باتجاهات مختلفة
+ `; +} + +function assertDirection(assert, elem, expected, message) { + assert.strictEqual(elem.getAttribute("dir"), expected, message); +} + module("Unit | Utility | text-direction", function () { test("isRTL", function (assert) { // Hebrew @@ -20,4 +49,73 @@ module("Unit | Utility | text-direction", function () { assert.strictEqual(isLTR("This is a test"), true); assert.strictEqual(isLTR("זה מבחן"), false); }); + + test("setTextDirections", function (assert) { + const cooked = document.createElement("div"); + cooked.classList.add("cooked"); + cooked.innerHTML = quoteHtml(); + setTextDirections(cooked); + + const [englishTitle, arabicTitle] = Array.from( + cooked.querySelectorAll(".title") + ); + assertDirection( + assert, + englishTitle, + "ltr", + "quote title always matches site direction regardless of its content" + ); + assertDirection( + assert, + arabicTitle, + "ltr", + "quote title always matches site direction regardless of its content" + ); + + const [ + quotedRtl, + quotedLtr, + quotedLtrNested, + quotedRtlNested, + notQuotedLtr, + notQuotedRtl, + ] = Array.from(cooked.querySelectorAll("p")); + + assertDirection( + assert, + quotedRtl, + "rtl", + "RTL paragraphs inside quote have rtl dir" + ); + assertDirection( + assert, + quotedLtr, + "ltr", + "LTR paragraphs inside quote have ltr dir" + ); + assertDirection( + assert, + quotedLtrNested, + "ltr", + "LTR paragraphs inside nested quote have ltr dir" + ); + assertDirection( + assert, + quotedRtlNested, + "rtl", + "RTL paragraphs inside nested quote have rtl dir" + ); + assertDirection( + assert, + notQuotedLtr, + "ltr", + "LTR paragraphs outside quotes have ltr dir" + ); + assertDirection( + assert, + notQuotedRtl, + "rtl", + "RTL paragraphs outside quotes have rtl dir" + ); + }); });