@elementor/editor-components 3.33.0-119 → 3.33.0-121

package/dist/index.js

@@ -41,6 +41,7 @@ var import_i18n3 = require("@wordpress/i18n");
 
 // src/components/components-tab.tsx
 var React = __toESM(require("react"));
+var import_editor_canvas = require("@elementor/editor-canvas");
 var import_editor_elements3 = require("@elementor/editor-elements");
 var import_ui = require("@elementor/ui");
 
@@ -104,19 +105,22 @@ function getSelectedElementContainer() {
 // 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) => {
+var replaceElementWithComponent = async (element, component) => {
   (0, import_editor_elements2.replaceElement)({
     currentElement: element,
-    newElement: createComponentModel(componentId),
+    newElement: createComponentModel(component),
     withHistory: false
   });
 };
-var createComponentModel = (componentId) => {
+var createComponentModel = (component) => {
   return {
     elType: "widget",
     widgetType: "e-component",
     settings: {
-      component_id: import_editor_props.numberPropTypeUtil.create(componentId)
+      component_id: import_editor_props.numberPropTypeUtil.create(component.id)
+    },
+    editor_settings: {
+      title: component.name
     }
   };
 };
@@ -127,15 +131,19 @@ function ComponentsTab() {
   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 componentModel = createComponentModel({ id: component.id, name: component.name });
   const handleClick = () => {
-    addComponentToPage(createComponentModel(component.id));
+    addComponentToPage(componentModel);
   };
   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
+      onClick: handleClick,
+      draggable: true,
+      onDragStart: () => (0, import_editor_canvas.startDragElementFromPanel)(componentModel),
+      onDragEnd: import_editor_canvas.endDragElementFromPanel
     },
     /* @__PURE__ */ React.createElement(
       import_ui.ListItemText,
@@ -282,7 +290,10 @@ function CreateComponentForm() {
           if (!element) {
             throw new Error(`Can't replace element with component: element not found`);
           }
-          replaceElementWithComponent(element.element, result.component_id);
+          replaceElementWithComponent(element.element, {
+            id: result.component_id,
+            name: values.componentName
+          });
           setResultNotification({
             show: true,
             // Translators: %1$s: Component name, %2$s: Component ID

package/dist/index.js.map

@@ -1 +1 @@
-{"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"]}
+{"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 { endDragElementFromPanel, startDragElementFromPanel } from '@elementor/editor-canvas';\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 componentModel = createComponentModel( { id: component.id, name: component.name } );\n\n\tconst handleClick = () => {\n\t\taddComponentToPage( componentModel );\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\tdraggable\n\t\t\t\tonDragStart={ () => startDragElementFromPanel( componentModel ) }\n\t\t\t\tonDragEnd={ endDragElementFromPanel }\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\nimport { type Component } from '../../../types';\n\nexport const replaceElementWithComponent = async ( element: V1Element, component: Component ) => {\n\treplaceElement( {\n\t\tcurrentElement: element,\n\t\tnewElement: createComponentModel( component ),\n\t\twithHistory: false,\n\t} );\n};\n\nexport const createComponentModel = ( component: Component ) => {\n\treturn {\n\t\telType: 'widget',\n\t\twidgetType: 'e-component',\n\t\tsettings: {\n\t\t\tcomponent_id: numberPropTypeUtil.create( component.id ),\n\t\t},\n\t\teditor_settings: {\n\t\t\ttitle: component.name,\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, {\n\t\t\t\t\t\tid: result.component_id,\n\t\t\t\t\t\tname: values.componentName,\n\t\t\t\t\t} );\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,6 +5,7 @@ import { __ as __3 } from "@wordpress/i18n";
 
 // src/components/components-tab.tsx
 import * as React from "react";
+import { endDragElementFromPanel, startDragElementFromPanel } from "@elementor/editor-canvas";
 import { dropElement } from "@elementor/editor-elements";
 import { List, ListItem, ListItemButton, ListItemText, Typography } from "@elementor/ui";
 
@@ -72,19 +73,22 @@ function getSelectedElementContainer() {
 // 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) => {
+var replaceElementWithComponent = async (element, component) => {
   replaceElement({
     currentElement: element,
-    newElement: createComponentModel(componentId),
+    newElement: createComponentModel(component),
     withHistory: false
   });
 };
-var createComponentModel = (componentId) => {
+var createComponentModel = (component) => {
   return {
     elType: "widget",
     widgetType: "e-component",
     settings: {
-      component_id: numberPropTypeUtil.create(componentId)
+      component_id: numberPropTypeUtil.create(component.id)
+    },
+    editor_settings: {
+      title: component.name
     }
   };
 };
@@ -95,15 +99,19 @@ function ComponentsTab() {
   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 componentModel = createComponentModel({ id: component.id, name: component.name });
   const handleClick = () => {
-    addComponentToPage(createComponentModel(component.id));
+    addComponentToPage(componentModel);
   };
   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
+      onClick: handleClick,
+      draggable: true,
+      onDragStart: () => startDragElementFromPanel(componentModel),
+      onDragEnd: endDragElementFromPanel
     },
     /* @__PURE__ */ React.createElement(
       ListItemText,
@@ -250,7 +258,10 @@ function CreateComponentForm() {
           if (!element) {
             throw new Error(`Can't replace element with component: element not found`);
           }
-          replaceElementWithComponent(element.element, result.component_id);
+          replaceElementWithComponent(element.element, {
+            id: result.component_id,
+            name: values.componentName
+          });
           setResultNotification({
             show: true,
             // Translators: %1$s: Component name, %2$s: Component ID

package/dist/index.mjs.map

@@ -1 +1 @@
-{"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","__"]}
+{"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 { endDragElementFromPanel, startDragElementFromPanel } from '@elementor/editor-canvas';\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 componentModel = createComponentModel( { id: component.id, name: component.name } );\n\n\tconst handleClick = () => {\n\t\taddComponentToPage( componentModel );\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\tdraggable\n\t\t\t\tonDragStart={ () => startDragElementFromPanel( componentModel ) }\n\t\t\t\tonDragEnd={ endDragElementFromPanel }\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\nimport { type Component } from '../../../types';\n\nexport const replaceElementWithComponent = async ( element: V1Element, component: Component ) => {\n\treplaceElement( {\n\t\tcurrentElement: element,\n\t\tnewElement: createComponentModel( component ),\n\t\twithHistory: false,\n\t} );\n};\n\nexport const createComponentModel = ( component: Component ) => {\n\treturn {\n\t\telType: 'widget',\n\t\twidgetType: 'e-component',\n\t\tsettings: {\n\t\t\tcomponent_id: numberPropTypeUtil.create( component.id ),\n\t\t},\n\t\teditor_settings: {\n\t\t\ttitle: component.name,\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, {\n\t\t\t\t\t\tid: result.component_id,\n\t\t\t\t\t\tname: values.componentName,\n\t\t\t\t\t} );\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-119",
+  "version": "3.33.0-121",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,15 +40,16 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-119",
-    "@elementor/editor-elements": "3.33.0-119",
-    "@elementor/editor-elements-panel": "3.33.0-119",
-    "@elementor/editor-props": "3.33.0-119",
-    "@elementor/editor-ui": "3.33.0-119",
-    "@elementor/http-client": "3.33.0-119",
+    "@elementor/editor": "3.33.0-121",
+    "@elementor/editor-canvas": "3.33.0-121",
+    "@elementor/editor-elements": "3.33.0-121",
+    "@elementor/editor-elements-panel": "3.33.0-121",
+    "@elementor/editor-props": "3.33.0-121",
+    "@elementor/editor-ui": "3.33.0-121",
+    "@elementor/http-client": "3.33.0-121",
     "@elementor/icons": "1.46.0",
-    "@elementor/query": "3.33.0-119",
-    "@elementor/schema": "3.33.0-119",
+    "@elementor/query": "3.33.0-121",
+    "@elementor/schema": "3.33.0-121",
     "@elementor/ui": "1.36.12",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/components-tab.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { endDragElementFromPanel, startDragElementFromPanel } from '@elementor/editor-canvas';
 import { dropElement, type DropElementParams } from '@elementor/editor-elements';
 import { List, ListItem, ListItemButton, ListItemText, Typography } from '@elementor/ui';
 
@@ -18,8 +19,10 @@ export function ComponentsTab() {
 }
 
 const ComponentItem = ( { component }: { component: Component } ) => {
+	const componentModel = createComponentModel( { id: component.id, name: component.name } );
+
 	const handleClick = () => {
-		addComponentToPage( createComponentModel( component.id ) );
+		addComponentToPage( componentModel );
 	};
 
 	return (
@@ -28,6 +31,9 @@ const ComponentItem = ( { component }: { component: Component } ) => {
 				sx={ { border: '1px solid', borderColor: 'divider', py: 0.5, px: 1 } }
 				shape="rounded"
 				onClick={ handleClick }
+				draggable
+				onDragStart={ () => startDragElementFromPanel( componentModel ) }
+				onDragEnd={ endDragElementFromPanel }
 			>
 				<ListItemText
 					primary={

package/src/components/create-component-form/create-component-form.tsx

@@ -68,7 +68,10 @@ export function CreateComponentForm() {
 						throw new Error( `Can't replace element with component: element not found` );
 					}
 
-					replaceElementWithComponent( element.element, result.component_id );
+					replaceElementWithComponent( element.element, {
+						id: result.component_id,
+						name: values.componentName,
+					} );
 
 					setResultNotification( {
 						show: true,

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

@@ -1,20 +1,25 @@
 import { replaceElement, type V1Element } from '@elementor/editor-elements';
 import { numberPropTypeUtil } from '@elementor/editor-props';
 
-export const replaceElementWithComponent = async ( element: V1Element, componentId: number ) => {
+import { type Component } from '../../../types';
+
+export const replaceElementWithComponent = async ( element: V1Element, component: Component ) => {
 	replaceElement( {
 		currentElement: element,
-		newElement: createComponentModel( componentId ),
+		newElement: createComponentModel( component ),
 		withHistory: false,
 	} );
 };
 
-export const createComponentModel = ( componentId: number ) => {
+export const createComponentModel = ( component: Component ) => {
 	return {
 		elType: 'widget',
 		widgetType: 'e-component',
 		settings: {
-			component_id: numberPropTypeUtil.create( componentId ),
+			component_id: numberPropTypeUtil.create( component.id ),
+		},
+		editor_settings: {
+			title: component.name,
 		},
 	};
 };