refactor(Livechat): `Livechat/Message/markdown.js` -> TS (#32295)

packages/livechat/package.json

@@ -40,6 +40,7 @@
 		"@storybook/preact": "~6.5.16",
 		"@storybook/theming": "~6.5.16",
 		"@types/crypto-js": "~4.1.3",
+		"@types/markdown-it": "^14.0.1",
 		"@types/mini-css-extract-plugin": "~1.4.3",
 		"@types/webpack": "^5.28.4",
 		"@types/webpack-bundle-analyzer": "^4.6.2",

packages/livechat/src/components/Messages/MessageText/markdown.js → packages/livechat/src/components/Messages/MessageText/markdown.ts

+import type { Renderer } from 'markdown-it';
 import MarkdownIt from 'markdown-it';
 
 const md = new MarkdownIt({
@@ -7,7 +8,7 @@ const md = new MarkdownIt({
 	typographer: true,
 });
 
-const defaultRender = md.renderer.rules.link_open || ((tokens, idx, options, env, self) => self.renderToken(tokens, idx, options));
+const defaultRender = md.renderer.rules.link_open || ((tokens, idx, options, _env, self) => self.renderToken(tokens, idx, options));
 
 md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
 	const targetAttrIndex = tokens[idx].attrIndex('target');
@@ -16,20 +17,28 @@ md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
 	if (targetAttrIndex < 0) {
 		tokens[idx].attrPush(['target', '_blank']);
 	} else {
-		tokens[idx].attrs[targetAttrIndex][1] = '_blank';
+		const { attrs } = tokens[idx];
+
+		if (attrs) {
+			attrs[targetAttrIndex][1] = '_blank';
+		}
 	}
 
 	if (relAttrIndex < 0) {
 		tokens[idx].attrPush(['rel', 'noopener noreferrer']);
 	} else {
-		tokens[idx].attrs[relAttrIndex][1] = 'noopener noreferrer';
+		const { attrs } = tokens[idx];
+
+		if (attrs) {
+			attrs[relAttrIndex][1] = 'noopener noreferrer';
+		}
 	}
 
 	return defaultRender(tokens, idx, options, env, self);
 };
 
 md.use((md) => {
-	const renderStrong = (tokens, idx, opts, _, slf) => {
+	const renderStrong: Renderer.RenderRule = (tokens, idx, opts, _, slf) => {
 		const token = tokens[idx];
 		if (token.markup === '*') {
 			token.tag = 'strong';
@@ -79,4 +88,4 @@ md.use((md) => {
 	});
 });
 
-export const renderMarkdown = (...args) => md.render(...args);
+export const renderMarkdown = (...args: Parameters<typeof md.render>) => md.render(...args);

yarn.lock

@@ -9172,6 +9172,7 @@ __metadata:
     "@storybook/preact": ~6.5.16
     "@storybook/theming": ~6.5.16
     "@types/crypto-js": ~4.1.3
+    "@types/markdown-it": ^14.0.1
     "@types/mini-css-extract-plugin": ~1.4.3
     "@types/webpack": ^5.28.4
     "@types/webpack-bundle-analyzer": ^4.6.2
@@ -13851,6 +13852,13 @@ __metadata:
   languageName: node
   linkType: hard
+"@types/linkify-it@npm:*":
+  version: 3.0.5
+  resolution: "@types/linkify-it@npm:3.0.5"
+  checksum: fac28f41a6e576282300a459d70ea0d33aab70dbb77c3d09582bb0335bb00d862b6de69585792a4d590aae4173fbab0bf28861e2d90ca7b2b1439b52688e9ff6
+  languageName: node
+  linkType: hard
+
 "@types/lodash.clonedeep@npm:^4.5.9":
   version: 4.5.9
   resolution: "@types/lodash.clonedeep@npm:4.5.9"
@@ -13895,6 +13903,16 @@ __metadata:
   languageName: node
   linkType: hard
+"@types/markdown-it@npm:^14.0.1":
+  version: 14.0.1
+  resolution: "@types/markdown-it@npm:14.0.1"
+  dependencies:
+    "@types/linkify-it": "*"
+    "@types/mdurl": "*"
+  checksum: d38350ab6e066ae65827a60804b283ad66986d11f7e015d3427d2b32d49cf764f315a77c97e7cbb40043f4b77328284c0d9721df6171648cf96da3c89265df0a
+  languageName: node
+  linkType: hard
+
 "@types/marked@npm:^4.0.8":
   version: 4.0.8
   resolution: "@types/marked@npm:4.0.8"
@@ -13911,6 +13929,13 @@ __metadata:
   languageName: node
   linkType: hard
+"@types/mdurl@npm:*":
+  version: 1.0.5
+  resolution: "@types/mdurl@npm:1.0.5"
+  checksum: e8e872e8da8f517a9c748b06cec61c947cb73fd3069e8aeb0926670ec5dfac5d30549b3d0f1634950401633e812f9b7263f2d5dbe7e98fce12bcb2c659aa4b21
+  languageName: node
+  linkType: hard
+
 "@types/meteor-collection-hooks@npm:^0.8.8":
   version: 0.8.8
   resolution: "@types/meteor-collection-hooks@npm:0.8.8"