Skip to content

Commit 8369491

Browse files
christianalfonichristianalfoni
committed
Fix embed
1 parent 69f7427 commit 8369491

File tree

6 files changed

+257
-52
lines changed

6 files changed

+257
-52
lines changed

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,10 @@ class MonacoEditor extends React.PureComponent {
3535
}
3636

3737
// eslint-disable-next-line global-require
38-
require('app/overmind/effects/vscode/vscode-script-loader').default(false, [
39-
'vs/editor/editor.main',
40-
])(() => {
38+
require('app/overmind/effects/vscode/vscode-script-loader').default(
39+
['vs/editor/editor.main'],
40+
false
41+
)(() => {
4142
this.initMonaco();
4243
});
4344
};

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

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,41 @@
1-
import * as React from 'react';
2-
import { TextOperation } from 'ot';
3-
import { debounce } from 'lodash-es';
4-
import { join, dirname } from 'path';
5-
import { withTheme } from 'styled-components';
6-
import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
7-
import { listen, dispatch, actions } from 'codesandbox-api';
1+
import { dirname, join } from 'path';
82

3+
import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
94
import getTemplate from '@codesandbox/common/lib/templates';
105
import type {
6+
Directory,
117
Module,
12-
Sandbox,
13-
ModuleError,
148
ModuleCorrection,
15-
Directory,
9+
ModuleError,
10+
Sandbox,
1611
} from '@codesandbox/common/lib/types';
17-
import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
18-
1912
import delay from '@codesandbox/common/lib/utils/delay';
20-
13+
import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
14+
import { actions, dispatch, listen } from 'codesandbox-api';
15+
import { debounce } from 'lodash-es';
16+
import { TextOperation } from 'ot';
17+
import * as React from 'react';
18+
import { withTheme } from 'styled-components';
2119
/* eslint-disable import/no-webpack-loader-syntax, import/default */
2220
import LinterWorker from 'worker-loader?publicPath=/&name=monaco-linter.[hash:8].worker.js!./workers/linter';
2321
import TypingsFetcherWorker from 'worker-loader?publicPath=/&name=monaco-typings-ata.[hash:8].worker.js!./workers/fetch-dependency-typings';
24-
/* eslint-enable import/no-webpack-loader-syntax, import/default */
2522

26-
import eventToTransform from './event-to-transform';
27-
import MonacoEditorComponent from './MonacoReactComponent';
2823
import FuzzySearch from '../FuzzySearch';
29-
import { Container, CodeContainer } from './elements';
24+
import type { Editor, Props } from '../types';
3025
import defineTheme from './define-theme';
31-
import getSettings from './settings';
32-
33-
import type { Props, Editor } from '../types';
34-
import getMode from './mode';
26+
import { CodeContainer, Container } from './elements';
27+
import eventToTransform from './event-to-transform';
3528
import { liftOff } from './grammars/configure-tokenizer';
29+
import { updateUserSelections } from './live-decorations';
30+
import getMode from './mode';
3631
import {
37-
lineAndColumnToIndex,
3832
indexToLineAndColumn,
33+
lineAndColumnToIndex,
3934
} from './monaco-index-converter';
40-
import { updateUserSelections } from './live-decorations';
35+
import MonacoEditorComponent from './MonacoReactComponent';
36+
import getSettings from './settings';
37+
38+
/* eslint-enable import/no-webpack-loader-syntax, import/default */
4139

4240
type State = {
4341
fuzzySearchEnabled: boolean,

‎packages/app/src/app/components/CodeEditor/index.tsx‎

Lines changed: 140 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,63 @@
1+
import Centered from '@codesandbox/common/lib/components/flex/Centered';
2+
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
13
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
4+
import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
25
import getDefinition from '@codesandbox/common/lib/templates';
36
import getUI from '@codesandbox/common/lib/templates/configuration/ui';
7+
import { Sandbox } from '@codesandbox/common/lib/types';
8+
import isImage from '@codesandbox/common/lib/utils/is-image';
9+
import { SubTitle } from 'app/components/SubTitle';
10+
import { Title } from 'app/components/Title';
11+
import Loadable from 'app/utils/Loadable';
412
import React from 'react';
513
import QuestionIcon from 'react-icons/lib/go/question';
614
import UIIcon from 'react-icons/lib/md/dvr';
715

16+
import { Configuration } from './Configuration';
817
import { Icon, Icons } from './elements';
18+
import { ImageViewer } from './ImageViewer';
19+
import MonacoDiff from './MonacoDiff';
920
import { Props } from './types'; // eslint-disable-line
1021
import { VSCode } from './VSCode';
1122

23+
const CodeMirror = Loadable(() =>
24+
import(/* webpackChunkName: 'codemirror-editor' */ './CodeMirror')
25+
);
26+
27+
const Monaco = Loadable(() =>
28+
import(/* webpackChunkName: 'codemirror-editor' */ './Monaco')
29+
);
30+
31+
const getDependencies = (sandbox: Sandbox): { [key: string]: string } => {
32+
const packageJSON = sandbox.modules.find(
33+
m => m.title === 'package.json' && m.directoryShortid == null
34+
);
35+
36+
if (packageJSON != null) {
37+
try {
38+
const { dependencies = {}, devDependencies = {} } = JSON.parse(
39+
packageJSON.code || ''
40+
);
41+
42+
const usedDevDependencies = {};
43+
Object.keys(devDependencies).forEach(d => {
44+
if (d.startsWith('@types')) {
45+
usedDevDependencies[d] = devDependencies[d];
46+
}
47+
});
48+
49+
return { ...dependencies, ...usedDevDependencies };
50+
} catch (e) {
51+
console.error(e);
52+
return null;
53+
}
54+
} else {
55+
return typeof sandbox.npmDependencies.toJS === 'function'
56+
? (sandbox.npmDependencies as any).toJS()
57+
: sandbox.npmDependencies;
58+
}
59+
};
60+
1261
type State = {
1362
showConfigUI: boolean;
1463
};
@@ -31,12 +80,100 @@ export class CodeEditor extends React.PureComponent<
3180
render() {
3281
const { props } = this;
3382

34-
const { isModuleSynced, sandbox, currentModule: module, settings } = props;
83+
const {
84+
isModuleSynced,
85+
currentTab,
86+
sandbox,
87+
currentModule: module,
88+
settings,
89+
} = props;
90+
91+
if (currentTab && currentTab.type === 'DIFF') {
92+
return (
93+
<div
94+
style={{
95+
height: props.height || '100%',
96+
width: props.width || '100%',
97+
position: 'absolute',
98+
top: 0,
99+
left: 0,
100+
right: 0,
101+
bottom: 0,
102+
}}
103+
>
104+
<MonacoDiff
105+
originalCode={currentTab.codeA}
106+
modifiedCode={currentTab.codeB}
107+
title={currentTab.fileTitle}
108+
{...props}
109+
/>
110+
</div>
111+
);
112+
}
113+
114+
const dependencies = getDependencies(sandbox);
35115

36116
const template = getDefinition(sandbox.template);
37-
const modulePath = module.path;
117+
const modulePath = getModulePath(
118+
sandbox.modules,
119+
sandbox.directories,
120+
module.id
121+
);
38122
const config = template.configurationFiles[modulePath];
39123

124+
if (
125+
!settings.experimentVSCode &&
126+
config &&
127+
getUI(config.type) &&
128+
this.state.showConfigUI
129+
) {
130+
return (
131+
<Configuration
132+
{...props}
133+
dependencies={dependencies}
134+
config={config}
135+
toggleConfigUI={this.toggleConfigUI}
136+
/>
137+
);
138+
}
139+
140+
if (!settings.experimentVSCode && module.isBinary) {
141+
if (isImage(module.title)) {
142+
return <ImageViewer {...props} dependencies={dependencies} />;
143+
}
144+
145+
return (
146+
<Margin
147+
style={{
148+
overflow: 'auto',
149+
height: props.height || '100%',
150+
width: props.width || '100%',
151+
}}
152+
top={2}
153+
>
154+
<Centered horizontal vertical>
155+
<Title>This file is too big to edit</Title>
156+
<SubTitle>
157+
We will add support for this as soon as possible.
158+
</SubTitle>
159+
160+
<a href={module.code} target="_blank" rel="noreferrer noopener">
161+
Open file externally
162+
</a>
163+
</Centered>
164+
</Margin>
165+
);
166+
}
167+
168+
let Editor =
169+
settings.codeMirror && !props.isLive
170+
? ((CodeMirror as unknown) as React.ComponentClass<Props>)
171+
: ((Monaco as unknown) as React.ComponentClass<Props>);
172+
173+
if (settings.experimentVSCode) {
174+
Editor = VSCode as React.ComponentClass<Props>;
175+
}
176+
40177
return (
41178
<div
42179
style={{
@@ -84,7 +221,7 @@ export class CodeEditor extends React.PureComponent<
84221
)}
85222
</Icons>
86223
))}
87-
<VSCode />
224+
<Editor {...props} dependencies={dependencies} />
88225
</div>
89226
);
90227
}

