src/components/layout/content/settings/Editor.js
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import themeList from 'monaco-themes/themes/themelist';
import * as uiActions from 'actions/ui';
import { getSetting, setBooleanSetting, setSetting } from 'utils/settings';
import Input from 'components/common/controls/Input';
import Checkbox from 'components/common/controls/Checkbox';
import Select from 'components/common/controls/Select';
import { toPairs } from 'lodash/fp';
const Wrapper = styled.div`
display: flex;
justify-content: space-between;
`;
const Label = styled.div`
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 10px;
`;
const Section = styled.div`
width: 45%;
`;
const Field = styled.div`
height: 35px;
`;
const StyledInput = styled(Input)`
padding: 0 5px;
width: 148px;
`;
const StyledISelect = styled(Select)`
width: 158px;
`;
const H4 = styled.h4`
color: ${(props) => props.theme.baseAppColor};
border-bottom: 1px dashed ${(props) => props.theme.baseAppColor};
padding-bottom: 20px;
`;
export const EditorSettings = ({ changeSettings }) => {
const updateSettings = (key, value, isBoolean = false) => {
changeSettings(key, value, false, isBoolean);
if (isBoolean) {
setBooleanSetting(key);
} else {
setSetting(key, value);
}
};
return (
<div>
<H4>Editor settings:</H4>
<Wrapper>
<Section>
<Field>
<Label>
<span>Theme:</span>
<StyledISelect
value={ getSetting('editorTheme', 'vs') }
onChange={ (event) => updateSettings('editorTheme', event.target.value) }>
<option value="vs">vs light</option>
<option value="vs-dark">vs dark</option>
<option value="hc-black">hc dark</option>
{toPairs(themeList).map((theme) => (
<option key={ theme[0] } value={ theme[0] }>
{theme[1]}
</option>
))}
</StyledISelect>
</Label>
</Field>
<Field>
<Label>
<span>Minimap:</span>
<Checkbox
checked={ getSetting('minimap', false) }
onChange={ () => updateSettings('minimap', null, true) }/>
</Label>
</Field>
<Field>
<Label>
<span>Code lens:</span>
<Checkbox
checked={ getSetting('codeLens', false) }
onChange={ () => updateSettings('codeLens', null, true) }/>
</Label>
</Field>
<Field>
<Label>
<span>Line Numbers:</span>
<Checkbox
checked={ getSetting('lineNumbers', true) }
onChange={ () => updateSettings('lineNumbers', null, true) }/>
</Label>
</Field>
<Field>
<Label>
<span>Format On Paste:</span>
<Checkbox
checked={ getSetting('formatOnPaste', true) }
onChange={ () => updateSettings('formatOnPaste', null, true) }/>
</Label>
</Field>
<Field>
<Label>
<span>Format On Type:</span>
<Checkbox
checked={ getSetting('settings-editor-formatOnType', true) }
onChange={ () => updateSettings('v', null, true) }/>
</Label>
</Field>
<Field>
<Label>
<span>Select On Line Numbers:</span>
<Checkbox
checked={ getSetting('SelectOnLineNumbers', false) }
onChange={ () => updateSettings('SelectOnLineNumbers', null, true) }/>
</Label>
</Field>
<Field>
<Label>
<span>Fit editor height to content:</span>
<Checkbox
checked={ getSetting('editor-fit-to-content', false) }
onChange={ () => updateSettings('editor-fit-to-content', null, true) }/>
</Label>
</Field>
</Section>
<Section>
<Field>
<Label>
<span>Font Family:</span>
<StyledInput
type="text"
value={ getSetting('fontFamily', 'monospace') }
onChange={ (event) => updateSettings('fontFamily', event.target.value) }/>
</Label>
</Field>
<Field>
<Label>
<span>Font Size:</span>
<StyledInput
type="number"
value={ getSetting('fontSize', 12) }
onChange={ (event) => updateSettings('fontSize', event.target.value) }/>
</Label>
</Field>
<Field>
<Label>
<span>Line height:</span>
<StyledInput
type="number"
value={ getSetting('lineHeight', 21) }
onChange={ (event) => updateSettings('lineHeight', event.target.value) }/>
</Label>
</Field>
<Field>
<Label>
<span>Font Ligatures:</span>
<Checkbox
checked={ getSetting('fontLigatures', false) }
onChange={ () => updateSettings('fontLigatures', null, true) }/>
</Label>
</Field>
<Field>
<Label>
<span>Cursor Blinking:</span>
<StyledISelect
value={ getSetting('cursorBlinking', 'blink') }
onChange={ (event) => updateSettings('cursorBlinking', event.target.value) }>
<option value="blink">blink</option>
<option value="smooth">smooth</option>
<option value="phase">phase</option>
<option value="expand">expand</option>
<option value="solid">solid</option>
</StyledISelect>
</Label>
</Field>
<Field>
<Label>
<span>Word wrap:</span>
<StyledISelect
value={ getSetting('settings-editor-wordWrap', 'bounded') }
onChange={ (event) =>
updateSettings('settings-editor-wordWrap', event.target.value)
}>
<option value="off">off</option>
<option value="on">on</option>
<option value="bounded">bounded</option>
<option value="wordWrapColumn">wordWrapColumn</option>
</StyledISelect>
</Label>
</Field>
<Field>
<Label>
<span>Word wrap column size:</span>
<StyledInput
type="number"
value={ getSetting('settings-editor-wordWrapColumn', 80) }
onChange={ (event) =>
updateSettings('settings-editor-wordWrapColumn', event.target.value)
}/>
</Label>
</Field>
</Section>
</Wrapper>
<H4>Preview settings:</H4>
<Wrapper>
<Section>
<Field>
<Label>
<span>Preview HTML files:</span>
<Checkbox
checked={ getSetting('settings-editor-preview-html', false) }
onChange={ () => updateSettings('settings-editor-preview-html', null, true) }/>
</Label>
</Field>
<Field>
<Label>
<span>Preview Image files:</span>
<Checkbox
checked={ getSetting('settings-editor-preview-image', true) }
onChange={ () => updateSettings('settings-editor-preview-image', null, true) }/>
</Label>
</Field>
<Field>
<Label>
<span>Preview PDF files:</span>
<Checkbox
checked={ getSetting('settings-editor-preview-pdf', true) }
onChange={ () => updateSettings('settings-editor-preview-pdf', null, true) }/>
</Label>
</Field>
<Field>
<Label>
<span>Preview CSV/TSV files:</span>
<Checkbox
checked={ getSetting('settings-editor-preview-csv', true) }
onChange={ () => updateSettings('settings-editor-preview-csv', null, true) }/>
</Label>
</Field>
</Section>
<Section>
<Field>
<Label>
<span>Preview GeoJSON:</span>
<Checkbox
checked={ getSetting('settings-editor-preview-geojson', true) }
onChange={ () => updateSettings('settings-editor-preview-geojson', null, true) }/>
</Label>
</Field>
<Field>
<Label>
<span>Preview Markdown files:</span>
<Checkbox
checked={ getSetting('settings-editor-preview-markdown', true) }
onChange={ () => updateSettings('settings-editor-preview-markdown', null, true) }/>
</Label>
</Field>
<Field>
<Label>
<span>Preview AsciiDoc files:</span>
<Checkbox
checked={ getSetting('settings-editor-preview-asciidoc', true) }
onChange={ () => updateSettings('settings-editor-preview-asciidoc', null, true) }/>
</Label>
</Field>
<Field>
<Label>
<span>Preview LaTex files (using katex):</span>
<Checkbox
checked={ getSetting('settings-editor-preview-latex', true) }
onChange={ () => updateSettings('settings-editor-preview-latex', null, true) }/>
</Label>
</Field>
</Section>
</Wrapper>
</div>
);
};
EditorSettings.propTypes = {
changeSettings: PropTypes.func
};
export default connect(
null,
{
changeSettings: uiActions.changeSettings
}
)(EditorSettings);