@elementor/editor 0.18.4 → 0.18.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 0.18.6
+
+### Patch Changes
+
+- 42c42ee: Remove side-effects
+
+## 0.18.5
+
+### Patch Changes
+
+- 666ffdd: Change theme provider styles for editing panel and class manager panel
+
 ## 0.18.4
 
 ### Patch Changes

package/dist/index.d.mts

@@ -3,6 +3,6 @@ import * as _elementor_locations from '@elementor/locations';
 declare const injectIntoTop: (args: _elementor_locations.InjectArgs<object>) => void;
 declare const injectIntoLogic: (args: _elementor_locations.InjectArgs<object>) => void;
 
-declare function init(domElement: Element): void;
+declare function start(domElement: Element): void;
 
-export { init, injectIntoLogic, injectIntoTop };
+export { injectIntoLogic, injectIntoTop, start };

package/dist/index.d.ts

@@ -3,6 +3,6 @@ import * as _elementor_locations from '@elementor/locations';
 declare const injectIntoTop: (args: _elementor_locations.InjectArgs<object>) => void;
 declare const injectIntoLogic: (args: _elementor_locations.InjectArgs<object>) => void;
 
-declare function init(domElement: Element): void;
+declare function start(domElement: Element): void;
 
-export { init, injectIntoLogic, injectIntoTop };
+export { injectIntoLogic, injectIntoTop, start };

package/dist/index.js

@@ -30,9 +30,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  init: () => init,
   injectIntoLogic: () => injectIntoLogic,
-  injectIntoTop: () => injectIntoTop
+  injectIntoTop: () => injectIntoTop,
+  start: () => start
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -41,14 +41,14 @@ var import_locations = require("@elementor/locations");
 var { Slot: TopSlot, inject: injectIntoTop } = (0, import_locations.createLocation)();
 var { Slot: LogicSlot, inject: injectIntoLogic } = (0, import_locations.createLocation)();
 
-// src/init.tsx
-var React3 = __toESM(require("react"));
+// src/start.tsx
+var React2 = __toESM(require("react"));
 var ReactDOM = __toESM(require("react-dom"));
 var import_client = require("react-dom/client");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_query = require("@elementor/query");
 var import_store = require("@elementor/store");
-var import_ui2 = require("@elementor/ui");
+var import_ui = require("@elementor/ui");
 
 // src/components/shell.tsx
 var React = __toESM(require("react"));
@@ -56,46 +56,13 @@ function Shell() {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TopSlot, null), /* @__PURE__ */ React.createElement("div", { style: { display: "none" } }, /* @__PURE__ */ React.createElement(LogicSlot, null)));
 }
 
