refactor(gazzodown): remove ReactElement type annotations from functional components

packages/gazzodown/src/Markup.tsx

@@ -1,5 +1,4 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { ReactElement } from 'react';
 import { lazy, memo } from 'react';
 
 import HeadingBlock from './blocks/HeadingBlock';
@@ -19,7 +18,7 @@ type MarkupProps = {
 	tokens: MessageParser.Root;
 };
 
-const Markup = ({ tokens }: MarkupProps): ReactElement => (
+const Markup = ({ tokens }: MarkupProps) => (
 	<>
 		{tokens.map((block, index) => {
 			switch (block.type) {

packages/gazzodown/src/PreviewMarkup.tsx

@@ -1,5 +1,4 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { ReactElement } from 'react';
 import { memo } from 'react';
 
 import PreviewCodeBlock from './code/PreviewCodeBlock';
@@ -15,7 +14,7 @@ type PreviewMarkupProps = {
 	tokens: MessageParser.Root;
 };
 
-const PreviewMarkup = ({ tokens }: PreviewMarkupProps): ReactElement | null => {
+const PreviewMarkup = ({ tokens }: PreviewMarkupProps) => {
 	if (isOnlyBigEmojiBlock(tokens)) {
 		return <PreviewBigEmojiBlock emoji={tokens[0].value} />;
 	}

packages/gazzodown/src/blocks/HeadingBlock.tsx

@@ -1,5 +1,4 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { ReactElement } from 'react';
 
 import InlineElements from '../elements/InlineElements';
 
@@ -8,7 +7,7 @@ type HeadingBlockProps = {
 	level?: 1 | 2 | 3 | 4;
 };
 
-const HeadingBlock = ({ children = [], level = 1 }: HeadingBlockProps): ReactElement => {
+const HeadingBlock = ({ children = [], level = 1 }: HeadingBlockProps) => {
 	const HeadingTag = `h${level}` as const;
 
 	return (

packages/gazzodown/src/blocks/OrderedListBlock.tsx

@@ -1,13 +1,12 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { ReactElement } from 'react';
 
 import InlineElements from '../elements/InlineElements';
 
 type OrderedListBlockProps = {
 	items: MessageParser.ListItem[];
 };
 
-const OrderedListBlock = ({ items }: OrderedListBlockProps): ReactElement => (
+const OrderedListBlock = ({ items }: OrderedListBlockProps) => (
 	<ol>
 		{items.map(({ value, number }, index) => (
 			<li key={index} value={number}>

packages/gazzodown/src/blocks/ParagraphBlock.tsx

@@ -1,13 +1,12 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { ReactElement } from 'react';
 
 import InlineElements from '../elements/InlineElements';
 
 type ParagraphBlockProps = {
 	children: MessageParser.Inlines[];
 };
 
-const ParagraphBlock = ({ children }: ParagraphBlockProps): ReactElement => (
+const ParagraphBlock = ({ children }: ParagraphBlockProps) => (
 	<div>
 		<InlineElements>{children}</InlineElements>
 	</div>

packages/gazzodown/src/blocks/QuoteBlock.tsx

@@ -1,13 +1,12 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { ReactElement } from 'react';
 
 import ParagraphBlock from './ParagraphBlock';
 
 type QuoteBlockProps = {
 	children: MessageParser.Paragraph[];
 };
 
-const QuoteBlock = ({ children }: QuoteBlockProps): ReactElement => (
+const QuoteBlock = ({ children }: QuoteBlockProps) => (
 	<blockquote>
 		{children.map((paragraph, index) => (
 			<ParagraphBlock key={index}>{paragraph.value}</ParagraphBlock>

packages/gazzodown/src/blocks/SpoilerBlock.tsx

@@ -1,5 +1,5 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { KeyboardEvent, ReactElement } from 'react';
+import type { KeyboardEvent } from 'react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -35,7 +35,7 @@ const srOnlyStyle = {
 	width: 1,
 } as const;
 
-const SpoilerBlock = ({ children }: SpoilerBlockProps): ReactElement => {
+const SpoilerBlock = ({ children }: SpoilerBlockProps) => {
 	const { t } = useTranslation();
 	const [revealed, setRevealed] = useState(false);
 

packages/gazzodown/src/blocks/TaskListBlock.tsx

@@ -1,6 +1,5 @@
 import { CheckBox } from '@rocket.chat/fuselage';
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { ReactElement } from 'react';
 import { useContext } from 'react';
 
 import { MarkupInteractionContext } from '../MarkupInteractionContext';
@@ -10,7 +9,7 @@ type TaskListBlockProps = {
 	tasks: MessageParser.Task[];
 };
 
-const TaksListBlock = ({ tasks }: TaskListBlockProps): ReactElement => {
+const TaskListBlock = ({ tasks }: TaskListBlockProps) => {
 	const { onTaskChecked } = useContext(MarkupInteractionContext);
 
 	return (
@@ -24,4 +23,4 @@ const TaksListBlock = ({ tasks }: TaskListBlockProps): ReactElement => {
 	);
 };
 
-export default TaksListBlock;
+export default TaskListBlock;

packages/gazzodown/src/blocks/UnorderedListBlock.tsx

@@ -1,13 +1,12 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { ReactElement } from 'react';
 
 import InlineElements from '../elements/InlineElements';
 
 type UnorderedListBlockProps = {
 	items: MessageParser.ListItem[];
 };
 
-const UnorderedListBlock = ({ items }: UnorderedListBlockProps): ReactElement => (
+const UnorderedListBlock = ({ items }: UnorderedListBlockProps) => (
 	<ul>
 		{items.map((item, index) => (
 			<li key={index}>

packages/gazzodown/src/code/CodeBlock.tsx

@@ -3,7 +3,6 @@ import { IconButton, Box } from '@rocket.chat/fuselage';
 import type * as MessageParser from '@rocket.chat/message-parser';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import hljs from 'highlight.js';
-import type { ReactElement } from 'react';
 import { Fragment, useContext, useLayoutEffect, useMemo, useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -24,7 +23,7 @@ const onHoverStyle = css`
 	}
 `;
 
-const CodeBlock = ({ lines = [], language }: CodeBlockProps): ReactElement => {
+const CodeBlock = ({ lines = [], language }: CodeBlockProps) => {
 	const ref = useRef<HTMLElement>(null);
 
 	const { highlightRegex } = useContext(MarkupInteractionContext);

packages/gazzodown/src/code/CodeElement.tsx

@@ -1,12 +1,10 @@
-import type { ReactElement } from 'react';
-
 import PlainSpan from '../elements/PlainSpan';
 
 type CodeElementProps = {
 	code: string;
 };
 
-const CodeElement = ({ code }: CodeElementProps): ReactElement => (
+const CodeElement = ({ code }: CodeElementProps) => (
 	<code className='code-colors inline'>
 		<PlainSpan text={code} />
 	</code>

packages/gazzodown/src/code/PreviewCodeBlock.tsx

@@ -1,13 +1,12 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 
 type PreviewCodeBlockProps = {
 	language?: string;
 	lines: MessageParser.CodeLine[];
 };
 
-export const PreviewCodeBlock = ({ lines }: PreviewCodeBlockProps): ReactElement | null => {
+export const PreviewCodeBlock = ({ lines }: PreviewCodeBlockProps) => {
 	const firstLine = useMemo(() => lines.find((line) => line.value.value.trim())?.value.value.trim(), [lines]);
 
 	if (!firstLine) {

packages/gazzodown/src/code/PreviewCodeElement.tsx

@@ -1,9 +1,7 @@
-import type { ReactElement } from 'react';
-
 type PreviewCodeElementProps = {
 	code: string;
 };
 
-const PreviewCodeElement = ({ code }: PreviewCodeElementProps): ReactElement => <>{code}</>;
+const PreviewCodeElement = ({ code }: PreviewCodeElementProps) => <>{code}</>;
 
 export default PreviewCodeElement;

packages/gazzodown/src/colors/ColorElement.tsx

@@ -1,4 +1,3 @@
-import type { ReactElement } from 'react';
 import { memo } from 'react';
 
 type ColorElementProps = {
@@ -8,7 +7,7 @@ type ColorElementProps = {
 	a: number;
 };
 
-const ColorElement = ({ r, g, b, a }: ColorElementProps): ReactElement => (
+const ColorElement = ({ r, g, b, a }: ColorElementProps) => (
 	<span>
 		<span
 			style={{

packages/gazzodown/src/colors/PreviewColorElement.tsx

@@ -1,4 +1,3 @@
-import type { ReactElement } from 'react';
 import { memo } from 'react';
 
 const toHexByte = (value: number): string => value.toString(16).padStart(2, '0');
@@ -10,7 +9,7 @@ type PreviewColorElementProps = {
 	a: number;
 };
 
-const PreviewColorElement = ({ r, g, b, a }: PreviewColorElementProps): ReactElement => {
+const PreviewColorElement = ({ r, g, b, a }: PreviewColorElementProps) => {
 	if (a === 255) {
 		return (
 			<>

packages/gazzodown/src/elements/BoldSpan.tsx

@@ -1,5 +1,4 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { ReactElement } from 'react';
 
 import ItalicSpan from './ItalicSpan';
 import LinkSpan from './LinkSpan';
@@ -22,7 +21,7 @@ type BoldSpanProps = {
 	children: MessageBlock[];
 };
 
-const BoldSpan = ({ children }: BoldSpanProps): ReactElement => (
+const BoldSpan = ({ children }: BoldSpanProps) => (
 	<>
 		{children.map((block, index) => {
 			if (
@@ -39,7 +38,7 @@ const BoldSpan = ({ children }: BoldSpanProps): ReactElement => (
 	</>
 );
 
-const renderBlockComponent = (block: MessageBlock, index: number): ReactElement | null => {
+const renderBlockComponent = (block: MessageBlock, index: number) => {
 	switch (block.type) {
 		case 'EMOJI':
 			return <EmojiElement key={index} {...block} />;

packages/gazzodown/src/elements/ImageElement.tsx

@@ -1,5 +1,4 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 
 import { sanitizeUrl } from './sanitizeUrl';
@@ -47,7 +46,7 @@ type ImageElementProps = {
 	alt: MessageParser.Markup;
 };
 
-const ImageElement = ({ src, alt }: ImageElementProps): ReactElement => {
+const ImageElement = ({ src, alt }: ImageElementProps) => {
 	const plainAlt = useMemo(() => flattenMarkup(alt), [alt]);
 	const safeSrc = sanitizeUrl(src);
 

packages/gazzodown/src/elements/InlineElements.tsx

@@ -1,5 +1,4 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { ReactElement } from 'react';
 import { lazy } from 'react';
 
 import BoldSpan from './BoldSpan';
@@ -23,7 +22,7 @@ type InlineElementsProps = {
 	children: (MessageParser.Inlines | { fallback: MessageParser.Plain; type: undefined })[];
 };
 
-const InlineElements = ({ children }: InlineElementsProps): ReactElement => (
+const InlineElements = ({ children }: InlineElementsProps) => (
 	<>
 		{children.map((child, index) => {
 			switch (child.type) {

packages/gazzodown/src/elements/ItalicSpan.tsx

@@ -1,5 +1,4 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { ReactElement } from 'react';
 
 import BoldSpan from './BoldSpan';
 import LinkSpan from './LinkSpan';
@@ -22,7 +21,7 @@ type ItalicSpanProps = {
 	children: MessageBlock[];
 };
 
-const ItalicSpan = ({ children }: ItalicSpanProps): ReactElement => (
+const ItalicSpan = ({ children }: ItalicSpanProps) => (
 	<>
 		{children.map((block, index) => {
 			if (
@@ -39,7 +38,7 @@ const ItalicSpan = ({ children }: ItalicSpanProps): ReactElement => (
 	</>
 );
 
-const renderBlockComponent = (block: MessageBlock, index: number): ReactElement | null => {
+const renderBlockComponent = (block: MessageBlock, index: number) => {
 	switch (block.type) {
 		case 'EMOJI':
 			return <EmojiElement key={index} {...block} />;

packages/gazzodown/src/elements/LinkSpan.tsx

@@ -1,6 +1,5 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
 import { getBaseURI, isExternal } from '@rocket.chat/ui-client/dist/helpers/getBaseURI';
-import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -15,7 +14,7 @@ type LinkSpanProps = {
 	label: MessageParser.Markup | MessageParser.Markup[];
 };
 
-const LinkSpan = ({ href, label }: LinkSpanProps): ReactElement => {
+const LinkSpan = ({ href, label }: LinkSpanProps) => {
 	// Should sanitize 'href' if any of the insecure prefixes are present - see DSK-34 on Jira
 	const sanitizedHref = sanitizeUrl(href);
 

packages/gazzodown/src/elements/PlainSpan.tsx

@@ -1,4 +1,3 @@
-import type { ReactElement } from 'react';
 import { Fragment, memo, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -8,7 +7,7 @@ type PlainSpanProps = {
 	text: string;
 };
 
-const PlainSpan = ({ text }: PlainSpanProps): ReactElement => {
+const PlainSpan = ({ text }: PlainSpanProps) => {
 	const { t } = useTranslation();
 	const { highlightRegex, markRegex } = useContext(MarkupInteractionContext);
 

packages/gazzodown/src/elements/PreviewInlineElements.tsx

@@ -1,5 +1,4 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { ReactElement } from 'react';
 import { Fragment } from 'react';
 
 import BoldSpan from './BoldSpan';
@@ -17,7 +16,7 @@ type PreviewInlineElementsProps = {
 	children: MessageParser.Inlines[];
 };
 
-const PreviewInlineElements = ({ children }: PreviewInlineElementsProps): ReactElement => (
+const PreviewInlineElements = ({ children }: PreviewInlineElementsProps) => (
 	<>
 		{children.map((child, index) => {
 			switch (child.type) {

packages/gazzodown/src/elements/SpoilerSpan.tsx

@@ -1,5 +1,5 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { KeyboardEvent, ReactElement } from 'react';
+import type { KeyboardEvent } from 'react';
 import { lazy, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -49,7 +49,7 @@ const srOnlyStyle = {
 	width: 1,
 } as const;
 
-const SpoilerSpan = ({ children }: SpoilerSpanProps): ReactElement => {
+const SpoilerSpan = ({ children }: SpoilerSpanProps) => {
 	const { t } = useTranslation();
 	const [revealed, setRevealed] = useState(false);
 
@@ -81,7 +81,7 @@ const SpoilerSpan = ({ children }: SpoilerSpanProps): ReactElement => {
 	);
 };
 
-const renderBlockComponent = (block: MessageParser.Inlines, index: number): ReactElement | null => {
+const renderBlockComponent = (block: MessageParser.Inlines, index: number) => {
 	switch (block.type) {
 		case 'EMOJI':
 			return <EmojiElement key={index} {...block} />;

packages/gazzodown/src/elements/StrikeSpan.tsx

@@ -1,5 +1,4 @@
 import type * as MessageParser from '@rocket.chat/message-parser';
-import type { ReactElement } from 'react';
 
 import BoldSpan from './BoldSpan';
 import ItalicSpan from './ItalicSpan';
@@ -23,7 +22,7 @@ type StrikeSpanProps = {
 	children: MessageBlock[];
 };
 
-const StrikeSpan = ({ children }: StrikeSpanProps): ReactElement => (
+const StrikeSpan = ({ children }: StrikeSpanProps) => (
 	<>
 		{children.map((block, index) => {
 			if (
@@ -40,7 +39,7 @@ const StrikeSpan = ({ children }: StrikeSpanProps): ReactElement => (
 	</>
 );
 
-const renderBlockComponent = (block: MessageBlock, index: number): ReactElement | null => {
+const renderBlockComponent = (block: MessageBlock, index: number) => {
 	switch (block.type) {
 		case 'EMOJI':
 			return <EmojiElement key={index} {...block} />;