From 5c259810433be8cdbe6fcac8776cdbf4a0c244b0 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 7 Apr 2020 15:31:00 +0300 Subject: fix: account for \r line endings, remove consoles --- src/lib/Markdown/Content.tsx | 6 ++---- src/lib/Markdown/Markdown.tsx | 2 +- src/lib/Markdown/SyntacticSpan.tsx | 1 - 3 files changed, 3 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/lib/Markdown/Content.tsx b/src/lib/Markdown/Content.tsx index aaea100..30f2a8a 100644 --- a/src/lib/Markdown/Content.tsx +++ b/src/lib/Markdown/Content.tsx @@ -6,11 +6,10 @@ import { ParserPropTypes } from './types'; const denotesCodeBlock = (line: string): boolean => { - return line.match(/^```.*$/) !== null; -} + return line.match(/^\s*```.*$/) !== null; } const denotesDottedList = (line: string): boolean => { - return line.match(/^ ?- .*$/) !== null; + return line.match(/^ ?[-*] .*$/) !== null; } const denotesOpenHtml= (line: string): string => { @@ -53,7 +52,6 @@ const Content: React.FC = ({ rawLines }) => { } else if ((buffer = denotesSelfClosingHtml(line)) !== null) { const match = buffer[0]; const [before, after] = line.split(match); - console.log({ line, match, before, after}); buffer = ( <> diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx index 09ad54a..0a71fd3 100644 --- a/src/lib/Markdown/Markdown.tsx +++ b/src/lib/Markdown/Markdown.tsx @@ -16,7 +16,7 @@ const Markdown: React.FC = ({ data, url }) => { }, [data, url]); if (url) axios.get(url).then(response => setMarkdown(response.data)); - return
+ return
}; diff --git a/src/lib/Markdown/SyntacticSpan.tsx b/src/lib/Markdown/SyntacticSpan.tsx index 299bf87..7fd9bc5 100644 --- a/src/lib/Markdown/SyntacticSpan.tsx +++ b/src/lib/Markdown/SyntacticSpan.tsx @@ -42,7 +42,6 @@ const splitter = new RegExp(Object.values(regex).map(pair => pair.global.source) const emojiList: Emoji[] = []; Object.keys(emojiLib).forEach(name => emojiList.push({ name, char: emojiLib[name].char })); -console.log({emojiList}) const useStyles = makeStyles(theme => ({ code: { -- cgit v1.2.3 From 992857f22936ccbd93c3cd31e9f507c23cbd3dc5 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 7 Apr 2020 15:34:10 +0300 Subject: feat: add custom md preview page --- src/index.tsx | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 65 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/index.tsx b/src/index.tsx index b64b207..60453eb 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,13 +1,14 @@ -import React, { useState } from 'react'; +import React, { useState, useRef } from 'react'; import ReactDOM from 'react-dom'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles, TextField, Button } from '@material-ui/core'; import { Benzin, Header, Window, Markdown, + ContentSection, } from './lib'; import icon from './assets/icon.svg'; @@ -21,6 +22,11 @@ interface RenderPropTypes { const useStyles = makeStyles(theme => ({ window: { padding: theme.spacing(4), + }, + promoButton: { + display: 'flex', + justifyContent: 'center', + marginTop: theme.spacing(4), } })); @@ -29,29 +35,63 @@ const Icon = logo const headerContents = { home: null, - space: null, 'spacevim': null, - 'emoji': null, 'material-ui': null, + 'custom': null, }; const pageMap: Record = { home: 'https://raw.githubusercontent.com/eug-vs/react-benzin/develop/README.md', - space: 'https://raw.githubusercontent.com/eug-vs/space/master/docs/environment.md', 'spacevim': 'https://raw.githubusercontent.com/spacevim/spacevim/master/README.md', - emoji: 'https://raw.githubusercontent.com/muan/emoji/gh-pages/README.md', 'material-ui': 'https://raw.githubusercontent.com/mui-org/material-ui/master/README.md', }; +const CustomPage: React.FC = () => { + const [url, setUrl] = useState(''); + const inputEl = useRef(null); + + const handleParseUrl = () => { + setUrl(inputEl.current?.value || ''); + } + + return ( + <> + +

+ This should be a link to a valid markdown file. Response should give the file contents. + If you copy README file from GitHub, make sure you provide link to raw view. +

+

+ +

+ + + + + ); +} + + const App: React.FC = () => { const classes = useStyles(); - const [page, setPage] = useState('home'); + const [page, setPage] = useState('home'); + + const handleGoCustom = () => { + setPage('custom'); + } const url = pageMap[page]; - const fileName = url.slice(url.lastIndexOf('/') + 1); + const fileName = url?.slice(url.lastIndexOf('/') + 1); const metadata = [ - `## Markdown\n [Markdown file](${url}) *(...${fileName})* that you can see on the left was parsed and processed by **BENZIN**! :rocket:`, + `## Markdown\n [Markdown file](${url}) *(...${fileName})* that you can see on the left was parsed and rendered by **BENZIN**! :rocket:`, 'Switch between tabs on the header to explore other markdown templates. :recycle: ', 'Currently **only core features** of markdown function.', 'Templates on the left are being loaded from the [GitHub](https://github.com), though this pane is generated from plaintext. :pen:', @@ -76,12 +116,27 @@ const App: React.FC = () => { />
- + { + (page === 'custom') ? + + : + + }
+

+ +

-- cgit v1.2.3 From dee4f642cdba418351e7abb178b3cb8dbae2eeac Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 7 Apr 2020 15:37:27 +0300 Subject: fix: add mising types --- src/index.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/index.tsx b/src/index.tsx index 60453eb..be76722 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -51,7 +51,7 @@ const CustomPage: React.FC = () => { const [url, setUrl] = useState(''); const inputEl = useRef(null); - const handleParseUrl = () => { + const handleParseUrl = (): void => { setUrl(inputEl.current?.value || ''); } @@ -65,9 +65,7 @@ const CustomPage: React.FC = () => {

-

+ { + (page === 'live preview') ? + + : + <> + +

+ +

+ + } -- cgit v1.2.3 From b808381b02097a25eb51b14246f7a239a785b347 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 9 Apr 2020 16:27:03 +0300 Subject: fix: remove unused var --- src/index.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/index.tsx b/src/index.tsx index e440746..a9a7012 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -86,7 +86,6 @@ interface LivePropTypes { } const LivePreviewPage: React.FC = ({ setLivePreviewData }) => { - const classes = useStyles(); const inputEl = useRef(null); const handleRender = (): void => { -- cgit v1.2.3 From 2c5fa193541eb8b74974731d01312f73951bca17 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 18 Apr 2020 20:26:32 +0300 Subject: style: correct some errors with eslint --fix --- src/index.tsx | 73 +++++++++++++++---------------- src/lib/Benzin/Benzin.tsx | 8 ++-- src/lib/ContentSection/ContentSection.tsx | 7 ++- src/lib/Header/Header.tsx | 48 ++++++++++---------- src/lib/Markdown/CodeBlock.tsx | 6 +-- src/lib/Markdown/Content.tsx | 27 ++++++------ src/lib/Markdown/Markdown.tsx | 6 +-- src/lib/Markdown/Section.tsx | 28 ++++++------ src/lib/Markdown/SyntacticSpan.tsx | 18 ++++---- src/lib/Markdown/Text.tsx | 2 +- src/lib/SmartList/SmartList.tsx | 3 +- src/lib/Window/Window.tsx | 5 ++- src/lib/Window/WindowSurface.tsx | 6 +-- src/react-app-env.d.ts | 2 +- 14 files changed, 121 insertions(+), 118 deletions(-) (limited to 'src') diff --git a/src/index.tsx b/src/index.tsx index a9a7012..ac7bfc2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -27,23 +27,23 @@ const useStyles = makeStyles(theme => ({ display: 'flex', justifyContent: 'center', marginTop: theme.spacing(4), - } + }, })); -const Icon = logo +const Icon = logo; const headerContents = { home: null, - 'spacevim': null, + spacevim: null, 'material-ui': null, - 'custom': null, + custom: null, 'live preview': null, }; const pageMap: Record = { home: 'https://raw.githubusercontent.com/eug-vs/react-benzin/develop/README.md', - 'spacevim': 'https://raw.githubusercontent.com/spacevim/spacevim/master/README.md', + spacevim: 'https://raw.githubusercontent.com/spacevim/spacevim/master/README.md', 'material-ui': 'https://raw.githubusercontent.com/mui-org/material-ui/master/README.md', }; @@ -54,11 +54,11 @@ const CustomPage: React.FC = () => { const handleParseUrl = (): void => { setUrl(inputEl.current?.value || ''); - } + }; return ( <> - +

This should be a link to a valid markdown file. Response should give the file contents. If you copy README file from GitHub, make sure you provide link to raw view. @@ -72,14 +72,14 @@ const CustomPage: React.FC = () => { label="Markdown url" />

- ); -} +}; interface LivePropTypes { setLivePreviewData: (livePreviewData: string) => void; @@ -90,11 +90,11 @@ const LivePreviewPage: React.FC = ({ setLivePreviewData }) => { const handleRender = (): void => { setLivePreviewData(inputEl.current?.value || ''); - } + }; return ( <> - +

Start typing and see your text rendered on the left window! We recommend starting with # Header.

@@ -111,8 +111,8 @@ const LivePreviewPage: React.FC = ({ setLivePreviewData }) => {

- ) -} + ); +}; const App: React.FC = () => { @@ -122,7 +122,7 @@ const App: React.FC = () => { const handleGoLivePreview = (): void => { setPage('live preview'); - } + }; const url = pageMap[page]; const fileName = url?.slice(url.lastIndexOf('/') + 1); @@ -153,35 +153,34 @@ const App: React.FC = () => {
{ - (page === 'custom') ? - - : - (page === 'live preview') ? - - : - + (page === 'custom') + ? + : (page === 'live preview') + ? + : }
{ - (page === 'live preview') ? - - : - <> - -

- -

- + (page === 'live preview') + ? + : ( + <> + +

+ +

+ + ) }
diff --git a/src/lib/Benzin/Benzin.tsx b/src/lib/Benzin/Benzin.tsx index 83ed0b0..bc436f7 100644 --- a/src/lib/Benzin/Benzin.tsx +++ b/src/lib/Benzin/Benzin.tsx @@ -8,9 +8,9 @@ import 'typeface-roboto'; declare module '@material-ui/core/styles/createPalette' { interface TypeBackground { - elevation1: string; - elevation2: string; - elevation3: string; + elevation1: string; + elevation2: string; + elevation3: string; } } @@ -34,7 +34,7 @@ const benzinTheme = createMuiTheme({ text: { primary: '#f4f4f4', secondary: 'rgba(255, 255, 255, 0.6)', - } + }, }, }); diff --git a/src/lib/ContentSection/ContentSection.tsx b/src/lib/ContentSection/ContentSection.tsx index ba8b882..6b27bba 100644 --- a/src/lib/ContentSection/ContentSection.tsx +++ b/src/lib/ContentSection/ContentSection.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { Typography, Divider, - makeStyles + makeStyles, } from '@material-ui/core'; @@ -30,18 +30,17 @@ const ContentSection: React.FC = ({ sectionName, children, level = 0 if (level > 6) level = 6; type Variant = 'h3' | 'h4' | 'h5' | 'h6'; - const variant: Variant = 'h' + level as Variant; + const variant: Variant = `h${level}` as Variant; return ( <> {sectionName} - + {children} ); - }; diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx index 233eacb..58be989 100644 --- a/src/lib/Header/Header.tsx +++ b/src/lib/Header/Header.tsx @@ -40,13 +40,15 @@ const useStyles = makeStyles(theme => ({ '& svg': { marginRight: theme.spacing(1), marginBottom: '0 !important', - } - } - } + }, + }, + }, })); -const Header: React.FC = ({ logo, contents, page, setPage }) => { +const Header: React.FC = ({ + logo, contents, page, setPage, +}) => { const classes = useStyles(); const handleChange = (event: React.ChangeEvent<{}>, newPage: string): void => { @@ -54,25 +56,25 @@ const Header: React.FC = ({ logo, contents, page, setPage }) => { }; return ( - - - {logo.icon} - - {logo.title} - - - {contents && Object.keys(contents).map((item: string) => ( - - ))} - - - + + + {logo.icon} + + {logo.title} + + + {contents && Object.keys(contents).map((item: string) => ( + + ))} + + + ); }; 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 = ({ rawLines }) => { {rawLines.map(line => 
{line}
)} ); -} +}; export default CodeBlock; diff --git a/src/lib/Markdown/Content.tsx b/src/lib/Markdown/Content.tsx index 5816214..d64720b 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(``); 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 = ({ rawLines }) => { if (!rawLines.length) return null; @@ -41,7 +42,7 @@ const Content: React.FC = ({ rawLines }) => { if (denotesCodeBlock(line)) { const closeIndex = rawLines.findIndex(line => denotesCodeBlock(line)); const codeBlockLines = rawLines.splice(0, closeIndex + 1).slice(0, closeIndex); - buffer = + buffer = ; } else if (denotesDottedList(line)) { const closeIndex = rawLines.findIndex(line => !denotesDottedList(line)); const dottedListLines = rawLines.splice(0, closeIndex).slice(0, closeIndex); @@ -52,14 +53,14 @@ const Content: React.FC = ({ rawLines }) => { const closeIndex = denotesClosingHtml(line, tag) ? -1 : rawLines.findIndex(line => denotesClosingHtml(line, tag)); const htmlLines = rawLines.splice(0, closeIndex + 1); htmlLines.unshift(line); - buffer =
; + buffer =
; } else if ((buffer = denotesSelfClosingHtml(line)) !== null) { const match = buffer[0]; const [before, after] = line.split(match); buffer = ( <> -
+
); @@ -72,7 +73,7 @@ const Content: React.FC = ({ rawLines }) => { } else if (denotesClosingHtml(line, '')) { buffer = null; } else { - buffer =

+ buffer =

; } return ( @@ -81,7 +82,7 @@ const Content: React.FC = ({ rawLines }) => { ); -} +}; export default Content; diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx index 82e889c..68967c5 100644 --- a/src/lib/Markdown/Markdown.tsx +++ b/src/lib/Markdown/Markdown.tsx @@ -10,8 +10,8 @@ interface PropTypes { 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})`); -} + .replace(/\[(.*\]?.*)\]\((?!http)(.+?)\)/, (match, text, url, offset, string) => `[${text}](${baseUrl}/${url})`); +}; const Markdown: React.FC = ({ data, url }) => { const [markdown, setMarkdown] = useState(data || ''); @@ -24,7 +24,7 @@ const Markdown: React.FC = ({ data, url }) => { const baseUrl = url?.slice(0, url.lastIndexOf('/')) || ''; const lines = markdown.split(/\r?\n/).map(line => resolveUrls(line, baseUrl)); - return
+ return
; }; diff --git a/src/lib/Markdown/Section.tsx b/src/lib/Markdown/Section.tsx index 1fcc46f..f554062 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++; return level; -} +}; const ChildrenSections: React.FC = ({ rawLines, level = 0 }) => { const childrenSectionLines = rawLines.reduce((sections: string[][], line: string) => { @@ -23,20 +23,22 @@ const ChildrenSections: React.FC = ({ rawLines, level = 0 }) => { } return sections; }, []); - const children = childrenSectionLines.map(sectionLines =>
); - return <> {children} ; -} + const children = childrenSectionLines.map(sectionLines =>
); + return <>{children}; +}; const Section: React.FC = ({ 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 ( - <> - - - - ) + if (!level) { + return ( + <> + + + + ); + } const sectionName = rawContent.splice(0, 1)[0].slice(level).trim(); const deeperLevel = getHeaderLevel(rawLines[0]); @@ -46,7 +48,7 @@ const Section: React.FC = ({ rawLines, level = 0 }) => { ); -} +}; export default Section; diff --git a/src/lib/Markdown/SyntacticSpan.tsx b/src/lib/Markdown/SyntacticSpan.tsx index f3c2125..bdce3f7 100644 --- a/src/lib/Markdown/SyntacticSpan.tsx +++ b/src/lib/Markdown/SyntacticSpan.tsx @@ -19,24 +19,24 @@ 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 = { conceal: { global: /(!?\[.+?\]\(.+?\))(?!])/g, - local: /!?\[(.*\]?.*)\]\((.+?)\)/ + local: /!?\[(.*\]?.*)\]\((.+?)\)/, }, rawLink: { 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 +46,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%', }, })); @@ -82,12 +82,12 @@ const SyntacticSpan: React.FC = ({ span }) => { if (matchItalic) return {matchItalic[1]}; const matchStrikeThrough = span.match(regex.strikeThrough.local); - if (matchStrikeThrough) return {matchStrikeThrough[1]}; + if (matchStrikeThrough) return {matchStrikeThrough[1]}; if (span.match(regex.rawLink.global)) return {span}; 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 = ({ line }) => { return <>{line.split(splitter).map(span => )}; -} +}; export default Text; diff --git a/src/lib/SmartList/SmartList.tsx b/src/lib/SmartList/SmartList.tsx index 22cd3b2..c86c127 100644 --- a/src/lib/SmartList/SmartList.tsx +++ b/src/lib/SmartList/SmartList.tsx @@ -21,8 +21,7 @@ interface Size { const SmartList: React.FC = ({ itemSize, itemCount, renderItem }) => { - - const ResizedList: React.FC = ({ width, height}) => ( + const ResizedList: React.FC = ({ width, height }) => ( = ({ type, name, children }) => { size={size} position={position} > - {name && + {name + && (
{name}
- } + )} {children} ); diff --git a/src/lib/Window/WindowSurface.tsx b/src/lib/Window/WindowSurface.tsx index a65e398..1900901 100644 --- a/src/lib/Window/WindowSurface.tsx +++ b/src/lib/Window/WindowSurface.tsx @@ -22,7 +22,7 @@ const useStyles = makeStyles(theme => ({ '& a.MuiTypography-root': { color: theme.palette.primary.light, }, - } + }, })); @@ -32,12 +32,12 @@ const WindowSurface: React.FC = ({ size, position, children }) => { return ( {children} - ) + ); }; diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 6431bc5..30da896 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -1 +1 @@ -/// +// / -- cgit v1.2.3 From 9272b0af3d7b2fba4738a341a1f2776243e0e515 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 18 Apr 2020 20:44:55 +0300 Subject: style: manually fix some errors --- src/lib/ContentSection/ContentSection.tsx | 6 +++--- src/lib/Markdown/Content.tsx | 12 +++++++----- src/lib/Markdown/Markdown.tsx | 11 +++++++---- 3 files changed, 17 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/lib/ContentSection/ContentSection.tsx b/src/lib/ContentSection/ContentSection.tsx index 6b27bba..28b1ad5 100644 --- a/src/lib/ContentSection/ContentSection.tsx +++ b/src/lib/ContentSection/ContentSection.tsx @@ -26,11 +26,11 @@ const useStyles = makeStyles(theme => ({ const ContentSection: React.FC = ({ sectionName, children, level = 0 }) => { const classes = useStyles(); - level += 2; // Make everything smaller - if (level > 6) level = 6; + let adjustedLevel = level + 2; // Make everything smaller + if (adjustedLevel > 6) adjustedLevel = 6; type Variant = 'h3' | 'h4' | 'h5' | 'h6'; - const variant: Variant = `h${level}` as Variant; + const variant: Variant = `h${adjustedLevel}` as Variant; return ( <> diff --git a/src/lib/Markdown/Content.tsx b/src/lib/Markdown/Content.tsx index d64720b..88409fa 100644 --- a/src/lib/Markdown/Content.tsx +++ b/src/lib/Markdown/Content.tsx @@ -40,17 +40,19 @@ const Content: React.FC = ({ 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 = ; } 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 =
    {dottedListLines.map(li =>
    • )}
; } 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 =
; @@ -65,8 +67,8 @@ const Content: React.FC = ({ rawLines }) => { ); } 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 =

{lineBreakLines.map(lineBreakLine => )}

; diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx index 68967c5..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 = ({ data, url }) => { const [markdown, setMarkdown] = useState(data || ''); -- cgit v1.2.3 From 8e4a483fb7d1ebdfc950c1cc456ae2d4bd558147 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 18 Apr 2020 20:52:31 +0300 Subject: style: fix remaining errors --- src/lib/Markdown/Section.tsx | 2 +- src/lib/Markdown/SyntacticSpan.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/lib/Markdown/Section.tsx b/src/lib/Markdown/Section.tsx index f554062..fc208b1 100644 --- a/src/lib/Markdown/Section.tsx +++ b/src/lib/Markdown/Section.tsx @@ -11,7 +11,7 @@ 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; }; diff --git a/src/lib/Markdown/SyntacticSpan.tsx b/src/lib/Markdown/SyntacticSpan.tsx index bdce3f7..11cc024 100644 --- a/src/lib/Markdown/SyntacticSpan.tsx +++ b/src/lib/Markdown/SyntacticSpan.tsx @@ -28,6 +28,7 @@ const regex: Record = { 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: /&^/, }, @@ -68,7 +69,7 @@ const SyntacticSpan: React.FC = ({ 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 {emoji ? emoji.char : span}; } -- cgit v1.2.3 From f4f8689631d247f0be93c2f32791c9ba02ecb64e Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 18 Apr 2020 21:01:34 +0300 Subject: style: fix index.tsx --- src/index.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/index.tsx b/src/index.tsx index ac7bfc2..c5e1989 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -96,7 +96,8 @@ const LivePreviewPage: React.FC = ({ setLivePreviewData }) => { <>

- Start typing and see your text rendered on the left window! We recommend starting with # Header. + Start typing and see your text rendered on the left window! + We recommend starting with # Header.

{ const url = pageMap[page]; const fileName = url?.slice(url.lastIndexOf('/') + 1); const info = [ + /* eslint-disable max-len */ `## Markdown\n [Markdown file](${url}) *(...${fileName})* that you can see on the left was parsed and rendered by **BENZIN**! :rocket:`, 'Switch between tabs on the header to explore other markdown templates. :recycle: ', 'Currently **only core features** of markdown function.', @@ -137,8 +139,15 @@ const App: React.FC = () => { 'const data = \'# Header\\nHello, *world!*\';', 'ReactDOM.render(, document.getElementById(\'root\'));', '```', + /* eslint-enable max-len */ ].join('\n'); + let primaryWindowContent = ; + if (page === 'custom') primaryWindowContent = ; + else if (page === 'live preview') { + primaryWindowContent = ; + } + return (

{ setPage={setPage} /> -
- { - (page === 'custom') - ? - : (page === 'live preview') - ? - : - } -
+
{primaryWindowContent}
-- cgit v1.2.3 From a31244374f5609e89d8ff22e4111ab04d94886a2 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 18 Apr 2020 21:11:52 +0300 Subject: fix: disable linting for env.d.ts --- src/react-app-env.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 30da896..c7466ce 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -1 +1,2 @@ -// / +// eslint-disable-next-line +/// -- cgit v1.2.3