Add Messaging Markdown (light) Support

[sternetj]

Changes

• Adds some basic markdown support to the DirectMessageScreen and the MessageScreen (list of messages)
• Adds formatting of email, phone, and urls to the DirectMessageScreen and the MessageScreen (list of messages)

Supported Markdown

• [text](https://google.com) - renders a link. Example: text
• ***text*** - renders text as bold and italic. Example: text
• **text** or __text__ - renders text as bold. Example: text
• *text* or _text_ - renders text as italic. Example: text
• ~~text~~ - renders text as strikethrough. Example: text
• ![image](https://reactnative.dev/img/tiny_logo.png) - renders an image in it's own bubble. Example:
  

Note: Markdown does not support nested styling. i.e. Markdown like **Bold text with _emphasis_ text** will not italicize the text, it will look like this: Bold text with _emphasis_ text. The desired result can be achieved with the following **Bold text with** ***emphasis*** **text** which looks like this: Bold text with emphasis text

Screenshots

messaging-markdown.mov

RPReplay_Final1714584385.MP4

[rob-snyder]

Seems largely okay given my near non-existent knowledge

[rob-snyder]

I'm not familiar with the repo much less this feature, but this seems odd to me. You're adding the message twice and just changing whether it's image or text? Why not just

Suggested change

	messages.push({
	...message,
	_id: `${message._id}-${i}`,
	text: parts[0].trim(),
	});
	messages.push({
	...message,
	_id: `${message._id}-${i}-image`,
	text: '',
	image: imageUrl,
	});
	messages.push({
	...message,
	_id: `${message._id}-${i}`,
	text: parts[0].trim(),
	image: imageUrl,
	});

[sternetj]

Gifted chat renders the text below the image. For markdown images, we want them to appear in the order they were written so this splits the message up by image occurrences and interleaves them correctly.

Example: For the following markdown

Picture 1
![some-pic](https://some-url.com/1)
Picture 2
![some-pic-2](https://some-url.com/2)
Aren't these cool?

If we put the image on the message, gifted chat would display

<some-pic-1> Picture 1

<some-pic-2> Picture 2 Aren't these cool?

With my proposed solution we would see

Picture 1

<some-pic-1>

Picture 2

<some-pic-2>

Aren't these cool?

[github-actions]

🎉 This PR is included in version 12.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