‎packages/app/src/app/overmind/effects/vscode/metadata.ts‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,85 @@ const VSCODE_METADATA = {
1212
PLUGINS: [],
1313
};
1414

15+
const MONACO_METADATA = {
16+
CORE: {
17+
paths: {
18+
src: '/public/14/vs',
19+
'npm/dev': 'node_modules/monaco-editor-core/dev/vs',
20+
'npm/min': 'node_modules/monaco-editor-core/min/vs',
21+
built: '/vscode/out-monaco-editor-core/min/vs',
22+
releaseDev: 'release/dev/vs',
23+
releaseMin: 'release/min/vs',
24+
},
25+
},
26+
PLUGINS: [
27+
{
28+
name: 'monaco-typescript',
29+
contrib: 'vs/language/typescript/monaco.contribution',
30+
modulePrefix: 'vs/language/typescript',
31+
thirdPartyNotices: 'node_modules/monaco-typescript/ThirdPartyNotices.txt',
32+
paths: {
33+
src: '/public/14/vs/language/typescript',
34+
'npm/dev': '../monaco-typescript/release/dev',
35+
'npm/min': '/public/14/vs/language/typescript',
36+
esm: '../monaco-typescript/release/esm',
37+
},
38+
},
39+
{
40+
name: 'monaco-css',
41+
contrib: 'vs/language/css/monaco.contribution',
42+
modulePrefix: 'vs/language/css',
43+
paths: {
44+
src: '/public/14/vs/language/css',
45+
'npm/dev': '../monaco-css/release/dev',
46+
'npm/min': '/public/14/vs/language/css',
47+
esm: 'node_modules/monaco-css/release/esm',
48+
},
49+
},
50+
{
51+
name: 'monaco-json',
52+
contrib: 'vs/language/json/monaco.contribution',
53+
modulePrefix: 'vs/language/json',
54+
paths: {
55+
src: '/public/14/vs/language/json',
56+
'npm/dev': 'node_modules/monaco-json/release/dev',
57+
'npm/min': '/public/14/vs/language/json',
58+
esm: 'node_modules/monaco-json/release/esm',
59+
},
60+
},
61+
{
62+
name: 'monaco-html',
63+
contrib: 'vs/language/html/monaco.contribution',
64+
modulePrefix: 'vs/language/html',
65+
thirdPartyNotices: 'node_modules/monaco-html/ThirdPartyNotices.txt',
66+
paths: {
67+
src: '/public/14/vs/language/html',
68+
'npm/dev': 'node_modules/monaco-html/release/dev',
69+
'npm/min': '/public/14/vs/language/html',
70+
esm: 'node_modules/monaco-html/release/esm',
71+
},
72+
},
73+
{
74+
name: 'monaco-languages',
75+
contrib: 'vs/basic-languages/monaco.contribution',
76+
modulePrefix: 'vs/basic-languages',
77+
thirdPartyNotices: 'node_modules/monaco-languages/ThirdPartyNotices.txt',
78+
paths: {
79+
src: '/public/14/vs/basic-languages',
80+
'npm/dev': '../monaco-languages/release/dev',
81+
'npm/min': '/public/14/vs/basic-languages',
82+
esm: 'node_modules/monaco-languages/release/esm',
83+
},
84+
},
85+
],
86+
};
87+
1588
if (typeof exports !== 'undefined') {
1689
exports.VSCODE_METADATA = VSCODE_METADATA;
90+
exports.MONACO_METADATA = MONACO_METADATA;
1791
} else {
1892
// @ts-ignore
1993
self.VSCODE_METADATA = VSCODE_METADATA;
94+
// @ts-ignore
95+
self.MONACO_METADATA = MONACO_METADATA;
2096
}

