@elementor/editor-widget-creation 4.0.0-674 → 4.0.0-676
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 +33 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +41 -5
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -5
- package/src/components/create-widget.tsx +73 -14
package/dist/index.js
CHANGED
|
@@ -50,6 +50,7 @@ var PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/angie
|
|
|
50
50
|
function CreateWidget() {
|
|
51
51
|
const [open, setOpen] = (0, import_react.useState)(false);
|
|
52
52
|
const [prompt, setPrompt] = (0, import_react.useState)();
|
|
53
|
+
const [installState, setInstallState] = (0, import_react.useState)("idle");
|
|
53
54
|
const handleShow = async (event) => {
|
|
54
55
|
const customEvent = event;
|
|
55
56
|
if ((0, import_editor_mcp.isAngieAvailable)()) {
|
|
@@ -60,10 +61,26 @@ function CreateWidget() {
|
|
|
60
61
|
setOpen(true);
|
|
61
62
|
};
|
|
62
63
|
const handleClose = () => {
|
|
64
|
+
if (installState === "installing") {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
63
67
|
setOpen(false);
|
|
64
68
|
setPrompt(void 0);
|
|
69
|
+
setInstallState("idle");
|
|
65
70
|
};
|
|
66
|
-
const handleInstall = () => {
|
|
71
|
+
const handleInstall = async () => {
|
|
72
|
+
if (!prompt) {
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
setInstallState("installing");
|
|
76
|
+
const result = await (0, import_editor_mcp.installAngiePlugin)();
|
|
77
|
+
if (!result.success) {
|
|
78
|
+
setInstallState("error");
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
(0, import_editor_mcp.redirectToAppAdmin)(prompt);
|
|
82
|
+
};
|
|
83
|
+
const handleFallbackInstall = () => {
|
|
67
84
|
if (!prompt) {
|
|
68
85
|
return;
|
|
69
86
|
}
|
|
@@ -99,10 +116,23 @@ function CreateWidget() {
|
|
|
99
116
|
},
|
|
100
117
|
src: PROMOTION_IMAGE_URL
|
|
101
118
|
}
|
|
102
|
-
), /* @__PURE__ */ React.createElement(import_ui.Stack, { gap: 2, justifyContent: "center", p: 4 }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "h6", fontWeight: 600, whiteSpace: "nowrap" }, (0, import_i18n.__)("Install Angie to build custom widgets", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2", color: "text.secondary" }, (0, import_i18n.__)(
|
|
119
|
+
), /* @__PURE__ */ React.createElement(import_ui.Stack, { gap: 2, justifyContent: "center", p: 4 }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "h6", fontWeight: 600, whiteSpace: "nowrap" }, installState === "error" ? (0, import_i18n.__)("Installation failed", "elementor") : (0, import_i18n.__)("Install Angie to build custom widgets", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2", color: "text.secondary" }, installState === "error" ? (0, import_i18n.__)(
|
|
120
|
+
"We couldn't install Angie automatically. Click below to install it manually.",
|
|
121
|
+
"elementor"
|
|
122
|
+
) : (0, import_i18n.__)(
|
|
103
123
|
"Angie lets you generate custom widgets, sections, and code using simple instructions.",
|
|
104
124
|
"elementor"
|
|
105
|
-
)), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2", color: "text.secondary" }, (0, import_i18n.__)("Install once to start building directly inside the editor.", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Stack, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } }, /* @__PURE__ */ React.createElement(import_ui.Button, { variant: "contained", color: "accent", onClick:
|
|
125
|
+
)), installState !== "error" && /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2", color: "text.secondary" }, (0, import_i18n.__)("Install once to start building directly inside the editor.", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Stack, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } }, installState === "error" ? /* @__PURE__ */ React.createElement(import_ui.Button, { variant: "contained", color: "accent", onClick: handleFallbackInstall }, (0, import_i18n.__)("Install Manually", "elementor")) : /* @__PURE__ */ React.createElement(
|
|
126
|
+
import_ui.Button,
|
|
127
|
+
{
|
|
128
|
+
variant: "contained",
|
|
129
|
+
color: "accent",
|
|
130
|
+
onClick: handleInstall,
|
|
131
|
+
disabled: installState === "installing",
|
|
132
|
+
startIcon: installState === "installing" ? /* @__PURE__ */ React.createElement(import_ui.CircularProgress, { size: 18, color: "inherit" }) : void 0
|
|
133
|
+
},
|
|
134
|
+
installState === "installing" ? (0, import_i18n.__)("Installing\u2026", "elementor") : (0, import_i18n.__)("Install Angie", "elementor")
|
|
135
|
+
)))))));
|
|
106
136
|
}
|
|
107
137
|
|
|
108
138
|
// src/init.ts
|
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 {
|
|
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';\n\nexport function CreateWidget() {\n\tconst [ open, setOpen ] = useState( false );\n\tconst [ prompt, setPrompt ] = useState< string | undefined >();\n\tconst [ installState, setInstallState ] = useState< InstallState >( 'idle' );\n\n\tconst handleShow = async ( event: Event ) => {\n\t\tconst customEvent = event as CustomEvent< ShowModalEventDetail >;\n\n\t\tif ( isAngieAvailable() ) {\n\t\t\tsendPromptToAngie( customEvent.detail?.prompt );\n\n\t\t\treturn;\n\t\t}\n\n\t\tsetPrompt( customEvent.detail?.prompt );\n\t\tsetOpen( true );\n\t};\n\n\tconst handleClose = () => {\n\t\tif ( installState === 'installing' ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetOpen( false );\n\t\tsetPrompt( undefined );\n\t\tsetInstallState( 'idle' );\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\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\tuseEffect( () => {\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\treturn (\n\t\t<ThemeProvider>\n\t\t\t<Dialog fullWidth maxWidth=\"md\" open={ 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"],"mappings":"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","names":[]}
|
package/dist/index.mjs
CHANGED
|
@@ -4,16 +4,23 @@ import { injectIntoTop } from "@elementor/editor";
|
|
|
4
4
|
// src/components/create-widget.tsx
|
|
5
5
|
import * as React from "react";
|
|
6
6
|
import { useEffect, useState } from "react";
|
|
7
|
-
import {
|
|
7
|
+
import {
|
|
8
|
+
installAngiePlugin,
|
|
9
|
+
isAngieAvailable,
|
|
10
|
+
redirectToAppAdmin,
|
|
11
|
+
redirectToInstallation,
|
|
12
|
+
sendPromptToAngie
|
|
13
|
+
} from "@elementor/editor-mcp";
|
|
8
14
|
import { ThemeProvider } from "@elementor/editor-ui";
|
|
9
15
|
import { XIcon } from "@elementor/icons";
|
|
10
|
-
import { Button, Dialog, DialogContent, IconButton, Image, Stack, Typography } from "@elementor/ui";
|
|
16
|
+
import { Button, CircularProgress, Dialog, DialogContent, IconButton, Image, Stack, Typography } from "@elementor/ui";
|
|
11
17
|
import { __ } from "@wordpress/i18n";
|
|
12
18
|
var CREATE_WIDGET_EVENT = "elementor/editor/create-widget";
|
|
13
19
|
var PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/angie-promotion.svg";
|
|
14
20
|
function CreateWidget() {
|
|
15
21
|
const [open, setOpen] = useState(false);
|
|
16
22
|
const [prompt, setPrompt] = useState();
|
|
23
|
+
const [installState, setInstallState] = useState("idle");
|
|
17
24
|
const handleShow = async (event) => {
|
|
18
25
|
const customEvent = event;
|
|
19
26
|
if (isAngieAvailable()) {
|
|
@@ -24,10 +31,26 @@ function CreateWidget() {
|
|
|
24
31
|
setOpen(true);
|
|
25
32
|
};
|
|
26
33
|
const handleClose = () => {
|
|
34
|
+
if (installState === "installing") {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
27
37
|
setOpen(false);
|
|
28
38
|
setPrompt(void 0);
|
|
39
|
+
setInstallState("idle");
|
|
29
40
|
};
|
|
30
|
-
const handleInstall = () => {
|
|
41
|
+
const handleInstall = async () => {
|
|
42
|
+
if (!prompt) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
setInstallState("installing");
|
|
46
|
+
const result = await installAngiePlugin();
|
|
47
|
+
if (!result.success) {
|
|
48
|
+
setInstallState("error");
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
redirectToAppAdmin(prompt);
|
|
52
|
+
};
|
|
53
|
+
const handleFallbackInstall = () => {
|
|
31
54
|
if (!prompt) {
|
|
32
55
|
return;
|
|
33
56
|
}
|
|
@@ -63,10 +86,23 @@ function CreateWidget() {
|
|
|
63
86
|
},
|
|
64
87
|
src: PROMOTION_IMAGE_URL
|
|
65
88
|
}
|
|
66
|
-
), /* @__PURE__ */ React.createElement(Stack, { gap: 2, justifyContent: "center", p: 4 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", fontWeight: 600, whiteSpace: "nowrap" }, __("Install Angie to build custom widgets", "elementor")), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "text.secondary" }, __(
|
|
89
|
+
), /* @__PURE__ */ React.createElement(Stack, { gap: 2, justifyContent: "center", p: 4 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", fontWeight: 600, whiteSpace: "nowrap" }, installState === "error" ? __("Installation failed", "elementor") : __("Install Angie to build custom widgets", "elementor")), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "text.secondary" }, installState === "error" ? __(
|
|
90
|
+
"We couldn't install Angie automatically. Click below to install it manually.",
|
|
91
|
+
"elementor"
|
|
92
|
+
) : __(
|
|
67
93
|
"Angie lets you generate custom widgets, sections, and code using simple instructions.",
|
|
68
94
|
"elementor"
|
|
69
|
-
)), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "text.secondary" }, __("Install once to start building directly inside the editor.", "elementor")), /* @__PURE__ */ React.createElement(Stack, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } }, /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "accent", onClick:
|
|
95
|
+
)), installState !== "error" && /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "text.secondary" }, __("Install once to start building directly inside the editor.", "elementor")), /* @__PURE__ */ React.createElement(Stack, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } }, installState === "error" ? /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "accent", onClick: handleFallbackInstall }, __("Install Manually", "elementor")) : /* @__PURE__ */ React.createElement(
|
|
96
|
+
Button,
|
|
97
|
+
{
|
|
98
|
+
variant: "contained",
|
|
99
|
+
color: "accent",
|
|
100
|
+
onClick: handleInstall,
|
|
101
|
+
disabled: installState === "installing",
|
|
102
|
+
startIcon: installState === "installing" ? /* @__PURE__ */ React.createElement(CircularProgress, { size: 18, color: "inherit" }) : void 0
|
|
103
|
+
},
|
|
104
|
+
installState === "installing" ? __("Installing\u2026", "elementor") : __("Install Angie", "elementor")
|
|
105
|
+
)))))));
|
|
70
106
|
}
|
|
71
107
|
|
|
72
108
|
// src/init.ts
|
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 {
|
|
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';\n\nexport function CreateWidget() {\n\tconst [ open, setOpen ] = useState( false );\n\tconst [ prompt, setPrompt ] = useState< string | undefined >();\n\tconst [ installState, setInstallState ] = useState< InstallState >( 'idle' );\n\n\tconst handleShow = async ( event: Event ) => {\n\t\tconst customEvent = event as CustomEvent< ShowModalEventDetail >;\n\n\t\tif ( isAngieAvailable() ) {\n\t\t\tsendPromptToAngie( customEvent.detail?.prompt );\n\n\t\t\treturn;\n\t\t}\n\n\t\tsetPrompt( customEvent.detail?.prompt );\n\t\tsetOpen( true );\n\t};\n\n\tconst handleClose = () => {\n\t\tif ( installState === 'installing' ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetOpen( false );\n\t\tsetPrompt( undefined );\n\t\tsetInstallState( 'idle' );\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\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\tuseEffect( () => {\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\treturn (\n\t\t<ThemeProvider>\n\t\t\t<Dialog fullWidth maxWidth=\"md\" open={ 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"],"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.0.0-
|
|
3
|
+
"version": "4.0.0-676",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Elementor Team",
|
|
6
6
|
"homepage": "https://elementor.com/",
|
|
@@ -39,12 +39,11 @@
|
|
|
39
39
|
"dev": "tsup --config=../../tsup.dev.ts"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@elementor/editor": "4.0.0-
|
|
43
|
-
"@elementor/editor-mcp": "4.0.0-
|
|
44
|
-
"@elementor/editor-ui": "4.0.0-
|
|
42
|
+
"@elementor/editor": "4.0.0-676",
|
|
43
|
+
"@elementor/editor-mcp": "4.0.0-676",
|
|
44
|
+
"@elementor/editor-ui": "4.0.0-676",
|
|
45
45
|
"@elementor/icons": "^1.63.0",
|
|
46
46
|
"@elementor/ui": "1.36.17",
|
|
47
|
-
"@wordpress/api-fetch": "^6.42.0",
|
|
48
47
|
"@wordpress/i18n": "^5.13.0"
|
|
49
48
|
},
|
|
50
49
|
"peerDependencies": {
|
|
@@ -1,21 +1,30 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
installAngiePlugin,
|
|
5
|
+
isAngieAvailable,
|
|
6
|
+
redirectToAppAdmin,
|
|
7
|
+
redirectToInstallation,
|
|
8
|
+
sendPromptToAngie,
|
|
9
|
+
} from '@elementor/editor-mcp';
|
|
4
10
|
import { ThemeProvider } from '@elementor/editor-ui';
|
|
5
11
|
import { XIcon } from '@elementor/icons';
|
|
6
|
-
import { Button, Dialog, DialogContent, IconButton, Image, Stack, Typography } from '@elementor/ui';
|
|
12
|
+
import { Button, CircularProgress, Dialog, DialogContent, IconButton, Image, Stack, Typography } from '@elementor/ui';
|
|
7
13
|
import { __ } from '@wordpress/i18n';
|
|
8
14
|
|
|
9
15
|
type ShowModalEventDetail = {
|
|
10
16
|
prompt?: string;
|
|
11
17
|
};
|
|
12
18
|
|
|
19
|
+
type InstallState = 'idle' | 'installing' | 'error';
|
|
20
|
+
|
|
13
21
|
const CREATE_WIDGET_EVENT = 'elementor/editor/create-widget';
|
|
14
22
|
const PROMOTION_IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/angie-promotion.svg';
|
|
15
23
|
|
|
16
24
|
export function CreateWidget() {
|
|
17
25
|
const [ open, setOpen ] = useState( false );
|
|
18
26
|
const [ prompt, setPrompt ] = useState< string | undefined >();
|
|
27
|
+
const [ installState, setInstallState ] = useState< InstallState >( 'idle' );
|
|
19
28
|
|
|
20
29
|
const handleShow = async ( event: Event ) => {
|
|
21
30
|
const customEvent = event as CustomEvent< ShowModalEventDetail >;
|
|
@@ -31,11 +40,34 @@ export function CreateWidget() {
|
|
|
31
40
|
};
|
|
32
41
|
|
|
33
42
|
const handleClose = () => {
|
|
43
|
+
if ( installState === 'installing' ) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
|
|
34
47
|
setOpen( false );
|
|
35
48
|
setPrompt( undefined );
|
|
49
|
+
setInstallState( 'idle' );
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const handleInstall = async () => {
|
|
53
|
+
if ( ! prompt ) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
setInstallState( 'installing' );
|
|
58
|
+
|
|
59
|
+
const result = await installAngiePlugin();
|
|
60
|
+
|
|
61
|
+
if ( ! result.success ) {
|
|
62
|
+
setInstallState( 'error' );
|
|
63
|
+
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
redirectToAppAdmin( prompt );
|
|
36
68
|
};
|
|
37
69
|
|
|
38
|
-
const
|
|
70
|
+
const handleFallbackInstall = () => {
|
|
39
71
|
if ( ! prompt ) {
|
|
40
72
|
return;
|
|
41
73
|
}
|
|
@@ -79,21 +111,48 @@ export function CreateWidget() {
|
|
|
79
111
|
/>
|
|
80
112
|
<Stack gap={ 2 } justifyContent="center" p={ 4 }>
|
|
81
113
|
<Typography variant="h6" fontWeight={ 600 } whiteSpace="nowrap">
|
|
82
|
-
{
|
|
114
|
+
{ installState === 'error'
|
|
115
|
+
? __( 'Installation failed', 'elementor' )
|
|
116
|
+
: __( 'Install Angie to build custom widgets', 'elementor' ) }
|
|
83
117
|
</Typography>
|
|
84
118
|
<Typography variant="body2" color="text.secondary">
|
|
85
|
-
{
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
119
|
+
{ installState === 'error'
|
|
120
|
+
? __(
|
|
121
|
+
"We couldn't install Angie automatically. Click below to install it manually.",
|
|
122
|
+
'elementor'
|
|
123
|
+
)
|
|
124
|
+
: __(
|
|
125
|
+
'Angie lets you generate custom widgets, sections, and code using simple instructions.',
|
|
126
|
+
'elementor'
|
|
127
|
+
) }
|
|
92
128
|
</Typography>
|
|
129
|
+
{ installState !== 'error' && (
|
|
130
|
+
<Typography variant="body2" color="text.secondary">
|
|
131
|
+
{ __( 'Install once to start building directly inside the editor.', 'elementor' ) }
|
|
132
|
+
</Typography>
|
|
133
|
+
) }
|
|
93
134
|
<Stack direction="row" justifyContent="flex-end" sx={ { mt: 2 } }>
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
135
|
+
{ installState === 'error' ? (
|
|
136
|
+
<Button variant="contained" color="accent" onClick={ handleFallbackInstall }>
|
|
137
|
+
{ __( 'Install Manually', 'elementor' ) }
|
|
138
|
+
</Button>
|
|
139
|
+
) : (
|
|
140
|
+
<Button
|
|
141
|
+
variant="contained"
|
|
142
|
+
color="accent"
|
|
143
|
+
onClick={ handleInstall }
|
|
144
|
+
disabled={ installState === 'installing' }
|
|
145
|
+
startIcon={
|
|
146
|
+
installState === 'installing' ? (
|
|
147
|
+
<CircularProgress size={ 18 } color="inherit" />
|
|
148
|
+
) : undefined
|
|
149
|
+
}
|
|
150
|
+
>
|
|
151
|
+
{ installState === 'installing'
|
|
152
|
+
? __( 'Installing…', 'elementor' )
|
|
153
|
+
: __( 'Install Angie', 'elementor' ) }
|
|
154
|
+
</Button>
|
|
155
|
+
) }
|
|
97
156
|
</Stack>
|
|
98
157
|
</Stack>
|
|
99
158
|
</Stack>
|