Merge pull request #1176 from matrix-org/luke/feature-enable-RTE
Take RTE out of labs! 🎉
This commit is contained in:
commit
c9df079464
4 changed files with 17 additions and 68 deletions
|
@ -25,11 +25,6 @@ import { _t } from './languageHandler';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
LABS_FEATURES: [
|
LABS_FEATURES: [
|
||||||
{
|
|
||||||
name: "-",
|
|
||||||
id: 'rich_text_editor',
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: "-",
|
name: "-",
|
||||||
id: 'matrix_apps',
|
id: 'matrix_apps',
|
||||||
|
@ -39,8 +34,7 @@ export default {
|
||||||
|
|
||||||
// horrible but it works. The locality makes this somewhat more palatable.
|
// horrible but it works. The locality makes this somewhat more palatable.
|
||||||
doTranslations: function() {
|
doTranslations: function() {
|
||||||
this.LABS_FEATURES[0].name = _t("New Composer & Autocomplete");
|
this.LABS_FEATURES[0].name = _t("Matrix Apps");
|
||||||
this.LABS_FEATURES[1].name = _t("Matrix Apps");
|
|
||||||
},
|
},
|
||||||
|
|
||||||
loadProfileInfo: function() {
|
loadProfileInfo: function() {
|
||||||
|
|
|
@ -226,21 +226,6 @@ export default class MessageComposer extends React.Component {
|
||||||
this.setState({inputState});
|
this.setState({inputState});
|
||||||
}
|
}
|
||||||
|
|
||||||
onUpArrow() {
|
|
||||||
return this.refs.autocomplete.onUpArrow();
|
|
||||||
}
|
|
||||||
|
|
||||||
onDownArrow() {
|
|
||||||
return this.refs.autocomplete.onDownArrow();
|
|
||||||
}
|
|
||||||
|
|
||||||
_tryComplete(): boolean {
|
|
||||||
if (this.refs.autocomplete) {
|
|
||||||
return this.refs.autocomplete.onCompletionClicked();
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
_onAutocompleteConfirm(range, completion) {
|
_onAutocompleteConfirm(range, completion) {
|
||||||
if (this.messageComposerInput) {
|
if (this.messageComposerInput) {
|
||||||
this.messageComposerInput.setDisplayedCompletion(range, completion);
|
this.messageComposerInput.setDisplayedCompletion(range, completion);
|
||||||
|
@ -267,8 +252,7 @@ export default class MessageComposer extends React.Component {
|
||||||
const uploadInputStyle = {display: 'none'};
|
const uploadInputStyle = {display: 'none'};
|
||||||
const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
|
const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
|
||||||
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
||||||
const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput" +
|
const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
|
||||||
(UserSettingsStore.isFeatureEnabled('rich_text_editor') ? "" : "Old"));
|
|
||||||
|
|
||||||
const controls = [];
|
const controls = [];
|
||||||
|
|
||||||
|
@ -351,8 +335,7 @@ export default class MessageComposer extends React.Component {
|
||||||
title={_t("Show Text Formatting Toolbar")}
|
title={_t("Show Text Formatting Toolbar")}
|
||||||
src="img/button-text-formatting.svg"
|
src="img/button-text-formatting.svg"
|
||||||
onClick={this.onToggleFormattingClicked}
|
onClick={this.onToggleFormattingClicked}
|
||||||
style={{visibility: this.state.showFormatting ||
|
style={{visibility: this.state.showFormatting ? 'hidden' : 'visible'}}
|
||||||
!UserSettingsStore.isFeatureEnabled('rich_text_editor') ? 'hidden' : 'visible'}}
|
|
||||||
key="controls_formatting" />
|
key="controls_formatting" />
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -367,10 +350,7 @@ export default class MessageComposer extends React.Component {
|
||||||
room={this.props.room}
|
room={this.props.room}
|
||||||
placeholder={placeholderText}
|
placeholder={placeholderText}
|
||||||
tryComplete={this._tryComplete}
|
tryComplete={this._tryComplete}
|
||||||
onUpArrow={this.onUpArrow}
|
|
||||||
onDownArrow={this.onDownArrow}
|
|
||||||
onFilesPasted={this.uploadFiles}
|
onFilesPasted={this.uploadFiles}
|
||||||
tabComplete={this.props.tabComplete} // used for old messagecomposerinput/tabcomplete
|
|
||||||
onContentChanged={this.onInputContentChanged}
|
onContentChanged={this.onInputContentChanged}
|
||||||
onInputStateChanged={this.onInputStateChanged} />,
|
onInputStateChanged={this.onInputStateChanged} />,
|
||||||
formattingButton,
|
formattingButton,
|
||||||
|
@ -389,18 +369,6 @@ export default class MessageComposer extends React.Component {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
let autoComplete;
|
|
||||||
if (UserSettingsStore.isFeatureEnabled('rich_text_editor')) {
|
|
||||||
autoComplete = <div className="mx_MessageComposer_autocomplete_wrapper">
|
|
||||||
<Autocomplete
|
|
||||||
ref="autocomplete"
|
|
||||||
onConfirm={this._onAutocompleteConfirm}
|
|
||||||
query={this.state.autocompleteQuery}
|
|
||||||
selection={this.state.selection} />
|
|
||||||
</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const {style, blockType} = this.state.inputState;
|
const {style, blockType} = this.state.inputState;
|
||||||
const formatButtons = ["bold", "italic", "strike", "underline", "code", "quote", "bullet", "numbullet"].map(
|
const formatButtons = ["bold", "italic", "strike", "underline", "code", "quote", "bullet", "numbullet"].map(
|
||||||
(name) => {
|
(name) => {
|
||||||
|
@ -424,7 +392,6 @@ export default class MessageComposer extends React.Component {
|
||||||
{controls}
|
{controls}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{UserSettingsStore.isFeatureEnabled('rich_text_editor') ?
|
|
||||||
<div className="mx_MessageComposer_formatbar_wrapper">
|
<div className="mx_MessageComposer_formatbar_wrapper">
|
||||||
<div className="mx_MessageComposer_formatbar" style={this.state.showFormatting ? {} : {display: 'none'}}>
|
<div className="mx_MessageComposer_formatbar" style={this.state.showFormatting ? {} : {display: 'none'}}>
|
||||||
{formatButtons}
|
{formatButtons}
|
||||||
|
@ -438,8 +405,7 @@ export default class MessageComposer extends React.Component {
|
||||||
className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
|
className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
|
||||||
src="img/icon-text-cancel.svg" />
|
src="img/icon-text-cancel.svg" />
|
||||||
</div>
|
</div>
|
||||||
</div>: null
|
</div>
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -908,14 +908,7 @@ MessageComposerInput.propTypes = {
|
||||||
// called with current plaintext content (as a string) whenever it changes
|
// called with current plaintext content (as a string) whenever it changes
|
||||||
onContentChanged: React.PropTypes.func,
|
onContentChanged: React.PropTypes.func,
|
||||||
|
|
||||||
onUpArrow: React.PropTypes.func,
|
|
||||||
|
|
||||||
onDownArrow: React.PropTypes.func,
|
|
||||||
|
|
||||||
onFilesPasted: React.PropTypes.func,
|
onFilesPasted: React.PropTypes.func,
|
||||||
|
|
||||||
// attempts to confirm currently selected completion, returns whether actually confirmed
|
|
||||||
tryComplete: React.PropTypes.func,
|
|
||||||
|
|
||||||
onInputStateChanged: React.PropTypes.func,
|
onInputStateChanged: React.PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
|
@ -27,14 +27,10 @@ describe('MessageComposerInput', () => {
|
||||||
mci = null,
|
mci = null,
|
||||||
room = testUtils.mkStubRoom('!DdJkzRliezrwpNebLk:matrix.org');
|
room = testUtils.mkStubRoom('!DdJkzRliezrwpNebLk:matrix.org');
|
||||||
|
|
||||||
// TODO Remove when RTE is out of labs.
|
|
||||||
|
|
||||||
beforeEach(function() {
|
beforeEach(function() {
|
||||||
testUtils.beforeEach(this);
|
testUtils.beforeEach(this);
|
||||||
sandbox = testUtils.stubClient(sandbox);
|
sandbox = testUtils.stubClient(sandbox);
|
||||||
client = MatrixClientPeg.get();
|
client = MatrixClientPeg.get();
|
||||||
UserSettingsStore.isFeatureEnabled = sinon.stub()
|
|
||||||
.withArgs('rich_text_editor').returns(true);
|
|
||||||
|
|
||||||
parentDiv = document.createElement('div');
|
parentDiv = document.createElement('div');
|
||||||
document.body.appendChild(parentDiv);
|
document.body.appendChild(parentDiv);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue