Upgraded ace editor

elastic · Mar 3, 2020 · 400ca00 · 400ca00
1 parent b270687
commit 400ca00
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-- Fixed readOnly property of `EuiCodeEditor` ([#2954](https://github.com/elastic/eui/pull/2954))
+- Fixed readOnly property of `EuiCodeEditor` ([#2967](https://github.com/elastic/eui/pull/2967))
 - `EuiButton` now has a single return statement ([#2954](https://github.com/elastic/eui/pull/2954))
 - Added `isSortable` props to `EuiDataGridColumn` and `EuiDataGridSchemaDetector` to mark them as un-sortable ([#2952](https://github.com/elastic/eui/pull/2952))
 - Converted `EuiForm` to TypeScript, added many missing `/form` Prop types ([#2896](https://github.com/elastic/eui/pull/2896))

diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "lodash": "^4.17.11",
     "numeral": "^2.0.6",
     "prop-types": "^15.6.0",
-    "react-ace": "^7.0.5",
+    "react-ace": "8.0.0",
     "react-beautiful-dnd": "^10.1.0",
     "react-focus-lock": "^1.17.7",
     "react-input-autosize": "^2.2.2",

diff --git a/src-docs/src/views/code_editor/code_editor.js b/src-docs/src/views/code_editor/code_editor.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 
-import 'brace/theme/github';
-import 'brace/mode/javascript';
-import 'brace/snippets/javascript';
-import 'brace/ext/language_tools';
+// import 'brace/theme/github';
+// import 'brace/mode/javascript';
+// import 'brace/snippets/javascript';
+// import 'brace/ext/language_tools';
 
 import { EuiCodeEditor } from '../../../../src/components';
 

diff --git a/src-docs/src/views/code_editor/custom_mode.js b/src-docs/src/views/code_editor/custom_mode.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import 'brace/mode/text';
+// import 'brace/mode/text';
 
 import { EuiCodeEditor } from '../../../../src/components';
 

diff --git a/src-docs/src/views/code_editor/read_only.js b/src-docs/src/views/code_editor/read_only.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
-import 'brace/mode/less';
-import 'brace/theme/github';
+// import 'brace/mode/less';
+// import 'brace/theme/github';
 
 import { EuiCodeEditor } from '../../../../src/components';
 
@@ -18,7 +18,7 @@ export default class extends Component {
         width="100%"
         value={this.state.value}
         setOptions={{ fontSize: '14px' }}
-        isReadOnly
+        isReadOnly={true}
         aria-label="Read only code editor"
       />
     );

diff --git a/src/components/code_editor/__snapshots__/code_editor.test.tsx.snap b/src/components/code_editor/__snapshots__/code_editor.test.tsx.snap
@@ -203,7 +203,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on
     </p>
   </div>
   <div
-    class=" ace_editor ace-tm"
+    class=" ace_editor ace_hidpi ace-tm"
     id="htmlId"
     style="width: 500px; height: 500px;"
   >
@@ -213,7 +213,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on
       autocorrect="off"
       class="ace_text-input"
       spellcheck="false"
-      style="opacity: 0;"
+      style="opacity: 0; font-size: 1px;"
       tabindex="-1"
       wrap="off"
     />
@@ -223,13 +223,12 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on
     >
       <div
         class="ace_layer ace_gutter-layer ace_folding-enabled"
-      />
-      <div
-        class="ace_gutter-active-line"
+        style="height: 1000000px;"
       />
     </div>
     <div
       class="ace_scroller"
+      style="line-height: 0px;"
     >
       <div
         class="ace_content"
@@ -247,7 +246,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on
         />
         <div
           class="ace_layer ace_text-layer"
-          style="padding: 0px 4px;"
+          style="height: 1000000px; margin: 0px 4px;"
         />
         <div
           class="ace_layer ace_marker-layer"
@@ -268,7 +267,9 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on
       <div
         class="ace_scrollbar-inner"
         style="width: 20px;"
-      />
+      >
+         
+      </div>
     </div>
     <div
       class="ace_scrollbar ace_scrollbar-h"
@@ -277,7 +278,9 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on
       <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;"
@@ -288,7 +291,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on
       <div
         style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
       >
-        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
       </div>
     </div>
   </div>
@@ -319,7 +322,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on t
     </p>
   </div>
   <div
-    class=" ace_editor ace-tm"
+    class=" ace_editor ace_hidpi ace-tm"
     id="htmlId"
     style="width: 500px; height: 500px;"
   >
@@ -329,7 +332,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on t
       autocorrect="off"
       class="ace_text-input"
       spellcheck="false"
-      style="opacity: 0;"
+      style="opacity: 0; font-size: 1px;"
       tabindex="-1"
       wrap="off"
     />
@@ -339,13 +342,12 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on t
     >
       <div
         class="ace_layer ace_gutter-layer ace_folding-enabled"
-      />
-      <div
-        class="ace_gutter-active-line"
+        style="height: 1000000px;"
       />
     </div>
     <div
       class="ace_scroller"
+      style="line-height: 0px;"
     >
       <div
         class="ace_content"
@@ -363,7 +365,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on t
         />
         <div
           class="ace_layer ace_text-layer"
-          style="padding: 0px 4px;"
+          style="height: 1000000px; margin: 0px 4px;"
         />
         <div
           class="ace_layer ace_marker-layer"
@@ -384,7 +386,9 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on t
       <div
         class="ace_scrollbar-inner"
         style="width: 20px;"
-      />
+      >
+         
+      </div>
     </div>
     <div
       class="ace_scrollbar ace_scrollbar-h"
@@ -393,7 +397,9 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on t
       <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;"
@@ -404,7 +410,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on t
       <div
         style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
       >
-        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
       </div>
     </div>
   </div>
@@ -435,16 +441,17 @@ exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
     </p>
   </div>
   <div
-    class=" ace_editor ace-tm"
+    class=" ace_editor ace_hidpi ace-tm"
     id="htmlId"
     style="width: 500px; height: 500px;"
   >
     <textarea
       autocapitalize="off"
       autocorrect="off"
       class="ace_text-input"
+      readonly=""
       spellcheck="false"
-      style="opacity: 0;"
+      style="opacity: 0; font-size: 1px;"
       tabindex="-1"
       wrap="off"
     />
@@ -454,14 +461,12 @@ exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
     >
       <div
         class="ace_layer ace_gutter-layer ace_folding-enabled"
-      />
-      <div
-        class="ace_gutter-active-line"
-        style="display: none;"
+        style="height: 1000000px;"
       />
     </div>
     <div
       class="ace_scroller"
+      style="line-height: 0px;"
     >
       <div
         class="ace_content"
@@ -479,7 +484,7 @@ exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
         />
         <div
           class="ace_layer ace_text-layer"
-          style="padding: 0px 4px;"
+          style="height: 1000000px; margin: 0px 4px;"
         />
         <div
           class="ace_layer ace_marker-layer"
@@ -500,7 +505,9 @@ exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
       <div
         class="ace_scrollbar-inner"
         style="width: 20px;"
-      />
+      >
+         
+      </div>
     </div>
     <div
       class="ace_scrollbar ace_scrollbar-h"
@@ -509,7 +516,9 @@ exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
       <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;"
@@ -520,7 +529,7 @@ exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
       <div
         style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
       >
-        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
       </div>
     </div>
   </div>

diff --git a/src/components/code_editor/code_editor.tsx b/src/components/code_editor/code_editor.tsx
@@ -166,7 +166,7 @@ export class EuiCodeEditor extends Component<
       width,
       height,
       onBlur, // eslint-disable-line no-unused-vars
-      isReadOnly,
+      isReadOnly = false,
       setOptions,
       cursorStart,
       mode = DEFAULT_MODE,

diff --git a/yarn.lock b/yarn.lock
@@ -1530,6 +1530,11 @@ accepts@~1.3.4:
     mime-types "~2.1.16"
     negotiator "0.6.1"
 
+ace-builds@^1.4.6:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.8.tgz#d14be41d30294a2a12581f0bcfee4b696481ffdd"
+  integrity sha512-8ZVAxwyCGAxQX8mOp9imSXH0hoSPkGfy8igJy+WO/7axL30saRhKgg1XPACSmxxPA7nfHVwM+ShWXT+vKsNuFg==
+
 acorn-globals@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.1.0.tgz#ab716025dbe17c54d3ef81d32ece2b2d99fe2538"
@@ -2508,11 +2513,6 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-brace@^0.11.1:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
-  integrity sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg=
-
 braces@^1.8.2:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
@@ -12017,12 +12017,12 @@ re-reselect@^3.4.0:
   resolved "https://registry.yarnpkg.com/re-reselect/-/re-reselect-3.4.0.tgz#0f2303f3c84394f57f0cd31fea08a1ca4840a7cd"
   integrity sha512-JsecfN+JlckncVXTWFWjn0Vk6uInl8GSf4eEd9tTk5qXHlgqkPdILpnYpgZcISXNYAzvfvsCZviaDk8AxyS5sg==
 
-react-ace@^7.0.5:
-  version "7.0.5"
-  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-7.0.5.tgz#798299fd52ddf3a3dcc92afc5865538463544f01"
-  integrity sha512-3iI+Rg2bZXCn9K984ll2OF4u9SGcJH96Q1KsUgs9v4M2WePS4YeEHfW2nrxuqJrAkE5kZbxaCE79k6kqK0YBjg==
+react-ace@8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-8.0.0.tgz#e6fc155ec3cf240e92bdf2e156a50458a78ed0a4"
+  integrity sha512-EvU14vXbZpAenb1ZVKdn8yTQs/shZ9RghFulHtt67bBXT6sjrNHcfOEXHYtSEmwMb6pQVVNNuulzzd8o+Uouig==
   dependencies:
-    brace "^0.11.1"
+    ace-builds "^1.4.6"
     diff-match-patch "^1.0.4"
     lodash.get "^4.4.2"
     lodash.isequal "^4.5.0"