PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix focus and toggling issues in formatting bar

Browse source
This commit is contained in:
Aviral Dasgupta 2016-09-08 02:46:56 +05:30
parent 8974442084
commit c11232742b
3 changed files with 23 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/RichText.js
View file

@ -22,6 +22,7 @@ const MARKDOWN_REGEX = {
BOLD: /([\*_])\1([\w\s]+?)\1\1/g,
HR: /(\n|^)((-|\*|_) *){3,}(\n|$)/g,
CODE: /`[^`]*`/g,
STRIKETHROUGH: /~{2}[^~]*~{2}/g,
};
const USERNAME_REGEX = /@\S+:\S+/g;
@ -121,7 +122,7 @@ export function getScopedRTDecorators(scope: any): CompositeDecorator {
}
export function getScopedMDDecorators(scope: any): CompositeDecorator {
let markdownDecorators = ['HR', 'BOLD', 'ITALIC', 'CODE'].map(
let markdownDecorators = ['HR', 'BOLD', 'ITALIC', 'CODE', 'STRIKETHROUGH'].map(
(style) => ({
strategy: (contentBlock, callback) => {
return findWithRegex(MARKDOWN_REGEX[style], contentBlock, callback);

11
src/components/views/rooms/MessageComposer.js
View file

@ -178,12 +178,11 @@ export default class MessageComposer extends React.Component {
onToggleFormattingClicked() {
UserSettingsStore.setSyncedSetting('MessageComposer.showFormatting', !this.state.showFormatting);
this.setState({showFormatting: !this.state.showFormatting});
this.messageComposerInput.focus();
}
onToggleMarkdownClicked() {
onToggleMarkdownClicked(e) {
e.preventDefault(); // don't steal focus from the editor!
this.messageComposerInput.enableRichtext(!this.state.inputState.isRichtextEnabled);
this.messageComposerInput.focus();
}
render() {
@ -292,13 +291,13 @@ export default class MessageComposer extends React.Component {
const active = style.includes(name) || blockType === name;
const suffix = active ? '-o-n' : '';
const onFormatButtonClicked = this.onFormatButtonClicked.bind(this, name);
const disabled = !this.state.inputState.isRichtextEnabled && ['strike', 'underline'].includes(name);
const disabled = !this.state.inputState.isRichtextEnabled && 'underline' === name;
const className = classNames("mx_MessageComposer_format_button", {
mx_MessageComposer_format_button_disabled: disabled,
});
return <img className={className}
title={name}
onClick={disabled ? null : onFormatButtonClicked}
onMouseDown={disabled ? null : onFormatButtonClicked}
key={name}
src={`img/button-text-${name}${suffix}.svg`}
height="17" />;
@ -319,7 +318,7 @@ export default class MessageComposer extends React.Component {
{formatButtons}
<div style={{flex: 1}}></div>
<img title={`Turn Markdown ${this.state.inputState.isRichtextEnabled ? 'on' : 'off'}`}
onClick={this.onToggleMarkdownClicked}
onMouseDown={this.onToggleMarkdownClicked}
className="mx_MessageComposer_formatbar_markdown"
src={`img/button-md-${!this.state.inputState.isRichtextEnabled}.png`} />
<img title="Hide Text Formatting Toolbar"

33
src/components/views/rooms/MessageComposerInput.js
View file

@ -83,7 +83,6 @@ export default class MessageComposerInput extends React.Component {
constructor(props, context) {
super(props, context);
this.onAction = this.onAction.bind(this);
this.focus = this.focus.bind(this);
this.handleReturn = this.handleReturn.bind(this);
this.handleKeyCommand = this.handleKeyCommand.bind(this);
this.setEditorState = this.setEditorState.bind(this);
@ -378,13 +377,10 @@ export default class MessageComposerInput extends React.Component {
}
}
focus(ev) {
this.refs.editor.focus();
}
setEditorState(editorState: EditorState) {
setEditorState(editorState: EditorState, cb = () => null) {
editorState = RichText.attachImmutableEntitiesToEmoji(editorState);
this.setState({editorState});
this.setState({editorState}, cb);
if (editorState.getCurrentContent().hasText()) {
this.onTypingActivity();
@ -402,19 +398,20 @@ export default class MessageComposerInput extends React.Component {
}
enableRichtext(enabled: boolean) {
let contentState = null;
if (enabled) {
const html = mdownToHtml(this.state.editorState.getCurrentContent().getPlainText());
const contentState = RichText.HTMLtoContentState(html);
this.setEditorState(this.createEditorState(enabled, contentState));
contentState = RichText.HTMLtoContentState(html);
} else {
let markdown = stateToMarkdown(this.state.editorState.getCurrentContent());
markdown = markdown.substring(0, markdown.length - 1); // stateToMarkdown tacks on an extra newline (?!?)
const contentState = ContentState.createFromText(markdown);
this.setEditorState(this.createEditorState(enabled, contentState));
contentState = ContentState.createFromText(markdown);
}
this.setState({
isRichtextEnabled: enabled,
this.setEditorState(this.createEditorState(enabled, contentState), () => {
this.setState({
isRichtextEnabled: enabled,
});
});
UserSettingsStore.setSyncedSetting('MessageComposerInput.isRichTextEnabled', enabled);
@ -447,6 +444,7 @@ export default class MessageComposerInput extends React.Component {
bold: text => `**${text}**`,
italic: text => `*${text}*`,
underline: text => `_${text}_`, // there's actually no valid underline in Markdown, but *shrug*
strike: text => `~~${text}~~`,
code: text => `\`${text}\``,
blockquote: text => text.split('\n').map(line => `> ${line}\n`).join(''),
'unordered-list-item': text => text.split('\n').map(line => `- ${line}\n`).join(''),
@ -590,6 +588,7 @@ export default class MessageComposerInput extends React.Component {
}
onFormatButtonClicked(name: "bold" | "italic" | "strike" | "code" | "underline" | "quote" | "bullet" | "numbullet", e) {
e.preventDefault(); // don't steal focus from the editor!
const command = {
code: 'code-block',
quote: 'blockquote',
@ -631,8 +630,9 @@ export default class MessageComposerInput extends React.Component {
};
}
onMarkdownToggleClicked() {
this.enableRichtext(!this.state.isRichtextEnabled);
onMarkdownToggleClicked(e) {
e.preventDefault(); // don't steal focus from the editor!
this.handleKeyCommand('toggle-mode');
}
render() {
@ -654,10 +654,9 @@ export default class MessageComposerInput extends React.Component {
});
return (
<div className={className}
onClick={ this.focus }>
<div className={className}>
<img className="mx_MessageComposer_input_markdownIndicator"
onClick={this.onMarkdownToggleClicked}
onMouseDown={this.onMarkdownToggleClicked}
title={`Markdown is ${this.state.isRichtextEnabled ? 'disabled' : 'enabled'}`}
src={`img/button-md-${!this.state.isRichtextEnabled}.png`} />
<Editor ref="editor"