[NEW] New components TextEditor and MarkdownTextEditor

app/theme/client/imports/components/emojiPicker.css

@@ -22,7 +22,7 @@
 
 .emoji-picker {
 	position: absolute;
-	z-index: 100;
+	z-index: 9999;
 
 	display: none;
 

ee/client/omnichannel/cannedResponses/components/MarkdownTextEditor/InsertPlaceholderDropdown.tsx

@@ -0,0 +1,77 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Divider } from '@rocket.chat/fuselage';
+import React, { Dispatch, FC, memo, RefObject, SetStateAction } from 'react';
+
+import { useTranslation } from '../../../../../../client/contexts/TranslationContext';
+
+const InsertPlaceholderDropdown: FC<{
+	textAreaRef: RefObject<HTMLTextAreaElement>;
+	setVisible: Dispatch<SetStateAction<boolean>>;
+}> = ({ textAreaRef, setVisible }) => {
+	const t = useTranslation();
+
+	const clickable = css`
+		cursor: pointer;
+	`;
+
+	const setPlaceholder = (name: any): void => {
+		if (textAreaRef?.current) {
+			const text = textAreaRef.current.value;
+			const startPos = textAreaRef.current.selectionStart;
+			const placeholder = `{{${name}}}`;
+
+			textAreaRef.current.value = text.slice(0, startPos) + placeholder + text.slice(startPos);
+
+			textAreaRef.current.focus();
+			textAreaRef.current.setSelectionRange(
+				startPos + placeholder.length,
+				startPos + placeholder.length,
+			);
+
+			setVisible(false);
+		}
+	};
+
+	return (
+		<Box>
+			<Box textTransform='uppercase' fontScale='c1' fontSize='10px'>
+				{t('Contact')}
+			</Box>
+			<Box is='ul'>
+				<Box className={clickable} is='li' onClick={(): void => setPlaceholder('contact.name')}>
+					<Box mb='4px' style={{ width: '100%' }} fontScale='p1'>
+						{t('Name')}
+					</Box>
+				</Box>
+				<Box className={clickable} is='li' onClick={(): void => setPlaceholder('contact.email')}>
+					<Box mb='4px' style={{ width: '100%' }} fontScale='p1'>
+						{t('Email')}
+					</Box>
+				</Box>
+				<Box className={clickable} is='li' onClick={(): void => setPlaceholder('contact.phone')}>
+					<Box mb='4px' style={{ width: '100%' }} fontScale='p1'>
+						{t('Phone')}
+					</Box>
+				</Box>
+			</Box>
+			<Divider />
+			<Box textTransform='uppercase' fontScale='c1' fontSize='10px'>
+				{t('Agent')}
+			</Box>
+			<Box is='ul'>
+				<Box className={clickable} is='li' onClick={(): void => setPlaceholder('agent.name')}>
+					<Box mb='4px' style={{ width: '100%' }} fontScale='p1'>
+						{t('Name')}
+					</Box>
+				</Box>
+				<Box className={clickable} is='li' onClick={(): void => setPlaceholder('agent.email')}>
+					<Box mb='4px' style={{ width: '100%' }} fontScale='p1'>
+						{t('Email')}
+					</Box>
+				</Box>
+			</Box>
+		</Box>
+	);
+};
+
+export default memo(InsertPlaceholderDropdown);

ee/client/omnichannel/cannedResponses/components/MarkdownTextEditor/index.tsx

