mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-12 18:20:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
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