[UI Framework] Add KuiCodeEditor as react-ace replacement/wrapper #14026

timroes · 2017-09-18T11:33:18Z

This PR adds the new KuiCodeEditor components, which should be a drop-in replacement for react-ace that we are using as a code editor in several places (e.g. the Markdown editor in the TSVB).

This PR also changes the places where react-ace is used by this component. It basically adds the keyboard accessible mode from #13339 to the react-ace editor. It also passes all props down to react-ace, so that it can be truly used as a replacement with additional accessibility functionality.

Fixes #12901

cjcenizal

This is really great!! I had a lot of minor suggestions but overall this is sweet.

What do you think of replacing the editor introduced in #13339 with this, perhaps in another PR? It will simplify the code if we only have one way of creating this code editor.

cjcenizal · 2017-09-19T20:39:25Z

ui_framework/src/components/code_editor/code_editor.js

+    }
+  }
+
+  configureAce = (ace) => {


Minor nit: can we rename this method to aceEditorRef to clarify that we're caching a ref here? Can we move it up to follow the constructor, so that the event handlers are grouped together? And can we rename the parameter to aceEditor for consistency with how this variable is referenced elsewhere within this component?

cjcenizal · 2017-09-19T20:42:42Z

ui_framework/src/components/code_editor/code_editor.js

+
+import { htmlIdGenerator, keyCodes } from '../../../services';
+
+export class KuiCodeEditor extends Component {


Can we add a propTypes declaration for onBlur, width, and height?

cjcenizal · 2017-09-19T20:44:21Z

ui_framework/src/components/code_editor/code_editor.js

+    this.idGenerator = htmlIdGenerator();
+  }
+
+  enableOverlay() {


Can we rename this stopEditing to make it clearer how this method interacts with the other parts of this component, and move it next to startEditing? And can we move this.refs.kuiCodeEditorHint.focus(); from onKeyDownAce into this method?

I did the renaming, but we cannot move the focus to it, since otherwise we would also focus the hint, when leaving the texteditor (onBlurAce) which we don't want.

Small nit, but can we move it down so that it's next to startEditing?

cjcenizal · 2017-09-19T20:49:18Z

ui_framework/src/components/code_editor/code_editor.js

+    }
+  };
+
+  onHintKeyDown = (ev) => {


Can we rename this to onKeyDownHint to keep a consistent pattern with the other event handlers?

cjcenizal · 2017-09-19T20:54:38Z

ui_framework/src/components/code_editor/code_editor.js

+          </p>
+        </div>
+        <AceEditor
+          {...this.props}


What are the specific props allowed here? I think we should extract those from props and explicitly pass them in. And then in the root element, we should pass in {...props}:

// line 63 <div className="kuiCodeEditorWrapper" style={{ width, height }} {...this.props} >

This way data-test-subj will get assigned to the root element so we can refer to it within functional tests. We'll also be able to assign things like aria-describedby and other attributes. This is a pattern we're using with other UI components in the framework.

I also thought about this, but decided against it for the following reasons (that are of course up for discussion):

AceEditor has quite some properties, that we would need to extract and pass down.

It also passes down all additional props to the ace editor itself. Especially for the mentioned aria attributes it would imho make more sense to apply them to the editor, than the wrapper element (that is never focused).

I totally see the point with the testing data-test-subj that you want most likely to be applied to the wrapper element. We have now several options:

We leave it as it is, and pass all properties to the editor, and just extract the ones we need for the wrapper element (which could also include the data-test-subj).

We pass by default all properties down to the editor, and just extract the ones we need (like width and height) and offer a specific property (e.g. wrapperProps), that you can pass arbitrary properties to the wrapper element.

We explicitly extract and pass all supported properties to AceEditor and all others to the wrapper (thus taking us the possibility to add additional (e.g. ARIA) attributes to the editor).

We explicitly extract properties for the editor, but offer an additional editorProps property, which will be assigned to the editor instead of the wrapper element.

Which way would you prefer?

I see your point! It sounds like #1 would be the simplest solution. What do you think?

Reading it again after a day, I guess I would prefer 2. at the moment. That way we just pull out what we need, but still give the user a general way of attaching any property wherever she wants (using wrapperProps for the wrapper, or just applying them directly for the editor).

Would 2 be also okay with you?

After discussion on Zoom, we've decided to go with option 1.

cjcenizal · 2017-09-19T20:56:15Z

ui_framework/doc_site/src/views/code_editor/code_editor.js

+    mode="less"
+    theme="github"
+    width="100%"
+    setOptions={{ fontSize: '14px' }}


Can we add an onBlur callback here to demonstrate this capability, too?

onBlur={window.alert('onBlur')}

cjcenizal · 2017-09-19T20:59:28Z

ui_framework/src/components/code_editor/code_editor.js

+  constructor(props) {
+    super(props);
+    this.state = {
+      hintInactive: false


Can we rename this isHintActive to convey its boolean nature and make its role a little clearer? I generally find it easier to reason about booleans if they're positive instead of negative. I think this is because it avoids double negatives like !isHintInactive.

cjcenizal · 2017-09-19T21:03:15Z

ui_framework/src/components/code_editor/code_editor.test.js

+
+  let element;
+
+  beforeEach(() => {


Can we put these tests inside another describe block, and add another test above it:

// You'll need to import this above. import { requiredProps } from '../../test/required_props'; test('is rendered', () => { const component = <KuiCodeEditor />; expect(render(component)).toMatchSnapshot(); });

You'll need to run the tests again and commit the generated snapshot.

Can you also add additional tests like this for width and height?

I wasn't sure if we should do snapshot testing here, since that would also test, that react-ace doesn't change what they render. I am not sure, whether it would be good to add snapshots test upon the code generated by a library.

Also for the required_props we would first need to look how we handle the props as discussed in the above comment.

I am not sure, whether it would be good to add snapshots test upon the code generated by a library.

I think it's OK to test library code if a component depends upon it. The test failure would be valuable because it will alert us to a change in DOM structure which would have otherwise gone unnoticed. This way, if some functional or other structure-reliant tests fail due to this change, we'll have a head's up and be able to clearly see how the structure changed. If the test failure is just noise and the change is superficial, then it's trivial to update the snapshot.

cjcenizal

Thanks for making these changes, @timroes! I responded to the open comment threads.

While testing this in the UI Framework, I also came across a minor bug with the example. It's a little difficult to see in this gif, but if you enter some input into the code editor, and then lose focus by hitting ESC or just clicking out of the editor, then the input you entered disappears. Is this because the AceEditor is a controlled component and it expects the value prop to provide its input? If so, then let's just update the example to supply this prop and update the value it contains via the onChange prop.

kimjoar

Just two minor things I saw when scanning through the code

kimjoar · 2017-09-20T20:59:26Z

ui_framework/src/components/code_editor/code_editor.js

+      isHintActive: true
+    };
+    this.idGenerator = htmlIdGenerator();
+  }


Instead of the constructor, this can just be:

export class KuiCodeEditor extends Component { state = { isHintActive: false }; idGenerator = htmlIdGenerator();

kimjoar · 2017-09-20T21:01:10Z

ui_framework/src/components/code_editor/code_editor.js

+        <div
+          className={classes}
+          id={this.idGenerator('codeEditor')}
+          ref="kuiCodeEditorHint"


Don't use string refs, use callback refs (see https://facebook.github.io/react/docs/refs-and-the-dom.html)

cjcenizal

Awesome! Had a couple small questions/suggestions, but non-blocking.

cjcenizal · 2017-09-21T19:56:28Z

ui_framework/src/components/code_editor/code_editor.js

+    }
+  };
+
+  stopEditing() {


I'd still move this down so it's after startEditing.

cjcenizal · 2017-09-21T19:56:50Z

ui_framework/src/components/code_editor/__snapshots__/code_editor.test.js.snap

+    </p>
+  </div>
+  <div
+    id="brace-editor"


Do we know why the rest of the editor doesn't get rendered here? Maybe we can use mount in the test instead of render, then call the html() method on the resulting object, and store that string as the snapshot?

kimjoar

Hm, I'm likely seeing KuiCodeEditor as a more "high-level" editor abstraction, but it just seems like just a thin wrapper here. I'd prefer an abstraction that hid ace more, but I won't hold up this PR for it.

kimjoar · 2017-09-22T12:43:28Z

ui_framework/doc_site/src/views/code_editor/code_editor.js

+        theme="github"
+        width="100%"
+        value={this.state.value}
+        onChange={(value) => this.setState({ value })}


Extract a separate method for this, see https://github.com/elastic/kibana/blob/master/style_guides/react_style_guide.md#avoid-creating-a-function-and-passing-that-as-a-property-in-render-functions

kimjoar · 2017-09-22T12:45:41Z

src/core_plugins/metrics/public/components/panel_config/markdown.js

@@ -124,7 +124,7 @@ class MarkdownPanelConfig extends Component {
            <div className="vis_editor__label">Custom CSS (supports Less)</div>
          </div>
          <div className="vis_editor__ace-editor">
-            <AceEditor
+            <KuiCodeEditor
              mode="less"
              theme="github"


Are there use-cases for specifying other themes than github? If not we should pull it into KuiCodeEditor. I'd probably rename mode to language too.

This gets back to the question on what level this abstraction should be. In the long term I would agree with you, and rename those, but for now I would just pass them through, since we are currently passing all properties just to the editor, and I think if we start renaming we should make all properties explicit again (which for this first version we decided against).

kimjoar · 2017-09-22T12:46:18Z

src/core_plugins/metrics/public/components/panel_config/markdown.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';
-import AceEditor from 'react-ace';
 import 'brace/mode/less';


Is this still needed? It feels like this should only happen within the KuiCodeEditor abstraction

Good question. If we pull this inside KuiCodeEditor which modes do we import? All; just the ones we need at the moment, and people using this with new languages, will need to change KuiCodeEditor too?

Again: I would like to provide a proper code editor at some point, where this should be cleaned up, but I guess not in this first step. (We apparently also include some modes in webpackShims...)

kimjoar · 2017-09-22T12:47:16Z

ui_framework/src/components/code_editor/__snapshots__/code_editor.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KuiCodeEditor is rendered 1`] = `"<div class=\\"kuiCodeEditorWrapper\\"><div class=\\"kuiCodeEditorKeyboardHint\\" id=\\"42\\" tabindex=\\"0\\" role=\\"button\\"><p class=\\"kuiText kuiVerticalRhythmSmall\\">Press Enter to start editing.</p><p class=\\"kuiText kuiVerticalRhythmSmall\\">When you’re done, press Escape to stop editing.</p></div><div id=\\"brace-editor\\" style=\\"width: 500px; height: 500px;\\" class=\\" ace_editor ace-tm testClass1 testClass2\\"><textarea class=\\"ace_text-input\\" wrap=\\"off\\" autocorrect=\\"off\\" autocapitalize=\\"off\\" spellcheck=\\"false\\" style=\\"opacity: 0;\\" tabindex=\\"-1\\"></textarea><div class=\\"ace_gutter\\"><div class=\\"ace_layer ace_gutter-layer ace_folding-enabled\\"></div><div class=\\"ace_gutter-active-line\\"></div></div><div class=\\"ace_scroller\\"><div class=\\"ace_content\\"><div class=\\"ace_layer ace_print-margin-layer\\"><div class=\\"ace_print-margin\\" style=\\"left: 4px; visibility: visible;\\"></div></div><div class=\\"ace_layer ace_marker-layer\\"></div><div class=\\"ace_layer ace_text-layer\\" style=\\"padding: 0px 4px;\\"></div><div class=\\"ace_layer ace_marker-layer\\"></div><div class=\\"ace_layer ace_cursor-layer ace_hidden-cursors\\"><div class=\\"ace_cursor\\"></div></div></div></div><div class=\\"ace_scrollbar ace_scrollbar-v\\" style=\\"display: none; width: 20px;\\"><div class=\\"ace_scrollbar-inner\\" style=\\"width: 20px;\\"></div></div><div class=\\"ace_scrollbar ace_scrollbar-h\\" style=\\"display: none; height: 20px;\\"><div class=\\"ace_scrollbar-inner\\" style=\\"height: 20px;\\"></div></div><div style=\\"height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;\\"><div style=\\"height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;\\"></div><div style=\\"height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;\\">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div></div></div></div>"`;


This looks really bad, and likely "impossible" to review if there are changes to the component.

And what's up with XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX?

This was done as @cjcenizal suggested to render out the whole DOM of ACE, and not just the more or less empty wrapper element. I still have mixed feelings about rendering library code in general and compare it, but I would leave the level that we test this snapshot up to your discussion :-)

Oof, I didn't realize it wasn't going to be formatted! It's not so bad when it's formatted, but then there are all the escape double-quotes, too... bah...

<div class=\\ "kuiCodeEditorWrapper\\"> <div class=\\ "kuiCodeEditorKeyboardHint\\" id=\\ "42\\" tabindex=\\ "0\\" role=\\ "button\\"> <p class=\\ "kuiText kuiVerticalRhythmSmall\\">Press Enter to start editing.</p> <p class=\\ "kuiText kuiVerticalRhythmSmall\\">When you’re done, press Escape to stop editing.</p> </div> <div id=\\ "brace-editor\\" style=\\ "width: 500px; height: 500px;\\" class=\\ " ace_editor ace-tm testClass1 testClass2\\"> <textarea class=\\ "ace_text-input\\" wrap=\\ "off\\" autocorrect=\\ "off\\" autocapitalize=\\ "off\\" spellcheck=\\ "false\\" style=\\ "opacity: 0;\\" tabindex=\\ "-1\\"></textarea> <div class=\\ "ace_gutter\\"> <div class=\\ "ace_layer ace_gutter-layer ace_folding-enabled\\"></div> <div class=\\ "ace_gutter-active-line\\"></div> </div> <div class=\\ "ace_scroller\\"> <div class=\\ "ace_content\\"> <div class=\\ "ace_layer ace_print-margin-layer\\"> <div class=\\ "ace_print-margin\\" style=\\ "left: 4px; visibility: visible;\\"></div> </div> <div class=\\ "ace_layer ace_marker-layer\\"></div> <div class=\\ "ace_layer ace_text-layer\\" style=\\ "padding: 0px 4px;\\"></div> <div class=\\ "ace_layer ace_marker-layer\\"></div> <div class=\\ "ace_layer ace_cursor-layer ace_hidden-cursors\\"> <div class=\\ "ace_cursor\\"></div> </div> </div> </div> <div class=\\ "ace_scrollbar ace_scrollbar-v\\" style=\\ "display: none; width: 20px;\\"> <div class=\\ "ace_scrollbar-inner\\" style=\\ "width: 20px;\\"></div> </div> <div class=\\ "ace_scrollbar ace_scrollbar-h\\" style=\\ "display: none; height: 20px;\\"> <div class=\\ "ace_scrollbar-inner\\" style=\\ "height: 20px;\\"></div> </div> <div style=\\ "height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;\\"> <div style=\\ "height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;\\"></div> <div style=\\ "height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;\\">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div> </div> </div> </div>

@kjbekkelund @timroes Which of these three options do you think makes the most sense? I think I'd prefer 2, but I can accept 1.

1) Use debug()

expect(mount(component).debug()).toMatchSnapshot();

Yields:

<KuiCodeEditor aria-label="aria-label" className="testClass1 testClass2" data-test-subj="test subject string"> <div className="kuiCodeEditorWrapper" style={{...}}> <div className="kuiCodeEditorKeyboardHint" id={42} tabIndex="0" role="button" onClick={[Function]} onKeyDown={[Function]}> <p className="kuiText kuiVerticalRhythmSmall"> Press Enter to start editing. </p> <p className="kuiText kuiVerticalRhythmSmall"> When you’re done, press Escape to stop editing. </p> </div> <ReactAce aria-label="aria-label" className="testClass1 testClass2" data-test-subj="test subject string" onBlur={[Function]} name="brace-editor" focus={false} mode="" theme="" height="500px" width="500px" value="" fontSize={12} showGutter={true} onChange={{...}} onPaste={{...}} onLoad={{...}} onScroll={{...}} minLines={{...}} maxLines={{...}} readOnly={false} highlightActiveLine={true} showPrintMargin={true} tabSize={4} cursorStart={1} editorProps={{...}} setOptions={{...}} wrapEnabled={false} enableBasicAutocompletion={false} enableLiveAutocompletion={false}> <div id="brace-editor" style={{...}} /> </ReactAce> </div> </KuiCodeEditor>

2) Use prettified html()

// Note that this requires the `html` dependency, which the UI Framework already uses. import html from 'html'; expect(html.prettyPrint(mount(component).html(), { indent_size: 2, unformatted: [], // Expand all tags, including spans })).toMatchSnapshot();

Yields:

<div class="kuiCodeEditorWrapper"> <div class="kuiCodeEditorKeyboardHint" id="42" tabindex="0" role="button"> <p class="kuiText kuiVerticalRhythmSmall">Press Enter to start editing.</p> <p class="kuiText kuiVerticalRhythmSmall">When you’re done, press Escape to stop editing.</p> </div> <div id="brace-editor" style="width: 500px; height: 500px;" class=" ace_editor ace-tm testClass1 testClass2"> <textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="opacity: 0;" tabindex="-1"></textarea> <div class="ace_gutter"> <div class="ace_layer ace_gutter-layer ace_folding-enabled"></div> <div class="ace_gutter-active-line"></div> </div> <div class="ace_scroller"> <div class="ace_content"> <div class="ace_layer ace_print-margin-layer"> <div class="ace_print-margin" style="left: 4px; visibility: visible;"></div> </div> <div class="ace_layer ace_marker-layer"></div> <div class="ace_layer ace_text-layer" style="padding: 0px 4px;"></div> <div class="ace_layer ace_marker-layer"></div> <div class="ace_layer ace_cursor-layer ace_hidden-cursors"> <div class="ace_cursor"></div> </div> </div> </div> <div class="ace_scrollbar ace_scrollbar-v" style="display: none; width: 20px;"> <div class="ace_scrollbar-inner" style="width: 20px;"></div> </div> <div class="ace_scrollbar ace_scrollbar-h" style="display: none; height: 20px;"> <div class="ace_scrollbar-inner" style="height: 20px;"></div> </div> <div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"> <div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"></div> <div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div> </div> </div> </div>

3) Use render(), AKA you're over-thinking it CJ

expect(render(component)).toMatchSnapshot();

Yields:

<div class="kuiCodeEditorWrapper" > <div class="kuiCodeEditorKeyboardHint" id="42" role="button" tabindex="0" > <p class="kuiText kuiVerticalRhythmSmall" > Press Enter to start editing. </p> <p class="kuiText kuiVerticalRhythmSmall" > When you’re done, press Escape to stop editing. </p> </div> <div id="brace-editor" style="width:500px;height:500px;" /> </div>

kimjoar · 2017-09-22T12:55:43Z

Ah, the initial comment specifically says "drop-in replacement" for react-ace, so this works for me. I think long-term a better abstraction would be more specific to our use-cases though. But that can be a separate PR as some point.

timroes · 2017-09-22T12:58:17Z

In the long run I would also like to abstract ACE away more, and provide a maybe also under the hood better code editor. But currently we would "just" like to stick with ACE, but have it accessible. So for now this will just be a thin wrapper, but hopefully evolve to something more in the future. Maybe with K7 :-)

kimjoar

LGTM. I'd love a better abstraction, but this is a good start.

timroes · 2017-09-22T14:15:37Z

Jenkins, test this

timroes · 2017-09-22T14:25:03Z

I created a follow-up issue for a proper KuiCodeEditor: #14119

…4026) * Create KuiCodeEditor component * Add additional tests * Add PropTypes for KuiCodeEditor * Rename hintInactive to isHintActive * Rename enableOverlay to stopEditing * Rename and move configureAce method * Rename onHintKeyDown to onKeyDownHint * Fix broken configureAce call * Add onBlur to editor example * Regroup test cases * Don't lose value in KuiCodeEditor example * Remove window.alert, due to annoying behavior when switching tabs * Remove unnecessary constructor * Replace string ref by callback ref * Add a snapshot test * Move stop editing method * Use mount to render editor during test * Extract setState into method in example

timroes · 2017-09-22T15:10:56Z

Backports:

6.x: 8f2ccc3

Tim Roes and others added 2 commits September 13, 2017 18:49

Create KuiCodeEditor component

ab63f84

Add additional tests

f5080e1

timroes added Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. review labels Sep 18, 2017

timroes requested review from simianhacker, snide and cjcenizal September 18, 2017 11:33

cjcenizal suggested changes Sep 19, 2017

View reviewed changes

timroes added 8 commits September 20, 2017 11:49

Add PropTypes for KuiCodeEditor

95196d1

Rename hintInactive to isHintActive

41eb8dc

Rename enableOverlay to stopEditing

e3dee7c

Rename and move configureAce method

eeabf3e

Rename onHintKeyDown to onKeyDownHint

2c43f57

Fix broken configureAce call

fbc72a7

Add onBlur to editor example

2053533

Regroup test cases

1d5a0cc

cjcenizal suggested changes Sep 20, 2017

View reviewed changes

kimjoar reviewed Sep 20, 2017

View reviewed changes

timroes added 5 commits September 21, 2017 17:04

Don't lose value in KuiCodeEditor example

62ee513

Remove window.alert, due to annoying behavior when switching tabs

dabc0ba

Remove unnecessary constructor

cbd2256

Replace string ref by callback ref

95152d1

Add a snapshot test

f665185

cjcenizal approved these changes Sep 21, 2017

View reviewed changes

timroes added 2 commits September 22, 2017 11:23

Move stop editing method

5a1e86e

Use mount to render editor during test

048b28c

timroes requested a review from aphelionz September 22, 2017 11:03

kimjoar reviewed Sep 22, 2017

View reviewed changes

Extract setState into method in example

a7cd817

kimjoar approved these changes Sep 22, 2017

View reviewed changes

timroes mentioned this pull request Sep 22, 2017

Create a better code editor in the K7 ui framework #14119

Closed

timroes merged commit bdc37be into elastic:master Sep 22, 2017

timroes deleted the kui-code-editor branch September 22, 2017 15:09

timroes added v6.1.0 v7.0.0 and removed review labels Oct 2, 2017

cjcenizal mentioned this pull request Nov 1, 2017

Add CodeEditor component. elastic/eui#104

Merged

timroes added the release_note:enhancement label Nov 22, 2017


		import { htmlIdGenerator, keyCodes } from '../../../services';

		export class KuiCodeEditor extends Component {

		@@ -0,0 +1,3 @@
		// Jest Snapshot v1, https://goo.gl/fbAQLP

		exports[`KuiCodeEditor is rendered 1`] = `"<div class=\\"kuiCodeEditorWrapper\\"><div class=\\"kuiCodeEditorKeyboardHint\\" id=\\"42\\" tabindex=\\"0\\" role=\\"button\\"><p class=\\"kuiText kuiVerticalRhythmSmall\\">Press Enter to start editing.</p><p class=\\"kuiText kuiVerticalRhythmSmall\\">When you’re done, press Escape to stop editing.</p></div><div id=\\"brace-editor\\" style=\\"width: 500px; height: 500px;\\" class=\\" ace_editor ace-tm testClass1 testClass2\\"><textarea class=\\"ace_text-input\\" wrap=\\"off\\" autocorrect=\\"off\\" autocapitalize=\\"off\\" spellcheck=\\"false\\" style=\\"opacity: 0;\\" tabindex=\\"-1\\"></textarea><div class=\\"ace_gutter\\"><div class=\\"ace_layer ace_gutter-layer ace_folding-enabled\\"></div><div class=\\"ace_gutter-active-line\\"></div></div><div class=\\"ace_scroller\\"><div class=\\"ace_content\\"><div class=\\"ace_layer ace_print-margin-layer\\"><div class=\\"ace_print-margin\\" style=\\"left: 4px; visibility: visible;\\"></div></div><div class=\\"ace_layer ace_marker-layer\\"></div><div class=\\"ace_layer ace_text-layer\\" style=\\"padding: 0px 4px;\\"></div><div class=\\"ace_layer ace_marker-layer\\"></div><div class=\\"ace_layer ace_cursor-layer ace_hidden-cursors\\"><div class=\\"ace_cursor\\"></div></div></div></div><div class=\\"ace_scrollbar ace_scrollbar-v\\" style=\\"display: none; width: 20px;\\"><div class=\\"ace_scrollbar-inner\\" style=\\"width: 20px;\\"></div></div><div class=\\"ace_scrollbar ace_scrollbar-h\\" style=\\"display: none; height: 20px;\\"><div class=\\"ace_scrollbar-inner\\" style=\\"height: 20px;\\"></div></div><div style=\\"height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;\\"><div style=\\"height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;\\"></div><div style=\\"height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;\\">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div></div></div></div>"`;

[UI Framework] Add KuiCodeEditor as react-ace replacement/wrapper #14026

[UI Framework] Add KuiCodeEditor as react-ace replacement/wrapper #14026

Uh oh!

Conversation

timroes commented Sep 18, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cjcenizal left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cjcenizal Sep 21, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cjcenizal left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kimjoar left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cjcenizal left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kimjoar left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

timroes commented Sep 18, 2017 •

edited

Loading

cjcenizal Sep 21, 2017 •

edited

Loading

cjcenizal left a comment •

edited

Loading

cjcenizal Sep 22, 2017 •

edited

Loading

1) Use `debug()`

2) Use prettified `html()`

3) Use `render()`, AKA you're over-thinking it CJ