@@ -0,0 +1,122 @@
+import { Box, Divider, PositionAnimated, Tile } from '@rocket.chat/fuselage';
+import React, { FC, memo, useCallback, useRef, useState } from 'react';
+
+import { EmojiPicker } from '../../../../../../app/emoji/client';
+import { Backdrop } from '../../../../../../client/components/Backdrop';
+import { useUserPreference } from '../../../../../../client/contexts/UserContext';
+import TextEditor from '../TextEditor';
+import InsertPlaceholderDropdown from './InsertPlaceholderDropdown';
+
+const MarkdownTextEditor: FC = () => {
+	const useEmojisPreference = useUserPreference('useEmojis');
+
+	const textAreaRef = useRef<HTMLTextAreaElement>(null);
+	const ref = useRef<HTMLButtonElement>(null);
+
+	const [visible, setVisible] = useState(false);
+
+	const useMarkdownSyntax = (char: '*' | '_' | '~' | '[]()'): (() => void) =>
+		useCallback(() => {
+			if (textAreaRef?.current) {
+				const text = textAreaRef.current.value;
+				const startPos = textAreaRef.current.selectionStart;
+				const endPos = textAreaRef.current.selectionEnd;
+
+				if (char === '[]()') {
+					if (startPos !== endPos) {
+						textAreaRef.current.value = `${text.slice(0, startPos)}[${text.slice(
+							startPos,
+							endPos,
+						)}]()${text.slice(endPos)}`;
+					}
+				} else {
+					textAreaRef.current.value = `${text.slice(0, startPos)}${char}${text.slice(
+						startPos,
+						endPos,
+					)}${char}${text.slice(endPos)}`;
+				}
+				textAreaRef.current.focus();
+
+				if (char === '[]()') {
+					if (startPos === endPos) {
+						textAreaRef.current.setSelectionRange(startPos, endPos);
+					} else {
+						textAreaRef.current.setSelectionRange(endPos + 3, endPos + 3);
+					}
+				} else {
+					textAreaRef.current.setSelectionRange(startPos + 1, endPos + 1);
+				}
+			}
+		}, [char]);
+
+	const onClickEmoji = (emoji: string): void => {
+		if (textAreaRef?.current) {
+			const text = textAreaRef.current.value;
+			const startPos = textAreaRef.current.selectionStart;
+			const emojiValue = `:${emoji}: `;
+
+			textAreaRef.current.value = text.slice(0, startPos) + emojiValue + text.slice(startPos);
+
+			textAreaRef.current.focus();
+			textAreaRef.current.setSelectionRange(
+				startPos + emojiValue.length,
+				startPos + emojiValue.length,
+			);
+		}
+	};
+
+	const openEmojiPicker = (): void => {
+		if (!useEmojisPreference) {
+			return;
+		}
+
+		if (EmojiPicker.isOpened()) {
+			EmojiPicker.close();
+			return;
+		}
+
+		EmojiPicker.open(textAreaRef.current, (emoji: string): void => {
+			onClickEmoji(emoji);
+		});
+	};
+
+	const openPlaceholderSelect = (): void => {
+		textAreaRef?.current && textAreaRef.current.focus();
+		setVisible(!visible);
+	};
+
+	return (
+		<TextEditor>
+			<TextEditor.Toolbox>
+				<Box display='flex' flexDirection='row'>
+					<TextEditor.Toolbox.IconButton name='bold' action={useMarkdownSyntax('*')} />
+					<TextEditor.Toolbox.IconButton name='italic' action={useMarkdownSyntax('_')} />
+					<TextEditor.Toolbox.IconButton name='strike' action={useMarkdownSyntax('~')} />
+					<TextEditor.Toolbox.IconButton name='link' action={useMarkdownSyntax('[]()')} />
+					<TextEditor.Toolbox.IconButton name='emoji' action={openEmojiPicker} />
+				</Box>
+				<TextEditor.Toolbox.TextButton
+					text='Insert_Placeholder'
+					action={openPlaceholderSelect}
+					ref={ref}
+				/>
+				<Backdrop
+					display={visible ? 'block' : 'none'}
+					onClick={(): void => {
+						textAreaRef?.current && textAreaRef.current.focus();
+						setVisible(false);
+					}}
+				/>
+				<PositionAnimated visible={visible ? 'visible' : 'hidden'} anchor={ref}>
+					<Tile elevation='1' w='224px'>
+						<InsertPlaceholderDropdown textAreaRef={textAreaRef} setVisible={setVisible} />
+					</Tile>
+				</PositionAnimated>
+			</TextEditor.Toolbox>
+			<Divider w='full' mbe='16px' />
+			<TextEditor.Textarea rows={10} ref={textAreaRef} />
+		</TextEditor>
+	);
+};
+
+export default memo(MarkdownTextEditor);

ee/client/omnichannel/cannedResponses/components/MarkdownTextEditor/markdownTextEditor.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import MarkdownTextEditor from './index.tsx';
+
+export default {
+	title: 'components/MarkdownTextEditor',
+	component: MarkdownTextEditor,
+};
+
+export const deafult = () => <MarkdownTextEditor />;

ee/client/omnichannel/cannedResponses/components/TextEditor/IconButton.tsx

@@ -0,0 +1,28 @@
+import { Button, Icon } from '@rocket.chat/fuselage';
+import React, { FC, memo } from 'react';
+
+type IconButtonProps = {
+	name: string;
+	action: () => void;
+};
+
+const IconButton: FC<IconButtonProps> = ({ name, action }) => (
+	<Button
+		nude
+		small
+		square
+		display='flex'
+		justifyContent='center'
+		alignItems='center'
+		overflow='hidden'
+		mie='12px'
+		onClick={(e): void => {
+			e.stopPropagation();
+			e.preventDefault();
+			action();
+		}}
+	>
+		<Icon name={name} size='24px' color='neutral-700' />
+	</Button>
+);
+export default memo(IconButton);

