This repository has been archived by the owner on Nov 23, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
- Loading branch information
1 parent
8a2d26f
commit 401a7c4
Showing
19 changed files
with
506 additions
and
257 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
src/components/editor-page/metadata-editor/breaks-metadata-input.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| /* | ||
| * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) | ||
| * | ||
| * SPDX-License-Identifier: AGPL-3.0-only | ||
| */ | ||
|
|
||
| import React from 'react' | ||
| import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap' | ||
| import { Trans, useTranslation } from 'react-i18next' | ||
| import { MetadataInputFieldProps } from './metadata-editor' | ||
|
|
||
| enum ButtonState { | ||
| ON, | ||
| OFF | ||
| } | ||
|
|
||
| export const BreaksMetadataInput: React.FC<MetadataInputFieldProps<boolean>> = ({ id, content, onContentChange }) => { | ||
| const { t } = useTranslation() | ||
|
|
||
| return ( | ||
| <ToggleButtonGroup | ||
| type="radio" | ||
| name={ id } | ||
| id={ id } | ||
| value={ content ? ButtonState.ON : ButtonState.OFF } | ||
| className={ 'd-block' }> | ||
| <ToggleButton | ||
| value={ ButtonState.ON } | ||
| variant="outline-secondary" | ||
| title={ t('editor.modal.metadataEditor.labels.breaksOn') } | ||
| onChange={ () => onContentChange(true) }> | ||
| <Trans i18nKey={ 'editor.modal.metadataEditor.labels.breaksOn' }/> | ||
| </ToggleButton> | ||
| <ToggleButton | ||
| value={ ButtonState.OFF } | ||
| variant="outline-secondary" | ||
| title={ t('editor.modal.metadataEditor.labels.breaksOff') } | ||
| onChange={ () => onContentChange(false) }> | ||
| <Trans i18nKey={ 'editor.modal.metadataEditor.labels.breaksOff' }/> | ||
| </ToggleButton> | ||
| </ToggleButtonGroup> | ||
| ) | ||
| } |
29 changes: 29 additions & 0 deletions
29
src/components/editor-page/metadata-editor/datalist-metadata-input.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| /* | ||
| * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) | ||
| * | ||
| * SPDX-License-Identifier: AGPL-3.0-only | ||
| */ | ||
|
|
||
| import React, { Fragment, useCallback } from 'react' | ||
| import { MetadataInputFieldProps, SelectMetadataOptions } from './metadata-editor' | ||
|
|
||
| export const DatalistMetadataInput: React.FC<MetadataInputFieldProps<string> & SelectMetadataOptions<string>> = ({ id, content, onContentChange, options }) => { | ||
| const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => { | ||
| onContentChange(event.currentTarget.value) | ||
| }, [onContentChange]) | ||
|
|
||
| return ( | ||
| <Fragment> | ||
| <input list={ id } onChange={ onChange } value={ content } className={ 'form-control' }/> | ||
| <datalist id={ id }> | ||
| { options.map(option => { | ||
| return ( | ||
| <option value={ option }> | ||
| { option } | ||
| </option> | ||
| ) | ||
| }) } | ||
| </datalist> | ||
| </Fragment> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| /*! | ||
| * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) | ||
| * | ||
| * SPDX-License-Identifier: AGPL-3.0-only | ||
| */ | ||
|
|
||
| .tighter { | ||
| margin-bottom: -0.5px !important; | ||
| } |
23 changes: 23 additions & 0 deletions
23
src/components/editor-page/metadata-editor/input-label.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| /* | ||
| * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) | ||
| * | ||
| * SPDX-License-Identifier: AGPL-3.0-only | ||
| */ | ||
|
|
||
| import React from 'react' | ||
| import './input-label.scss' | ||
| import { Form } from 'react-bootstrap' | ||
|
|
||
| export interface InputLabelProps { | ||
| id: string | ||
| label: string | ||
| } | ||
|
|
||
| export const InputLabel: React.FC<InputLabelProps> = ({ id, label, children }) => { | ||
| return ( | ||
| <Form.Group className={ 'pb-3' }> | ||
| <label className='small font-weight-lighter tighter' htmlFor={ id }>{ label }</label> | ||
| { children } | ||
| </Form.Group> | ||
| ) | ||
| } |
120 changes: 120 additions & 0 deletions
120
src/components/editor-page/metadata-editor/metadata-editor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| /* | ||
| * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) | ||
| * | ||
| * SPDX-License-Identifier: AGPL-3.0-only | ||
| */ | ||
|
|
||
| import ISO from 'iso-639-1' | ||
| import React, { useCallback } from 'react' | ||
| import { Col, Modal, Row } from 'react-bootstrap' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { useSelector } from 'react-redux' | ||
| import { ApplicationState } from '../../../redux' | ||
| import { setNoteFrontmatter } from '../../../redux/note-details/methods' | ||
| import { CommonModal } from '../../common/modals/common-modal' | ||
| import { NoteFrontmatter, NoteType } from '../note-frontmatter/note-frontmatter' | ||
| import { BreaksMetadataInput } from './breaks-metadata-input' | ||
| import { DatalistMetadataInput } from './datalist-metadata-input' | ||
| import { InputLabel } from './input-label' | ||
| import { StringMetadataInput } from './string-metadata-input' | ||
| import { StringMetadataTextarea } from './string-metadata-textarea' | ||
| import { TagsMetadataInput } from './tags-metadata-input' | ||
| import { TextDirectionMetadataInput } from './text-direction-metadata-input' | ||
|
|
||
| export interface MetadataEditorProps { | ||
| show: boolean, | ||
| onHide: () => void | ||
| } | ||
|
|
||
| export interface MetadataInputFieldProps<T> { | ||
| id: string | ||
| content: T | ||
| onContentChange: (newContent: T) => void | ||
| } | ||
|
|
||
| export interface SelectMetadataOptions<T> { | ||
| options: T[] | ||
| } | ||
|
|
||
| export const MetadataEditor: React.FC<MetadataEditorProps> = ({ show, onHide }) => { | ||
| const { t } = useTranslation() | ||
| const yamlMetadata = useSelector((state: ApplicationState) => state.noteDetails.frontmatter) | ||
| const noteDetails = useSelector((state: ApplicationState) => state.noteDetails.markdownContent) | ||
| /*const [yamlMetadata, setNoteFrontmatter] = useState<Omit<YAMLMetaData, 'opengraph'>>({ | ||
| title: "Test Title", | ||
| description: "Test Description\nwith two lines", | ||
| tags: ["tag1", "tag2"], | ||
| robots: "", | ||
| lang: "de-at", | ||
| dir: TextDirection.LTR, | ||
| breaks: false, | ||
| GA: "test GA string", | ||
| disqus: "test disqus string", | ||
| type: '', | ||
| deprecatedTagsSyntax: false | ||
| })*/ | ||
|
|
||
| const setMarkdown = useCallback((changes: Partial<NoteFrontmatter>) => { | ||
| const newMetadata = Object.assign(yamlMetadata, changes) | ||
|
|
||
| // setnoteDetails(noteDetails) | ||
| }, [noteDetails]) | ||
|
|
||
| return ( | ||
| <CommonModal | ||
| size='lg' | ||
| show={ show } | ||
| onHide={ onHide } | ||
| closeButton={ true } | ||
| titleI18nKey={ 'editor.modal.metadataEditor.title' }> | ||
| <Modal.Body> | ||
| <Row> | ||
| <Col xs={ 6 }> | ||
| <InputLabel id={ 'title' } label={ t('editor.modal.metadataEditor.labels.title') }> | ||
| <StringMetadataInput id={ 'title' } content={ yamlMetadata.title } | ||
| onContentChange={ title => setNoteFrontmatter({ ...yamlMetadata, title }) }/> | ||
| </InputLabel> | ||
| <InputLabel id={ 'type' } label={ t('editor.modal.metadataEditor.labels.type') }> | ||
| <DatalistMetadataInput id={ 'type' } options={ Object.values(NoteType) } content={ yamlMetadata.type } | ||
| onContentChange={ type => setNoteFrontmatter({ ...yamlMetadata, type: (type as NoteType) }) }/> | ||
| </InputLabel> | ||
| <InputLabel id={ 'dir' } label={ t('editor.modal.metadataEditor.labels.dir') }> | ||
| <TextDirectionMetadataInput id={ 'dir' } content={ yamlMetadata.dir } | ||
| onContentChange={ dir => setNoteFrontmatter({ ...yamlMetadata, dir }) }/> | ||
| </InputLabel> | ||
| <InputLabel id={ 'description' } label={ t('editor.modal.metadataEditor.labels.description') }> | ||
| <StringMetadataTextarea id={ 'description' } content={ yamlMetadata.description } | ||
| onContentChange={ description => setNoteFrontmatter({ ...yamlMetadata, description }) }/> | ||
| </InputLabel> | ||
| <InputLabel id={ 'disqus' } label={ t('editor.modal.metadataEditor.labels.disqus') }> | ||
| <StringMetadataInput id={ 'disqus' } content={ yamlMetadata.disqus } | ||
| onContentChange={ disqus => setNoteFrontmatter({ ...yamlMetadata, disqus }) }/> | ||
| </InputLabel> | ||
| </Col> | ||
| <Col xs={ 6 }> | ||
| <InputLabel id={ 'lang' } label={ t('editor.modal.metadataEditor.labels.lang') }> | ||
| <DatalistMetadataInput id={ 'lang' } options={ ISO.getAllCodes() } content={ yamlMetadata.lang } | ||
| onContentChange={ lang => setNoteFrontmatter({ ...yamlMetadata, lang }) }/> | ||
| </InputLabel> | ||
| <InputLabel id={ 'robots' } label={ t('editor.modal.metadataEditor.labels.robots') }> | ||
| <StringMetadataInput id={ 'robots' } content={ yamlMetadata.robots } | ||
| onContentChange={ robots => setNoteFrontmatter({ ...yamlMetadata, robots }) }/> | ||
| </InputLabel> | ||
| <InputLabel id={ 'breaks' } label={ t('editor.modal.metadataEditor.labels.breaks') }> | ||
| <BreaksMetadataInput id={ 'breaks' } content={ yamlMetadata.breaks } | ||
| onContentChange={ breaks => setNoteFrontmatter({ ...yamlMetadata, breaks }) }/> | ||
| </InputLabel> | ||
| <InputLabel id={ 'tags' } label={ t('editor.modal.metadataEditor.labels.tags') }> | ||
| <TagsMetadataInput id={ 'tags' } content={ yamlMetadata.tags } | ||
| onContentChange={ tags => setNoteFrontmatter({ ...yamlMetadata, tags }) }/> | ||
| </InputLabel> | ||
| <InputLabel id={ 'GA' } label={ t('editor.modal.metadataEditor.labels.GA') }> | ||
| <StringMetadataInput id={ 'GA' } content={ yamlMetadata.GA } | ||
| onContentChange={ GA => setNoteFrontmatter({ ...yamlMetadata, GA }) }/> | ||
| </InputLabel> | ||
| </Col> | ||
| </Row> | ||
| </Modal.Body> | ||
| </CommonModal> | ||
| ) | ||
| } |
Oops, something went wrong.