‎packages/app/src/app/overmind/effects/vscode/vscode-script-loader.ts‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -364,8 +364,8 @@ function initializeRequires() {
364364
});
365365
}
366366

367-
export default function(requiredModule?: string[]) {
368-
var METADATA = VSCODE_METADATA;
367+
export default function(requiredModule?: string[], isVSCode = true) {
368+
var METADATA = isVSCode ? VSCODE_METADATA : MONACO_METADATA;
369369
var IS_FILE_PROTOCOL = global.location.protocol === 'file:';
370370
var DIRNAME = null;
371371
if (IS_FILE_PROTOCOL) {
@@ -632,7 +632,20 @@ export default function(requiredModule?: string[]) {
632632

633633
if (requiredModule) {
634634
global.require(requiredModule, function(a) {
635-
callback();
635+
if (!isVSCode && !RESOLVED_CORE.isRelease()) {
636+
// At this point we've loaded the monaco-editor-core
637+
global.require(
638+
RESOLVED_PLUGINS.map(function(plugin) {
639+
return plugin.contrib;
640+
}),
641+
function() {
642+
// At this point we've loaded all the plugins
643+
callback();
644+
}
645+
);
646+
} else {
647+
callback();
648+
}
636649
});
637650
} else {
638651
callback();

0 commit comments

Comments
 (0)