Merge branch 'main' of github.com:anyproto/anytype-ts into refactorin…

…g/toggle-class
anyproto · Nov 15, 2024 · 2df622e · 2df622e
2 parents 9c6a672 + ca1c0c5
commit 2df622e
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 56 deletions.
diff --git a/src/json/constant.ts b/src/json/constant.ts
@@ -40,7 +40,7 @@ export default {
 		graphDepth:		 5,
 
 		chat: {
-			messages:		 100,
+			messages:		 30,
 			attachments:	 10,
 			files:			 10,
 			mentions:		 10,

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.tsx b/src/ts/component/block/chat.tsx
@@ -81,7 +81,8 @@ const BlockChat = observer(class BlockChat extends React.Component<I.BlockCompon
 							onThread={this.onThread}
 							onContextMenu={e => this.onContextMenu(e, item)}
 							onMore={e => this.onContextMenu(e, item, true)}
-							onReply={e => this.onReply(e, item)}
+							onReplyEdit={e => this.onReplyEdit(e, item)}
+							onReplyClick={e => this.onReplyClick(e, item)}
 							getReplyContent={this.getReplyContent}
 						/>
 					))}
@@ -533,10 +534,30 @@ const BlockChat = observer(class BlockChat extends React.Component<I.BlockCompon
 		});
 	};
 
