Fix editor bugs (#1281)

* focus editor on reply click

* fix emoji and sticker img object-fit

* fix cursor not moving with autocomplete

* stop sanitizing sending plain text body

* improve autocomplete query parsing

* add escape to turn off active editor toolbar item
This commit is contained in:
Ajay Bura 2023-06-14 03:47:18 +10:00 committed by GitHub
parent 6d199244ef
commit 2883b4c35b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 69 additions and 22 deletions

View file

@ -93,7 +93,8 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
const handleKeydown: KeyboardEventHandler = useCallback( const handleKeydown: KeyboardEventHandler = useCallback(
(evt) => { (evt) => {
onKeyDown?.(evt); onKeyDown?.(evt);
toggleKeyboardShortcut(editor, evt); const shortcutToggled = toggleKeyboardShortcut(editor, evt);
if (shortcutToggled) evt.preventDefault();
}, },
[editor, onKeyDown] [editor, onKeyDown]
); );

View file

@ -104,7 +104,7 @@ export function EmoticonAutocomplete({
as="img" as="img"
src={mx.mxcUrlToHttp(key) || key} src={mx.mxcUrlToHttp(key) || key}
alt={emoticon.shortcode} alt={emoticon.shortcode}
style={{ width: toRem(24), height: toRem(24) }} style={{ width: toRem(24), height: toRem(24), objectFit: 'contain' }}
/> />
) : ( ) : (
<Box <Box

View file

@ -23,13 +23,14 @@ export const getAutocompletePrefix = <TPrefix extends string>(
validPrefixes: readonly TPrefix[] validPrefixes: readonly TPrefix[]
): TPrefix | undefined => { ): TPrefix | undefined => {
const world = Editor.string(editor, queryRange); const world = Editor.string(editor, queryRange);
const prefix = world[0] as TPrefix | undefined; return validPrefixes.find((p) => world.startsWith(p));
if (!prefix) return undefined;
return validPrefixes.includes(prefix) ? prefix : undefined;
}; };
export const getAutocompleteQueryText = (editor: Editor, queryRange: BaseRange): string => export const getAutocompleteQueryText = (
Editor.string(editor, queryRange).slice(1); editor: Editor,
queryRange: BaseRange,
prefix: string
): string => Editor.string(editor, queryRange).slice(prefix.length);
export const getAutocompleteQuery = <TPrefix extends string>( export const getAutocompleteQuery = <TPrefix extends string>(
editor: Editor, editor: Editor,
@ -41,6 +42,6 @@ export const getAutocompleteQuery = <TPrefix extends string>(
return { return {
range: queryRange, range: queryRange,
prefix, prefix,
text: getAutocompleteQueryText(editor, queryRange), text: getAutocompleteQueryText(editor, queryRange, prefix),
}; };
}; };

View file

@ -2,11 +2,25 @@ import { BasePoint, BaseRange, Editor, Element, Point, Range, Transforms } from
import { BlockType, MarkType } from './Elements'; import { BlockType, MarkType } from './Elements';
import { EmoticonElement, FormattedText, HeadingLevel, LinkElement, MentionElement } from './slate'; import { EmoticonElement, FormattedText, HeadingLevel, LinkElement, MentionElement } from './slate';
const ALL_MARK_TYPE: MarkType[] = [
MarkType.Bold,
MarkType.Code,
MarkType.Italic,
MarkType.Spoiler,
MarkType.StrikeThrough,
MarkType.Underline,
];
export const isMarkActive = (editor: Editor, format: MarkType) => { export const isMarkActive = (editor: Editor, format: MarkType) => {
const marks = Editor.marks(editor); const marks = Editor.marks(editor);
return marks ? marks[format] === true : false; return marks ? marks[format] === true : false;
}; };
export const isAnyMarkActive = (editor: Editor) => {
const marks = Editor.marks(editor);
return marks && !!ALL_MARK_TYPE.find((type) => marks[type] === true);
};
export const toggleMark = (editor: Editor, format: MarkType) => { export const toggleMark = (editor: Editor, format: MarkType) => {
const isActive = isMarkActive(editor, format); const isActive = isMarkActive(editor, format);
@ -17,6 +31,10 @@ export const toggleMark = (editor: Editor, format: MarkType) => {
} }
}; };
export const removeAllMark = (editor: Editor) => {
ALL_MARK_TYPE.forEach((mark) => Editor.removeMark(editor, mark));
};
export const isBlockActive = (editor: Editor, format: BlockType) => { export const isBlockActive = (editor: Editor, format: BlockType) => {
const [match] = Editor.nodes(editor, { const [match] = Editor.nodes(editor, {
match: (node) => Element.isElement(node) && node.type === format, match: (node) => Element.isElement(node) && node.type === format,
@ -140,11 +158,11 @@ export const replaceWithElement = (editor: Editor, selectRange: BaseRange, eleme
}; };
export const moveCursor = (editor: Editor, withSpace?: boolean) => { export const moveCursor = (editor: Editor, withSpace?: boolean) => {
// without timeout it works properly when we select autocomplete with Tab or Space // without timeout move cursor doesn't works properly.
setTimeout(() => { setTimeout(() => {
Transforms.move(editor); Transforms.move(editor);
if (withSpace) editor.insertText(' '); if (withSpace) editor.insertText(' ');
}, 1); }, 100);
}; };
interface PointUntilCharOptions { interface PointUntilCharOptions {

View file

@ -1,7 +1,7 @@
import { isHotkey } from 'is-hotkey'; import { isHotkey } from 'is-hotkey';
import { KeyboardEvent } from 'react'; import { KeyboardEvent } from 'react';
import { Editor } from 'slate'; import { Editor } from 'slate';
import { isBlockActive, toggleBlock, toggleMark } from './common'; import { isAnyMarkActive, isBlockActive, removeAllMark, toggleBlock, toggleMark } from './common';
import { BlockType, MarkType } from './Elements'; import { BlockType, MarkType } from './Elements';
export const INLINE_HOTKEYS: Record<string, MarkType> = { export const INLINE_HOTKEYS: Record<string, MarkType> = {
@ -22,19 +22,42 @@ export const BLOCK_HOTKEYS: Record<string, BlockType> = {
}; };
const BLOCK_KEYS = Object.keys(BLOCK_HOTKEYS); const BLOCK_KEYS = Object.keys(BLOCK_HOTKEYS);
export const toggleKeyboardShortcut = (editor: Editor, event: KeyboardEvent<Element>) => { /**
BLOCK_KEYS.forEach((hotkey) => { * @return boolean true if shortcut is toggled.
*/
export const toggleKeyboardShortcut = (editor: Editor, event: KeyboardEvent<Element>): boolean => {
if (isHotkey('escape', event)) {
if (isAnyMarkActive(editor)) {
removeAllMark(editor);
return true;
}
console.log(isBlockActive(editor, BlockType.Paragraph));
if (!isBlockActive(editor, BlockType.Paragraph)) {
toggleBlock(editor, BlockType.Paragraph);
return true;
}
return false;
}
const blockToggled = BLOCK_KEYS.find((hotkey) => {
if (isHotkey(hotkey, event)) { if (isHotkey(hotkey, event)) {
event.preventDefault(); event.preventDefault();
toggleBlock(editor, BLOCK_HOTKEYS[hotkey]); toggleBlock(editor, BLOCK_HOTKEYS[hotkey]);
return true;
} }
return false;
}); });
if (blockToggled) return true;
if (!isBlockActive(editor, BlockType.CodeBlock)) const inlineToggled = isBlockActive(editor, BlockType.CodeBlock)
INLINE_KEYS.forEach((hotkey) => { ? false
if (isHotkey(hotkey, event)) { : INLINE_KEYS.find((hotkey) => {
event.preventDefault(); if (isHotkey(hotkey, event)) {
toggleMark(editor, INLINE_HOTKEYS[hotkey]); event.preventDefault();
} toggleMark(editor, INLINE_HOTKEYS[hotkey]);
}); return true;
}
return false;
});
return !!inlineToggled;
}; };

View file

@ -88,7 +88,7 @@ const elementToPlainText = (node: CustomElement, children: string): string => {
export const toPlainText = (node: Descendant | Descendant[]): string => { export const toPlainText = (node: Descendant | Descendant[]): string => {
if (Array.isArray(node)) return node.map((n) => toPlainText(n)).join(''); if (Array.isArray(node)) return node.map((n) => toPlainText(n)).join('');
if (Text.isText(node)) return sanitizeText(node.text); if (Text.isText(node)) return node.text;
const children = node.children.map((n) => toPlainText(n)).join(''); const children = node.children.map((n) => toPlainText(n)).join('');
return elementToPlainText(node, children); return elementToPlainText(node, children);

View file

@ -122,6 +122,7 @@ export const CustomEmojiImg = style([
{ {
width: toRem(32), width: toRem(32),
height: toRem(32), height: toRem(32),
objectFit: 'contain',
}, },
]); ]);
@ -130,5 +131,6 @@ export const StickerImg = style([
{ {
width: toRem(96), width: toRem(96),
height: toRem(96), height: toRem(96),
objectFit: 'contain',
}, },
]); ]);

View file

@ -373,6 +373,7 @@ function ImagePackSidebarStack({
style={{ style={{
width: toRem(24), width: toRem(24),
height: toRem(24), height: toRem(24),
objectFit: 'contain',
}} }}
src={mx.mxcUrlToHttp(pack.getPackAvatarUrl(usage) ?? '') || pack.avatarUrl} src={mx.mxcUrlToHttp(pack.getPackAvatarUrl(usage) ?? '') || pack.avatarUrl}
alt={label || 'Unknown Pack'} alt={label || 'Unknown Pack'}

View file

@ -184,12 +184,13 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
body, body,
formattedBody, formattedBody,
}); });
ReactEditor.focus(editor);
}; };
navigation.on(cons.events.navigation.REPLY_TO_CLICKED, handleReplyTo); navigation.on(cons.events.navigation.REPLY_TO_CLICKED, handleReplyTo);
return () => { return () => {
navigation.removeListener(cons.events.navigation.REPLY_TO_CLICKED, handleReplyTo); navigation.removeListener(cons.events.navigation.REPLY_TO_CLICKED, handleReplyTo);
}; };
}, [setReplyDraft]); }, [setReplyDraft, editor]);
const handleRemoveUpload = useCallback( const handleRemoveUpload = useCallback(
(upload: TUploadContent | TUploadContent[]) => { (upload: TUploadContent | TUploadContent[]) => {