forked from mirrors/gecko-dev
2f76dc4d66
MozReview-Commit-ID: 43EoGR6IZGo --HG-- extra : rebase_source : c2bfc1f7dcf66744bfa6105dc8497f2557a8b559
103 lines
2.5 KiB
JavaScript
103 lines
2.5 KiB
JavaScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
/* eslint-disable react/prop-types */
|
|
|
|
"use strict";
|
|
|
|
const { createClass, DOM, PropTypes } = require("devtools/client/shared/vendor/react");
|
|
const SourceEditor = require("devtools/client/sourceeditor/editor");
|
|
|
|
const { div } = DOM;
|
|
const SYNTAX_HIGHLIGHT_MAX_SIZE = 102400;
|
|
|
|
/**
|
|
* CodeMirror editor as a React component
|
|
*/
|
|
const Editor = createClass({
|
|
displayName: "Editor",
|
|
|
|
propTypes: {
|
|
// Source editor syntax hightligh mode, which is a mime type defined in CodeMirror
|
|
mode: PropTypes.string,
|
|
// Source editor is displayed if set to true
|
|
open: PropTypes.bool,
|
|
// Source editor content
|
|
text: PropTypes.string,
|
|
},
|
|
|
|
getDefaultProps() {
|
|
return {
|
|
mode: null,
|
|
open: true,
|
|
text: "",
|
|
};
|
|
},
|
|
|
|
componentDidMount() {
|
|
const { mode, text } = this.props;
|
|
|
|
this.editor = new SourceEditor({
|
|
lineNumbers: true,
|
|
mode: text.length < SYNTAX_HIGHLIGHT_MAX_SIZE ? mode : null,
|
|
readOnly: true,
|
|
value: text,
|
|
});
|
|
|
|
this.deferEditor = this.editor.appendTo(this.refs.editorElement);
|
|
},
|
|
|
|
componentDidUpdate(prevProps) {
|
|
const { mode, open, text } = this.props;
|
|
|
|
if (!open) {
|
|
return;
|
|
}
|
|
|
|
if (prevProps.mode !== mode && text.length < SYNTAX_HIGHLIGHT_MAX_SIZE) {
|
|
this.deferEditor.then(() => {
|
|
this.editor.setMode(mode);
|
|
});
|
|
}
|
|
|
|
if (prevProps.text !== text) {
|
|
this.deferEditor.then(() => {
|
|
// FIXME: Workaround for browser_net_accessibility test to
|
|
// make sure editor node exists while setting editor text.
|
|
// deferEditor workaround should be removed in bug 1308442
|
|
if (this.refs.editorElement) {
|
|
this.editor.setText(text);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
componentWillUnmount() {
|
|
this.deferEditor.then(() => {
|
|
this.editor.destroy();
|
|
this.editor = null;
|
|
});
|
|
this.deferEditor = null;
|
|
},
|
|
|
|
render() {
|
|
const { open } = this.props;
|
|
|
|
return (
|
|
div({ className: "editor-container devtools-monospace" },
|
|
div({
|
|
ref: "editorElement",
|
|
className: "editor-mount devtools-monospace",
|
|
// Using visibility instead of display property to avoid breaking
|
|
// CodeMirror indentation
|
|
style: { visibility: open ? "visible" : "hidden" },
|
|
}),
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
module.exports = Editor;
|
|
|
|
/* eslint-enable react/prop-types */
|