hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix hotkeys (#1468)

Browse source 
* use hotkey using key instead of which (default)

* remove shift from block formatting hotkeys

* smartly exit formatting with backspace

* set markdown to off by default

* exit formatting with escape
This commit is contained in:
Ajay Bura 2023-10-21 18:14:33 +11:00 committed by GitHub
parent 5dc613cd79
commit d5ff55e23e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 65 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/app/components/editor/Toolbar.tsx
View file

@ -261,33 +261,22 @@ export function Toolbar() {
<BlockButton
format={BlockType.BlockQuote}
icon={Icons.BlockQuote}
tooltip={
<BtnTooltip text="Block Quote" shortCode={`${modKey} + ${KeySymbol.Shift} + '`} />
}
tooltip={<BtnTooltip text="Block Quote" shortCode={`${modKey} + '`} />}
/>
<BlockButton
format={BlockType.CodeBlock}
icon={Icons.BlockCode}
tooltip={
<BtnTooltip text="Block Code" shortCode={`${modKey} + ${KeySymbol.Shift} + ;`} />
}
tooltip={<BtnTooltip text="Block Code" shortCode={`${modKey} + ;`} />}
/>
<BlockButton
format={BlockType.OrderedList}
icon={Icons.OrderList}
tooltip={
<BtnTooltip text="Ordered List" shortCode={`${modKey} + ${KeySymbol.Shift} + 7`} />
}
tooltip={<BtnTooltip text="Ordered List" shortCode={`${modKey} + 7`} />}
/>
<BlockButton
format={BlockType.UnorderedList}
icon={Icons.UnorderList}
tooltip={
<BtnTooltip
text="Unordered List"
shortCode={`${modKey} + ${KeySymbol.Shift} + 8`}
/>
}
tooltip={<BtnTooltip text="Unordered List" shortCode={`${modKey} + 8`} />}
/>
<HeadingBlockButton />
</Box>
@ -296,7 +285,9 @@ export function Toolbar() {
<Line variant="SurfaceVariant" direction="Vertical" style={{ height: toRem(12) }} />
<Box shrink="No" gap="100">
<ExitFormatting
tooltip={<BtnTooltip text="Exit Formatting" shortCode={`${modKey} + E`} />}
tooltip={
<BtnTooltip text="Exit Formatting" shortCode={`Escape, ${modKey} + E`} />
}
/>
</Box>
</>

6
src/app/components/editor/autocomplete/AutocompleteMenu.tsx
View file

@ -1,6 +1,6 @@
import React, { ReactNode } from 'react';
import FocusTrap from 'focus-trap-react';
import isHotkey from 'is-hotkey';
import { isKeyHotkey } from 'is-hotkey';
import { Header, Menu, Scroll, config } from 'folds';
import * as css from './AutocompleteMenu.css';
@ -22,8 +22,8 @@ export function AutocompleteMenu({ headerContent, requestClose, children }: Auto
returnFocusOnDeactivate: false,
clickOutsideDeactivates: true,
allowOutsideClick: true,
isKeyForward: (evt: KeyboardEvent) => isHotkey('arrowdown', evt),
isKeyBackward: (evt: KeyboardEvent) => isHotkey('arrowup', evt),
isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
}}
>
<Menu className={css.AutocompleteMenu}>

47
src/app/components/editor/keyboard.ts
View file

@ -1,6 +1,6 @@
import { isHotkey } from 'is-hotkey';
import { isKeyHotkey } from 'is-hotkey';
import { KeyboardEvent } from 'react';
import { Editor } from 'slate';
import { Editor, Range } from 'slate';
import { isAnyMarkActive, isBlockActive, removeAllMark, toggleBlock, toggleMark } from './utils';
import { BlockType, MarkType } from './types';
@ -15,10 +15,10 @@ export const INLINE_HOTKEYS: Record<string, MarkType> = {
const INLINE_KEYS = Object.keys(INLINE_HOTKEYS);
export const BLOCK_HOTKEYS: Record<string, BlockType> = {
'mod+shift+7': BlockType.OrderedList,
'mod+shift+8': BlockType.UnorderedList,
"mod+shift+'": BlockType.BlockQuote,
'mod+shift+;': BlockType.CodeBlock,
'mod+7': BlockType.OrderedList,
'mod+8': BlockType.UnorderedList,
"mod+'": BlockType.BlockQuote,
'mod+;': BlockType.CodeBlock,
};
const BLOCK_KEYS = Object.keys(BLOCK_HOTKEYS);
@ -26,7 +26,36 @@ const BLOCK_KEYS = Object.keys(BLOCK_HOTKEYS);
* @return boolean true if shortcut is toggled.
*/
export const toggleKeyboardShortcut = (editor: Editor, event: KeyboardEvent<Element>): boolean => {
if (isHotkey('mod+e', event)) {
if (isKeyHotkey('backspace', event) && editor.selection && Range.isCollapsed(editor.selection)) {
const startPoint = Range.start(editor.selection);
if (startPoint.offset !== 0) return false;
const [parentNode, parentPath] = Editor.parent(editor, startPoint);
if (Editor.isEditor(parentNode)) return false;
if (parentNode.type === BlockType.Heading) {
toggleBlock(editor, BlockType.Paragraph);
return true;
}
if (
parentNode.type === BlockType.CodeLine ||
parentNode.type === BlockType.QuoteLine ||
parentNode.type === BlockType.ListItem
) {
// exit formatting only when line block
// is first of last of it's parent
const parentLocation = { at: parentPath };
const [previousNode] = Editor.previous(editor, parentLocation) ?? [];
const [nextNode] = Editor.next(editor, parentLocation) ?? [];
if (!previousNode || !nextNode) {
toggleBlock(editor, BlockType.Paragraph);
return true;
}
}
}
if (isKeyHotkey('mod+e', event) || isKeyHotkey('escape', event)) {
if (isAnyMarkActive(editor)) {
removeAllMark(editor);
return true;
@ -40,7 +69,7 @@ export const toggleKeyboardShortcut = (editor: Editor, event: KeyboardEvent<Elem
}
const blockToggled = BLOCK_KEYS.find((hotkey) => {
if (isHotkey(hotkey, event)) {
if (isKeyHotkey(hotkey, event)) {
event.preventDefault();
toggleBlock(editor, BLOCK_HOTKEYS[hotkey]);
return true;
@ -52,7 +81,7 @@ export const toggleKeyboardShortcut = (editor: Editor, event: KeyboardEvent<Elem
const inlineToggled = isBlockActive(editor, BlockType.CodeBlock)
? false
: INLINE_KEYS.find((hotkey) => {
if (isHotkey(hotkey, event)) {
if (isKeyHotkey(hotkey, event)) {
event.preventDefault();
toggleMark(editor, INLINE_HOTKEYS[hotkey]);
return true;

6
src/app/components/emoji-board/EmojiBoard.tsx
View file

@ -28,7 +28,7 @@ import {
toRem,
} from 'folds';
import FocusTrap from 'focus-trap-react';
import isHotkey from 'is-hotkey';
import { isKeyHotkey } from 'is-hotkey';
import classNames from 'classnames';
import { MatrixClient, Room } from 'matrix-js-sdk';
import { atom, useAtomValue, useSetAtom } from 'jotai';
@ -769,9 +769,9 @@ export function EmojiBoard({
clickOutsideDeactivates: true,
allowOutsideClick: true,
isKeyForward: (evt: KeyboardEvent) =>
!editableActiveElement() && isHotkey(['arrowdown', 'arrowright'], evt),
!editableActiveElement() && isKeyHotkey(['arrowdown', 'arrowright'], evt),
isKeyBackward: (evt: KeyboardEvent) =>
!editableActiveElement() && isHotkey(['arrowup', 'arrowleft'], evt),
!editableActiveElement() && isKeyHotkey(['arrowup', 'arrowleft'], evt),
}}
>
<EmojiBoardLayout

8
src/app/organisms/room/RoomInput.tsx
View file

@ -9,7 +9,7 @@ import React, {
useState,
} from 'react';
import { useAtom } from 'jotai';
import isHotkey from 'is-hotkey';
import { isKeyHotkey } from 'is-hotkey';
import { EventType, IContent, MsgType, Room } from 'matrix-js-sdk';
import { ReactEditor } from 'slate-react';
import { Transforms, Editor } from 'slate';
@ -319,11 +319,11 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
const handleKeyDown: KeyboardEventHandler = useCallback(
(evt) => {
if (enterForNewline ? isHotkey('shift+enter', evt) : isHotkey('enter', evt)) {
if (enterForNewline ? isKeyHotkey('shift+enter', evt) : isKeyHotkey('enter', evt)) {
evt.preventDefault();
submit();
}
if (isHotkey('escape', evt)) {
if (isKeyHotkey('escape', evt)) {
evt.preventDefault();
setReplyDraft();
}
@ -333,7 +333,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
const handleKeyUp: KeyboardEventHandler = useCallback(
(evt) => {
if (isHotkey('escape', evt)) {
if (isKeyHotkey('escape', evt)) {
evt.preventDefault();
return;
}

4
src/app/organisms/room/RoomTimeline.tsx
View file

@ -43,7 +43,7 @@ import {
config,
toRem,
} from 'folds';
import isHotkey from 'is-hotkey';
import { isKeyHotkey } from 'is-hotkey';
import Linkify from 'linkify-react';
import {
decryptFile,
@ -725,7 +725,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
useCallback(
(evt) => {
if (
isHotkey('arrowup', evt) &&
isKeyHotkey('arrowup', evt) &&
editableActiveElement() &&
document.activeElement?.getAttribute('data-editable-name') === 'RoomInput' &&
isEmptyEditor(editor)

8
src/app/organisms/room/message/MessageEditor.tsx
View file

@ -3,7 +3,7 @@ import { Box, Chip, Icon, IconButton, Icons, Line, PopOut, Spinner, Text, as, co
import { Editor, Transforms } from 'slate';
import { ReactEditor } from 'slate-react';
import { IContent, MatrixEvent, RelationType, Room } from 'matrix-js-sdk';
import isHotkey from 'is-hotkey';
import { isKeyHotkey } from 'is-hotkey';
import {
AUTOCOMPLETE_PREFIXES,
AutocompletePrefix,
@ -120,11 +120,11 @@ export const MessageEditor = as<'div', MessageEditorProps>(
const handleKeyDown: KeyboardEventHandler = useCallback(
(evt) => {
if (enterForNewline ? isHotkey('shift+enter', evt) : isHotkey('enter', evt)) {
if (enterForNewline ? isKeyHotkey('shift+enter', evt) : isKeyHotkey('enter', evt)) {
evt.preventDefault();
handleSave();
}
if (isHotkey('escape', evt)) {
if (isKeyHotkey('escape', evt)) {
evt.preventDefault();
onCancel();
}
@ -134,7 +134,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
const handleKeyUp: KeyboardEventHandler = useCallback(
(evt) => {
if (isHotkey('escape', evt)) {
if (isKeyHotkey('escape', evt)) {
evt.preventDefault();
return;
}

2
src/app/state/settings.ts
View file

@ -28,7 +28,7 @@ export interface Settings {
const defaultSettings: Settings = {
themeIndex: 0,
useSystemTheme: true,
isMarkdown: true,
isMarkdown: false,
editorToolbar: false,
useSystemEmoji: false,

6
src/app/utils/keyboard.ts
View file

@ -1,4 +1,4 @@
import isHotkey from 'is-hotkey';
import { isKeyHotkey } from 'is-hotkey';
import { KeyboardEventHandler } from 'react';
export interface KeyboardEventLike {
@ -12,14 +12,14 @@ export interface KeyboardEventLike {
}
export const onTabPress = (evt: KeyboardEventLike, callback: () => void) => {
if (isHotkey('tab', evt)) {
if (isKeyHotkey('tab', evt)) {
evt.preventDefault();
callback();
}
};
export const preventScrollWithArrowKey: KeyboardEventHandler = (evt) => {
if (isHotkey(['arrowup', 'arrowright', 'arrowdown', 'arrowleft'], evt)) {
if (isKeyHotkey(['arrowup', 'arrowright', 'arrowdown', 'arrowleft'], evt)) {
evt.preventDefault();
}
};