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(
(evt) => {
onKeyDown?.(evt);
toggleKeyboardShortcut(editor, evt);
const shortcutToggled = toggleKeyboardShortcut(editor, evt);
if (shortcutToggled) evt.preventDefault();
},
[editor, onKeyDown]
);

View file

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

View file

@ -23,13 +23,14 @@ export const getAutocompletePrefix = <TPrefix extends string>(
validPrefixes: readonly TPrefix[]
): TPrefix | undefined => {
const world = Editor.string(editor, queryRange);
const prefix = world[0] as TPrefix | undefined;
if (!prefix) return undefined;
return validPrefixes.includes(prefix) ? prefix : undefined;
return validPrefixes.find((p) => world.startsWith(p));
};
export const getAutocompleteQueryText = (editor: Editor, queryRange: BaseRange): string =>
Editor.string(editor, queryRange).slice(1);
export const getAutocompleteQueryText = (
editor: Editor,
queryRange: BaseRange,
prefix: string
): string => Editor.string(editor, queryRange).slice(prefix.length);
export const getAutocompleteQuery = <TPrefix extends string>(
editor: Editor,
@ -41,6 +42,6 @@ export const getAutocompleteQuery = <TPrefix extends string>(
return {
range: queryRange,
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 { 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) => {
const marks = Editor.marks(editor);
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) => {
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) => {
const [match] = Editor.nodes(editor, {
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) => {
// without timeout it works properly when we select autocomplete with Tab or Space
// without timeout move cursor doesn't works properly.
setTimeout(() => {
Transforms.move(editor);
if (withSpace) editor.insertText(' ');
}, 1);
}, 100);
};
interface PointUntilCharOptions {

View file

@ -1,7 +1,7 @@
import { isHotkey } from 'is-hotkey';
import { KeyboardEvent } from 'react';
import { Editor } from 'slate';
import { isBlockActive, toggleBlock, toggleMark } from './common';
import { isAnyMarkActive, isBlockActive, removeAllMark, toggleBlock, toggleMark } from './common';
import { BlockType, MarkType } from './Elements';
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);
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)) {
event.preventDefault();
toggleBlock(editor, BLOCK_HOTKEYS[hotkey]);
return true;
}
return false;
});
if (blockToggled) return true;
if (!isBlockActive(editor, BlockType.CodeBlock))
INLINE_KEYS.forEach((hotkey) => {
if (isHotkey(hotkey, event)) {
event.preventDefault();
toggleMark(editor, INLINE_HOTKEYS[hotkey]);
}
});
const inlineToggled = isBlockActive(editor, BlockType.CodeBlock)
? false
: INLINE_KEYS.find((hotkey) => {
if (isHotkey(hotkey, event)) {
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 => {
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('');
return elementToPlainText(node, children);

View file

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

View file

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

View file

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