@elementor/editor-editing-panel 4.1.0-749 → 4.1.0-750

package/package.json

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

package/src/components/css-classes/consts.ts

@@ -0,0 +1 @@
+export const PENDING_CLASS_RENAME_SESSION_KEY = 'pending-class-rename-id';

package/src/components/css-classes/css-class-convert-local.tsx

@@ -8,6 +8,7 @@ import { useSessionStorage } from '@elementor/session';
 import { useClassesProp } from '../../contexts/classes-prop-context';
 import { useElement } from '../../contexts/element-context';
 import { useStyle } from '../../contexts/style-context';
+import { PENDING_CLASS_RENAME_SESSION_KEY } from './consts';
 
 export const { Slot: CssClassConvertSlot, inject: injectIntoCssClassConvert } = createLocation< {
 	styleDef: StyleDefinition | null;
@@ -30,7 +31,7 @@ export const CssClassConvert = ( props: OwnProps ) => {
 	const elementId = element.id;
 	const currentClassesProp = useClassesProp();
 	const { setId: setActiveId } = useStyle();
-	const [ , saveValue ] = useSessionStorage( 'last-converted-class-generated-name', 'app' );
+	const [ , saveValue ] = useSessionStorage( PENDING_CLASS_RENAME_SESSION_KEY, 'app' );
 
 	const successCallback = ( newId: string ) => {
 		if ( ! props.styleDef ) {

package/src/components/css-classes/css-class-item.tsx

@@ -20,6 +20,7 @@ import {
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../contexts/style-context';
+import { PENDING_CLASS_RENAME_SESSION_KEY } from './consts';
 import { CssClassProvider } from './css-class-context';
 import { CssClassMenu, useElementStates } from './css-class-menu';
 
@@ -54,7 +55,7 @@ export function CssClassItem( props: CssClassItemProps ) {
 	const { userCan } = useUserStylesCapability();
 
 	const [ convertedFromLocalId, , clearConvertedFromLocalId ] = useSessionStorage(
-		'last-converted-class-generated-name',
+		PENDING_CLASS_RENAME_SESSION_KEY,
 		'app'
 	);
 

package/src/components/css-classes/css-class-menu.tsx

@@ -16,6 +16,7 @@ import { getTempStylesProviderThemeColor } from '../../utils/get-styles-provider
 import { trackStyles } from '../../utils/tracking/subscribe';
 import { StyleIndicator } from '../style-indicator';
 import { useCssClass } from './css-class-context';
+import { DuplicateClassMenuItem } from './duplicate-class-menu-item';
 import { LocalClassSubMenu } from './local-class-sub-menu';
 import { useUnapplyClass } from './use-apply-and-unapply-class';
 
@@ -179,10 +180,12 @@ function getMenuItemsByProvider( {
 	const providerActions = providerInstance?.actions;
 
 	const canUpdate = providerActions?.update;
+	const canDuplicate = providerActions?.create && providerActions?.get;
 	const canUnapply = ! fixed;
 
 	const actions = [
 		canUpdate && <RenameClassMenuItem key="rename-class" closeMenu={ closeMenu } />,
+		canDuplicate && <DuplicateClassMenuItem key="duplicate-class" closeMenu={ closeMenu } />,
 		canUnapply && <UnapplyClassMenuItem key="unapply-class" closeMenu={ closeMenu } />,
 	].filter( Boolean );
 
@@ -302,7 +305,7 @@ function RenameClassMenuItem( { closeMenu }: { closeMenu: () => void } ) {
 			<MenuItemInfotip
 				showInfoTip={ ! isAllowed }
 				content={ __(
-					'With your current role, you can use existing classes but can’t modify them.',
+					"With your current role, you can use existing classes but can't modify them.",
 					'elementor'
 				) }
 			>

package/src/components/css-classes/duplicate-class-menu-item.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { stylesRepository, useUserStylesCapability } from '@elementor/editor-styles-repository';
+import { MenuListItem } from '@elementor/editor-ui';
+import { useSessionStorage } from '@elementor/session';
+import { __ } from '@wordpress/i18n';
+
+import { trackStyles } from '../../utils/tracking/subscribe';
+import { PENDING_CLASS_RENAME_SESSION_KEY } from './consts';
+import { useCssClass } from './css-class-context';
+import { useApplyClass } from './use-apply-and-unapply-class';
+
+const DUPLICATE_LABEL_PREFIX = 'copy-of';
+
+export function getUniqueDuplicateLabel( originalLabel: string, existingLabels: string[] ): string {
+	let newLabel = `${ DUPLICATE_LABEL_PREFIX }-${ originalLabel }`;
+	let counter = 2;
+	while ( existingLabels.includes( newLabel ) ) {
+		newLabel = `${ DUPLICATE_LABEL_PREFIX }-${ originalLabel }-${ counter }`;
+		counter++;
+	}
+	return newLabel;
+}
+
+export function DuplicateClassMenuItem( { closeMenu }: { closeMenu: () => void } ) {
+	const { id: classId, provider } = useCssClass();
+	const { userCan } = useUserStylesCapability();
+	const applyClass = useApplyClass();
+	const [ , setPendingEditId ] = useSessionStorage( PENDING_CLASS_RENAME_SESSION_KEY, 'app' );
+
+	if ( ! provider || ! classId ) {
+		return null;
+	}
+
+	const providerInstance = stylesRepository.getProviderByKey( provider );
+	const createAction = providerInstance?.actions.create;
+	const getAction = providerInstance?.actions.get;
+
+	if ( ! createAction || ! getAction ) {
+		return null;
+	}
+
+	if ( ! userCan( provider ).create ) {
+		return null;
+	}
+
+	const handleDuplicate = () => {
+		const styleDef = getAction( classId );
+		if ( ! styleDef ) {
+			closeMenu();
+			return;
+		}
+		const existingLabels = providerInstance.actions.all().map( ( style ) => style.label );
+		const newLabel = getUniqueDuplicateLabel( styleDef.label, existingLabels );
+		const newId = createAction( newLabel, styleDef.variants );
+		if ( newId ) {
+			applyClass( { classId: newId, classLabel: newLabel } );
+			setPendingEditId( newId );
+			trackStyles( provider, 'classCreated', {
+				classId: newId,
+				source: 'duplicated',
+				classTitle: newLabel,
+			} );
+		}
+		closeMenu();
+	};
+
+	return <MenuListItem onClick={ handleDuplicate }>{ __( 'Duplicate', 'elementor' ) }</MenuListItem>;
+}