@elementor/editor-editing-panel 3.33.0-139 → 3.33.0-140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "3.33.0-139",
+  "version": "3.33.0-140",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,26 +39,26 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-139",
-    "@elementor/editor-canvas": "3.33.0-139",
-    "@elementor/editor-controls": "3.33.0-139",
-    "@elementor/editor-documents": "3.33.0-139",
-    "@elementor/editor-elements": "3.33.0-139",
-    "@elementor/editor-panels": "3.33.0-139",
-    "@elementor/editor-props": "3.33.0-139",
-    "@elementor/editor-responsive": "3.33.0-139",
-    "@elementor/editor-styles": "3.33.0-139",
-    "@elementor/editor-styles-repository": "3.33.0-139",
-    "@elementor/editor-ui": "3.33.0-139",
-    "@elementor/editor-v1-adapters": "3.33.0-139",
+    "@elementor/editor": "3.33.0-140",
+    "@elementor/editor-canvas": "3.33.0-140",
+    "@elementor/editor-controls": "3.33.0-140",
+    "@elementor/editor-documents": "3.33.0-140",
+    "@elementor/editor-elements": "3.33.0-140",
+    "@elementor/editor-panels": "3.33.0-140",
+    "@elementor/editor-props": "3.33.0-140",
+    "@elementor/editor-responsive": "3.33.0-140",
+    "@elementor/editor-styles": "3.33.0-140",
+    "@elementor/editor-styles-repository": "3.33.0-140",
+    "@elementor/editor-ui": "3.33.0-140",
+    "@elementor/editor-v1-adapters": "3.33.0-140",
     "@elementor/icons": "1.46.0",
-    "@elementor/locations": "3.33.0-139",
-    "@elementor/menus": "3.33.0-139",
-    "@elementor/schema": "3.33.0-139",
-    "@elementor/session": "3.33.0-139",
+    "@elementor/locations": "3.33.0-140",
+    "@elementor/menus": "3.33.0-140",
+    "@elementor/schema": "3.33.0-140",
+    "@elementor/session": "3.33.0-140",
     "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-139",
-    "@elementor/wp-media": "3.33.0-139",
+    "@elementor/utils": "3.33.0-140",
+    "@elementor/wp-media": "3.33.0-140",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/controls-registry/element-controls/get-element-by-type.ts

@@ -0,0 +1,21 @@
+import { getContainer } from '@elementor/editor-elements';
+
+export const getElementByType = ( elementId: string, type: string ) => {
+	const currentElement = getContainer( elementId );
+
+	if ( ! currentElement ) {
+		throw new Error( `Current element not found, elementId: ${ elementId }` );
+	}
+
+	if ( currentElement.model.get( 'elType' ) === type ) {
+		return currentElement;
+	}
+
+	const element = currentElement.children?.findRecursive?.( ( child ) => child.model.get( 'elType' ) === type );
+
+	if ( ! element ) {
+		throw new Error( `Child element ${ type } not found` );
+	}
+
+	return element;
+};

package/src/controls-registry/element-controls/tabs-control/actions.ts

