Files
calendar/packages/ui/components/editor/plugins/customEnterKeyPlugin.tsx
T
564497ec2a feat(lexicalEditor): custom enter-key plugin (#15952)
* 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>
2025-02-24 14:12:12 +05:30

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;