Skip to content

Commit de95b13

Browse files
davepagurekdavepagurek
committed
Make toggles actually do something!
1 parent 1eac470 commit de95b13

File tree

5 files changed

+40
-45
lines changed

5 files changed

+40
-45
lines changed

‎client/modules/IDE/components/Editor/index.jsx

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ class Editor extends React.Component {
105105
this.showFind = this.showFind.bind(this);
106106
this.showReplace = this.showReplace.bind(this);
107107
this.getContent = this.getContent.bind(this);
108+
this.updateFileContent = this.updateFileContent.bind(this);
108109
}
109110

110111
componentDidMount() {
@@ -224,7 +225,8 @@ class Editor extends React.Component {
224225
tidyCode: this.tidyCode,
225226
showFind: this.showFind,
226227
showReplace: this.showReplace,
227-
getContent: this.getContent
228+
getContent: this.getContent,
229+
updateFileContent: this.updateFileContent
228230
});
229231
}
230232

@@ -336,7 +338,8 @@ class Editor extends React.Component {
336338
tidyCode: this.tidyCode,
337339
showFind: this.showFind,
338340
showReplace: this.showReplace,
339-
getContent: this.getContent
341+
getContent: this.getContent,
342+
updateFileContent: this.updateFileContent
340343
});
341344
}
342345

@@ -373,6 +376,17 @@ class Editor extends React.Component {
373376
return updatedFile;
374377
}
375378

379+
updateFileContent(id, src) {
380+
const file = this._docs[id];
381+
if (file) {
382+
console.log(this._docs[id]);
383+
this._docs[id] = CodeMirror.Doc(src, this._docs[id].modeOption);
384+
if (id === this.props.file.id) {
385+
this._cm.swapDoc(this._docs[id]);
386+
}
387+
}
388+
}
389+
376390
handleKeyUp = () => {
377391
const lineNumber = parseInt(this._cm.getCursor().line + 1, 10);
378392
this.setState({ currentLine: lineNumber });

‎client/modules/IDE/components/Preferences/index.jsx

Lines changed: 14 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useRef, useState } from 'react';
1+
import React, { useContext, useRef, useState } from 'react';
22
import { Helmet } from 'react-helmet';
33
import { useDispatch, useSelector } from 'react-redux';
44
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
@@ -22,6 +22,7 @@ import {
2222
import { useP5Version } from '../../hooks/useP5Version';
2323
import VersionPicker from '../VersionPicker';
2424
import { updateFileContent } from '../../actions/files';
25+
import { CmControllerContext } from '../../pages/IDEView';
2526

2627
export default function Preferences() {
2728
const { t } = useTranslation();
@@ -44,6 +45,7 @@ export default function Preferences() {
4445

4546
const [state, setState] = useState({ fontSize });
4647
const { versionInfo, indexID } = useP5Version();
48+
const cmRef = useContext(CmControllerContext);
4749

4850
function onFontInputChange(event) {
4951
const INTEGER_REGEX = /^[0-9\b]+$/;
@@ -90,6 +92,11 @@ export default function Preferences() {
9092

9193
const fontSizeInputRef = useRef(null);
9294

95+
const updateHTML = (src) => {
96+
dispatch(updateFileContent(indexID, src));
97+
cmRef.current?.updateFileContent(indexID, src);
98+
};
99+
93100
return (
94101
<section className="preferences">
95102
<Helmet>
@@ -506,11 +513,7 @@ export default function Preferences() {
506513
<div className="preference__options">
507514
<input
508515
type="radio"
509-
onChange={() =>
510-
dispatch(
511-
updateFileContent(indexID, versionInfo.setP5Sound(true))
512-
)
513-
}
516+
onChange={() => updateHTML(versionInfo.setP5Sound(true))}
514517
aria-label={t('Preferences.AutosaveOnARIA')}
515518
name="soundaddon"
516519
id="soundaddon-on"
@@ -523,14 +526,7 @@ export default function Preferences() {
523526
</label>
524527
<input
525528
type="radio"
526-
onChange={() =>
527-
dispatch(
528-
updateFileContent(
529-
indexID,
530-
versionInfo.setP5Sound(false)
531-
)
532-
)
533-
}
529+
onChange={() => updateHTML(versionInfo.setP5Sound(false))}
534530
aria-label={t('Preferences.AutosaveOffARIA')}
535531
name="soundaddon"
536532
id="soundaddon-off"
@@ -554,12 +550,7 @@ export default function Preferences() {
554550
<input
555551
type="radio"
556552
onChange={() =>
557-
dispatch(
558-
updateFileContent(
559-
indexID,
560-
versionInfo.setP5PreloadAddon(true)
561-
)
562-
)
553+
updateHTML(versionInfo.setP5PreloadAddon(true))
563554
}
564555
aria-label={t('Preferences.AutosaveOnARIA')}
565556
name="preloadaddon"
@@ -577,12 +568,7 @@ export default function Preferences() {
577568
<input
578569
type="radio"
579570
onChange={() =>
580-
dispatch(
581-
updateFileContent(
582-
indexID,
583-
versionInfo.setP5PreloadAddon(false)
584-
)
585-
)
571+
updateHTML(versionInfo.setP5PreloadAddon(false))
586572
}
587573
aria-label={t('Preferences.AutosaveOffARIA')}
588574
name="preloadaddon"
@@ -607,12 +593,7 @@ export default function Preferences() {
607593
<input
608594
type="radio"
609595
onChange={() =>
610-
dispatch(
611-
updateFileContent(
612-
indexID,
613-
versionInfo.setP5ShapesAddon(true)
614-
)
615-
)
596+
updateHTML(versionInfo.setP5ShapesAddon(true))
616597
}
617598
aria-label={t('Preferences.AutosaveOnARIA')}
618599
name="shapesaddon"
@@ -630,12 +611,7 @@ export default function Preferences() {
630611
<input
631612
type="radio"
632613
onChange={() =>
633-
dispatch(
634-
updateFileContent(
635-
indexID,
636-
versionInfo.setP5ShapesAddon(false)
637-
)
638-
)
614+
updateHTML(versionInfo.setP5ShapesAddon(false))
639615
}
640616
aria-label={t('Preferences.AutosaveOffARIA')}
641617
name="shapesaddon"

‎client/modules/IDE/components/VersionPicker.jsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
1-
import React, { useCallback } from 'react';
1+
import React, { useCallback, useContext } from 'react';
22
import { useDispatch } from 'react-redux';
33
import { useTranslation } from 'react-i18next';
44

55
import { useP5Version, p5Versions } from '../hooks/useP5Version';
66
import MenuItem from '../../../components/Dropdown/MenuItem';
77
import DropdownMenu from '../../../components/Dropdown/DropdownMenu';
88
import { updateFileContent } from '../actions/files';
9+
import { CmControllerContext } from '../pages/IDEView';
910

1011
const VersionPicker = () => {
1112
const { indexID, versionInfo } = useP5Version();
1213
const { t } = useTranslation();
1314
const dispatch = useDispatch();
15+
const cmRef = useContext(CmControllerContext);
1416
const dispatchReplaceVersion = useCallback(
1517
(version) => {
1618
if (!indexID || !versionInfo) return;
17-
dispatch(updateFileContent(indexID, versionInfo.replaceVersion(version)));
19+
const src = versionInfo.replaceVersion(version);
20+
dispatch(updateFileContent(indexID, src));
21+
cmRef.current?.updateFileContent(indexID, src);
1822
},
19-
[indexID, versionInfo]
23+
[indexID, versionInfo, cmRef]
2024
);
2125

2226
if (!versionInfo) {

‎client/modules/IDE/hooks/useP5Version.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,6 @@ export function useP5Version() {
161161
src = `${doctype}\n${src}`;
162162
}
163163

164-
console.log(src);
165164
return src;
166165
};
167166

‎client/modules/IDE/pages/IDEView.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,9 @@ const IDEView = () => {
281281
</SplitPane>
282282
</main>
283283
)}
284-
<IDEOverlays />
284+
<CmControllerContext.Provider value={cmRef}>
285+
<IDEOverlays />
286+
</CmControllerContext.Provider>
285287
</RootPage>
286288
);
287289
};

0 commit comments

Comments
 (0)