@elementor/editor-widget-creation 4.0.0-643

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.
Files changed (10) hide show
  1. package/dist/index.d.mts +3 -0
  2. package/dist/index.d.ts +3 -0
  3. package/dist/index.js +119 -0
  4. package/dist/index.js.map +1 -0
  5. package/dist/index.mjs +82 -0
  6. package/dist/index.mjs.map +1 -0
  7. package/package.json +57 -0
  8. package/src/components/create-widget.tsx +104 -0
  9. package/src/index.ts +1 -0
  10. package/src/init.ts +10 -0
package/dist/index.d.mts ADDED
@@ -0,0 +1,3 @@
1
+ declare function init(): void;
2
+
3
+ export { init };
package/dist/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ declare function init(): void;
2
+
3
+ export { init };
package/dist/index.js ADDED
@@ -0,0 +1,119 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+
30
+ // src/index.ts
31
+ var index_exports = {};
32
+ __export(index_exports, {
33
+ init: () => init
34
+ });
35
+ module.exports = __toCommonJS(index_exports);
36
+
37
+ // src/init.ts
38
+ var import_editor = require("@elementor/editor");
39
+
40
+ // src/components/create-widget.tsx
41
+ var React = __toESM(require("react"));
42
+ var import_react = require("react");
43
+ var import_editor_mcp = require("@elementor/editor-mcp");
44
+ var import_editor_ui = require("@elementor/editor-ui");
45
+ var import_icons = require("@elementor/icons");
46
+ var import_ui = require("@elementor/ui");
47
+ var import_i18n = require("@wordpress/i18n");
48
+ var CREATE_WIDGET_EVENT = "elementor/editor/create-widget";
49
+ var PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/angie-promotion.svg";
50
+ function CreateWidget() {
51
+ const [open, setOpen] = (0, import_react.useState)(false);
52
+ const [prompt, setPrompt] = (0, import_react.useState)();
53
+ const handleShow = async (event) => {
54
+ const customEvent = event;
55
+ if ((0, import_editor_mcp.isAngieAvailable)()) {
56
+ (0, import_editor_mcp.sendPromptToAngie)(customEvent.detail?.prompt);
57
+ return;
58
+ }
59
+ setPrompt(customEvent.detail?.prompt);
60
+ setOpen(true);
61
+ };
62
+ const handleClose = () => {
63
+ setOpen(false);
64
+ setPrompt(void 0);
65
+ };
66
+ const handleInstall = () => {
67
+ if (!prompt) {
68
+ return;
69
+ }
70
+ (0, import_editor_mcp.redirectToInstallation)(prompt);
71
+ };
72
+ (0, import_react.useEffect)(() => {
73
+ window.addEventListener(CREATE_WIDGET_EVENT, handleShow);
74
+ return () => {
75
+ window.removeEventListener(CREATE_WIDGET_EVENT, handleShow);
76
+ };
77
+ }, []);
78
+ 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(
79
+ import_ui.IconButton,
80
+ {
81
+ "aria-label": (0, import_i18n.__)("Close", "elementor"),
82
+ onClick: handleClose,
83
+ sx: {
84
+ position: "absolute",
85
+ right: 8,
86
+ top: 8,
87
+ zIndex: 1
88
+ }
89
+ },
90
+ /* @__PURE__ */ React.createElement(import_icons.XIcon, null)
91
+ ), /* @__PURE__ */ React.createElement(import_ui.DialogContent, { sx: { p: 0, overflow: "hidden" } }, /* @__PURE__ */ React.createElement(import_ui.Stack, { direction: "row", sx: { height: 400 } }, /* @__PURE__ */ React.createElement(
92
+ import_ui.Image,
93
+ {
94
+ sx: {
95
+ height: "100%",
96
+ aspectRatio: "1 / 1",
97
+ objectFit: "cover",
98
+ objectPosition: "right center"
99
+ },
100
+ src: PROMOTION_IMAGE_URL
101
+ }
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.__)(
103
+ "Angie lets you generate custom widgets, sections, and code using simple instructions.",
104
+ "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: handleInstall }, (0, import_i18n.__)("Install Angie", "elementor"))))))));
106
+ }
107
+
108
+ // src/init.ts
109
+ function init() {
110
+ (0, import_editor.injectIntoTop)({
111
+ id: "create-widget",
112
+ component: CreateWidget
113
+ });
114
+ }
115
+ // Annotate the CommonJS export names for ESM import in node:
116
+ 0 && (module.exports = {
117
+ init
118
+ });
119
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +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 { isAngieAvailable, redirectToInstallation, sendPromptToAngie } from '@elementor/editor-mcp';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { XIcon } from '@elementor/icons';\nimport { Button, Dialog, DialogContent, IconButton, Image, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype ShowModalEventDetail = {\n\tprompt?: string;\n};\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\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\tsetOpen( false );\n\t\tsetPrompt( undefined );\n\t};\n\n\tconst handleInstall = () => {\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{ __( '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{ __(\n\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'elementor'\n\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<Typography variant=\"body2\" color=\"text.secondary\">\n\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</Typography>\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<Button variant=\"contained\" color=\"accent\" onClick={ handleInstall }>\n\t\t\t\t\t\t\t\t\t{ __( 'Install Angie', 'elementor' ) }\n\t\t\t\t\t\t\t\t</Button>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAA8B;;;ACA9B,YAAuB;AACvB,mBAAoC;AACpC,wBAA4E;AAC5E,uBAA8B;AAC9B,mBAAsB;AACtB,gBAAoF;AACpF,kBAAmB;AAMnB,IAAM,sBAAsB;AAC5B,IAAM,sBAAsB;AAErB,SAAS,eAAe;AAC9B,QAAM,CAAE,MAAM,OAAQ,QAAI,uBAAU,KAAM;AAC1C,QAAM,CAAE,QAAQ,SAAU,QAAI,uBAA+B;AAE7D,QAAM,aAAa,OAAQ,UAAkB;AAC5C,UAAM,cAAc;AAEpB,YAAK,oCAAiB,GAAI;AACzB,+CAAmB,YAAY,QAAQ,MAAO;AAE9C;AAAA,IACD;AAEA,cAAW,YAAY,QAAQ,MAAO;AACtC,YAAS,IAAK;AAAA,EACf;AAEA,QAAM,cAAc,MAAM;AACzB,YAAS,KAAM;AACf,cAAW,MAAU;AAAA,EACtB;AAEA,QAAM,gBAAgB,MAAM;AAC3B,QAAK,CAAE,QAAS;AACf;AAAA,IACD;AAEA,kDAAwB,MAAO;AAAA,EAChC;AAEA,8BAAW,MAAM;AAChB,WAAO,iBAAkB,qBAAqB,UAAW;AAEzD,WAAO,MAAM;AACZ,aAAO,oBAAqB,qBAAqB,UAAW;AAAA,IAC7D;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SACC,oCAAC,sCACA,oCAAC,oBAAO,WAAS,MAAC,UAAS,MAAK,MAAc,SAAU,eACvD;AAAA,IAAC;AAAA;AAAA,MACA,kBAAa,gBAAI,SAAS,WAAY;AAAA,MACtC,SAAU;AAAA,MACV,IAAK;AAAA,QACJ,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,QACL,QAAQ;AAAA,MACT;AAAA;AAAA,IAEA,oCAAC,wBAAM;AAAA,EACR,GACA,oCAAC,2BAAc,IAAK,EAAE,GAAG,GAAG,UAAU,SAAS,KAC9C,oCAAC,mBAAM,WAAU,OAAM,IAAK,EAAE,QAAQ,IAAI,KACzC;AAAA,IAAC;AAAA;AAAA,MACA,IAAK;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,WAAW;AAAA,QACX,gBAAgB;AAAA,MACjB;AAAA,MACA,KAAM;AAAA;AAAA,EACP,GACA,oCAAC,mBAAM,KAAM,GAAI,gBAAe,UAAS,GAAI,KAC5C,oCAAC,wBAAW,SAAQ,MAAK,YAAa,KAAM,YAAW,gBACpD,gBAAI,yCAAyC,WAAY,CAC5D,GACA,oCAAC,wBAAW,SAAQ,SAAQ,OAAM,wBAC/B;AAAA,IACD;AAAA,IACA;AAAA,EACD,CACD,GACA,oCAAC,wBAAW,SAAQ,SAAQ,OAAM,wBAC/B,gBAAI,8DAA8D,WAAY,CACjF,GACA,oCAAC,mBAAM,WAAU,OAAM,gBAAe,YAAW,IAAK,EAAE,IAAI,EAAE,KAC7D,oCAAC,oBAAO,SAAQ,aAAY,OAAM,UAAS,SAAU,qBAClD,gBAAI,iBAAiB,WAAY,CACpC,CACD,CACD,CACD,CACD,CACD,CACD;AAEF;;;ADnGO,SAAS,OAAO;AACtB,mCAAe;AAAA,IACd,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;","names":[]}
package/dist/index.mjs ADDED
@@ -0,0 +1,82 @@
1
+ // src/init.ts
2
+ import { injectIntoTop } from "@elementor/editor";
3
+
4
+ // src/components/create-widget.tsx
5
+ import * as React from "react";
6
+ import { useEffect, useState } from "react";
7
+ import { isAngieAvailable, redirectToInstallation, sendPromptToAngie } from "@elementor/editor-mcp";
8
+ import { ThemeProvider } from "@elementor/editor-ui";
9
+ import { XIcon } from "@elementor/icons";
10
+ import { Button, Dialog, DialogContent, IconButton, Image, Stack, Typography } from "@elementor/ui";
11
+ import { __ } from "@wordpress/i18n";
12
+ var CREATE_WIDGET_EVENT = "elementor/editor/create-widget";
13
+ var PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/angie-promotion.svg";
14
+ function CreateWidget() {
15
+ const [open, setOpen] = useState(false);
16
+ const [prompt, setPrompt] = useState();
17
+ const handleShow = async (event) => {
18
+ const customEvent = event;
19
+ if (isAngieAvailable()) {
20
+ sendPromptToAngie(customEvent.detail?.prompt);
21
+ return;
22
+ }
23
+ setPrompt(customEvent.detail?.prompt);
24
+ setOpen(true);
25
+ };
26
+ const handleClose = () => {
27
+ setOpen(false);
28
+ setPrompt(void 0);
29
+ };
30
+ const handleInstall = () => {
31
+ if (!prompt) {
32
+ return;
33
+ }
34
+ redirectToInstallation(prompt);
35
+ };
36
+ useEffect(() => {
37
+ window.addEventListener(CREATE_WIDGET_EVENT, handleShow);
38
+ return () => {
39
+ window.removeEventListener(CREATE_WIDGET_EVENT, handleShow);
40
+ };
41
+ }, []);
42
+ return /* @__PURE__ */ React.createElement(ThemeProvider, null, /* @__PURE__ */ React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open, onClose: handleClose }, /* @__PURE__ */ React.createElement(
43
+ IconButton,
44
+ {
45
+ "aria-label": __("Close", "elementor"),
46
+ onClick: handleClose,
47
+ sx: {
48
+ position: "absolute",
49
+ right: 8,
50
+ top: 8,
51
+ zIndex: 1
52
+ }
53
+ },
54
+ /* @__PURE__ */ React.createElement(XIcon, null)
55
+ ), /* @__PURE__ */ React.createElement(DialogContent, { sx: { p: 0, overflow: "hidden" } }, /* @__PURE__ */ React.createElement(Stack, { direction: "row", sx: { height: 400 } }, /* @__PURE__ */ React.createElement(
56
+ Image,
57
+ {
58
+ sx: {
59
+ height: "100%",
60
+ aspectRatio: "1 / 1",
61
+ objectFit: "cover",
62
+ objectPosition: "right center"
63
+ },
64
+ src: PROMOTION_IMAGE_URL
65
+ }
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" }, __(
67
+ "Angie lets you generate custom widgets, sections, and code using simple instructions.",
68
+ "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: handleInstall }, __("Install Angie", "elementor"))))))));
70
+ }
71
+
72
+ // src/init.ts
73
+ function init() {
74
+ injectIntoTop({
75
+ id: "create-widget",
76
+ component: CreateWidget
77
+ });
78
+ }
79
+ export {
80
+ init
81
+ };
82
+ //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map ADDED
@@ -0,0 +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 { isAngieAvailable, redirectToInstallation, sendPromptToAngie } from '@elementor/editor-mcp';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { XIcon } from '@elementor/icons';\nimport { Button, Dialog, DialogContent, IconButton, Image, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype ShowModalEventDetail = {\n\tprompt?: string;\n};\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\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\tsetOpen( false );\n\t\tsetPrompt( undefined );\n\t};\n\n\tconst handleInstall = () => {\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{ __( '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{ __(\n\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'elementor'\n\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<Typography variant=\"body2\" color=\"text.secondary\">\n\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</Typography>\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<Button variant=\"contained\" color=\"accent\" onClick={ handleInstall }>\n\t\t\t\t\t\t\t\t\t{ __( 'Install Angie', 'elementor' ) }\n\t\t\t\t\t\t\t\t</Button>\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":";AAAA,SAAS,qBAAqB;;;ACA9B,YAAY,WAAW;AACvB,SAAS,WAAW,gBAAgB;AACpC,SAAS,kBAAkB,wBAAwB,yBAAyB;AAC5E,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,QAAQ,QAAQ,eAAe,YAAY,OAAO,OAAO,kBAAkB;AACpF,SAAS,UAAU;AAMnB,IAAM,sBAAsB;AAC5B,IAAM,sBAAsB;AAErB,SAAS,eAAe;AAC9B,QAAM,CAAE,MAAM,OAAQ,IAAI,SAAU,KAAM;AAC1C,QAAM,CAAE,QAAQ,SAAU,IAAI,SAA+B;AAE7D,QAAM,aAAa,OAAQ,UAAkB;AAC5C,UAAM,cAAc;AAEpB,QAAK,iBAAiB,GAAI;AACzB,wBAAmB,YAAY,QAAQ,MAAO;AAE9C;AAAA,IACD;AAEA,cAAW,YAAY,QAAQ,MAAO;AACtC,YAAS,IAAK;AAAA,EACf;AAEA,QAAM,cAAc,MAAM;AACzB,YAAS,KAAM;AACf,cAAW,MAAU;AAAA,EACtB;AAEA,QAAM,gBAAgB,MAAM;AAC3B,QAAK,CAAE,QAAS;AACf;AAAA,IACD;AAEA,2BAAwB,MAAO;AAAA,EAChC;AAEA,YAAW,MAAM;AAChB,WAAO,iBAAkB,qBAAqB,UAAW;AAEzD,WAAO,MAAM;AACZ,aAAO,oBAAqB,qBAAqB,UAAW;AAAA,IAC7D;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SACC,oCAAC,qBACA,oCAAC,UAAO,WAAS,MAAC,UAAS,MAAK,MAAc,SAAU,eACvD;AAAA,IAAC;AAAA;AAAA,MACA,cAAa,GAAI,SAAS,WAAY;AAAA,MACtC,SAAU;AAAA,MACV,IAAK;AAAA,QACJ,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,QACL,QAAQ;AAAA,MACT;AAAA;AAAA,IAEA,oCAAC,WAAM;AAAA,EACR,GACA,oCAAC,iBAAc,IAAK,EAAE,GAAG,GAAG,UAAU,SAAS,KAC9C,oCAAC,SAAM,WAAU,OAAM,IAAK,EAAE,QAAQ,IAAI,KACzC;AAAA,IAAC;AAAA;AAAA,MACA,IAAK;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,WAAW;AAAA,QACX,gBAAgB;AAAA,MACjB;AAAA,MACA,KAAM;AAAA;AAAA,EACP,GACA,oCAAC,SAAM,KAAM,GAAI,gBAAe,UAAS,GAAI,KAC5C,oCAAC,cAAW,SAAQ,MAAK,YAAa,KAAM,YAAW,YACpD,GAAI,yCAAyC,WAAY,CAC5D,GACA,oCAAC,cAAW,SAAQ,SAAQ,OAAM,oBAC/B;AAAA,IACD;AAAA,IACA;AAAA,EACD,CACD,GACA,oCAAC,cAAW,SAAQ,SAAQ,OAAM,oBAC/B,GAAI,8DAA8D,WAAY,CACjF,GACA,oCAAC,SAAM,WAAU,OAAM,gBAAe,YAAW,IAAK,EAAE,IAAI,EAAE,KAC7D,oCAAC,UAAO,SAAQ,aAAY,OAAM,UAAS,SAAU,iBAClD,GAAI,iBAAiB,WAAY,CACpC,CACD,CACD,CACD,CACD,CACD,CACD;AAEF;;;ADnGO,SAAS,OAAO;AACtB,gBAAe;AAAA,IACd,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;","names":[]}
package/package.json ADDED
@@ -0,0 +1,57 @@
1
+ {
2
+ "name": "@elementor/editor-widget-creation",
3
+ "version": "4.0.0-643",
4
+ "private": false,
5
+ "author": "Elementor Team",
6
+ "homepage": "https://elementor.com/",
7
+ "license": "GPL-3.0-or-later",
8
+ "main": "dist/index.js",
9
+ "module": "dist/index.mjs",
10
+ "types": "dist/index.d.ts",
11
+ "exports": {
12
+ ".": {
13
+ "types": "./dist/index.d.ts",
14
+ "import": "./dist/index.mjs",
15
+ "require": "./dist/index.js"
16
+ },
17
+ "./package.json": "./package.json"
18
+ },
19
+ "repository": {
20
+ "type": "git",
21
+ "url": "git+https://github.com/elementor/elementor.git",
22
+ "directory": "packages/core/editor-widget-creation"
23
+ },
24
+ "bugs": {
25
+ "url": "https://github.com/elementor/elementor/issues"
26
+ },
27
+ "publishConfig": {
28
+ "access": "public"
29
+ },
30
+ "files": [
31
+ "README.md",
32
+ "CHANGELOG.md",
33
+ "/dist",
34
+ "/src",
35
+ "!**/__tests__"
36
+ ],
37
+ "scripts": {
38
+ "build": "tsup --config=../../tsup.build.ts",
39
+ "dev": "tsup --config=../../tsup.dev.ts"
40
+ },
41
+ "dependencies": {
42
+ "@elementor/editor": "4.0.0-643",
43
+ "@elementor/editor-mcp": "4.0.0-643",
44
+ "@elementor/editor-ui": "4.0.0-643",
45
+ "@elementor/icons": "^1.63.0",
46
+ "@elementor/ui": "1.36.17",
47
+ "@wordpress/api-fetch": "^6.42.0",
48
+ "@wordpress/i18n": "^5.13.0"
49
+ },
50
+ "peerDependencies": {
51
+ "react": "^18.3.1",
52
+ "react-dom": "^18.3.1"
53
+ },
54
+ "devDependencies": {
55
+ "tsup": "^8.3.5"
56
+ }
57
+ }
package/src/components/create-widget.tsx ADDED
@@ -0,0 +1,104 @@
1
+ import * as React from 'react';
2
+ import { useEffect, useState } from 'react';
3
+ import { isAngieAvailable, redirectToInstallation, sendPromptToAngie } from '@elementor/editor-mcp';
4
+ import { ThemeProvider } from '@elementor/editor-ui';
5
+ import { XIcon } from '@elementor/icons';
6
+ import { Button, Dialog, DialogContent, IconButton, Image, Stack, Typography } from '@elementor/ui';
7
+ import { __ } from '@wordpress/i18n';
8
+
9
+ type ShowModalEventDetail = {
10
+ prompt?: string;
11
+ };
12
+
13
+ const CREATE_WIDGET_EVENT = 'elementor/editor/create-widget';
14
+ const PROMOTION_IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/angie-promotion.svg';
15
+
16
+ export function CreateWidget() {
17
+ const [ open, setOpen ] = useState( false );
18
+ const [ prompt, setPrompt ] = useState< string | undefined >();
19
+
20
+ const handleShow = async ( event: Event ) => {
21
+ const customEvent = event as CustomEvent< ShowModalEventDetail >;
22
+
23
+ if ( isAngieAvailable() ) {
24
+ sendPromptToAngie( customEvent.detail?.prompt );
25
+
26
+ return;
27
+ }
28
+
29
+ setPrompt( customEvent.detail?.prompt );
30
+ setOpen( true );
31
+ };
32
+
33
+ const handleClose = () => {
34
+ setOpen( false );
35
+ setPrompt( undefined );
36
+ };
37
+
38
+ const handleInstall = () => {
39
+ if ( ! prompt ) {
40
+ return;
41
+ }
42
+
43
+ redirectToInstallation( prompt );
44
+ };
45
+
46
+ useEffect( () => {
47
+ window.addEventListener( CREATE_WIDGET_EVENT, handleShow );
48
+
49
+ return () => {
50
+ window.removeEventListener( CREATE_WIDGET_EVENT, handleShow );
51
+ };
52
+ }, [] );
53
+
54
+ return (
55
+ <ThemeProvider>
56
+ <Dialog fullWidth maxWidth="md" open={ open } onClose={ handleClose }>
57
+ <IconButton
58
+ aria-label={ __( 'Close', 'elementor' ) }
59
+ onClick={ handleClose }
60
+ sx={ {
61
+ position: 'absolute',
62
+ right: 8,
63
+ top: 8,
64
+ zIndex: 1,
65
+ } }
66
+ >
67
+ <XIcon />
68
+ </IconButton>
69
+ <DialogContent sx={ { p: 0, overflow: 'hidden' } }>
70
+ <Stack direction="row" sx={ { height: 400 } }>
71
+ <Image
72
+ sx={ {
73
+ height: '100%',
74
+ aspectRatio: '1 / 1',
75
+ objectFit: 'cover',
76
+ objectPosition: 'right center',
77
+ } }
78
+ src={ PROMOTION_IMAGE_URL }
79
+ />
80
+ <Stack gap={ 2 } justifyContent="center" p={ 4 }>
81
+ <Typography variant="h6" fontWeight={ 600 } whiteSpace="nowrap">
82
+ { __( 'Install Angie to build custom widgets', 'elementor' ) }
83
+ </Typography>
84
+ <Typography variant="body2" color="text.secondary">
85
+ { __(
86
+ 'Angie lets you generate custom widgets, sections, and code using simple instructions.',
87
+ 'elementor'
88
+ ) }
89
+ </Typography>
90
+ <Typography variant="body2" color="text.secondary">
91
+ { __( 'Install once to start building directly inside the editor.', 'elementor' ) }
92
+ </Typography>
93
+ <Stack direction="row" justifyContent="flex-end" sx={ { mt: 2 } }>
94
+ <Button variant="contained" color="accent" onClick={ handleInstall }>
95
+ { __( 'Install Angie', 'elementor' ) }
96
+ </Button>
97
+ </Stack>
98
+ </Stack>
99
+ </Stack>
100
+ </DialogContent>
101
+ </Dialog>
102
+ </ThemeProvider>
103
+ );
104
+ }
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { init } from './init';
package/src/init.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { injectIntoTop } from '@elementor/editor';
2
+
3
+ import { CreateWidget } from './components/create-widget';
4
+
5
+ export function init() {
6
+ injectIntoTop( {
7
+ id: 'create-widget',
8
+ component: CreateWidget,
9
+ } );
10
+ }