Skip to content

Commit 7206be9

Browse files
CompuIvesCompuIves
authored
Live rewrite (codesandbox#1403)
1 parent a25bfd6 commit 7206be9

File tree

28 files changed

+493
-500
lines changed

28 files changed

+493
-500
lines changed

‎packages/app/src/app/components/CodeEditor/VSCode/MonacoReactComponent.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,7 @@ class MonacoEditor extends React.PureComponent {
159159
textFileService,
160160
editorPart: EditorPart,
161161
editorService,
162+
codeEditorService,
162163
};
163164
if (process.env.NODE_ENV === 'development') {
164165
// eslint-disable-next-line

‎packages/app/src/app/components/CodeEditor/VSCode/index.js‎

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
188188
this.currentDirectoryShortid = this.currentModule.directoryShortid;
189189

190190
const editor = this.editor.getActiveCodeEditor();
191-
if (editor && editor.getValue() === (this.currentModule.code || '')) {
191+
if (editor && editor.getValue(1) === (this.currentModule.code || '')) {
192192
const model = editor.model;
193193
const newPath = getModulePath(
194194
this.sandbox.modules,
@@ -229,7 +229,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
229229
provideDocumentFormattingEdits = (model, options, token) =>
230230
prettify(
231231
model.uri.fsPath,
232-
() => model.getValue(),
232+
() => model.getValue(1),
233233
this.getPrettierConfig(),
234234
() => false,
235235
token
@@ -327,7 +327,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
327327
this.handleChange(module.shortid, module.title);
328328
} catch (err) {
329329
if (process.env.NODE_ENV === 'development') {
330-
console.error('catched', err);
330+
console.error('caught', err);
331331
}
332332
}
333333
}
@@ -561,12 +561,6 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
561561
dependencies: $PropertyType<Props, 'dependencies'>
562562
): Promise<null> =>
563563
new Promise(resolve => {
564-
if (this.modelContentChangedListener) {
565-
this.modelContentChangedListener.dispose();
566-
}
567-
if (this.modelSelectionListener) {
568-
this.modelSelectionListener.dispose();
569-
}
570564
this.sandbox = newSandbox;
571565
this.currentModule = newCurrentModule;
572566
this.dependencies = dependencies;
@@ -653,12 +647,24 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
653647
Object.keys(operationsJSON).forEach(moduleShortid => {
654648
const operation = TextOperation.fromJSON(operationsJSON[moduleShortid]);
655649

656-
if (moduleShortid !== this.currentModule.shortid) {
657-
// Apply the code to the current module code itself
658-
const module = this.sandbox.modules.find(
659-
m => m.shortid === moduleShortid
660-
);
650+
const moduleId = this.sandbox.modules.find(
651+
m => m.shortid === moduleShortid
652+
).id;
653+
654+
const modulePath =
655+
'/sandbox' +
656+
getModulePath(this.sandbox.modules, this.sandbox.directories, moduleId);
657+
658+
const modelEditor = this.editor.editorService.editors.find(
659+
editor => editor.resource && editor.resource.path === modulePath
660+
);
661+
662+
// Apply the code to the current module code itself
663+
const module = this.sandbox.modules.find(
664+
m => m.shortid === moduleShortid
665+
);
661666

667+
if (!modelEditor) {
662668
if (!module) {
663669
return;
664670
}
@@ -671,7 +677,19 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
671677
}
672678

673679
this.liveOperationCode = '';
674-
this.applyOperationToModel(operation);
680+
681+
modelEditor.textModelReference.then(model => {
682+
this.applyOperationToModel(
683+
operation,
684+
false,
685+
model.object.textEditorModel
686+
);
687+
688+
this.props.onChange(
689+
model.object.textEditorModel.getValue(1),
690+
module.shortid
691+
);
692+
});
675693
});
676694
};
677695

@@ -1186,9 +1204,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
11861204
const activeEditor = this.editor.getActiveCodeEditor();
11871205
if (!activeEditor) return '';
11881206

1189-
return activeEditor.getValue({
1190-
lineEnding: '\n',
1191-
});
1207+
return activeEditor.getValue(1);
11921208
};
11931209

11941210
handleSaveCode = async () => {

‎packages/app/src/app/pages/Sandbox/Editor/Content/index.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -386,8 +386,13 @@ class EditorPreview extends React.Component<Props, State> {
386386
const template = getTemplateDefinition(sandbox.template);
387387

388388
const isReadOnly = () => {
389-
if (store.live.isCurrentEditor) {
390-
return false;
389+
if (store.live.isLive) {
390+
if (
391+
!store.live.isCurrentEditor ||
392+
(store.live.roomInfo && store.live.roomInfo.ownerIds.length === 0)
393+
) {
394+
return true;
395+
}
391396
}
392397

393398
if (template.isServer) {
@@ -396,7 +401,7 @@ class EditorPreview extends React.Component<Props, State> {
396401
}
397402
}
398403

399-
return store.live.isLive;
404+
return false;
400405
};
401406

402407
return (

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Chat/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@ class Chat extends React.Component {
6161
render() {
6262
const { store } = this.props;
6363
const { messages, users } = store.live.roomInfo.chat;
64-
const currentUserId = store.user.id;
65-
const usersMetadata = store.live.roomInfo.usersMetadata;
64+
const currentUserId = store.live.liveUserId;
65+
const roomInfoUsers = store.live.roomInfo.users;
6666

6767
return (
6868
<Container
@@ -73,7 +73,7 @@ class Chat extends React.Component {
7373
<Messages>
7474
{messages.length > 0 ? (
7575
sortBy(takeRight(messages, 100), 'date').map((message, i) => {
76-
const metadata = usersMetadata.get(message.userId);
76+
const metadata = roomInfoUsers.find(u => u.id === message.userId);
7777
const color = metadata
7878
? `rgb(${metadata.color[0]}, ${metadata.color[1]}, ${
7979
metadata.color[2]

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/elements.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,10 @@ export const Description = styled.div`
198198
props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
199199
`;
200200

201+
export const ErrorDescription = styled(Description)`
202+
color: ${props => props.theme.red};
203+
`;
204+
201205
export const VersionContainer = styled.div`
202206
display: inline-flex;
203207
align-items: center;

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveButton.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,19 @@ const Button = styled.button`
3131
margin-right: 0.25rem;
3232
}
3333
34-
&:hover {
35-
background-color: #fd2439fa;
36-
}
34+
${props =>
35+
props.disable
36+
? css`
37+
pointer-events: none;
38+
background-color: rgba(0, 0, 0, 0.3);
39+
border-color: rgba(0, 0, 0, 0.2);
40+
color: rgba(255, 255, 255, 0.7);
41+
`
42+
: css`
43+
&:hover {
44+
background-color: #fd2439fa;
45+
}
46+
`};
3747
`;
3848

3949
const LoadingDiv = styled.div`
@@ -82,6 +92,7 @@ export default class LiveButton extends React.PureComponent {
8292
const {
8393
onClick,
8494
isLoading,
95+
disable,
8596
showIcon = true,
8697
message = 'Go Live',
8798
} = this.props;
@@ -92,6 +103,7 @@ export default class LiveButton extends React.PureComponent {
92103

93104
return (
94105
<Button
106+
disable={disable}
95107
onMouseEnter={this.startHovering}
96108
onMouseLeave={this.stopHovering}
97109
onClick={onClick}

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo.js‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import Tooltip from 'common/components/Tooltip';
1313

1414
import AddIcon from 'react-icons/lib/md/add';
1515
import RemoveIcon from 'react-icons/lib/md/remove';
16-
import FollowIcon from 'react-icons/lib/ti/user-add';
17-
import UnFollowIcon from 'react-icons/lib/ti/user-delete';
16+
import FollowIcon from 'react-icons/lib/io/eye';
17+
import UnFollowIcon from 'react-icons/lib/io/eye-disabled';
1818

1919
import User from './User';
2020
import Countdown from './Countdown';
@@ -307,13 +307,15 @@ class LiveInfo extends React.Component {
307307
{followingUserId === owner.id ? (
308308
<Tooltip title="Stop following">
309309
<UnFollowIcon
310-
onClick={() => setFollowing({ userId: null })}
310+
onClick={() => setFollowing({ liveUserId: null })}
311311
/>
312312
</Tooltip>
313313
) : (
314314
<Tooltip title="Follow along">
315315
<FollowIcon
316-
onClick={() => setFollowing({ userId: owner.id })}
316+
onClick={() =>
317+
setFollowing({ liveUserId: owner.id })
318+
}
317319
/>
318320
</Tooltip>
319321
)}
@@ -345,14 +347,16 @@ class LiveInfo extends React.Component {
345347
{followingUserId === user.id ? (
346348
<Tooltip title="Stop following">
347349
<UnFollowIcon
348-
onClick={() => setFollowing({ userId: null })}
350+
onClick={() =>
351+
setFollowing({ liveUserId: null })
352+
}
349353
/>
350354
</Tooltip>
351355
) : (
352356
<Tooltip title="Follow along">
353357
<FollowIcon
354358
onClick={() =>
355-
setFollowing({ userId: user.id })
359+
setFollowing({ liveUserId: user.id })
356360
}
357361
/>
358362
</Tooltip>
@@ -365,7 +369,7 @@ class LiveInfo extends React.Component {
365369
<Tooltip title={'Make spectator'}>
366370
<RemoveIcon
367371
onClick={() =>
368-
removeEditor({ userId: user.id })
372+
removeEditor({ liveUserId: user.id })
369373
}
370374
/>
371375
</Tooltip>
@@ -399,14 +403,16 @@ class LiveInfo extends React.Component {
399403
{followingUserId === user.id ? (
400404
<Tooltip title="Stop following">
401405
<UnFollowIcon
402-
onClick={() => setFollowing({ userId: null })}
406+
onClick={() =>
407+
setFollowing({ liveUserId: null })
408+
}
403409
/>
404410
</Tooltip>
405411
) : (
406412
<Tooltip title="Follow along">
407413
<FollowIcon
408414
onClick={() =>
409-
setFollowing({ userId: user.id })
415+
setFollowing({ liveUserId: user.id })
410416
}
411417
/>
412418
</Tooltip>
@@ -418,7 +424,9 @@ class LiveInfo extends React.Component {
418424
<IconContainer style={{ marginLeft: '0.25rem' }}>
419425
<Tooltip title={'Make editor'}>
420426
<AddIcon
421-
onClick={() => addEditor({ userId: user.id })}
427+
onClick={() =>
428+
addEditor({ liveUserId: user.id })
429+
}
422430
/>
423431
</Tooltip>
424432
</IconContainer>

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/User.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,8 @@ class User extends React.Component {
4646
render() {
4747
const { user, type, sideView, roomInfo, currentUserId } = this.props;
4848

49-
const metaData = roomInfo.usersMetadata.get(user.id);
50-
const [r, g, b] = metaData
51-
? roomInfo.usersMetadata.get(user.id).color
52-
: [0, 0, 0];
49+
const metaData = roomInfo.users.find(u => u.id === user.id);
50+
const [r, g, b] = metaData ? metaData.color : [0, 0, 0];
5351

5452
const isCurrentUser = user.id === currentUserId;
5553

0 commit comments

Comments
 (0)