Allow pluggable editor surfaces for play #19
Comments
|
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.
|
|
@rgbkrk would you like me to just switch this to monaco, or make it an option of some form between monaco / codemirror / textarea? |
|
I spent a bunch of time trying to get https://github.com/superRaytin/react-monaco-editor to work. Currently stymied by: Which I guess is due to Monaco being in TypeScript? Unsure. |
|
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 |
|
Last week has seen movement in the monaco packaging space, apparently!
react-monaco-editor/react-monaco-editor#108 has more info
and links, and is possibly the 'right' way to go long term?
…On Tue, Apr 3, 2018 at 6:20 AM, Kyle Kelley ***@***.***> wrote:
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 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.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<https://github.com/nteract/nteract/issues/2714#issuecomment-378247402>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAB23iFTd6m8mKQvKUnjCmcDdi959xvQks5tk3cqgaJpZM4TA4hX>
.
--
Yuvi Panda T
http://yuvi.in/blog
|
|
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. |
|
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.
Thank you! |
|
I'm gonna go ahead and transfer this to the new nteract/play repo. |
I'd love to be able to configure using Monaco or even just a TextArea for use as input with Play. This is important for accessibility reasons - Monaco is far more accessible than CodeMirror, and even Textarea is sometimes desirable.
@rgbkrk showed me how to do this, and it doesn't look too difficult.
The text was updated successfully, but these errors were encountered: