Use react-ace

Author: stasm

package-lock.json

@@ -13,6 +13,7 @@
     "fluent-syntax": "0.10.0",
     "intl-pluralrules": "^0.2.1",
     "react": "^16.6.3",
+    "react-ace": "^6.3.2",
     "react-dom": "^16.6.3"
   },
   "scripts": {

package.json

@@ -1,107 +1,108 @@
 :root {
-  --code-id-color: #28afb0;
-  --code-variable-color: #7b287d;
-  --code-string-color: #4357ad;
-  --code-comment-color: #999;
-  --code-keyword-color: #96adc8;
-  --code-function-color: #0470e2;
-  --code-error-color: #d14;
+    --code-id-color: #28afb0;
+    --code-variable-color: #7b287d;
+    --code-string-color: #4357ad;
+    --code-comment-color: #999;
+    --code-keyword-color: #96adc8;
+    --code-function-color: #0470e2;
+    --code-error-color: #d14;
 }
 
-code {
-  background-color: var(--indent-bg-color);
-  white-space: pre;
-  display: block;
-  overflow: auto;
-  padding: 1rem;
+.example-editor {
+    background-color: var(--indent-bg-color);
+    padding-top: 1.5rem;
 }
 
-code.ace-fluent .ace_cursor {
+.example-editor .ace_editor {
+    line-height: 1.2rem !important;
+}
+
+.example-editor .ace_editor .ace_cursor {
     color: var(--main-accent-lighter-color);
 }
 
-code.ace-fluent .ace_hidden-cursors .ace_cursor {
+.example-editor .ace_editor .ace_hidden-cursors .ace_cursor {
     color: transparent;
 }
 
-code.ace-fluent .ace_gutter {
+.example-editor .ace_editor .ace_gutter {
     width: 1rem;
     background-color: transparent;
 }
 
-code.ace-fluent .ace_gutter-active-line {
+.example-editor .ace_editor .ace_gutter-active-line {
     background-color: transparent;
 }
 
-code.ace-fluent .ace_comment {
+.example-editor .ace_editor .ace_comment {
     color: var(--code-comment-color);
     font-style: italic;
 }
 
-code.ace-fluent .ace_section {
+.example-editor .ace_editor .ace_section {
     color: #666;
 }
 
-code.ace-fluent .ace_message {
+.example-editor .ace_editor .ace_message {
     color: var(--code-id-color);
     font-weight: normal;
 }
 
-code.ace-fluent .ace_string {
+.example-editor .ace_editor .ace_string {
     color: var(--code-string-color); 
 }
 
-code.ace-fluent .ace_number {
+.example-editor .ace_editor .ace_number {
     color: var(--code-keyword-color);
 }
 
-code.ace-fluent .ace_symbol {
+.example-editor .ace_editor .ace_symbol {
     color: var(--code-keyword-color);
 }
 
-code.ace-fluent .ace_variable {
+.example-editor .ace_editor .ace_variable {
     color: var(--code-variable-color);
 }
 
-code.ace-fluent .ace_function {
+.example-editor .ace_editor .ace_function {
     color: var(--code-function-color);
 }
 
-code.ace-fluent .ace_invalid {
+.example-editor .ace_editor .ace_invalid {
     background-color: #ffe5e5;
     color: red;
 }
 
-code.ace-fluent .ace_marker-layer .ace_selection {
+.example-editor .ace_editor .ace_marker-layer .ace_selection {
     background: rgb(181, 213, 255);
 }
 
-code.ace-fluent.ace_multiselect .ace_selection.ace_start {
+.example-editor .ace_editor .ace_multiselect .ace_selection.ace_start {
     box-shadow: 0 0 3px 0px white;
 }
 
-code.ace-fluent.ace_nobold .ace_line > span {
+.example-editor .ace_editor.ace_nobold .ace_line > span {
     font-weight: normal !important;
 }
 
-code.ace-fluent .ace_marker-layer .ace_step {
+.example-editor .ace_editor .ace_marker-layer .ace_step {
     background: rgb(252, 255, 0);
 }
 
-code.ace-fluent .ace_marker-layer .ace_stack {
+.example-editor .ace_editor .ace_marker-layer .ace_stack {
     background: rgb(164, 229, 101);
 }
 
-code.ace-fluent .ace_marker-layer .ace_bracket {
+.example-editor .ace_editor .ace_marker-layer .ace_bracket {
     margin: -1px 0 0 -1px;
     border: 1px solid rgb(192, 192, 192);
 }
 
-code.ace-fluent .ace_marker-layer .ace_selected-word {
+.example-editor .ace_editor .ace_marker-layer .ace_selected-word {
     background: rgb(250, 250, 255);
     border: 1px solid rgb(200, 200, 250);
 }
 
-code.ace-fluent .ace_error {
+.example-editor .ace_editor .ace_error {
     background: #ffa5a5 !important;
 }

public/editor.css

@@ -174,16 +174,6 @@ main > ul > li > p > a:hover {
   color: var(--main-accent-darker-color);
 }
 
-.code {
-  background-color: var(--indent-bg-color);
-  padding-top: 1.5rem;
-}
-
-.code > code {
-  height: 8rem;
-  line-height: 1.2rem !important;
-}
-
 main > aside > .variables {
   border-top: 1px solid #ddd;
   border-bottom: 1px solid var(--main-accent-color);

public/fluent.css

@@ -1,80 +1,51 @@
-// vim: ts=4 et sts=4 sw=4
-
-import React, { Component } from 'react';
+import React from 'react';
+import AceEditor from 'react-ace';
 
 import brace from 'brace';
 import 'brace/mode/json';
 
 import './editor-mode-fluent';
 import './editor-theme-fluent';
 
-class Editor extends Component {
-    componentWillReceiveProps(nextProps) {
-        const { annotations } = nextProps;
-        this.editor.getSession().setAnnotations(annotations);
-    }
-
-    componentDidMount(){
-        const {
-            mode, gutter = "true", fontSize = 14, value, annotations, onChange
-        } = this.props;
-
-        this.editor = brace.edit(this.root);
-
-        this.editor.setValue(value);
-        this.editor.getSession().setAnnotations(annotations);
-        this.editor.clearSelection();
-        this.editor.gotoLine(0);
-        this.editor.on('change', () => onChange(this.editor.getValue()));
-
-        this.editor.setOptions({
-            selectionStyle: 'text',
-            highlightActiveLine: false,
-            highlightSelectedWord: false,
-            readOnly: false,
-            cursorStyle: 'ace',
-            mergeUndoDeltas: false,
-            behavioursEnabled: false,
-            wrapBehavioursEnabled: false,
-            autoScrollEditorIntoView: false,
-
-            // renderer options
-            hScrollBarAlwaysVisible: false,
-            vScrollBarAlwaysVisible: false,
-            highlightGutterLine: true,
-            animatedScroll: false,
-            showInvisibles: false,
-            showPrintMargin: false,
-            printMarginColumn: false,
-            printMargin: false,
-            fadeFoldWidgets: false,
-            showFoldWidgets: false,
-            showLineNumbers: false,
-            showGutter: gutter,
-            displayIndentGuides: false,
-            fontSize,
-            scrollPastEnd: false,
-            fixedWidthGutter: false,
-            theme: `ace/theme/fluent`
-        });
-
-        this.editor.getSession().setOptions({
-            firstLineNumber: 1,
-            useWorker: false,
-            useSoftTabs: true,
-            tabSize: 4,
-            mode: `ace/mode/${mode}`
-        });
-
-    }
-
-    render() {
-        return (
-            <div className="code">
-                <code ref={elem => this.root = elem}></code>
-            </div>
-        );
-    }
+// https://github.com/ajaxorg/ace/wiki/Configuring-Ace
+const ACE_OPTIONS = {
+    // Editor options.
+    selectionStyle: 'text',
+    highlightActiveLine: false,
+    highlightSelectedWord: false,
+    cursorStyle: 'ace',
+    mergeUndoDeltas: false,
+    behavioursEnabled: false,
+    wrapBehavioursEnabled: false,
+    autoScrollEditorIntoView: false,
+
+    // Renderer options.
+    hScrollBarAlwaysVisible: false,
+    vScrollBarAlwaysVisible: false,
+    highlightGutterLine: true,
+    animatedScroll: false,
+    showInvisibles: false,
+    showPrintMargin: false,
+    printMarginColumn: false,
+    printMargin: false,
+    fadeFoldWidgets: false,
+    showFoldWidgets: false,
+    showLineNumbers: false,
+    displayIndentGuides: false,
+    scrollPastEnd: false,
+    fixedWidthGutter: false,
+};
+
+export default
+function Editor(props) {
+    return <AceEditor
+        mode="fluent"
+        theme="fluent"
+        fontSize={14}
+        width="auto"
+        setOptions={ACE_OPTIONS}
+        debounceChangePeriod={200}
+        onLoad={editor => editor.gotoLine(0)}
+        {...props}
+    />;
 }
-
-export default Editor;

src/editor.js

@@ -105,13 +105,14 @@ export default class Example extends Component {
 
         return (
             <Fragment>
-                <Editor
-                    className="editor"
-                    mode="fluent"
-                    value={translations}
-                    annotations={editor_annotations}
-                    onChange={val => this.handleTranslationsChange(val)}
-                />
+                <div className="example-editor">
+                    <Editor
+                        height="10rem"
+                        value={translations}
+                        annotations={editor_annotations}
+                        onChange={val => this.handleTranslationsChange(val)}
+                    />
+                </div>
 
                 <dl className="variables">
                     {externals_controls}