Merge pull request #1056 from anyproto/feature/rtl

Feature/Rtl
anyproto · Nov 15, 2024 · ca1c0c5 · ca1c0c5
2 parents a1047be + 63af390
commit ca1c0c5
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 4 deletions.
diff --git a/src/scss/block/dataview/view/grid.scss b/src/scss/block/dataview/view/grid.scss
@@ -7,7 +7,7 @@
 		.rowHead, .rowFoot { width: calc(100% - 4px); margin-left: 2px; }
 		.rowHead.fixed { opacity: 0; visibility: hidden; pointer-events: none; }
 
-		.rowFoot { box-shadow: 0px 1px var(--color-shape-secondary) inset; margin-top: -2px; height: 46px; }
+		.rowFoot { box-shadow: 0px 1px var(--color-shape-secondary) inset; margin-top: -2px; height: 48px; }
 
 		#rowHeadClone { position: fixed !important; background: var(--color-bg-primary); z-index: 1; }
 		#rowHeadClone::after { content: ''; height: 1px; width: 100%; background: var(--color-shape-secondary); position: absolute; bottom: -1px; }
@@ -53,7 +53,7 @@
 
 		.cellFoot { height: 48px; }
 		.cellFoot {
-			.cellContent { height: 46px !important; }
+			.cellContent { height: 48px !important; }
 			.select { border: 0px; padding-left: 0px; padding-top: 0px; padding-bottom: 0px; opacity: 0; pointer-events: none; }
 			.select:hover { background: none; }
 		}

diff --git a/src/scss/common.scss b/src/scss/common.scss
@@ -33,6 +33,7 @@ select:-webkit-autofill:hover,
 select:-webkit-autofill:focus { transition: background-color 5000s ease-in-out 0s; }
 input, textarea, select { font-family: 'Inter'; }
 
+
 #drag { -webkit-app-region: drag; position: fixed; top: 0px; left: 0px; width: 100%; height: 52px; z-index: -1; user-select: none; pointer-events: all; }
 #root-loader { position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; background: #060606; z-index: 1000; transition: opacity 0.3s ease-in-out; }
 #root-loader {
@@ -106,6 +107,7 @@ html.platformWindows, html.platformLinux {
 ::-webkit-input-placeholder { color: var(--color-text-tertiary) !important; }
 .isBlurred { filter: blur(7px); }
 .animationWord { display: inline-block; }
+.isRtl { direction: rtl; text-align: right; }
 
 .fileWrap { position: relative; overflow: hidden; }
 .fileWrap { 

diff --git a/src/ts/component/block/chat/form.tsx b/src/ts/component/block/chat/form.tsx
@@ -50,6 +50,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
 		this.onBlurInput = this.onBlurInput.bind(this);
 		this.onKeyUpInput = this.onKeyUpInput.bind(this);
 		this.onKeyDownInput = this.onKeyDownInput.bind(this);
+		this.onInput = this.onInput.bind(this);
 		this.onPaste = this.onPaste.bind(this);
 		this.onMention = this.onMention.bind(this);
 		this.onChatButtonSelect = this.onChatButtonSelect.bind(this);
@@ -155,6 +156,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
 						onBlur={this.onBlurInput}
 						onKeyUp={this.onKeyUpInput} 
 						onKeyDown={this.onKeyDownInput}
+						onInput={this.onInput}
 						onPaste={this.onPaste}
 						onMouseDown={this.onMouseDown}
 						onMouseUp={this.onMouseUp}
@@ -438,6 +440,13 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
 		this.removeBookmarks();
 	};
 
+	onInput () {
+		const value = this.getTextValue();
+		const checkRtl = U.Common.checkRtl(value);
+
+		$(this.refEditable?.node).toggleClass('isRtl', checkRtl);
+	};
+
 	onPaste (e: any) {
 		e.preventDefault();
 
@@ -484,6 +493,8 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
 		if (list.length) {
 			this.addAttachments(list);
 		};
+
+		this.onInput();
 	};
 
 	canDrop (e: any): boolean {

diff --git a/src/ts/component/block/chat/message/index.tsx b/src/ts/component/block/chat/message/index.tsx
@@ -41,6 +41,7 @@ const ChatMessage = observer(class ChatMessage extends React.Component<I.ChatMes
 		const canAddReaction = this.canAddReaction();
 		const cn = [ 'message' ];
 		const ca = [ 'attachments', attachmentsLayout ];
+		const ct = [ 'textWrapper' ];
 
 		let text = content.text.replace(/\r?\n$/, '');
 		text = U.Common.sanitize(U.Common.lbBr(Mark.toHtml(text, content.marks)));
@@ -76,6 +77,9 @@ const ChatMessage = observer(class ChatMessage extends React.Component<I.ChatMes
 		if (this.isExpanded) {
 			cn.push('isExpanded');
 		};
+		if (U.Common.checkRtl(text)) {
+			ct.push('isRtl');
+		};
 
 		// Subscriptions
 		for (const mark of content.marks) {
@@ -128,7 +132,7 @@ const ChatMessage = observer(class ChatMessage extends React.Component<I.ChatMes
 
 						<Reply {...this.props} id={replyToMessageId} />
 
-						<div className="textWrapper">
+						<div className={ct.join(' ')}>
 							<div 
 								ref={ref => this.refText = ref} 
 								className="text" 

diff --git a/src/ts/component/block/chat/message/reply.tsx b/src/ts/component/block/chat/message/reply.tsx
@@ -9,6 +9,7 @@ const ChatMessageReply = observer(class ChatMessageReply extends React.Component
 		const { space } = S.Common;
 		const { rootId, id, getReplyContent, onReplyClick } = this.props;
 		const message = S.Chat.getReply(rootId, id);
+		const cn = [ 'reply' ];
 
 		if (!message) {
 			return null;
@@ -28,8 +29,12 @@ const ChatMessageReply = observer(class ChatMessageReply extends React.Component
 			icon = <Icon className="isMultiple" />;
 		};
 
+		if (U.Common.checkRtl(text)) {
+			cn.push('isRtl');
+		};
+
 		return (
-			<div className="reply" onClick={onReplyClick}>
+			<div className={cn.join(' ')} onClick={onReplyClick}>
 				{icon}
 				<div className="textWrapper">
 					<ObjectName object={author} />

diff --git a/src/ts/lib/util/common.ts b/src/ts/lib/util/common.ts
@@ -1025,6 +1025,10 @@ class UtilCommon {
 		//return this.isAlphaVersion() || this.isBetaVersion() || !this.getElectron().isPackaged;
 	};
 
+	checkRtl (s: string): boolean {
+		return /^[\u04c7-\u0591\u05D0-\u05EA\u05F0-\u05F4\u0600-\u06FF]/.test(s);
+	};
+
 };
 
 export default new UtilCommon();