aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Markdown
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/Markdown')
-rw-r--r--src/lib/Markdown/CodeBlock.tsx6
-rw-r--r--src/lib/Markdown/Content.tsx39
-rw-r--r--src/lib/Markdown/Markdown.tsx13
-rw-r--r--src/lib/Markdown/Section.tsx28
-rw-r--r--src/lib/Markdown/SyntacticSpan.tsx21
-rw-r--r--src/lib/Markdown/Text.tsx2
6 files changed, 59 insertions, 50 deletions
diff --git a/src/lib/Markdown/CodeBlock.tsx b/src/lib/Markdown/CodeBlock.tsx
index 5b8edec..394458e 100644
--- a/src/lib/Markdown/CodeBlock.tsx
+++ b/src/lib/Markdown/CodeBlock.tsx
@@ -1,8 +1,8 @@
import React from 'react';
-import { ParserPropTypes } from './types';
import { Paper } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
+import { ParserPropTypes } from './types';
const useStyles = makeStyles(theme => ({
root: {
@@ -10,7 +10,7 @@ const useStyles = makeStyles(theme => ({
padding: theme.spacing(1),
overflowX: 'auto',
fontFamily: 'Monospace',
- scrollbarColor: 'auto'
+ scrollbarColor: 'auto',
},
}));
@@ -21,7 +21,7 @@ const CodeBlock: React.FC<ParserPropTypes> = ({ rawLines }) => {
{rawLines.map(line => <pre>{line}</pre>)}
</Paper>
);
-}
+};
export default CodeBlock;
diff --git a/src/lib/Markdown/Content.tsx b/src/lib/Markdown/Content.tsx
index 5816214..88409fa 100644
--- a/src/lib/Markdown/Content.tsx
+++ b/src/lib/Markdown/Content.tsx
@@ -6,31 +6,32 @@ import { ParserPropTypes } from './types';
const denotesCodeBlock = (line: string): boolean => {
- return line.match(/^\s*```.*$/) !== null; }
+ return line.match(/^\s*```.*$/) !== null;
+};
const denotesDottedList = (line: string): boolean => {
return line.match(/^ ?[-*] .*$/) !== null;
-}
+};
-const denotesOpenHtml= (line: string): string => {
+const denotesOpenHtml = (line: string): string => {
const regex = /<([^/\s]*)[^<]*[^/]>/g;
const match = regex.exec(line);
return match ? match[1] : '';
-}
+};
-const denotesClosingHtml= (line: string, tag: string): boolean => {
+const denotesClosingHtml = (line: string, tag: string): boolean => {
const regex = new RegExp(`</${tag}[^<]*>`);
return line.match(regex) !== null;
-}
+};
const denotesSelfClosingHtml = (line: string): string[] | null => {
const regex = /(<[^/\s]*[^<]*\/>)/g;
return line.match(regex);
-}
+};
const declaresNoLineBreak = (line: string): boolean => {
return line.match(/\\\|$/) !== null;
-}
+};
const Content: React.FC<ParserPropTypes> = ({ rawLines }) => {
if (!rawLines.length) return null;
@@ -39,40 +40,42 @@ const Content: React.FC<ParserPropTypes> = ({ rawLines }) => {
let buffer;
if (denotesCodeBlock(line)) {
- const closeIndex = rawLines.findIndex(line => denotesCodeBlock(line));
+ const closeIndex = rawLines.findIndex(rawLine => denotesCodeBlock(rawLine));
const codeBlockLines = rawLines.splice(0, closeIndex + 1).slice(0, closeIndex);
- buffer = <CodeBlock rawLines={codeBlockLines} />
+ buffer = <CodeBlock rawLines={codeBlockLines} />;
} else if (denotesDottedList(line)) {
- const closeIndex = rawLines.findIndex(line => !denotesDottedList(line));
+ const closeIndex = rawLines.findIndex(rawLine => !denotesDottedList(rawLine));
const dottedListLines = rawLines.splice(0, closeIndex).slice(0, closeIndex);
dottedListLines.unshift(line);
buffer = <ul>{dottedListLines.map(li => <li><Text line={li.slice(2)} /></li>)}</ul>;
} else if ((buffer = denotesOpenHtml(line))) {
const tag = buffer;
- const closeIndex = denotesClosingHtml(line, tag) ? -1 : rawLines.findIndex(line => denotesClosingHtml(line, tag));
+ const closeIndex = denotesClosingHtml(line, tag) ? -1 : rawLines.findIndex(
+ rawLine => denotesClosingHtml(rawLine, tag),
+ );
const htmlLines = rawLines.splice(0, closeIndex + 1);
htmlLines.unshift(line);
- buffer = <div dangerouslySetInnerHTML={{ __html: htmlLines.join('\n') }}></div>;
+ buffer = <div dangerouslySetInnerHTML={{ __html: htmlLines.join('\n') }} />;
} else if ((buffer = denotesSelfClosingHtml(line)) !== null) {
const match = buffer[0];
const [before, after] = line.split(match);
buffer = (
<>
<Text line={before} />
- <div dangerouslySetInnerHTML={{ __html: match }}></div>
+ <div dangerouslySetInnerHTML={{ __html: match }} />
<Text line={after} />
</>
);
} else if (declaresNoLineBreak(line)) {
- const closeIndex = rawLines.findIndex(line => !declaresNoLineBreak(line));
- const lineBreakLines = rawLines.splice(0, closeIndex).map(line => line.slice(0, -2));
+ const closeIndex = rawLines.findIndex(rawLine => !declaresNoLineBreak(rawLine));
+ const lineBreakLines = rawLines.splice(0, closeIndex).map(rawLine => rawLine.slice(0, -2));
lineBreakLines.unshift(line.slice(0, -2));
lineBreakLines.push(rawLines.splice(0, 1)[0]);
buffer = <p>{lineBreakLines.map(lineBreakLine => <Text line={lineBreakLine} />)}</p>;
} else if (denotesClosingHtml(line, '')) {
buffer = null;
} else {
- buffer = <p><Text line={line} /></p>
+ buffer = <p><Text line={line} /></p>;
}
return (
@@ -81,7 +84,7 @@ const Content: React.FC<ParserPropTypes> = ({ rawLines }) => {
<Content rawLines={rawLines} />
</>
);
-}
+};
export default Content;
diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx
index 82e889c..cfcf117 100644
--- a/src/lib/Markdown/Markdown.tsx
+++ b/src/lib/Markdown/Markdown.tsx
@@ -8,10 +8,13 @@ interface PropTypes {
url?: string;
}
-const resolveUrls = (line: string, baseUrl: string): string => {
- return line.replace(/src="(?!http)(.*)"[\s>]/, (match, url, offset, string) => `src="${baseUrl}/${url}?sanitize=true"`)
- .replace(/\[(.*\]?.*)\]\((?!http)(.+?)\)/, (match, text, url, offset, string) => `[${text}](${baseUrl}/${url})`);
-}
+const resolveUrls = (line: string, baseUrl: string): string => line.replace(
+ /src="(?!http)(.*)"[\s>]/,
+ (match, url) => `src="${baseUrl}/${url}?sanitize=true"`,
+).replace(
+ /\[(.*\]?.*)\]\((?!http)(.+?)\)/,
+ (match, text, url) => `[${text}](${baseUrl}/${url})`,
+);
const Markdown: React.FC<PropTypes> = ({ data, url }) => {
const [markdown, setMarkdown] = useState<string>(data || '');
@@ -24,7 +27,7 @@ const Markdown: React.FC<PropTypes> = ({ data, url }) => {
const baseUrl = url?.slice(0, url.lastIndexOf('/')) || '';
const lines = markdown.split(/\r?\n/).map(line => resolveUrls(line, baseUrl));
- return <Section rawLines={lines} />
+ return <Section rawLines={lines} />;
};
diff --git a/src/lib/Markdown/Section.tsx b/src/lib/Markdown/Section.tsx
index 1fcc46f..fc208b1 100644
--- a/src/lib/Markdown/Section.tsx
+++ b/src/lib/Markdown/Section.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import ContentSection from '../ContentSection/ContentSection';
import { Typography } from '@material-ui/core';
+import ContentSection from '../ContentSection/ContentSection';
import Content from './Content';
import { ParserPropTypes } from './types';
@@ -11,9 +11,9 @@ interface PropTypes extends ParserPropTypes {
const getHeaderLevel = (header: string): number => {
if (!header) return 0;
let level = 0;
- while(header[level] === '#') level++;
+ while (header[level] === '#') level += 1;
return level;
-}
+};
const ChildrenSections: React.FC<PropTypes> = ({ rawLines, level = 0 }) => {
const childrenSectionLines = rawLines.reduce((sections: string[][], line: string) => {
@@ -23,20 +23,22 @@ const ChildrenSections: React.FC<PropTypes> = ({ rawLines, level = 0 }) => {
}
return sections;
}, []);
- const children = childrenSectionLines.map(sectionLines => <Section rawLines={sectionLines} level={level}/>);
- return <> {children} </>;
-}
+ const children = childrenSectionLines.map(sectionLines => <Section rawLines={sectionLines} level={level} />);
+ return <>{children}</>;
+};
const Section: React.FC<PropTypes> = ({ rawLines, level = 0 }) => {
const deeperLevelIndex = rawLines.findIndex(line => line.match(`^#{${level + 1},} .*$`));
const rawContent = rawLines.splice(0, (deeperLevelIndex < 0) ? rawLines.length : deeperLevelIndex);
- if (!level) return (
- <>
- <Typography> <Content rawLines={rawContent} /> </Typography>
- <ChildrenSections rawLines={rawLines} level={getHeaderLevel(rawLines[0])}/>
- </>
- )
+ if (!level) {
+ return (
+ <>
+ <Typography><Content rawLines={rawContent} /></Typography>
+ <ChildrenSections rawLines={rawLines} level={getHeaderLevel(rawLines[0])} />
+ </>
+ );
+ }
const sectionName = rawContent.splice(0, 1)[0].slice(level).trim();
const deeperLevel = getHeaderLevel(rawLines[0]);
@@ -46,7 +48,7 @@ const Section: React.FC<PropTypes> = ({ rawLines, level = 0 }) => {
<ChildrenSections rawLines={rawLines} level={deeperLevel} />
</ContentSection>
);
-}
+};
export default Section;
diff --git a/src/lib/Markdown/SyntacticSpan.tsx b/src/lib/Markdown/SyntacticSpan.tsx
index f3c2125..11cc024 100644
--- a/src/lib/Markdown/SyntacticSpan.tsx
+++ b/src/lib/Markdown/SyntacticSpan.tsx
@@ -19,24 +19,25 @@ interface Emoji {
const enclosureRegex = (e: string): RegexPair => ({
local: new RegExp(`${e}([^${e}]+)${e}`),
- global: new RegExp(`(${e}[^${e}]+${e})`)
+ global: new RegExp(`(${e}[^${e}]+${e})`),
});
const regex: Record<string, RegexPair> = {
conceal: {
global: /(!?\[.+?\]\(.+?\))(?!])/g,
- local: /!?\[(.*\]?.*)\]\((.+?)\)/
+ local: /!?\[(.*\]?.*)\]\((.+?)\)/,
},
rawLink: {
+ // eslint-disable-next-line max-len
global: /((?:(?:[A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)(?:(?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[.!/\\\w]*))?)/,
- local: /&^/
+ local: /&^/,
},
emoji: enclosureRegex(':'),
bold: enclosureRegex('\\*\\*'),
italic: enclosureRegex('\\*'),
code: enclosureRegex('`'),
strikeThrough: enclosureRegex('~~'),
-}
+};
const splitter = new RegExp(Object.values(regex).map(pair => pair.global.source).join('|'));
@@ -46,13 +47,13 @@ Object.keys(emojiLib).forEach(name => emojiList.push({ name, char: emojiLib[name
const useStyles = makeStyles(theme => ({
code: {
background: theme.palette.background.default,
- borderRadius: theme.spacing(.5),
- padding: theme.spacing(.5),
+ borderRadius: theme.spacing(0.5),
+ padding: theme.spacing(0.5),
fontFamily: 'Monospace',
},
image: {
maxWidth: '100%',
- maxHeight: '100%'
+ maxHeight: '100%',
},
}));
@@ -68,7 +69,7 @@ const SyntacticSpan: React.FC<PropTypes> = ({ span }) => {
const matchEmoji = span.match(regex.emoji.local);
if (matchEmoji) {
- const emoji = emojiList.find(emoji => emoji.name === matchEmoji[1]);
+ const emoji = emojiList.find(e => e.name === matchEmoji[1]);
return <span>{emoji ? emoji.char : span}</span>;
}
@@ -82,12 +83,12 @@ const SyntacticSpan: React.FC<PropTypes> = ({ span }) => {
if (matchItalic) return <i>{matchItalic[1]}</i>;
const matchStrikeThrough = span.match(regex.strikeThrough.local);
- if (matchStrikeThrough) return <span style={{textDecoration: 'line-through' }}>{matchStrikeThrough[1]}</span>;
+ if (matchStrikeThrough) return <span style={{ textDecoration: 'line-through' }}>{matchStrikeThrough[1]}</span>;
if (span.match(regex.rawLink.global)) return <Link href={span}>{span}</Link>;
return <>{span}</>;
-}
+};
export { splitter };
diff --git a/src/lib/Markdown/Text.tsx b/src/lib/Markdown/Text.tsx
index e287dee..be715fd 100644
--- a/src/lib/Markdown/Text.tsx
+++ b/src/lib/Markdown/Text.tsx
@@ -7,7 +7,7 @@ interface PropTypes {
const Text: React.FC<PropTypes> = ({ line }) => {
return <>{line.split(splitter).map(span => <SyntacticSpan span={span} />)}</>;
-}
+};
export default Text;
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 05:02:54 +0000