mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-06-02 07:59:56 -04:00
Restructure help dialog (#484)
- restructured help dialog - moved isMac function to editor util - added notice to CHANGELOG.md Co-authored-by: Erik Michelson <github@erik.michelson.eu> Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
This commit is contained in:
Philip Molares
GitHub
parent
c95a7e0fba
commit
dfdc652503
15 changed files with 422 additions and 368 deletions
|
|
@ -13,7 +13,7 @@ import { SyncScrollButton } from './sync-scroll-button/sync-scroll-button'
|
|||
import { EditorPathParams } from '../editor'
|
||||
import { DarkModeButton } from './dark-mode-button'
|
||||
import { EditorViewMode } from './editor-view-mode'
|
||||
import { HelpButton } from './help-button'
|
||||
import { HelpButton } from './help-button/help-button'
|
||||
import { NavbarBranding } from './navbar-branding'
|
||||
|
||||
export const AppBar: React.FC = () => {
|
||||
|
|
|
|||
|
|
@ -1,291 +0,0 @@
|
|||
import React, { Fragment, useState } from 'react'
|
||||
import { Button, Card, Col, Modal, Row, Table } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
|
||||
import { TranslatedExternalLink } from '../../common/links/translated-external-link'
|
||||
|
||||
export const HelpButton: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const [show, setShow] = useState(false)
|
||||
|
||||
const handleShow = () => setShow(true)
|
||||
const handleClose = () => setShow(false)
|
||||
return (
|
||||
<Fragment>
|
||||
<Button title={t('editor.documentBar.help')} className="ml-2 text-secondary" size="sm" variant="outline-light"
|
||||
onClick={handleShow}>
|
||||
<ForkAwesomeIcon icon="question-circle"/>
|
||||
</Button>
|
||||
<Modal show={show} onHide={handleClose} animation={true} className="text-dark" size='lg'>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>
|
||||
<ForkAwesomeIcon icon="question-circle"/> <Trans i18nKey={'editor.documentBar.help'}/>
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body className="text-dark">
|
||||
<Row>
|
||||
<Col lg={4}>
|
||||
<Card>
|
||||
<Card.Header><Trans i18nKey='editor.help.contacts.title'/></Card.Header>
|
||||
<Card.Body>
|
||||
<Card.Text>
|
||||
<ul className="list-unstyled">
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.community'
|
||||
href='https://community.codimd.org/'
|
||||
icon='users'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.meetUsOn'
|
||||
i18nOption={{ service: 'Matrix' }}
|
||||
href='https://riot.im/app/#/room/#codimd:matrix.org'
|
||||
icon='hashtag'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.reportIssue'
|
||||
href='https://github.com/codimd/server/issues'
|
||||
icon='tag'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.helpTranslating'
|
||||
href='https://translate.codimd.org/'
|
||||
icon='language'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</Card.Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
<br/>
|
||||
<Card>
|
||||
<Card.Header><Trans i18nKey='editor.help.documents.title'/></Card.Header>
|
||||
<Card.Body>
|
||||
<Card.Text>
|
||||
<ul className="list-unstyled">
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.documents.features'
|
||||
href='/n/features'
|
||||
icon='dot-circle-o'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.documents.yamlMetadata'
|
||||
href='/n/yaml-data'
|
||||
icon='dot-circle-o'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.documents.slideExample'
|
||||
href='https://github.com/codimd/server/issues'
|
||||
icon='dot-circle-o'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</Card.Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={8}>
|
||||
<Card>
|
||||
<Card.Header><Trans i18nKey='editor.help.cheatsheet.title'/></Card.Header>
|
||||
<Card.Body>
|
||||
<Card.Text>
|
||||
<Table className="table-condensed table-cheatsheet">
|
||||
<thead>
|
||||
<tr>
|
||||
<td><Trans i18nKey='editor.help.cheatsheet.example'/></td>
|
||||
<td><Trans i18nKey='editor.help.cheatsheet.syntax'/></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="markdown-body"
|
||||
style={{ fontFamily: 'inherit', fontSize: '14px', padding: 0, maxWidth: 'inherit' }}>
|
||||
<tr>
|
||||
<td><Trans i18nKey='editor.editorToolbar.header'/></td>
|
||||
<td>
|
||||
<pre># <Trans i18nKey='editor.editorToolbar.header'/></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<ul>
|
||||
<li><Trans i18nKey='editor.editorToolbar.unorderedList'/></li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<pre>- <Trans i18nKey='editor.editorToolbar.unorderedList'/></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<ol>
|
||||
<li><Trans i18nKey='editor.editorToolbar.orderedList'/></li>
|
||||
</ol>
|
||||
</td>
|
||||
<td>
|
||||
<pre>1. <Trans i18nKey='editor.editorToolbar.orderedList'/></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<ul>
|
||||
<li className="task-list-item">
|
||||
<input type="checkbox" className="task-list-item-checkbox" disabled={false}/>
|
||||
<label><Trans i18nKey='editor.editorToolbar.checkList'/></label>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<pre>- [ ] <Trans i18nKey='editor.editorToolbar.checkList'/></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<blockquote><Trans i18nKey='editor.editorToolbar.blockquote'/></blockquote>
|
||||
</td>
|
||||
<td>
|
||||
<pre>{'>'} <Trans i18nKey='editor.editorToolbar.blockquote'/></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong><Trans i18nKey='editor.editorToolbar.bold'/></strong></td>
|
||||
<td>
|
||||
<pre>**<Trans i18nKey='editor.editorToolbar.bold'/>**</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i><Trans i18nKey='editor.editorToolbar.italic'/></i></td>
|
||||
<td>
|
||||
<pre>*<Trans i18nKey='editor.editorToolbar.italic'/>*</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><s><Trans i18nKey='editor.editorToolbar.strikethrough'/></s></td>
|
||||
<td>
|
||||
<pre>~~<Trans i18nKey='editor.editorToolbar.strikethrough'/>~~</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19<sup>th</sup></td>
|
||||
<td>
|
||||
<pre>19^th^</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H<sub>2</sub>O</td>
|
||||
<td>
|
||||
<pre>H~2~O</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<ins><Trans i18nKey='editor.help.cheatsheet.underlinedText'/></ins>
|
||||
</td>
|
||||
<td>
|
||||
<pre>++<Trans i18nKey='editor.help.cheatsheet.underlinedText'/>++</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<mark><Trans i18nKey='editor.help.cheatsheet.highlightedText'/></mark>
|
||||
</td>
|
||||
<td>
|
||||
<pre>==<Trans i18nKey='editor.help.cheatsheet.highlightedText'/>==</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href='https://example.com'><Trans i18nKey='editor.editorToolbar.link'/></a></td>
|
||||
<td>
|
||||
<pre>[link text](https://example.com)</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><Trans i18nKey='editor.editorToolbar.image'/></td>
|
||||
<td>
|
||||
<pre></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><Trans i18nKey='editor.editorToolbar.code'/></code></td>
|
||||
<td>
|
||||
<pre>`<Trans i18nKey='editor.editorToolbar.code'/>`</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<pre style={{ border: 'none !important' }}>
|
||||
<code className="javascript hljs">
|
||||
<div className="wrapper">
|
||||
<div className="gutter linenumber">
|
||||
<span data-linenumber="1"/>
|
||||
</div>
|
||||
<div className="code">
|
||||
<span className="hljs-keyword">var</span> x = <span className="hljs-number">5</span>;
|
||||
</div>
|
||||
</div>
|
||||
</code>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>```javascript<br/>var x = 5;<br/>```</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img alt=":smile:" className="emoji" src="./build/emojify.js/dist/images/basic/smile.png"
|
||||
title=":smile:"/></td>
|
||||
<td>
|
||||
<pre>:smile:</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Extern</td>
|
||||
<td>
|
||||
<pre>{'{'}%youtube youtube_id %{'}'}</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>L<sup>a</sup>T<sub>e</sub>X</td>
|
||||
<td>
|
||||
<pre>$L^aT_eX$</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="alert alert-info">
|
||||
<p>
|
||||
<Trans i18nKey='editor.help.cheatsheet.exampleAlert'/>
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<pre>:::info<br/><Trans i18nKey='editor.help.cheatsheet.exampleAlert'/><br/>:::</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</Card.Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.table-cheatsheet > tr > td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
61
src/components/editor/app-bar/help-button/cheatsheet.tsx
Normal file
61
src/components/editor/app-bar/help-button/cheatsheet.tsx
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
import React from 'react'
|
||||
import { Table } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { MarkdownRenderer } from '../../../markdown-renderer/markdown-renderer'
|
||||
import { HighlightedCode } from '../../../markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code'
|
||||
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')}~~`,
|
||||
'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')}`,
|
||||
`- [ ] ${t('editor.editorToolbar.checkList')}`,
|
||||
`[${t('editor.editorToolbar.link')}](https://example.com)`,
|
||||
``,
|
||||
':smile:',
|
||||
`:::info\n${t('editor.help.cheatsheet.exampleAlert')}\n:::`
|
||||
]
|
||||
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>
|
||||
</thead>
|
||||
<tbody>
|
||||
{codes.map((code, key) => {
|
||||
return (
|
||||
<tr key={key}>
|
||||
<td>
|
||||
<MarkdownRenderer
|
||||
content={code}
|
||||
wide={false}
|
||||
onTocChange={() => false}
|
||||
onMetaDataChange={() => false}
|
||||
onFirstHeadingChange={() => false}
|
||||
onLineMarkerPositionChanged={() => false}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<HighlightedCode code={code} wrapLines={true} startLineNumber={1} language={'markdown'}/>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
)
|
||||
}
|
||||
72
src/components/editor/app-bar/help-button/help-button.tsx
Normal file
72
src/components/editor/app-bar/help-button/help-button.tsx
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
import React, { Fragment, useState } from 'react'
|
||||
import { Button, Modal } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
|
||||
import { Cheatsheet } from './cheatsheet'
|
||||
import { Links } from './links'
|
||||
import { Shortcut } from './shortcuts'
|
||||
|
||||
enum HelpTabStatus {
|
||||
Cheatsheet='cheatsheet.title',
|
||||
Shortcuts='shortcuts.title',
|
||||
Links='links.title'
|
||||
}
|
||||
|
||||
export const HelpButton: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const [show, setShow] = useState(false)
|
||||
const [tab, setTab] = useState<HelpTabStatus>(HelpTabStatus.Cheatsheet)
|
||||
|
||||
const tabContent = (): React.ReactElement => {
|
||||
switch (tab) {
|
||||
case HelpTabStatus.Cheatsheet:
|
||||
return (<Cheatsheet/>)
|
||||
case HelpTabStatus.Shortcuts:
|
||||
return (<Shortcut/>)
|
||||
case HelpTabStatus.Links:
|
||||
return (<Links/>)
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
<Modal show={show} onHide={() => setShow(false)} animation={true} className="text-dark" size='xl'>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>
|
||||
<ForkAwesomeIcon icon="question-circle"/> <Trans i18nKey={'editor.documentBar.help'}/> – <Trans i18nKey={`editor.help.${tab}`}/>
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body className="text-dark">
|
||||
<ul className='nav nav-tabs'>
|
||||
<li className='nav-item'>
|
||||
<button className={`nav-link ${tab === HelpTabStatus.Cheatsheet ? 'active' : ''}`}
|
||||
onClick={() => setTab(HelpTabStatus.Cheatsheet)}
|
||||
>
|
||||
<Trans i18nKey={'editor.help.cheatsheet.title'}/>
|
||||
</button>
|
||||
</li>
|
||||
<li className='nav-item'>
|
||||
<button className={`nav-link ${tab === HelpTabStatus.Shortcuts ? 'active' : ''}`}
|
||||
onClick={() => setTab(HelpTabStatus.Shortcuts)}
|
||||
>
|
||||
<Trans i18nKey={'editor.help.shortcuts.title'}/>
|
||||
</button>
|
||||
</li>
|
||||
<li className='nav-item'>
|
||||
<button className={`nav-link ${tab === HelpTabStatus.Links ? 'active' : ''}`}
|
||||
onClick={() => setTab(HelpTabStatus.Links)}
|
||||
>
|
||||
<Trans i18nKey={'editor.help.links.title'}/>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
{tabContent()}
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
84
src/components/editor/app-bar/help-button/links.tsx
Normal file
84
src/components/editor/app-bar/help-button/links.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import React from 'react'
|
||||
import { Col, Row } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { TranslatedExternalLink } from '../../../common/links/translated-external-link'
|
||||
import { TranslatedInternalLink } from '../../../common/links/translated-internal-link'
|
||||
|
||||
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>
|
||||
<div>
|
||||
<ul className="list-unstyled">
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.community'
|
||||
href='https://community.codimd.org/'
|
||||
icon='users'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.meetUsOn'
|
||||
i18nOption={{ service: 'Matrix' }}
|
||||
href='https://riot.im/app/#/room/#codimd:matrix.org'
|
||||
icon='hashtag'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.reportIssue'
|
||||
href='https://github.com/codimd/server/issues'
|
||||
icon='tag'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.helpTranslating'
|
||||
href='https://translate.codimd.org/'
|
||||
icon='language'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Col>
|
||||
<Col lg={4}>
|
||||
<h3><Trans i18nKey='editor.help.documents.title'/></h3>
|
||||
<div>
|
||||
<ul className="list-unstyled">
|
||||
<li>
|
||||
<TranslatedInternalLink
|
||||
i18nKey='editor.help.documents.features'
|
||||
href='/n/features'
|
||||
icon='dot-circle-o'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<TranslatedInternalLink
|
||||
i18nKey='editor.help.documents.yamlMetadata'
|
||||
href='/n/yaml-data'
|
||||
icon='dot-circle-o'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.documents.slideExample'
|
||||
href='https://github.com/codimd/server/issues'
|
||||
icon='dot-circle-o'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
44
src/components/editor/app-bar/help-button/shortcuts.tsx
Normal file
44
src/components/editor/app-bar/help-button/shortcuts.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import React from 'react'
|
||||
import { Card, ListGroup, Row } from 'react-bootstrap'
|
||||
import { Trans } from 'react-i18next'
|
||||
import { isMac } from '../../utils'
|
||||
|
||||
export const Shortcut: React.FC = () => {
|
||||
const modifierKey = isMac ? <kbd>Cmd</kbd> : <kbd>Ctrl</kbd>
|
||||
|
||||
const shortcutMap: {[category: string]: { [functionName: string]: JSX.Element[] }} = {
|
||||
'View Mode': {
|
||||
'editor.help.shortcuts.view': [modifierKey, <> + </>, <kbd>Alt</kbd>, <> + </>, <kbd>V</kbd>],
|
||||
'editor.help.shortcuts.both': [modifierKey, <> + </>, <kbd>Alt</kbd>, <> + </>, <kbd>B</kbd>],
|
||||
'editor.help.shortcuts.edit': [modifierKey, <> + </>, <kbd>Alt</kbd>, <> + </>, <kbd>E</kbd>]
|
||||
},
|
||||
Editor: {
|
||||
'editor.help.shortcuts.bold': [modifierKey, <> + </>, <kbd>B</kbd>],
|
||||
'editor.help.shortcuts.italic': [modifierKey, <> + </>, <kbd>I</kbd>],
|
||||
'editor.help.shortcuts.underline': [modifierKey, <> + </>, <kbd>U</kbd>],
|
||||
'editor.help.shortcuts.strikethrough': [modifierKey, <> + </>, <kbd>D</kbd>],
|
||||
'editor.help.shortcuts.mark': [modifierKey, <> + </>, <kbd>M</kbd>]
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Row className={'justify-content-center pt-4'}>
|
||||
{Object.keys(shortcutMap).map(category => {
|
||||
return (
|
||||
<Card className={'m-2 w-50'}>
|
||||
<Card.Header>{category}</Card.Header>
|
||||
<ListGroup variant="flush">
|
||||
{Object.entries(shortcutMap[category]).map(([functionName, shortcut]) => {
|
||||
return (
|
||||
<ListGroup.Item className={'d-flex justify-content-between'}>
|
||||
<span><Trans i18nKey={functionName}/></span>
|
||||
<span>{shortcut}</span>
|
||||
</ListGroup.Item>
|
||||
)
|
||||
})}
|
||||
</ListGroup>
|
||||
</Card>)
|
||||
})
|
||||
}
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
|
@ -82,7 +82,7 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps & ScrollProps>
|
|||
ref={renderer} onScroll={userScroll} onMouseEnter={onMakeScrollSource} >
|
||||
<div className={'col-md'}/>
|
||||
<MarkdownRenderer
|
||||
className={'flex-fill'}
|
||||
className={'flex-fill mb-3'}
|
||||
content={content}
|
||||
wide={wide}
|
||||
onTocChange={(tocAst) => setTocAst(tocAst)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import CodeMirror, { Editor, KeyMap, Pass } from 'codemirror'
|
||||
import { isMac } from '../utils'
|
||||
import {
|
||||
makeSelectionBold,
|
||||
makeSelectionItalic,
|
||||
|
|
@ -7,8 +8,6 @@ import {
|
|||
underlineSelection
|
||||
} from './tool-bar/utils/toolbarButtonUtils'
|
||||
|
||||
const isMac = navigator.platform.toLowerCase().includes('mac')
|
||||
|
||||
const isVim = (keyMapName?: string) => (keyMapName?.substr(0, 3) === 'vim')
|
||||
|
||||
const f10 = (editor: Editor): void | typeof Pass => editor.setOption('fullScreen', !editor.getOption('fullScreen'))
|
||||
|
|
|
|||
1
src/components/editor/utils.ts
Normal file
1
src/components/editor/utils.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export const isMac = navigator.platform.toLowerCase().includes('mac')
|
||||
|
|
@ -26,8 +26,8 @@ import { Alert } from 'react-bootstrap'
|
|||
import ReactHtmlParser, { convertNodeToElement, Transform } from 'react-html-parser'
|
||||
import { Trans } from 'react-i18next'
|
||||
import MathJaxReact from 'react-mathjax'
|
||||
import useResizeObserver from 'use-resize-observer'
|
||||
import { useSelector } from 'react-redux'
|
||||
import useResizeObserver from 'use-resize-observer'
|
||||
import { TocAst } from '../../external-types/markdown-it-toc-done-right/interface'
|
||||
import { ApplicationState } from '../../redux'
|
||||
import { InternalLink } from '../common/links/internal-link'
|
||||
|
|
@ -37,6 +37,7 @@ import { slugify } from '../editor/table-of-contents/table-of-contents'
|
|||
import { RawYAMLMetadata, YAMLMetaData } from '../editor/yaml-metadata/yaml-metadata'
|
||||
import { createRenderContainer, validAlertLevels } from './container-plugins/alert'
|
||||
import { highlightedCode } from './markdown-it-plugins/highlighted-code'
|
||||
import { lineNumberMarker } from './markdown-it-plugins/line-number-marker'
|
||||
import { linkifyExtra } from './markdown-it-plugins/linkify-extra'
|
||||
import { MarkdownItParserDebugger } from './markdown-it-plugins/parser-debugger'
|
||||
import { plantumlError } from './markdown-it-plugins/plantuml-error'
|
||||
|
|
@ -66,7 +67,6 @@ import { QuoteOptionsReplacer } from './replace-components/quote-options/quote-o
|
|||
import { TocReplacer } from './replace-components/toc/toc-replacer'
|
||||
import { VimeoReplacer } from './replace-components/vimeo/vimeo-replacer'
|
||||
import { YoutubeReplacer } from './replace-components/youtube/youtube-replacer'
|
||||
import { lineNumberMarker } from './markdown-it-plugins/line-number-marker'
|
||||
|
||||
export interface LineMarkerPosition {
|
||||
line: number
|
||||
|
|
@ -123,6 +123,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content, onM
|
|||
|
||||
const calculateLineMarkerPositions = useCallback(() => {
|
||||
if (documentElement.current && onLineMarkerPositionChanged) {
|
||||
// noinspection CssInvalidHtmlTagReference
|
||||
const lineMarkers: NodeListOf<HTMLDivElement> = documentElement.current.querySelectorAll('codimd-linemarker')
|
||||
const lineMarkerPositions: LineMarkerPosition[] = Array.from(lineMarkers).map((marker) => {
|
||||
return {
|
||||
|
|
@ -327,7 +328,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content, onM
|
|||
}, [content, markdownIt, onMetaDataChange])
|
||||
|
||||
return (
|
||||
<div className={'bg-light flex-fill pb-5'}>
|
||||
<div className={'bg-light flex-fill'}>
|
||||
<div className={`markdown-body ${className || ''} d-flex flex-column align-items-center ${wide ? 'wider' : ''}`} ref={documentElement}>
|
||||
<ShowIf condition={yamlError}>
|
||||
<Alert variant='warning' dir='auto'>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
@import '../../../../../../node_modules/highlight.js/styles/github-gist.css';
|
||||
}
|
||||
|
||||
.markdown-body pre code.hljs {
|
||||
.markdown-body code.hljs {
|
||||
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue