@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 894 B
JavaScript
import{jsx as r}from"react/jsx-runtime";import{Box as e}from"@mui/material";import i,{domToReact as n}from"html-react-parser";import t from"../Typography/Typography.js";const o=({children:o,typographyProps:l={variation:"lg",component:"p"}})=>{const p=(r=>{const e=r.replaceAll(/<p><\/p>/g,"<br />");return/<(p|div|h[1-6]|ul|ol|li|blockquote)[\s>]/i.test(e)?e:`<p>${e}</p>`})(o),a={replace(i){const o=i;if(o.attribs){if("p"===o.name)return r(t,{...l,children:n(o.children,a)});if("ul"===o.name)return r(e,{component:"ul",sx:{margin:0,pl:4},children:n(o.children,a)});if("ol"===o.name)return r(e,{component:"ol",sx:{margin:0,pl:4},children:n(o.children,a)});if("li"===o.name)return r(e,{component:"li",sx:{...l?.sx||{},fontSize:"inherit",lineHeight:"inherit"},children:n(o.children,a)})}}};return r(e,{sx:{overflowWrap:"break-word",whiteSpace:"pre-wrap"},children:i(p,a)})};export{o as default};