Merge pull request #137 from brainstormforce/SUR-312

SUR-312 - UAT feedback - Editor input space issue

src/components/editor-input/editor-input.jsx

@@ -59,7 +59,9 @@ const EditorInputComponent = (
 		menuComponent,
 		menuItemComponent,
 		className,
+		wrapperClassName,
 		disabled = false,
+		autoSpaceAfterMention = false,
 	},
 	ref
 ) => {
@@ -94,7 +96,8 @@ const EditorInputComponent = (
 				'relative w-full',
 				editorCommonClassNames,
 				editorInputClassNames[ size ],
-				disabled && editorDisabledClassNames
+				disabled && editorDisabledClassNames,
+				wrapperClassName
 			) }
 		>
 			<LexicalComposer initialConfig={ initialConfig }>
@@ -123,6 +126,7 @@ const EditorInputComponent = (
 					by={ by }
 					optionsArray={ options }
 					trigger={ trigger }
+					autoSpace={ autoSpaceAfterMention }
 				/>
 				<OnChangePlugin
 					onChange={ handleOnChange }

src/components/editor-input/editor-input.stories.jsx

@@ -56,6 +56,16 @@ export default {
 				defaultValue: { summary: false },
 			},
 		},
+		autoSpaceAfterMention: {
+			name: 'autoSpaceAfterMention',
+			description:
+				'Defines if the editor input should add a space after selecting a mention/tag option.',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: false },
+			},
+		},
 		onChange: {
 			name: 'On Change',
 			description:
@@ -118,6 +128,15 @@ export default {
 				defaultValue: { summary: '' },
 			},
 		},
+		wrapperClassName: {
+			name: 'wrapperClassName',
+			description: 'Custom class name to be added to the editor input wrapper.',
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '' },
+			},
+		},
 	},
 	decorators: [
 		( Story ) => (
@@ -139,6 +158,16 @@ const options = [
 	'Pink',
 ];
 
+export const Default = {
+	args: {
+		size: 'md',
+		autoSpaceAfterMention: false,
+		autoFocus: false,
+		options,
+		onChange: ( editorState ) => editorState.toJSON(),
+	},
+};
+
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Small = {
 	args: {

src/components/editor-input/mention-plugin/mention-component.jsx

@@ -43,7 +43,7 @@ const MentionComponent = ( { data, by, size, nodeKey } ) => {
 
 	return (
 		<Badge
-			className="inline-flex"
+			className="inline-flex mx-0.5"
 			type="rounded"
 			size={ mapSizeToBadgeSize( size ) }
 			label={ renderLabel }

src/components/editor-input/mention-plugin/mention-plugin.jsx

@@ -1,10 +1,18 @@
-import { useCallback, useState, useMemo } from 'react';
+import { useCallback, useState, useMemo, useEffect, useRef } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { LexicalTypeaheadMenuPlugin } from '@lexical/react/LexicalTypeaheadMenuPlugin';
-import { $createMentionNode } from './mention-node';
+import { $createMentionNode, $isMentionNode } from './mention-node';
 import OptionItem from './mention-option-item';
 import useMentionLookupService from './mention-hooks';
 import EditorCombobox from './mention-combobox';
+import {
+	$createTextNode,
+	$getSelection,
+	COMMAND_PRIORITY_LOW,
+	KEY_DOWN_COMMAND,
+	KEY_BACKSPACE_COMMAND,
+} from 'lexical';
+import { mergeRegister } from '@lexical/utils';
 
 const MentionPlugin = ( {
 	optionsArray,
@@ -13,7 +21,9 @@ const MentionPlugin = ( {
 	trigger = '@', // Default trigger value
 	menuComponent: MenuComponent = EditorCombobox,
 	menuItemComponent: MenuItemComponent = EditorCombobox.Item,
+	autoSpace = true,
 } ) => {
+	const autoSpaceTempOff = useRef( false );
 	// Define PUNCTUATION and other necessary variables inside the component
 	const PUNCTUATION =
 		'\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
@@ -96,6 +106,76 @@ const MentionPlugin = ( {
 		return results.map( ( result ) => new OptionItem( result ) );
 	}, [ editor, results ] );
 
+	const handleAutoSpaceAfterMention = useCallback(
+		( event ) => {
+			if ( ! autoSpace ) {
+				return false;
+			}
+			const { key, ctrlKey, metaKey } = event;
+
+			if (
+				ctrlKey ||
+				metaKey ||
+				key === ' ' ||
+				key.length > 1 ||
+				autoSpaceTempOff.current
+			) {
+				if ( autoSpaceTempOff.current ) {
+					autoSpaceTempOff.current = false;
+				}
+				return false;
+			}
+			const selection = $getSelection( editor );
+			const { focus, anchor } = selection;
+			const [ node ] = selection.getNodes();
+
+			if (
+				! anchor ||
+				! focus ||
+				anchor?.key !== focus?.key ||
+				anchor?.offset !== focus?.offset ||
+				! node
+			) {
+				return false;
+			}
+
+			if ( $isMentionNode( node ) ) {
+				const textNode = $createTextNode( ' ' );
+				node.insertAfter( textNode );
+			}
+		},
+		[ editor, trigger, autoSpace ]
+	);
+
+	const turnOffAutoSpaceIfNecessary = useCallback(
+		( event ) => {
+			const { key } = event;
+			if ( key === 'Backspace' ) {
+				autoSpaceTempOff.current = true;
+			}
+		},
+		[ autoSpaceTempOff ]
+	);
+
+	useEffect( () => {
+		if ( ! editor ) {
+			return;
+		}
+
+		return mergeRegister(
+			editor.registerCommand(
+				KEY_DOWN_COMMAND,
+				handleAutoSpaceAfterMention,
+				COMMAND_PRIORITY_LOW
+			),
+			editor.registerCommand(
+				KEY_BACKSPACE_COMMAND,
+				turnOffAutoSpaceIfNecessary,
+				COMMAND_PRIORITY_LOW
+			)
+		);
+	}, [ editor, handleAutoSpaceAfterMention ] );
+
 	return (
 		<LexicalTypeaheadMenuPlugin
 			onQueryChange={ setQueryString }

src/components/editor-input/readme.md

@@ -86,6 +86,11 @@ The Editor Input component is a text input field that allows users to input text
 - **Default:** `false`
 - **Description:** If `true`, the editor input field will be focused when the component is mounted.
 
+### autoSpaceAfterMention
+- **Type:** `boolean`
+- **Default:** `true`
+- **Description:** If `true`, a space will be added after the mention/tag node. If any other character is pressed after selecting a mention/tag option, the space will be added automatically.
+
 ### className
 - **Type:** `string`
 - **Default:** `""`
@@ -98,6 +103,11 @@ The Editor Input component is a text input field that allows users to input text
     />
 ```
 
+### wrapperClassName
+- **Type:** `string`
+- **Default:** `""`
+- **Description:** Additional classes to be added to the editor input wrapper.
+
 ### disabled
 - **Type:** `boolean`
 - **Default:** `false`