diff --git a/packages/ui/components/editor/Editor.tsx b/packages/ui/components/editor/Editor.tsx index 66c88c5274..1f9cc24a61 100644 --- a/packages/ui/components/editor/Editor.tsx +++ b/packages/ui/components/editor/Editor.tsx @@ -23,6 +23,7 @@ import AutoLinkPlugin from "./plugins/AutoLinkPlugin"; import EditablePlugin from "./plugins/EditablePlugin"; import PlainTextPlugin from "./plugins/PlainTextPlugin"; import ToolbarPlugin from "./plugins/ToolbarPlugin"; +import CustomEnterKeyPlugin from "./plugins/customEnterKeyPlugin"; import "./stylesEditor.css"; /* @@ -111,6 +112,7 @@ export const Editor = (props: TextEditorProps) => { + {props?.variables ? : null} ( + + } + placeholder={
Enter some text...
} + ErrorBoundary={LexicalErrorBoundary} + /> + +
+); + +describe("Editor", () => { + describe("CustomEnterKeyPlugin", () => { + let container: HTMLElement | null = null; + + beforeEach(() => { + container = render().container; + }); + + afterEach(() => { + container = null; + }); + + it("should insert a line break on Enter key press", async () => { + if (container === null) { + throw new Error("Container is null"); + } + const editorElement = container.querySelector('[contenteditable="true"]') as HTMLElement; + + editorElement.focus(); + + const paragraphElement = editorElement.querySelector("p") as HTMLElement; + fireEvent.keyDown(editorElement, { key: "Enter", code: "Enter", keycode: 13 }); + + await waitFor(() => { + const brElements = paragraphElement?.querySelectorAll("br"); + + expect(brElements?.length).toBe(1); + }); + }); + }); +}); diff --git a/packages/ui/components/editor/plugins/customEnterKeyPlugin.tsx b/packages/ui/components/editor/plugins/customEnterKeyPlugin.tsx new file mode 100644 index 0000000000..177e08e7f8 --- /dev/null +++ b/packages/ui/components/editor/plugins/customEnterKeyPlugin.tsx @@ -0,0 +1,40 @@ +"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;