* fix(team-description): break lines rendering * chore(EventTypeDescription): useBreakLine hook for handling html line breaks * feat(lexicalEditor): custom enter-key plugin * test(customEditorPlugin): enter key usage * Update customEnterKeyPlugin.tsx --------- Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
41 lines
970 B
TypeScript
41 lines
970 B
TypeScript
"use client";
|
|
|
|
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
|
import {
|
|
$createLineBreakNode,
|
|
$getSelection,
|
|
$isRangeSelection,
|
|
COMMAND_PRIORITY_HIGH,
|
|
KEY_ENTER_COMMAND,
|
|
} from "lexical";
|
|
import { useEffect } from "react";
|
|
|
|
const CustomEnterKeyPlugin = () => {
|
|
const [editor] = useLexicalComposerContext();
|
|
|
|
useEffect(() => {
|
|
const removeEnterCommand = editor.registerCommand(
|
|
KEY_ENTER_COMMAND,
|
|
(event: any) => {
|
|
const selection = $getSelection();
|
|
if ($isRangeSelection(selection)) {
|
|
event.preventDefault();
|
|
const lineBreakNode = $createLineBreakNode();
|
|
selection.insertNodes([lineBreakNode]);
|
|
return true;
|
|
}
|
|
return false; // any failure case of not selection
|
|
},
|
|
COMMAND_PRIORITY_HIGH
|
|
);
|
|
|
|
return () => {
|
|
removeEnterCommand();
|
|
};
|
|
}, [editor]);
|
|
|
|
return null;
|
|
};
|
|
|
|
export default CustomEnterKeyPlugin;
|