diff --git a/frontend/src/components/MarkdownWrapper/index.js b/frontend/src/components/MarkdownWrapper/index.js index 516d82a..4985208 100644 --- a/frontend/src/components/MarkdownWrapper/index.js +++ b/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 }) => ( @@ -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 ( - - {children} - - ); + 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 {children}; }; export default MarkdownWrapper; diff --git a/frontend/src/components/MessageListItem/index.js b/frontend/src/components/MessageListItem/index.js deleted file mode 100644 index 067ed08..0000000 --- a/frontend/src/components/MessageListItem/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const MessageListItem = () => { - return
; -}; - -export default MessageListItem;