Merge pull request #3133 from PaulSinghDev/main

Allow the <LinkFloatingToolbar /> component to be submitted with the 'enter' key when the <PlateEditor /> is contained within a <form></form>

.changeset/strong-queens-shout.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-utils": patch
+---
+
+`useFormInputProps`: Generic form input props inside an editor

apps/www/src/registry/default/plate-ui/link-floating-toolbar.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import { cn } from '@udecode/cn';
+import { useFormInputProps } from '@udecode/plate-common';
 import {
   type UseVirtualFloatingOptions,
   flip,
@@ -68,11 +69,14 @@ export function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {
     ref: editRef,
     unlinkButtonProps,
   } = useFloatingLinkEdit(editState);
+  const inputProps = useFormInputProps({
+    preventDefaultOnEnterKeydown: true,
+  });
 
   if (hidden) return null;
 
   const input = (
-    <div className="flex w-[330px] flex-col">
+    <div className="flex w-[330px] flex-col" {...inputProps}>
       <div className="flex items-center">
         <div className="flex items-center pl-3 text-muted-foreground">
           <Icons.link className="size-4" />
@@ -83,9 +87,7 @@ export function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {
           placeholder="Paste link"
         />
       </div>
-
       <Separator />
-
       <div className="flex items-center">
         <div className="flex items-center pl-3 text-muted-foreground">
           <Icons.text className="size-4" />

packages/heading/src/utils/index.ts

@@ -3,6 +3,6 @@
  */
 
 export * from './checkIn';
+export * from './getHeadingList';
 export * from './heightToTop';
 export * from './isHeading';
-export * from './getHeadingList';

packages/math/src/inline-equation/index.ts

@@ -7,3 +7,4 @@ export * from './types';
 export * from './components/index';
 export * from './hooks/index';
 export * from './transforms/index';
+export * from './utils/index';

packages/math/src/inline-equation/utils/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './setSelectionInlineEquation';

packages/plate-utils/src/index.ts

@@ -2,5 +2,6 @@
  * @file Automatically generated by barrelsby.
  */
 
+export * from './useFormInputProps';
 export * from './client/index';
 export * from './shared/index';

packages/plate-utils/src/shared/index.ts

@@ -4,6 +4,7 @@
 
 export * from './PlateElement';
 export * from './PlateLeaf';
+export * from './addSelectedRow';
 export * from './createNodeHOC';
 export * from './createNodesHOC';
 export * from './defaultsDeepToNodes';
@@ -12,4 +13,3 @@ export * from './moveSelectionByOffset';
 export * from './onKeyDownToggleElement';
 export * from './onKeyDownToggleMark';
 export * from './types/index';
-export * from './addSelectedRow'

packages/plate-utils/src/useFormInputProps.spec.tsx

@@ -0,0 +1,57 @@
+import { useFormInputProps } from './useFormInputProps';
+
+describe('useFormInputProps', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('will return an object with a props key regardless of whether the user provides a callback or sets preventDefaultOnEnterKeydown to true', () => {
+    const output = useFormInputProps();
+    expect(output.props).toBeDefined();
+    expect(Object.keys(output.props)).toHaveLength(0);
+  });
+
+  it('will return a callback for onKeyDownCapture when preventDefaultOnEnterKeydown is true', () => {
+    const output = useFormInputProps({ preventDefaultOnEnterKeydown: true });
+    expect(output.props).toBeDefined();
+    expect(Object.keys(output.props)).toHaveLength(1);
+    expect(output.props.onKeyDownCapture).toBeDefined();
+    expect(output.props.onKeyDownCapture instanceof Function).toBe(true);
+  });
+
+  it('will call event.preventDefault if the key is enter, and only if the key is enter', () => {
+    // Define mock for preventdefault
+    const preventDefaultMock = jest.fn();
+    // should trigger preventDefault
+    const eventWithEKeyEnter = {
+      key: 'Enter',
+      preventDefault: preventDefaultMock,
+    } as any;
+    // should trigger preventDefault
+    const eventWithKeyCode13 = {
+      keyCode: 13,
+      preventDefault: preventDefaultMock,
+    } as any;
+    // should not trigger preventDefault
+    const eventWithIrrelevantKey = {
+      keyCode: 30,
+      preventDefault: preventDefaultMock,
+    } as any;
+
+    const output = useFormInputProps({
+      preventDefaultOnEnterKeydown: true,
+    });
+
+    // call with enter key
+    output.props?.onKeyDownCapture?.(eventWithEKeyEnter);
+    expect(preventDefaultMock).toHaveBeenCalledTimes(1);
+
+    // call with keyCode 13
+    output.props?.onKeyDownCapture?.(eventWithKeyCode13);
+    expect(preventDefaultMock).toHaveBeenCalledTimes(2);
+
+    // call with irrelevant key
+    output.props?.onKeyDownCapture?.(eventWithIrrelevantKey);
+    expect(preventDefaultMock).toHaveBeenCalledTimes(2);
+  });
+});

packages/plate-utils/src/useFormInputProps.ts

@@ -0,0 +1,56 @@
+interface InputProps {
+  /**
+   * Should we activate the onKeyDownCapture handler to preventDefault when
+   * the user presses enter?
+   */
+  preventDefaultOnEnterKeydown?: boolean;
+}
+
+/**
+ * Hook to allow the user to spread a set of predefined props to the Div wrapper
+ * of an Input element
+ *
+ * @param param0 an options object which can be expanded to add further functionality
+ * @returns a props object which can be spread onto the element
+ */
+export const useFormInputProps = (options?: InputProps) => {
+  // Nothing provided to just return an empty object which can still be spread.
+  // If we need to add more functionality later we will still be able to do so
+  if (!options) return { props: {} };
+
+  // Destructure our options so we can use them
+  const { preventDefaultOnEnterKeydown } = options;
+
+  /**
+   * Handle the keydown capture event and prevent the default behaviour when the
+   * user presses enter.
+   *
+   * In the event the user presses enter on a field such as a link, prior to
+   * filling in both label and url, the default behaviour is to submit the form.
+   * This, ultimately, results in no link being added as you need to fill both
+   * fields to pass validation.
+   *
+   * By calling preventDefault we short circuit the form's submission thus
+   * allowing the user to continue filling in the other fields
+   *
+   * @param e The original event which was provided by the VDOM
+   * implement their own behaviour on this event
+   */
+  const handleEnterKeydownCapture = (
+    e: React.KeyboardEvent<HTMLDivElement>
+  ) => {
+    // Prevent the form from submitting
+    if (e.key === 'Enter' || e.keyCode === 13) {
+      e.preventDefault();
+    }
+  };
+
+  return {
+    props: {
+      onKeyDownCapture: preventDefaultOnEnterKeydown
+        ? (e: React.KeyboardEvent<HTMLDivElement>) =>
+            handleEnterKeydownCapture(e)
+        : undefined,
+    },
+  };
+};