@onesy/ui-react
Version:
UI for React
693 lines (682 loc) • 33.4 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["ref", "value", "render", "elementClassNames", "elementStyles", "onAdded", "onUpdate", "onStart", "Component", "className", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { colorToRgb, is } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import { replace, sanitize, staticClassName } from '../utils';
import { jsx as _jsx } from "react/jsx-runtime";
const useStyle = styleMethod(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: _objectSpread(_objectSpread({}, theme.typography.values.h1), {}, {
wordBreak: 'break-word',
margin: '70px 0 16px'
}),
h2: _objectSpread(_objectSpread({}, theme.typography.values.h2), {}, {
wordBreak: 'break-word',
margin: '50px 0 16px'
}),
h3: _objectSpread(_objectSpread({}, theme.typography.values.h3), {}, {
wordBreak: 'break-word',
margin: '40px 0 16px'
}),
h4: _objectSpread(_objectSpread({}, theme.typography.values.t1), {}, {
wordBreak: 'break-word',
margin: '30px 0 16px'
}),
h5: _objectSpread(_objectSpread({}, theme.typography.values.t2), {}, {
wordBreak: 'break-word',
margin: '20px 0 16px'
}),
h6: _objectSpread(_objectSpread({}, 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 ${colorToRgb(theme.methods.palette.color.value('primary', 5, true), 10)}`,
'& th, td': _objectSpread(_objectSpread({}, theme.typography.values.b2), {}, {
padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2, 'px')}`,
borderBottom: `1px solid ${colorToRgb(theme.methods.palette.color.value('primary', 5, true), 10)}`,
borderRight: `1px solid ${colorToRgb(theme.methods.palette.color.value('primary', 5, true), 10)}`,
whiteSpace: 'nowrap'
}),
'& th': {
fontWeight: '500',
borderBottom: `1px solid ${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 = props_ => {
const theme = useOnesyTheme();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMarkdown?.props?.default), props_);
const {
ref,
value,
render,
elementClassNames,
elementStyles,
onAdded,
onUpdate,
onStart,
Component = 'div',
className,
children
} = props,
other = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: React.useRef(undefined)
};
const [init, setInit] = React.useState(false);
const make = value_ => {
let valueNew = '';
const addClassName = (name, ...args) => {
let valueClass = classes[name];
if (elementClassNames?.[name]) valueClass += ` ${elementClassNames[name]}`;
// Add additional values
args.forEach(arg => valueClass += ` ${arg}`);
return ` class='${valueClass}'`;
};
const addStyle = name_0 => {
if (elementStyles?.[name_0]) return ` style='${elementStyles[name_0]}'`;
return '';
};
// Markdown
if (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_0 => item_0.trim());
const tdAttributes = {};
items[1].split('|').filter(Boolean).map(item_1 => item_1.trim()).forEach((item_2, index) => {
if (item_2.startsWith(':') && item_2.endsWith(':')) tdAttributes[index] = ` align='center'`;else if (item_2.endsWith(':')) tdAttributes[index] = ` align='right'`;else tdAttributes[index] = ` align='left'`;
});
const rowsHead = head.reduce((result, item_3, index_0) => {
result += `\n<th${tdAttributes[index_0] || ''}>${item_3}</th>`;
return result;
}, '');
let rowsBody = '';
items.slice(2).map(row_ => {
const row = row_.split('|').filter(Boolean).map(item_4 => item_4.trim());
let tr = ``;
row.forEach((item_5, index_1) => tr += `\n<td${tdAttributes[index_1] || ''}>${item_5}</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_0) => {
const valueRender = is('function', render) ? render('hr', classNames([classes['hr'], elementClassNames?.['hr']]), elementStyles?.['hr'], match, ...args_0) : undefined;
if (valueRender !== undefined) return valueRender;
return `<hr${addClassName('hr')}${addStyle('hr')}/>`;
}
}, {
value: /^ *-{3}$/gm,
method: (match_0, ...args_1) => {
const valueRender_0 = is('function', render) ? render('hr', classNames([classes['hr'], elementClassNames?.['hr']]), elementStyles?.['hr'], match_0, ...args_1) : undefined;
if (valueRender_0 !== undefined) return valueRender_0;
return `<hr${addClassName('hr')}${addStyle('hr')}/>`;
}
}, {
value: /^ *_{3}$/gm,
method: (match_1, ...args_2) => {
const valueRender_1 = is('function', render) ? render('hr', classNames([classes['hr'], elementClassNames?.['hr']]), elementStyles?.['hr'], match_1, ...args_2) : undefined;
if (valueRender_1 !== undefined) return valueRender_1;
return `<hr${addClassName('hr')}${addStyle('hr')}/>`;
}
},
// h1
{
value: /^ *# (.*)$/gm,
method: (match_2, a1, ...args_3) => {
const valueRender_2 = is('function', render) ? render('h1', classNames([classes['h1'], elementClassNames?.['h1']]), elementStyles?.['h1'], match_2, a1, ...args_3) : undefined;
if (valueRender_2 !== undefined) return valueRender_2;
return `<h1${addClassName('h1')}${addStyle('h1')}>${a1}</h1>`;
}
}, {
value: /^ *(.*)[\r\n]=+$/gm,
method: (match_3, a1_0, ...args_4) => {
const valueRender_3 = is('function', render) ? render('h1', classNames([classes['h1'], elementClassNames?.['h1']]), elementStyles?.['h1'], match_3, a1_0, ...args_4) : undefined;
if (valueRender_3 !== undefined) return valueRender_3;
return `<h1${addClassName('h1')}${addStyle('h1')}>${a1_0}</h1>`;
}
}, {
value: /^ *(.*)[\r\n]=+$/gm,
method: (match_4, a1_1, ...args_5) => {
const valueRender_4 = is('function', render) ? render('h1', classNames([classes['h1'], elementClassNames?.['h1']]), elementStyles?.['h1'], match_4, a1_1, ...args_5) : undefined;
if (valueRender_4 !== undefined) return valueRender_4;
return `<h1${addClassName('h1')}${addStyle('h1')}>${a1_1}</h1>`;
}
},
// h2
{
value: /^ *## (.*)$/gm,
method: (match_5, a1_2, ...args_6) => {
const valueRender_5 = is('function', render) ? render('h2', classNames([classes['h2'], elementClassNames?.['h2']]), elementStyles?.['h2'], match_5, a1_2, ...args_6) : undefined;
if (valueRender_5 !== undefined) return valueRender_5;
return `<h2${addClassName('h2')}${addStyle('h2')}>${a1_2}</h2>`;
}
}, {
value: /^ *(.*)[\r\n]-+$/gm,
method: (match_6, a1_3, ...args_7) => {
const valueRender_6 = is('function', render) ? render('h2', classNames([classes['h2'], elementClassNames?.['h2']]), elementStyles?.['h2'], match_6, a1_3, ...args_7) : undefined;
if (valueRender_6 !== undefined) return valueRender_6;
return `<h2${addClassName('h2')}${addStyle('h2')}>${a1_3}</h2>`;
}
},
// h3
{
value: /^ *### (.*)$/gm,
method: (match_7, a1_4, ...args_8) => {
const valueRender_7 = is('function', render) ? render('h3', classNames([classes['h3'], elementClassNames?.['h3']]), elementStyles?.['h3'], match_7, a1_4, ...args_8) : undefined;
if (valueRender_7 !== undefined) return valueRender_7;
return `<h3${addClassName('h3')}${addStyle('h3')}>${a1_4}</h3>`;
}
},
// h4
{
value: /^ *#### (.*)$/gm,
method: (match_8, a1_5, ...args_9) => {
const valueRender_8 = is('function', render) ? render('h4', classNames([classes['h4'], elementClassNames?.['h4']]), elementStyles?.['h4'], match_8, a1_5, ...args_9) : undefined;
if (valueRender_8 !== undefined) return valueRender_8;
return `<h4${addClassName('h4')}${addStyle('h4')}>${a1_5}</h4>`;
}
},
// h5
{
value: /^ *##### (.*)$/gm,
method: (match_9, a1_6, ...args_10) => {
const valueRender_9 = is('function', render) ? render('h5', classNames([classes['h5'], elementClassNames?.['h5']]), elementStyles?.['h5'], match_9, a1_6, ...args_10) : undefined;
if (valueRender_9 !== undefined) return valueRender_9;
return `<h5${addClassName('h5')}${addStyle('h5')}>${a1_6}</h5>`;
}
},
// h6
{
value: /^ *###### (.*)$/gm,
method: (match_10, a1_7, ...args_11) => {
const valueRender_10 = is('function', render) ? render('h6', classNames([classes['h6'], elementClassNames?.['h6']]), elementStyles?.['h6'], match_10, a1_7, ...args_11) : undefined;
if (valueRender_10 !== undefined) return valueRender_10;
return `<h6${addClassName('h6')}${addStyle('h6')}>${a1_7}</h6>`;
}
},
// table
{
value: / *\|?([^|\n]+(\|[^|\n]+)+ *\|?(\n *\|? *:?-{3,}:? *(\| *:?-{3,}:? *)+ *\|?)(\n *\|?([^|\n]+(\|[^|\n]+)+) *\|?)*)/g,
method: (match_11, ...args_12) => {
const valueRender_11 = is('function', render) ? render('table', classNames([classes['table'], elementClassNames?.['table']]), elementStyles?.['table'], match_11, ...args_12) : undefined;
if (valueRender_11 !== undefined) return valueRender_11;
return `<div class='${classes.tableWrapper}'><table${addClassName('table')}${addStyle('table')}>${table(match_11)}</table></div>`;
}
},
// a url
{
value: /(?:[^:][\n <])((?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\-\/]+))(?:>)?/g,
method: (match_12, a1_8, ...args_13) => {
const valueRender_12 = is('function', render) ? render('a', classNames([classes['a'], elementClassNames?.['a']]), elementStyles?.['a'], match_12, a1_8, ...args_13) : undefined;
if (valueRender_12 !== undefined) return valueRender_12;
let match_ = match_12;
if (match_.includes(`<${a1_8}>`)) match_ = match_.replace(`<${a1_8}>`, a1_8);
return match_.replace(a1_8, `<a${addClassName('a')}${addStyle('a')} href='${a1_8}' ref='nofollow'>${a1_8}</a>`);
}
},
// ol
{
value: new RegExp(`^ *(\\d+\\. .*(\\n+(\\d+\\. |\\s{${level * 2}}.*).*)*)`, 'gm'),
method: (match_13, ...args_14) => {
const valueRender_13 = is('function', render) ? render('ol', classNames([classes['ol'], elementClassNames?.['ol']]), elementStyles?.['ol'], match_13, ...args_14) : undefined;
if (valueRender_13 !== undefined) return valueRender_13;
return `<ol${addClassName('ol')}${addStyle('ol')}>${list(match_13, `\\d\\.`, level + 1)}</ol>`;
}
}, {
value: new RegExp(`^ *(\\d+\\) .*(\\n+(\\d+\\) |\\s{${level * 2}}.*).*)*)`, 'gm'),
method: (match_14, ...args_15) => {
const valueRender_14 = is('function', render) ? render('ol', classNames([classes['ol'], elementClassNames?.['ol']]), elementStyles?.['ol'], match_14, ...args_15) : undefined;
if (valueRender_14 !== undefined) return valueRender_14;
return `<ol${addClassName('ol')}${addStyle('ol')}>${list(match_14, `\\d\\)`, level + 1)}</ol>`;
}
},
// ul
{
value: new RegExp(`^ *(\\* .*(\\n+(\\* |\\s{${level * 2}}.*).*)*)`, 'gm'),
method: (match_15, ...args_16) => {
const valueRender_15 = is('function', render) ? render('ul', classNames([classes['ul'], elementClassNames?.['ul']]), elementStyles?.['ul'], match_15, ...args_16) : undefined;
if (valueRender_15 !== undefined) return valueRender_15;
return `<ul${addClassName('ul')}${addStyle('ul')}>${list(match_15, `\\*`, level + 1)}</ul>`;
}
}, {
value: new RegExp(`^ *(- .*(\\n+(- |\\s{${level * 2}}.*).*)*)`, 'gm'),
method: (match_16, ...args_17) => {
const valueRender_16 = is('function', render) ? render('ul', classNames([classes['ul'], elementClassNames?.['ul']]), elementStyles?.['ul'], match_16, ...args_17) : undefined;
if (valueRender_16 !== undefined) return valueRender_16;
return `<ul${addClassName('ul')}${addStyle('ul')}>${list(match_16, `\\-`, level + 1)}</ul>`;
}
}, {
value: new RegExp(`^ *(\\+ .*(\\n+(\\+ |\\s{${level * 2}}.*).*)*)`, 'gm'),
method: (match_17, ...args_18) => {
const valueRender_17 = is('function', render) ? render('ul', classNames([classes['ul'], elementClassNames?.['ul']]), elementStyles?.['ul'], match_17, ...args_18) : undefined;
if (valueRender_17 !== undefined) return valueRender_17;
return `<ul${addClassName('ul')}${addStyle('ul')}>${list(match_17, `\\+`, level + 1)}</ul>`;
}
},
// img
{
value: /!\[(.*)\]\(([^\s]*)( "([^"]*)")?\)/g,
method: (match_18, a1_9, a2, a3, a4, ...args_19) => {
const valueRender_18 = is('function', render) ? render('img', classNames([classes['img'], elementClassNames?.['img']]), elementStyles?.['img'], match_18, a1_9, a2, a3, a4, ...args_19) : undefined;
if (valueRender_18 !== undefined) return valueRender_18;
return `<img${addClassName('img')}${addStyle('img')} alt='${a1_9}' src='${a2}' title='${a4 || ''}' />`;
}
},
// img ref
{
value: /!\[(.*)\]\[(.*)\]/g,
method: (match_19, a1_10, a2_0, offset, string) => {
const url = string.match(new RegExp(`\\[${a2_0}\\]: ([^\\s]*)( "([^"]*)")?`)) || string.match(new RegExp(`\\[${a2_0.toLowerCase()}\\]: ([^\\s]*)( "([^"]*)")?`));
const valueRender_19 = is('function', render) ? render('img', classNames([classes['img'], elementClassNames?.['img']]), elementStyles?.['img'], url, match_19, a1_10, a2_0, offset, string) : undefined;
if (valueRender_19 !== undefined) return valueRender_19;
if (!url) return '';
return `<img${addClassName('img')}${addStyle('img')} alt='${a1_10}' src='${url[1]}' title='${url[3] || ''}' />`;
}
},
// a ref inline
{
value: /(?:[^^]*)(\[([^\]]*)\])(?:[^:[(]*)/gm,
method: (match_20, a1_11, a2_1, offset_0, string_0) => {
const url_0 = string_0.match(new RegExp(`\\[${a2_1}\\]: ([^\\s]*)( "([^"]*)")?`)) || string_0.match(new RegExp(`\\[${a2_1.toLowerCase()}\\]: ([^\\s]*)( "([^"]*)")?`));
const valueRender_20 = is('function', render) ? render('a', classNames([classes['a'], elementClassNames?.['a']]), elementStyles?.['a'], url_0, match_20, a1_11, a2_1, offset_0, string_0) : undefined;
if (valueRender_20 !== undefined) return valueRender_20;
if (!url_0) return match_20;
return match_20.replace(a1_11, `<a${addClassName('a')}${addStyle('a')} href='${url_0[1]}' title='${url_0[3] || ''}' ref='nofollow'>${a2_1}</a>`);
}
},
// blockquote
{
value: /^ *(>+ (<(a|img|em|strong)|[A-Za-z0-9[\]()])*.*(\n *>+.*)*)/gm,
method: (match_21, a1_12, ...args_20) => {
const valueRender_21 = is('function', render) ? render('blockquote', classNames([classes['blockquote'], elementClassNames?.['blockquote']]), elementStyles?.['blockquote'], match_21, a1_12, ...args_20) : undefined;
if (valueRender_21 !== undefined) return valueRender_21;
const valueAdd = a1_12.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_22, a1_13, ...args_21) => {
const valueRender_22 = is('function', render) ? render('p', classNames([classes['p'], elementClassNames?.['p']]), elementStyles?.['p'], match_22, a1_13, ...args_21) : undefined;
if (valueRender_22 !== undefined) return valueRender_22;
const string_1 = args_21[6];
if (!a1_13.trim()) return '';
// ul
const ul = string_1.match(new RegExp(`<ul|${escapeRegExp(a1_13)}|ul>`, 'g'));
if (ul) {
const index_2 = ul.findIndex(item_6 => item_6 === a1_13);
if (ul[index_2 - 1] === '<ul' && ul[index_2 + 1] === 'ul>' || ul[index_2 - 1] === '<ul' && a1_13.endsWith('</ul>')) return match_22;
}
// ol
const ol = string_1.match(new RegExp(`<ol|${escapeRegExp(a1_13)}|ol>`, 'g'));
if (ol) {
const index_3 = ol.findIndex(item_7 => item_7 === a1_13);
if (ol[index_3 - 1] === '<ol' && ol[index_3 + 1] === 'ol>' || ol[index_3 - 1] === '<ol' && a1_13.endsWith('</ol>')) return match_22;
}
// p
const p = string_1.match(new RegExp(`<p|${escapeRegExp(a1_13)}|p>`, 'g'));
if (p) {
const index_4 = p.findIndex(item_8 => item_8 === a1_13);
if (p[index_4 - 1] === '<p' && p[index_4 + 1] === 'p>' || p[index_4 - 1] === '<p' && a1_13.endsWith('</p>')) return match_22;
}
// pre
const pre = string_1.match(new RegExp(`<pre|${escapeRegExp(a1_13)}|pre>`, 'g'));
if (pre) {
const index_5 = pre.findIndex(item_9 => item_9 === a1_13);
if (pre[index_5 - 1] === '<pre' && pre[index_5 + 1] === 'pre>' || pre[index_5 - 1] === '<pre' && a1_13.endsWith('</pre>')) return match_22;
}
// blockquote
const blockquote = string_1.match(new RegExp(`<blockquote|${escapeRegExp(a1_13)}|blockquote>`, 'g'));
if (blockquote) {
const index_6 = blockquote.find(item_10 => item_10 === a1_13);
if (blockquote[index_6 - 1] === '<blockquote' && blockquote[index_6 + 1] === 'blockquote>' || blockquote[index_6 - 1] === '<blockquote' && a1_13.endsWith('</blockquote>')) return match_22;
}
// table
const table_ = string_1.match(new RegExp(`<table|${escapeRegExp(a1_13)}|table>`, 'g'));
if (table_) {
const index_7 = table_.findIndex(item_11 => item_11 === a1_13);
if (table_[index_7 - 1] === '<table' && table_[index_7 + 1] === 'table>' || table_[index_7 - 1] === '<table' && a1_13.endsWith('</table>')) return match_22;
}
return `<p${addClassName('p')}${addStyle('p')}>${a1_13.trim().replace(/ +/g, ' ')}</p>`;
}
},
// a
{
value: /\[([^\]]*)\]\(([^\s]*)( "([^"]*)")?\)/g,
method: (match_23, a1_14, a2_2, a3_0, a4_0, ...args_22) => {
const valueRender_23 = is('function', render) ? render('a', classNames([classes['a'], elementClassNames?.['a']]), elementStyles?.['a'], match_23, a1_14, a2_2, a3_0, a4_0, ...args_22) : undefined;
if (valueRender_23 !== undefined) return valueRender_23;
return `<a${addClassName('a')}${addStyle('a')} href='${a2_2}' title='${a4_0 || ''}' ref='nofollow'>${a1_14}</a>`;
}
},
// a ref
{
value: /\[(.*)\]\[(.*)\]/g,
method: (match_24, a1_15, a2_3, offset_1, string_2) => {
const url_1 = string_2.match(new RegExp(`\\[${a2_3}\\]: ([^\\s]*)( "([^"]*)")?`)) || string_2.match(new RegExp(`\\[${a2_3.toLowerCase()}\\]: ([^\\s]*)( "([^"]*)")?`));
const valueRender_24 = is('function', render) ? render('a', classNames([classes['a'], elementClassNames?.['a']]), elementStyles?.['a'], url_1, match_24, a1_15, a2_3, offset_1, string_2) : undefined;
if (valueRender_24 !== undefined) return valueRender_24;
if (!url_1) return '';
return `<a${addClassName('a')}${addStyle('a')} href='${url_1[1]}' title='${url_1[3] || ''}' ref='nofollow'>${a1_15}</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_25, a1_16, ...args_23) => {
const valueRender_25 = is('function', render) ? render('strong', classNames([classes['strong'], elementClassNames?.['strong']]), elementStyles?.['strong'], match_25, a1_16, ...args_23) : undefined;
if (valueRender_25 !== undefined) return valueRender_25;
return `<strong${addClassName('strong')}${addStyle('strong')}>${a1_16}</strong>`;
}
}, {
value: /\*\*([^*]*)\*\*/g,
method: (match_26, a1_17, ...args_24) => {
const valueRender_26 = is('function', render) ? render('strong', classNames([classes['strong'], elementClassNames?.['strong']]), elementStyles?.['strong'], match_26, a1_17, ...args_24) : undefined;
if (valueRender_26 !== undefined) return valueRender_26;
return `<strong${addClassName('strong')}${addStyle('strong')}>${a1_17}</strong>`;
}
},
// italic
{
// Safari doesn't support lookbehind
value: /_([^_]+)_/g,
method: (match_27, a1_18, a2_4, a3_1, ...args_25) => {
const valueRender_27 = is('function', render) ? render('italic', classNames([classes['italic'], elementClassNames?.['italic']]), elementStyles?.['italic'], match_27, a1_18, ...args_25) : undefined;
if (valueRender_27 !== undefined) return valueRender_27;
if (a3_1[a2_4 - 1] === '\\') return match_27;
return `<em${addClassName('em')}${addStyle('em')}>${a1_18}</em>`;
}
}, {
value: /\*([^*]*)\*/g,
method: (match_28, a1_19, ...args_26) => {
const valueRender_28 = is('function', render) ? render('italic', classNames([classes['italic'], elementClassNames?.['italic']]), elementStyles?.['italic'], match_28, a1_19, ...args_26) : undefined;
if (valueRender_28 !== undefined) return valueRender_28;
return `<em${addClassName('em')}${addStyle('em')}>${a1_19}</em>`;
}
},
// del
{
value: /~~([^~]*)~~/g,
method: (match_29, a1_20, ...args_27) => {
const valueRender_29 = is('function', render) ? render('del', classNames([classes['del'], elementClassNames?.['del']]), elementStyles?.['del'], match_29, a1_20, ...args_27) : undefined;
if (valueRender_29 !== undefined) return valueRender_29;
return `<del${addClassName('del')}${addStyle('del')}>${a1_20}</del>`;
}
},
// line break
{
value: / \\/g,
method: (match_30, ...args_28) => {
const valueRender_30 = is('function', render) ? render('br', classNames([classes['br'], elementClassNames?.['br']]), elementStyles?.['br'], match_30, ...args_28) : undefined;
if (valueRender_30 !== undefined) return valueRender_30;
return '<br />';
}
},
// Clean up
// Escape '\', preceeded, followed by any none \ character remove it
{
value: /[^\\](\\)[^\\]/g,
method: (match_31, a1_21, ...args_29) => {
const valueRender_31 = is('function', render) ? render('br', classNames([classes['br'], elementClassNames?.['br']]), elementStyles?.['br'], match_31, ...args_29) : undefined;
if (valueRender_31 !== undefined) return valueRender_31;
return match_31.replace(a1_21, '');
}
},
// It ought to be clean, only used code characters
// without any updates
// inline code
{
value: /([^`])`{1}([^`]*)`{1}([^`])/g,
method: (match_32, a1_22, a2_5, a3_2, ...args_30) => {
const valueRender_32 = is('function', render) ? render('code', classNames([classes['code'], elementClassNames?.['code']]), elementStyles?.['code'], match_32, a1_22, a2_5, a3_2, ...args_30) : undefined;
if (valueRender_32 !== undefined) return valueRender_32;
return `${a1_22}<code${addClassName('code')}${addStyle('code')}>${a2_5}</code>${a3_2}`;
}
}];
};
const method = (valueNew_, options_0 = {
level: 1
}) => {
let result_0 = regExpressions(options_0).reduce((regexResult, current) => {
let response = regexResult;
response = response.replace(current.value, current.method);
return response;
}, valueNew_);
result_0 = result_0.trim();
return result_0;
};
const listItem = (valueListItem_, level_0 = 1) => {
const valueListItem = valueListItem_;
const valueRender_33 = is('function', render) ? render('li', classNames([classes['li'], elementClassNames?.['li']]), elementStyles?.['li'], valueListItem_) : undefined;
if (valueRender_33 !== undefined) return valueRender_33;
return method(valueListItem, {
level: level_0 + 1
});
};
const list = (valueList_, marker, level_1 = 1) => {
const valueList = valueList_.replace(new RegExp(`(^ *(${marker} ?(.*))(\\n( +.*)?)*)`, 'gm'), (match_33, a1_23, a2_6, a3_3) => {
const other_ = match_33.replace(a2_6, '');
return `\n<li${addClassName('li')}${addStyle('li')}>
<p${addClassName('p')}${addStyle('p')}>${a3_3}</p>
${listItem(other_, level_1)}
</li>`;
});
return valueList;
};
valueNew = value_;
// Extract code blocks
let codeBlocks = valueNew.match(/`{3}([\s\S]*?)`{3}/g) || [];
if (!!codeBlocks.length) {
codeBlocks.forEach((item_12, index_8) => valueNew = valueNew.replace(item_12, `onesy-${index_8}-var`));
}
valueNew = method(valueNew);
// Revert code blocks
if (!!codeBlocks.length) {
codeBlocks = codeBlocks.map(item_13 => item_13.replace(/`{3}(.*)\n([\s\S]*?)`{3}/m, (match_34, a1_24, a2_7, ...args_31) => {
const additionalClassNames = [a1_24, `language-${a1_24}`];
const valueRender_34 = is('function', render) ? render('pre', classNames([classes['pre'], classNames([classes['pre'], elementClassNames?.['pre']]), ...additionalClassNames]), elementStyles?.['pre'], match_34, a1_24, a2_7, ...args_31) : undefined;
if (valueRender_34 !== undefined) return valueRender_34;
return `<pre${addClassName('pre', ...additionalClassNames)}${addStyle('pre')}><code${addClassName('code')}${addStyle('code')}>${sanitize(a2_7)}</code></pre>`;
}));
codeBlocks.forEach((item_14, index_9) => valueNew = replace(valueNew, `onesy-${index_9}-var`, item_14));
}
}
return valueNew;
};
React.useEffect(() => {
if (refs.root.current) {
if (is('function', onStart)) onStart();
refs.root.current.innerHTML = make(value);
if (!init) {
setInit(true);
if (is('function', onAdded)) onAdded();
}
if (is('function', onUpdate)) onUpdate();
}
}, [init, value]);
return /*#__PURE__*/_jsx(Component, _objectSpread({
ref: item_15 => {
if (ref) {
if (is('function', ref)) ref(item_15);else ref.current = item_15;
}
refs.root.current = item_15;
},
className: classNames([staticClassName('Markdown', theme) && ['onesy-Markdown-root'], className, classes.root])
}, other));
};
Markdown.displayName = 'onesy-Markdown';
export default Markdown;