@onesy/ui-react
Version:
UI for React
795 lines (784 loc) • 39 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["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';
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 = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useOnesyTheme();
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMarkdown?.props?.default), props_), [props_]);
const {
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 = function (name) {
let valueClass = classes[name];
if (elementClassNames?.[name]) valueClass += ` ${elementClassNames[name]}`;
// Add additional values
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
args.forEach(arg => valueClass += ` ${arg}`);
return ` class='${valueClass}'`;
};
const addStyle = name => {
if (elementStyles?.[name]) return ` style='${elementStyles[name]}'`;
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 => 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 = function () {
let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
level: 1
};
const {
level
} = options;
return [
// hr
{
value: /^ *\*{3}$/gm,
method: function (match) {
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
args[_key2 - 1] = arguments[_key2];
}
const valueRender = is('function', render) ? render('hr', classNames([classes['hr'], elementClassNames?.['hr']]), elementStyles?.['hr'], match, ...args) : undefined;
if (valueRender !== undefined) return valueRender;
return `<hr${addClassName('hr')}${addStyle('hr')}/>`;
}
}, {
value: /^ *-{3}$/gm,
method: function (match) {
for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
args[_key3 - 1] = arguments[_key3];
}
const valueRender = is('function', render) ? render('hr', classNames([classes['hr'], elementClassNames?.['hr']]), elementStyles?.['hr'], match, ...args) : undefined;
if (valueRender !== undefined) return valueRender;
return `<hr${addClassName('hr')}${addStyle('hr')}/>`;
}
}, {
value: /^ *_{3}$/gm,
method: function (match) {
for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
args[_key4 - 1] = arguments[_key4];
}
const valueRender = is('function', render) ? render('hr', classNames([classes['hr'], elementClassNames?.['hr']]), elementStyles?.['hr'], match, ...args) : undefined;
if (valueRender !== undefined) return valueRender;
return `<hr${addClassName('hr')}${addStyle('hr')}/>`;
}
},
// h1
{
value: /^ *# (.*)$/gm,
method: function (match, a1) {
for (var _len5 = arguments.length, args = new Array(_len5 > 2 ? _len5 - 2 : 0), _key5 = 2; _key5 < _len5; _key5++) {
args[_key5 - 2] = arguments[_key5];
}
const valueRender = is('function', render) ? render('h1', classNames([classes['h1'], elementClassNames?.['h1']]), elementStyles?.['h1'], match, a1, ...args) : undefined;
if (valueRender !== undefined) return valueRender;
return `<h1${addClassName('h1')}${addStyle('h1')}>${a1}</h1>`;
}
}, {
value: /^ *(.*)[\r\n]=+$/gm,
method: function (match, a1) {
for (var _len6 = arguments.length, args = new Array(_len6 > 2 ? _len6 - 2 : 0), _key6 = 2; _key6 < _len6; _key6++) {
args[_key6 - 2] = arguments[_key6];
}
const valueRender = is('function', render) ? render('h1', classNames([classes['h1'], elementClassNames?.['h1']]), elementStyles?.['h1'], match, a1, ...args) : undefined;
if (valueRender !== undefined) return valueRender;
return `<h1${addClassName('h1')}${addStyle('h1')}>${a1}</h1>`;
}
}, {
value: /^ *(.*)[\r\n]=+$/gm,
method: function (match, a1) {
for (var _len7 = arguments.length, args = new Array(_len7 > 2 ? _len7 - 2 : 0), _key7 = 2; _key7 < _len7; _key7++) {
args[_key7 - 2] = arguments[_key7];
}
const valueRender = is('function', render) ? render('h1', classNames([classes['h1'], elementClassNames?.['h1']]), elementStyles?.['h1'], match, a1, ...args) : undefined;
if (valueRender !== undefined) return valueRender;
return `<h1${addClassName('h1')}${addStyle('h1')}>${a1}</h1>`;
}
},
// h2
{
value: /^ *## (.*)$/gm,
method: function (match, a1) {
for (var _len8 = arguments.length, args = new Array(_len8 > 2 ? _len8 - 2 : 0), _key8 = 2; _key8 < _len8; _key8++) {
args[_key8 - 2] = arguments[_key8];
}
const valueRender = is('function', render) ? render('h2', classNames([classes['h2'], elementClassNames?.['h2']]), elementStyles?.['h2'], match, a1, ...args) : undefined;
if (valueRender !== undefined) return valueRender;
return `<h2${addClassName('h2')}${addStyle('h2')}>${a1}</h2>`;
}
}, {
value: /^ *(.*)[\r\n]-+$/gm,
method: function (match, a1) {
for (var _len9 = arguments.length, args = new Array(_len9 > 2 ? _len9 - 2 : 0), _key9 = 2; _key9 < _len9; _key9++) {
args[_key9 - 2] = arguments[_key9];
}
const valueRender = is('function', render) ? render('h2', classNames([classes['h2'], elementClassNames?.['h2']]), elementStyles?.['h2'], match, a1, ...args) : undefined;
if (valueRender !== undefined) return valueRender;
return `<h2${addClassName('h2')}${addStyle('h2')}>${a1}</h2>`;
}
},
// h3
{
value: /^ *### (.*)$/gm,
method: function (match, a1) {
for (var _len10 = arguments.length, args = new Array(_len10 > 2 ? _len10 - 2 : 0), _key10 = 2; _key10 < _len10; _key10++) {
args[_key10 - 2] = arguments[_key10];
}
const valueRender = is('function', render) ? render('h3', classNames([classes['h3'], elementClassNames?.['h3']]), elementStyles?.['h3'], match, a1, ...args) : undefined;
if (valueRender !== undefined) return valueRender;
return `<h3${addClassName('h3')}${addStyle('h3')}>${a1}</h3>`;
}
},
// h4
{
value: /^ *#### (.*)$/gm,
method: function (match, a1) {
for (var _len11 = arguments.length, args = new Array(_len11 > 2 ? _len11 - 2 : 0), _key11 = 2; _key11 < _len11; _key11++) {
args[_key11 - 2] = arguments[_key11];
}
const valueRender = is('function', render) ? render('h4', classNames([classes['h4'], elementClassNames?.['h4']]), elementStyles?.['h4'], match, a1, ...args) : undefined;
if (valueRender !== undefined) return valueRender;
return `<h4${addClassName('h4')}${addStyle('h4')}>${a1}</h4>`;
}
},
// h5
{
value: /^ *##### (.*)$/gm,
method: function (match, a1) {
for (var _len12 = arguments.length, args = new Array(_len12 > 2 ? _len12 - 2 : 0), _key12 = 2; _key12 < _len12; _key12++) {
args[_key12 - 2] = arguments[_key12];
}
const valueRender = is('function', render) ? render('h5', classNames([classes['h5'], elementClassNames?.['h5']]), elementStyles?.['h5'], match, a1, ...args) : undefined;
if (valueRender !== undefined) return valueRender;
return `<h5${addClassName('h5')}${addStyle('h5')}>${a1}</h5>`;
}
},
// h6
{
value: /^ *###### (.*)$/gm,
method: function (match, a1) {
for (var _len13 = arguments.length, args = new Array(_len13 > 2 ? _len13 - 2 : 0), _key13 = 2; _key13 < _len13; _key13++) {
args[_key13 - 2] = arguments[_key13];
}
const valueRender = is('function', render) ? render('h6', classNames([classes['h6'], elementClassNames?.['h6']]), 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: function (match) {
for (var _len14 = arguments.length, args = new Array(_len14 > 1 ? _len14 - 1 : 0), _key14 = 1; _key14 < _len14; _key14++) {
args[_key14 - 1] = arguments[_key14];
}
const valueRender = is('function', render) ? render('table', classNames([classes['table'], elementClassNames?.['table']]), 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: function (match, a1) {
for (var _len15 = arguments.length, args = new Array(_len15 > 2 ? _len15 - 2 : 0), _key15 = 2; _key15 < _len15; _key15++) {
args[_key15 - 2] = arguments[_key15];
}
const valueRender = is('function', render) ? render('a', classNames([classes['a'], elementClassNames?.['a']]), 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: function (match) {
for (var _len16 = arguments.length, args = new Array(_len16 > 1 ? _len16 - 1 : 0), _key16 = 1; _key16 < _len16; _key16++) {
args[_key16 - 1] = arguments[_key16];
}
const valueRender = is('function', render) ? render('ol', classNames([classes['ol'], elementClassNames?.['ol']]), 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: function (match) {
for (var _len17 = arguments.length, args = new Array(_len17 > 1 ? _len17 - 1 : 0), _key17 = 1; _key17 < _len17; _key17++) {
args[_key17 - 1] = arguments[_key17];
}
const valueRender = is('function', render) ? render('ol', classNames([classes['ol'], elementClassNames?.['ol']]), 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: function (match) {
for (var _len18 = arguments.length, args = new Array(_len18 > 1 ? _len18 - 1 : 0), _key18 = 1; _key18 < _len18; _key18++) {
args[_key18 - 1] = arguments[_key18];
}
const valueRender = is('function', render) ? render('ul', classNames([classes['ul'], elementClassNames?.['ul']]), 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: function (match) {
for (var _len19 = arguments.length, args = new Array(_len19 > 1 ? _len19 - 1 : 0), _key19 = 1; _key19 < _len19; _key19++) {
args[_key19 - 1] = arguments[_key19];
}
const valueRender = is('function', render) ? render('ul', classNames([classes['ul'], elementClassNames?.['ul']]), 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: function (match) {
for (var _len20 = arguments.length, args = new Array(_len20 > 1 ? _len20 - 1 : 0), _key20 = 1; _key20 < _len20; _key20++) {
args[_key20 - 1] = arguments[_key20];
}
const valueRender = is('function', render) ? render('ul', classNames([classes['ul'], elementClassNames?.['ul']]), 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: function (match, a1, a2, a3, a4) {
for (var _len21 = arguments.length, args = new Array(_len21 > 5 ? _len21 - 5 : 0), _key21 = 5; _key21 < _len21; _key21++) {
args[_key21 - 5] = arguments[_key21];
}
const valueRender = is('function', render) ? render('img', classNames([classes['img'], elementClassNames?.['img']]), 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 = is('function', render) ? render('img', classNames([classes['img'], elementClassNames?.['img']]), 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 = is('function', render) ? render('a', classNames([classes['a'], elementClassNames?.['a']]), 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: function (match, a1) {
for (var _len22 = arguments.length, args = new Array(_len22 > 2 ? _len22 - 2 : 0), _key22 = 2; _key22 < _len22; _key22++) {
args[_key22 - 2] = arguments[_key22];
}
const valueRender = is('function', render) ? render('blockquote', classNames([classes['blockquote'], elementClassNames?.['blockquote']]), 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: function (match, a1) {
for (var _len23 = arguments.length, args = new Array(_len23 > 2 ? _len23 - 2 : 0), _key23 = 2; _key23 < _len23; _key23++) {
args[_key23 - 2] = arguments[_key23];
}
const valueRender = is('function', render) ? render('p', classNames([classes['p'], elementClassNames?.['p']]), 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: function (match, a1, a2, a3, a4) {
for (var _len24 = arguments.length, args = new Array(_len24 > 5 ? _len24 - 5 : 0), _key24 = 5; _key24 < _len24; _key24++) {
args[_key24 - 5] = arguments[_key24];
}
const valueRender = is('function', render) ? render('a', classNames([classes['a'], elementClassNames?.['a']]), 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 = is('function', render) ? render('a', classNames([classes['a'], elementClassNames?.['a']]), 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: function (match, a1) {
for (var _len25 = arguments.length, args = new Array(_len25 > 2 ? _len25 - 2 : 0), _key25 = 2; _key25 < _len25; _key25++) {
args[_key25 - 2] = arguments[_key25];
}
const valueRender = is('function', render) ? render('strong', classNames([classes['strong'], elementClassNames?.['strong']]), elementStyles?.['strong'], match, a1, ...args) : undefined;
if (valueRender !== undefined) return valueRender;
return `<strong${addClassName('strong')}${addStyle('strong')}>${a1}</strong>`;
}
}, {
value: /\*\*([^*]*)\*\*/g,
method: function (match, a1) {
for (var _len26 = arguments.length, args = new Array(_len26 > 2 ? _len26 - 2 : 0), _key26 = 2; _key26 < _len26; _key26++) {
args[_key26 - 2] = arguments[_key26];
}
const valueRender = is('function', render) ? render('strong', classNames([classes['strong'], elementClassNames?.['strong']]), 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: function (match, a1, a2, a3) {
for (var _len27 = arguments.length, args = new Array(_len27 > 4 ? _len27 - 4 : 0), _key27 = 4; _key27 < _len27; _key27++) {
args[_key27 - 4] = arguments[_key27];
}
const valueRender = is('function', render) ? render('italic', classNames([classes['italic'], elementClassNames?.['italic']]), 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: function (match, a1) {
for (var _len28 = arguments.length, args = new Array(_len28 > 2 ? _len28 - 2 : 0), _key28 = 2; _key28 < _len28; _key28++) {
args[_key28 - 2] = arguments[_key28];
}
const valueRender = is('function', render) ? render('italic', classNames([classes['italic'], elementClassNames?.['italic']]), elementStyles?.['italic'], match, a1, ...args) : undefined;
if (valueRender !== undefined) return valueRender;
return `<em${addClassName('em')}${addStyle('em')}>${a1}</em>`;
}
},
// del
{
value: /~~([^~]*)~~/g,
method: function (match, a1) {
for (var _len29 = arguments.length, args = new Array(_len29 > 2 ? _len29 - 2 : 0), _key29 = 2; _key29 < _len29; _key29++) {
args[_key29 - 2] = arguments[_key29];
}
const valueRender = is('function', render) ? render('del', classNames([classes['del'], elementClassNames?.['del']]), elementStyles?.['del'], match, a1, ...args) : undefined;
if (valueRender !== undefined) return valueRender;
return `<del${addClassName('del')}${addStyle('del')}>${a1}</del>`;
}
},
// line break
{
value: / \\/g,
method: function (match) {
for (var _len30 = arguments.length, args = new Array(_len30 > 1 ? _len30 - 1 : 0), _key30 = 1; _key30 < _len30; _key30++) {
args[_key30 - 1] = arguments[_key30];
}
const valueRender = is('function', render) ? render('br', classNames([classes['br'], elementClassNames?.['br']]), 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: function (match, a1) {
for (var _len31 = arguments.length, args = new Array(_len31 > 2 ? _len31 - 2 : 0), _key31 = 2; _key31 < _len31; _key31++) {
args[_key31 - 2] = arguments[_key31];
}
const valueRender = is('function', render) ? render('br', classNames([classes['br'], elementClassNames?.['br']]), 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: function (match, a1, a2, a3) {
for (var _len32 = arguments.length, args = new Array(_len32 > 4 ? _len32 - 4 : 0), _key32 = 4; _key32 < _len32; _key32++) {
args[_key32 - 4] = arguments[_key32];
}
const valueRender = is('function', render) ? render('code', classNames([classes['code'], elementClassNames?.['code']]), 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 = function (valueNew_) {
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
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 = function (valueListItem_) {
let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
const valueListItem = valueListItem_;
const valueRender = is('function', render) ? render('li', classNames([classes['li'], elementClassNames?.['li']]), elementStyles?.['li'], valueListItem_) : undefined;
if (valueRender !== undefined) return valueRender;
return method(valueListItem, {
level: level + 1
});
};
const list = function (valueList_, marker) {
let level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 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, function (match, a1, a2) {
const additionalClassNames = [a1, `language-${a1}`];
for (var _len33 = arguments.length, args = new Array(_len33 > 3 ? _len33 - 3 : 0), _key33 = 3; _key33 < _len33; _key33++) {
args[_key33 - 3] = arguments[_key33];
}
const valueRender = is('function', render) ? render('pre', classNames([classes['pre'], classNames([classes['pre'], elementClassNames?.['pre']]), ...additionalClassNames]), elementStyles?.['pre'], match, a1, a2, ...args) : undefined;
if (valueRender !== undefined) return valueRender;
return `<pre${addClassName('pre', ...additionalClassNames)}${addStyle('pre')}><code${addClassName('code')}${addStyle('code')}>${sanitize(a2)}</code></pre>`;
}));
codeBlocks.forEach((item, index) => valueNew = replace(valueNew, `onesy-${index}-var`, item));
}
}
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, onStart, onAdded, onUpdate]);
return /*#__PURE__*/React.createElement(Component, _extends({
ref: item => {
if (ref) {
if (is('function', ref)) ref(item);else ref.current = item;
}
refs.root.current = item;
},
className: classNames([staticClassName('Markdown', theme) && ['onesy-Markdown-root'], className, classes.root])
}, other));
});
Markdown.displayName = 'onesy-Markdown';
export default Markdown;