Struggling to use in a Chat application (handling line breaks, paragraphs, "Enter", etc.) #7060
-
Hi, I've been struggling to get Lexical to work well in a chat-like application (e.g. Slack, Discord, Teams). The main problem is the need to use the I've searched many issues and discussions, they didn't answer my problems, but I found a way to mimic SendPlugin.tsximport {useEffect} from 'react';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {COMMAND_PRIORITY_LOW, INSERT_PARAGRAPH_COMMAND, KEY_ENTER_COMMAND} from 'lexical';
type Props = {
onSend: () => void;
};
export function SendPlugin({onSend}: Props): null {
const [editor] = useLexicalComposerContext();
useEffect(() => {
return editor.registerCommand(
KEY_ENTER_COMMAND,
event => {
if (!event) {
return false;
}
event.preventDefault();
// Mimic the "Enter" behavior when a user press "Shift + Enter"
if (event.shiftKey) {
return editor.dispatchCommand(INSERT_PARAGRAPH_COMMAND, undefined);
}
// When sending a message with "Enter", we want to prevent the default behavior (new line)
onSend();
return true;
},
COMMAND_PRIORITY_LOW,
);
}, [editor, onSend]);
return null;
} And then the real battle begins. I can no longer format my text the way I wanted to, an example:
If I enter these in the input and export them to markdown, I'll get something like this
The output differs from the input because Lexical created a separate paragraph for each of these words, even though "first" and "second" visually have only one space between them (1x I tried using However, it has a long list of limitations. I couldn't combine headings because my multi-line text was only one paragraph. In the example above, after selecting "first" and pressing the "Heading 1" format button, the whole thing became one heading. The same goes for lists when you create something like this:
and select both, and then try to format them as an unordered list, I'll get:
These are just two fairly basic examples, but I think I'd get a lot more with this solution. In summary, is there a better way to use Lexical (along with the rich text features) within a chat application? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
Hi @etrepum, would you mind taking a look? I'd greatly appreciate any suggestions you might have :) |
Beta Was this translation helpful? Give feedback.
-
I have found a way to deal with incorrect linebreaks, just set
|
Beta Was this translation helpful? Give feedback.
I have found a way to deal with incorrect linebreaks, just set
shouldPreserveNewLines
totrue
.