You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by am...@apache.org on 2022/01/31 15:00:07 UTC
[couchdb-fauxton] branch main updated: Revert "Replace brace with ace-build and react-ace (#1331)" (#1334)
This is an automated email from the ASF dual-hosted git repository.
amaranhao pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/couchdb-fauxton.git
The following commit(s) were added to refs/heads/main by this push:
new 260f5f9 Revert "Replace brace with ace-build and react-ace (#1331)" (#1334)
260f5f9 is described below
commit 260f5f9dfc24c42da20ec048b027229ecaa72cba
Author: Antonio Maranhao <30...@users.noreply.github.com>
AuthorDate: Mon Jan 31 09:59:57 2022 -0500
Revert "Replace brace with ace-build and react-ace (#1331)" (#1334)
This reverts commit 9fc82fb378afa8137a2e219971eaee8357a96d37.
---
app/addons/components/components/codeeditor.js | 65 +++++++++-------------
.../components/components/stringeditmodal.js | 8 +--
app/addons/components/components/zenmodeoverlay.js | 3 +-
.../rev-browser/components/splitscreenarea.js | 17 +++---
jest-config.json | 1 -
package-lock.json | 30 +++-------
package.json | 3 +-
7 files changed, 50 insertions(+), 77 deletions(-)
diff --git a/app/addons/components/components/codeeditor.js b/app/addons/components/components/codeeditor.js
index 7e37a0c..ca7a9e3 100644
--- a/app/addons/components/components/codeeditor.js
+++ b/app/addons/components/components/codeeditor.js
@@ -11,20 +11,13 @@
// the License.
import React from "react";
import FauxtonAPI from "../../../core/api";
-import AceEditor from "react-ace";
-import ace from 'ace-builds';
-import "ace-builds/src-min-noconflict/ext-searchbox";
+import ace from "brace";
+import "brace/ext/searchbox";
import {StringEditModal} from './stringeditmodal';
-import 'ace-builds/css/theme/idle_fingers.css';
-import 'ace-builds/css/ace.css';
-// importing the webpack resolver enables dynamically loading modes, which is required for syntax checking
-import 'ace-builds/webpack-resolver';
-require('ace-builds/src-noconflict/mode-javascript');
-require('ace-builds/src-noconflict/mode-json');
-require('ace-builds/src-noconflict/theme-idle_fingers');
-
-ace.config.set("useStrictCSP", true);
+require('brace/mode/javascript');
+require('brace/mode/json');
+require('brace/theme/idle_fingers');
export class CodeEditor extends React.Component {
static defaultProps = {
@@ -95,12 +88,17 @@ export class CodeEditor extends React.Component {
}
);
+ // suppresses an Ace editor error
+ this.editor.$blockScrolling = Infinity;
+
if (shouldUpdateCode) {
this.setValue(props.defaultCode);
}
+ this.editor.setShowPrintMargin(props.showPrintMargin);
this.editor.autoScrollEditorIntoView = props.autoScrollEditorIntoView;
+ this.editor.setOption('highlightActiveLine', this.props.highlightActiveLine);
if (this.props.setHeightToLineCount) {
this.setHeightToLineCount();
@@ -111,6 +109,16 @@ export class CodeEditor extends React.Component {
}
this.addCommands();
+ this.editor.getSession().setMode('ace/mode/' + props.mode);
+ this.editor.setTheme('ace/theme/' + props.theme);
+ this.editor.setFontSize(props.fontSize);
+ this.editor.getSession().setTabSize(2);
+ this.editor.getSession().setUseSoftTabs(true);
+
+ if (this.props.autoFocus) {
+ this.editor.focus();
+ }
+ this.editor.setReadOnly(props.disabled);
};
addCommands = () => {
@@ -120,6 +128,8 @@ export class CodeEditor extends React.Component {
};
setupEvents = () => {
+ this.editor.on('blur', _.bind(this.onBlur, this));
+ this.editor.on('change', _.bind(this.onContentChange, this));
if (this.props.stringEditModalEnabled) {
this.editor.on('changeSelection', _.bind(this.showHideEditStringGutterIcon, this));
@@ -169,6 +179,10 @@ export class CodeEditor extends React.Component {
componentDidMount() {
this.setupAce(this.props, true);
this.setupEvents();
+
+ if (this.props.autoFocus) {
+ this.editor.focus();
+ }
}
componentWillUnmount() {
@@ -343,35 +357,10 @@ export class CodeEditor extends React.Component {
this.editor.getSelection().moveCursorUp();
};
- onAceLoad = (ace) => {
- this.ace = ace;
- };
-
render() {
return (
<div>
- <AceEditor
- name={this.props.id}
- className="js-editor"
- mode={this.props.mode}
- theme={this.props.theme}
- onLoad={_.bind(this.onAceLoad, this)}
- onBlur={_.bind(this.onBlur, this)}
- onChange={_.bind(this.onContentChange, this)}
- editorProps={{
- $blockScrolling: Infinity,
- useSoftTabs: true
- }}
- readOnly={this.disabled}
- showPrintMargin={this.props.showPrintMargin}
- highlightActiveLine={this.props.highlightActiveLine}
- width="100%"
- height="100%"
- tabSize={2}
- fontSize={this.props.fontSize}
- focus={this.props.autoFocus}
- setOptions={{
- }}/>
+ <div ref={node => this.ace = node} className="js-editor" id={this.props.id}></div>
<button ref={node => this.stringEditIcon = node}
className="btn string-edit"
title="Edit string"
diff --git a/app/addons/components/components/stringeditmodal.js b/app/addons/components/components/stringeditmodal.js
index d92dbc0..df5877d 100644
--- a/app/addons/components/components/stringeditmodal.js
+++ b/app/addons/components/components/stringeditmodal.js
@@ -15,11 +15,11 @@ import PropTypes from 'prop-types';
import React from "react";
import ReactDOM from "react-dom";
import {Modal} from "react-bootstrap";
-import ace from "ace-builds";
+import ace from "brace";
import Helpers from "../../documents/helpers";
-require('ace-builds/src-min-noconflict/mode-javascript');
-require('ace-builds/src-min-noconflict/mode-json');
-require('ace-builds/src-noconflict/theme-idle_fingers');
+require('brace/mode/javascript');
+require('brace/mode/json');
+require('brace/theme/idle_fingers');
// this appears when the cursor is over a string. It shows an icon in the gutter that opens the modal.
export class StringEditModal extends React.Component {
diff --git a/app/addons/components/components/zenmodeoverlay.js b/app/addons/components/components/zenmodeoverlay.js
index 3001fe6..dceb24c 100644
--- a/app/addons/components/components/zenmodeoverlay.js
+++ b/app/addons/components/components/zenmodeoverlay.js
@@ -15,8 +15,7 @@ import app from "../../../app";
import {CodeEditor} from './codeeditor';
import {Tooltip, OverlayTrigger} from 'react-bootstrap';
-require('ace-builds/src-min-noconflict/theme-dawn');
-import 'ace-builds/css/theme/dawn.css';
+require('brace/theme/dawn');
const themes = {
dark: 'idle_fingers',
diff --git a/app/addons/documents/rev-browser/components/splitscreenarea.js b/app/addons/documents/rev-browser/components/splitscreenarea.js
index c83526c..b848d66 100644
--- a/app/addons/documents/rev-browser/components/splitscreenarea.js
+++ b/app/addons/documents/rev-browser/components/splitscreenarea.js
@@ -12,13 +12,16 @@
import React from 'react';
import ReactDOM from "react-dom";
+import ace from "brace";
-const highlight = require('ace-builds/src-min-noconflict/ext-static_highlight');
+require('brace/ext/static_highlight');
+const highlight = ace.acequire('ace/ext/static_highlight');
-require('ace-builds/src-min-noconflict/mode-json');
-const JSONMode = require('ace-builds/src-min-noconflict/mode-json').Mode;
+require('brace/mode/json');
+const JavaScriptMode = ace.acequire('ace/mode/json').Mode;
-const theme = require('ace-builds/src-noconflict/theme-idle_fingers');
+require('brace/theme/idle_fingers');
+const theme = ace.acequire('ace/theme/idle_fingers');
export default class SplitScreenArea extends React.Component {
@@ -37,13 +40,13 @@ export default class SplitScreenArea extends React.Component {
hightlightAfterRender () {
const format = (input) => { return JSON.stringify(input, null, ' '); };
- const jsonMode = new JSONMode();
+ const jsmode = new JavaScriptMode();
const left = this.revLeftOurs;
const right = this.revRightTheirs;
- const leftRes = highlight.render(format(this.props.ours), jsonMode, theme, 0, true);
+ const leftRes = highlight.render(format(this.props.ours), jsmode, theme, 0, true);
left.innerHTML = leftRes.html;
- const rightRes = highlight.render(format(this.props.theirs), jsonMode, theme, 0, true);
+ const rightRes = highlight.render(format(this.props.theirs), jsmode, theme, 0, true);
right.innerHTML = rightRes.html;
}
diff --git a/jest-config.json b/jest-config.json
index c064380..b133b1e 100644
--- a/jest-config.json
+++ b/jest-config.json
@@ -7,7 +7,6 @@
"moduleNameMapper": {
"underscore": "lodash",
- "ace-builds": "<rootDir>/node_modules/ace-builds",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|swf|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
diff --git a/package-lock.json b/package-lock.json
index 0464621..d10512a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3620,11 +3620,6 @@
"negotiator": "0.6.2"
}
},
- "ace-builds": {
- "version": "1.4.13",
- "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.13.tgz",
- "integrity": "sha512-SOLzdaQkY6ecPKYRDDg+MY1WoGgXA34cIvYJNNoBMGGUswHmlauU2Hy0UL96vW0Fs/LgFbMUjD+6vqzWTldIYQ=="
- },
"acorn": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
@@ -4621,6 +4616,11 @@
"integrity": "sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==",
"dev": true
},
+ "brace": {
+ "version": "0.11.1",
+ "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz",
+ "integrity": "sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg="
+ },
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -11291,11 +11291,6 @@
"integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=",
"dev": true
},
- "lodash.get": {
- "version": "4.4.2",
- "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
- "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
- },
"lodash.isarguments": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
@@ -11311,7 +11306,8 @@
"lodash.isequal": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
- "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+ "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
+ "dev": true
},
"lodash.isplainobject": {
"version": "4.0.6",
@@ -14030,18 +14026,6 @@
"prop-types": "^15.6.2"
}
},
- "react-ace": {
- "version": "9.5.0",
- "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-9.5.0.tgz",
- "integrity": "sha512-4l5FgwGh6K7A0yWVMQlPIXDItM4Q9zzXRqOae8KkCl6MkOob7sC1CzHxZdOGvV+QioKWbX2p5HcdOVUv6cAdSg==",
- "requires": {
- "ace-builds": "^1.4.13",
- "diff-match-patch": "^1.0.5",
- "lodash.get": "^4.4.2",
- "lodash.isequal": "^4.5.0",
- "prop-types": "^15.7.2"
- }
- },
"react-bootstrap": {
"version": "0.31.5",
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-0.31.5.tgz",
diff --git a/package.json b/package.json
index fa2a86d..abd1550 100644
--- a/package.json
+++ b/package.json
@@ -63,13 +63,13 @@
},
"dependencies": {
"@webcomponents/url": "^0.7.8",
- "ace-builds": "^1.4.13",
"acorn": "^6.4.2",
"ajv": "^6.12.6",
"async": "~0.2.6",
"backbone": "^1.4.0",
"base-64": "^1.0.0",
"bluebird": "^3.7.2",
+ "brace": "^0.11.0",
"classnames": "^2.2.6",
"clean-css": "^4.2.4",
"clipboard": "^2.0.8",
@@ -88,7 +88,6 @@
"prop-types": "^15.8.1",
"rc-slider": "^9.7.5",
"react": "^16.14.0",
- "react-ace": "^9.5.0",
"react-bootstrap": "^0.31.3",
"react-dom": "^16.14.0",
"react-motion": "^0.5.0",