@@ -0,0 +1,151 @@
+import { type ItemActionPayload } from '@elementor/editor-controls';
+import {
+	createElements,
+	duplicateElements,
+	generateElementId,
+	getElementSetting,
+	moveElements,
+	removeElements,
+	updateElementSettings,
+} from '@elementor/editor-elements';
+import { stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
+import { __ } from '@wordpress/i18n';
+
+export type TabItem = {
+	id?: string;
+	title?: string;
+};
+
+export const TAB_ELEMENT_TYPE = 'e-tab';
+export const TAB_PANEL_ELEMENT_TYPE = 'e-tab-panel';
+
+export const duplicateItem = ( { items }: { items: ItemActionPayload< TabItem > } ) => {
+	items.forEach( ( { item } ) => {
+		const tabId = item.id as string;
+
+		const { value: tabPanelId } = getElementSetting< StringPropValue >( tabId, 'tab-panel-id' ) ?? {};
+
+		if ( ! tabPanelId ) {
+			throw new Error( 'Original panel ID is required for duplication' );
+		}
+
+		duplicateElements( {
+			elementIds: [ tabId, tabPanelId ],
+			title: __( 'Duplicate Tab', 'elementor' ),
+			onCreate: ( duplicatedElements ) => {
+				const tab = duplicatedElements.find( ( element ) => element.originalElementId === tabId );
+				const tabPanel = duplicatedElements.find( ( element ) => element.originalElementId === tabPanelId );
+
+				if ( tabPanel && tab ) {
+					updateElementSettings( {
+						withHistory: false,
+						id: tab.id,
+						props: {
+							'tab-panel-id': stringPropTypeUtil.create( tabPanel.id ),
+						},
+					} );
+					updateElementSettings( {
+						withHistory: false,
+						id: tabPanel.id,
+						props: {
+							'tab-id': stringPropTypeUtil.create( tab.id ),
+						},
+					} );
+				}
+			},
+		} );
+	} );
+};
+
+export const moveItem = ( {
+	toIndex,
+	tabListId,
+	tabContentId,
+	movedElementId,
+}: {
+	toIndex: number;
+	tabListId: string;
+	tabContentId: string;
+	movedElementId: string;
+} ) => {
+	const { value: tabPanelId } = getElementSetting< StringPropValue >( movedElementId, 'tab-panel-id' ) ?? {};
+
+	if ( ! tabPanelId ) {
+		throw new Error( 'Required tab elements not found for reordering' );
+	}
+
+	moveElements( {
+		title: __( 'Reorder Tabs', 'elementor' ),
+		moves: [
+			{
+				elementId: movedElementId,
+				targetContainerId: tabListId,
+				options: { at: toIndex },
+			},
+			{
+				elementId: tabPanelId,
+				targetContainerId: tabContentId,
+				options: { at: toIndex },
+			},
+		],
+	} );
+};
+
+export const removeItem = ( { items }: { items: ItemActionPayload< TabItem > } ) => {
+	removeElements( {
+		title: __( 'Tabs', 'elementor' ),
+		elementIds: items.flatMap( ( { item } ) => {
+			const tabId = item.id as string;
+			const { value: panelId } = getElementSetting< StringPropValue >( tabId, 'tab-panel-id' ) ?? {};
+
+			if ( ! panelId ) {
+				throw new Error( 'Pane ID is required' );
+			}
+
+			return [ tabId, panelId ];
+		} ),
+	} );
+};
+
+export const addItem = ( {
+	tabContentId,
+	tabListId,
+	items,
+}: {
+	tabContentId: string;
+	tabListId: string;
+	items: ItemActionPayload< TabItem >;
+} ) => {
+	items.forEach( ( { item, index } ) => {
+		const newTabPanelId = generateElementId();
+		const newTabId = generateElementId();
+
+		createElements( {
+			title: __( 'Tabs', 'elementor' ),
+			elements: [
+				{
+					containerId: tabContentId,
+					model: {
+						id: newTabPanelId,
+						elType: TAB_PANEL_ELEMENT_TYPE,
+						settings: {
+							'tab-id': stringPropTypeUtil.create( newTabId ),
+						},
+					},
+				},
+				{
+					containerId: tabListId,
+					model: {
+						id: newTabId,
+						elType: TAB_ELEMENT_TYPE,
+						settings: {
+							...item,
+							'tab-panel-id': stringPropTypeUtil.create( newTabPanelId ),
+						},
+						editor_settings: { title: `Tab #${ index + 1 }` },
+					},
+				},
+			],
+		} );
+	} );
+};

package/src/controls-registry/element-controls/tabs-control/tabs-control.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react';
+import { ControlFormLabel, Repeater, type RepeaterItem, type SetRepeaterValuesMeta } from '@elementor/editor-controls';
+import {
+	type Element,
+	getElementEditorSettings,
+	updateElementEditorSettings,
+	useElementChildren,
+	useElementEditorSettings,
+	useElementType,
+} from '@elementor/editor-elements';
+import { type CreateOptions } from '@elementor/editor-props';
+import { Stack, TextField } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { ElementProvider, useElement } from '../../../contexts/element-context';
+import { getElementByType } from '../get-element-by-type';
+import { addItem, duplicateItem, moveItem, removeItem, TAB_ELEMENT_TYPE, type TabItem } from './actions';
+
+const TAB_LIST_ELEMENT_TYPE = 'e-tabs-list';
+const TAB_CONTENT_ELEMENT_TYPE = 'e-tabs-content';
+
+type ChildElement = {
+	type: string;
+	target_container_selector: string;
+};
+
+export const TabsControl = ( { childElements }: { childElements: ChildElement[] } ) => {
+	const { element } = useElement();
+
+	const { [ TAB_ELEMENT_TYPE ]: tabLinks } = useElementChildren(
+		element.id,
+		childElements.map( ( child ) => child.type )
+	);
+
+	const tabList = getElementByType( element.id, TAB_LIST_ELEMENT_TYPE );
+	const tabContent = getElementByType( element.id, TAB_CONTENT_ELEMENT_TYPE );
+
+	const repeaterValues: RepeaterItem< TabItem >[] = tabLinks.map( ( tabLink ) => {
+		const { title: titleSetting } = getElementEditorSettings( tabLink.id ) ?? {};
+
+		return {
+			id: tabLink.id,
+			title: titleSetting,
+		};
+	} );
+
+	const setValue = (
+		_newValues: RepeaterItem< TabItem >[],
+		_options: CreateOptions,
+		meta?: SetRepeaterValuesMeta< RepeaterItem< TabItem > >
+	) => {
+		if ( meta?.action?.type === 'add' ) {
+			const items = meta.action.payload;
+
+			return addItem( { tabContentId: tabContent.id, items, tabListId: tabList.id } );
+		}
+
+		if ( meta?.action?.type === 'remove' ) {
+			const items = meta.action.payload;
+
+			return removeItem( { items } );
+		}
+
+		if ( meta?.action?.type === 'duplicate' ) {
+			const items = meta.action.payload;
+
+			return duplicateItem( { items } );
+		}
+
+		if ( meta?.action?.type === 'reorder' ) {
+			const { from, to } = meta.action.payload;
+
+			return moveItem( {
+				toIndex: to,
+				tabListId: tabList.id,
+				tabContentId: tabContent.id,
+				movedElementId: tabLinks[ from ].id,
+			} );
+		}
+	};
+
+	return (
+		<Repeater
+			addToBottom
+			showToggle={ false }
+			openOnAdd={ false }
+			values={ repeaterValues }
+			setValues={ setValue }
+			label={ __( 'Tabs', 'elementor' ) }
+			itemSettings={ {
+				initialValues: { title: 'Tab' },
+				Label: ( props ) => (
+					<ElementItem { ...props }>
+						<ItemLabel value={ props.value } />
+					</ElementItem>
+				),
+				Content: ( props ) => (
+					<ElementItem { ...props }>
+						<ItemContent />
+					</ElementItem>
+				),
+				Icon: () => null,
+			} }
+		/>
+	);
+};
+
+const ItemLabel = ( { value }: { value: TabItem } ) => {
+	const id = value.id ?? '';
+
+	const editorSettings = useElementEditorSettings( id );
+
+	const elementTitle = editorSettings?.title;
+
+	return (
+		<Stack sx={ { minHeight: 20 } } direction="row" alignItems="center">
+			<span>{ elementTitle }</span>
+		</Stack>
+	);
+};
+
+const ItemContent = () => {
+	const { element } = useElement();
+
+	const editorSettings = useElementEditorSettings( element.id );
+
+	const label = editorSettings?.title ?? '';
+
+	return (
+		<Stack p={ 2 }>
+			<ControlFormLabel sx={ { mb: 1 } }>{ __( 'Tab name', 'elementor' ) }</ControlFormLabel>
+			<TextField
+				value={ label }
+				size="tiny"
+				onChange={ ( { target }: React.ChangeEvent< HTMLInputElement > ) => {
+					updateElementEditorSettings( {
+						elementId: element.id,
+						settings: { title: target.value },
+					} );
+				} }
+			/>
+		</Stack>
+	);
+};
+
+const ElementItem = ( { children, value }: { children: React.ReactNode; value: TabItem } ) => {
+	const elementType = useElementType( TAB_ELEMENT_TYPE );
+
+	if ( ! elementType ) {
+		return null;
+	}
+
+	const element: Element = {
+		id: value.id ?? '',
+		type: elementType.key,
+	};
+
+	return (
+		<ElementProvider element={ element } elementType={ elementType }>
+			{ children }
+		</ElementProvider>
+	);
+};