mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-24 20:14:35 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Move and rename files (2/4) (#987)

Browse source 
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2021-02-02 00:03:47 +01:00 • committed by GitHub
parent 1b7abf9f27
commit 123f959fb3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
145 changed files with 586 additions and 301 deletions
Download patch file Download diff file Expand all files Collapse all files

117
src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx Normal file
View file

@ -0,0 +1,117 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { Editor } from 'codemirror'
import React from 'react'
import { Button, ButtonGroup, ButtonToolbar } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import { EditorPreferences } from './editor-preferences/editor-preferences'
import { EmojiPickerButton } from './emoji-picker/emoji-picker-button'
import { TablePickerButton } from './table-picker/table-picker-button'
import './tool-bar.scss'
import { UploadImageButton } from './upload-image-button'
import {
addCodeFences,
addCollapsableBlock,
addComment,
addHeaderLevel,
addImage,
addLine,
addLink,
addList,
addOrderedList,
addQuotes,
addTaskList,
makeSelectionBold,
makeSelectionItalic,
strikeThroughSelection,
subscriptSelection,
superscriptSelection,
underlineSelection
} from './utils/toolbarButtonUtils'
export interface ToolBarProps {
editor?: Editor
}
export const ToolBar: React.FC<ToolBarProps> = ({ editor }) => {
const { t } = useTranslation()
if (!editor) {
return null
}
return (
<ButtonToolbar className='bg-light'>
<ButtonGroup className={'mx-1 flex-wrap'}>
<Button data-cy={'format-bold'} variant='light' onClick={() => makeSelectionBold(editor)} title={t('editor.editorToolbar.bold')}>
<ForkAwesomeIcon icon="bold"/>
</Button>
<Button data-cy={'format-italic'} variant='light' onClick={() => makeSelectionItalic(editor)} title={t('editor.editorToolbar.italic')}>
<ForkAwesomeIcon icon="italic"/>
</Button>
<Button data-cy={'format-underline'} variant='light' onClick={() => underlineSelection(editor)} title={t('editor.editorToolbar.underline')}>
<ForkAwesomeIcon icon="underline"/>
</Button>
<Button data-cy={'format-strikethrough'} variant='light' onClick={() => strikeThroughSelection(editor)} title={t('editor.editorToolbar.strikethrough')}>
<ForkAwesomeIcon icon="strikethrough"/>
</Button>
<Button data-cy={'format-subscript'} variant='light' onClick={() => subscriptSelection(editor)} title={t('editor.editorToolbar.subscript')}>
<ForkAwesomeIcon icon="subscript"/>
</Button>
<Button data-cy={'format-superscript'} variant='light' onClick={() => superscriptSelection(editor)} title={t('editor.editorToolbar.superscript')}>
<ForkAwesomeIcon icon="superscript"/>
</Button>
</ButtonGroup>
<ButtonGroup className={'mx-1 flex-wrap'}>
<Button data-cy={'format-heading'} variant='light' onClick={() => addHeaderLevel(editor)} title={t('editor.editorToolbar.header')}>
<ForkAwesomeIcon icon="header"/>
</Button>
<Button data-cy={'format-code-block'} variant='light' onClick={() => addCodeFences(editor)} title={t('editor.editorToolbar.code')}>
<ForkAwesomeIcon icon="code"/>
</Button>
<Button data-cy={'format-block-quote'} variant='light' onClick={() => addQuotes(editor)} title={t('editor.editorToolbar.blockquote')}>
<ForkAwesomeIcon icon="quote-right"/>
</Button>
<Button data-cy={'format-unordered-list'} variant='light' onClick={() => addList(editor)} title={t('editor.editorToolbar.unorderedList')}>
<ForkAwesomeIcon icon="list"/>
</Button>
<Button data-cy={'format-ordered-list'} variant='light' onClick={() => addOrderedList(editor)} title={t('editor.editorToolbar.orderedList')}>
<ForkAwesomeIcon icon="list-ol"/>
</Button>
<Button data-cy={'format-check-list'} variant='light' onClick={() => addTaskList(editor)} title={t('editor.editorToolbar.checkList')}>
<ForkAwesomeIcon icon="check-square"/>
</Button>
</ButtonGroup>
<ButtonGroup className={'mx-1 flex-wrap'}>
<Button data-cy={'format-link'} variant='light' onClick={() => addLink(editor)} title={t('editor.editorToolbar.link')}>
<ForkAwesomeIcon icon="link"/>
</Button>
<Button data-cy={'format-image'} variant='light' onClick={() => addImage(editor)} title={t('editor.editorToolbar.image')}>
<ForkAwesomeIcon icon="picture-o"/>
</Button>
<UploadImageButton editor={editor}/>
</ButtonGroup>
<ButtonGroup className={'mx-1 flex-wrap'}>
<TablePickerButton editor={editor}/>
<Button data-cy={'format-add-line'} variant='light' onClick={() => addLine(editor)} title={t('editor.editorToolbar.line')}>
<ForkAwesomeIcon icon="minus"/>
</Button>
<Button data-cy={'format-collapsable-block'} variant='light' onClick={() => addCollapsableBlock(editor)} title={t('editor.editorToolbar.collapsableBlock')}>
<ForkAwesomeIcon icon="caret-square-o-down"/>
</Button>
<Button data-cy={'format-add-comment'} variant='light' onClick={() => addComment(editor)} title={t('editor.editorToolbar.comment')}>
<ForkAwesomeIcon icon="comment"/>
</Button>
<EmojiPickerButton editor={editor}/>
</ButtonGroup>
<ButtonGroup className={'mx-1 flex-wrap'}>
<EditorPreferences/>
</ButtonGroup>
</ButtonToolbar>
)
}