;
onChoseAttachments: (newAttachments: Array
) => void;
+ htmlDirection: HTMLDirection;
}
interface State {
@@ -119,26 +121,28 @@ interface State {
showCaptionEditor?: AttachmentType;
}
-const sendMessageStyle = {
- control: {
- wordBreak: 'break-all',
- },
- input: {
- overflow: 'auto',
- maxHeight: '50vh',
- wordBreak: 'break-word',
- padding: '0px',
- margin: '0px',
- },
- highlighter: {
- boxSizing: 'border-box',
- overflow: 'hidden',
- maxHeight: '50vh',
- },
- flexGrow: 1,
- minHeight: '24px',
- width: '100%',
- ...styleForCompositionBoxSuggestions,
+const sendMessageStyle = (dir?: HTMLDirection) => {
+ return {
+ control: {
+ wordBreak: 'break-all',
+ },
+ input: {
+ overflow: 'auto',
+ maxHeight: '50vh',
+ wordBreak: 'break-word',
+ padding: '0px',
+ margin: '0px',
+ },
+ highlighter: {
+ boxSizing: 'border-box',
+ overflow: 'hidden',
+ maxHeight: '50vh',
+ },
+ flexGrow: 1,
+ minHeight: '24px',
+ width: '100%',
+ ...styleForCompositionBoxSuggestions(dir),
+ };
};
const getDefaultState = (newConvoId?: string) => {
@@ -209,21 +213,23 @@ const getSelectionBasedOnMentions = (draft: string, index: number) => {
return Number.MAX_SAFE_INTEGER;
};
-const StyledEmojiPanelContainer = styled.div`
+const StyledEmojiPanelContainer = styled.div<{ dir?: HTMLDirection }>`
${StyledEmojiPanel} {
position: absolute;
bottom: 68px;
- right: 0px;
+ ${props => (props.dir === 'rtl' ? 'left: 0px' : 'right: 0px;')}
}
`;
-const StyledSendMessageInput = styled.div`
+const StyledSendMessageInput = styled.div<{ dir?: HTMLDirection }>`
+ position: relative;
cursor: text;
display: flex;
align-items: center;
flex-grow: 1;
min-height: var(--composition-container-height);
padding: var(--margins-xs) 0;
+ ${props => props.dir === 'rtl' && 'margin-inline-start: var(--margins-sm);'}
z-index: 1;
background-color: inherit;
@@ -235,7 +241,7 @@ const StyledSendMessageInput = styled.div`
textarea {
font-family: var(--font-default);
min-height: calc(var(--composition-container-height) / 3);
- max-height: 3 * var(--composition-container-height);
+ max-height: calc(3 * var(--composition-container-height));
margin-right: var(--margins-md);
color: var(--text-color-primary);
@@ -417,7 +423,13 @@ class CompositionBoxInner extends React.Component {
/* eslint-disable @typescript-eslint/no-misused-promises */
return (
- <>
+
{typingEnabled && }
{
{typingEnabled && }
{
this.container = el;
@@ -443,7 +456,7 @@ class CompositionBoxInner extends React.Component {
)}
{typingEnabled && }
{typingEnabled && showEmojiPanel && (
-
+
{
/>
)}
-
+
);
}
/* eslint-enable @typescript-eslint/no-misused-promises */
@@ -460,6 +473,7 @@ class CompositionBoxInner extends React.Component {
private renderTextArea() {
const { i18n } = window;
const { draft } = this.state;
+ const { htmlDirection } = this.props;
if (!this.props.selectedConversation) {
return null;
@@ -483,6 +497,8 @@ class CompositionBoxInner extends React.Component {
const { typingEnabled } = this.props;
const neverMatchingRegex = /($a)/;
+ const style = sendMessageStyle(htmlDirection);
+
return (
{
onKeyUp={this.onKeyUp}
placeholder={messagePlaceHolder}
spellCheck={true}
+ dir={htmlDirection}
inputRef={this.textarea}
disabled={!typingEnabled}
rows={1}
data-testid="message-input-text-area"
- style={sendMessageStyle}
+ style={style}
suggestionsPortalHost={this.container as any}
forceSuggestionsAboveCursor={true} // force mentions to be rendered on top of the cursor, this is working with a fork of react-mentions for now
>
@@ -507,7 +524,9 @@ class CompositionBoxInner extends React.Component {
markup="@ￒ__id__ￗ__display__ￒ" // ￒ = \uFFD2 is one of the forbidden char for a display name (check displayNameRegex)
trigger="@"
// this is only for the composition box visible content. The real stuff on the backend box is the @markup
- displayTransform={(_id, display) => `@${display}`}
+ displayTransform={(_id, display) =>
+ htmlDirection === 'rtl' ? `${display}@` : `@${display}`
+ }
data={this.fetchUsersForGroup}
renderSuggestion={renderUserMentionRow}
/>
diff --git a/ts/components/conversation/composition/EmojiQuickResult.tsx b/ts/components/conversation/composition/EmojiQuickResult.tsx
index 2e8c400f1..2d0526026 100644
--- a/ts/components/conversation/composition/EmojiQuickResult.tsx
+++ b/ts/components/conversation/composition/EmojiQuickResult.tsx
@@ -8,6 +8,7 @@ import { searchSync } from '../../../util/emoji.js';
const EmojiQuickResult = styled.span`
display: flex;
align-items: center;
+ min-width: 250px;
width: 100%;
padding-inline-end: 20px;
padding-inline-start: 10px;
diff --git a/ts/components/conversation/composition/UserMentions.tsx b/ts/components/conversation/composition/UserMentions.tsx
index 09f18ab0a..e5c7aeef5 100644
--- a/ts/components/conversation/composition/UserMentions.tsx
+++ b/ts/components/conversation/composition/UserMentions.tsx
@@ -1,28 +1,40 @@
import React from 'react';
import { SuggestionDataItem } from 'react-mentions';
import { MemberListItem } from '../../MemberListItem';
+import { HTMLDirection } from '../../../util/i18n';
-export const styleForCompositionBoxSuggestions = {
- suggestions: {
- list: {
- fontSize: 14,
- boxShadow: 'var(--suggestions-shadow)',
- backgroundColor: 'var(--suggestions-background-color)',
- color: 'var(--suggestions-text-color)',
- },
- item: {
- height: '100%',
- paddingTop: '5px',
- paddingBottom: '5px',
- backgroundColor: 'var(--suggestions-background-color)',
- color: 'var(--suggestions-text-color)',
- transition: '0.25s',
+const listRTLStyle = { position: 'absolute', bottom: '0px', right: '100%' };
- '&focused': {
- backgroundColor: 'var(--suggestions-background-hover-color)',
+export const styleForCompositionBoxSuggestions = (dir: HTMLDirection = 'ltr') => {
+ const styles = {
+ suggestions: {
+ list: {
+ fontSize: 14,
+ boxShadow: 'var(--suggestions-shadow)',
+ backgroundColor: 'var(--suggestions-background-color)',
+ color: 'var(--suggestions-text-color)',
+ dir,
+ },
+ item: {
+ height: '100%',
+ paddingTop: '5px',
+ paddingBottom: '5px',
+ backgroundColor: 'var(--suggestions-background-color)',
+ color: 'var(--suggestions-text-color)',
+ transition: '0.25s',
+
+ '&focused': {
+ backgroundColor: 'var(--suggestions-background-hover-color)',
+ },
},
},
- },
+ };
+
+ if (dir === 'rtl') {
+ styles.suggestions.list = { ...styles.suggestions.list, ...listRTLStyle };
+ }
+
+ return styles;
};
export const renderUserMentionRow = (suggestion: SuggestionDataItem) => {
diff --git a/ts/components/menu/Menu.tsx b/ts/components/menu/Menu.tsx
index 2164df87b..a5f1a1c90 100644
--- a/ts/components/menu/Menu.tsx
+++ b/ts/components/menu/Menu.tsx
@@ -366,12 +366,6 @@ export const MarkAllReadMenuItem = (): JSX.Element | null => {
return null;
};
-export function isRtlBody(): boolean {
- const body = document.getElementsByTagName('body').item(0);
-
- return body?.classList.contains('rtl') || false;
-}
-
export const BlockMenuItem = (): JSX.Element | null => {
const convoId = useConvoIdFromContext();
const isMe = useIsMe(convoId);
@@ -577,7 +571,7 @@ export const NotificationForConvoMenuItem = (): JSX.Element | null => {
return null;
}
- // const isRtlMode = isRtlBody();'
+ // const isRtlMode = isRtlBody();
// exclude mentions_only settings for private chats as this does not make much sense
const notificationForConvoOptions = ConversationNotificationSetting.filter(n =>
diff --git a/ts/mains/main_node.ts b/ts/mains/main_node.ts
index a445fb734..e8c5cc966 100644
--- a/ts/mains/main_node.ts
+++ b/ts/mains/main_node.ts
@@ -751,8 +751,9 @@ app.on('ready', async () => {
assertLogger().info('app ready');
assertLogger().info(`starting version ${packageJson.version}`);
if (!locale) {
- const appLocale = app.getLocale() || 'en';
+ const appLocale = process.env.LANGUAGE || app.getLocale() || 'en';
locale = loadLocale({ appLocale, logger });
+ assertLogger().info(`locale is ${appLocale}`);
}
const key = getDefaultSQLKey();
diff --git a/ts/state/smart/SessionConversation.ts b/ts/state/smart/SessionConversation.ts
index 6b40c2549..a2fcac167 100644
--- a/ts/state/smart/SessionConversation.ts
+++ b/ts/state/smart/SessionConversation.ts
@@ -16,8 +16,13 @@ import { getSelectedConversationKey } from '../selectors/selectedConversation';
import { getStagedAttachmentsForCurrentConversation } from '../selectors/stagedAttachments';
import { getTheme } from '../selectors/theme';
import { getOurNumber } from '../selectors/user';
+import { HTMLDirection } from '../../util/i18n';
-const mapStateToProps = (state: StateType) => {
+type SmartSessionConversationOwnProps = {
+ htmlDirection: HTMLDirection;
+};
+
+const mapStateToProps = (state: StateType, ownProps: SmartSessionConversationOwnProps) => {
return {
selectedConversation: getSelectedConversation(state),
selectedConversationKey: getSelectedConversationKey(state),
@@ -31,6 +36,7 @@ const mapStateToProps = (state: StateType) => {
stagedAttachments: getStagedAttachmentsForCurrentConversation(state),
hasOngoingCallWithFocusedConvo: getHasOngoingCallWithFocusedConvo(state),
isSelectedConvoInitialLoadingInProgress: getIsSelectedConvoInitialLoadingInProgress(state),
+ htmlDirection: ownProps.htmlDirection,
};
};
diff --git a/ts/util/i18n.ts b/ts/util/i18n.ts
index 70d8fb520..7701bc06d 100644
--- a/ts/util/i18n.ts
+++ b/ts/util/i18n.ts
@@ -67,3 +67,15 @@ export const loadEmojiPanelI18n = async () => {
}
return undefined;
};
+
+// RTL Support
+
+export type HTMLDirection = 'ltr' | 'rtl';
+
+export function isRtlBody(): boolean {
+ const body = document.getElementsByTagName('body').item(0);
+
+ return body?.classList.contains('rtl') || false;
+}
+
+export const useHTMLDirection = (): HTMLDirection => (isRtlBody() ? 'rtl' : 'ltr');