OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

display search results correct; support HTML markup

pull/296/head
Matthew Hodgson 2015-10-30 04:10:37 +00:00
parent d315e4afcd
commit fdfa0cbd0e
7 changed files with 116 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -31,7 +31,8 @@
"matrix-react-sdk": "^0.0.1",
"q": "^1.4.1",
"react": "^0.13.3",
"react-loader": "^1.4.0"
"react-loader": "^1.4.0",
"sanitize-html": "^1.11.1"
},
"devDependencies": {
"babel": "^5.8.23",

11
src/skins/vector/css/molecules/EventTile.css
View File

@ -66,6 +66,13 @@ limitations under the License.
margin-right: 100px;
}
.mx_MessageTile_searchHighlight {
background-color: #76cfa6;
color: #fff;
border-radius: 5px;
padding: 4px;
}
.mx_EventTile_sending {
color: #ddd;
}
@ -78,6 +85,10 @@ limitations under the License.
color: #FF0064;
}
.mx_EventTile_contextual {
opacity: 0.4;
}
.mx_EventTile_msgOption {
float: right;
}

1
src/skins/vector/css/molecules/MTextTile.css
View File

@ -17,4 +17,3 @@ limitations under the License.
.mx_MTextTile {
white-space: pre-wrap;
}

5
src/skins/vector/views/molecules/EventTile.js
View File