-// src/components/theme-provider.tsx
-var React2 = __toESM(require("react"));
-var import_ui = require("@elementor/ui");
-
-// src/sync/use-color-scheme.ts
-var import_react = require("react");
-var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-function useColorScheme() {
-  const [colorScheme, setColorScheme] = (0, import_react.useState)(() => getV1ColorScheme());
-  (0, import_react.useEffect)(() => {
-    return (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.v1ReadyEvent)(), () => setColorScheme(getV1ColorScheme()));
-  }, []);
-  (0, import_react.useEffect)(() => {
-    return (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.commandEndEvent)("document/elements/settings"), (e) => {
-      const event = e;
-      const isColorScheme = event.args?.settings && "ui_theme" in event.args.settings;
-      if (isColorScheme) {
-        setColorScheme(getV1ColorScheme());
-      }
-    });
-  }, []);
-  return colorScheme;
-}
-function getV1ColorScheme() {
-  return window.elementor?.getPreferences?.("ui_theme") || "auto";
-}
-
-// src/components/theme-provider.tsx
-function ThemeProvider({ children }) {
-  const colorScheme = useColorScheme();
-  return /* @__PURE__ */ React2.createElement(import_ui.ThemeProvider, { colorScheme }, children);
-}
-
-// src/init.tsx
-function init(domElement) {
+// src/start.tsx
+function start(domElement) {
   const store = (0, import_store.__createStore)();
   const queryClient = (0, import_query.createQueryClient)();
-  (0, import_editor_v1_adapters2.__privateDispatchReadyEvent)();
+  (0, import_editor_v1_adapters.__privateDispatchReadyEvent)();
   render2(
-    /* @__PURE__ */ React3.createElement(import_store.__StoreProvider, { store }, /* @__PURE__ */ React3.createElement(import_query.QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React3.createElement(import_ui2.DirectionProvider, { rtl: window.document.dir === "rtl" }, /* @__PURE__ */ React3.createElement(ThemeProvider, null, /* @__PURE__ */ React3.createElement(Shell, null))))),
+    /* @__PURE__ */ React2.createElement(import_store.__StoreProvider, { store }, /* @__PURE__ */ React2.createElement(import_query.QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React2.createElement(import_ui.DirectionProvider, { rtl: window.document.dir === "rtl" }, /* @__PURE__ */ React2.createElement(import_ui.ThemeProvider, null, /* @__PURE__ */ React2.createElement(Shell, null))))),
     domElement
   );
 }
@@ -115,8 +82,8 @@ function render2(app, domElement) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  init,
   injectIntoLogic,
-  injectIntoTop
+  injectIntoTop,
+  start
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/locations.ts","../src/init.tsx","../src/components/shell.tsx","../src/components/theme-provider.tsx","../src/sync/use-color-scheme.ts"],"sourcesContent":["export { injectIntoTop, injectIntoLogic } from './locations';\nexport { default as init } from './init';\n","import { createLocation } from '@elementor/locations';\n\nexport const { Slot: TopSlot, inject: injectIntoTop } = createLocation();\n\nexport const { Slot: LogicSlot, inject: injectIntoLogic } = createLocation();\n","import * as React from 'react';\nimport { type JSX } from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { createRoot } from 'react-dom/client';\nimport { __privateDispatchReadyEvent as dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport { createQueryClient, QueryClientProvider } from '@elementor/query';\nimport { __createStore, __StoreProvider as StoreProvider } from '@elementor/store';\nimport { DirectionProvider } from '@elementor/ui';\n\nimport Shell from './components/shell';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element ): void {\n\tconst store = __createStore();\n\tconst queryClient = createQueryClient();\n\n\tdispatchReadyEvent();\n\n\trender(\n\t\t<StoreProvider store={ store }>\n\t\t\t<QueryClientProvider client={ queryClient }>\n\t\t\t\t<DirectionProvider rtl={ window.document.dir === 'rtl' }>\n\t\t\t\t\t<ThemeProvider>\n\t\t\t\t\t\t<Shell />\n\t\t\t\t\t</ThemeProvider>\n\t\t\t\t</DirectionProvider>\n\t\t\t</QueryClientProvider>\n\t\t</StoreProvider>,\n\t\tdomElement\n\t);\n}\n\n// Support conditional rendering based on the React version.\n// We use `createRoot` when available, but fallback to `ReactDOM.render` for older versions.\nfunction render( app: JSX.Element, domElement: Element ) {\n\tlet renderFn: () => void;\n\n\ttry {\n\t\tconst root = createRoot( domElement );\n\n\t\trenderFn = () => {\n\t\t\troot.render( app );\n\t\t};\n\t} catch {\n\t\trenderFn = () => {\n\t\t\t// eslint-disable-next-line react/no-deprecated\n\t\t\tReactDOM.render( app, domElement );\n\t\t};\n\t}\n\n\trenderFn();\n}\n","import * as React from 'react';\n\nimport { LogicSlot, TopSlot } from '../locations';\n\nexport default function Shell() {\n\treturn (\n\t\t<>\n\t\t\t<TopSlot />\n\t\t\t<div style={ { display: 'none' } }>\n\t\t\t\t<LogicSlot />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase } from '@elementor/ui';\n\nimport { useColorScheme } from '../sync/use-color-scheme';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn <ThemeProviderBase colorScheme={ colorScheme }>{ children }</ThemeProviderBase>;\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,uBAA+B;AAExB,IAAM,EAAE,MAAM,SAAS,QAAQ,cAAc,QAAI,iCAAe;AAEhE,IAAM,EAAE,MAAM,WAAW,QAAQ,gBAAgB,QAAI,iCAAe;;;ACJ3E,IAAAA,SAAuB;AAEvB,eAA0B;AAC1B,oBAA2B;AAC3B,IAAAC,6BAAkE;AAClE,mBAAuD;AACvD,mBAAgE;AAChE,IAAAC,aAAkC;;;ACPlC,YAAuB;AAIR,SAAR,QAAyB;AAC/B,SACC,0DACC,oCAAC,aAAQ,GACT,oCAAC,SAAI,OAAQ,EAAE,SAAS,OAAO,KAC9B,oCAAC,eAAU,CACZ,CACD;AAEF;;;ACbA,IAAAC,SAAuB;AACvB,gBAAmD;;;ACDnD,mBAAoC;AACpC,gCAKO;AAUA,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,QAAI,uBAAyB,MAAM,iBAAiB,CAAE;AAE1F,8BAAW,MAAM;AAChB,eAAO,0BAAAC,uBAAU,wCAAa,GAAG,MAAM,eAAgB,iBAAiB,CAAE,CAAE;AAAA,EAC7E,GAAG,CAAC,CAAE;AAEN,8BAAW,MAAM;AAChB,eAAO,0BAAAA,uBAAU,2CAAiB,4BAA6B,GAAG,CAAE,MAAO;AAC1E,YAAM,QAAQ;AAOd,YAAM,gBAAgB,MAAM,MAAM,YAAY,cAAc,MAAM,KAAK;AAEvE,UAAK,eAAgB;AACpB,uBAAgB,iBAAiB,CAAE;AAAA,MACpC;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;AAEA,SAAS,mBAAmB;AAC3B,SAAS,OAAsC,WAAW,iBAAkB,UAAW,KAAK;AAC7F;;;ADxCe,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SAAO,qCAAC,UAAAC,eAAA,EAAkB,eAA8B,QAAU;AACnE;;;AFGe,SAAR,KAAuB,YAA4B;AACzD,QAAM,YAAQ,4BAAc;AAC5B,QAAM,kBAAc,gCAAkB;AAEtC,iCAAAC,6BAAmB;AAEnB,EAAAC;AAAA,IACC,qCAAC,aAAAC,iBAAA,EAAc,SACd,qCAAC,oCAAoB,QAAS,eAC7B,qCAAC,gCAAkB,KAAM,OAAO,SAAS,QAAQ,SAChD,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,CACD;AAAA,IACA;AAAA,EACD;AACD;AAIA,SAASD,QAAQ,KAAkB,YAAsB;AACxD,MAAI;AAEJ,MAAI;AACH,UAAM,WAAO,0BAAY,UAAW;AAEpC,eAAW,MAAM;AAChB,WAAK,OAAQ,GAAI;AAAA,IAClB;AAAA,EACD,QAAQ;AACP,eAAW,MAAM;AAEhB,MAAS,gBAAQ,KAAK,UAAW;AAAA,IAClC;AAAA,EACD;AAEA,WAAS;AACV;","names":["React","import_editor_v1_adapters","import_ui","React","listenTo","ThemeProviderBase","dispatchReadyEvent","render","StoreProvider"]}
+{"version":3,"sources":["../src/index.ts","../src/locations.ts","../src/start.tsx","../src/components/shell.tsx"],"sourcesContent":["export { injectIntoTop, injectIntoLogic } from './locations';\nexport { start } from './start';\n","import { createLocation } from '@elementor/locations';\n\nexport const { Slot: TopSlot, inject: injectIntoTop } = createLocation();\n\nexport const { Slot: LogicSlot, inject: injectIntoLogic } = createLocation();\n","import * as React from 'react';\nimport { type JSX } from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { createRoot } from 'react-dom/client';\nimport { __privateDispatchReadyEvent as dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport { createQueryClient, QueryClientProvider } from '@elementor/query';\nimport { __createStore, __StoreProvider as StoreProvider } from '@elementor/store';\nimport { DirectionProvider, ThemeProvider } from '@elementor/ui';\n\nimport Shell from './components/shell';\n\nexport function start( domElement: Element ): void {\n\tconst store = __createStore();\n\tconst queryClient = createQueryClient();\n\n\tdispatchReadyEvent();\n\n\trender(\n\t\t<StoreProvider store={ store }>\n\t\t\t<QueryClientProvider client={ queryClient }>\n\t\t\t\t<DirectionProvider rtl={ window.document.dir === 'rtl' }>\n\t\t\t\t\t<ThemeProvider>\n\t\t\t\t\t\t<Shell />\n\t\t\t\t\t</ThemeProvider>\n\t\t\t\t</DirectionProvider>\n\t\t\t</QueryClientProvider>\n\t\t</StoreProvider>,\n\t\tdomElement\n\t);\n}\n\n// Support conditional rendering based on the React version.\n// We use `createRoot` when available, but fallback to `ReactDOM.render` for older versions.\nfunction render( app: JSX.Element, domElement: Element ) {\n\tlet renderFn: () => void;\n\n\ttry {\n\t\tconst root = createRoot( domElement );\n\n\t\trenderFn = () => {\n\t\t\troot.render( app );\n\t\t};\n\t} catch {\n\t\trenderFn = () => {\n\t\t\t// eslint-disable-next-line react/no-deprecated\n\t\t\tReactDOM.render( app, domElement );\n\t\t};\n\t}\n\n\trenderFn();\n}\n","import * as React from 'react';\n\nimport { LogicSlot, TopSlot } from '../locations';\n\nexport default function Shell() {\n\treturn (\n\t\t<>\n\t\t\t<TopSlot />\n\t\t\t<div style={ { display: 'none' } }>\n\t\t\t\t<LogicSlot />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,uBAA+B;AAExB,IAAM,EAAE,MAAM,SAAS,QAAQ,cAAc,QAAI,iCAAe;AAEhE,IAAM,EAAE,MAAM,WAAW,QAAQ,gBAAgB,QAAI,iCAAe;;;ACJ3E,IAAAA,SAAuB;AAEvB,eAA0B;AAC1B,oBAA2B;AAC3B,gCAAkE;AAClE,mBAAuD;AACvD,mBAAgE;AAChE,gBAAiD;;;ACPjD,YAAuB;AAIR,SAAR,QAAyB;AAC/B,SACC,0DACC,oCAAC,aAAQ,GACT,oCAAC,SAAI,OAAQ,EAAE,SAAS,OAAO,KAC9B,oCAAC,eAAU,CACZ,CACD;AAEF;;;ADFO,SAAS,MAAO,YAA4B;AAClD,QAAM,YAAQ,4BAAc;AAC5B,QAAM,kBAAc,gCAAkB;AAEtC,gCAAAC,6BAAmB;AAEnB,EAAAC;AAAA,IACC,qCAAC,aAAAC,iBAAA,EAAc,SACd,qCAAC,oCAAoB,QAAS,eAC7B,qCAAC,+BAAkB,KAAM,OAAO,SAAS,QAAQ,SAChD,qCAAC,+BACA,qCAAC,WAAM,CACR,CACD,CACD,CACD;AAAA,IACA;AAAA,EACD;AACD;AAIA,SAASD,QAAQ,KAAkB,YAAsB;AACxD,MAAI;AAEJ,MAAI;AACH,UAAM,WAAO,0BAAY,UAAW;AAEpC,eAAW,MAAM;AAChB,WAAK,OAAQ,GAAI;AAAA,IAClB;AAAA,EACD,QAAQ;AACP,eAAW,MAAM;AAEhB,MAAS,gBAAQ,KAAK,UAAW;AAAA,IAClC;AAAA,EACD;AAEA,WAAS;AACV;","names":["React","dispatchReadyEvent","render","StoreProvider"]}

package/dist/index.mjs

@@ -3,14 +3,14 @@ import { createLocation } from "@elementor/locations";
 var { Slot: TopSlot, inject: injectIntoTop } = createLocation();
 var { Slot: LogicSlot, inject: injectIntoLogic } = createLocation();
 
-// src/init.tsx
-import * as React3 from "react";
+// src/start.tsx
+import * as React2 from "react";
 import * as ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
 import { __privateDispatchReadyEvent as dispatchReadyEvent } from "@elementor/editor-v1-adapters";
 import { createQueryClient, QueryClientProvider } from "@elementor/query";
 import { __createStore, __StoreProvider as StoreProvider } from "@elementor/store";
-import { DirectionProvider } from "@elementor/ui";
+import { DirectionProvider, ThemeProvider } from "@elementor/ui";
 
 // src/components/shell.tsx
 import * as React from "react";
@@ -18,50 +18,13 @@ function Shell() {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TopSlot, null), /* @__PURE__ */ React.createElement("div", { style: { display: "none" } }, /* @__PURE__ */ React.createElement(LogicSlot, null)));
 }
 
