mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-20 10:15:17 -04:00
Add prettier for codestyle and re-format everything (#1294)
This commit is contained in:
Erik Michelson
GitHub
parent
8b78154075
commit
0aae1f70d2
319 changed files with 4809 additions and 3936 deletions
|
|
@ -8,31 +8,38 @@ import React, { Suspense, useCallback } from 'react'
|
|||
import { WaitSpinner } from '../../../common/wait-spinner/wait-spinner'
|
||||
|
||||
export interface CheatsheetLineProps {
|
||||
code: string,
|
||||
code: string
|
||||
onTaskCheckedChange: (newValue: boolean) => void
|
||||
}
|
||||
|
||||
const HighlightedCode = React.lazy(() => import('../../../markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code'))
|
||||
const HighlightedCode = React.lazy(
|
||||
() => import('../../../markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code')
|
||||
)
|
||||
const BasicMarkdownRenderer = React.lazy(() => import('../../../markdown-renderer/basic-markdown-renderer'))
|
||||
|
||||
export const CheatsheetLine: React.FC<CheatsheetLineProps> = ({ code, onTaskCheckedChange }) => {
|
||||
const checkboxClick = useCallback((lineInMarkdown: number, newValue: boolean) => {
|
||||
onTaskCheckedChange(newValue)
|
||||
}, [onTaskCheckedChange])
|
||||
const checkboxClick = useCallback(
|
||||
(lineInMarkdown: number, newValue: boolean) => {
|
||||
onTaskCheckedChange(newValue)
|
||||
},
|
||||
[onTaskCheckedChange]
|
||||
)
|
||||
|
||||
return (
|
||||
<Suspense fallback={ <tr>
|
||||
<td colSpan={ 2 }><WaitSpinner/></td>
|
||||
</tr> }>
|
||||
<Suspense
|
||||
fallback={
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<WaitSpinner />
|
||||
</td>
|
||||
</tr>
|
||||
}>
|
||||
<tr>
|
||||
<td>
|
||||
<BasicMarkdownRenderer
|
||||
content={ code }
|
||||
baseUrl={ 'https://example.org' }
|
||||
onTaskCheckedChange={ checkboxClick }/>
|
||||
<BasicMarkdownRenderer content={code} baseUrl={'https://example.org'} onTaskCheckedChange={checkboxClick} />
|
||||
</td>
|
||||
<td className={ 'markdown-body' }>
|
||||
<HighlightedCode code={ code } wrapLines={ true } startLineNumber={ 1 } language={ 'markdown' }/>
|
||||
<td className={'markdown-body'}>
|
||||
<HighlightedCode code={code} wrapLines={true} startLineNumber={1} language={'markdown'} />
|
||||
</td>
|
||||
</tr>
|
||||
</Suspense>
|
||||
|
|
|
|||
|
|
@ -13,40 +13,46 @@ import { CheatsheetLine } from './cheatsheet-line'
|
|||
export const Cheatsheet: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const [checked, setChecked] = useState<boolean>(false)
|
||||
const codes = useMemo(() => [
|
||||
`**${ t('editor.editorToolbar.bold') }**`,
|
||||
`*${ t('editor.editorToolbar.italic') }*`,
|
||||
`++${ t('editor.editorToolbar.underline') }++`,
|
||||
`~~${ t('editor.editorToolbar.strikethrough') }~~`,
|
||||
'H~2~O',
|
||||
'19^th^',
|
||||
`==${ t('editor.help.cheatsheet.highlightedText') }==`,
|
||||
`# ${ t('editor.editorToolbar.header') }`,
|
||||
`\`${ t('editor.editorToolbar.code') }\``,
|
||||
'```javascript=\nvar x = 5;\n```',
|
||||
`> ${ t('editor.editorToolbar.blockquote') }`,
|
||||
`- ${ t('editor.editorToolbar.unorderedList') }`,
|
||||
`1. ${ t('editor.editorToolbar.orderedList') }`,
|
||||
`- [${ checked ? 'x' : ' ' }] ${ t('editor.editorToolbar.checkList') }`,
|
||||
`[${ t('editor.editorToolbar.link') }](https://example.com)`,
|
||||
``,
|
||||
':smile:',
|
||||
`:::info\n${ t('editor.help.cheatsheet.exampleAlert') }\n:::`
|
||||
], [checked, t])
|
||||
const codes = useMemo(
|
||||
() => [
|
||||
`**${t('editor.editorToolbar.bold')}**`,
|
||||
`*${t('editor.editorToolbar.italic')}*`,
|
||||
`++${t('editor.editorToolbar.underline')}++`,
|
||||
`~~${t('editor.editorToolbar.strikethrough')}~~`,
|
||||
'H~2~O',
|
||||
'19^th^',
|
||||
`==${t('editor.help.cheatsheet.highlightedText')}==`,
|
||||
`# ${t('editor.editorToolbar.header')}`,
|
||||
`\`${t('editor.editorToolbar.code')}\``,
|
||||
'```javascript=\nvar x = 5;\n```',
|
||||
`> ${t('editor.editorToolbar.blockquote')}`,
|
||||
`- ${t('editor.editorToolbar.unorderedList')}`,
|
||||
`1. ${t('editor.editorToolbar.orderedList')}`,
|
||||
`- [${checked ? 'x' : ' '}] ${t('editor.editorToolbar.checkList')}`,
|
||||
`[${t('editor.editorToolbar.link')}](https://example.com)`,
|
||||
``,
|
||||
':smile:',
|
||||
`:::info\n${t('editor.help.cheatsheet.exampleAlert')}\n:::`
|
||||
],
|
||||
[checked, t]
|
||||
)
|
||||
|
||||
return (
|
||||
<Table className="table-condensed table-cheatsheet">
|
||||
<Table className='table-condensed table-cheatsheet'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><Trans i18nKey='editor.help.cheatsheet.example'/></th>
|
||||
<th><Trans i18nKey='editor.help.cheatsheet.syntax'/></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<Trans i18nKey='editor.help.cheatsheet.example' />
|
||||
</th>
|
||||
<th>
|
||||
<Trans i18nKey='editor.help.cheatsheet.syntax' />
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
codes.map((code) =>
|
||||
<CheatsheetLine code={ code } key={ code } onTaskCheckedChange={ setChecked }/>)
|
||||
}
|
||||
{codes.map((code) => (
|
||||
<CheatsheetLine code={code} key={code} onTaskCheckedChange={setChecked} />
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -17,11 +17,15 @@ export const HelpButton: React.FC = () => {
|
|||
|
||||
return (
|
||||
<Fragment>
|
||||
<Button title={ t('editor.documentBar.help') } className='ml-2 text-secondary' size='sm' variant='outline-light'
|
||||
onClick={ () => setShow(true) }>
|
||||
<ForkAwesomeIcon icon="question-circle"/>
|
||||
<Button
|
||||
title={t('editor.documentBar.help')}
|
||||
className='ml-2 text-secondary'
|
||||
size='sm'
|
||||
variant='outline-light'
|
||||
onClick={() => setShow(true)}>
|
||||
<ForkAwesomeIcon icon='question-circle' />
|
||||
</Button>
|
||||
<HelpModal show={ show } onHide={ onHide }/>
|
||||
<HelpModal show={show} onHide={onHide} />
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export enum HelpTabStatus {
|
|||
}
|
||||
|
||||
export interface HelpModalProps {
|
||||
show: boolean,
|
||||
show: boolean
|
||||
onHide: () => void
|
||||
}
|
||||
|
||||
|
|
@ -30,40 +30,41 @@ export const HelpModal: React.FC<HelpModalProps> = ({ show, onHide }) => {
|
|||
const tabContent = useMemo(() => {
|
||||
switch (tab) {
|
||||
case HelpTabStatus.Cheatsheet:
|
||||
return (<Cheatsheet/>)
|
||||
return <Cheatsheet />
|
||||
case HelpTabStatus.Shortcuts:
|
||||
return (<Shortcut/>)
|
||||
return <Shortcut />
|
||||
case HelpTabStatus.Links:
|
||||
return (<Links/>)
|
||||
return <Links />
|
||||
}
|
||||
}, [tab])
|
||||
|
||||
const tabTitle = useMemo(() => t('editor.documentBar.help') + ' - ' + t(`editor.help.${ tab }`), [t, tab])
|
||||
const tabTitle = useMemo(() => t('editor.documentBar.help') + ' - ' + t(`editor.help.${tab}`), [t, tab])
|
||||
|
||||
return (
|
||||
<CommonModal icon={ 'question-circle' } show={ show } onHide={ onHide } title={ tabTitle }>
|
||||
<CommonModal icon={'question-circle'} show={show} onHide={onHide} title={tabTitle}>
|
||||
<Modal.Body>
|
||||
<nav className='nav nav-tabs'>
|
||||
<Button
|
||||
variant={ 'light' }
|
||||
className={ `nav-link nav-item ${ tab === HelpTabStatus.Cheatsheet ? 'active' : '' }` }
|
||||
onClick={ () => setTab(HelpTabStatus.Cheatsheet) }>
|
||||
<Trans i18nKey={ 'editor.help.cheatsheet.title' }/>
|
||||
variant={'light'}
|
||||
className={`nav-link nav-item ${tab === HelpTabStatus.Cheatsheet ? 'active' : ''}`}
|
||||
onClick={() => setTab(HelpTabStatus.Cheatsheet)}>
|
||||
<Trans i18nKey={'editor.help.cheatsheet.title'} />
|
||||
</Button>
|
||||
<Button
|
||||
variant={ 'light' }
|
||||
className={ `nav-link nav-item ${ tab === HelpTabStatus.Shortcuts ? 'active' : '' }` }
|
||||
onClick={ () => setTab(HelpTabStatus.Shortcuts) }>
|
||||
<Trans i18nKey={ 'editor.help.shortcuts.title' }/>
|
||||
variant={'light'}
|
||||
className={`nav-link nav-item ${tab === HelpTabStatus.Shortcuts ? 'active' : ''}`}
|
||||
onClick={() => setTab(HelpTabStatus.Shortcuts)}>
|
||||
<Trans i18nKey={'editor.help.shortcuts.title'} />
|
||||
</Button>
|
||||
<Button
|
||||
variant={ 'light' }
|
||||
className={ `nav-link nav-item ${ tab === HelpTabStatus.Links ? 'active' : '' }` }
|
||||
onClick={ () => setTab(HelpTabStatus.Links) }>
|
||||
<Trans i18nKey={ 'editor.help.links.title' }/>
|
||||
variant={'light'}
|
||||
className={`nav-link nav-item ${tab === HelpTabStatus.Links ? 'active' : ''}`}
|
||||
onClick={() => setTab(HelpTabStatus.Links)}>
|
||||
<Trans i18nKey={'editor.help.links.title'} />
|
||||
</Button>
|
||||
</nav>
|
||||
{ tabContent }
|
||||
{tabContent}
|
||||
</Modal.Body>
|
||||
</CommonModal>)
|
||||
</CommonModal>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,15 +15,17 @@ export const Links: React.FC = () => {
|
|||
useTranslation()
|
||||
|
||||
return (
|
||||
<Row className={ 'justify-content-center pt-4' }>
|
||||
<Col lg={ 4 }>
|
||||
<h3><Trans i18nKey='editor.help.contacts.title'/></h3>
|
||||
<Row className={'justify-content-center pt-4'}>
|
||||
<Col lg={4}>
|
||||
<h3>
|
||||
<Trans i18nKey='editor.help.contacts.title' />
|
||||
</h3>
|
||||
<div>
|
||||
<ul className="list-unstyled">
|
||||
<ul className='list-unstyled'>
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.community'
|
||||
href={ links.community }
|
||||
href={links.community}
|
||||
icon='users'
|
||||
className='text-primary'
|
||||
/>
|
||||
|
|
@ -31,8 +33,8 @@ export const Links: React.FC = () => {
|
|||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.meetUsOn'
|
||||
i18nOption={ { service: 'Matrix' } }
|
||||
href={ links.chat }
|
||||
i18nOption={{ service: 'Matrix' }}
|
||||
href={links.chat}
|
||||
icon='hashtag'
|
||||
className='text-primary'
|
||||
/>
|
||||
|
|
@ -40,7 +42,7 @@ export const Links: React.FC = () => {
|
|||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.reportIssue'
|
||||
href={ links.backendIssues }
|
||||
href={links.backendIssues}
|
||||
icon='tag'
|
||||
className='text-primary'
|
||||
/>
|
||||
|
|
@ -48,7 +50,7 @@ export const Links: React.FC = () => {
|
|||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.helpTranslating'
|
||||
href={ links.translate }
|
||||
href={links.translate}
|
||||
icon='language'
|
||||
className='text-primary'
|
||||
/>
|
||||
|
|
@ -56,10 +58,12 @@ export const Links: React.FC = () => {
|
|||
</ul>
|
||||
</div>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<h3><Trans i18nKey='editor.help.documents.title'/></h3>
|
||||
<Col lg={4}>
|
||||
<h3>
|
||||
<Trans i18nKey='editor.help.documents.title' />
|
||||
</h3>
|
||||
<div>
|
||||
<ul className="list-unstyled">
|
||||
<ul className='list-unstyled'>
|
||||
<li>
|
||||
<TranslatedInternalLink
|
||||
i18nKey='editor.help.documents.features'
|
||||
|
|
|
|||
|
|
@ -29,31 +29,30 @@ export const Shortcut: React.FC = () => {
|
|||
}
|
||||
}
|
||||
return (
|
||||
<Row className={ 'justify-content-center pt-4' }>
|
||||
{ Object.keys(shortcutMap)
|
||||
.map(category => {
|
||||
<Row className={'justify-content-center pt-4'}>
|
||||
{Object.keys(shortcutMap).map((category) => {
|
||||
return (
|
||||
<Card key={category} className={'m-2 w-50'}>
|
||||
<Card.Header>{category}</Card.Header>
|
||||
<ListGroup variant='flush'>
|
||||
{Object.entries(shortcutMap[category]).map(([functionName, shortcuts]) => {
|
||||
return (
|
||||
<Card key={ category } className={ 'm-2 w-50' }>
|
||||
<Card.Header>{ category }</Card.Header>
|
||||
<ListGroup variant="flush">
|
||||
{ Object.entries(shortcutMap[category])
|
||||
.map(([functionName, shortcuts]) => {
|
||||
return (
|
||||
<ListGroup.Item key={ functionName } className={ 'd-flex justify-content-between' }>
|
||||
<span><Trans i18nKey={ functionName }/></span>
|
||||
<span>
|
||||
{
|
||||
shortcuts.map((shortcut, shortcutIndex) =>
|
||||
<Fragment key={ shortcutIndex }>{ shortcut }</Fragment>)
|
||||
}
|
||||
<ListGroup.Item key={functionName} className={'d-flex justify-content-between'}>
|
||||
<span>
|
||||
<Trans i18nKey={functionName} />
|
||||
</span>
|
||||
</ListGroup.Item>
|
||||
)
|
||||
}) }
|
||||
</ListGroup>
|
||||
</Card>)
|
||||
})
|
||||
}
|
||||
<span>
|
||||
{shortcuts.map((shortcut, shortcutIndex) => (
|
||||
<Fragment key={shortcutIndex}>{shortcut}</Fragment>
|
||||
))}
|
||||
</span>
|
||||
</ListGroup.Item>
|
||||
)
|
||||
})}
|
||||
</ListGroup>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue