TextNode.js (2215B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 "use strict"; 6 7 const { 8 createElement, 9 createRef, 10 Fragment, 11 PureComponent, 12 } = require("resource://devtools/client/shared/vendor/react.mjs"); 13 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); 14 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs"); 15 const { 16 editableItem, 17 } = require("resource://devtools/client/shared/inplace-editor.js"); 18 19 const { 20 getStr, 21 getFormatStr, 22 } = require("resource://devtools/client/inspector/markup/utils/l10n.js"); 23 24 class TextNode extends PureComponent { 25 static get propTypes() { 26 return { 27 showTextEditor: PropTypes.func.isRequired, 28 type: PropTypes.string.isRequired, 29 value: PropTypes.string.isRequired, 30 }; 31 } 32 33 constructor(props) { 34 super(props); 35 36 this.state = { 37 value: this.props.value, 38 }; 39 40 this.valuePreRef = createRef(); 41 } 42 43 componentDidMount() { 44 editableItem( 45 { 46 element: this.valuePreRef.current, 47 trigger: "dblclick", 48 }, 49 element => { 50 this.props.showTextEditor(element); 51 } 52 ); 53 } 54 55 render() { 56 const { value } = this.state; 57 const isComment = this.props.type === "comment"; 58 const isWhiteSpace = !/[^\s]/.exec(value); 59 60 return createElement( 61 Fragment, 62 null, 63 isComment ? dom.span({}, "<!--") : null, 64 dom.pre( 65 { 66 className: isWhiteSpace ? "whitespace" : "", 67 ref: this.valuePreRef, 68 style: { 69 display: "inline-block", 70 whiteSpace: "normal", 71 }, 72 tabIndex: -1, 73 title: isWhiteSpace 74 ? getFormatStr( 75 "markupView.whitespaceOnly", 76 value.replace(/\n/g, "⏎").replace(/\t/g, "⇥").replace(/ /g, "◦") 77 ) 78 : "", 79 "data-label": getStr("markupView.whitespaceOnly.label"), 80 }, 81 value 82 ), 83 isComment ? dom.span({}, "-->") : null 84 ); 85 } 86 } 87 88 module.exports = TextNode;