Comments (8)
For posterity, it takes roughly this:
diff --git a/applications/play/components/Main.js b/applications/play/components/Main.js
index c1811e11..370c9761 100644
--- a/applications/play/components/Main.js
+++ b/applications/play/components/Main.js
@@ -179,8 +179,16 @@ class Main extends React.Component<*, *> {
gitref={gitrefValue}
/>
) : null}
-
<div className="play-editor">
+ <textarea
+ value={sourceValue}
+ onChange={event => {
+ this.handleEditorChange(event.target.value);
+ }}
+ />
+ </div>
+
+ {/* <div className="play-editor">
<CodeMirrorEditor
// TODO: these should have defaultProps on the codemirror editor
cellFocused
@@ -221,7 +229,7 @@ class Main extends React.Component<*, *> {
value={sourceValue}
onChange={this.handleEditorChange}
/>
- </div>
+ </div> */}
<div className="play-outputs">
<Outputs>
@@ -240,6 +248,16 @@ class Main extends React.Component<*, *> {
--header-height: 42px;
--editor-width: 52%;
+ textarea {
+ width: 100%;
+ box-sizing: border-box;
+ font-family: "Source Code Pro", monospace;
+ font-size: 12px;
+ line-height: 22px;
+ padding: 10px;
+ border-top: 0px;
+ }
+
header {
display: flex;
justify-content: space-between;
and you'll have a working textarea that's "hooked up" to the kernel.
from play.
@rgbkrk would you like me to just switch this to monaco, or make it an option of some form between monaco / codemirror / textarea?
from play.
I spent a bunch of time trying to get https://github.com/superRaytin/react-monaco-editor to work.
Currently stymied by:
ModuleParseError: Module parse failed: Unexpected token (159:12)
You may need an appropriate loader to handle this file type.
| }
|
| assignRef = (component) => {
| this.containerElement = component;
| }
at doBuild (/home/yuvipanda/code/nteract/applications/play/node_modules/webpack/lib/NormalModule.js:303:19)
at runLoaders (/home/yuvipanda/code/nteract/applications/play/node_modules/webpack/lib/NormalModule.js:209:11)
at /home/yuvipanda/code/nteract/applications/play/node_modules/loader-runner/lib/LoaderRunner.js:370:3
at iterateNormalLoaders (/home/yuvipanda/code/nteract/applications/play/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
at Array.<anonymous> (/home/yuvipanda/code/nteract/applications/play/node_modules/loader-runner/lib/LoaderRunner.js:202:4)
at Storage.finished (/home/yuvipanda/code/nteract/applications/play/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:40:15)
at /home/yuvipanda/code/nteract/applications/play/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:77:9
at /home/yuvipanda/code/nteract/applications/play/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)
ModuleParseError: Module parse failed: Unexpected token (159:12)
You may need an appropriate loader to handle this file type.
| }
|
| assignRef = (component) => {
| this.containerElement = component;
| }
at doBuild (/home/yuvipanda/code/nteract/applications/play/node_modules/webpack/lib/NormalModule.js:303:19)
at runLoaders (/home/yuvipanda/code/nteract/applications/play/node_modules/webpack/lib/NormalModule.js:209:11)
at /home/yuvipanda/code/nteract/applications/play/node_modules/loader-runner/lib/LoaderRunner.js:370:3
at iterateNormalLoaders (/home/yuvipanda/code/nteract/applications/play/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
at Array.<anonymous> (/home/yuvipanda/code/nteract/applications/play/node_modules/loader-runner/lib/LoaderRunner.js:202:4)
at Storage.finished (/home/yuvipanda/code/nteract/applications/play/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:40:15)
at /home/yuvipanda/code/nteract/applications/play/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:77:9
at /home/yuvipanda/code/nteract/applications/play/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)
ERROR Failed to compile with 2 errors
Which I guess is due to Monaco being in TypeScript? Unsure.
I do not know what to make of the nextjs example in https://github.com/superRaytin/react-monaco-editor/tree/master/examples/nextjs. The component wrapper sets things in the window object and hardcodes a baseUrl, which make me queasy.
from play.
It looks like the wrapper component shipping non-transpiled JS in that package. We only build / transpile our own packages so to make this work we'd have to either make our webpack config / babel loader transpile that package or fork the component (or write our own).
It looks like there's another option too. In the example next config they provide, they explicitly override fs
to empty
to make their package build. You'd have to add that to the next config for play as well.
from play.
from play.
Oh nice, microsoft/monaco-editor#767 was a good read. Based on that, I'd say that we create our own wrapper component around Monaco, similar to what we have for codemirror.
from play.
This issue hasn't had any activity on it in the last 90 days. Unfortunately we don't get around to dealing with every issue that is opened. Instead of leaving issues open we're seeking to be transparent by closing issues that aren't being prioritized. If no other activity happens on this issue in one week, it will be closed.
It's more than likely that just by me posting about this, the maintainers will take a closer look at these long forgotten issues to help evaluate what to do next.
If you would like to see this issue get prioritized over others, there are multiple avenues 🗓:
- Ask how you can help with this issue 👩🏿💻👨🏻💻
- Help solve other issues the team is currently working on 👨🏾💻👩🏼💻
- Donate to nteract so we can support developers to work on these features and bugs more regularly 💰🕐
Thank you!
from play.
I'm gonna go ahead and transfer this to the new nteract/play repo.
from play.
Related Issues (20)
- [play] Set up automated builds for the play package HOT 3
- Context-sensitive welcome message for https://play.nteract.io/ ? HOT 3
- [play] query parameters and code persistence HOT 6
- [play] Kill old server after changing servers HOT 4
- [play] create test suites for play components HOT 2
- [play] ability to interrupt and kill kernels HOT 2
- [play] README HOT 2
- [play] Show an animation while server, kernel starting HOT 2
- [play] Buffer for line numbering on editor on load. HOT 2
- Allow running play as a serverextension HOT 2
- Add ability to open specific files to play HOT 1
- kill server epic doesn't exist yet to handle this.
- the server will be culled once we do a jupyter shutdown call
- for notebook leakage
- kernelStatus should be allowed to be null or undefined,
- Allow pluggable editor surfaces for play
- Review typescript config and dev instructions HOT 1
- Play code clean-up for Typescript
- Add a README
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from play.