-// src/components/theme-provider.tsx
-import * as React2 from "react";
-import { ThemeProvider as ThemeProviderBase } from "@elementor/ui";
-
-// src/sync/use-color-scheme.ts
-import { useEffect, useState } from "react";
-import {
-  __privateListenTo as listenTo,
-  commandEndEvent,
-  v1ReadyEvent
-} from "@elementor/editor-v1-adapters";
-function useColorScheme() {
-  const [colorScheme, setColorScheme] = useState(() => getV1ColorScheme());
-  useEffect(() => {
-    return listenTo(v1ReadyEvent(), () => setColorScheme(getV1ColorScheme()));
-  }, []);
-  useEffect(() => {
-    return listenTo(commandEndEvent("document/elements/settings"), (e) => {
-      const event = e;
-      const isColorScheme = event.args?.settings && "ui_theme" in event.args.settings;
-      if (isColorScheme) {
-        setColorScheme(getV1ColorScheme());
-      }
-    });
-  }, []);
-  return colorScheme;
-}
-function getV1ColorScheme() {
-  return window.elementor?.getPreferences?.("ui_theme") || "auto";
-}
-
-// src/components/theme-provider.tsx
-function ThemeProvider({ children }) {
-  const colorScheme = useColorScheme();
-  return /* @__PURE__ */ React2.createElement(ThemeProviderBase, { colorScheme }, children);
-}
-
-// src/init.tsx
-function init(domElement) {
+// src/start.tsx
+function start(domElement) {
   const store = __createStore();
   const queryClient = createQueryClient();
   dispatchReadyEvent();
   render2(
-    /* @__PURE__ */ React3.createElement(StoreProvider, { store }, /* @__PURE__ */ React3.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React3.createElement(DirectionProvider, { rtl: window.document.dir === "rtl" }, /* @__PURE__ */ React3.createElement(ThemeProvider, null, /* @__PURE__ */ React3.createElement(Shell, null))))),
+    /* @__PURE__ */ React2.createElement(StoreProvider, { store }, /* @__PURE__ */ React2.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React2.createElement(DirectionProvider, { rtl: window.document.dir === "rtl" }, /* @__PURE__ */ React2.createElement(ThemeProvider, null, /* @__PURE__ */ React2.createElement(Shell, null))))),
     domElement
   );
 }
