mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-20 10:15:17 -04:00
Adjust editor config (#976)
* Adjust editor config Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Co-authored-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Tilman Vatteroth
GitHub
parent
0180c75e55
commit
e12dc523f8
301 changed files with 4393 additions and 3741 deletions
|
|
@ -15,24 +15,24 @@ import './cheatsheet.scss'
|
|||
export const Cheatsheet: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const codes = [
|
||||
`**${t('editor.editorToolbar.bold')}**`,
|
||||
`*${t('editor.editorToolbar.italic')}*`,
|
||||
`++${t('editor.editorToolbar.underline')}++`,
|
||||
`~~${t('editor.editorToolbar.strikethrough')}~~`,
|
||||
`**${ 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')}\``,
|
||||
`==${ 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')}`,
|
||||
`- [ ] ${t('editor.editorToolbar.checkList')}`,
|
||||
`[${t('editor.editorToolbar.link')}](https://example.com)`,
|
||||
``,
|
||||
`> ${ t('editor.editorToolbar.blockquote') }`,
|
||||
`- ${ t('editor.editorToolbar.unorderedList') }`,
|
||||
`1. ${ t('editor.editorToolbar.orderedList') }`,
|
||||
`- [ ] ${ t('editor.editorToolbar.checkList') }`,
|
||||
`[${ t('editor.editorToolbar.link') }](https://example.com)`,
|
||||
``,
|
||||
':smile:',
|
||||
`:::info\n${t('editor.help.cheatsheet.exampleAlert')}\n:::`
|
||||
`:::info\n${ t('editor.help.cheatsheet.exampleAlert') }\n:::`
|
||||
]
|
||||
|
||||
const markdownIt = useMemo(() => {
|
||||
|
|
@ -43,26 +43,26 @@ export const Cheatsheet: React.FC = () => {
|
|||
return (
|
||||
<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, key) => {
|
||||
return (
|
||||
<tr key={key}>
|
||||
<td>
|
||||
<BasicMarkdownRenderer
|
||||
content={code}
|
||||
markdownIt={markdownIt}/>
|
||||
</td>
|
||||
<td className={'markdown-body'}>
|
||||
<HighlightedCode code={code} wrapLines={true} startLineNumber={1} language={'markdown'}/>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
{ codes.map((code, key) => {
|
||||
return (
|
||||
<tr key={ key }>
|
||||
<td>
|
||||
<BasicMarkdownRenderer
|
||||
content={ code }
|
||||
markdownIt={ markdownIt }/>
|
||||
</td>
|
||||
<td className={ 'markdown-body' }>
|
||||
<HighlightedCode code={ code } wrapLines={ true } startLineNumber={ 1 } language={ 'markdown' }/>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}) }
|
||||
</tbody>
|
||||
</Table>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ import { Links } from './links'
|
|||
import { Shortcut } from './shortcuts'
|
||||
|
||||
export enum HelpTabStatus {
|
||||
Cheatsheet='cheatsheet.title',
|
||||
Shortcuts='shortcuts.title',
|
||||
Links='links.title'
|
||||
Cheatsheet = 'cheatsheet.title',
|
||||
Shortcuts = 'shortcuts.title',
|
||||
Links = 'links.title'
|
||||
}
|
||||
|
||||
export const HelpButton: React.FC = () => {
|
||||
|
|
@ -36,35 +36,39 @@ 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)}>
|
||||
<Button title={ t('editor.documentBar.help') } className='ml-2 text-secondary' size='sm' variant='outline-light'
|
||||
onClick={ () => setShow(true) }>
|
||||
<ForkAwesomeIcon icon="question-circle"/>
|
||||
</Button>
|
||||
<Modal show={show} onHide={() => setShow(false)} animation={true} className='text-dark' size='lg'>
|
||||
<Modal show={ show } onHide={ () => setShow(false) } animation={ true } className='text-dark' size='lg'>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>
|
||||
<ForkAwesomeIcon icon='question-circle'/> <Trans i18nKey={'editor.documentBar.help'}/> – <Trans i18nKey={`editor.help.${tab}`}/>
|
||||
<ForkAwesomeIcon icon='question-circle'/> <Trans i18nKey={ 'editor.documentBar.help' }/> – <Trans
|
||||
i18nKey={ `editor.help.${ tab }` }/>
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<nav className='nav nav-tabs'>
|
||||
<Button variant={'light'} className={`nav-link nav-item ${tab === HelpTabStatus.Cheatsheet ? 'active' : ''}`}
|
||||
onClick={() => setTab(HelpTabStatus.Cheatsheet)}
|
||||
<Button variant={ 'light' }
|
||||
className={ `nav-link nav-item ${ tab === HelpTabStatus.Cheatsheet ? 'active' : '' }` }
|
||||
onClick={ () => setTab(HelpTabStatus.Cheatsheet) }
|
||||
>
|
||||
<Trans i18nKey={'editor.help.cheatsheet.title'}/>
|
||||
<Trans i18nKey={ 'editor.help.cheatsheet.title' }/>
|
||||
</Button>
|
||||
<Button variant={'light'} className={`nav-link nav-item ${tab === HelpTabStatus.Shortcuts ? 'active' : ''}`}
|
||||
onClick={() => setTab(HelpTabStatus.Shortcuts)}
|
||||
<Button variant={ 'light' }
|
||||
className={ `nav-link nav-item ${ tab === HelpTabStatus.Shortcuts ? 'active' : '' }` }
|
||||
onClick={ () => setTab(HelpTabStatus.Shortcuts) }
|
||||
>
|
||||
<Trans i18nKey={'editor.help.shortcuts.title'}/>
|
||||
<Trans i18nKey={ 'editor.help.shortcuts.title' }/>
|
||||
</Button>
|
||||
<Button variant={'light'} className={`nav-link nav-item ${tab === HelpTabStatus.Links ? 'active' : ''}`}
|
||||
onClick={() => setTab(HelpTabStatus.Links)}
|
||||
<Button variant={ 'light' }
|
||||
className={ `nav-link nav-item ${ tab === HelpTabStatus.Links ? 'active' : '' }` }
|
||||
onClick={ () => setTab(HelpTabStatus.Links) }
|
||||
>
|
||||
<Trans i18nKey={'editor.help.links.title'}/>
|
||||
<Trans i18nKey={ 'editor.help.links.title' }/>
|
||||
</Button>
|
||||
</nav>
|
||||
{tabContent()}
|
||||
{ tabContent() }
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
</Fragment>
|
||||
|
|
|
|||
|
|
@ -18,15 +18,15 @@ export const Links: React.FC = () => {
|
|||
|
||||
const backendIssueTracker = useSelector((state: ApplicationState) => state.config.version.issueTrackerUrl)
|
||||
return (
|
||||
<Row className={'justify-content-center pt-4'}>
|
||||
<Col lg={4}>
|
||||
<Row className={ 'justify-content-center pt-4' }>
|
||||
<Col lg={ 4 }>
|
||||
<h3><Trans i18nKey='editor.help.contacts.title'/></h3>
|
||||
<div>
|
||||
<ul className="list-unstyled">
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.community'
|
||||
href={links.community}
|
||||
href={ links.community }
|
||||
icon='users'
|
||||
className='text-primary'
|
||||
/>
|
||||
|
|
@ -34,8 +34,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'
|
||||
/>
|
||||
|
|
@ -43,7 +43,7 @@ export const Links: React.FC = () => {
|
|||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.reportIssue'
|
||||
href={backendIssueTracker}
|
||||
href={ backendIssueTracker }
|
||||
icon='tag'
|
||||
className='text-primary'
|
||||
/>
|
||||
|
|
@ -51,7 +51,7 @@ export const Links: React.FC = () => {
|
|||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.helpTranslating'
|
||||
href={links.translate}
|
||||
href={ links.translate }
|
||||
icon='language'
|
||||
className='text-primary'
|
||||
/>
|
||||
|
|
@ -59,7 +59,7 @@ export const Links: React.FC = () => {
|
|||
</ul>
|
||||
</div>
|
||||
</Col>
|
||||
<Col lg={4}>
|
||||
<Col lg={ 4 }>
|
||||
<h3><Trans i18nKey='editor.help.documents.title'/></h3>
|
||||
<div>
|
||||
<ul className="list-unstyled">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export const Shortcut: React.FC = () => {
|
|||
const modifierKey = isMac ? <kbd>⌘</kbd> : <kbd>Ctrl</kbd>
|
||||
const altKey = isMac ? <kbd>⌥</kbd> : <kbd>Alt</kbd>
|
||||
|
||||
const shortcutMap: {[category: string]: { [functionName: string]: JSX.Element[] }} = {
|
||||
const shortcutMap: { [category: string]: { [functionName: string]: JSX.Element[] } } = {
|
||||
'View Mode': {
|
||||
'editor.help.shortcuts.view': [<kbd>Ctrl</kbd>, <> + </>, altKey, <> + </>, <kbd>V</kbd>],
|
||||
'editor.help.shortcuts.both': [<kbd>Ctrl</kbd>, <> + </>, altKey, <> + </>, <kbd>B</kbd>],
|
||||
|
|
@ -29,28 +29,30 @@ export const Shortcut: React.FC = () => {
|
|||
}
|
||||
}
|
||||
return (
|
||||
<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]) => {
|
||||
<Row className={ 'justify-content-center pt-4' }>
|
||||
{ Object.keys(shortcutMap)
|
||||
.map(category => {
|
||||
return (
|
||||
<ListGroup.Item key={functionName} className={'d-flex justify-content-between'}>
|
||||
<span><Trans i18nKey={functionName}/></span>
|
||||
<span>
|
||||
<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>)
|
||||
<Fragment key={ shortcutIndex }>{ shortcut }</Fragment>)
|
||||
}
|
||||
</span>
|
||||
</ListGroup.Item>
|
||||
)
|
||||
})}
|
||||
</ListGroup>
|
||||
</Card>)
|
||||
})
|
||||
</ListGroup.Item>
|
||||
)
|
||||
}) }
|
||||
</ListGroup>
|
||||
</Card>)
|
||||
})
|
||||
}
|
||||
</Row>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue