Skip to content

Commit ccc8189

Browse files
Mohitur669Mohitur669
authored
Merge pull request #15 from Nikhil-Gautam-dev/Nikhil
Fix: Theme Change Resets Editor Content
2 parents 113ad3b + 6655e5a commit ccc8189

2 files changed

Lines changed: 386 additions & 373 deletions

File tree

‎src/components/Editor.js‎

Lines changed: 147 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,164 +1,167 @@
1-
import React, {useEffect, useRef} from 'react';
2-
import {language, cmtheme} from '../../src/atoms';
3-
import {useRecoilValue} from 'recoil';
4-
import ACTIONS from '../actions/Actions';
1+
import React, { useEffect, useRef } from "react";
2+
import { language, cmtheme } from "../../src/atoms";
3+
import { useRecoilValue } from "recoil";
4+
import ACTIONS from "../actions/Actions";
55

66
// CODE MIRROR
7-
import Codemirror from 'codemirror';
8-
import 'codemirror/lib/codemirror.css';
7+
import Codemirror from "codemirror";
8+
import "codemirror/lib/codemirror.css";
99

1010
// theme
11-
import 'codemirror/theme/3024-day.css';
12-
import 'codemirror/theme/3024-night.css';
13-
import 'codemirror/theme/abbott.css';
14-
import 'codemirror/theme/abcdef.css';
15-
import 'codemirror/theme/ambiance.css';
16-
import 'codemirror/theme/ayu-dark.css';
17-
import 'codemirror/theme/ayu-mirage.css';
18-
import 'codemirror/theme/base16-dark.css';
19-
import 'codemirror/theme/base16-light.css';
20-
import 'codemirror/theme/bespin.css';
21-
import 'codemirror/theme/blackboard.css';
22-
import 'codemirror/theme/cobalt.css';
23-
import 'codemirror/theme/colorforth.css';
24-
import 'codemirror/theme/darcula.css';
25-
import 'codemirror/theme/dracula.css';
26-
import 'codemirror/theme/duotone-dark.css';
27-
import 'codemirror/theme/duotone-light.css';
28-
import 'codemirror/theme/eclipse.css';
29-
import 'codemirror/theme/elegant.css';
30-
import 'codemirror/theme/erlang-dark.css';
31-
import 'codemirror/theme/gruvbox-dark.css';
32-
import 'codemirror/theme/hopscotch.css';
33-
import 'codemirror/theme/icecoder.css';
34-
import 'codemirror/theme/idea.css';
35-
import 'codemirror/theme/isotope.css';
36-
import 'codemirror/theme/juejin.css';
37-
import 'codemirror/theme/lesser-dark.css';
38-
import 'codemirror/theme/liquibyte.css';
39-
import 'codemirror/theme/lucario.css';
40-
import 'codemirror/theme/material.css';
41-
import 'codemirror/theme/material-darker.css';
42-
import 'codemirror/theme/material-palenight.css';
43-
import 'codemirror/theme/material-ocean.css';
44-
import 'codemirror/theme/mbo.css';
45-
import 'codemirror/theme/mdn-like.css';
46-
import 'codemirror/theme/midnight.css';
47-
import 'codemirror/theme/monokai.css';
48-
import 'codemirror/theme/moxer.css';
49-
import 'codemirror/theme/neat.css';
50-
import 'codemirror/theme/neo.css';
51-
import 'codemirror/theme/night.css';
52-
import 'codemirror/theme/nord.css';
53-
import 'codemirror/theme/oceanic-next.css';
54-
import 'codemirror/theme/panda-syntax.css';
55-
import 'codemirror/theme/paraiso-dark.css';
56-
import 'codemirror/theme/paraiso-light.css';
57-
import 'codemirror/theme/pastel-on-dark.css';
58-
import 'codemirror/theme/railscasts.css';
59-
import 'codemirror/theme/rubyblue.css';
60-
import 'codemirror/theme/seti.css';
61-
import 'codemirror/theme/shadowfox.css';
62-
import 'codemirror/theme/solarized.css';
63-
import 'codemirror/theme/the-matrix.css';
64-
import 'codemirror/theme/tomorrow-night-bright.css';
65-
import 'codemirror/theme/tomorrow-night-eighties.css';
66-
import 'codemirror/theme/ttcn.css';
67-
import 'codemirror/theme/twilight.css';
68-
import 'codemirror/theme/vibrant-ink.css';
69-
import 'codemirror/theme/xq-dark.css';
70-
import 'codemirror/theme/xq-light.css';
71-
import 'codemirror/theme/yeti.css';
72-
import 'codemirror/theme/yonce.css';
73-
import 'codemirror/theme/zenburn.css';
11+
import "codemirror/theme/3024-day.css";
12+
import "codemirror/theme/3024-night.css";
13+
import "codemirror/theme/abbott.css";
14+
import "codemirror/theme/abcdef.css";
15+
import "codemirror/theme/ambiance.css";
16+
import "codemirror/theme/ayu-dark.css";
17+
import "codemirror/theme/ayu-mirage.css";
18+
import "codemirror/theme/base16-dark.css";
19+
import "codemirror/theme/base16-light.css";
20+
import "codemirror/theme/bespin.css";
21+
import "codemirror/theme/blackboard.css";
22+
import "codemirror/theme/cobalt.css";
23+
import "codemirror/theme/colorforth.css";
24+
import "codemirror/theme/darcula.css";
25+
import "codemirror/theme/dracula.css";
26+
import "codemirror/theme/duotone-dark.css";
27+
import "codemirror/theme/duotone-light.css";
28+
import "codemirror/theme/eclipse.css";
29+
import "codemirror/theme/elegant.css";
30+
import "codemirror/theme/erlang-dark.css";
31+
import "codemirror/theme/gruvbox-dark.css";
32+
import "codemirror/theme/hopscotch.css";
33+
import "codemirror/theme/icecoder.css";
34+
import "codemirror/theme/idea.css";
35+
import "codemirror/theme/isotope.css";
36+
import "codemirror/theme/juejin.css";
37+
import "codemirror/theme/lesser-dark.css";
38+
import "codemirror/theme/liquibyte.css";
39+
import "codemirror/theme/lucario.css";
40+
import "codemirror/theme/material.css";
41+
import "codemirror/theme/material-darker.css";
42+
import "codemirror/theme/material-palenight.css";
43+
import "codemirror/theme/material-ocean.css";
44+
import "codemirror/theme/mbo.css";
45+
import "codemirror/theme/mdn-like.css";
46+
import "codemirror/theme/midnight.css";
47+
import "codemirror/theme/monokai.css";
48+
import "codemirror/theme/moxer.css";
49+
import "codemirror/theme/neat.css";
50+
import "codemirror/theme/neo.css";
51+
import "codemirror/theme/night.css";
52+
import "codemirror/theme/nord.css";
53+
import "codemirror/theme/oceanic-next.css";
54+
import "codemirror/theme/panda-syntax.css";
55+
import "codemirror/theme/paraiso-dark.css";
56+
import "codemirror/theme/paraiso-light.css";
57+
import "codemirror/theme/pastel-on-dark.css";
58+
import "codemirror/theme/railscasts.css";
59+
import "codemirror/theme/rubyblue.css";
60+
import "codemirror/theme/seti.css";
61+
import "codemirror/theme/shadowfox.css";
62+
import "codemirror/theme/solarized.css";
63+
import "codemirror/theme/the-matrix.css";
64+
import "codemirror/theme/tomorrow-night-bright.css";
65+
import "codemirror/theme/tomorrow-night-eighties.css";
66+
import "codemirror/theme/ttcn.css";
67+
import "codemirror/theme/twilight.css";
68+
import "codemirror/theme/vibrant-ink.css";
69+
import "codemirror/theme/xq-dark.css";
70+
import "codemirror/theme/xq-light.css";
71+
import "codemirror/theme/yeti.css";
72+
import "codemirror/theme/yonce.css";
73+
import "codemirror/theme/zenburn.css";
7474

7575
// modes
76-
import 'codemirror/mode/clike/clike';
77-
import 'codemirror/mode/css/css';
78-
import 'codemirror/mode/dart/dart';
79-
import 'codemirror/mode/django/django';
80-
import 'codemirror/mode/dockerfile/dockerfile';
81-
import 'codemirror/mode/go/go';
82-
import 'codemirror/mode/htmlmixed/htmlmixed';
83-
import 'codemirror/mode/javascript/javascript';
84-
import 'codemirror/mode/jsx/jsx';
85-
import 'codemirror/mode/markdown/markdown';
86-
import 'codemirror/mode/php/php';
87-
import 'codemirror/mode/python/python';
88-
import 'codemirror/mode/r/r';
89-
import 'codemirror/mode/rust/rust';
90-
import 'codemirror/mode/ruby/ruby';
91-
import 'codemirror/mode/sass/sass';
92-
import 'codemirror/mode/shell/shell';
93-
import 'codemirror/mode/sql/sql';
94-
import 'codemirror/mode/swift/swift';
95-
import 'codemirror/mode/xml/xml';
96-
import 'codemirror/mode/yaml/yaml';
76+
import "codemirror/mode/clike/clike";
77+
import "codemirror/mode/css/css";
78+
import "codemirror/mode/dart/dart";
79+
import "codemirror/mode/django/django";
80+
import "codemirror/mode/dockerfile/dockerfile";
81+
import "codemirror/mode/go/go";
82+
import "codemirror/mode/htmlmixed/htmlmixed";
83+
import "codemirror/mode/javascript/javascript";
84+
import "codemirror/mode/jsx/jsx";
85+
import "codemirror/mode/markdown/markdown";
86+
import "codemirror/mode/php/php";
87+
import "codemirror/mode/python/python";
88+
import "codemirror/mode/r/r";
89+
import "codemirror/mode/rust/rust";
90+
import "codemirror/mode/ruby/ruby";
91+
import "codemirror/mode/sass/sass";
92+
import "codemirror/mode/shell/shell";
93+
import "codemirror/mode/sql/sql";
94+
import "codemirror/mode/swift/swift";
95+
import "codemirror/mode/xml/xml";
96+
import "codemirror/mode/yaml/yaml";
9797

9898
// features
99-
import 'codemirror/addon/edit/closetag';
100-
import 'codemirror/addon/edit/closebrackets';
101-
import 'codemirror/addon/scroll/simplescrollbars.css';
99+
import "codemirror/addon/edit/closetag";
100+
import "codemirror/addon/edit/closebrackets";
101+
import "codemirror/addon/scroll/simplescrollbars.css";
102102

103103
//search
104-
import 'codemirror/addon/search/search.js';
105-
import 'codemirror/addon/search/searchcursor.js';
106-
import 'codemirror/addon/search/jump-to-line.js';
107-
import 'codemirror/addon/dialog/dialog.js';
108-
import 'codemirror/addon/dialog/dialog.css';
104+
import "codemirror/addon/search/search.js";
105+
import "codemirror/addon/search/searchcursor.js";
106+
import "codemirror/addon/search/jump-to-line.js";
107+
import "codemirror/addon/dialog/dialog.js";
108+
import "codemirror/addon/dialog/dialog.css";
109109

110-
const Editor = ({socketRef, roomId, onCodeChange}) => {
110+
const Editor = ({ socketRef, roomId, onCodeChange }) => {
111+
const editorRef = useRef(null);
112+
const lang = useRecoilValue(language);
113+
const editorTheme = useRecoilValue(cmtheme);
111114

112-
const editorRef = useRef(null);
113-
const lang = useRecoilValue(language);
114-
const editorTheme = useRecoilValue(cmtheme);
115-
116-
useEffect(() => {
117-
async function init() {
118-
editorRef.current = Codemirror.fromTextArea(
119-
document.getElementById('realtimeEditor'),
120-
{
121-
mode: {name: lang},
122-
theme: editorTheme,
123-
autoCloseTags: true,
124-
autoCloseBrackets: true,
125-
lineNumbers: true,
126-
}
127-
);
128-
129-
editorRef.current.on('change', (instance, changes) => {
130-
const {origin} = changes;
131-
const code = instance.getValue();
132-
onCodeChange(code);
133-
if (origin !== 'setValue') {
134-
socketRef.current.emit(ACTIONS.CODE_CHANGE, {
135-
roomId,
136-
code,
137-
});
138-
}
139-
});
115+
useEffect(() => {
116+
async function init() {
117+
editorRef.current = Codemirror.fromTextArea(
118+
document.getElementById("realtimeEditor"),
119+
{
120+
mode: { name: lang },
121+
theme: editorTheme,
122+
autoCloseTags: true,
123+
autoCloseBrackets: true,
124+
lineNumbers: true,
125+
}
126+
);
140127

128+
editorRef.current.on("change", (instance, changes) => {
129+
const { origin } = changes;
130+
const code = instance.getValue();
131+
console.log("main:editor: ", code);
132+
onCodeChange(code);
133+
if (origin !== "setValue") {
134+
socketRef.current.emit(ACTIONS.CODE_CHANGE, {
135+
roomId,
136+
code,
137+
});
141138
}
142-
init();
143-
}, [lang]);
139+
});
140+
}
141+
init();
142+
}, [lang]);
143+
144+
useEffect(() => {
145+
if (editorRef.current) {
146+
editorRef.current.setOption("theme", editorTheme);
147+
}
148+
}, [editorTheme]);
144149

145-
useEffect(() => {
146-
if (socketRef.current) {
147-
socketRef.current.on(ACTIONS.CODE_CHANGE, ({code}) => {
148-
if (code !== null) {
149-
editorRef.current.setValue(code);
150-
}
151-
});
150+
useEffect(() => {
151+
if (socketRef.current) {
152+
socketRef.current.on(ACTIONS.CODE_CHANGE, ({ code }) => {
153+
if (code !== null) {
154+
editorRef.current.setValue(code);
152155
}
156+
});
157+
}
153158

154-
return () => {
155-
socketRef.current.off(ACTIONS.CODE_CHANGE);
156-
};
157-
}, [socketRef.current]);
159+
return () => {
160+
socketRef.current.off(ACTIONS.CODE_CHANGE);
161+
};
162+
}, [socketRef.current]);
158163

159-
return (
160-
<textarea id="realtimeEditor"></textarea>
161-
);
164+
return <textarea id="realtimeEditor"></textarea>;
162165
};
163166

164-
export default Editor;
167+
export default Editor;

0 commit comments

Comments
 (0)