ee/client/omnichannel/cannedResponses/components/TextEditor/TextButton.tsx

@@ -0,0 +1,35 @@
+import { Button } from '@rocket.chat/fuselage';
+import React, { forwardRef, memo } from 'react';
+
+import {
+	TranslationKey,
+	useTranslation,
+} from '../../../../../../client/contexts/TranslationContext';
+
+type TextButtonProps = {
+	text: TranslationKey;
+	action: () => void;
+};
+
+const TextButton = forwardRef<Element, TextButtonProps>(function TextButton({ text, action }, ref) {
+	const t = useTranslation();
+
+	return (
+		<Button
+			nude
+			small
+			display='flex'
+			justifyContent='center'
+			alignItems='center'
+			onClick={(e): void => {
+				e.stopPropagation();
+				e.preventDefault();
+				action();
+			}}
+			ref={ref}
+		>
+			{t(text)}
+		</Button>
+	);
+});
+export default memo(TextButton);

ee/client/omnichannel/cannedResponses/components/TextEditor/Textarea.tsx

@@ -0,0 +1,20 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, forwardRef } from 'react';
+
+type TextareaProps = ComponentProps<typeof Box>;
+
+const Textarea = forwardRef<Element, TextareaProps>(function Textarea(props, ref) {
+	return (
+		<Box
+			is='textarea'
+			ref={ref}
+			w='full'
+			rcx-box--animated
+			rcx-input-box--type={'textarea'}
+			rcx-input-box--undecorated
+			{...props}
+		/>
+	);
+});
+
+export default Textarea;

ee/client/omnichannel/cannedResponses/components/TextEditor/Toolbox.tsx

@@ -0,0 +1,18 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { FC } from 'react';
+
+import IconButton from './IconButton';
+import TextButton from './TextButton';
+
+const Toolbox: FC = ({ children }) => (
+	<>
+		<Box display='flex' w='full' justifyContent='space-between' alignItems='center'>
+			{children}
+		</Box>
+	</>
+);
+
+export default Object.assign(Toolbox, {
+	IconButton,
+	TextButton,
+});

ee/client/omnichannel/cannedResponses/components/TextEditor/index.tsx

@@ -0,0 +1,29 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { FC } from 'react';
+
+import Textarea from './Textarea';
+import Toolbox from './Toolbox';
+
+type TextEditorType = {
+	Toolbox?: FC;
+	Textarea?: FC;
+};
+
+const TextEditor: FC<TextEditorType> = ({ children }) => (
+	<Box
+		display='flex'
+		flexDirection='column'
+		pbs='12px'
+		pi='16px'
+		pbe='16px'
+		rcx-box--animated
+		rcx-input-box__wrapper
+	>
+		{children}
+	</Box>
+);
+
+export default Object.assign(TextEditor, {
+	Toolbox,
+	Textarea,
+});

ee/client/omnichannel/cannedResponses/components/TextEditor/textEditor.stories.js

@@ -0,0 +1,37 @@
+import { Divider } from '@rocket.chat/fuselage';
+import React, { useRef } from 'react';
+
+import TextEditor from './index.tsx';
+
+export default {
+	title: 'components/TextEditor',
+	component: TextEditor,
+};
+
+export const deafult = () => {
+	// eslint-disable-next-line react-hooks/rules-of-hooks
+	const textAreaRef = useRef();
+
+	const action = () => {
+		const text = textAreaRef.current.value;
+		const startPos = textAreaRef.current.selectionStart;
+		const endPos = textAreaRef.current.selectionEnd;
+		textAreaRef.current.value = `${text.slice(0, startPos)}*${text.slice(
+			startPos,
+			endPos,
+		)}*${text.slice(endPos)}`;
+		textAreaRef.current.focus();
+		textAreaRef.current.setSelectionRange(startPos + 1, endPos + 1);
+	};
+
+	return (
+		<TextEditor>
+			<TextEditor.Toolbox>
+				<TextEditor.Toolbox.IconButton name='bold' action={action} />
+				<TextEditor.Toolbox.TextButton text='Insert_Placeholder' action={action} />
+			</TextEditor.Toolbox>
+			<Divider w='full' mbe='16px' />
+			<TextEditor.Textarea rows='10' ref={textAreaRef} />
+		</TextEditor>
+	);
+};