-	onReply (e: React.MouseEvent, message: any) {
+	onReplyEdit (e: React.MouseEvent, message: any) {
 		this.refForm.onReply(message);
 	};
 
+	onReplyClick (e: React.MouseEvent, message: any) {
+		if (!S.Common.config.experimental) {
+			return;
+		};
+
+		const rootId = this.getRootId();
+		const reply = S.Chat.getReply(rootId, message.replyToMessageId);
+		const limit = Math.ceil(J.Constant.limit.chat.messages / 2);
+
+		let messages = [];
+
+		C.ChatGetMessages(rootId, reply.orderId, limit, (message: any) => {
+			if (!message.error.code && message.messages.length) {
+				messages = messages.concat(message.messages);
+			};
+
+			S.Chat.set(rootId, messages);
+		});
+	};
+
 	getReplyContent (message: any): any {
 		const { creator, content } = message;
 		const { space } = S.Common;

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
@@ -5,29 +5,18 @@ import { IconObject, Icon, ObjectName, Label } from 'Component';
 import { I, S, U, C, J, Mark, translate, Preview } from 'Lib';
 
 import Attachment from '../attachment';
-
-interface Props extends I.BlockComponent {
-	blockId: string;
-	id: string;
-	isThread: boolean;
-	isNew: boolean;
-	onThread: (id: string) => void;
-	onContextMenu: (e: any) => void;
-	onMore: (e: any) => void;
-	onReply: (e: any) => void;
-	getReplyContent: (message: any) => any;
-};
+import Reply from './reply';
 
 const LINES_LIMIT = 10;
 
-const ChatMessage = observer(class ChatMessage extends React.Component<Props> {
+const ChatMessage = observer(class ChatMessage extends React.Component<I.ChatMessageComponent> {
 
 	node = null;
 	refText = null;
 	attachmentRefs: any = {};
 	isExpanded = false;
 
-	constructor (props: Props) {
+	constructor (props: I.ChatMessageComponent) {
 		super(props);
 
 		this.onExpand = this.onExpand.bind(this);
@@ -38,7 +27,7 @@ const ChatMessage = observer(class ChatMessage extends React.Component<Props> {
 	};
 
 	render () {
-		const { rootId, id, isThread, isNew, readonly, onThread, onContextMenu, onMore, onReply, getReplyContent } = this.props;
+		const { rootId, id, isThread, isNew, readonly, onThread, onContextMenu, onMore, onReplyEdit } = this.props;
 		const { space } = S.Common;
 		const { account } = S.Auth;
 		const message = S.Chat.getMessage(rootId, id);
@@ -52,39 +41,7 @@ const ChatMessage = observer(class ChatMessage extends React.Component<Props> {
 		const canAddReaction = this.canAddReaction();
 		const cn = [ 'message' ];
 		const ca = [ 'attachments', attachmentsLayout ];
-
-		let reply = null;
-		if (replyToMessageId) {
-			const replyToMessage = S.Chat.getReply(rootId, replyToMessageId);
-
-			if (replyToMessage) {
-				const { text, attachment, isMultiple } = getReplyContent(replyToMessage);
-				const author = U.Space.getParticipant(U.Space.getParticipantId(space, replyToMessage.creator));
-
-				let icon: any = null;
-				if (attachment) {
-					let iconSize = null;
-					if (U.Object.getFileLayouts().concat([ I.ObjectLayout.Human, I.ObjectLayout.Participant ]).includes(attachment.layout)) {
-						iconSize = 32;
-					};
-
-					icon = <IconObject className={iconSize ? 'noBg' : ''} object={attachment} size={32} iconSize={iconSize} />;
-				};
-				if (isMultiple) {
-					icon = <Icon className="isMultiple" />;
-				};
-
-				reply = (
-					<div className="reply">
-						{icon}
-						<div className="textWrapper">
-							<ObjectName object={author} />
-							<div className="text" dangerouslySetInnerHTML={{ __html: text }} />
-						</div>
-					</div>
-				);
-			};
-		};
+		const ct = [ 'textWrapper' ];
 
 		let text = content.text.replace(/\r?\n$/, '');
 		text = U.Common.sanitize(U.Common.lbBr(Mark.toHtml(text, content.marks)));
@@ -120,6 +77,9 @@ const ChatMessage = observer(class ChatMessage extends React.Component<Props> {
 		if (this.isExpanded) {
 			cn.push('isExpanded');
 		};
+		if (U.Common.checkRtl(text)) {
+			ct.push('isRtl');
+		};
 
 		// Subscriptions
 		for (const mark of content.marks) {
@@ -170,9 +130,9 @@ const ChatMessage = observer(class ChatMessage extends React.Component<Props> {
 							<div className="time">{U.Date.date('H:i', createdAt)}</div>
 						</div>
 
-						{reply}
+						<Reply {...this.props} id={replyToMessageId} />
 
-						<div className="textWrapper">
+						<div className={ct.join(' ')}>
 							<div 
 								ref={ref => this.refText = ref} 
 								className="text" 
@@ -218,7 +178,7 @@ const ChatMessage = observer(class ChatMessage extends React.Component<Props> {
 					{!readonly ? (
 						<div className="controls">
 							{!hasReactions && canAddReaction ? <Icon id="reaction-add" className="reactionAdd" onClick={this.onReactionAdd} tooltip={translate('blockChatReactionAdd')} /> : ''}
-							<Icon id="message-reply" className="messageReply" onClick={onReply} tooltip={translate('blockChatReply')} />
+							<Icon id="message-reply" className="messageReply" onClick={onReplyEdit} tooltip={translate('blockChatReply')} />
 							<Icon className="more" onClick={onMore} />
 						</div>
 					) : ''}

diff --git a/src/ts/component/block/chat/message/reply.tsx b/src/ts/component/block/chat/message/reply.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { IconObject, Icon, ObjectName } from 'Component';
+import { I, S, U } from 'Lib';
+
+const ChatMessageReply = observer(class ChatMessageReply extends React.Component<I.ChatMessageComponent> {
+
+	render () {
+		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;
+		};
+
+		const { text, attachment, isMultiple } = getReplyContent(message);
+		const author = U.Space.getParticipant(U.Space.getParticipantId(space, message.creator));
+		const iconLayouts = U.Object.getFileLayouts().concat(U.Object.getHumanLayouts());
+
+		let icon: any = null;
+
+		if (attachment) {
+			const iconSize = iconLayouts.includes(attachment.layout) ? 32 : null;
+			icon = <IconObject className={iconSize ? 'noBg' : ''} object={attachment} size={32} iconSize={iconSize} />;
+		} else
+		if (isMultiple) {
+			icon = <Icon className="isMultiple" />;
+		};
+
+		if (U.Common.checkRtl(text)) {
+			cn.push('isRtl');
+		};
+
+		return (
+			<div className={cn.join(' ')} onClick={onReplyClick}>
+				{icon}
+				<div className="textWrapper">
+					<ObjectName object={author} />
+					<div className="text" dangerouslySetInnerHTML={{ __html: U.Common.sanitize(text) }} />
+				</div>
+			</div>
+		);
+	};
+});
+
+export default ChatMessageReply;
diff --git a/src/ts/interface/block/chat.ts b/src/ts/interface/block/chat.ts
@@ -40,4 +40,17 @@ export interface ChatMessageAttachment {
 	type: AttachmentType;
 };
 
+export interface ChatMessageComponent extends I.BlockComponent {
+	blockId: string;
+	id: string;
+	isThread: boolean;
+	isNew: boolean;
+	onThread: (id: string) => void;
+	onContextMenu: (e: any) => void;
+	onMore: (e: any) => void;
+	onReplyEdit: (e: any) => void;
+	onReplyClick: (e: any) => void;
+	getReplyContent: (message: any) => any;
+};
+
 export interface BlockChat extends I.Block {};
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();