@elementor/editor-components 3.33.0-108 → 3.33.0-110

package/dist/index.js

@@ -41,19 +41,8 @@ var import_i18n3 = require("@wordpress/i18n");
 
 // src/components/components-tab.tsx
 var React = __toESM(require("react"));
+var import_editor_elements3 = require("@elementor/editor-elements");
 var import_ui = require("@elementor/ui");
-function ComponentsTab() {
-  return /* @__PURE__ */ React.createElement(import_ui.Box, { px: 2 }, "This is the Components tab.");
-}
-
-// src/components/create-component-form/create-component-form.tsx
-var React2 = __toESM(require("react"));
-var import_react2 = require("react");
-var import_editor_elements2 = require("@elementor/editor-elements");
-var import_editor_ui = require("@elementor/editor-ui");
-var import_icons = require("@elementor/icons");
-var import_ui2 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
 
 // src/hooks/use-components.ts
 var import_query = require("@elementor/query");
@@ -76,6 +65,107 @@ var useComponents = () => {
   });
 };
 
+// src/utils/get-container-for-new-element.ts
+var import_editor_elements = require("@elementor/editor-elements");
+var getContainerForNewElement = () => {
+  const currentDocumentContainer = (0, import_editor_elements.getCurrentDocumentContainer)();
+  const selectedElement = getSelectedElementContainer();
+  let container, options;
+  if (selectedElement) {
+    switch (selectedElement.model.get("elType")) {
+      case "widget": {
+        container = selectedElement?.parent;
+        const selectedElIndex = selectedElement.view?._index ?? -1;
+        if (selectedElIndex > -1) {
+          options = { at: selectedElIndex + 1 };
+        }
+        break;
+      }
+      case "section": {
+        container = selectedElement?.children?.[0];
+        break;
+      }
+      default: {
+        container = selectedElement;
+        break;
+      }
+    }
+  }
+  return { container: container ?? currentDocumentContainer, options };
+};
+function getSelectedElementContainer() {
+  const selectedElements = (0, import_editor_elements.getSelectedElements)();
+  if (selectedElements.length !== 1) {
+    return void 0;
+  }
+  return (0, import_editor_elements.getContainer)(selectedElements[0].id);
+}
+
+// src/components/create-component-form/utils/replace-element-with-component.ts
+var import_editor_elements2 = require("@elementor/editor-elements");
+var import_editor_props = require("@elementor/editor-props");
+var replaceElementWithComponent = async (element, componentId) => {
+  (0, import_editor_elements2.replaceElement)({
+    currentElement: element,
+    newElement: createComponentModel(componentId),
+    withHistory: false
+  });
+};
+var createComponentModel = (componentId) => {
+  return {
+    elType: "widget",
+    widgetType: "e-component",
+    settings: {
+      component_id: import_editor_props.numberPropTypeUtil.create(componentId)
+    }
+  };
+};
+
+// src/components/components-tab.tsx
+function ComponentsTab() {
+  const { data: components } = useComponents();
+  return /* @__PURE__ */ React.createElement(import_ui.List, { sx: { display: "flex", flexDirection: "column", gap: 0.5, px: 2 } }, components?.map((component) => /* @__PURE__ */ React.createElement(ComponentItem, { key: component.id, component })));
+}
+var ComponentItem = ({ component }) => {
+  const handleClick = () => {
+    addComponentToPage(createComponentModel(component.id));
+  };
+  return /* @__PURE__ */ React.createElement(import_ui.ListItem, { disablePadding: true }, /* @__PURE__ */ React.createElement(
+    import_ui.ListItemButton,
+    {
+      sx: { border: "1px solid", borderColor: "divider", py: 0.5, px: 1 },
+      shape: "rounded",
+      onClick: handleClick
+    },
+    /* @__PURE__ */ React.createElement(
+      import_ui.ListItemText,
+      {
+        primary: /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "caption", sx: { color: "text.primary" } }, component.name)
+      }
+    )
+  ));
+};
+var addComponentToPage = (model) => {
+  const { container, options } = getContainerForNewElement();
+  if (!container) {
+    throw new Error(`Can't find container to drop new component instance at`);
+  }
+  (0, import_editor_elements3.dropElement)({
+    containerId: container.id,
+    model,
+    options: { ...options, useHistory: false, scrollIntoView: true }
+  });
+};
+
+// src/components/create-component-form/create-component-form.tsx
+var React2 = __toESM(require("react"));
+var import_react2 = require("react");
+var import_editor_elements4 = require("@elementor/editor-elements");
+var import_editor_ui = require("@elementor/editor-ui");
+var import_icons = require("@elementor/icons");
+var import_ui2 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
+
 // src/hooks/use-create-component.ts
 var import_query2 = require("@elementor/query");
 var useCreateComponentMutation = () => {
@@ -161,23 +251,6 @@ var createSubmitComponentSchema = (existingNames) => {
   });
 };
 
