@amaui/ui-react
Version:
UI for React
731 lines (729 loc) • 47.2 kB
JavaScript
;
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("@amaui/utils");
const style_react_1 = require("@amaui/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: 'amaui-Markdown' });
const escapeRegExp = (value) => value.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
const Markdown = react_1.default.forwardRef((props_, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
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.amauiMarkdown) === 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, `amaui-${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, `amaui-${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) && [
'amaui-Markdown-root'
],
className,
classes.root
]) }, other)));
});
Markdown.displayName = 'amaui-Markdown';
exports.default = Markdown;