From 36e842a78fa3f6bfd1f9ff22046a565ab4a01e2d Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Wed, 20 Jun 2018 10:34:33 -0700 Subject: [PATCH 1/6] Allow mode prop to take object for custom mode --- .../views/code_editor/code_editor_example.js | 14 +++++++++ src-docs/src/views/code_editor/custom_mode.js | 30 +++++++++++++++++++ src/components/code_editor/code_editor.js | 14 +++++++++ 3 files changed, 58 insertions(+) create mode 100644 src-docs/src/views/code_editor/custom_mode.js diff --git a/src-docs/src/views/code_editor/code_editor_example.js b/src-docs/src/views/code_editor/code_editor_example.js index e32cc3a4c1f..338f6a9f862 100644 --- a/src-docs/src/views/code_editor/code_editor_example.js +++ b/src-docs/src/views/code_editor/code_editor_example.js @@ -19,6 +19,10 @@ import ReadOnly from './read_only'; const readOnlySource = require('!!raw-loader!./read_only'); const readOnlyrHtml = renderToHtml(ReadOnly); +import CustomMode from './custom_mode'; +const customModeSource = require('!!raw-loader!./custom_mode'); +const customModeHtml = renderToHtml(CustomMode); + export const CodeEditorExample = { title: 'Code Editor', sections: [{ @@ -54,5 +58,15 @@ export const CodeEditorExample = { code: readOnlyrHtml, }], demo: , + }, { + title: 'Custom mode', + source: [{ + type: GuideSectionTypes.JS, + code: customModeSource, + }, { + type: GuideSectionTypes.HTML, + code: customModeHtml, + }], + demo: , }], }; diff --git a/src-docs/src/views/code_editor/custom_mode.js b/src-docs/src/views/code_editor/custom_mode.js new file mode 100644 index 00000000000..30dc07469e1 --- /dev/null +++ b/src-docs/src/views/code_editor/custom_mode.js @@ -0,0 +1,30 @@ +import React, { Component } from 'react'; +import 'brace/mode/text'; + +import { + EuiCodeEditor, +} from '../../../../src/components'; + +const TextMode = window.ace.acequire('ace/mode/text').Mode; +class MyCustomAceMode extends TextMode { + // Your custom mode definition goes here. + // See https://github.com/ajaxorg/ace/wiki/Creating-or-Extending-an-Edit-Mode +} + +export default class extends Component { + state = { + value: '' + }; + + render() { + return ( + + ); + } +} diff --git a/src/components/code_editor/code_editor.js b/src/components/code_editor/code_editor.js index 412d3910d28..5ef7c9297ca 100644 --- a/src/components/code_editor/code_editor.js +++ b/src/components/code_editor/code_editor.js @@ -72,6 +72,20 @@ export class EuiCodeEditor extends Component { }); } + isCustomMode() { + return typeof this.props.mode === 'object'; + } + + setCustomMode() { + this.aceEditor.editor.getSession().setMode(this.props.mode); + } + + componentDidMount() { + if (this.isCustomMode()) { + this.setCustomMode(); + } + } + render() { const { width, From 27ff3d066a70f994bd2ea3cbe7dcda699940b01a Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Wed, 20 Jun 2018 10:36:17 -0700 Subject: [PATCH 2/6] Adding mode to PropTypes --- src/components/code_editor/code_editor.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/code_editor/code_editor.js b/src/components/code_editor/code_editor.js index 5ef7c9297ca..c4ecf12c90b 100644 --- a/src/components/code_editor/code_editor.js +++ b/src/components/code_editor/code_editor.js @@ -179,6 +179,10 @@ EuiCodeEditor.propTypes = { isReadOnly: PropTypes.bool, setOptions: PropTypes.object, cursorStart: PropTypes.number, + mode: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.object + ]), }; EuiCodeEditor.defaultProps = { From a35db56602b921ec709ba1a47b33e2eda5bc729a Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Wed, 20 Jun 2018 10:40:35 -0700 Subject: [PATCH 3/6] Adding note for mode prop type --- src/components/code_editor/code_editor.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/code_editor/code_editor.js b/src/components/code_editor/code_editor.js index c4ecf12c90b..f6dac0f6f10 100644 --- a/src/components/code_editor/code_editor.js +++ b/src/components/code_editor/code_editor.js @@ -179,6 +179,10 @@ EuiCodeEditor.propTypes = { isReadOnly: PropTypes.bool, setOptions: PropTypes.object, cursorStart: PropTypes.number, + + /** + * Use string for a built-in mode or object for a custom mode + */ mode: PropTypes.oneOfType([ PropTypes.string, PropTypes.object From eb87680cbf0066bbdd390d3308e2be3b50f5aea5 Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Wed, 20 Jun 2018 10:50:04 -0700 Subject: [PATCH 4/6] Adding to CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6ca9179da3e..d58567d577c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added `getPopoverScreenCoordinates` service function for positioining popover/tooltip content, updated `EuiToolTip` to use it ([#924](https://github.com/elastic/eui/pull/924)) +- Allow `mode` prop in `EuiCodeEditor` to take custom mode object ([#935](https://github.com/elastic/eui/pull/935)) ## [`0.0.54`](https://github.com/elastic/eui/tree/v0.0.54) From 8b6523e364406ab7dea236f004e1b7b024a7b51b Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Wed, 20 Jun 2018 11:29:46 -0700 Subject: [PATCH 5/6] Don't pass down mode prop to AceEditor if a custom mode is in use Otherwise, AceEditor will complain about wanting a string mode prop. --- src/components/code_editor/code_editor.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/code_editor/code_editor.js b/src/components/code_editor/code_editor.js index f6dac0f6f10..c665981b895 100644 --- a/src/components/code_editor/code_editor.js +++ b/src/components/code_editor/code_editor.js @@ -150,6 +150,10 @@ export class EuiCodeEditor extends Component { ); + if (this.isCustomMode()) { + delete rest.mode; // Otherwise, the AceEditor component will complain about wanting a string value for the mode prop. + } + return (
Date: Wed, 20 Jun 2018 11:35:02 -0700 Subject: [PATCH 6/6] Implementing componentDidUpdate check --- src/components/code_editor/code_editor.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/code_editor/code_editor.js b/src/components/code_editor/code_editor.js index c665981b895..680cd7f0450 100644 --- a/src/components/code_editor/code_editor.js +++ b/src/components/code_editor/code_editor.js @@ -86,6 +86,12 @@ export class EuiCodeEditor extends Component { } } + componentDidUpdate(prevProps) { + if ((this.props.mode !== prevProps.mode) && this.isCustomMode()) { + this.setCustomMode(); + } + } + render() { const { width,