improvement: improove markdown wrapper

frontend/src/components/MarkdownWrapper/index.js

@@ -1,14 +1,147 @@
 import React from "react";
 import Markdown from "markdown-to-jsx";
 
-import { makeStyles } from "@material-ui/core/styles";
+const elements = [
+	"a",
+	"abbr",
+	"address",
+	"area",
+	"article",
+	"aside",
+	"audio",
+	"b",
+	"base",
+	"bdi",
+	"bdo",
+	"big",
+	"blockquote",
+	"body",
+	"br",
+	"button",
+	"canvas",
+	"caption",
+	"cite",
+	"code",
+	"col",
+	"colgroup",
+	"data",
+	"datalist",
+	"dd",
+	"del",
+	"details",
+	"dfn",
+	"dialog",
+	"div",
+	"dl",
+	"dt",
+	"em",
+	"embed",
+	"fieldset",
+	"figcaption",
+	"figure",
+	"footer",
+	"form",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"head",
+	"header",
+	"hgroup",
+	"hr",
+	"html",
+	"i",
+	"iframe",
+	"img",
+	"input",
+	"ins",
+	"kbd",
+	"keygen",
+	"label",
+	"legend",
+	"li",
+	"link",
+	"main",
+	"map",
+	"mark",
+	"marquee",
+	"menu",
+	"menuitem",
+	"meta",
+	"meter",
+	"nav",
+	"noscript",
+	"object",
+	"ol",
+	"optgroup",
+	"option",
+	"output",
+	"p",
+	"param",
+	"picture",
+	"pre",
+	"progress",
+	"q",
+	"rp",
+	"rt",
+	"ruby",
+	"s",
+	"samp",
+	"script",
+	"section",
+	"select",
+	"small",
+	"source",
+	"span",
+	"strong",
+	"style",
+	"sub",
+	"summary",
+	"sup",
+	"table",
+	"tbody",
+	"td",
+	"textarea",
+	"tfoot",
+	"th",
+	"thead",
+	"time",
+	"title",
+	"tr",
+	"track",
+	"u",
+	"ul",
+	"var",
+	"video",
+	"wbr",
 
-const useStyles = makeStyles(theme => ({
-	markdownP: {
-		marginBlockStart: 0,
-		marginBlockEnd: 0,
-	},
-}));
+	// SVG
+	"circle",
+	"clipPath",
+	"defs",
+	"ellipse",
+	"foreignObject",
+	"g",
+	"image",
+	"line",
+	"linearGradient",
+	"marker",
+	"mask",
+	"path",
+	"pattern",
+	"polygon",
+	"polyline",
+	"radialGradient",
+	"rect",
+	"stop",
+	"svg",
+	"text",
+	"tspan",
+];
+
+const allowedElements = ["a", "b", "strong", "em", "u", "code", "del"];
 
 const CustomLink = ({ children, ...props }) => (
 	<a {...props} target="_blank" rel="noopener noreferrer">
@@ -17,30 +150,35 @@ const CustomLink = ({ children, ...props }) => (
 );
 
 const MarkdownWrapper = ({ children }) => {
-	const classes = useStyles();
 	const boldRegex = /\*(.*?)\*/g;
+	const tildaRegex = /~(.*?)~/g;
 
 	if (children && boldRegex.test(children)) {
 		children = children.replace(boldRegex, "**$1**");
 	}
+	if (children && tildaRegex.test(children)) {
+		children = children.replace(tildaRegex, "~~$1~~");
+	}
 
-	return (
-		<Markdown
-			options={{
-				disableParsingRawHTML: true,
-				overrides: {
-					a: { component: CustomLink },
-					p: {
-						props: {
-							className: classes.markdownP,
-						},
-					},
-				},
-			}}
-		>
-			{children}
-		</Markdown>
-	);
+	const options = React.useMemo(() => {
+		const options = {
+			disableParsingRawHTML: true,
+			forceInline: true,
+			overrides: {
+				a: { component: CustomLink },
+			},
+		};
+
+		elements.forEach(element => {
+			if (!allowedElements.includes(element)) {
+				options.overrides[element] = ({ children }) => children;
+			}
+		});
+
+		return options;
+	}, []);
+
+	return <Markdown options={options}>{children}</Markdown>;
 };
 
 export default MarkdownWrapper;

frontend/src/components/MessageListItem/index.js

@@ -1,7 +0,0 @@
-import React from "react";
-
-const MessageListItem = () => {
-	return <div></div>;
-};
-
-export default MessageListItem;