@@ -80,8 +43,8 @@ function render2(app, domElement) {
   renderFn();
 }
 export {
-  init,
   injectIntoLogic,
-  injectIntoTop
+  injectIntoTop,
+  start
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/locations.ts","../src/init.tsx","../src/components/shell.tsx","../src/components/theme-provider.tsx","../src/sync/use-color-scheme.ts"],"sourcesContent":["import { createLocation } from '@elementor/locations';\n\nexport const { Slot: TopSlot, inject: injectIntoTop } = createLocation();\n\nexport const { Slot: LogicSlot, inject: injectIntoLogic } = createLocation();\n","import * as React from 'react';\nimport { type JSX } from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { createRoot } from 'react-dom/client';\nimport { __privateDispatchReadyEvent as dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport { createQueryClient, QueryClientProvider } from '@elementor/query';\nimport { __createStore, __StoreProvider as StoreProvider } from '@elementor/store';\nimport { DirectionProvider } from '@elementor/ui';\n\nimport Shell from './components/shell';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element ): void {\n\tconst store = __createStore();\n\tconst queryClient = createQueryClient();\n\n\tdispatchReadyEvent();\n\n\trender(\n\t\t<StoreProvider store={ store }>\n\t\t\t<QueryClientProvider client={ queryClient }>\n\t\t\t\t<DirectionProvider rtl={ window.document.dir === 'rtl' }>\n\t\t\t\t\t<ThemeProvider>\n\t\t\t\t\t\t<Shell />\n\t\t\t\t\t</ThemeProvider>\n\t\t\t\t</DirectionProvider>\n\t\t\t</QueryClientProvider>\n\t\t</StoreProvider>,\n\t\tdomElement\n\t);\n}\n\n// Support conditional rendering based on the React version.\n// We use `createRoot` when available, but fallback to `ReactDOM.render` for older versions.\nfunction render( app: JSX.Element, domElement: Element ) {\n\tlet renderFn: () => void;\n\n\ttry {\n\t\tconst root = createRoot( domElement );\n\n\t\trenderFn = () => {\n\t\t\troot.render( app );\n\t\t};\n\t} catch {\n\t\trenderFn = () => {\n\t\t\t// eslint-disable-next-line react/no-deprecated\n\t\t\tReactDOM.render( app, domElement );\n\t\t};\n\t}\n\n\trenderFn();\n}\n","import * as React from 'react';\n\nimport { LogicSlot, TopSlot } from '../locations';\n\nexport default function Shell() {\n\treturn (\n\t\t<>\n\t\t\t<TopSlot />\n\t\t\t<div style={ { display: 'none' } }>\n\t\t\t\t<LogicSlot />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase } from '@elementor/ui';\n\nimport { useColorScheme } from '../sync/use-color-scheme';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn <ThemeProviderBase colorScheme={ colorScheme }>{ children }</ThemeProviderBase>;\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n"],"mappings":";AAAA,SAAS,sBAAsB;AAExB,IAAM,EAAE,MAAM,SAAS,QAAQ,cAAc,IAAI,eAAe;AAEhE,IAAM,EAAE,MAAM,WAAW,QAAQ,gBAAgB,IAAI,eAAe;;;ACJ3E,YAAYA,YAAW;AAEvB,YAAY,cAAc;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,+BAA+B,0BAA0B;AAClE,SAAS,mBAAmB,2BAA2B;AACvD,SAAS,eAAe,mBAAmB,qBAAqB;AAChE,SAAS,yBAAyB;;;ACPlC,YAAY,WAAW;AAIR,SAAR,QAAyB;AAC/B,SACC,0DACC,oCAAC,aAAQ,GACT,oCAAC,SAAI,OAAQ,EAAE,SAAS,OAAO,KAC9B,oCAAC,eAAU,CACZ,CACD;AAEF;;;ACbA,YAAYC,YAAW;AACvB,SAAS,iBAAiB,yBAAyB;;;ACDnD,SAAS,WAAW,gBAAgB;AACpC;AAAA,EACC,qBAAqB;AAAA,EACrB;AAAA,EAEA;AAAA,OACM;AAUA,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,IAAI,SAAyB,MAAM,iBAAiB,CAAE;AAE1F,YAAW,MAAM;AAChB,WAAO,SAAU,aAAa,GAAG,MAAM,eAAgB,iBAAiB,CAAE,CAAE;AAAA,EAC7E,GAAG,CAAC,CAAE;AAEN,YAAW,MAAM;AAChB,WAAO,SAAU,gBAAiB,4BAA6B,GAAG,CAAE,MAAO;AAC1E,YAAM,QAAQ;AAOd,YAAM,gBAAgB,MAAM,MAAM,YAAY,cAAc,MAAM,KAAK;AAEvE,UAAK,eAAgB;AACpB,uBAAgB,iBAAiB,CAAE;AAAA,MACpC;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;AAEA,SAAS,mBAAmB;AAC3B,SAAS,OAAsC,WAAW,iBAAkB,UAAW,KAAK;AAC7F;;;ADxCe,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SAAO,qCAAC,qBAAkB,eAA8B,QAAU;AACnE;;;AFGe,SAAR,KAAuB,YAA4B;AACzD,QAAM,QAAQ,cAAc;AAC5B,QAAM,cAAc,kBAAkB;AAEtC,qBAAmB;AAEnB,EAAAC;AAAA,IACC,qCAAC,iBAAc,SACd,qCAAC,uBAAoB,QAAS,eAC7B,qCAAC,qBAAkB,KAAM,OAAO,SAAS,QAAQ,SAChD,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,CACD;AAAA,IACA;AAAA,EACD;AACD;AAIA,SAASA,QAAQ,KAAkB,YAAsB;AACxD,MAAI;AAEJ,MAAI;AACH,UAAM,OAAO,WAAY,UAAW;AAEpC,eAAW,MAAM;AAChB,WAAK,OAAQ,GAAI;AAAA,IAClB;AAAA,EACD,QAAQ;AACP,eAAW,MAAM;AAEhB,MAAS,gBAAQ,KAAK,UAAW;AAAA,IAClC;AAAA,EACD;AAEA,WAAS;AACV;","names":["React","React","render"]}
+{"version":3,"sources":["../src/locations.ts","../src/start.tsx","../src/components/shell.tsx"],"sourcesContent":["import { createLocation } from '@elementor/locations';\n\nexport const { Slot: TopSlot, inject: injectIntoTop } = createLocation();\n\nexport const { Slot: LogicSlot, inject: injectIntoLogic } = createLocation();\n","import * as React from 'react';\nimport { type JSX } from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { createRoot } from 'react-dom/client';\nimport { __privateDispatchReadyEvent as dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport { createQueryClient, QueryClientProvider } from '@elementor/query';\nimport { __createStore, __StoreProvider as StoreProvider } from '@elementor/store';\nimport { DirectionProvider, ThemeProvider } from '@elementor/ui';\n\nimport Shell from './components/shell';\n\nexport function start( domElement: Element ): void {\n\tconst store = __createStore();\n\tconst queryClient = createQueryClient();\n\n\tdispatchReadyEvent();\n\n\trender(\n\t\t<StoreProvider store={ store }>\n\t\t\t<QueryClientProvider client={ queryClient }>\n\t\t\t\t<DirectionProvider rtl={ window.document.dir === 'rtl' }>\n\t\t\t\t\t<ThemeProvider>\n\t\t\t\t\t\t<Shell />\n\t\t\t\t\t</ThemeProvider>\n\t\t\t\t</DirectionProvider>\n\t\t\t</QueryClientProvider>\n\t\t</StoreProvider>,\n\t\tdomElement\n\t);\n}\n\n// Support conditional rendering based on the React version.\n// We use `createRoot` when available, but fallback to `ReactDOM.render` for older versions.\nfunction render( app: JSX.Element, domElement: Element ) {\n\tlet renderFn: () => void;\n\n\ttry {\n\t\tconst root = createRoot( domElement );\n\n\t\trenderFn = () => {\n\t\t\troot.render( app );\n\t\t};\n\t} catch {\n\t\trenderFn = () => {\n\t\t\t// eslint-disable-next-line react/no-deprecated\n\t\t\tReactDOM.render( app, domElement );\n\t\t};\n\t}\n\n\trenderFn();\n}\n","import * as React from 'react';\n\nimport { LogicSlot, TopSlot } from '../locations';\n\nexport default function Shell() {\n\treturn (\n\t\t<>\n\t\t\t<TopSlot />\n\t\t\t<div style={ { display: 'none' } }>\n\t\t\t\t<LogicSlot />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"mappings":";AAAA,SAAS,sBAAsB;AAExB,IAAM,EAAE,MAAM,SAAS,QAAQ,cAAc,IAAI,eAAe;AAEhE,IAAM,EAAE,MAAM,WAAW,QAAQ,gBAAgB,IAAI,eAAe;;;ACJ3E,YAAYA,YAAW;AAEvB,YAAY,cAAc;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,+BAA+B,0BAA0B;AAClE,SAAS,mBAAmB,2BAA2B;AACvD,SAAS,eAAe,mBAAmB,qBAAqB;AAChE,SAAS,mBAAmB,qBAAqB;;;ACPjD,YAAY,WAAW;AAIR,SAAR,QAAyB;AAC/B,SACC,0DACC,oCAAC,aAAQ,GACT,oCAAC,SAAI,OAAQ,EAAE,SAAS,OAAO,KAC9B,oCAAC,eAAU,CACZ,CACD;AAEF;;;ADFO,SAAS,MAAO,YAA4B;AAClD,QAAM,QAAQ,cAAc;AAC5B,QAAM,cAAc,kBAAkB;AAEtC,qBAAmB;AAEnB,EAAAC;AAAA,IACC,qCAAC,iBAAc,SACd,qCAAC,uBAAoB,QAAS,eAC7B,qCAAC,qBAAkB,KAAM,OAAO,SAAS,QAAQ,SAChD,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,CACD;AAAA,IACA;AAAA,EACD;AACD;AAIA,SAASA,QAAQ,KAAkB,YAAsB;AACxD,MAAI;AAEJ,MAAI;AACH,UAAM,OAAO,WAAY,UAAW;AAEpC,eAAW,MAAM;AAChB,WAAK,OAAQ,GAAI;AAAA,IAClB;AAAA,EACD,QAAQ;AACP,eAAW,MAAM;AAEhB,MAAS,gBAAQ,KAAK,UAAW;AAAA,IAClC;AAAA,EACD;AAEA,WAAS;AACV;","names":["React","render"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor",
   "description": "The main application for Elementor's editor",
-  "version": "0.18.4",
+  "version": "0.18.6",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",

package/src/index.ts

@@ -1,2 +1,2 @@
 export { injectIntoTop, injectIntoLogic } from './locations';
-export { default as init } from './init';
+export { start } from './start';

package/src/{init.tsx → start.tsx}

@@ -5,12 +5,11 @@ import { createRoot } from 'react-dom/client';
 import { __privateDispatchReadyEvent as dispatchReadyEvent } from '@elementor/editor-v1-adapters';
 import { createQueryClient, QueryClientProvider } from '@elementor/query';
 import { __createStore, __StoreProvider as StoreProvider } from '@elementor/store';
-import { DirectionProvider } from '@elementor/ui';
+import { DirectionProvider, ThemeProvider } from '@elementor/ui';
 
 import Shell from './components/shell';
-import ThemeProvider from './components/theme-provider';
 
-export default function init( domElement: Element ): void {
+export function start( domElement: Element ): void {
 	const store = __createStore();
 	const queryClient = createQueryClient();
 

package/src/components/theme-provider.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { ThemeProvider as ThemeProviderBase } from '@elementor/ui';
-
-import { useColorScheme } from '../sync/use-color-scheme';
-
-export default function ThemeProvider( { children }: { children: React.ReactNode } ) {
-	const colorScheme = useColorScheme();
-
-	return <ThemeProviderBase colorScheme={ colorScheme }>{ children }</ThemeProviderBase>;
-}

package/src/sync/use-color-scheme.ts

@@ -1,46 +0,0 @@
-import { useEffect, useState } from 'react';
-import {
-	__privateListenTo as listenTo,
-	commandEndEvent,
-	type CommandEvent,
-	v1ReadyEvent,
-} from '@elementor/editor-v1-adapters';
-
-export type ColorScheme = 'auto' | 'dark' | 'light';
-
-export type ExtendedWindow = Window & {
-	elementor: {
-		getPreferences: ( key: 'ui_theme' ) => ColorScheme;
-	};
-};
-
-export function useColorScheme() {
-	const [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );
-
-	useEffect( () => {
-		return listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );
-	}, [] );
-
-	useEffect( () => {
-		return listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {
-			const event = e as CommandEvent< {
-				settings: {
-					ui_theme?: ColorScheme;
-				};
-			} >;
-
-			// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.
-			const isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;
-
-			if ( isColorScheme ) {
-				setColorScheme( getV1ColorScheme() );
-			}
-		} );
-	}, [] );
-
-	return colorScheme;
-}
-
-function getV1ColorScheme() {
-	return ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';
-}