@elementor/editor-controls 4.2.0-895 → 4.2.0-896

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.2.0-895",
+  "version": "4.2.0-896",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.2.0-895",
-    "@elementor/editor-elements": "4.2.0-895",
-    "@elementor/editor-props": "4.2.0-895",
-    "@elementor/editor-responsive": "4.2.0-895",
-    "@elementor/editor-ui": "4.2.0-895",
-    "@elementor/editor-v1-adapters": "4.2.0-895",
-    "@elementor/env": "4.2.0-895",
-    "@elementor/events": "4.2.0-895",
-    "@elementor/http-client": "4.2.0-895",
+    "@elementor/editor-current-user": "4.2.0-896",
+    "@elementor/editor-elements": "4.2.0-896",
+    "@elementor/editor-props": "4.2.0-896",
+    "@elementor/editor-responsive": "4.2.0-896",
+    "@elementor/editor-ui": "4.2.0-896",
+    "@elementor/editor-v1-adapters": "4.2.0-896",
+    "@elementor/env": "4.2.0-896",
+    "@elementor/events": "4.2.0-896",
+    "@elementor/http-client": "4.2.0-896",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.2.0-895",
-    "@elementor/query": "4.2.0-895",
-    "@elementor/schema": "4.2.0-895",
-    "@elementor/session": "4.2.0-895",
+    "@elementor/locations": "4.2.0-896",
+    "@elementor/query": "4.2.0-896",
+    "@elementor/schema": "4.2.0-896",
+    "@elementor/session": "4.2.0-896",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-895",
-    "@elementor/wp-media": "4.2.0-895",
+    "@elementor/utils": "4.2.0-896",
+    "@elementor/wp-media": "4.2.0-896",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/hooks/use-form-field-suggestions.ts

@@ -1,5 +1,5 @@
-import { getContainer, getSelectedElements } from '@elementor/editor-elements';
-import { isTransformable } from '@elementor/editor-props';
+import { getContainer, getSelectedElements, getWidgetsCache, type V1Element } from '@elementor/editor-elements';
+import { type PropsSchema, stringPropTypeUtil } from '@elementor/editor-props';
 import { __privateUseListenTo as useListenTo, commandEndEvent, v1ReadyEvent } from '@elementor/editor-v1-adapters';
 
 export type Suggestion = {
@@ -15,12 +15,53 @@ const FORM_FIELD_WIDGET_TYPES = [
 	'e-form-select',
 	'e-form-date-picker',
 	'e-form-time-picker',
-];
+] as const;
+
+const FORM_ELEMENT_TYPE = 'e-form';
+const CSS_ID_PROP_KEY = '_cssid';
+
+function isFormFieldWidgetType( widgetType: string ): boolean {
+	return ( FORM_FIELD_WIDGET_TYPES as readonly string[] ).includes( widgetType );
+}
 
 type Options = {
 	inputType?: string;
 };
 
+function extractStringPropValue( value: unknown ): string | null {
+	return stringPropTypeUtil.extract( value );
+}
+
+function getSettingWithDefault( child: V1Element, widgetType: string, key: string ): unknown {
+	const fromGet = child.settings.get( key );
+
+	if ( fromGet !== null && fromGet !== undefined ) {
+		return fromGet;
+	}
+
+	const schema = getWidgetsCache()?.[ widgetType ]?.atomic_props_schema as PropsSchema | undefined;
+
+	return schema?.[ key ]?.default ?? null;
+}
+
+function getFieldCssId( child: V1Element, widgetType: string ): string | null {
+	return extractStringPropValue( getSettingWithDefault( child, widgetType, CSS_ID_PROP_KEY ) );
+}
+
+function getFormContainer( elementId: string ): V1Element | null {
+	let container = getContainer( elementId );
+
+	while ( container ) {
+		if ( container.model.get( 'elType' ) === FORM_ELEMENT_TYPE ) {
+			return container;
+		}
+
+		container = container.parent ?? null;
+	}
+
+	return null;
+}
+
 export function useFormFieldSuggestions( options?: Options ): Suggestion[] {
 	return useListenTo(
 		[
@@ -31,42 +72,44 @@ export function useFormFieldSuggestions( options?: Options ): Suggestion[] {
 		],
 		() => {
 			const selectedElements = getSelectedElements();
-			const formElement = selectedElements[ 0 ];
+			const selectedElement = selectedElements[ 0 ];
 
-			if ( ! formElement ) {
+			if ( ! selectedElement ) {
 				return [];
 			}
 
-			const container = getContainer( formElement.id );
+			const formContainer = getFormContainer( selectedElement.id );
 
-			if ( ! container?.children ) {
+			if ( ! formContainer?.children ) {
 				return [];
 			}
 
 			const suggestions: Suggestion[] = [];
+			const seenCssIds = new Set< string >();
 
-			container.children.forEachRecursive?.( ( child ) => {
+			formContainer.children.forEachRecursive?.( ( child ) => {
 				const widgetType = child.model.get( 'widgetType' ) as string | undefined;
 
-				if ( ! widgetType || ! FORM_FIELD_WIDGET_TYPES.includes( widgetType ) ) {
+				if ( ! widgetType || ! isFormFieldWidgetType( widgetType ) ) {
 					return;
 				}
 
 				if ( options?.inputType ) {
-					const typeProp = child.settings.get( 'type' );
-					const typeValue = isTransformable( typeProp ) ? typeProp.value : typeProp;
+					const typeValue = extractStringPropValue( getSettingWithDefault( child, widgetType, 'type' ) );
 
 					if ( typeValue !== options.inputType ) {
 						return;
 					}
 				}
 
-				const cssIdProp = child.settings.get( '_cssid' );
-				const fieldId = isTransformable( cssIdProp ) ? cssIdProp.value : cssIdProp;
+				const cssId = getFieldCssId( child, widgetType );
 
-				if ( fieldId && typeof fieldId === 'string' ) {
-					suggestions.push( { label: fieldId, value: fieldId } );
+				if ( ! cssId || seenCssIds.has( cssId ) ) {
+					return;
 				}
+
+				seenCssIds.add( cssId );
+				suggestions.push( { label: cssId, value: cssId } );
 			} );
 
 			return suggestions;