-// src/components/create-component-form/utils/replace-element-with-component.ts
-var import_editor_elements = require("@elementor/editor-elements");
-var import_editor_props = require("@elementor/editor-props");
-var replaceElementWithComponent = async (element, componentId) => {
-  (0, import_editor_elements.replaceElement)({
-    currentElement: element,
-    newElement: {
-      elType: "widget",
-      widgetType: "e-component",
-      settings: {
-        component_id: import_editor_props.numberPropTypeUtil.create(componentId)
-      }
-    },
-    withHistory: false
-  });
-};
-
 // src/components/create-component-form/create-component-form.tsx
 function CreateComponentForm() {
   const [element, setElement] = (0, import_react2.useState)(null);
@@ -187,7 +260,7 @@ function CreateComponentForm() {
   (0, import_react2.useEffect)(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
-      setElement({ element: event.detail.element, elementLabel: (0, import_editor_elements2.getElementLabel)(event.detail.element.id) });
+      setElement({ element: event.detail.element, elementLabel: (0, import_editor_elements4.getElementLabel)(event.detail.element.id) });
       setAnchorPosition(event.detail.anchorPosition);
     };
     window.addEventListener(OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/components-tab.tsx","../src/components/create-component-form/create-component-form.tsx","../src/hooks/use-components.ts","../src/api.ts","../src/hooks/use-create-component.ts","../src/components/create-component-form/hooks/use-form.ts","../src/components/create-component-form/utils/component-form-schema.ts","../src/components/create-component-form/utils/replace-element-with-component.ts"],"sourcesContent":["export { init } from './init';\n","import { injectIntoTop } from '@elementor/editor';\nimport { injectTab } from '@elementor/editor-elements-panel';\nimport { __ } from '@wordpress/i18n';\n\nimport { ComponentsTab } from './components/components-tab';\nimport { CreateComponentForm } from './components/create-component-form/create-component-form';\n\nexport function init() {\n\tinjectTab( {\n\t\tid: 'components',\n\t\tlabel: __( 'Components', 'elementor' ),\n\t\tcomponent: ComponentsTab,\n\t} );\n\n\tinjectIntoTop( {\n\t\tid: 'create-component-popup',\n\t\tcomponent: CreateComponentForm,\n\t} );\n}\n","import * as React from 'react';\nimport { Box } from '@elementor/ui';\n\nexport function ComponentsTab() {\n\treturn <Box px={ 2 }>This is the Components tab.</Box>;\n}\n","import * as React from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { getElementLabel, type V1Element } from '@elementor/editor-elements';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { StarIcon } from '@elementor/icons';\nimport { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type CreateComponentResponse } from '../../api';\nimport { useComponents } from '../../hooks/use-components';\nimport { useCreateComponentMutation } from '../../hooks/use-create-component';\nimport { type ComponentFormValues } from '../../types';\nimport { useForm } from './hooks/use-form';\nimport { createBaseComponentSchema, createSubmitComponentSchema } from './utils/component-form-schema';\nimport { replaceElementWithComponent } from './utils/replace-element-with-component';\n\ntype SaveAsComponentEventData = {\n\telement: V1Element;\n\tanchorPosition: { top: number; left: number };\n};\n\ntype ResultNotification = {\n\tshow: boolean;\n\tmessage: string;\n\ttype: 'success' | 'error';\n};\n\nexport function CreateComponentForm() {\n\tconst [ element, setElement ] = useState< {\n\t\telement: V1Element;\n\t\telementLabel: string;\n\t} | null >( null );\n\n\tconst [ anchorPosition, setAnchorPosition ] = useState< { top: number; left: number } >();\n\n\tconst [ resultNotification, setResultNotification ] = useState< ResultNotification | null >( null );\n\n\tconst { mutate: createComponent, isPending } = useCreateComponentMutation();\n\n\tuseEffect( () => {\n\t\tconst OPEN_SAVE_AS_COMPONENT_FORM_EVENT = 'elementor/editor/open-save-as-component-form';\n\n\t\tconst openPopup = ( event: CustomEvent< SaveAsComponentEventData > ) => {\n\t\t\tsetElement( { element: event.detail.element, elementLabel: getElementLabel( event.detail.element.id ) } );\n\t\t\tsetAnchorPosition( event.detail.anchorPosition );\n\t\t};\n\n\t\twindow.addEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );\n\t\t};\n\t}, [] );\n\n\tconst handleSave = async ( values: ComponentFormValues ) => {\n\t\tif ( ! element ) {\n\t\t\tthrow new Error( `Can't save element as component: element not found` );\n\t\t}\n\n\t\tcreateComponent(\n\t\t\t{\n\t\t\t\tname: values.componentName,\n\t\t\t\tcontent: [ element.element.model.toJSON( { remove: [ 'default' ] } ) ],\n\t\t\t},\n\t\t\t{\n\t\t\t\tonSuccess: ( result: CreateComponentResponse ) => {\n\t\t\t\t\tif ( ! element ) {\n\t\t\t\t\t\tthrow new Error( `Can't replace element with component: element not found` );\n\t\t\t\t\t}\n\n\t\t\t\t\treplaceElementWithComponent( element.element, result.component_id );\n\n\t\t\t\t\tsetResultNotification( {\n\t\t\t\t\t\tshow: true,\n\t\t\t\t\t\t// Translators: %1$s: Component name, %2$s: Component ID\n\t\t\t\t\t\tmessage: __( 'Component saved successfully as: %1$s (ID: %2$s)', 'elementor' )\n\t\t\t\t\t\t\t.replace( '%1$s', values.componentName )\n\t\t\t\t\t\t\t.replace( '%2$s', result.component_id.toString() ),\n\t\t\t\t\t\ttype: 'success',\n\t\t\t\t\t} );\n\n\t\t\t\t\tresetAndClosePopup();\n\t\t\t\t},\n\t\t\t\tonError: () => {\n\t\t\t\t\tconst errorMessage = __( 'Failed to save component. Please try again.', 'elementor' );\n\t\t\t\t\tsetResultNotification( {\n\t\t\t\t\t\tshow: true,\n\t\t\t\t\t\tmessage: errorMessage,\n\t\t\t\t\t\ttype: 'error',\n\t\t\t\t\t} );\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t};\n\n\tconst resetAndClosePopup = () => {\n\t\tsetElement( null );\n\t\tsetAnchorPosition( undefined );\n\t};\n\n\treturn (\n\t\t<ThemeProvider>\n\t\t\t<Popover\n\t\t\t\topen={ element !== null }\n\t\t\t\tonClose={ resetAndClosePopup }\n\t\t\t\tanchorReference=\"anchorPosition\"\n\t\t\t\tanchorPosition={ anchorPosition }\n\t\t\t>\n\t\t\t\t{ element !== null && (\n\t\t\t\t\t<Form\n\t\t\t\t\t\tinitialValues={ { componentName: element.elementLabel } }\n\t\t\t\t\t\thandleSave={ handleSave }\n\t\t\t\t\t\tisSubmitting={ isPending }\n\t\t\t\t\t\tclosePopup={ resetAndClosePopup }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Popover>\n\t\t\t<Snackbar open={ resultNotification?.show } onClose={ () => setResultNotification( null ) }>\n\t\t\t\t<Alert\n\t\t\t\t\tonClose={ () => setResultNotification( null ) }\n\t\t\t\t\tseverity={ resultNotification?.type }\n\t\t\t\t\tsx={ { width: '100%' } }\n\t\t\t\t>\n\t\t\t\t\t{ resultNotification?.message }\n\t\t\t\t</Alert>\n\t\t\t</Snackbar>\n\t\t</ThemeProvider>\n\t);\n}\n\nconst FONT_SIZE = 'tiny';\n\nconst Form = ( {\n\tinitialValues,\n\thandleSave,\n\tisSubmitting,\n\tclosePopup,\n}: {\n\tinitialValues: ComponentFormValues;\n\thandleSave: ( values: ComponentFormValues ) => void;\n\tisSubmitting: boolean;\n\tclosePopup: () => void;\n} ) => {\n\tconst { values, errors, isValid, handleChange, validateForm } = useForm< ComponentFormValues >( initialValues );\n\n\tconst { data: components } = useComponents();\n\n\tconst existingComponentNames = useMemo( () => {\n\t\treturn components?.map( ( component ) => component.name ) ?? [];\n\t}, [ components ] );\n\n\tconst changeValidationSchema = useMemo(\n\t\t() => createBaseComponentSchema( existingComponentNames ),\n\t\t[ existingComponentNames ]\n\t);\n\tconst submitValidationSchema = useMemo(\n\t\t() => createSubmitComponentSchema( existingComponentNames ),\n\t\t[ existingComponentNames ]\n\t);\n\n\tconst handleSubmit = () => {\n\t\tconst { success, parsedValues } = validateForm( submitValidationSchema );\n\n\t\tif ( success ) {\n\t\t\thandleSave( parsedValues );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Stack alignItems=\"start\" width=\"268px\">\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\talignItems=\"center\"\n\t\t\t\tpy={ 1 }\n\t\t\t\tpx={ 1.5 }\n\t\t\t\tsx={ { columnGap: 0.5, borderBottom: '1px solid', borderColor: 'divider', width: '100%' } }\n\t\t\t>\n\t\t\t\t<StarIcon fontSize={ FONT_SIZE } />\n\t\t\t\t<Typography variant=\"caption\" sx={ { color: 'text.primary', fontWeight: '500', lineHeight: 1 } }>\n\t\t\t\t\t{ __( 'Save as a component', 'elementor' ) }\n\t\t\t\t</Typography>\n\t\t\t</Stack>\n\t\t\t<Grid container gap={ 0.75 } alignItems=\"start\" p={ 1.5 }>\n\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t<FormLabel htmlFor={ 'component-name' } size=\"tiny\">\n\t\t\t\t\t\t{ __( 'Name', 'elementor' ) }\n\t\t\t\t\t</FormLabel>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t<TextField\n\t\t\t\t\t\tid={ 'component-name' }\n\t\t\t\t\t\tsize={ FONT_SIZE }\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tvalue={ values.componentName }\n\t\t\t\t\t\tonChange={ ( e: React.ChangeEvent< HTMLInputElement > ) =>\n\t\t\t\t\t\t\thandleChange( e, 'componentName', changeValidationSchema )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tinputProps={ { style: { color: 'text.primary', fontWeight: '600' } } }\n\t\t\t\t\t\terror={ Boolean( errors.componentName ) }\n\t\t\t\t\t\thelperText={ errors.componentName }\n\t\t\t\t\t/>\n\t\t\t\t</Grid>\n\t\t\t</Grid>\n\t\t\t<Stack direction=\"row\" justifyContent=\"flex-end\" alignSelf=\"end\" py={ 1 } px={ 1.5 }>\n\t\t\t\t<Button onClick={ closePopup } disabled={ isSubmitting } color=\"secondary\" variant=\"text\" size=\"small\">\n\t\t\t\t\t{ __( 'Cancel', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ handleSubmit }\n\t\t\t\t\tdisabled={ isSubmitting || ! isValid }\n\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t>\n\t\t\t\t\t{ isSubmitting ? __( 'Creating…', 'elementor' ) : __( 'Create', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n};\n","import { useQuery } from '@elementor/query';\n\nimport { apiClient } from '../api';\n\nexport const COMPONENTS_QUERY_KEY = 'components';\n\nexport const useComponents = () => {\n\treturn useQuery( {\n\t\tqueryKey: [ COMPONENTS_QUERY_KEY ],\n\t\tqueryFn: apiClient.get,\n\t\tstaleTime: Infinity,\n\t} );\n};\n","import { type V1ElementModelProps } from '@elementor/editor-elements';\nimport { type HttpResponse, httpService } from '@elementor/http-client';\n\nconst BASE_URL = 'elementor/v1/components';\n\ntype CreateComponentPayload = {\n\tname: string;\n\tcontent: V1ElementModelProps[];\n};\n\ntype GetComponentResponse = Array< {\n\tcomponent_id: number;\n\tname: string;\n} >;\n\nexport type CreateComponentResponse = {\n\tcomponent_id: number;\n};\n\nexport const apiClient = {\n\tget: () =>\n\t\thttpService()\n\t\t\t.get< HttpResponse< GetComponentResponse > >( `${ BASE_URL }` )\n\t\t\t.then( ( res ) => res.data.data ),\n\tcreate: ( payload: CreateComponentPayload ) =>\n\t\thttpService()\n\t\t\t.post< HttpResponse< CreateComponentResponse > >( `${ BASE_URL }`, payload )\n\t\t\t.then( ( res ) => res.data.data ),\n};\n","import { useMutation, useQueryClient } from '@elementor/query';\n\nimport { apiClient } from '../api';\nimport { COMPONENTS_QUERY_KEY } from './use-components';\n\nexport const useCreateComponentMutation = () => {\n\tconst queryClient = useQueryClient();\n\n\treturn useMutation( {\n\t\tmutationFn: apiClient.create,\n\t\tonSuccess: () => queryClient.invalidateQueries( { queryKey: [ COMPONENTS_QUERY_KEY ] } ),\n\t} );\n};\n","import { useMemo, useState } from 'react';\nimport { type z } from '@elementor/schema';\n\nexport const useForm = < TValues extends Record< string, unknown > >( initialValues: TValues ) => {\n\tconst [ values, setValues ] = useState< TValues >( initialValues );\n\tconst [ errors, setErrors ] = useState< Partial< Record< keyof TValues, string > > >( {} );\n\n\tconst isValid = useMemo( () => {\n\t\treturn ! Object.values( errors ).some( ( error ) => error );\n\t}, [ errors ] );\n\n\tconst handleChange = (\n\t\te: React.ChangeEvent< HTMLInputElement >,\n\t\tfield: keyof TValues,\n\t\tvalidationSchema: z.ZodType< TValues >\n\t) => {\n\t\tconst updated = { ...values, [ field ]: e.target.value };\n\t\tsetValues( updated );\n\n\t\tconst { success, errors: validationErrors } = validateForm( updated, validationSchema );\n\n\t\tif ( ! success ) {\n\t\t\tsetErrors( validationErrors );\n\t\t} else {\n\t\t\tsetErrors( {} );\n\t\t}\n\t};\n\n\tconst validate = (\n\t\tvalidationSchema: z.ZodType< TValues >\n\t): { success: true; parsedValues: TValues } | { success: false; parsedValues?: never } => {\n\t\tconst { success, errors: validationErrors, parsedValues } = validateForm( values, validationSchema );\n\n\t\tif ( ! success ) {\n\t\t\tsetErrors( validationErrors );\n\t\t\treturn { success };\n\t\t}\n\t\tsetErrors( {} );\n\t\treturn { success, parsedValues };\n\t};\n\n\treturn {\n\t\tvalues,\n\t\terrors,\n\t\tisValid,\n\t\thandleChange,\n\t\tvalidateForm: validate,\n\t};\n};\n\nconst validateForm = < TValues extends Record< string, unknown > >(\n\tvalues: TValues,\n\tschema: z.ZodType< TValues >\n):\n\t| { success: false; parsedValues?: never; errors: Partial< Record< keyof TValues, string > > }\n\t| { success: true; parsedValues: TValues; errors?: never } => {\n\tconst result = schema.safeParse( values );\n\n\tif ( result.success ) {\n\t\treturn { success: true, parsedValues: result.data };\n\t}\n\n\tconst errors = {} as Partial< Record< keyof TValues, string > >;\n\n\t( Object.entries( result.error.formErrors.fieldErrors ) as Array< [ keyof TValues, string[] ] > ).forEach(\n\t\t( [ field, error ] ) => {\n\t\t\terrors[ field ] = error[ 0 ];\n\t\t}\n\t);\n\n\treturn { success: false, errors };\n};\n","import { z } from '@elementor/schema';\nimport { __ } from '@wordpress/i18n';\n\nconst MIN_NAME_LENGTH = 2;\nconst MAX_NAME_LENGTH = 50;\n\nexport const createBaseComponentSchema = ( existingNames: string[] ) => {\n\treturn z.object( {\n\t\tcomponentName: z\n\t\t\t.string()\n\t\t\t.trim()\n\t\t\t.max(\n\t\t\t\tMAX_NAME_LENGTH,\n\t\t\t\t__( 'Component name is too long. Please keep it under 50 characters.', 'elementor' )\n\t\t\t)\n\t\t\t.refine( ( value ) => ! existingNames.includes( value ), {\n\t\t\t\tmessage: __( 'Component name already exists', 'elementor' ),\n\t\t\t} ),\n\t} );\n};\n\nexport const createSubmitComponentSchema = ( existingNames: string[] ) => {\n\tconst baseSchema = createBaseComponentSchema( existingNames );\n\n\treturn baseSchema.extend( {\n\t\tcomponentName: baseSchema.shape.componentName\n\t\t\t.refine( ( value ) => value.length > 0, {\n\t\t\t\tmessage: __( 'Component name is required.', 'elementor' ),\n\t\t\t} )\n\t\t\t.refine( ( value ) => value.length >= MIN_NAME_LENGTH, {\n\t\t\t\tmessage: __( 'Component name is too short. Please enter at least 2 characters.', 'elementor' ),\n\t\t\t} ),\n\t} );\n};\n","import { replaceElement, type V1Element } from '@elementor/editor-elements';\nimport { numberPropTypeUtil } from '@elementor/editor-props';\n\nexport const replaceElementWithComponent = async ( element: V1Element, componentId: number ) => {\n\treplaceElement( {\n\t\tcurrentElement: element,\n\t\tnewElement: {\n\t\t\telType: 'widget',\n\t\t\twidgetType: 'e-component',\n\t\t\tsettings: {\n\t\t\t\tcomponent_id: numberPropTypeUtil.create( componentId ),\n\t\t\t},\n\t\t},\n\t\twithHistory: false,\n\t} );\n};\n"],"mappings":"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","names":["import_i18n","React","import_react","import_editor_elements","import_ui","import_i18n","import_query","validateForm"]}
+{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/components-tab.tsx","../src/hooks/use-components.ts","../src/api.ts","../src/utils/get-container-for-new-element.ts","../src/components/create-component-form/utils/replace-element-with-component.ts","../src/components/create-component-form/create-component-form.tsx","../src/hooks/use-create-component.ts","../src/components/create-component-form/hooks/use-form.ts","../src/components/create-component-form/utils/component-form-schema.ts"],"sourcesContent":["export { init } from './init';\n","import { injectIntoTop } from '@elementor/editor';\nimport { injectTab } from '@elementor/editor-elements-panel';\nimport { __ } from '@wordpress/i18n';\n\nimport { ComponentsTab } from './components/components-tab';\nimport { CreateComponentForm } from './components/create-component-form/create-component-form';\n\nexport function init() {\n\tinjectTab( {\n\t\tid: 'components',\n\t\tlabel: __( 'Components', 'elementor' ),\n\t\tcomponent: ComponentsTab,\n\t} );\n\n\tinjectIntoTop( {\n\t\tid: 'create-component-popup',\n\t\tcomponent: CreateComponentForm,\n\t} );\n}\n","import * as React from 'react';\nimport { dropElement, type DropElementParams } from '@elementor/editor-elements';\nimport { List, ListItem, ListItemButton, ListItemText, Typography } from '@elementor/ui';\n\nimport { useComponents } from '../hooks/use-components';\nimport { type Component } from '../types';\nimport { getContainerForNewElement } from '../utils/get-container-for-new-element';\nimport { createComponentModel } from './create-component-form/utils/replace-element-with-component';\n\nexport function ComponentsTab() {\n\tconst { data: components } = useComponents();\n\n\treturn (\n\t\t<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5, px: 2 } }>\n\t\t\t{ components?.map( ( component ) => <ComponentItem key={ component.id } component={ component } /> ) }\n\t\t</List>\n\t);\n}\n\nconst ComponentItem = ( { component }: { component: Component } ) => {\n\tconst handleClick = () => {\n\t\taddComponentToPage( createComponentModel( component.id ) );\n\t};\n\n\treturn (\n\t\t<ListItem disablePadding>\n\t\t\t<ListItemButton\n\t\t\t\tsx={ { border: '1px solid', borderColor: 'divider', py: 0.5, px: 1 } }\n\t\t\t\tshape=\"rounded\"\n\t\t\t\tonClick={ handleClick }\n\t\t\t>\n\t\t\t\t<ListItemText\n\t\t\t\t\tprimary={\n\t\t\t\t\t\t<Typography variant=\"caption\" sx={ { color: 'text.primary' } }>\n\t\t\t\t\t\t\t{ component.name }\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</ListItemButton>\n\t\t</ListItem>\n\t);\n};\n\nconst addComponentToPage = ( model: DropElementParams[ 'model' ] ) => {\n\tconst { container, options } = getContainerForNewElement();\n\n\tif ( ! container ) {\n\t\tthrow new Error( `Can't find container to drop new component instance at` );\n\t}\n\n\tdropElement( {\n\t\tcontainerId: container.id,\n\t\tmodel,\n\t\toptions: { ...options, useHistory: false, scrollIntoView: true },\n\t} );\n};\n","import { useQuery } from '@elementor/query';\n\nimport { apiClient } from '../api';\n\nexport const COMPONENTS_QUERY_KEY = 'components';\n\nexport const useComponents = () => {\n\treturn useQuery( {\n\t\tqueryKey: [ COMPONENTS_QUERY_KEY ],\n\t\tqueryFn: apiClient.get,\n\t\tstaleTime: Infinity,\n\t} );\n};\n","import { type V1ElementModelProps } from '@elementor/editor-elements';\nimport { type HttpResponse, httpService } from '@elementor/http-client';\n\nimport { type Component } from './types';\n\nconst BASE_URL = 'elementor/v1/components';\n\ntype CreateComponentPayload = {\n\tname: string;\n\tcontent: V1ElementModelProps[];\n};\n\ntype GetComponentResponse = Array< Component >;\n\nexport type CreateComponentResponse = {\n\tcomponent_id: number;\n};\n\nexport const apiClient = {\n\tget: () =>\n\t\thttpService()\n\t\t\t.get< HttpResponse< GetComponentResponse > >( `${ BASE_URL }` )\n\t\t\t.then( ( res ) => res.data.data ),\n\tcreate: ( payload: CreateComponentPayload ) =>\n\t\thttpService()\n\t\t\t.post< HttpResponse< CreateComponentResponse > >( `${ BASE_URL }`, payload )\n\t\t\t.then( ( res ) => res.data.data ),\n};\n","import {\n\tgetContainer,\n\tgetCurrentDocumentContainer,\n\tgetSelectedElements,\n\ttype V1Element,\n} from '@elementor/editor-elements';\n\nexport const getContainerForNewElement = (): { container: V1Element | null; options?: { at: number } } => {\n\tconst currentDocumentContainer = getCurrentDocumentContainer();\n\tconst selectedElement = getSelectedElementContainer();\n\n\tlet container, options;\n\n\tif ( selectedElement ) {\n\t\tswitch ( selectedElement.model.get( 'elType' ) ) {\n\t\t\tcase 'widget': {\n\t\t\t\tcontainer = selectedElement?.parent;\n\n\t\t\t\tconst selectedElIndex = selectedElement.view?._index ?? -1;\n\n\t\t\t\tif ( selectedElIndex > -1 ) {\n\t\t\t\t\toptions = { at: selectedElIndex + 1 };\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'section': {\n\t\t\t\tcontainer = selectedElement?.children?.[ 0 ];\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tcontainer = selectedElement;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn { container: container ?? currentDocumentContainer, options };\n};\n\nfunction getSelectedElementContainer() {\n\tconst selectedElements = getSelectedElements();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn undefined;\n\t}\n\n\treturn getContainer( selectedElements[ 0 ].id );\n}\n","import { replaceElement, type V1Element } from '@elementor/editor-elements';\nimport { numberPropTypeUtil } from '@elementor/editor-props';\n\nexport const replaceElementWithComponent = async ( element: V1Element, componentId: number ) => {\n\treplaceElement( {\n\t\tcurrentElement: element,\n\t\tnewElement: createComponentModel( componentId ),\n\t\twithHistory: false,\n\t} );\n};\n\nexport const createComponentModel = ( componentId: number ) => {\n\treturn {\n\t\telType: 'widget',\n\t\twidgetType: 'e-component',\n\t\tsettings: {\n\t\t\tcomponent_id: numberPropTypeUtil.create( componentId ),\n\t\t},\n\t};\n};\n","import * as React from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { getElementLabel, type V1Element } from '@elementor/editor-elements';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { StarIcon } from '@elementor/icons';\nimport { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type CreateComponentResponse } from '../../api';\nimport { useComponents } from '../../hooks/use-components';\nimport { useCreateComponentMutation } from '../../hooks/use-create-component';\nimport { type ComponentFormValues } from '../../types';\nimport { useForm } from './hooks/use-form';\nimport { createBaseComponentSchema, createSubmitComponentSchema } from './utils/component-form-schema';\nimport { replaceElementWithComponent } from './utils/replace-element-with-component';\n\ntype SaveAsComponentEventData = {\n\telement: V1Element;\n\tanchorPosition: { top: number; left: number };\n};\n\ntype ResultNotification = {\n\tshow: boolean;\n\tmessage: string;\n\ttype: 'success' | 'error';\n};\n\nexport function CreateComponentForm() {\n\tconst [ element, setElement ] = useState< {\n\t\telement: V1Element;\n\t\telementLabel: string;\n\t} | null >( null );\n\n\tconst [ anchorPosition, setAnchorPosition ] = useState< { top: number; left: number } >();\n\n\tconst [ resultNotification, setResultNotification ] = useState< ResultNotification | null >( null );\n\n\tconst { mutate: createComponent, isPending } = useCreateComponentMutation();\n\n\tuseEffect( () => {\n\t\tconst OPEN_SAVE_AS_COMPONENT_FORM_EVENT = 'elementor/editor/open-save-as-component-form';\n\n\t\tconst openPopup = ( event: CustomEvent< SaveAsComponentEventData > ) => {\n\t\t\tsetElement( { element: event.detail.element, elementLabel: getElementLabel( event.detail.element.id ) } );\n\t\t\tsetAnchorPosition( event.detail.anchorPosition );\n\t\t};\n\n\t\twindow.addEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );\n\t\t};\n\t}, [] );\n\n\tconst handleSave = async ( values: ComponentFormValues ) => {\n\t\tif ( ! element ) {\n\t\t\tthrow new Error( `Can't save element as component: element not found` );\n\t\t}\n\n\t\tcreateComponent(\n\t\t\t{\n\t\t\t\tname: values.componentName,\n\t\t\t\tcontent: [ element.element.model.toJSON( { remove: [ 'default' ] } ) ],\n\t\t\t},\n\t\t\t{\n\t\t\t\tonSuccess: ( result: CreateComponentResponse ) => {\n\t\t\t\t\tif ( ! element ) {\n\t\t\t\t\t\tthrow new Error( `Can't replace element with component: element not found` );\n\t\t\t\t\t}\n\n\t\t\t\t\treplaceElementWithComponent( element.element, result.component_id );\n\n\t\t\t\t\tsetResultNotification( {\n\t\t\t\t\t\tshow: true,\n\t\t\t\t\t\t// Translators: %1$s: Component name, %2$s: Component ID\n\t\t\t\t\t\tmessage: __( 'Component saved successfully as: %1$s (ID: %2$s)', 'elementor' )\n\t\t\t\t\t\t\t.replace( '%1$s', values.componentName )\n\t\t\t\t\t\t\t.replace( '%2$s', result.component_id.toString() ),\n\t\t\t\t\t\ttype: 'success',\n\t\t\t\t\t} );\n\n\t\t\t\t\tresetAndClosePopup();\n\t\t\t\t},\n\t\t\t\tonError: () => {\n\t\t\t\t\tconst errorMessage = __( 'Failed to save component. Please try again.', 'elementor' );\n\t\t\t\t\tsetResultNotification( {\n\t\t\t\t\t\tshow: true,\n\t\t\t\t\t\tmessage: errorMessage,\n\t\t\t\t\t\ttype: 'error',\n\t\t\t\t\t} );\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t};\n\n\tconst resetAndClosePopup = () => {\n\t\tsetElement( null );\n\t\tsetAnchorPosition( undefined );\n\t};\n\n\treturn (\n\t\t<ThemeProvider>\n\t\t\t<Popover\n\t\t\t\topen={ element !== null }\n\t\t\t\tonClose={ resetAndClosePopup }\n\t\t\t\tanchorReference=\"anchorPosition\"\n\t\t\t\tanchorPosition={ anchorPosition }\n\t\t\t>\n\t\t\t\t{ element !== null && (\n\t\t\t\t\t<Form\n\t\t\t\t\t\tinitialValues={ { componentName: element.elementLabel } }\n\t\t\t\t\t\thandleSave={ handleSave }\n\t\t\t\t\t\tisSubmitting={ isPending }\n\t\t\t\t\t\tclosePopup={ resetAndClosePopup }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Popover>\n\t\t\t<Snackbar open={ resultNotification?.show } onClose={ () => setResultNotification( null ) }>\n\t\t\t\t<Alert\n\t\t\t\t\tonClose={ () => setResultNotification( null ) }\n\t\t\t\t\tseverity={ resultNotification?.type }\n\t\t\t\t\tsx={ { width: '100%' } }\n\t\t\t\t>\n\t\t\t\t\t{ resultNotification?.message }\n\t\t\t\t</Alert>\n\t\t\t</Snackbar>\n\t\t</ThemeProvider>\n\t);\n}\n\nconst FONT_SIZE = 'tiny';\n\nconst Form = ( {\n\tinitialValues,\n\thandleSave,\n\tisSubmitting,\n\tclosePopup,\n}: {\n\tinitialValues: ComponentFormValues;\n\thandleSave: ( values: ComponentFormValues ) => void;\n\tisSubmitting: boolean;\n\tclosePopup: () => void;\n} ) => {\n\tconst { values, errors, isValid, handleChange, validateForm } = useForm< ComponentFormValues >( initialValues );\n\n\tconst { data: components } = useComponents();\n\n\tconst existingComponentNames = useMemo( () => {\n\t\treturn components?.map( ( component ) => component.name ) ?? [];\n\t}, [ components ] );\n\n\tconst changeValidationSchema = useMemo(\n\t\t() => createBaseComponentSchema( existingComponentNames ),\n\t\t[ existingComponentNames ]\n\t);\n\tconst submitValidationSchema = useMemo(\n\t\t() => createSubmitComponentSchema( existingComponentNames ),\n\t\t[ existingComponentNames ]\n\t);\n\n\tconst handleSubmit = () => {\n\t\tconst { success, parsedValues } = validateForm( submitValidationSchema );\n\n\t\tif ( success ) {\n\t\t\thandleSave( parsedValues );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Stack alignItems=\"start\" width=\"268px\">\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\talignItems=\"center\"\n\t\t\t\tpy={ 1 }\n\t\t\t\tpx={ 1.5 }\n\t\t\t\tsx={ { columnGap: 0.5, borderBottom: '1px solid', borderColor: 'divider', width: '100%' } }\n\t\t\t>\n\t\t\t\t<StarIcon fontSize={ FONT_SIZE } />\n\t\t\t\t<Typography variant=\"caption\" sx={ { color: 'text.primary', fontWeight: '500', lineHeight: 1 } }>\n\t\t\t\t\t{ __( 'Save as a component', 'elementor' ) }\n\t\t\t\t</Typography>\n\t\t\t</Stack>\n\t\t\t<Grid container gap={ 0.75 } alignItems=\"start\" p={ 1.5 }>\n\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t<FormLabel htmlFor={ 'component-name' } size=\"tiny\">\n\t\t\t\t\t\t{ __( 'Name', 'elementor' ) }\n\t\t\t\t\t</FormLabel>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t<TextField\n\t\t\t\t\t\tid={ 'component-name' }\n\t\t\t\t\t\tsize={ FONT_SIZE }\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tvalue={ values.componentName }\n\t\t\t\t\t\tonChange={ ( e: React.ChangeEvent< HTMLInputElement > ) =>\n\t\t\t\t\t\t\thandleChange( e, 'componentName', changeValidationSchema )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tinputProps={ { style: { color: 'text.primary', fontWeight: '600' } } }\n\t\t\t\t\t\terror={ Boolean( errors.componentName ) }\n\t\t\t\t\t\thelperText={ errors.componentName }\n\t\t\t\t\t/>\n\t\t\t\t</Grid>\n\t\t\t</Grid>\n\t\t\t<Stack direction=\"row\" justifyContent=\"flex-end\" alignSelf=\"end\" py={ 1 } px={ 1.5 }>\n\t\t\t\t<Button onClick={ closePopup } disabled={ isSubmitting } color=\"secondary\" variant=\"text\" size=\"small\">\n\t\t\t\t\t{ __( 'Cancel', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ handleSubmit }\n\t\t\t\t\tdisabled={ isSubmitting || ! isValid }\n\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t>\n\t\t\t\t\t{ isSubmitting ? __( 'Creating…', 'elementor' ) : __( 'Create', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n};\n","import { useMutation, useQueryClient } from '@elementor/query';\n\nimport { apiClient } from '../api';\nimport { COMPONENTS_QUERY_KEY } from './use-components';\n\nexport const useCreateComponentMutation = () => {\n\tconst queryClient = useQueryClient();\n\n\treturn useMutation( {\n\t\tmutationFn: apiClient.create,\n\t\tonSuccess: () => queryClient.invalidateQueries( { queryKey: [ COMPONENTS_QUERY_KEY ] } ),\n\t} );\n};\n","import { useMemo, useState } from 'react';\nimport { type z } from '@elementor/schema';\n\nexport const useForm = < TValues extends Record< string, unknown > >( initialValues: TValues ) => {\n\tconst [ values, setValues ] = useState< TValues >( initialValues );\n\tconst [ errors, setErrors ] = useState< Partial< Record< keyof TValues, string > > >( {} );\n\n\tconst isValid = useMemo( () => {\n\t\treturn ! Object.values( errors ).some( ( error ) => error );\n\t}, [ errors ] );\n\n\tconst handleChange = (\n\t\te: React.ChangeEvent< HTMLInputElement >,\n\t\tfield: keyof TValues,\n\t\tvalidationSchema: z.ZodType< TValues >\n\t) => {\n\t\tconst updated = { ...values, [ field ]: e.target.value };\n\t\tsetValues( updated );\n\n\t\tconst { success, errors: validationErrors } = validateForm( updated, validationSchema );\n\n\t\tif ( ! success ) {\n\t\t\tsetErrors( validationErrors );\n\t\t} else {\n\t\t\tsetErrors( {} );\n\t\t}\n\t};\n\n\tconst validate = (\n\t\tvalidationSchema: z.ZodType< TValues >\n\t): { success: true; parsedValues: TValues } | { success: false; parsedValues?: never } => {\n\t\tconst { success, errors: validationErrors, parsedValues } = validateForm( values, validationSchema );\n\n\t\tif ( ! success ) {\n\t\t\tsetErrors( validationErrors );\n\t\t\treturn { success };\n\t\t}\n\t\tsetErrors( {} );\n\t\treturn { success, parsedValues };\n\t};\n\n\treturn {\n\t\tvalues,\n\t\terrors,\n\t\tisValid,\n\t\thandleChange,\n\t\tvalidateForm: validate,\n\t};\n};\n\nconst validateForm = < TValues extends Record< string, unknown > >(\n\tvalues: TValues,\n\tschema: z.ZodType< TValues >\n):\n\t| { success: false; parsedValues?: never; errors: Partial< Record< keyof TValues, string > > }\n\t| { success: true; parsedValues: TValues; errors?: never } => {\n\tconst result = schema.safeParse( values );\n\n\tif ( result.success ) {\n\t\treturn { success: true, parsedValues: result.data };\n\t}\n\n\tconst errors = {} as Partial< Record< keyof TValues, string > >;\n\n\t( Object.entries( result.error.formErrors.fieldErrors ) as Array< [ keyof TValues, string[] ] > ).forEach(\n\t\t( [ field, error ] ) => {\n\t\t\terrors[ field ] = error[ 0 ];\n\t\t}\n\t);\n\n\treturn { success: false, errors };\n};\n","import { z } from '@elementor/schema';\nimport { __ } from '@wordpress/i18n';\n\nconst MIN_NAME_LENGTH = 2;\nconst MAX_NAME_LENGTH = 50;\n\nexport const createBaseComponentSchema = ( existingNames: string[] ) => {\n\treturn z.object( {\n\t\tcomponentName: z\n\t\t\t.string()\n\t\t\t.trim()\n\t\t\t.max(\n\t\t\t\tMAX_NAME_LENGTH,\n\t\t\t\t__( 'Component name is too long. Please keep it under 50 characters.', 'elementor' )\n\t\t\t)\n\t\t\t.refine( ( value ) => ! existingNames.includes( value ), {\n\t\t\t\tmessage: __( 'Component name already exists', 'elementor' ),\n\t\t\t} ),\n\t} );\n};\n\nexport const createSubmitComponentSchema = ( existingNames: string[] ) => {\n\tconst baseSchema = createBaseComponentSchema( existingNames );\n\n\treturn baseSchema.extend( {\n\t\tcomponentName: baseSchema.shape.componentName\n\t\t\t.refine( ( value ) => value.length > 0, {\n\t\t\t\tmessage: __( 'Component name is required.', 'elementor' ),\n\t\t\t} )\n\t\t\t.refine( ( value ) => value.length >= MIN_NAME_LENGTH, {\n\t\t\t\tmessage: __( 'Component name is too short. Please enter at least 2 characters.', 'elementor' ),\n\t\t\t} ),\n\t} );\n};\n"],"mappings":"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","names":["import_i18n","import_editor_elements","import_editor_elements","React","import_react","import_editor_elements","import_ui","import_i18n","import_query","validateForm"]}

package/dist/index.mjs

@@ -5,19 +5,8 @@ import { __ as __3 } from "@wordpress/i18n";
 
 // src/components/components-tab.tsx
 import * as React from "react";
-import { Box } from "@elementor/ui";
-function ComponentsTab() {
-  return /* @__PURE__ */ React.createElement(Box, { px: 2 }, "This is the Components tab.");
-}
-
-// src/components/create-component-form/create-component-form.tsx
-import * as React2 from "react";
-import { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
-import { getElementLabel } from "@elementor/editor-elements";
-import { ThemeProvider } from "@elementor/editor-ui";
-import { StarIcon } from "@elementor/icons";
-import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+import { dropElement } from "@elementor/editor-elements";
+import { List, ListItem, ListItemButton, ListItemText, Typography } from "@elementor/ui";
 
 // src/hooks/use-components.ts
 import { useQuery } from "@elementor/query";
@@ -40,6 +29,111 @@ var useComponents = () => {
   });
 };
 
+// src/utils/get-container-for-new-element.ts
+import {
+  getContainer,
+  getCurrentDocumentContainer,
+  getSelectedElements
+} from "@elementor/editor-elements";
+var getContainerForNewElement = () => {
+  const currentDocumentContainer = getCurrentDocumentContainer();
+  const selectedElement = getSelectedElementContainer();
+  let container, options;
+  if (selectedElement) {
+    switch (selectedElement.model.get("elType")) {
+      case "widget": {
+        container = selectedElement?.parent;
+        const selectedElIndex = selectedElement.view?._index ?? -1;
+        if (selectedElIndex > -1) {
+          options = { at: selectedElIndex + 1 };
+        }
+        break;
+      }
+      case "section": {
+        container = selectedElement?.children?.[0];
+        break;
+      }
+      default: {
+        container = selectedElement;
+        break;
+      }
+    }
+  }
+  return { container: container ?? currentDocumentContainer, options };
+};
+function getSelectedElementContainer() {
+  const selectedElements = getSelectedElements();
+  if (selectedElements.length !== 1) {
+    return void 0;
+  }
+  return getContainer(selectedElements[0].id);
+}
+
+// src/components/create-component-form/utils/replace-element-with-component.ts
+import { replaceElement } from "@elementor/editor-elements";
+import { numberPropTypeUtil } from "@elementor/editor-props";
+var replaceElementWithComponent = async (element, componentId) => {
+  replaceElement({
+    currentElement: element,
+    newElement: createComponentModel(componentId),
+    withHistory: false
+  });
+};
+var createComponentModel = (componentId) => {
+  return {
+    elType: "widget",
+    widgetType: "e-component",
+    settings: {
+      component_id: numberPropTypeUtil.create(componentId)
+    }
+  };
+};
+
+// src/components/components-tab.tsx
+function ComponentsTab() {
+  const { data: components } = useComponents();
+  return /* @__PURE__ */ React.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 0.5, px: 2 } }, components?.map((component) => /* @__PURE__ */ React.createElement(ComponentItem, { key: component.id, component })));
+}
+var ComponentItem = ({ component }) => {
+  const handleClick = () => {
+    addComponentToPage(createComponentModel(component.id));
+  };
+  return /* @__PURE__ */ React.createElement(ListItem, { disablePadding: true }, /* @__PURE__ */ React.createElement(
+    ListItemButton,
+    {
+      sx: { border: "1px solid", borderColor: "divider", py: 0.5, px: 1 },
+      shape: "rounded",
+      onClick: handleClick
+    },
+    /* @__PURE__ */ React.createElement(
+      ListItemText,
+      {
+        primary: /* @__PURE__ */ React.createElement(Typography, { variant: "caption", sx: { color: "text.primary" } }, component.name)
+      }
+    )
+  ));
+};
+var addComponentToPage = (model) => {
+  const { container, options } = getContainerForNewElement();
+  if (!container) {
+    throw new Error(`Can't find container to drop new component instance at`);
+  }
+  dropElement({
+    containerId: container.id,
+    model,
+    options: { ...options, useHistory: false, scrollIntoView: true }
+  });
+};
+
+// src/components/create-component-form/create-component-form.tsx
+import * as React2 from "react";
+import { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
+import { getElementLabel } from "@elementor/editor-elements";
+import { ThemeProvider } from "@elementor/editor-ui";
+import { StarIcon } from "@elementor/icons";
+import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography as Typography2 } from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
+
 // src/hooks/use-create-component.ts
 import { useMutation, useQueryClient } from "@elementor/query";
 var useCreateComponentMutation = () => {
@@ -125,23 +219,6 @@ var createSubmitComponentSchema = (existingNames) => {
   });
 };
 
-// src/components/create-component-form/utils/replace-element-with-component.ts
-import { replaceElement } from "@elementor/editor-elements";
-import { numberPropTypeUtil } from "@elementor/editor-props";
-var replaceElementWithComponent = async (element, componentId) => {
-  replaceElement({
-    currentElement: element,
-    newElement: {
-      elType: "widget",
-      widgetType: "e-component",
-      settings: {
-        component_id: numberPropTypeUtil.create(componentId)
-      }
-    },
-    withHistory: false
-  });
-};
-
 // src/components/create-component-form/create-component-form.tsx
 function CreateComponentForm() {
   const [element, setElement] = useState2(null);
@@ -260,7 +337,7 @@ var Form = ({
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
     },
     /* @__PURE__ */ React2.createElement(StarIcon, { fontSize: FONT_SIZE }),
-    /* @__PURE__ */ React2.createElement(Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, __2("Save as a component", "elementor"))
+    /* @__PURE__ */ React2.createElement(Typography2, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, __2("Save as a component", "elementor"))
   ), /* @__PURE__ */ React2.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(FormLabel, { htmlFor: "component-name", size: "tiny" }, __2("Name", "elementor"))), /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
     TextField,
     {

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/init.ts","../src/components/components-tab.tsx","../src/components/create-component-form/create-component-form.tsx","../src/hooks/use-components.ts","../src/api.ts","../src/hooks/use-create-component.ts","../src/components/create-component-form/hooks/use-form.ts","../src/components/create-component-form/utils/component-form-schema.ts","../src/components/create-component-form/utils/replace-element-with-component.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\nimport { injectTab } from '@elementor/editor-elements-panel';\nimport { __ } from '@wordpress/i18n';\n\nimport { ComponentsTab } from './components/components-tab';\nimport { CreateComponentForm } from './components/create-component-form/create-component-form';\n\nexport function init() {\n\tinjectTab( {\n\t\tid: 'components',\n\t\tlabel: __( 'Components', 'elementor' ),\n\t\tcomponent: ComponentsTab,\n\t} );\n\n\tinjectIntoTop( {\n\t\tid: 'create-component-popup',\n\t\tcomponent: CreateComponentForm,\n\t} );\n}\n","import * as React from 'react';\nimport { Box } from '@elementor/ui';\n\nexport function ComponentsTab() {\n\treturn <Box px={ 2 }>This is the Components tab.</Box>;\n}\n","import * as React from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { getElementLabel, type V1Element } from '@elementor/editor-elements';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { StarIcon } from '@elementor/icons';\nimport { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type CreateComponentResponse } from '../../api';\nimport { useComponents } from '../../hooks/use-components';\nimport { useCreateComponentMutation } from '../../hooks/use-create-component';\nimport { type ComponentFormValues } from '../../types';\nimport { useForm } from './hooks/use-form';\nimport { createBaseComponentSchema, createSubmitComponentSchema } from './utils/component-form-schema';\nimport { replaceElementWithComponent } from './utils/replace-element-with-component';\n\ntype SaveAsComponentEventData = {\n\telement: V1Element;\n\tanchorPosition: { top: number; left: number };\n};\n\ntype ResultNotification = {\n\tshow: boolean;\n\tmessage: string;\n\ttype: 'success' | 'error';\n};\n\nexport function CreateComponentForm() {\n\tconst [ element, setElement ] = useState< {\n\t\telement: V1Element;\n\t\telementLabel: string;\n\t} | null >( null );\n\n\tconst [ anchorPosition, setAnchorPosition ] = useState< { top: number; left: number } >();\n\n\tconst [ resultNotification, setResultNotification ] = useState< ResultNotification | null >( null );\n\n\tconst { mutate: createComponent, isPending } = useCreateComponentMutation();\n\n\tuseEffect( () => {\n\t\tconst OPEN_SAVE_AS_COMPONENT_FORM_EVENT = 'elementor/editor/open-save-as-component-form';\n\n\t\tconst openPopup = ( event: CustomEvent< SaveAsComponentEventData > ) => {\n\t\t\tsetElement( { element: event.detail.element, elementLabel: getElementLabel( event.detail.element.id ) } );\n\t\t\tsetAnchorPosition( event.detail.anchorPosition );\n\t\t};\n\n\t\twindow.addEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );\n\t\t};\n\t}, [] );\n\n\tconst handleSave = async ( values: ComponentFormValues ) => {\n\t\tif ( ! element ) {\n\t\t\tthrow new Error( `Can't save element as component: element not found` );\n\t\t}\n\n\t\tcreateComponent(\n\t\t\t{\n\t\t\t\tname: values.componentName,\n\t\t\t\tcontent: [ element.element.model.toJSON( { remove: [ 'default' ] } ) ],\n\t\t\t},\n\t\t\t{\n\t\t\t\tonSuccess: ( result: CreateComponentResponse ) => {\n\t\t\t\t\tif ( ! element ) {\n\t\t\t\t\t\tthrow new Error( `Can't replace element with component: element not found` );\n\t\t\t\t\t}\n\n\t\t\t\t\treplaceElementWithComponent( element.element, result.component_id );\n\n\t\t\t\t\tsetResultNotification( {\n\t\t\t\t\t\tshow: true,\n\t\t\t\t\t\t// Translators: %1$s: Component name, %2$s: Component ID\n\t\t\t\t\t\tmessage: __( 'Component saved successfully as: %1$s (ID: %2$s)', 'elementor' )\n\t\t\t\t\t\t\t.replace( '%1$s', values.componentName )\n\t\t\t\t\t\t\t.replace( '%2$s', result.component_id.toString() ),\n\t\t\t\t\t\ttype: 'success',\n\t\t\t\t\t} );\n\n\t\t\t\t\tresetAndClosePopup();\n\t\t\t\t},\n\t\t\t\tonError: () => {\n\t\t\t\t\tconst errorMessage = __( 'Failed to save component. Please try again.', 'elementor' );\n\t\t\t\t\tsetResultNotification( {\n\t\t\t\t\t\tshow: true,\n\t\t\t\t\t\tmessage: errorMessage,\n\t\t\t\t\t\ttype: 'error',\n\t\t\t\t\t} );\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t};\n\n\tconst resetAndClosePopup = () => {\n\t\tsetElement( null );\n\t\tsetAnchorPosition( undefined );\n\t};\n\n\treturn (\n\t\t<ThemeProvider>\n\t\t\t<Popover\n\t\t\t\topen={ element !== null }\n\t\t\t\tonClose={ resetAndClosePopup }\n\t\t\t\tanchorReference=\"anchorPosition\"\n\t\t\t\tanchorPosition={ anchorPosition }\n\t\t\t>\n\t\t\t\t{ element !== null && (\n\t\t\t\t\t<Form\n\t\t\t\t\t\tinitialValues={ { componentName: element.elementLabel } }\n\t\t\t\t\t\thandleSave={ handleSave }\n\t\t\t\t\t\tisSubmitting={ isPending }\n\t\t\t\t\t\tclosePopup={ resetAndClosePopup }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Popover>\n\t\t\t<Snackbar open={ resultNotification?.show } onClose={ () => setResultNotification( null ) }>\n\t\t\t\t<Alert\n\t\t\t\t\tonClose={ () => setResultNotification( null ) }\n\t\t\t\t\tseverity={ resultNotification?.type }\n\t\t\t\t\tsx={ { width: '100%' } }\n\t\t\t\t>\n\t\t\t\t\t{ resultNotification?.message }\n\t\t\t\t</Alert>\n\t\t\t</Snackbar>\n\t\t</ThemeProvider>\n\t);\n}\n\nconst FONT_SIZE = 'tiny';\n\nconst Form = ( {\n\tinitialValues,\n\thandleSave,\n\tisSubmitting,\n\tclosePopup,\n}: {\n\tinitialValues: ComponentFormValues;\n\thandleSave: ( values: ComponentFormValues ) => void;\n\tisSubmitting: boolean;\n\tclosePopup: () => void;\n} ) => {\n\tconst { values, errors, isValid, handleChange, validateForm } = useForm< ComponentFormValues >( initialValues );\n\n\tconst { data: components } = useComponents();\n\n\tconst existingComponentNames = useMemo( () => {\n\t\treturn components?.map( ( component ) => component.name ) ?? [];\n\t}, [ components ] );\n\n\tconst changeValidationSchema = useMemo(\n\t\t() => createBaseComponentSchema( existingComponentNames ),\n\t\t[ existingComponentNames ]\n\t);\n\tconst submitValidationSchema = useMemo(\n\t\t() => createSubmitComponentSchema( existingComponentNames ),\n\t\t[ existingComponentNames ]\n\t);\n\n\tconst handleSubmit = () => {\n\t\tconst { success, parsedValues } = validateForm( submitValidationSchema );\n\n\t\tif ( success ) {\n\t\t\thandleSave( parsedValues );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Stack alignItems=\"start\" width=\"268px\">\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\talignItems=\"center\"\n\t\t\t\tpy={ 1 }\n\t\t\t\tpx={ 1.5 }\n\t\t\t\tsx={ { columnGap: 0.5, borderBottom: '1px solid', borderColor: 'divider', width: '100%' } }\n\t\t\t>\n\t\t\t\t<StarIcon fontSize={ FONT_SIZE } />\n\t\t\t\t<Typography variant=\"caption\" sx={ { color: 'text.primary', fontWeight: '500', lineHeight: 1 } }>\n\t\t\t\t\t{ __( 'Save as a component', 'elementor' ) }\n\t\t\t\t</Typography>\n\t\t\t</Stack>\n\t\t\t<Grid container gap={ 0.75 } alignItems=\"start\" p={ 1.5 }>\n\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t<FormLabel htmlFor={ 'component-name' } size=\"tiny\">\n\t\t\t\t\t\t{ __( 'Name', 'elementor' ) }\n\t\t\t\t\t</FormLabel>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t<TextField\n\t\t\t\t\t\tid={ 'component-name' }\n\t\t\t\t\t\tsize={ FONT_SIZE }\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tvalue={ values.componentName }\n\t\t\t\t\t\tonChange={ ( e: React.ChangeEvent< HTMLInputElement > ) =>\n\t\t\t\t\t\t\thandleChange( e, 'componentName', changeValidationSchema )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tinputProps={ { style: { color: 'text.primary', fontWeight: '600' } } }\n\t\t\t\t\t\terror={ Boolean( errors.componentName ) }\n\t\t\t\t\t\thelperText={ errors.componentName }\n\t\t\t\t\t/>\n\t\t\t\t</Grid>\n\t\t\t</Grid>\n\t\t\t<Stack direction=\"row\" justifyContent=\"flex-end\" alignSelf=\"end\" py={ 1 } px={ 1.5 }>\n\t\t\t\t<Button onClick={ closePopup } disabled={ isSubmitting } color=\"secondary\" variant=\"text\" size=\"small\">\n\t\t\t\t\t{ __( 'Cancel', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ handleSubmit }\n\t\t\t\t\tdisabled={ isSubmitting || ! isValid }\n\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t>\n\t\t\t\t\t{ isSubmitting ? __( 'Creating…', 'elementor' ) : __( 'Create', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n};\n","import { useQuery } from '@elementor/query';\n\nimport { apiClient } from '../api';\n\nexport const COMPONENTS_QUERY_KEY = 'components';\n\nexport const useComponents = () => {\n\treturn useQuery( {\n\t\tqueryKey: [ COMPONENTS_QUERY_KEY ],\n\t\tqueryFn: apiClient.get,\n\t\tstaleTime: Infinity,\n\t} );\n};\n","import { type V1ElementModelProps } from '@elementor/editor-elements';\nimport { type HttpResponse, httpService } from '@elementor/http-client';\n\nconst BASE_URL = 'elementor/v1/components';\n\ntype CreateComponentPayload = {\n\tname: string;\n\tcontent: V1ElementModelProps[];\n};\n\ntype GetComponentResponse = Array< {\n\tcomponent_id: number;\n\tname: string;\n} >;\n\nexport type CreateComponentResponse = {\n\tcomponent_id: number;\n};\n\nexport const apiClient = {\n\tget: () =>\n\t\thttpService()\n\t\t\t.get< HttpResponse< GetComponentResponse > >( `${ BASE_URL }` )\n\t\t\t.then( ( res ) => res.data.data ),\n\tcreate: ( payload: CreateComponentPayload ) =>\n\t\thttpService()\n\t\t\t.post< HttpResponse< CreateComponentResponse > >( `${ BASE_URL }`, payload )\n\t\t\t.then( ( res ) => res.data.data ),\n};\n","import { useMutation, useQueryClient } from '@elementor/query';\n\nimport { apiClient } from '../api';\nimport { COMPONENTS_QUERY_KEY } from './use-components';\n\nexport const useCreateComponentMutation = () => {\n\tconst queryClient = useQueryClient();\n\n\treturn useMutation( {\n\t\tmutationFn: apiClient.create,\n\t\tonSuccess: () => queryClient.invalidateQueries( { queryKey: [ COMPONENTS_QUERY_KEY ] } ),\n\t} );\n};\n","import { useMemo, useState } from 'react';\nimport { type z } from '@elementor/schema';\n\nexport const useForm = < TValues extends Record< string, unknown > >( initialValues: TValues ) => {\n\tconst [ values, setValues ] = useState< TValues >( initialValues );\n\tconst [ errors, setErrors ] = useState< Partial< Record< keyof TValues, string > > >( {} );\n\n\tconst isValid = useMemo( () => {\n\t\treturn ! Object.values( errors ).some( ( error ) => error );\n\t}, [ errors ] );\n\n\tconst handleChange = (\n\t\te: React.ChangeEvent< HTMLInputElement >,\n\t\tfield: keyof TValues,\n\t\tvalidationSchema: z.ZodType< TValues >\n\t) => {\n\t\tconst updated = { ...values, [ field ]: e.target.value };\n\t\tsetValues( updated );\n\n\t\tconst { success, errors: validationErrors } = validateForm( updated, validationSchema );\n\n\t\tif ( ! success ) {\n\t\t\tsetErrors( validationErrors );\n\t\t} else {\n\t\t\tsetErrors( {} );\n\t\t}\n\t};\n\n\tconst validate = (\n\t\tvalidationSchema: z.ZodType< TValues >\n\t): { success: true; parsedValues: TValues } | { success: false; parsedValues?: never } => {\n\t\tconst { success, errors: validationErrors, parsedValues } = validateForm( values, validationSchema );\n\n\t\tif ( ! success ) {\n\t\t\tsetErrors( validationErrors );\n\t\t\treturn { success };\n\t\t}\n\t\tsetErrors( {} );\n\t\treturn { success, parsedValues };\n\t};\n\n\treturn {\n\t\tvalues,\n\t\terrors,\n\t\tisValid,\n\t\thandleChange,\n\t\tvalidateForm: validate,\n\t};\n};\n\nconst validateForm = < TValues extends Record< string, unknown > >(\n\tvalues: TValues,\n\tschema: z.ZodType< TValues >\n):\n\t| { success: false; parsedValues?: never; errors: Partial< Record< keyof TValues, string > > }\n\t| { success: true; parsedValues: TValues; errors?: never } => {\n\tconst result = schema.safeParse( values );\n\n\tif ( result.success ) {\n\t\treturn { success: true, parsedValues: result.data };\n\t}\n\n\tconst errors = {} as Partial< Record< keyof TValues, string > >;\n\n\t( Object.entries( result.error.formErrors.fieldErrors ) as Array< [ keyof TValues, string[] ] > ).forEach(\n\t\t( [ field, error ] ) => {\n\t\t\terrors[ field ] = error[ 0 ];\n\t\t}\n\t);\n\n\treturn { success: false, errors };\n};\n","import { z } from '@elementor/schema';\nimport { __ } from '@wordpress/i18n';\n\nconst MIN_NAME_LENGTH = 2;\nconst MAX_NAME_LENGTH = 50;\n\nexport const createBaseComponentSchema = ( existingNames: string[] ) => {\n\treturn z.object( {\n\t\tcomponentName: z\n\t\t\t.string()\n\t\t\t.trim()\n\t\t\t.max(\n\t\t\t\tMAX_NAME_LENGTH,\n\t\t\t\t__( 'Component name is too long. Please keep it under 50 characters.', 'elementor' )\n\t\t\t)\n\t\t\t.refine( ( value ) => ! existingNames.includes( value ), {\n\t\t\t\tmessage: __( 'Component name already exists', 'elementor' ),\n\t\t\t} ),\n\t} );\n};\n\nexport const createSubmitComponentSchema = ( existingNames: string[] ) => {\n\tconst baseSchema = createBaseComponentSchema( existingNames );\n\n\treturn baseSchema.extend( {\n\t\tcomponentName: baseSchema.shape.componentName\n\t\t\t.refine( ( value ) => value.length > 0, {\n\t\t\t\tmessage: __( 'Component name is required.', 'elementor' ),\n\t\t\t} )\n\t\t\t.refine( ( value ) => value.length >= MIN_NAME_LENGTH, {\n\t\t\t\tmessage: __( 'Component name is too short. Please enter at least 2 characters.', 'elementor' ),\n\t\t\t} ),\n\t} );\n};\n","import { replaceElement, type V1Element } from '@elementor/editor-elements';\nimport { numberPropTypeUtil } from '@elementor/editor-props';\n\nexport const replaceElementWithComponent = async ( element: V1Element, componentId: number ) => {\n\treplaceElement( {\n\t\tcurrentElement: element,\n\t\tnewElement: {\n\t\t\telType: 'widget',\n\t\t\twidgetType: 'e-component',\n\t\t\tsettings: {\n\t\t\t\tcomponent_id: numberPropTypeUtil.create( componentId ),\n\t\t\t},\n\t\t},\n\t\twithHistory: false,\n\t} );\n};\n"],"mappings":"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","names":["__","React","useMemo","useState","__","useState","__","validateForm","useMemo","__"]}
+{"version":3,"sources":["../src/init.ts","../src/components/components-tab.tsx","../src/hooks/use-components.ts","../src/api.ts","../src/utils/get-container-for-new-element.ts","../src/components/create-component-form/utils/replace-element-with-component.ts","../src/components/create-component-form/create-component-form.tsx","../src/hooks/use-create-component.ts","../src/components/create-component-form/hooks/use-form.ts","../src/components/create-component-form/utils/component-form-schema.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\nimport { injectTab } from '@elementor/editor-elements-panel';\nimport { __ } from '@wordpress/i18n';\n\nimport { ComponentsTab } from './components/components-tab';\nimport { CreateComponentForm } from './components/create-component-form/create-component-form';\n\nexport function init() {\n\tinjectTab( {\n\t\tid: 'components',\n\t\tlabel: __( 'Components', 'elementor' ),\n\t\tcomponent: ComponentsTab,\n\t} );\n\n\tinjectIntoTop( {\n\t\tid: 'create-component-popup',\n\t\tcomponent: CreateComponentForm,\n\t} );\n}\n","import * as React from 'react';\nimport { dropElement, type DropElementParams } from '@elementor/editor-elements';\nimport { List, ListItem, ListItemButton, ListItemText, Typography } from '@elementor/ui';\n\nimport { useComponents } from '../hooks/use-components';\nimport { type Component } from '../types';\nimport { getContainerForNewElement } from '../utils/get-container-for-new-element';\nimport { createComponentModel } from './create-component-form/utils/replace-element-with-component';\n\nexport function ComponentsTab() {\n\tconst { data: components } = useComponents();\n\n\treturn (\n\t\t<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5, px: 2 } }>\n\t\t\t{ components?.map( ( component ) => <ComponentItem key={ component.id } component={ component } /> ) }\n\t\t</List>\n\t);\n}\n\nconst ComponentItem = ( { component }: { component: Component } ) => {\n\tconst handleClick = () => {\n\t\taddComponentToPage( createComponentModel( component.id ) );\n\t};\n\n\treturn (\n\t\t<ListItem disablePadding>\n\t\t\t<ListItemButton\n\t\t\t\tsx={ { border: '1px solid', borderColor: 'divider', py: 0.5, px: 1 } }\n\t\t\t\tshape=\"rounded\"\n\t\t\t\tonClick={ handleClick }\n\t\t\t>\n\t\t\t\t<ListItemText\n\t\t\t\t\tprimary={\n\t\t\t\t\t\t<Typography variant=\"caption\" sx={ { color: 'text.primary' } }>\n\t\t\t\t\t\t\t{ component.name }\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</ListItemButton>\n\t\t</ListItem>\n\t);\n};\n\nconst addComponentToPage = ( model: DropElementParams[ 'model' ] ) => {\n\tconst { container, options } = getContainerForNewElement();\n\n\tif ( ! container ) {\n\t\tthrow new Error( `Can't find container to drop new component instance at` );\n\t}\n\n\tdropElement( {\n\t\tcontainerId: container.id,\n\t\tmodel,\n\t\toptions: { ...options, useHistory: false, scrollIntoView: true },\n\t} );\n};\n","import { useQuery } from '@elementor/query';\n\nimport { apiClient } from '../api';\n\nexport const COMPONENTS_QUERY_KEY = 'components';\n\nexport const useComponents = () => {\n\treturn useQuery( {\n\t\tqueryKey: [ COMPONENTS_QUERY_KEY ],\n\t\tqueryFn: apiClient.get,\n\t\tstaleTime: Infinity,\n\t} );\n};\n","import { type V1ElementModelProps } from '@elementor/editor-elements';\nimport { type HttpResponse, httpService } from '@elementor/http-client';\n\nimport { type Component } from './types';\n\nconst BASE_URL = 'elementor/v1/components';\n\ntype CreateComponentPayload = {\n\tname: string;\n\tcontent: V1ElementModelProps[];\n};\n\ntype GetComponentResponse = Array< Component >;\n\nexport type CreateComponentResponse = {\n\tcomponent_id: number;\n};\n\nexport const apiClient = {\n\tget: () =>\n\t\thttpService()\n\t\t\t.get< HttpResponse< GetComponentResponse > >( `${ BASE_URL }` )\n\t\t\t.then( ( res ) => res.data.data ),\n\tcreate: ( payload: CreateComponentPayload ) =>\n\t\thttpService()\n\t\t\t.post< HttpResponse< CreateComponentResponse > >( `${ BASE_URL }`, payload )\n\t\t\t.then( ( res ) => res.data.data ),\n};\n","import {\n\tgetContainer,\n\tgetCurrentDocumentContainer,\n\tgetSelectedElements,\n\ttype V1Element,\n} from '@elementor/editor-elements';\n\nexport const getContainerForNewElement = (): { container: V1Element | null; options?: { at: number } } => {\n\tconst currentDocumentContainer = getCurrentDocumentContainer();\n\tconst selectedElement = getSelectedElementContainer();\n\n\tlet container, options;\n\n\tif ( selectedElement ) {\n\t\tswitch ( selectedElement.model.get( 'elType' ) ) {\n\t\t\tcase 'widget': {\n\t\t\t\tcontainer = selectedElement?.parent;\n\n\t\t\t\tconst selectedElIndex = selectedElement.view?._index ?? -1;\n\n\t\t\t\tif ( selectedElIndex > -1 ) {\n\t\t\t\t\toptions = { at: selectedElIndex + 1 };\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'section': {\n\t\t\t\tcontainer = selectedElement?.children?.[ 0 ];\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tcontainer = selectedElement;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn { container: container ?? currentDocumentContainer, options };\n};\n\nfunction getSelectedElementContainer() {\n\tconst selectedElements = getSelectedElements();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn undefined;\n\t}\n\n\treturn getContainer( selectedElements[ 0 ].id );\n}\n","import { replaceElement, type V1Element } from '@elementor/editor-elements';\nimport { numberPropTypeUtil } from '@elementor/editor-props';\n\nexport const replaceElementWithComponent = async ( element: V1Element, componentId: number ) => {\n\treplaceElement( {\n\t\tcurrentElement: element,\n\t\tnewElement: createComponentModel( componentId ),\n\t\twithHistory: false,\n\t} );\n};\n\nexport const createComponentModel = ( componentId: number ) => {\n\treturn {\n\t\telType: 'widget',\n\t\twidgetType: 'e-component',\n\t\tsettings: {\n\t\t\tcomponent_id: numberPropTypeUtil.create( componentId ),\n\t\t},\n\t};\n};\n","import * as React from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { getElementLabel, type V1Element } from '@elementor/editor-elements';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { StarIcon } from '@elementor/icons';\nimport { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type CreateComponentResponse } from '../../api';\nimport { useComponents } from '../../hooks/use-components';\nimport { useCreateComponentMutation } from '../../hooks/use-create-component';\nimport { type ComponentFormValues } from '../../types';\nimport { useForm } from './hooks/use-form';\nimport { createBaseComponentSchema, createSubmitComponentSchema } from './utils/component-form-schema';\nimport { replaceElementWithComponent } from './utils/replace-element-with-component';\n\ntype SaveAsComponentEventData = {\n\telement: V1Element;\n\tanchorPosition: { top: number; left: number };\n};\n\ntype ResultNotification = {\n\tshow: boolean;\n\tmessage: string;\n\ttype: 'success' | 'error';\n};\n\nexport function CreateComponentForm() {\n\tconst [ element, setElement ] = useState< {\n\t\telement: V1Element;\n\t\telementLabel: string;\n\t} | null >( null );\n\n\tconst [ anchorPosition, setAnchorPosition ] = useState< { top: number; left: number } >();\n\n\tconst [ resultNotification, setResultNotification ] = useState< ResultNotification | null >( null );\n\n\tconst { mutate: createComponent, isPending } = useCreateComponentMutation();\n\n\tuseEffect( () => {\n\t\tconst OPEN_SAVE_AS_COMPONENT_FORM_EVENT = 'elementor/editor/open-save-as-component-form';\n\n\t\tconst openPopup = ( event: CustomEvent< SaveAsComponentEventData > ) => {\n\t\t\tsetElement( { element: event.detail.element, elementLabel: getElementLabel( event.detail.element.id ) } );\n\t\t\tsetAnchorPosition( event.detail.anchorPosition );\n\t\t};\n\n\t\twindow.addEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );\n\t\t};\n\t}, [] );\n\n\tconst handleSave = async ( values: ComponentFormValues ) => {\n\t\tif ( ! element ) {\n\t\t\tthrow new Error( `Can't save element as component: element not found` );\n\t\t}\n\n\t\tcreateComponent(\n\t\t\t{\n\t\t\t\tname: values.componentName,\n\t\t\t\tcontent: [ element.element.model.toJSON( { remove: [ 'default' ] } ) ],\n\t\t\t},\n\t\t\t{\n\t\t\t\tonSuccess: ( result: CreateComponentResponse ) => {\n\t\t\t\t\tif ( ! element ) {\n\t\t\t\t\t\tthrow new Error( `Can't replace element with component: element not found` );\n\t\t\t\t\t}\n\n\t\t\t\t\treplaceElementWithComponent( element.element, result.component_id );\n\n\t\t\t\t\tsetResultNotification( {\n\t\t\t\t\t\tshow: true,\n\t\t\t\t\t\t// Translators: %1$s: Component name, %2$s: Component ID\n\t\t\t\t\t\tmessage: __( 'Component saved successfully as: %1$s (ID: %2$s)', 'elementor' )\n\t\t\t\t\t\t\t.replace( '%1$s', values.componentName )\n\t\t\t\t\t\t\t.replace( '%2$s', result.component_id.toString() ),\n\t\t\t\t\t\ttype: 'success',\n\t\t\t\t\t} );\n\n\t\t\t\t\tresetAndClosePopup();\n\t\t\t\t},\n\t\t\t\tonError: () => {\n\t\t\t\t\tconst errorMessage = __( 'Failed to save component. Please try again.', 'elementor' );\n\t\t\t\t\tsetResultNotification( {\n\t\t\t\t\t\tshow: true,\n\t\t\t\t\t\tmessage: errorMessage,\n\t\t\t\t\t\ttype: 'error',\n\t\t\t\t\t} );\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t};\n\n\tconst resetAndClosePopup = () => {\n\t\tsetElement( null );\n\t\tsetAnchorPosition( undefined );\n\t};\n\n\treturn (\n\t\t<ThemeProvider>\n\t\t\t<Popover\n\t\t\t\topen={ element !== null }\n\t\t\t\tonClose={ resetAndClosePopup }\n\t\t\t\tanchorReference=\"anchorPosition\"\n\t\t\t\tanchorPosition={ anchorPosition }\n\t\t\t>\n\t\t\t\t{ element !== null && (\n\t\t\t\t\t<Form\n\t\t\t\t\t\tinitialValues={ { componentName: element.elementLabel } }\n\t\t\t\t\t\thandleSave={ handleSave }\n\t\t\t\t\t\tisSubmitting={ isPending }\n\t\t\t\t\t\tclosePopup={ resetAndClosePopup }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Popover>\n\t\t\t<Snackbar open={ resultNotification?.show } onClose={ () => setResultNotification( null ) }>\n\t\t\t\t<Alert\n\t\t\t\t\tonClose={ () => setResultNotification( null ) }\n\t\t\t\t\tseverity={ resultNotification?.type }\n\t\t\t\t\tsx={ { width: '100%' } }\n\t\t\t\t>\n\t\t\t\t\t{ resultNotification?.message }\n\t\t\t\t</Alert>\n\t\t\t</Snackbar>\n\t\t</ThemeProvider>\n\t);\n}\n\nconst FONT_SIZE = 'tiny';\n\nconst Form = ( {\n\tinitialValues,\n\thandleSave,\n\tisSubmitting,\n\tclosePopup,\n}: {\n\tinitialValues: ComponentFormValues;\n\thandleSave: ( values: ComponentFormValues ) => void;\n\tisSubmitting: boolean;\n\tclosePopup: () => void;\n} ) => {\n\tconst { values, errors, isValid, handleChange, validateForm } = useForm< ComponentFormValues >( initialValues );\n\n\tconst { data: components } = useComponents();\n\n\tconst existingComponentNames = useMemo( () => {\n\t\treturn components?.map( ( component ) => component.name ) ?? [];\n\t}, [ components ] );\n\n\tconst changeValidationSchema = useMemo(\n\t\t() => createBaseComponentSchema( existingComponentNames ),\n\t\t[ existingComponentNames ]\n\t);\n\tconst submitValidationSchema = useMemo(\n\t\t() => createSubmitComponentSchema( existingComponentNames ),\n\t\t[ existingComponentNames ]\n\t);\n\n\tconst handleSubmit = () => {\n\t\tconst { success, parsedValues } = validateForm( submitValidationSchema );\n\n\t\tif ( success ) {\n\t\t\thandleSave( parsedValues );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Stack alignItems=\"start\" width=\"268px\">\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\talignItems=\"center\"\n\t\t\t\tpy={ 1 }\n\t\t\t\tpx={ 1.5 }\n\t\t\t\tsx={ { columnGap: 0.5, borderBottom: '1px solid', borderColor: 'divider', width: '100%' } }\n\t\t\t>\n\t\t\t\t<StarIcon fontSize={ FONT_SIZE } />\n\t\t\t\t<Typography variant=\"caption\" sx={ { color: 'text.primary', fontWeight: '500', lineHeight: 1 } }>\n\t\t\t\t\t{ __( 'Save as a component', 'elementor' ) }\n\t\t\t\t</Typography>\n\t\t\t</Stack>\n\t\t\t<Grid container gap={ 0.75 } alignItems=\"start\" p={ 1.5 }>\n\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t<FormLabel htmlFor={ 'component-name' } size=\"tiny\">\n\t\t\t\t\t\t{ __( 'Name', 'elementor' ) }\n\t\t\t\t\t</FormLabel>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t<TextField\n\t\t\t\t\t\tid={ 'component-name' }\n\t\t\t\t\t\tsize={ FONT_SIZE }\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tvalue={ values.componentName }\n\t\t\t\t\t\tonChange={ ( e: React.ChangeEvent< HTMLInputElement > ) =>\n\t\t\t\t\t\t\thandleChange( e, 'componentName', changeValidationSchema )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tinputProps={ { style: { color: 'text.primary', fontWeight: '600' } } }\n\t\t\t\t\t\terror={ Boolean( errors.componentName ) }\n\t\t\t\t\t\thelperText={ errors.componentName }\n\t\t\t\t\t/>\n\t\t\t\t</Grid>\n\t\t\t</Grid>\n\t\t\t<Stack direction=\"row\" justifyContent=\"flex-end\" alignSelf=\"end\" py={ 1 } px={ 1.5 }>\n\t\t\t\t<Button onClick={ closePopup } disabled={ isSubmitting } color=\"secondary\" variant=\"text\" size=\"small\">\n\t\t\t\t\t{ __( 'Cancel', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ handleSubmit }\n\t\t\t\t\tdisabled={ isSubmitting || ! isValid }\n\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t>\n\t\t\t\t\t{ isSubmitting ? __( 'Creating…', 'elementor' ) : __( 'Create', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n};\n","import { useMutation, useQueryClient } from '@elementor/query';\n\nimport { apiClient } from '../api';\nimport { COMPONENTS_QUERY_KEY } from './use-components';\n\nexport const useCreateComponentMutation = () => {\n\tconst queryClient = useQueryClient();\n\n\treturn useMutation( {\n\t\tmutationFn: apiClient.create,\n\t\tonSuccess: () => queryClient.invalidateQueries( { queryKey: [ COMPONENTS_QUERY_KEY ] } ),\n\t} );\n};\n","import { useMemo, useState } from 'react';\nimport { type z } from '@elementor/schema';\n\nexport const useForm = < TValues extends Record< string, unknown > >( initialValues: TValues ) => {\n\tconst [ values, setValues ] = useState< TValues >( initialValues );\n\tconst [ errors, setErrors ] = useState< Partial< Record< keyof TValues, string > > >( {} );\n\n\tconst isValid = useMemo( () => {\n\t\treturn ! Object.values( errors ).some( ( error ) => error );\n\t}, [ errors ] );\n\n\tconst handleChange = (\n\t\te: React.ChangeEvent< HTMLInputElement >,\n\t\tfield: keyof TValues,\n\t\tvalidationSchema: z.ZodType< TValues >\n\t) => {\n\t\tconst updated = { ...values, [ field ]: e.target.value };\n\t\tsetValues( updated );\n\n\t\tconst { success, errors: validationErrors } = validateForm( updated, validationSchema );\n\n\t\tif ( ! success ) {\n\t\t\tsetErrors( validationErrors );\n\t\t} else {\n\t\t\tsetErrors( {} );\n\t\t}\n\t};\n\n\tconst validate = (\n\t\tvalidationSchema: z.ZodType< TValues >\n\t): { success: true; parsedValues: TValues } | { success: false; parsedValues?: never } => {\n\t\tconst { success, errors: validationErrors, parsedValues } = validateForm( values, validationSchema );\n\n\t\tif ( ! success ) {\n\t\t\tsetErrors( validationErrors );\n\t\t\treturn { success };\n\t\t}\n\t\tsetErrors( {} );\n\t\treturn { success, parsedValues };\n\t};\n\n\treturn {\n\t\tvalues,\n\t\terrors,\n\t\tisValid,\n\t\thandleChange,\n\t\tvalidateForm: validate,\n\t};\n};\n\nconst validateForm = < TValues extends Record< string, unknown > >(\n\tvalues: TValues,\n\tschema: z.ZodType< TValues >\n):\n\t| { success: false; parsedValues?: never; errors: Partial< Record< keyof TValues, string > > }\n\t| { success: true; parsedValues: TValues; errors?: never } => {\n\tconst result = schema.safeParse( values );\n\n\tif ( result.success ) {\n\t\treturn { success: true, parsedValues: result.data };\n\t}\n\n\tconst errors = {} as Partial< Record< keyof TValues, string > >;\n\n\t( Object.entries( result.error.formErrors.fieldErrors ) as Array< [ keyof TValues, string[] ] > ).forEach(\n\t\t( [ field, error ] ) => {\n\t\t\terrors[ field ] = error[ 0 ];\n\t\t}\n\t);\n\n\treturn { success: false, errors };\n};\n","import { z } from '@elementor/schema';\nimport { __ } from '@wordpress/i18n';\n\nconst MIN_NAME_LENGTH = 2;\nconst MAX_NAME_LENGTH = 50;\n\nexport const createBaseComponentSchema = ( existingNames: string[] ) => {\n\treturn z.object( {\n\t\tcomponentName: z\n\t\t\t.string()\n\t\t\t.trim()\n\t\t\t.max(\n\t\t\t\tMAX_NAME_LENGTH,\n\t\t\t\t__( 'Component name is too long. Please keep it under 50 characters.', 'elementor' )\n\t\t\t)\n\t\t\t.refine( ( value ) => ! existingNames.includes( value ), {\n\t\t\t\tmessage: __( 'Component name already exists', 'elementor' ),\n\t\t\t} ),\n\t} );\n};\n\nexport const createSubmitComponentSchema = ( existingNames: string[] ) => {\n\tconst baseSchema = createBaseComponentSchema( existingNames );\n\n\treturn baseSchema.extend( {\n\t\tcomponentName: baseSchema.shape.componentName\n\t\t\t.refine( ( value ) => value.length > 0, {\n\t\t\t\tmessage: __( 'Component name is required.', 'elementor' ),\n\t\t\t} )\n\t\t\t.refine( ( value ) => value.length >= MIN_NAME_LENGTH, {\n\t\t\t\tmessage: __( 'Component name is too short. Please enter at least 2 characters.', 'elementor' ),\n\t\t\t} ),\n\t} );\n};\n"],"mappings":"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","names":["__","React","useMemo","useState","Typography","__","useState","__","validateForm","useMemo","Typography","__"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.33.0-108",
+  "version": "3.33.0-110",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,15 +40,15 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-108",
-    "@elementor/editor-elements": "3.33.0-108",
-    "@elementor/editor-elements-panel": "3.33.0-108",
-    "@elementor/editor-props": "3.33.0-108",
-    "@elementor/editor-ui": "3.33.0-108",
-    "@elementor/http-client": "3.33.0-108",
+    "@elementor/editor": "3.33.0-110",
+    "@elementor/editor-elements": "3.33.0-110",
+    "@elementor/editor-elements-panel": "3.33.0-110",
+    "@elementor/editor-props": "3.33.0-110",
+    "@elementor/editor-ui": "3.33.0-110",
+    "@elementor/http-client": "3.33.0-110",
     "@elementor/icons": "1.46.0",
-    "@elementor/query": "3.33.0-108",
-    "@elementor/schema": "3.33.0-108",
+    "@elementor/query": "3.33.0-110",
+    "@elementor/schema": "3.33.0-110",
     "@elementor/ui": "1.36.12",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/api.ts

@@ -1,6 +1,8 @@
 import { type V1ElementModelProps } from '@elementor/editor-elements';
 import { type HttpResponse, httpService } from '@elementor/http-client';
 
+import { type Component } from './types';
+
 const BASE_URL = 'elementor/v1/components';
 
 type CreateComponentPayload = {
@@ -8,10 +10,7 @@ type CreateComponentPayload = {
 	content: V1ElementModelProps[];
 };
 
-type GetComponentResponse = Array< {
-	component_id: number;
-	name: string;
-} >;
+type GetComponentResponse = Array< Component >;
 
 export type CreateComponentResponse = {
 	component_id: number;

package/src/components/components-tab.tsx

@@ -1,6 +1,56 @@
 import * as React from 'react';
-import { Box } from '@elementor/ui';
+import { dropElement, type DropElementParams } from '@elementor/editor-elements';
+import { List, ListItem, ListItemButton, ListItemText, Typography } from '@elementor/ui';
+
+import { useComponents } from '../hooks/use-components';
+import { type Component } from '../types';
+import { getContainerForNewElement } from '../utils/get-container-for-new-element';
+import { createComponentModel } from './create-component-form/utils/replace-element-with-component';
 
 export function ComponentsTab() {
-	return <Box px={ 2 }>This is the Components tab.</Box>;
+	const { data: components } = useComponents();
+
+	return (
+		<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5, px: 2 } }>
+			{ components?.map( ( component ) => <ComponentItem key={ component.id } component={ component } /> ) }
+		</List>
+	);
 }
+
+const ComponentItem = ( { component }: { component: Component } ) => {
+	const handleClick = () => {
+		addComponentToPage( createComponentModel( component.id ) );
+	};
+
+	return (
+		<ListItem disablePadding>
+			<ListItemButton
+				sx={ { border: '1px solid', borderColor: 'divider', py: 0.5, px: 1 } }
+				shape="rounded"
+				onClick={ handleClick }
+			>
+				<ListItemText
+					primary={
+						<Typography variant="caption" sx={ { color: 'text.primary' } }>
+							{ component.name }
+						</Typography>
+					}
+				/>
+			</ListItemButton>
+		</ListItem>
+	);
+};
+
+const addComponentToPage = ( model: DropElementParams[ 'model' ] ) => {
+	const { container, options } = getContainerForNewElement();
+
+	if ( ! container ) {
+		throw new Error( `Can't find container to drop new component instance at` );
+	}
+
+	dropElement( {
+		containerId: container.id,
+		model,
+		options: { ...options, useHistory: false, scrollIntoView: true },
+	} );
+};

package/src/components/create-component-form/utils/replace-element-with-component.ts

@@ -4,13 +4,17 @@ import { numberPropTypeUtil } from '@elementor/editor-props';
 export const replaceElementWithComponent = async ( element: V1Element, componentId: number ) => {
 	replaceElement( {
 		currentElement: element,
-		newElement: {
-			elType: 'widget',
-			widgetType: 'e-component',
-			settings: {
-				component_id: numberPropTypeUtil.create( componentId ),
-			},
-		},
+		newElement: createComponentModel( componentId ),
 		withHistory: false,
 	} );
 };
+
+export const createComponentModel = ( componentId: number ) => {
+	return {
+		elType: 'widget',
+		widgetType: 'e-component',
+		settings: {
+			component_id: numberPropTypeUtil.create( componentId ),
+		},
+	};
+};

package/src/types.ts

@@ -1,3 +1,8 @@
 export type ComponentFormValues = {
 	componentName: string;
 };
+
+export type Component = {
+	id: number;
+	name: string;
+};

package/src/utils/get-container-for-new-element.ts

@@ -0,0 +1,49 @@
+import {
+	getContainer,
+	getCurrentDocumentContainer,
+	getSelectedElements,
+	type V1Element,
+} from '@elementor/editor-elements';
+
+export const getContainerForNewElement = (): { container: V1Element | null; options?: { at: number } } => {
+	const currentDocumentContainer = getCurrentDocumentContainer();
+	const selectedElement = getSelectedElementContainer();
+
+	let container, options;
+
+	if ( selectedElement ) {
+		switch ( selectedElement.model.get( 'elType' ) ) {
+			case 'widget': {
+				container = selectedElement?.parent;
+
+				const selectedElIndex = selectedElement.view?._index ?? -1;
+
+				if ( selectedElIndex > -1 ) {
+					options = { at: selectedElIndex + 1 };
+				}
+
+				break;
+			}
+			case 'section': {
+				container = selectedElement?.children?.[ 0 ];
+				break;
+			}
+			default: {
+				container = selectedElement;
+				break;
+			}
+		}
+	}
+
+	return { container: container ?? currentDocumentContainer, options };
+};
+
+function getSelectedElementContainer() {
+	const selectedElements = getSelectedElements();
+
+	if ( selectedElements.length !== 1 ) {
+		return undefined;
+	}
+
+	return getContainer( selectedElements[ 0 ].id );
+}