From ba2c339f42dc5b46b0c7796fb28638a8551ac566 Mon Sep 17 00:00:00 2001 From: Mazaa Fard Date: Sat, 24 Feb 2024 22:12:59 +0000 Subject: [PATCH 1/9] Correct the direction of the Persian language text --- src/components/post/post.jsx | 9 ++++++++- styles/shared/post.scss | 7 +++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/post/post.jsx b/src/components/post/post.jsx index 065b53ab4..b3125956d 100644 --- a/src/components/post/post.jsx +++ b/src/components/post/post.jsx @@ -367,6 +367,12 @@ class Post extends Component { ); } + getTextAlignText = (char) => { + const rtlChars = + '\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFBC1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFD\uFE70-\uFE74\uFE76-\uFEFC'; + const rtlRegex = new RegExp(`[${rtlChars}]`); + return rtlRegex.test(char); + }; render() { const { props } = this; @@ -384,6 +390,7 @@ class Post extends Component { const linkToEmbed = getFirstLinkToEmbed(props.body); const { role, postLabel } = this.getAriaLabels(); + const postText = this.getTextAlignText(props.body.charAt(0)) ? 'post-text rtl' : 'post-text'; return ( @@ -425,7 +432,7 @@ class Post extends Component { comments={props.comments} usersLikedPost={props.usersLikedPost} /> -
+
Date: Sat, 24 Feb 2024 22:12:59 +0000 Subject: [PATCH 2/9] Correct the direction of the Persian language text --- styles/shared/post.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/shared/post.scss b/styles/shared/post.scss index 8811c8d42..af6a0f703 100644 --- a/styles/shared/post.scss +++ b/styles/shared/post.scss @@ -431,6 +431,7 @@ $post-line-height: rem(20px); font-size: rem(21px); line-height: rem(26px); + &.rtl { text-align: right; } From 33e2881d134b70a081915e25cea939568ec25e50 Mon Sep 17 00:00:00 2001 From: Mazaa Fard Date: Sat, 24 Feb 2024 22:12:59 +0000 Subject: [PATCH 3/9] Correct the direction of the Persian language text --- src/components/post/post.jsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/post/post.jsx b/src/components/post/post.jsx index b3125956d..44da684a8 100644 --- a/src/components/post/post.jsx +++ b/src/components/post/post.jsx @@ -368,10 +368,8 @@ class Post extends Component { ); } getTextAlignText = (char) => { - const rtlChars = - '\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFBC1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFD\uFE70-\uFE74\uFE76-\uFEFC'; - const rtlRegex = new RegExp(`[${rtlChars}]`); - return rtlRegex.test(char); + const persianRegex = /[\u0600-\u065F\u066A-\u06EF\u06FA-\u06FF]/g; + return persianRegex.test(char); }; render() { @@ -390,7 +388,7 @@ class Post extends Component { const linkToEmbed = getFirstLinkToEmbed(props.body); const { role, postLabel } = this.getAriaLabels(); - const postText = this.getTextAlignText(props.body.charAt(0)) ? 'post-text rtl' : 'post-text'; + const postText = this.getTextAlignText(props.body) ? 'post-text rtl' : 'post-text'; return ( From c8e0adda4fbd9d9f19a9eece3d15e4c871deb114 Mon Sep 17 00:00:00 2001 From: Mazaa Fard Date: Sun, 25 Feb 2024 00:40:14 +0000 Subject: [PATCH 4/9] Add changes to changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a5dbdc50e..23c9f934e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [1.128.0] - Not released ### Fixed - Fix lightbox for some old attachments that have no sizes in API responses. +- Fix the text direction for Persian language content. ### Added - Drafts. When a user creates/edits a post or comment, the entered text is automatically saved to localStorage. This prevents accidental loss of content From eed52025ab88ec2fb749017ff59edc039d19cb06 Mon Sep 17 00:00:00 2001 From: David Mzareulyan Date: Sun, 25 Feb 2024 12:50:44 +0300 Subject: [PATCH 5/9] Align RTL texts to right in post bodies and user descriptions --- CHANGELOG.md | 3 +++ src/components/user-profile-head.module.scss | 4 ++++ styles/shared/post.scss | 4 ++++ 3 files changed, 11 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a5dbdc50e..9a31291a6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 User can disable drafts saving on the Settings / Privacy page. In this case, drafts will still work, but will not be saved to persistent storage and will be lost on tab close/reload. +### Changed +- RTL texts are now right-aligned in the post bodies and in the user + descriptions. ## [1.127.3] - 2024-02-14 ### Fixed diff --git a/src/components/user-profile-head.module.scss b/src/components/user-profile-head.module.scss index 7239bab57..b2a6730b3 100644 --- a/src/components/user-profile-head.module.scss +++ b/src/components/user-profile-head.module.scss @@ -102,6 +102,10 @@ $actions-padding: 0.75em; &:empty { display: none; } + + & :global(.Linkify) { + display: block; + } } .stats { diff --git a/styles/shared/post.scss b/styles/shared/post.scss index 3618fd80b..f767f3918 100644 --- a/styles/shared/post.scss +++ b/styles/shared/post.scss @@ -98,6 +98,10 @@ $post-line-height: rem(20px); } } + .Linkify { + display: block; + } + a { color: #000088; } From 568e0873b942700ac762e2e640359413564405ea Mon Sep 17 00:00:00 2001 From: Mazaa Fard Date: Sun, 25 Feb 2024 13:57:23 +0000 Subject: [PATCH 6/9] fix textbody in post --- src/components/post/post.jsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/post/post.jsx b/src/components/post/post.jsx index 44da684a8..53e8c539d 100644 --- a/src/components/post/post.jsx +++ b/src/components/post/post.jsx @@ -14,7 +14,7 @@ import { } from '@fortawesome/free-solid-svg-icons'; import { pluralForm } from '../../utils'; -import { getFirstLinkToEmbed } from '../../utils/parse-text'; +import { getFirstLinkToEmbed, getTextAlign } from '../../utils/parse-text'; import { canonicalURI } from '../../utils/canonical-uri'; import { READMORE_STYLE_COMPACT } from '../../utils/frontend-preferences-options'; import { postReadmoreConfig } from '../../utils/readmore-config'; @@ -367,10 +367,6 @@ class Post extends Component {
); } - getTextAlignText = (char) => { - const persianRegex = /[\u0600-\u065F\u066A-\u06EF\u06FA-\u06FF]/g; - return persianRegex.test(char); - }; render() { const { props } = this; @@ -388,7 +384,7 @@ class Post extends Component { const linkToEmbed = getFirstLinkToEmbed(props.body); const { role, postLabel } = this.getAriaLabels(); - const postText = this.getTextAlignText(props.body) ? 'post-text rtl' : 'post-text'; + const postText = getTextAlign(props.body) ? 'post-text rtl' : 'post-text'; return ( From b393a800cd294b836a1c0fbbc3bd6cfac614322e Mon Sep 17 00:00:00 2001 From: Mazaa Fard Date: Sun, 25 Feb 2024 13:59:44 +0000 Subject: [PATCH 7/9] fix description text align in user profile --- src/components/user-profile-head.jsx | 5 ++++- src/components/user-profile-head.module.scss | 8 ++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/user-profile-head.jsx b/src/components/user-profile-head.jsx index aa1cd147b..c9f1190b6 100644 --- a/src/components/user-profile-head.jsx +++ b/src/components/user-profile-head.jsx @@ -31,6 +31,7 @@ import { enableBansInGroup, } from '../redux/action-creators'; import { USERNAME } from '../utils/hide-criteria'; +import { getTextAlign } from '../utils/parse-text'; import { withKey } from './with-key'; import { UserPicture } from './user-picture'; import { Throbber } from './throbber'; @@ -263,6 +264,8 @@ export const UserProfileHead = withRouter( const isAuthenticated = !!currentUser; + const postText = `${styles.description}${getTextAlign(user.description) ? ` ${styles.rtl}` : ''}`; + return (
@@ -288,7 +291,7 @@ export const UserProfileHead = withRouter( />
-
+
{isAuthenticated && !isCurrentUser && ( diff --git a/src/components/user-profile-head.module.scss b/src/components/user-profile-head.module.scss index 7239bab57..3f85bf3f4 100644 --- a/src/components/user-profile-head.module.scss +++ b/src/components/user-profile-head.module.scss @@ -99,9 +99,17 @@ $actions-padding: 0.75em; grid-area: description; margin-top: 0.66em; + &.rtl { + text-align: right; + } + &:empty { display: none; } + + &:global(.Linkify) { + display: block; + } } .stats { From d34a0d0343cf68e4af091377c5a1bdf066245513 Mon Sep 17 00:00:00 2001 From: Mazaa Fard Date: Sun, 25 Feb 2024 14:01:48 +0000 Subject: [PATCH 8/9] add text align detector helper --- src/utils/parse-text.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/utils/parse-text.js b/src/utils/parse-text.js index b5cc89a6a..ad26fbb9a 100644 --- a/src/utils/parse-text.js +++ b/src/utils/parse-text.js @@ -1,14 +1,14 @@ /* global CONFIG */ import { - withTexts, + arrows, combine, - hashtags, emails, - mentions, foreignMentions, - links, - arrows, + hashtags, LINK, + links, + mentions, + withTexts, } from 'social-text-tokenizer'; import { linkHref } from 'social-text-tokenizer/prettifiers'; @@ -175,3 +175,8 @@ for (const srv of foreignMentionServices) { shortCodeToService[code] = srv; } } + +export function getTextAlign(char) { + const persianRegex = /[\u0600-\u065F\u066A-\u06EF\u06FA-\u06FF]/g; + return persianRegex.test(char); +} From 5850d2f61a31078d443cbdafbd9dd16faf4e8c61 Mon Sep 17 00:00:00 2001 From: Mazaa Fard Date: Sun, 25 Feb 2024 14:02:48 +0000 Subject: [PATCH 9/9] add global linkify display block to post styles --- styles/shared/post.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles/shared/post.scss b/styles/shared/post.scss index af6a0f703..ed34e1b31 100644 --- a/styles/shared/post.scss +++ b/styles/shared/post.scss @@ -102,6 +102,10 @@ $post-line-height: rem(20px); } } + .Linkify { + display: block; + } + a { color: #000088; }