@onesy/ui-react 1.0.0

package/Markdown/Markdown.js

@@ -0,0 +1,730 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        width: '100%',
+        lineHeight: '1.5',
+        color: theme.palette.text.default.primary,
+        '& dt': {
+            marginTop: '16px',
+            fontWeight: '500'
+        },
+        '& dd': {
+            paddingInlineStart: theme.methods.space.value(2, 'px'),
+            marginBottom: '16px'
+        },
+        '& h1, h2, h3, h4, h5, h6': {
+            display: 'flex',
+            alignItems: 'center'
+        },
+        '& h1 code, h2 code, h3 code, h4 code, h5 code, h6 code': {
+            margin: '0 8px'
+        }
+    },
+    h1: Object.assign(Object.assign({}, theme.typography.values.h1), { wordBreak: 'break-word', margin: '70px 0 16px' }),
+    h2: Object.assign(Object.assign({}, theme.typography.values.h2), { wordBreak: 'break-word', margin: '50px 0 16px' }),
+    h3: Object.assign(Object.assign({}, theme.typography.values.h3), { wordBreak: 'break-word', margin: '40px 0 16px' }),
+    h4: Object.assign(Object.assign({}, theme.typography.values.t1), { wordBreak: 'break-word', margin: '30px 0 16px' }),
+    h5: Object.assign(Object.assign({}, theme.typography.values.t2), { wordBreak: 'break-word', margin: '20px 0 16px' }),
+    h6: Object.assign(Object.assign({}, theme.typography.values.t3), { wordBreak: 'break-word', margin: '10px 0 16px' }),
+    p: {
+        marginBottom: '16px',
+        wordBreak: 'break-word',
+        lineHeight: '1.5'
+    },
+    em: {},
+    strong: {},
+    del: {},
+    a: {
+        color: theme.palette.color.primary[40],
+        textDecoration: 'underline'
+    },
+    code: {
+        padding: `${theme.methods.space.value(0.25, 'px')} ${theme.methods.space.value(0.5, 'px')}`,
+        borderRadius: theme.methods.shape.radius.value('xs', 'px'),
+        background: theme.methods.palette.color.colorToRgb(theme.palette.text.default.primary, theme.palette.light ? 4 : 10),
+        fontFamily: theme.typography.font_family.tertiary,
+        fontSize: '0.75rem',
+        '& span': {
+            whiteSpace: 'pre'
+        }
+    },
+    pre: {
+        margin: '16px 0',
+        padding: theme.methods.space.value(2, 'px'),
+        borderRadius: theme.methods.shape.radius.value('rg', 'px'),
+        color: theme.palette.text.default.primary,
+        background: theme.methods.palette.color.colorToRgb(theme.palette.text.default.primary, theme.palette.light ? 0.04 : 0.1),
+        '& code': {
+            padding: '0px',
+            background: 'transparent'
+        }
+    },
+    hr: {
+        height: '1px',
+        width: '100%',
+        margin: '24px 0',
+        background: theme.methods.palette.color.colorToRgb(theme.palette.text.default.primary, theme.palette.light ? 0.04 : 0.2),
+        border: 'none'
+    },
+    blockquote: {
+        margin: '16px 0',
+        marginInlineStart: '16px',
+        padding: `${theme.methods.space.value(2.5, 'px')} ${theme.methods.space.value(2, 'px')}`,
+        borderInlineStart: `4px solid ${theme.methods.palette.color.colorToRgb(theme.palette.text.default.primary, theme.palette.light ? 0.04 : 0.2)}`,
+        background: theme.methods.palette.color.colorToRgb(theme.palette.text.default.primary, theme.palette.light ? 0.02 : 0.14),
+        '& > *': {
+            margin: '0px'
+        },
+        '& > $blockquote': {
+            marginBlock: '16px'
+        }
+    },
+    ol: {
+        paddingInlineStart: theme.methods.space.value(2, 'px'),
+        marginBottom: '16px'
+    },
+    ul: {
+        listStyleType: 'circle',
+        paddingInlineStart: theme.methods.space.value(2, 'px'),
+        marginBottom: '16px'
+    },
+    li: {
+        marginBottom: '10px',
+        '&:last-of-type': {
+            marginBottom: '0px'
+        },
+        '& p': {
+            lineHeight: 'inherit',
+            '&:last-of-type': {
+                marginBottom: '0px'
+            }
+        },
+        '& ul': {
+            marginBottom: '10px',
+            '&:first-of-type': {
+                marginTop: '10px'
+            },
+            '&:last-of-type': {
+                marginBottom: '0px'
+            }
+        },
+        '& ol': {
+            marginBottom: '10px',
+            '&:first-of-type': {
+                marginTop: '10px'
+            },
+            '&:last-of-type': {
+                marginBottom: '0px'
+            }
+        },
+        '& li': {
+            listStyleType: 'disc'
+        }
+    },
+    tableWrapper: {
+        overflowX: 'auto'
+    },
+    table: {
+        margin: '16px 0',
+        borderCollapse: 'collapse',
+        border: `1px solid ${(0, utils_1.colorToRgb)(theme.methods.palette.color.value('primary', 5, true), 10)}`,
+        '& th, td': Object.assign(Object.assign({}, theme.typography.values.b2), { padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2, 'px')}`, borderBottom: `1px solid ${(0, utils_1.colorToRgb)(theme.methods.palette.color.value('primary', 5, true), 10)}`, borderRight: `1px solid ${(0, utils_1.colorToRgb)(theme.methods.palette.color.value('primary', 5, true), 10)}`, whiteSpace: 'nowrap' }),
+        '& th': {
+            fontWeight: '500',
+            borderBottom: `1px solid ${(0, utils_1.colorToRgb)(theme.methods.palette.color.value('primary', 5, true), 14)}`,
+            background: theme.methods.palette.color.value('primary', 99, true)
+        }
+    }
+}), { name: 'onesy-Markdown' });
+const escapeRegExp = (value) => value.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+const Markdown = react_1.default.forwardRef((props_, ref) => {
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyMarkdown) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const { value, render, elementClassNames, elementStyles, onAdded, onUpdate, onStart, Component = 'div', className, children } = props, other = __rest(props, ["value", "render", "elementClassNames", "elementStyles", "onAdded", "onUpdate", "onStart", "Component", "className", "children"]);
+    const { classes } = useStyle();
+    const refs = {
+        root: react_1.default.useRef(undefined)
+    };
+    const [init, setInit] = react_1.default.useState(false);
+    const make = (value_) => {
+        let valueNew = '';
+        const addClassName = (name, ...args) => {
+            let valueClass = classes[name];
+            if (elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames[name])
+                valueClass += ` ${elementClassNames[name]}`;
+            // Add additional values
+            args.forEach(arg => valueClass += ` ${arg}`);
+            return ` class='${valueClass}'`;
+        };
+        const addStyle = (name) => {
+            if (elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles[name])
+                return ` style='${elementStyles[name]}'`;
+            return '';
+        };
+        // Markdown
+        if ((0, utils_1.is)('string', value_)) {
+            // version string
+            // add to the root programatically
+            // in this version style can only be added as string not an object
+            const table = (valueTable_) => {
+                const valueTable = valueTable_;
+                const items = valueTable.split('\n').filter(Boolean).map(item_ => {
+                    let item = item_.trim();
+                    if (item.startsWith('|'))
+                        item = item.slice(1).trim();
+                    if (item.endsWith('|'))
+                        item = item.slice(0, -1).trim();
+                    return item;
+                });
+                const head = items[0].split('|').filter(Boolean).map(item => item.trim());
+                const tdAttributes = {};
+                items[1].split('|').filter(Boolean).map(item => item.trim()).forEach((item, index) => {
+                    if (item.startsWith(':') && item.endsWith(':'))
+                        tdAttributes[index] = ` align='center'`;
+                    else if (item.endsWith(':'))
+                        tdAttributes[index] = ` align='right'`;
+                    else
+                        tdAttributes[index] = ` align='left'`;
+                });
+                const rowsHead = head.reduce((result, item, index) => {
+                    result += `\n<th${tdAttributes[index] || ''}>${item}</th>`;
+                    return result;
+                }, '');
+                let rowsBody = '';
+                items.slice(2).map(row_ => {
+                    const row = row_.split('|').filter(Boolean).map(item => item.trim());
+                    let tr = ``;
+                    row.forEach((item, index) => tr += `\n<td${tdAttributes[index] || ''}>${item}</td>`);
+                    rowsBody += `\n<tr>${tr}</tr>`;
+                });
+                return `<thead>
+  <tr>
+    ${rowsHead}
+  </tr>
+</thead>
+<tbody>
+  ${rowsBody}
+</tbody>
+`;
+            };
+            const regExpressions = (options = { level: 1 }) => {
+                const { level } = options;
+                return [
+                    // hr
+                    {
+                        value: /^ *\*{3}$/gm,
+                        method: (match, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('hr', (0, style_react_1.classNames)([classes['hr'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['hr']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['hr'], match, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<hr${addClassName('hr')}${addStyle('hr')}/>`;
+                        }
+                    },
+                    {
+                        value: /^ *-{3}$/gm,
+                        method: (match, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('hr', (0, style_react_1.classNames)([classes['hr'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['hr']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['hr'], match, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<hr${addClassName('hr')}${addStyle('hr')}/>`;
+                        }
+                    },
+                    {
+                        value: /^ *_{3}$/gm,
+                        method: (match, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('hr', (0, style_react_1.classNames)([classes['hr'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['hr']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['hr'], match, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<hr${addClassName('hr')}${addStyle('hr')}/>`;
+                        }
+                    },
+                    // h1
+                    {
+                        value: /^ *# (.*)$/gm,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('h1', (0, style_react_1.classNames)([classes['h1'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['h1']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['h1'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<h1${addClassName('h1')}${addStyle('h1')}>${a1}</h1>`;
+                        }
+                    },
+                    {
+                        value: /^ *(.*)[\r\n]=+$/gm,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('h1', (0, style_react_1.classNames)([classes['h1'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['h1']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['h1'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<h1${addClassName('h1')}${addStyle('h1')}>${a1}</h1>`;
+                        }
+                    },
+                    {
+                        value: /^ *(.*)[\r\n]=+$/gm,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('h1', (0, style_react_1.classNames)([classes['h1'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['h1']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['h1'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<h1${addClassName('h1')}${addStyle('h1')}>${a1}</h1>`;
+                        }
+                    },
+                    // h2
+                    {
+                        value: /^ *## (.*)$/gm,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('h2', (0, style_react_1.classNames)([classes['h2'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['h2']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['h2'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<h2${addClassName('h2')}${addStyle('h2')}>${a1}</h2>`;
+                        }
+                    },
+                    {
+                        value: /^ *(.*)[\r\n]-+$/gm,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('h2', (0, style_react_1.classNames)([classes['h2'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['h2']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['h2'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<h2${addClassName('h2')}${addStyle('h2')}>${a1}</h2>`;
+                        }
+                    },
+                    // h3
+                    {
+                        value: /^ *### (.*)$/gm,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('h3', (0, style_react_1.classNames)([classes['h3'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['h3']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['h3'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<h3${addClassName('h3')}${addStyle('h3')}>${a1}</h3>`;
+                        }
+                    },
+                    // h4
+                    {
+                        value: /^ *#### (.*)$/gm,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('h4', (0, style_react_1.classNames)([classes['h4'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['h4']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['h4'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<h4${addClassName('h4')}${addStyle('h4')}>${a1}</h4>`;
+                        }
+                    },
+                    // h5
+                    {
+                        value: /^ *##### (.*)$/gm,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('h5', (0, style_react_1.classNames)([classes['h5'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['h5']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['h5'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<h5${addClassName('h5')}${addStyle('h5')}>${a1}</h5>`;
+                        }
+                    },
+                    // h6
+                    {
+                        value: /^ *###### (.*)$/gm,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('h6', (0, style_react_1.classNames)([classes['h6'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['h6']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['h6'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<h6${addClassName('h6')}${addStyle('h6')}>${a1}</h6>`;
+                        }
+                    },
+                    // table
+                    {
+                        value: / *\|?([^|\n]+(\|[^|\n]+)+ *\|?(\n *\|? *:?-{3,}:? *(\| *:?-{3,}:? *)+ *\|?)(\n *\|?([^|\n]+(\|[^|\n]+)+) *\|?)*)/g,
+                        method: (match, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('table', (0, style_react_1.classNames)([classes['table'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['table']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['table'], match, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<div class='${classes.tableWrapper}'><table${addClassName('table')}${addStyle('table')}>${table(match)}</table></div>`;
+                        }
+                    },
+                    // a url
+                    {
+                        value: /(?:[^:][\n <])((?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\-\/]+))(?:>)?/g,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('a', (0, style_react_1.classNames)([classes['a'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['a']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['a'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            let match_ = match;
+                            if (match_.includes(`<${a1}>`))
+                                match_ = match_.replace(`<${a1}>`, a1);
+                            return match_.replace(a1, `<a${addClassName('a')}${addStyle('a')} href='${a1}' ref='nofollow'>${a1}</a>`);
+                        }
+                    },
+                    // ol
+                    {
+                        value: new RegExp(`^ *(\\d+\\. .*(\\n+(\\d+\\. |\\s{${level * 2}}.*).*)*)`, 'gm'),
+                        method: (match, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('ol', (0, style_react_1.classNames)([classes['ol'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['ol']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['ol'], match, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<ol${addClassName('ol')}${addStyle('ol')}>${list(match, `\\d\\.`, level + 1)}</ol>`;
+                        }
+                    },
+                    {
+                        value: new RegExp(`^ *(\\d+\\) .*(\\n+(\\d+\\) |\\s{${level * 2}}.*).*)*)`, 'gm'),
+                        method: (match, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('ol', (0, style_react_1.classNames)([classes['ol'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['ol']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['ol'], match, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<ol${addClassName('ol')}${addStyle('ol')}>${list(match, `\\d\\)`, level + 1)}</ol>`;
+                        }
+                    },
+                    // ul
+                    {
+                        value: new RegExp(`^ *(\\* .*(\\n+(\\* |\\s{${level * 2}}.*).*)*)`, 'gm'),
+                        method: (match, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('ul', (0, style_react_1.classNames)([classes['ul'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['ul']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['ul'], match, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<ul${addClassName('ul')}${addStyle('ul')}>${list(match, `\\*`, level + 1)}</ul>`;
+                        }
+                    },
+                    {
+                        value: new RegExp(`^ *(- .*(\\n+(- |\\s{${level * 2}}.*).*)*)`, 'gm'),
+                        method: (match, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('ul', (0, style_react_1.classNames)([classes['ul'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['ul']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['ul'], match, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<ul${addClassName('ul')}${addStyle('ul')}>${list(match, `\\-`, level + 1)}</ul>`;
+                        }
+                    },
+                    {
+                        value: new RegExp(`^ *(\\+ .*(\\n+(\\+ |\\s{${level * 2}}.*).*)*)`, 'gm'),
+                        method: (match, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('ul', (0, style_react_1.classNames)([classes['ul'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['ul']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['ul'], match, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<ul${addClassName('ul')}${addStyle('ul')}>${list(match, `\\+`, level + 1)}</ul>`;
+                        }
+                    },
+                    // img
+                    {
+                        value: /!\[(.*)\]\(([^\s]*)( "([^"]*)")?\)/g,
+                        method: (match, a1, a2, a3, a4, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('img', (0, style_react_1.classNames)([classes['img'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['img']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['img'], match, a1, a2, a3, a4, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<img${addClassName('img')}${addStyle('img')} alt='${a1}' src='${a2}' title='${a4 || ''}' />`;
+                        }
+                    },
+                    // img ref
+                    {
+                        value: /!\[(.*)\]\[(.*)\]/g,
+                        method: (match, a1, a2, offset, string) => {
+                            const url = string.match(new RegExp(`\\[${a2}\\]: ([^\\s]*)( "([^"]*)")?`)) || string.match(new RegExp(`\\[${a2.toLowerCase()}\\]: ([^\\s]*)( "([^"]*)")?`));
+                            const valueRender = (0, utils_1.is)('function', render) ? render('img', (0, style_react_1.classNames)([classes['img'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['img']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['img'], url, match, a1, a2, offset, string) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            if (!url)
+                                return '';
+                            return `<img${addClassName('img')}${addStyle('img')} alt='${a1}' src='${url[1]}' title='${url[3] || ''}' />`;
+                        }
+                    },
+                    // a ref inline
+                    {
+                        value: /(?:[^^]*)(\[([^\]]*)\])(?:[^:[(]*)/gm,
+                        method: (match, a1, a2, offset, string) => {
+                            const url = string.match(new RegExp(`\\[${a2}\\]: ([^\\s]*)( "([^"]*)")?`)) || string.match(new RegExp(`\\[${a2.toLowerCase()}\\]: ([^\\s]*)( "([^"]*)")?`));
+                            const valueRender = (0, utils_1.is)('function', render) ? render('a', (0, style_react_1.classNames)([classes['a'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['a']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['a'], url, match, a1, a2, offset, string) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            if (!url)
+                                return match;
+                            return match.replace(a1, `<a${addClassName('a')}${addStyle('a')} href='${url[1]}' title='${url[3] || ''}' ref='nofollow'>${a2}</a>`);
+                        }
+                    },
+                    // blockquote
+                    {
+                        value: /^ *(>+ (<(a|img|em|strong)|[A-Za-z0-9[\]()])*.*(\n *>+.*)*)/gm,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('blockquote', (0, style_react_1.classNames)([classes['blockquote'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['blockquote']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['blockquote'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            const valueAdd = a1.replace(/^ *> */gm, ' ');
+                            return `<blockquote${addClassName('blockquote')}${addStyle('blockquote')}>${method(valueAdd)}</blockquote>`;
+                        }
+                    },
+                    // p
+                    {
+                        value: /^ *((<(a|img|em|strong)|[A-Za-z0-9[\]()]).*(\n *(<(a|img|em|strong)|[A-Za-z0-9[\]()]).*)*)/gm,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('p', (0, style_react_1.classNames)([classes['p'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['p']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['p'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            const string = args[6];
+                            if (!a1.trim())
+                                return '';
+                            // ul
+                            const ul = string.match(new RegExp(`<ul|${escapeRegExp(a1)}|ul>`, 'g'));
+                            if (ul) {
+                                const index = ul.findIndex(item => item === a1);
+                                if ((ul[index - 1] === '<ul' && ul[index + 1] === 'ul>') ||
+                                    (ul[index - 1] === '<ul' && a1.endsWith('</ul>')))
+                                    return match;
+                            }
+                            // ol
+                            const ol = string.match(new RegExp(`<ol|${escapeRegExp(a1)}|ol>`, 'g'));
+                            if (ol) {
+                                const index = ol.findIndex(item => item === a1);
+                                if ((ol[index - 1] === '<ol' && ol[index + 1] === 'ol>') ||
+                                    (ol[index - 1] === '<ol' && a1.endsWith('</ol>')))
+                                    return match;
+                            }
+                            // p
+                            const p = string.match(new RegExp(`<p|${escapeRegExp(a1)}|p>`, 'g'));
+                            if (p) {
+                                const index = p.findIndex(item => item === a1);
+                                if ((p[index - 1] === '<p' && p[index + 1] === 'p>') ||
+                                    (p[index - 1] === '<p' && a1.endsWith('</p>')))
+                                    return match;
+                            }
+                            // pre
+                            const pre = string.match(new RegExp(`<pre|${escapeRegExp(a1)}|pre>`, 'g'));
+                            if (pre) {
+                                const index = pre.findIndex(item => item === a1);
+                                if ((pre[index - 1] === '<pre' && pre[index + 1] === 'pre>') ||
+                                    (pre[index - 1] === '<pre' && a1.endsWith('</pre>')))
+                                    return match;
+                            }
+                            // blockquote
+                            const blockquote = string.match(new RegExp(`<blockquote|${escapeRegExp(a1)}|blockquote>`, 'g'));
+                            if (blockquote) {
+                                const index = blockquote.find(item => item === a1);
+                                if ((blockquote[index - 1] === '<blockquote' && blockquote[index + 1] === 'blockquote>') ||
+                                    (blockquote[index - 1] === '<blockquote' && a1.endsWith('</blockquote>')))
+                                    return match;
+                            }
+                            // table
+                            const table_ = string.match(new RegExp(`<table|${escapeRegExp(a1)}|table>`, 'g'));
+                            if (table_) {
+                                const index = table_.findIndex(item => item === a1);
+                                if ((table_[index - 1] === '<table' && table_[index + 1] === 'table>') ||
+                                    (table_[index - 1] === '<table' && a1.endsWith('</table>')))
+                                    return match;
+                            }
+                            return `<p${addClassName('p')}${addStyle('p')}>${a1.trim().replace(/ +/g, ' ')}</p>`;
+                        }
+                    },
+                    // a
+                    {
+                        value: /\[([^\]]*)\]\(([^\s]*)( "([^"]*)")?\)/g,
+                        method: (match, a1, a2, a3, a4, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('a', (0, style_react_1.classNames)([classes['a'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['a']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['a'], match, a1, a2, a3, a4, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<a${addClassName('a')}${addStyle('a')} href='${a2}' title='${a4 || ''}' ref='nofollow'>${a1}</a>`;
+                        }
+                    },
+                    // a ref
+                    {
+                        value: /\[(.*)\]\[(.*)\]/g,
+                        method: (match, a1, a2, offset, string) => {
+                            const url = string.match(new RegExp(`\\[${a2}\\]: ([^\\s]*)( "([^"]*)")?`)) || string.match(new RegExp(`\\[${a2.toLowerCase()}\\]: ([^\\s]*)( "([^"]*)")?`));
+                            const valueRender = (0, utils_1.is)('function', render) ? render('a', (0, style_react_1.classNames)([classes['a'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['a']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['a'], url, match, a1, a2, offset, string) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            if (!url)
+                                return '';
+                            return `<a${addClassName('a')}${addStyle('a')} href='${url[1]}' title='${url[3] || ''}' ref='nofollow'>${a1}</a>`;
+                        }
+                    },
+                    // a clean up
+                    {
+                        value: /(<a.*)(title='')([^<]*<\/a>)/g,
+                        method: '$1$3'
+                    },
+                    // img clean up
+                    {
+                        value: /(<img.*)(title='')([^<]*\/>)/g,
+                        method: '$1$3'
+                    },
+                    // a refs clean up
+                    {
+                        value: /<p.*>\[.*\]:[^<]*<\/p>/g,
+                        method: ''
+                    },
+                    // bold
+                    {
+                        value: /__([^_]*)__/g,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('strong', (0, style_react_1.classNames)([classes['strong'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['strong']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['strong'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<strong${addClassName('strong')}${addStyle('strong')}>${a1}</strong>`;
+                        }
+                    },
+                    {
+                        value: /\*\*([^*]*)\*\*/g,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('strong', (0, style_react_1.classNames)([classes['strong'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['strong']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['strong'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<strong${addClassName('strong')}${addStyle('strong')}>${a1}</strong>`;
+                        }
+                    },
+                    // italic
+                    {
+                        // Safari doesn't support lookbehind
+                        value: /_([^_]+)_/g,
+                        method: (match, a1, a2, a3, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('italic', (0, style_react_1.classNames)([classes['italic'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['italic']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['italic'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            if (a3[a2 - 1] === '\\')
+                                return match;
+                            return `<em${addClassName('em')}${addStyle('em')}>${a1}</em>`;
+                        }
+                    },
+                    {
+                        value: /\*([^*]*)\*/g,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('italic', (0, style_react_1.classNames)([classes['italic'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['italic']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['italic'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<em${addClassName('em')}${addStyle('em')}>${a1}</em>`;
+                        }
+                    },
+                    // del
+                    {
+                        value: /~~([^~]*)~~/g,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('del', (0, style_react_1.classNames)([classes['del'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['del']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['del'], match, a1, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `<del${addClassName('del')}${addStyle('del')}>${a1}</del>`;
+                        }
+                    },
+                    // line break
+                    {
+                        value: / \\/g,
+                        method: (match, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('br', (0, style_react_1.classNames)([classes['br'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['br']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['br'], match, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return '<br />';
+                        }
+                    },
+                    // Clean up
+                    // Escape '\', preceeded, followed by any none \ character remove it
+                    {
+                        value: /[^\\](\\)[^\\]/g,
+                        method: (match, a1, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('br', (0, style_react_1.classNames)([classes['br'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['br']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['br'], match, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return match.replace(a1, '');
+                        }
+                    },
+                    // It ought to be clean, only used code characters
+                    // without any updates
+                    // inline code
+                    {
+                        value: /([^`])`{1}([^`]*)`{1}([^`])/g,
+                        method: (match, a1, a2, a3, ...args) => {
+                            const valueRender = (0, utils_1.is)('function', render) ? render('code', (0, style_react_1.classNames)([classes['code'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['code']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['code'], match, a1, a2, a3, ...args) : undefined;
+                            if (valueRender !== undefined)
+                                return valueRender;
+                            return `${a1}<code${addClassName('code')}${addStyle('code')}>${a2}</code>${a3}`;
+                        }
+                    }
+                ];
+            };
+            const method = (valueNew_, options = { level: 1 }) => {
+                let result = regExpressions(options).reduce((regexResult, current) => {
+                    let response = regexResult;
+                    response = response.replace(current.value, current.method);
+                    return response;
+                }, valueNew_);
+                result = result.trim();
+                return result;
+            };
+            const listItem = (valueListItem_, level = 1) => {
+                const valueListItem = valueListItem_;
+                const valueRender = (0, utils_1.is)('function', render) ? render('li', (0, style_react_1.classNames)([classes['li'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['li']]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['li'], valueListItem_) : undefined;
+                if (valueRender !== undefined)
+                    return valueRender;
+                return method(valueListItem, { level: level + 1 });
+            };
+            const list = (valueList_, marker, level = 1) => {
+                const valueList = valueList_.replace(new RegExp(`(^ *(${marker} ?(.*))(\\n( +.*)?)*)`, 'gm'), (match, a1, a2, a3) => {
+                    const other_ = match.replace(a2, '');
+                    return `\n<li${addClassName('li')}${addStyle('li')}>
+<p${addClassName('p')}${addStyle('p')}>${a3}</p>
+
+${listItem(other_, level)}
+</li>`;
+                });
+                return valueList;
+            };
+            valueNew = value_;
+            // Extract code blocks
+            let codeBlocks = valueNew.match(/`{3}([\s\S]*?)`{3}/g) || [];
+            if (!!codeBlocks.length) {
+                codeBlocks.forEach((item, index) => valueNew = valueNew.replace(item, `onesy-${index}-var`));
+            }
+            valueNew = method(valueNew);
+            // Revert code blocks
+            if (!!codeBlocks.length) {
+                codeBlocks = codeBlocks
+                    .map(item => item.replace(/`{3}(.*)\n([\s\S]*?)`{3}/m, (match, a1, a2, ...args) => {
+                    const additionalClassNames = [a1, `language-${a1}`];
+                    const valueRender = (0, utils_1.is)('function', render) ? render('pre', (0, style_react_1.classNames)([classes['pre'], (0, style_react_1.classNames)([classes['pre'], elementClassNames === null || elementClassNames === void 0 ? void 0 : elementClassNames['pre']]), ...additionalClassNames]), elementStyles === null || elementStyles === void 0 ? void 0 : elementStyles['pre'], match, a1, a2, ...args) : undefined;
+                    if (valueRender !== undefined)
+                        return valueRender;
+                    return `<pre${addClassName('pre', ...additionalClassNames)}${addStyle('pre')}><code${addClassName('code')}${addStyle('code')}>${(0, utils_2.sanitize)(a2)}</code></pre>`;
+                }));
+                codeBlocks.forEach((item, index) => valueNew = (0, utils_2.replace)(valueNew, `onesy-${index}-var`, item));
+            }
+        }
+        return valueNew;
+    };
+    react_1.default.useEffect(() => {
+        if (refs.root.current) {
+            if ((0, utils_1.is)('function', onStart))
+                onStart();
+            refs.root.current.innerHTML = make(value);
+            if (!init) {
+                setInit(true);
+                if ((0, utils_1.is)('function', onAdded))
+                    onAdded();
+            }
+            if ((0, utils_1.is)('function', onUpdate))
+                onUpdate();
+        }
+    }, [init, value, onStart, onAdded, onUpdate]);
+    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: item => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('Markdown', theme) && [
+                'onesy-Markdown-root'
+            ],
+            className,
+            classes.root
+        ]) }, other)));
+});
+Markdown.displayName = 'onesy-Markdown';
+exports.default = Markdown;