Code editor - react-code-editor

Development PatternFly-React
#1

I’ve noticed that the react-code-editor is in beta still, but has anyone gotten it to support shift+tab to un-indent?

I noticed this first on my own application, but I just tested it out in chrome on PatternFly 4 • Code editor and it too does not seem to support the un-indenting via shift+tab. However, this does work on the live demo on Monaco Editor

I’m super new to react, and rusty as hell in JS, and still figuring out all the new ES6+ syntax so reading the source to see if it’s just a container issue. like perhaps it’s not binding to a element correctly and it’s not able to prevent the default tabbing behavior…

All guessing out loud here. Any help would be appreciated!

#2

Hi @RobertDeRose!

That is an excellent question.
It is true that we have actually overridden the PatternFly Code Editor so that Shift + Tab actually moves browser focus out of the Code editor. This was done so that people can navigate in the code editor, out of the code editor, and use the code editor completely using their keyboard.

It’s worth nothing that Shift + Tab is a standard keyboard interaction for moving browser focus ‘backwards’, which is why PatternFly implemented the override. I don’t think we had considered that it’d undo the un-indenting feature in monaco… it’s an interesting consideration…

#3

@nicolethoen

Thanks for the reply, so it appears this is the expected behavior for now, but might be considered in the feature.

Thanks, is there any way to disable this focus behavior in Patternfly for a single component? Like could I wrap the component in something else to disable the shift+tab override?

Once again, super new here to react and super rusty in JS and web front end work in general… :frowning:

Also, I noticed that when I go to build my app with the code-editor included, I get a lot of really large file and webpack is telling me that ts.worker.js.gz is 924 kb. And idea if there is a way to reduce some of this?

#4

@RobertDeRose it’s been a while since you sent your follow up question. I’m sorry I didn’t see it at the time.

Because of the syntax highlighting that ships with the monaco code editor when using webpack, the bundle size is very large. That is why we have it separated out from the rest of our components. There may be a possibility of modifying your webpack config to further parse out the workers you are actually planning to use to avoid loading too many workers for languages you’ll never need syntax highlighting for.