r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Added softwrap preference for users. (#970)

Browse source 
* Client and server side code added for Linewrap option

* Linked linewrap prop with the Editor.jsx property

* linewrap defaults to true

* Renamed 'LineWrap' to 'WordWrap'
This commit is contained in:
Laksh Singla 2019-03-27 01:07:44 +05:30 committed by Cassie Tarakajian
parent 92c4c9a30f
commit 24302b56de
8 changed files with 69 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client/constants.js
View file

@ -62,6 +62,7 @@ export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';
export const DELETE_FILE = 'DELETE_FILE';
export const SET_AUTOSAVE = 'SET_AUTOSAVE';
export const SET_LINEWRAP = 'SET_LINEWRAP';
export const SET_LINT_WARNING = 'SET_LINT_WARNING';
export const SET_PREFERENCES = 'SET_PREFERENCES';
export const SET_TEXT_OUTPUT = 'SET_TEXT_OUTPUT';

18
client/modules/IDE/actions/preferences.js
View file

@ -102,6 +102,24 @@ export function setAutosave(value) {
};
}
export function setLinewrap(value) {
return (dispatch, getState) => {
dispatch({
type: ActionTypes.SET_LINEWRAP,
value
});
const state = getState();
if (state.user.authenticated) {
const formParams = {
preferences: {
linewrap: value
}
};
updatePreferences(formParams, dispatch);
}
};
}
export function setLintWarning(value) {
return (dispatch, getState) => {
dispatch({

6
client/modules/IDE/components/Editor.jsx
View file

@ -80,7 +80,7 @@ class Editor extends React.Component {
lineNumbers: true,
styleActiveLine: true,
inputStyle: 'contenteditable',
lineWrapping: false,
lineWrapping: this.props.linewrap,
fixedGutter: false,
foldGutter: true,
foldOptions: { widget: '\u2026' },
@ -178,6 +178,9 @@ class Editor extends React.Component {
this._cm.setOption('tabSize', this.props.indentationAmount);
this._cm.setOption('indentUnit', this.props.indentationAmount);
}
if (this.props.linewrap !== prevProps.linewrap) {
this._cm.setOption('lineWrapping', this.props.linewrap);
}
if (this.props.isTabIndent !== prevProps.isTabIndent) {
this._cm.setOption('indentWithTabs', this.props.isTabIndent);
}
@ -339,6 +342,7 @@ class Editor extends React.Component {
Editor.propTypes = {
lintWarning: PropTypes.bool.isRequired,
linewrap: PropTypes.bool.isRequired,
lintMessages: PropTypes.arrayOf(PropTypes.shape({
severity: PropTypes.string.isRequired,
line: PropTypes.number.isRequired,

35
client/modules/IDE/components/Preferences.jsx
View file

@ -15,6 +15,7 @@ class Preferences extends React.Component {
constructor(props) {
super(props);
this.handleUpdateAutosave = this.handleUpdateAutosave.bind(this);
this.handleUpdateLinewrap = this.handleUpdateLinewrap.bind(this);
this.handleUpdateFont = this.handleUpdateFont.bind(this);
this.handleUpdateIndentation = this.handleUpdateIndentation.bind(this);
this.handleLintWarning = this.handleLintWarning.bind(this);
@ -53,6 +54,11 @@ class Preferences extends React.Component {
this.props.setAutosave(value);
}
handleUpdateLinewrap(event) {
const value = event.target.value === 'true';
this.props.setLinewrap(value);
}
handleLintWarning(event) {
const value = event.target.value === 'true';
this.props.setLintWarning(value);
@ -230,6 +236,33 @@ class Preferences extends React.Component {
<label htmlFor="autosave-off" className="preference__option">Off</label>
</div>
</div>
<div className="preference">
<h4 className="preference__title">Word Wrap</h4>
<div className="preference__options">
<input
type="radio"
onChange={() => this.props.setLinewrap(true)}
aria-label="linewrap on"
name="linewrap"
id="linewrap-on"
className="preference__radio-button"
value="On"
checked={this.props.linewrap}
/>
<label htmlFor="linewrap-on" className="preference__option">On</label>
<input
type="radio"
onChange={() => this.props.setLinewrap(false)}
aria-label="linewrap off"
name="linewrap"
id="linewrap-off"
className="preference__radio-button"
value="Off"
checked={!this.props.linewrap}
/>
<label htmlFor="linewrap-off" className="preference__option">Off</label>
</div>
</div>
</TabPanel>
<TabPanel>
<div className="preference">
@ -325,7 +358,9 @@ Preferences.propTypes = {
isTabIndent: PropTypes.bool.isRequired,
setFontSize: PropTypes.func.isRequired,
autosave: PropTypes.bool.isRequired,
linewrap: PropTypes.bool.isRequired,
setAutosave: PropTypes.func.isRequired,
setLinewrap: PropTypes.func.isRequired,
textOutput: PropTypes.bool.isRequired,
gridOutput: PropTypes.bool.isRequired,
soundOutput: PropTypes.bool.isRequired,

5
client/modules/IDE/pages/IDEView.jsx
View file

@ -209,7 +209,9 @@ class IDEView extends React.Component {
isTabIndent={this.props.preferences.isTabIndent}
setFontSize={this.props.setFontSize}
autosave={this.props.preferences.autosave}
linewrap={this.props.preferences.linewrap}
setAutosave={this.props.setAutosave}
setLinewrap={this.props.setLinewrap}
lintWarning={this.props.preferences.lintWarning}
setLintWarning={this.props.setLintWarning}
textOutput={this.props.preferences.textOutput}
@ -266,6 +268,7 @@ class IDEView extends React.Component {
>
<Editor
lintWarning={this.props.preferences.lintWarning}
linewrap={this.props.preferences.linewrap}
lintMessages={this.props.editorAccessibility.lintMessages}
updateLintMessage={this.props.updateLintMessage}
clearLintMessage={this.props.clearLintMessage}
@ -516,6 +519,7 @@ IDEView.propTypes = {
indentationAmount: PropTypes.number.isRequired,
isTabIndent: PropTypes.bool.isRequired,
autosave: PropTypes.bool.isRequired,
linewrap: PropTypes.bool.isRequired,
lintWarning: PropTypes.bool.isRequired,
textOutput: PropTypes.bool.isRequired,
gridOutput: PropTypes.bool.isRequired,
@ -529,6 +533,7 @@ IDEView.propTypes = {
indentWithTab: PropTypes.func.isRequired,
indentWithSpace: PropTypes.func.isRequired,
setAutosave: PropTypes.func.isRequired,
setLinewrap: PropTypes.func.isRequired,
setLintWarning: PropTypes.func.isRequired,
setTextOutput: PropTypes.func.isRequired,
setGridOutput: PropTypes.func.isRequired,

3
client/modules/IDE/reducers/preferences.js
View file

@ -5,6 +5,7 @@ const initialState = {
indentationAmount: 2,
isTabIndent: true,
autosave: true,
linewrap: true,
lintWarning: false,
textOutput: false,
gridOutput: false,
@ -29,6 +30,8 @@ const preferences = (state = initialState, action) => {
});
case ActionTypes.SET_AUTOSAVE:
return Object.assign({}, state, { autosave: action.value });
case ActionTypes.SET_LINEWRAP:
return Object.assign({}, state, { linewrap: action.value });
case ActionTypes.SET_LINT_WARNING:
return Object.assign({}, state, { lintWarning: action.value });
case ActionTypes.SET_TEXT_OUTPUT:

2
client/styles/components/_overlay.scss
View file

@ -22,7 +22,7 @@
display: flex;
flex-wrap: wrap;
flex-flow: column;
max-height: 80%;
max-height: 88%;
max-width: 65%;
}

1
server/models/user.js
View file

@ -27,6 +27,7 @@ const userSchema = new Schema({
indentationAmount: { type: Number, default: 2 },
isTabIndent: { type: Boolean, default: false },
autosave: { type: Boolean, default: true },
linewrap: { type: Boolean, default: true },
lintWarning: { type: Boolean, default: false },
textOutput: { type: Boolean, default: false },
gridOutput: { type: Boolean, default: false },