mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-24 10:15:43 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3389 from matrix-org/bwindels/cider-format-shortcuts

Browse source 
New composer: formatting keyboard shortcuts
This commit is contained in:
Bruno Windels 2019-09-06 09:09:47 +00:00 committed by GitHub
commit 556ccf45dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
res/css/views/rooms/_MessageComposerFormatBar.scss
View file

@ -81,6 +81,13 @@ limitations under the License.
.mx_MessageComposerFormatBar_buttonTooltip {
white-space: nowrap;
font-size: 12px;
font-size: 13px;
font-weight: 600;
min-width: 54px;
text-align: center;
.mx_MessageComposerFormatBar_tooltipShortcut {
font-size: 9px;
opacity: 0.7;
}
}

28
src/components/views/rooms/BasicMessageComposer.js
View file

@ -41,6 +41,10 @@ const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.sourc
const IS_MAC = navigator.platform.indexOf("Mac") !== -1;
function ctrlShortcutLabel(key) {
return (IS_MAC ? "⌘" : "Ctrl") + "+" + key;
}
function cloneSelection(selection) {
return {
anchorNode: selection.anchorNode,
@ -266,8 +270,20 @@ export default class BasicMessageEditor extends React.Component {
const model = this.props.model;
const modKey = IS_MAC ? event.metaKey : event.ctrlKey;
let handled = false;
// format bold
if (modKey && event.key === "b") {
this._onFormatAction("bold");
handled = true;
// format italics
} else if (modKey && event.key === "i") {
this._onFormatAction("italics");
handled = true;
// format quote
} else if (modKey && event.key === ">") {
this._onFormatAction("quote");
handled = true;
// undo
if (modKey && event.key === "z") {
} else if (modKey && event.key === "z") {
if (this.historyManager.canUndo()) {
const {parts, caret} = this.historyManager.undo(this.props.model);
// pass matching inputType so historyManager doesn't push echo
@ -418,6 +434,9 @@ export default class BasicMessageEditor extends React.Component {
this._editorRef,
this.props.model,
document.getSelection());
if (range.length === 0) {
return;
}
switch (action) {
case "bold":
formatInline(range, "**");
@ -458,10 +477,15 @@ export default class BasicMessageEditor extends React.Component {
});
const MessageComposerFormatBar = sdk.getComponent('rooms.MessageComposerFormatBar');
const shortcuts = {
bold: ctrlShortcutLabel("B"),
italics: ctrlShortcutLabel("I"),
quote: ctrlShortcutLabel(">"),
};
return (<div className={classes}>
{ autoComplete }
<MessageComposerFormatBar ref={ref => this._formatBarRef = ref} onAction={this._onFormatAction} />
<MessageComposerFormatBar ref={ref => this._formatBarRef = ref} onAction={this._onFormatAction} shortcuts={shortcuts} />
<div
className="mx_BasicMessageComposer_input"
contentEditable="true"

17
src/components/views/rooms/MessageComposerFormatBar.js
View file

@ -23,15 +23,16 @@ import sdk from '../../../index';
export default class MessageComposerFormatBar extends React.PureComponent {
static propTypes = {
onAction: PropTypes.func.isRequired,
shortcuts: PropTypes.object.isRequired,
}
render() {
return (<div className="mx_MessageComposerFormatBar" ref={ref => this._formatBarRef = ref}>
<FormatButton label={_t("Bold")} onClick={() => this.props.onAction("bold")} icon="Bold" />
<FormatButton label={_t("Italics")} onClick={() => this.props.onAction("italics")} icon="Italic" />
<FormatButton shortcut={this.props.shortcuts.bold} label={_t("Bold")} onClick={() => this.props.onAction("bold")} icon="Bold" />
<FormatButton shortcut={this.props.shortcuts.italics} label={_t("Italics")} onClick={() => this.props.onAction("italics")} icon="Italic" />
<FormatButton label={_t("Strikethrough")} onClick={() => this.props.onAction("strikethrough")} icon="Strikethrough" />
<FormatButton label={_t("Code block")} onClick={() => this.props.onAction("code")} icon="Code" />
<FormatButton label={_t("Quote")} onClick={() => this.props.onAction("quote")} icon="Quote" />
<FormatButton shortcut={this.props.shortcuts.quote} label={_t("Quote")} onClick={() => this.props.onAction("quote")} icon="Quote" />
</div>);
}
@ -66,13 +67,21 @@ class FormatButton extends React.PureComponent {
label: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
icon: PropTypes.string.isRequired,
shortcut: PropTypes.string,
}
render() {
const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip');
const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`;
let shortcut;
if (this.props.shortcut) {
shortcut = <div className="mx_MessageComposerFormatBar_tooltipShortcut">{this.props.shortcut}</div>;
}
const tooltipContent = (
<div className="mx_MessageComposerFormatBar_buttonTooltip">{this.props.label}</div>
<div className="mx_MessageComposerFormatBar_buttonTooltip">
<div>{this.props.label}</div>
{shortcut}
</div>
);
return (