@ -91,7 +91,8 @@ module.exports = React.createClass({
mx_EventTile_highlight: this.shouldHighlight(),
mx_EventTile_continuation: this.props.continuation,
mx_EventTile_last: this.props.last,
menu: this.state.menu
mx_EventTile_contextual: this.props.contextual,
menu: this.state.menu,
});
var timestamp = <MessageTimestamp ts={this.props.mxEvent.getTs()} />
var editButton = (
@ -126,7 +127,7 @@ module.exports = React.createClass({
<div className="mx_EventTile_line">
{ timestamp }
{ editButton }
<EventTileType mxEvent={this.props.mxEvent} />
<EventTileType mxEvent={this.props.mxEvent} searchTerm={this.props.searchTerm} />
</div>
</div>
);

51
src/skins/vector/views/molecules/MNoticeTile.js
View File

@ -17,18 +17,67 @@ limitations under the License.
'use strict';
var React = require('react');
var sanitizeHtml = require('sanitize-html');
var MNoticeTileController = require('matrix-react-sdk/lib/controllers/molecules/MNoticeTile')
var allowedAttributes = sanitizeHtml.defaults.allowedAttributes;
allowedAttributes['font'] = ['color'];
var sanitizeHtmlParams = {
allowedTags: sanitizeHtml.defaults.allowedTags.concat([ 'font' ]),
allowedAttributes: allowedAttributes,
};
module.exports = React.createClass({
displayName: 'MNoticeTile',
mixins: [MNoticeTileController],
// FIXME: this entire class is copy-pasted from MTextTile :(
render: function() {
var content = this.props.mxEvent.getContent();
var body = content.body;
if (content.format === "org.matrix.custom.html") {
body = sanitizeHtml(content.formatted_body, sanitizeHtmlParams);
}
if (this.props.searchTerm) {
var lastOffset = 0;
var bodyList = [];
var k = 0;
var offset;
// XXX: this probably doesn't handle stemming very well.
while ((offset = body.indexOf(this.props.searchTerm, lastOffset)) >= 0) {
if (content.format === "org.matrix.custom.html") {
// FIXME: we need to apply the search highlighting to only the text elements of HTML, which means
// hooking into the sanitizer parser rather than treating it as a string. Otherwise
// the act of highlighting a <b/> or whatever will break the HTML badly.
bodyList.push(<span key={ k++ } dangerouslySetInnerHTML={{ __html: body.substring(lastOffset, offset) }} />);
bodyList.push(<span key={ k++ } dangerouslySetInnerHTML={{ __html: this.props.searchTerm }} className="mx_MessageTile_searchHighlight" />);
}
else {
bodyList.push(<span key={ k++ } >{ body.substring(lastOffset, offset) }</span>);
bodyList.push(<span key={ k++ } className="mx_MessageTile_searchHighlight">{ this.props.searchTerm }</span>);
}
lastOffset = offset + this.props.searchTerm.length;
}
if (content.format === "org.matrix.custom.html") {
bodyList.push(<span key={ k++ } dangerouslySetInnerHTML={{ __html: body.substring(lastOffset) }} />);
}
else {
bodyList.push(<span key={ k++ }>{ body.substring(lastOffset) }</span>);
}
body = bodyList;
}
else {
if (content.format === "org.matrix.custom.html") {
body = <span dangerouslySetInnerHTML={{ __html: body }} />;
}
}
return (
<span ref="content" className="mx_MNoticeTile mx_MessageTile_content">
{content.body}
{ body }
</span>
);
},

50
src/skins/vector/views/molecules/MTextTile.js
View File

@ -17,18 +17,66 @@ limitations under the License.
'use strict';
var React = require('react');
var sanitizeHtml = require('sanitize-html');
var MTextTileController = require('matrix-react-sdk/lib/controllers/molecules/MTextTile')
var allowedAttributes = sanitizeHtml.defaults.allowedAttributes;
allowedAttributes['font'] = ['color'];
var sanitizeHtmlParams = {
allowedTags: sanitizeHtml.defaults.allowedTags.concat([ 'font' ]),
allowedAttributes: allowedAttributes,
};
module.exports = React.createClass({
displayName: 'MTextTile',
mixins: [MTextTileController],
render: function() {
var content = this.props.mxEvent.getContent();
var body = content.body;
if (content.format === "org.matrix.custom.html") {
body = sanitizeHtml(content.formatted_body, sanitizeHtmlParams);
}
if (this.props.searchTerm) {
var lastOffset = 0;
var bodyList = [];
var k = 0;
var offset;
// XXX: this probably doesn't handle stemming very well.
while ((offset = body.indexOf(this.props.searchTerm, lastOffset)) >= 0) {
if (content.format === "org.matrix.custom.html") {
// FIXME: we need to apply the search highlighting to only the text elements of HTML, which means
// hooking into the sanitizer parser rather than treating it as a string. Otherwise
// the act of highlighting a <b/> or whatever will break the HTML badly.
bodyList.push(<span key={ k++ } dangerouslySetInnerHTML={{ __html: body.substring(lastOffset, offset) }} />);
bodyList.push(<span key={ k++ } dangerouslySetInnerHTML={{ __html: this.props.searchTerm }} className="mx_MessageTile_searchHighlight" />);
}
else {
bodyList.push(<span key={ k++ } >{ body.substring(lastOffset, offset) }</span>);
bodyList.push(<span key={ k++ } className="mx_MessageTile_searchHighlight">{ this.props.searchTerm }</span>);
}
lastOffset = offset + this.props.searchTerm.length;
}
if (content.format === "org.matrix.custom.html") {
bodyList.push(<span key={ k++ } dangerouslySetInnerHTML={{ __html: body.substring(lastOffset) }} />);
}
else {
bodyList.push(<span key={ k++ }>{ body.substring(lastOffset) }</span>);
}
body = bodyList;
}
else {
if (content.format === "org.matrix.custom.html") {
body = <span dangerouslySetInnerHTML={{ __html: body }} />;
}
}
return (
<span ref="content" className="mx_MTextTile mx_MessageTile_content">
{content.body}
{ body }
</span>
);
},

2
src/skins/vector/views/molecules/MessageTile.js
View File

@ -52,6 +52,6 @@ module.exports = React.createClass({
TileType = tileTypes[msgtype];
}
return <TileType mxEvent={this.props.mxEvent} />;
return <TileType mxEvent={this.props.mxEvent} searchTerm={this.props.searchTerm} />;
},
});