Fix edit related bugs (#1477)

* fix missing empty line on edit

* fix edit save after adding formatting to plaintext

* fix reading edit content with wrong key
This commit is contained in:
Ajay Bura 2023-10-23 21:42:27 +11:00 committed by GitHub
parent b80f801d23
commit 1ff312d236
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 15 deletions

View file

@ -138,6 +138,7 @@ const parseBlockquoteNode = (node: Element): BlockQuoteElement => {
} }
if (isTag(child)) { if (isTag(child)) {
if (child.name === 'br') { if (child.name === 'br') {
lineHolder.push({ text: '' });
appendLine(); appendLine();
return; return;
} }
@ -202,6 +203,7 @@ const parseListNode = (node: Element): OrderedListElement | UnorderedListElement
} }
if (isTag(child)) { if (isTag(child)) {
if (child.name === 'br') { if (child.name === 'br') {
lineHolder.push({ text: '' });
appendLine(); appendLine();
return; return;
} }
@ -260,6 +262,7 @@ export const domToEditorInput = (domNodes: ChildNode[]): Descendant[] => {
} }
if (isTag(node)) { if (isTag(node)) {
if (node.name === 'br') { if (node.name === 'br') {
lineHolder.push({ text: '' });
appendLine(); appendLine();
return; return;
} }

View file

@ -615,6 +615,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
if (document.hasFocus()) { if (document.hasFocus()) {
scrollToBottomRef.current.count += 1; scrollToBottomRef.current.count += 1;
scrollToBottomRef.current.smooth = true; scrollToBottomRef.current.smooth = true;
} else if (!unreadInfo) {
setUnreadInfo(getRoomUnreadInfo(room));
} }
setTimeline((ct) => ({ setTimeline((ct) => ({
...ct, ...ct,
@ -919,7 +921,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
if (!replyEvt) return; if (!replyEvt) return;
const editedReply = getEditedEvent(replyId, replyEvt, room.getUnfilteredTimelineSet()); const editedReply = getEditedEvent(replyId, replyEvt, room.getUnfilteredTimelineSet());
const { body, formatted_body: formattedBody }: Record<string, string> = const { body, formatted_body: formattedBody }: Record<string, string> =
editedReply?.getContent()['m.new.content'] ?? replyEvt.getContent(); editedReply?.getContent()['m.new_content'] ?? replyEvt.getContent();
const senderId = replyEvt.getSender(); const senderId = replyEvt.getSender();
if (senderId && typeof body === 'string') { if (senderId && typeof body === 'string') {
setReplyDraft({ setReplyDraft({
@ -982,7 +984,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
renderText: (mEventId, mEvent, timelineSet) => { renderText: (mEventId, mEvent, timelineSet) => {
const editedEvent = getEditedEvent(mEventId, mEvent, timelineSet); const editedEvent = getEditedEvent(mEventId, mEvent, timelineSet);
const { body, formatted_body: customBody }: Record<string, unknown> = const { body, formatted_body: customBody }: Record<string, unknown> =
editedEvent?.getContent()['m.new.content'] ?? mEvent.getContent(); editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent();
if (typeof body !== 'string') return null; if (typeof body !== 'string') return null;
return ( return (
@ -1002,7 +1004,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
renderEmote: (mEventId, mEvent, timelineSet) => { renderEmote: (mEventId, mEvent, timelineSet) => {
const editedEvent = getEditedEvent(mEventId, mEvent, timelineSet); const editedEvent = getEditedEvent(mEventId, mEvent, timelineSet);
const { body, formatted_body: customBody } = const { body, formatted_body: customBody } =
editedEvent?.getContent()['m.new.content'] ?? mEvent.getContent(); editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent();
const senderId = mEvent.getSender() ?? ''; const senderId = mEvent.getSender() ?? '';
const senderDisplayName = const senderDisplayName =
@ -1027,7 +1029,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
renderNotice: (mEventId, mEvent, timelineSet) => { renderNotice: (mEventId, mEvent, timelineSet) => {
const editedEvent = getEditedEvent(mEventId, mEvent, timelineSet); const editedEvent = getEditedEvent(mEventId, mEvent, timelineSet);
const { body, formatted_body: customBody }: Record<string, unknown> = const { body, formatted_body: customBody }: Record<string, unknown> =
editedEvent?.getContent()['m.new.content'] ?? mEvent.getContent(); editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent();
if (typeof body !== 'string') return null; if (typeof body !== 'string') return null;
return ( return (

View file

@ -53,16 +53,22 @@ export const MessageEditor = as<'div', MessageEditorProps>(
const [autocompleteQuery, setAutocompleteQuery] = const [autocompleteQuery, setAutocompleteQuery] =
useState<AutocompleteQuery<AutocompletePrefix>>(); useState<AutocompleteQuery<AutocompletePrefix>>();
const getPrevBodyAndFormattedBody = useCallback(() => { const getPrevBodyAndFormattedBody = useCallback((): [
string | undefined,
string | undefined
] => {
const evtId = mEvent.getId()!; const evtId = mEvent.getId()!;
const evtTimeline = room.getTimelineForEvent(evtId); const evtTimeline = room.getTimelineForEvent(evtId);
const editedEvent = const editedEvent =
evtTimeline && getEditedEvent(evtId, mEvent, evtTimeline.getTimelineSet()); evtTimeline && getEditedEvent(evtId, mEvent, evtTimeline.getTimelineSet());
const { body, formatted_body: customHtml }: Record<string, unknown> = const { body, formatted_body: customHtml }: Record<string, unknown> =
editedEvent?.getContent()['m.new.content'] ?? mEvent.getContent(); editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent();
return [body, customHtml]; return [
typeof body === 'string' ? body : undefined,
typeof customHtml === 'string' ? customHtml : undefined,
];
}, [room, mEvent]); }, [room, mEvent]);
const [saveState, save] = useAsyncCallback( const [saveState, save] = useAsyncCallback(
@ -78,14 +84,17 @@ export const MessageEditor = as<'div', MessageEditorProps>(
const [prevBody, prevCustomHtml] = getPrevBodyAndFormattedBody(); const [prevBody, prevCustomHtml] = getPrevBodyAndFormattedBody();
if (plainText === '') return undefined; if (plainText === '') return undefined;
if ( if (prevBody) {
typeof prevCustomHtml === 'string' && if (prevCustomHtml && trimReplyFromFormattedBody(prevCustomHtml) === customHtml) {
trimReplyFromFormattedBody(prevCustomHtml) === customHtml return undefined;
) { }
return undefined; if (
} !prevCustomHtml &&
if (!prevCustomHtml && typeof prevBody === 'string' && prevBody === plainText) { prevBody === plainText &&
return undefined; customHtmlEqualsPlainText(customHtml, plainText)
) {
return undefined;
}
} }
const newContent: IContent = { const newContent: IContent = {