@elementor/editor-widget-creation 4.1.0-735 → 4.1.0-736
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +44 -22
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +44 -22
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -4
- package/src/components/create-widget.tsx +61 -28
package/dist/index.js
CHANGED
|
@@ -42,37 +42,31 @@ var React = __toESM(require("react"));
|
|
|
42
42
|
var import_react = require("react");
|
|
43
43
|
var import_editor_mcp = require("@elementor/editor-mcp");
|
|
44
44
|
var import_editor_ui = require("@elementor/editor-ui");
|
|
45
|
+
var import_events = require("@elementor/events");
|
|
45
46
|
var import_icons = require("@elementor/icons");
|
|
46
47
|
var import_ui = require("@elementor/ui");
|
|
47
48
|
var import_i18n = require("@wordpress/i18n");
|
|
48
49
|
var CREATE_WIDGET_EVENT = "elementor/editor/create-widget";
|
|
49
50
|
var PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/angie-promotion.svg";
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
var ANGIE_CTA_CLICKED_EVENT = "angie_cta_clicked";
|
|
52
|
+
var ANGIE_INSTALL_STARTED_EVENT = "angie_install_started";
|
|
53
|
+
function CreateWidgetModal({ prompt, entryPoint, onClose }) {
|
|
53
54
|
const [installState, setInstallState] = (0, import_react.useState)("idle");
|
|
54
|
-
const handleShow = async (event) => {
|
|
55
|
-
const customEvent = event;
|
|
56
|
-
if ((0, import_editor_mcp.isAngieAvailable)()) {
|
|
57
|
-
(0, import_editor_mcp.sendPromptToAngie)(customEvent.detail?.prompt);
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
setPrompt(customEvent.detail?.prompt);
|
|
61
|
-
setOpen(true);
|
|
62
|
-
};
|
|
63
55
|
const handleClose = () => {
|
|
64
56
|
if (installState === "installing") {
|
|
65
57
|
return;
|
|
66
58
|
}
|
|
67
|
-
|
|
68
|
-
setPrompt(void 0);
|
|
69
|
-
setInstallState("idle");
|
|
59
|
+
onClose();
|
|
70
60
|
};
|
|
71
61
|
const handleInstall = async () => {
|
|
72
62
|
if (!prompt) {
|
|
73
63
|
return;
|
|
74
64
|
}
|
|
75
65
|
setInstallState("installing");
|
|
66
|
+
(0, import_events.trackEvent)({
|
|
67
|
+
eventName: ANGIE_INSTALL_STARTED_EVENT,
|
|
68
|
+
trigger_source: entryPoint
|
|
69
|
+
});
|
|
76
70
|
const result = await (0, import_editor_mcp.installAngiePlugin)();
|
|
77
71
|
if (!result.success) {
|
|
78
72
|
setInstallState("error");
|
|
@@ -86,13 +80,7 @@ function CreateWidget() {
|
|
|
86
80
|
}
|
|
87
81
|
(0, import_editor_mcp.redirectToInstallation)(prompt);
|
|
88
82
|
};
|
|
89
|
-
(
|
|
90
|
-
window.addEventListener(CREATE_WIDGET_EVENT, handleShow);
|
|
91
|
-
return () => {
|
|
92
|
-
window.removeEventListener(CREATE_WIDGET_EVENT, handleShow);
|
|
93
|
-
};
|
|
94
|
-
}, []);
|
|
95
|
-
return /* @__PURE__ */ React.createElement(import_editor_ui.ThemeProvider, null, /* @__PURE__ */ React.createElement(import_ui.Dialog, { fullWidth: true, maxWidth: "md", open, onClose: handleClose }, /* @__PURE__ */ React.createElement(
|
|
83
|
+
return /* @__PURE__ */ React.createElement(import_editor_ui.ThemeProvider, null, /* @__PURE__ */ React.createElement(import_ui.Dialog, { fullWidth: true, maxWidth: "md", open: true, onClose: handleClose }, /* @__PURE__ */ React.createElement(
|
|
96
84
|
import_ui.IconButton,
|
|
97
85
|
{
|
|
98
86
|
"aria-label": (0, import_i18n.__)("Close", "elementor"),
|
|
@@ -134,6 +122,40 @@ function CreateWidget() {
|
|
|
134
122
|
installState === "installing" ? (0, import_i18n.__)("Installing\u2026", "elementor") : (0, import_i18n.__)("Install Angie", "elementor")
|
|
135
123
|
)))))));
|
|
136
124
|
}
|
|
125
|
+
function CreateWidget() {
|
|
126
|
+
const [modalData, setModalData] = (0, import_react.useState)(null);
|
|
127
|
+
(0, import_react.useEffect)(() => {
|
|
128
|
+
const handleShow = (event) => {
|
|
129
|
+
const customEvent = event;
|
|
130
|
+
const hasAngieInstalled = (0, import_editor_mcp.isAngieAvailable)();
|
|
131
|
+
(0, import_events.trackEvent)({
|
|
132
|
+
eventName: ANGIE_CTA_CLICKED_EVENT,
|
|
133
|
+
entry_point: customEvent.detail.entry_point,
|
|
134
|
+
has_angie_installed: hasAngieInstalled
|
|
135
|
+
});
|
|
136
|
+
if (hasAngieInstalled) {
|
|
137
|
+
(0, import_editor_mcp.sendPromptToAngie)(customEvent.detail?.prompt);
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
setModalData(customEvent.detail);
|
|
141
|
+
};
|
|
142
|
+
window.addEventListener(CREATE_WIDGET_EVENT, handleShow);
|
|
143
|
+
return () => {
|
|
144
|
+
window.removeEventListener(CREATE_WIDGET_EVENT, handleShow);
|
|
145
|
+
};
|
|
146
|
+
}, []);
|
|
147
|
+
if (!modalData) {
|
|
148
|
+
return null;
|
|
149
|
+
}
|
|
150
|
+
return /* @__PURE__ */ React.createElement(
|
|
151
|
+
CreateWidgetModal,
|
|
152
|
+
{
|
|
153
|
+
prompt: modalData.prompt,
|
|
154
|
+
entryPoint: modalData.entry_point,
|
|
155
|
+
onClose: () => setModalData(null)
|
|
156
|
+
}
|
|
157
|
+
);
|
|
158
|
+
}
|
|
137
159
|
|
|
138
160
|
// src/init.ts
|
|
139
161
|
function init() {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/create-widget.tsx"],"sourcesContent":["export { init } from './init';\n","import { injectIntoTop } from '@elementor/editor';\n\nimport { CreateWidget } from './components/create-widget';\n\nexport function init() {\n\tinjectIntoTop( {\n\t\tid: 'create-widget',\n\t\tcomponent: CreateWidget,\n\t} );\n}\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport {\n\tinstallAngiePlugin,\n\tisAngieAvailable,\n\tredirectToAppAdmin,\n\tredirectToInstallation,\n\tsendPromptToAngie,\n} from '@elementor/editor-mcp';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { XIcon } from '@elementor/icons';\nimport { Button, CircularProgress, Dialog, DialogContent, IconButton, Image, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype ShowModalEventDetail = {\n\tprompt?: string;\n};\n\ntype InstallState = 'idle' | 'installing' | 'error';\n\nconst CREATE_WIDGET_EVENT = 'elementor/editor/create-widget';\nconst PROMOTION_IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/angie-promotion.svg';\
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/create-widget.tsx"],"sourcesContent":["export { init } from './init';\n","import { injectIntoTop } from '@elementor/editor';\n\nimport { CreateWidget } from './components/create-widget';\n\nexport function init() {\n\tinjectIntoTop( {\n\t\tid: 'create-widget',\n\t\tcomponent: CreateWidget,\n\t} );\n}\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport {\n\tinstallAngiePlugin,\n\tisAngieAvailable,\n\tredirectToAppAdmin,\n\tredirectToInstallation,\n\tsendPromptToAngie,\n} from '@elementor/editor-mcp';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { trackEvent } from '@elementor/events';\nimport { XIcon } from '@elementor/icons';\nimport { Button, CircularProgress, Dialog, DialogContent, IconButton, Image, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype ShowModalEventDetail = {\n\tprompt?: string;\n\tentry_point: string;\n};\n\ntype InstallState = 'idle' | 'installing' | 'error';\n\ntype CreateWidgetModalProps = {\n\tprompt?: string;\n\tentryPoint: string;\n\tonClose: () => void;\n};\n\nconst CREATE_WIDGET_EVENT = 'elementor/editor/create-widget';\nconst PROMOTION_IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/angie-promotion.svg';\nconst ANGIE_CTA_CLICKED_EVENT = 'angie_cta_clicked' as const;\nconst ANGIE_INSTALL_STARTED_EVENT = 'angie_install_started' as const;\n\nfunction CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalProps ) {\n\tconst [ installState, setInstallState ] = useState< InstallState >( 'idle' );\n\n\tconst handleClose = () => {\n\t\tif ( installState === 'installing' ) {\n\t\t\treturn;\n\t\t}\n\n\t\tonClose();\n\t};\n\n\tconst handleInstall = async () => {\n\t\tif ( ! prompt ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetInstallState( 'installing' );\n\n\t\ttrackEvent( {\n\t\t\teventName: ANGIE_INSTALL_STARTED_EVENT,\n\t\t\ttrigger_source: entryPoint,\n\t\t} );\n\n\t\tconst result = await installAngiePlugin();\n\n\t\tif ( ! result.success ) {\n\t\t\tsetInstallState( 'error' );\n\n\t\t\treturn;\n\t\t}\n\n\t\tredirectToAppAdmin( prompt );\n\t};\n\n\tconst handleFallbackInstall = () => {\n\t\tif ( ! prompt ) {\n\t\t\treturn;\n\t\t}\n\n\t\tredirectToInstallation( prompt );\n\t};\n\n\treturn (\n\t\t<ThemeProvider>\n\t\t\t<Dialog fullWidth maxWidth=\"md\" open onClose={ handleClose }>\n\t\t\t\t<IconButton\n\t\t\t\t\taria-label={ __( 'Close', 'elementor' ) }\n\t\t\t\t\tonClick={ handleClose }\n\t\t\t\t\tsx={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tright: 8,\n\t\t\t\t\t\ttop: 8,\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<XIcon />\n\t\t\t\t</IconButton>\n\t\t\t\t<DialogContent sx={ { p: 0, overflow: 'hidden' } }>\n\t\t\t\t\t<Stack direction=\"row\" sx={ { height: 400 } }>\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsx={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\taspectRatio: '1 / 1',\n\t\t\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t\t\t\tobjectPosition: 'right center',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tsrc={ PROMOTION_IMAGE_URL }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Stack gap={ 2 } justifyContent=\"center\" p={ 4 }>\n\t\t\t\t\t\t\t<Typography variant=\"h6\" fontWeight={ 600 } whiteSpace=\"nowrap\">\n\t\t\t\t\t\t\t\t{ installState === 'error'\n\t\t\t\t\t\t\t\t\t? __( 'Installation failed', 'elementor' )\n\t\t\t\t\t\t\t\t\t: __( 'Install Angie to build custom widgets', 'elementor' ) }\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t<Typography variant=\"body2\" color=\"text.secondary\">\n\t\t\t\t\t\t\t\t{ installState === 'error'\n\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\"We couldn't install Angie automatically. Click below to install it manually.\",\n\t\t\t\t\t\t\t\t\t\t\t'elementor'\n\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t'Angie lets you generate custom widgets, sections, and code using simple instructions.',\n\t\t\t\t\t\t\t\t\t\t\t'elementor'\n\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t{ installState !== 'error' && (\n\t\t\t\t\t\t\t\t<Typography variant=\"body2\" color=\"text.secondary\">\n\t\t\t\t\t\t\t\t\t{ __( 'Install once to start building directly inside the editor.', 'elementor' ) }\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<Stack direction=\"row\" justifyContent=\"flex-end\" sx={ { mt: 2 } }>\n\t\t\t\t\t\t\t\t{ installState === 'error' ? (\n\t\t\t\t\t\t\t\t\t<Button variant=\"contained\" color=\"accent\" onClick={ handleFallbackInstall }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Install Manually', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\t\t\t\t\t\tcolor=\"accent\"\n\t\t\t\t\t\t\t\t\t\tonClick={ handleInstall }\n\t\t\t\t\t\t\t\t\t\tdisabled={ installState === 'installing' }\n\t\t\t\t\t\t\t\t\t\tstartIcon={\n\t\t\t\t\t\t\t\t\t\t\tinstallState === 'installing' ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<CircularProgress size={ 18 } color=\"inherit\" />\n\t\t\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ installState === 'installing'\n\t\t\t\t\t\t\t\t\t\t\t? __( 'Installing…', 'elementor' )\n\t\t\t\t\t\t\t\t\t\t\t: __( 'Install Angie', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</Stack>\n\t\t\t\t</DialogContent>\n\t\t\t</Dialog>\n\t\t</ThemeProvider>\n\t);\n}\n\nexport function CreateWidget() {\n\tconst [ modalData, setModalData ] = useState< ShowModalEventDetail | null >( null );\n\n\tuseEffect( () => {\n\t\tconst handleShow = ( event: Event ) => {\n\t\t\tconst customEvent = event as CustomEvent< ShowModalEventDetail >;\n\t\t\tconst hasAngieInstalled = isAngieAvailable();\n\n\t\t\ttrackEvent( {\n\t\t\t\teventName: ANGIE_CTA_CLICKED_EVENT,\n\t\t\t\tentry_point: customEvent.detail.entry_point,\n\t\t\t\thas_angie_installed: hasAngieInstalled,\n\t\t\t} );\n\n\t\t\tif ( hasAngieInstalled ) {\n\t\t\t\tsendPromptToAngie( customEvent.detail?.prompt );\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetModalData( customEvent.detail );\n\t\t};\n\n\t\twindow.addEventListener( CREATE_WIDGET_EVENT, handleShow );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( CREATE_WIDGET_EVENT, handleShow );\n\t\t};\n\t}, [] );\n\n\tif ( ! modalData ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<CreateWidgetModal\n\t\t\tprompt={ modalData.prompt }\n\t\t\tentryPoint={ modalData.entry_point }\n\t\t\tonClose={ () => setModalData( null ) }\n\t\t/>\n\t);\n}\n"],"mappings":"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","names":[]}
|
package/dist/index.mjs
CHANGED
|
@@ -12,37 +12,31 @@ import {
|
|
|
12
12
|
sendPromptToAngie
|
|
13
13
|
} from "@elementor/editor-mcp";
|
|
14
14
|
import { ThemeProvider } from "@elementor/editor-ui";
|
|
15
|
+
import { trackEvent } from "@elementor/events";
|
|
15
16
|
import { XIcon } from "@elementor/icons";
|
|
16
17
|
import { Button, CircularProgress, Dialog, DialogContent, IconButton, Image, Stack, Typography } from "@elementor/ui";
|
|
17
18
|
import { __ } from "@wordpress/i18n";
|
|
18
19
|
var CREATE_WIDGET_EVENT = "elementor/editor/create-widget";
|
|
19
20
|
var PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/angie-promotion.svg";
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
var ANGIE_CTA_CLICKED_EVENT = "angie_cta_clicked";
|
|
22
|
+
var ANGIE_INSTALL_STARTED_EVENT = "angie_install_started";
|
|
23
|
+
function CreateWidgetModal({ prompt, entryPoint, onClose }) {
|
|
23
24
|
const [installState, setInstallState] = useState("idle");
|
|
24
|
-
const handleShow = async (event) => {
|
|
25
|
-
const customEvent = event;
|
|
26
|
-
if (isAngieAvailable()) {
|
|
27
|
-
sendPromptToAngie(customEvent.detail?.prompt);
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
setPrompt(customEvent.detail?.prompt);
|
|
31
|
-
setOpen(true);
|
|
32
|
-
};
|
|
33
25
|
const handleClose = () => {
|
|
34
26
|
if (installState === "installing") {
|
|
35
27
|
return;
|
|
36
28
|
}
|
|
37
|
-
|
|
38
|
-
setPrompt(void 0);
|
|
39
|
-
setInstallState("idle");
|
|
29
|
+
onClose();
|
|
40
30
|
};
|
|
41
31
|
const handleInstall = async () => {
|
|
42
32
|
if (!prompt) {
|
|
43
33
|
return;
|
|
44
34
|
}
|
|
45
35
|
setInstallState("installing");
|
|
36
|
+
trackEvent({
|
|
37
|
+
eventName: ANGIE_INSTALL_STARTED_EVENT,
|
|
38
|
+
trigger_source: entryPoint
|
|
39
|
+
});
|
|
46
40
|
const result = await installAngiePlugin();
|
|
47
41
|
if (!result.success) {
|
|
48
42
|
setInstallState("error");
|
|
@@ -56,13 +50,7 @@ function CreateWidget() {
|
|
|
56
50
|
}
|
|
57
51
|
redirectToInstallation(prompt);
|
|
58
52
|
};
|
|
59
|
-
|
|
60
|
-
window.addEventListener(CREATE_WIDGET_EVENT, handleShow);
|
|
61
|
-
return () => {
|
|
62
|
-
window.removeEventListener(CREATE_WIDGET_EVENT, handleShow);
|
|
63
|
-
};
|
|
64
|
-
}, []);
|
|
65
|
-
return /* @__PURE__ */ React.createElement(ThemeProvider, null, /* @__PURE__ */ React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open, onClose: handleClose }, /* @__PURE__ */ React.createElement(
|
|
53
|
+
return /* @__PURE__ */ React.createElement(ThemeProvider, null, /* @__PURE__ */ React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: true, onClose: handleClose }, /* @__PURE__ */ React.createElement(
|
|
66
54
|
IconButton,
|
|
67
55
|
{
|
|
68
56
|
"aria-label": __("Close", "elementor"),
|
|
@@ -104,6 +92,40 @@ function CreateWidget() {
|
|
|
104
92
|
installState === "installing" ? __("Installing\u2026", "elementor") : __("Install Angie", "elementor")
|
|
105
93
|
)))))));
|
|
106
94
|
}
|
|
95
|
+
function CreateWidget() {
|
|
96
|
+
const [modalData, setModalData] = useState(null);
|
|
97
|
+
useEffect(() => {
|
|
98
|
+
const handleShow = (event) => {
|
|
99
|
+
const customEvent = event;
|
|
100
|
+
const hasAngieInstalled = isAngieAvailable();
|
|
101
|
+
trackEvent({
|
|
102
|
+
eventName: ANGIE_CTA_CLICKED_EVENT,
|
|
103
|
+
entry_point: customEvent.detail.entry_point,
|
|
104
|
+
has_angie_installed: hasAngieInstalled
|
|
105
|
+
});
|
|
106
|
+
if (hasAngieInstalled) {
|
|
107
|
+
sendPromptToAngie(customEvent.detail?.prompt);
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
setModalData(customEvent.detail);
|
|
111
|
+
};
|
|
112
|
+
window.addEventListener(CREATE_WIDGET_EVENT, handleShow);
|
|
113
|
+
return () => {
|
|
114
|
+
window.removeEventListener(CREATE_WIDGET_EVENT, handleShow);
|
|
115
|
+
};
|
|
116
|
+
}, []);
|
|
117
|
+
if (!modalData) {
|
|
118
|
+
return null;
|
|
119
|
+
}
|
|
120
|
+
return /* @__PURE__ */ React.createElement(
|
|
121
|
+
CreateWidgetModal,
|
|
122
|
+
{
|
|
123
|
+
prompt: modalData.prompt,
|
|
124
|
+
entryPoint: modalData.entry_point,
|
|
125
|
+
onClose: () => setModalData(null)
|
|
126
|
+
}
|
|
127
|
+
);
|
|
128
|
+
}
|
|
107
129
|
|
|
108
130
|
// src/init.ts
|
|
109
131
|
function init() {
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/init.ts","../src/components/create-widget.tsx"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\n\nimport { CreateWidget } from './components/create-widget';\n\nexport function init() {\n\tinjectIntoTop( {\n\t\tid: 'create-widget',\n\t\tcomponent: CreateWidget,\n\t} );\n}\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport {\n\tinstallAngiePlugin,\n\tisAngieAvailable,\n\tredirectToAppAdmin,\n\tredirectToInstallation,\n\tsendPromptToAngie,\n} from '@elementor/editor-mcp';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { XIcon } from '@elementor/icons';\nimport { Button, CircularProgress, Dialog, DialogContent, IconButton, Image, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype ShowModalEventDetail = {\n\tprompt?: string;\n};\n\ntype InstallState = 'idle' | 'installing' | 'error';\n\nconst CREATE_WIDGET_EVENT = 'elementor/editor/create-widget';\nconst PROMOTION_IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/angie-promotion.svg';\
|
|
1
|
+
{"version":3,"sources":["../src/init.ts","../src/components/create-widget.tsx"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\n\nimport { CreateWidget } from './components/create-widget';\n\nexport function init() {\n\tinjectIntoTop( {\n\t\tid: 'create-widget',\n\t\tcomponent: CreateWidget,\n\t} );\n}\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport {\n\tinstallAngiePlugin,\n\tisAngieAvailable,\n\tredirectToAppAdmin,\n\tredirectToInstallation,\n\tsendPromptToAngie,\n} from '@elementor/editor-mcp';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { trackEvent } from '@elementor/events';\nimport { XIcon } from '@elementor/icons';\nimport { Button, CircularProgress, Dialog, DialogContent, IconButton, Image, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype ShowModalEventDetail = {\n\tprompt?: string;\n\tentry_point: string;\n};\n\ntype InstallState = 'idle' | 'installing' | 'error';\n\ntype CreateWidgetModalProps = {\n\tprompt?: string;\n\tentryPoint: string;\n\tonClose: () => void;\n};\n\nconst CREATE_WIDGET_EVENT = 'elementor/editor/create-widget';\nconst PROMOTION_IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/angie-promotion.svg';\nconst ANGIE_CTA_CLICKED_EVENT = 'angie_cta_clicked' as const;\nconst ANGIE_INSTALL_STARTED_EVENT = 'angie_install_started' as const;\n\nfunction CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalProps ) {\n\tconst [ installState, setInstallState ] = useState< InstallState >( 'idle' );\n\n\tconst handleClose = () => {\n\t\tif ( installState === 'installing' ) {\n\t\t\treturn;\n\t\t}\n\n\t\tonClose();\n\t};\n\n\tconst handleInstall = async () => {\n\t\tif ( ! prompt ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetInstallState( 'installing' );\n\n\t\ttrackEvent( {\n\t\t\teventName: ANGIE_INSTALL_STARTED_EVENT,\n\t\t\ttrigger_source: entryPoint,\n\t\t} );\n\n\t\tconst result = await installAngiePlugin();\n\n\t\tif ( ! result.success ) {\n\t\t\tsetInstallState( 'error' );\n\n\t\t\treturn;\n\t\t}\n\n\t\tredirectToAppAdmin( prompt );\n\t};\n\n\tconst handleFallbackInstall = () => {\n\t\tif ( ! prompt ) {\n\t\t\treturn;\n\t\t}\n\n\t\tredirectToInstallation( prompt );\n\t};\n\n\treturn (\n\t\t<ThemeProvider>\n\t\t\t<Dialog fullWidth maxWidth=\"md\" open onClose={ handleClose }>\n\t\t\t\t<IconButton\n\t\t\t\t\taria-label={ __( 'Close', 'elementor' ) }\n\t\t\t\t\tonClick={ handleClose }\n\t\t\t\t\tsx={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tright: 8,\n\t\t\t\t\t\ttop: 8,\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<XIcon />\n\t\t\t\t</IconButton>\n\t\t\t\t<DialogContent sx={ { p: 0, overflow: 'hidden' } }>\n\t\t\t\t\t<Stack direction=\"row\" sx={ { height: 400 } }>\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsx={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\taspectRatio: '1 / 1',\n\t\t\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t\t\t\tobjectPosition: 'right center',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tsrc={ PROMOTION_IMAGE_URL }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Stack gap={ 2 } justifyContent=\"center\" p={ 4 }>\n\t\t\t\t\t\t\t<Typography variant=\"h6\" fontWeight={ 600 } whiteSpace=\"nowrap\">\n\t\t\t\t\t\t\t\t{ installState === 'error'\n\t\t\t\t\t\t\t\t\t? __( 'Installation failed', 'elementor' )\n\t\t\t\t\t\t\t\t\t: __( 'Install Angie to build custom widgets', 'elementor' ) }\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t<Typography variant=\"body2\" color=\"text.secondary\">\n\t\t\t\t\t\t\t\t{ installState === 'error'\n\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\"We couldn't install Angie automatically. Click below to install it manually.\",\n\t\t\t\t\t\t\t\t\t\t\t'elementor'\n\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t'Angie lets you generate custom widgets, sections, and code using simple instructions.',\n\t\t\t\t\t\t\t\t\t\t\t'elementor'\n\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t{ installState !== 'error' && (\n\t\t\t\t\t\t\t\t<Typography variant=\"body2\" color=\"text.secondary\">\n\t\t\t\t\t\t\t\t\t{ __( 'Install once to start building directly inside the editor.', 'elementor' ) }\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<Stack direction=\"row\" justifyContent=\"flex-end\" sx={ { mt: 2 } }>\n\t\t\t\t\t\t\t\t{ installState === 'error' ? (\n\t\t\t\t\t\t\t\t\t<Button variant=\"contained\" color=\"accent\" onClick={ handleFallbackInstall }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Install Manually', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\t\t\t\t\t\tcolor=\"accent\"\n\t\t\t\t\t\t\t\t\t\tonClick={ handleInstall }\n\t\t\t\t\t\t\t\t\t\tdisabled={ installState === 'installing' }\n\t\t\t\t\t\t\t\t\t\tstartIcon={\n\t\t\t\t\t\t\t\t\t\t\tinstallState === 'installing' ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<CircularProgress size={ 18 } color=\"inherit\" />\n\t\t\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ installState === 'installing'\n\t\t\t\t\t\t\t\t\t\t\t? __( 'Installing…', 'elementor' )\n\t\t\t\t\t\t\t\t\t\t\t: __( 'Install Angie', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</Stack>\n\t\t\t\t</DialogContent>\n\t\t\t</Dialog>\n\t\t</ThemeProvider>\n\t);\n}\n\nexport function CreateWidget() {\n\tconst [ modalData, setModalData ] = useState< ShowModalEventDetail | null >( null );\n\n\tuseEffect( () => {\n\t\tconst handleShow = ( event: Event ) => {\n\t\t\tconst customEvent = event as CustomEvent< ShowModalEventDetail >;\n\t\t\tconst hasAngieInstalled = isAngieAvailable();\n\n\t\t\ttrackEvent( {\n\t\t\t\teventName: ANGIE_CTA_CLICKED_EVENT,\n\t\t\t\tentry_point: customEvent.detail.entry_point,\n\t\t\t\thas_angie_installed: hasAngieInstalled,\n\t\t\t} );\n\n\t\t\tif ( hasAngieInstalled ) {\n\t\t\t\tsendPromptToAngie( customEvent.detail?.prompt );\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetModalData( customEvent.detail );\n\t\t};\n\n\t\twindow.addEventListener( CREATE_WIDGET_EVENT, handleShow );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( CREATE_WIDGET_EVENT, handleShow );\n\t\t};\n\t}, [] );\n\n\tif ( ! modalData ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<CreateWidgetModal\n\t\t\tprompt={ modalData.prompt }\n\t\t\tentryPoint={ modalData.entry_point }\n\t\t\tonClose={ () => setModalData( null ) }\n\t\t/>\n\t);\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elementor/editor-widget-creation",
|
|
3
|
-
"version": "4.1.0-
|
|
3
|
+
"version": "4.1.0-736",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Elementor Team",
|
|
6
6
|
"homepage": "https://elementor.com/",
|
|
@@ -39,9 +39,10 @@
|
|
|
39
39
|
"dev": "tsup --config=../../tsup.dev.ts"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@elementor/editor": "4.1.0-
|
|
43
|
-
"@elementor/editor-mcp": "4.1.0-
|
|
44
|
-
"@elementor/editor-ui": "4.1.0-
|
|
42
|
+
"@elementor/editor": "4.1.0-736",
|
|
43
|
+
"@elementor/editor-mcp": "4.1.0-736",
|
|
44
|
+
"@elementor/editor-ui": "4.1.0-736",
|
|
45
|
+
"@elementor/events": "4.1.0-736",
|
|
45
46
|
"@elementor/icons": "^1.63.0",
|
|
46
47
|
"@elementor/ui": "1.36.17",
|
|
47
48
|
"@wordpress/i18n": "^5.13.0"
|
|
@@ -8,45 +8,38 @@ import {
|
|
|
8
8
|
sendPromptToAngie,
|
|
9
9
|
} from '@elementor/editor-mcp';
|
|
10
10
|
import { ThemeProvider } from '@elementor/editor-ui';
|
|
11
|
+
import { trackEvent } from '@elementor/events';
|
|
11
12
|
import { XIcon } from '@elementor/icons';
|
|
12
13
|
import { Button, CircularProgress, Dialog, DialogContent, IconButton, Image, Stack, Typography } from '@elementor/ui';
|
|
13
14
|
import { __ } from '@wordpress/i18n';
|
|
14
15
|
|
|
15
16
|
type ShowModalEventDetail = {
|
|
16
17
|
prompt?: string;
|
|
18
|
+
entry_point: string;
|
|
17
19
|
};
|
|
18
20
|
|
|
19
21
|
type InstallState = 'idle' | 'installing' | 'error';
|
|
20
22
|
|
|
23
|
+
type CreateWidgetModalProps = {
|
|
24
|
+
prompt?: string;
|
|
25
|
+
entryPoint: string;
|
|
26
|
+
onClose: () => void;
|
|
27
|
+
};
|
|
28
|
+
|
|
21
29
|
const CREATE_WIDGET_EVENT = 'elementor/editor/create-widget';
|
|
22
30
|
const PROMOTION_IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/angie-promotion.svg';
|
|
31
|
+
const ANGIE_CTA_CLICKED_EVENT = 'angie_cta_clicked' as const;
|
|
32
|
+
const ANGIE_INSTALL_STARTED_EVENT = 'angie_install_started' as const;
|
|
23
33
|
|
|
24
|
-
|
|
25
|
-
const [ open, setOpen ] = useState( false );
|
|
26
|
-
const [ prompt, setPrompt ] = useState< string | undefined >();
|
|
34
|
+
function CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalProps ) {
|
|
27
35
|
const [ installState, setInstallState ] = useState< InstallState >( 'idle' );
|
|
28
36
|
|
|
29
|
-
const handleShow = async ( event: Event ) => {
|
|
30
|
-
const customEvent = event as CustomEvent< ShowModalEventDetail >;
|
|
31
|
-
|
|
32
|
-
if ( isAngieAvailable() ) {
|
|
33
|
-
sendPromptToAngie( customEvent.detail?.prompt );
|
|
34
|
-
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
setPrompt( customEvent.detail?.prompt );
|
|
39
|
-
setOpen( true );
|
|
40
|
-
};
|
|
41
|
-
|
|
42
37
|
const handleClose = () => {
|
|
43
38
|
if ( installState === 'installing' ) {
|
|
44
39
|
return;
|
|
45
40
|
}
|
|
46
41
|
|
|
47
|
-
|
|
48
|
-
setPrompt( undefined );
|
|
49
|
-
setInstallState( 'idle' );
|
|
42
|
+
onClose();
|
|
50
43
|
};
|
|
51
44
|
|
|
52
45
|
const handleInstall = async () => {
|
|
@@ -56,6 +49,11 @@ export function CreateWidget() {
|
|
|
56
49
|
|
|
57
50
|
setInstallState( 'installing' );
|
|
58
51
|
|
|
52
|
+
trackEvent( {
|
|
53
|
+
eventName: ANGIE_INSTALL_STARTED_EVENT,
|
|
54
|
+
trigger_source: entryPoint,
|
|
55
|
+
} );
|
|
56
|
+
|
|
59
57
|
const result = await installAngiePlugin();
|
|
60
58
|
|
|
61
59
|
if ( ! result.success ) {
|
|
@@ -75,17 +73,9 @@ export function CreateWidget() {
|
|
|
75
73
|
redirectToInstallation( prompt );
|
|
76
74
|
};
|
|
77
75
|
|
|
78
|
-
useEffect( () => {
|
|
79
|
-
window.addEventListener( CREATE_WIDGET_EVENT, handleShow );
|
|
80
|
-
|
|
81
|
-
return () => {
|
|
82
|
-
window.removeEventListener( CREATE_WIDGET_EVENT, handleShow );
|
|
83
|
-
};
|
|
84
|
-
}, [] );
|
|
85
|
-
|
|
86
76
|
return (
|
|
87
77
|
<ThemeProvider>
|
|
88
|
-
<Dialog fullWidth maxWidth="md" open
|
|
78
|
+
<Dialog fullWidth maxWidth="md" open onClose={ handleClose }>
|
|
89
79
|
<IconButton
|
|
90
80
|
aria-label={ __( 'Close', 'elementor' ) }
|
|
91
81
|
onClick={ handleClose }
|
|
@@ -161,3 +151,46 @@ export function CreateWidget() {
|
|
|
161
151
|
</ThemeProvider>
|
|
162
152
|
);
|
|
163
153
|
}
|
|
154
|
+
|
|
155
|
+
export function CreateWidget() {
|
|
156
|
+
const [ modalData, setModalData ] = useState< ShowModalEventDetail | null >( null );
|
|
157
|
+
|
|
158
|
+
useEffect( () => {
|
|
159
|
+
const handleShow = ( event: Event ) => {
|
|
160
|
+
const customEvent = event as CustomEvent< ShowModalEventDetail >;
|
|
161
|
+
const hasAngieInstalled = isAngieAvailable();
|
|
162
|
+
|
|
163
|
+
trackEvent( {
|
|
164
|
+
eventName: ANGIE_CTA_CLICKED_EVENT,
|
|
165
|
+
entry_point: customEvent.detail.entry_point,
|
|
166
|
+
has_angie_installed: hasAngieInstalled,
|
|
167
|
+
} );
|
|
168
|
+
|
|
169
|
+
if ( hasAngieInstalled ) {
|
|
170
|
+
sendPromptToAngie( customEvent.detail?.prompt );
|
|
171
|
+
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
setModalData( customEvent.detail );
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
window.addEventListener( CREATE_WIDGET_EVENT, handleShow );
|
|
179
|
+
|
|
180
|
+
return () => {
|
|
181
|
+
window.removeEventListener( CREATE_WIDGET_EVENT, handleShow );
|
|
182
|
+
};
|
|
183
|
+
}, [] );
|
|
184
|
+
|
|
185
|
+
if ( ! modalData ) {
|
|
186
|
+
return null;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
return (
|
|
190
|
+
<CreateWidgetModal
|
|
191
|
+
prompt={ modalData.prompt }
|
|
192
|
+
entryPoint={ modalData.entry_point }
|
|
193
|
+
onClose={ () => setModalData( null ) }
|
|
194
|
+
/>
|
|
195
|
+
);
|
|
196
|
+
}
|