@elementor/editor-canvas 4.4.0-1137 → 4.4.0-1139

package/src/form-structure/prevent-duplicate-honeypot-commands.ts

@@ -0,0 +1,87 @@
+import { getAllDescendants, type V1Element } from '@elementor/editor-elements';
+import { type NotificationData, notify } from '@elementor/editor-notifications';
+import { blockCommand, type HookOptions, registerDataHook } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
+
+import {
+	type CreateArgs,
+	FORM_HONEYPOT_ELEMENT_TYPE,
+	getElementType,
+	getFormContainer,
+	hasElementType,
+	hasModelElementType,
+	type MoveArgs,
+} from './utils';
+
+const MOVE_COMMAND = 'document/elements/move';
+
+const DUPLICATE_HONEYPOT_ALERT: NotificationData = {
+	type: 'default',
+	message: __( 'Only one Honeypot can be added per form.', 'elementor' ),
+	id: 'duplicate-honeypot-blocked',
+};
+
+export function initDuplicateHoneypotPrevention() {
+	registerDataHook( 'dependency', 'document/elements/create', ( args: CreateArgs, options?: HookOptions ) => {
+		return ! blockHoneypotCreate( args, options );
+	} );
+
+	blockCommand( {
+		command: 'document/elements/move',
+		condition: blockHoneypotMove,
+	} );
+}
+
+function blockHoneypotCreate( args: CreateArgs, options?: HookOptions ): boolean {
+	// Move re-creates the moved element at the target, so it is handled by the move condition.
+	if ( options?.commandsCurrentTrace?.includes( MOVE_COMMAND ) ) {
+		return false;
+	}
+
+	if ( ! hasModelElementType( args.model, FORM_HONEYPOT_ELEMENT_TYPE ) ) {
+		return false;
+	}
+
+	const containers = args.containers ?? [ args.container ];
+
+	if ( containers.some( ( container ) => formHasHoneypot( getFormContainer( container ) ) ) ) {
+		handleBlockedHoneypot();
+
+		return true;
+	}
+
+	return false;
+}
+
+function blockHoneypotMove( args: MoveArgs ): boolean {
+	const { containers = [ args.container ], target } = args;
+	const movedContainers = containers.filter( ( container ): container is V1Element => !! container );
+
+	if ( ! movedContainers.some( ( container ) => hasElementType( container, FORM_HONEYPOT_ELEMENT_TYPE ) ) ) {
+		return false;
+	}
+
+	const movedElements = new Set( movedContainers.flatMap( ( container ) => getAllDescendants( container ) ) );
+
+	if ( formHasHoneypot( getFormContainer( target ), movedElements ) ) {
+		handleBlockedHoneypot();
+
+		return true;
+	}
+
+	return false;
+}
+
+function formHasHoneypot( form?: V1Element, excluded: Set< V1Element > = new Set() ): boolean {
+	if ( ! form ) {
+		return false;
+	}
+
+	return getAllDescendants( form ).some(
+		( element ) => ! excluded.has( element ) && getElementType( element ) === FORM_HONEYPOT_ELEMENT_TYPE
+	);
+}
+
+function handleBlockedHoneypot(): void {
+	notify( DUPLICATE_HONEYPOT_ALERT );
+}

package/src/form-structure/utils.ts

@@ -3,6 +3,7 @@ import { getAllDescendants, type V1Element } from '@elementor/editor-elements';
 type Model = {
 	elType?: string;
 	widgetType?: string;
+	elements?: Model[];
 };
 
 export type CreateArgs = {
@@ -36,6 +37,7 @@ export type StorageContent = {
 
 export const FORM_ELEMENT_TYPE = 'e-form';
 export const FORM_HIDDEN_FIELD_ELEMENT_TYPE = 'e-form-hidden';
+export const FORM_HONEYPOT_ELEMENT_TYPE = 'e-form-honeypot';
 export const FORM_FIELD_ELEMENT_TYPES = new Set( [
 	'e-form-input',
 	'e-form-textarea',
@@ -48,12 +50,39 @@ export const FORM_FIELD_ELEMENT_TYPES = new Set( [
 	'e-form-date-picker',
 	'e-form-time-picker',
 	FORM_HIDDEN_FIELD_ELEMENT_TYPE,
+	FORM_HONEYPOT_ELEMENT_TYPE,
 ] );
 
 export function getArgsElementType( args: CreateArgs ): string | undefined {
 	return args.model?.widgetType || args.model?.elType;
 }
 
+export function hasModelElementType( model: Model | undefined, type: string ): boolean {
+	if ( ! model ) {
+		return false;
+	}
+
+	if ( ( model.widgetType || model.elType ) === type ) {
+		return true;
+	}
+
+	return ( model.elements ?? [] ).some( ( child ) => hasModelElementType( child, type ) );
+}
+
+export function getFormContainer( element?: V1Element ): V1Element | undefined {
+	let current = element;
+
+	while ( current ) {
+		if ( getElementType( current ) === FORM_ELEMENT_TYPE ) {
+			return current;
+		}
+
+		current = current.parent;
+	}
+
+	return undefined;
+}
+
 export function getElementType( element?: V1Element ): string | undefined {
 	return element?.model.get( 'widgetType' ) || element?.model.get( 'elType' );
 }

package/src/init.tsx

@@ -7,6 +7,8 @@ import { InteractionsRenderer } from './components/interactions-renderer';
 import { StyleRenderer } from './components/style-renderer';
 import { initFormAncestorEnforcement } from './form-structure/enforce-form-ancestor-commands';
 import { initHiddenFieldHint } from './form-structure/hidden-field-hint';
+import { initHoneypotHint } from './form-structure/honeypot-hint';
+import { initDuplicateHoneypotPrevention } from './form-structure/prevent-duplicate-honeypot-commands';
 import { initFormNestingPrevention } from './form-structure/prevent-form-nesting-commands';
 import { initSettingsTransformers } from './init-settings-transformers';
 import { initStyleTransformers } from './init-style-transformers';
@@ -27,6 +29,8 @@ export function init() {
 	initFormNestingPrevention();
 	initFormAncestorEnforcement();
 	initHiddenFieldHint();
+	initDuplicateHoneypotPrevention();
+	initHoneypotHint();
 
 	initViewReplacements();