@elementor/editor 0.1.0 → 0.2.1

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.2.1](https://github.com/elementor/elementor-packages/compare/v0.2.0...v0.2.1) (2023-05-11)
+
+
+### Bug Fixes
+
+* **editor-app-bar:** make save options button disabled in site-settings [ED-10221] ([#30](https://github.com/elementor/elementor-packages/issues/30)) ([1991096](https://github.com/elementor/elementor-packages/commit/1991096115efeae7bc3648e4889899b85d7328d6))

package/dist/index.d.ts

@@ -7,13 +7,6 @@ declare const injectIntoTop: ({ filler, name, options }: Omit<{
     options?: _elementor_locations.InjectionOptions | undefined;
 }, "location">) => void;
 
-interface Settings {
-    urls: {
-        admin: string;
-    };
-}
-declare function useSettings(): Settings;
+declare function init(domElement: Element): void;
 
-declare function init(domElement: Element, settings: Settings): void;
-
-export { Settings, init, injectIntoTop, useSettings };
+export { init, injectIntoTop };

package/dist/index.js

@@ -31,8 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   init: () => init,
-  injectIntoTop: () => injectIntoTop,
-  useSettings: () => useSettings
+  injectIntoTop: () => injectIntoTop
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -42,7 +41,7 @@ var LOCATION_TOP = "editor/top";
 var injectIntoTop = (0, import_locations.createInjectorFor)(LOCATION_TOP);
 
 // src/init.tsx
-var React4 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var ReactDOM = __toESM(require("react-dom"));
 var import_i18n = require("@wordpress/i18n");
 
@@ -58,37 +57,22 @@ var import_ui2 = require("@elementor/ui");
 var import_store = require("@elementor/store");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
-// src/contexts/settings-context.tsx
-var React2 = __toESM(require("react"));
-var import_react = require("react");
-var SettingsContext = (0, import_react.createContext)(null);
-function SettingsProvider({ children, settings }) {
-  return /* @__PURE__ */ React2.createElement(SettingsContext.Provider, { value: { ...settings } }, children);
-}
-function useSettings() {
-  const context = (0, import_react.useContext)(SettingsContext);
-  if (!context) {
-    throw new Error("The `useSettings()` hook must be used within an `<SettingsProvider />`");
-  }
-  return context;
-}
-
 // src/components/theme-provider.tsx
-var React3 = __toESM(require("react"));
+var React2 = __toESM(require("react"));
 var import_ui = require("@elementor/ui");
 
 // src/sync/use-color-scheme.ts
-var import_react2 = require("react");
+var import_react = require("react");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 function useColorScheme() {
-  const [colorScheme, setColorScheme] = (0, import_react2.useState)(() => getV1ColorScheme());
-  (0, import_react2.useEffect)(() => {
+  const [colorScheme, setColorScheme] = (0, import_react.useState)(() => getV1ColorScheme());
+  (0, import_react.useEffect)(() => {
     return (0, import_editor_v1_adapters.listenTo)(
       (0, import_editor_v1_adapters.v1ReadyEvent)(),
       () => setColorScheme(getV1ColorScheme())
     );
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     return (0, import_editor_v1_adapters.listenTo)(
       (0, import_editor_v1_adapters.commandEndEvent)("document/elements/settings"),
       (e) => {
@@ -109,19 +93,18 @@ function getV1ColorScheme() {
 // src/components/theme-provider.tsx
 function ThemeProvider({ children }) {
   const colorScheme = useColorScheme();
-  return /* @__PURE__ */ React3.createElement(import_ui.ThemeProvider, { colorScheme }, children);
+  return /* @__PURE__ */ React2.createElement(import_ui.ThemeProvider, { colorScheme }, children);
 }
 
 // src/init.tsx
-function init(domElement, settings) {
+function init(domElement) {
   const store = (0, import_store.createStore)();
   (0, import_editor_v1_adapters2.dispatchReadyEvent)();
-  ReactDOM.render(/* @__PURE__ */ React4.createElement(SettingsProvider, { settings }, /* @__PURE__ */ React4.createElement(import_store.StoreProvider, { store }, /* @__PURE__ */ React4.createElement(import_ui2.DirectionProvider, { rtl: (0, import_i18n.isRTL)() }, /* @__PURE__ */ React4.createElement(ThemeProvider, null, /* @__PURE__ */ React4.createElement(Shell, null))))), domElement);
+  ReactDOM.render(/* @__PURE__ */ React3.createElement(import_store.StoreProvider, { store }, /* @__PURE__ */ React3.createElement(import_ui2.DirectionProvider, { rtl: (0, import_i18n.isRTL)() }, /* @__PURE__ */ React3.createElement(ThemeProvider, null, /* @__PURE__ */ React3.createElement(Shell, null)))), domElement);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   init,
-  injectIntoTop,
-  useSettings
+  injectIntoTop
 });
 //# 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/contexts/settings-context.tsx","../src/components/theme-provider.tsx","../src/sync/use-color-scheme.ts"],"sourcesContent":["export { injectIntoTop } from './locations';\nexport { default as init } from './init';\nexport { useSettings } from './contexts/settings-context';\nexport type { Settings } from './contexts/settings-context';\n","import { createInjectorFor } from '@elementor/locations';\n\nexport const LOCATION_TOP = 'editor/top';\n\nexport const injectIntoTop = createInjectorFor( LOCATION_TOP );\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { isRTL } from '@wordpress/i18n';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { StoreProvider, createStore } from '@elementor/store';\nimport { dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport { SettingsProvider, Settings } from './contexts/settings-context';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element, settings: Settings ): void {\n\tconst store = createStore();\n\n\tdispatchReadyEvent();\n\n\tReactDOM.render( (\n\t\t<SettingsProvider settings={ settings }>\n\t\t\t<StoreProvider store={ store }>\n\t\t\t\t<DirectionProvider rtl={ isRTL() }>\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</StoreProvider>\n\t\t</SettingsProvider>\n\t), domElement );\n}\n","import * as React from 'react';\nimport { Slot } from '@elementor/locations';\nimport { LOCATION_TOP } from '../locations';\n\nexport default function Shell() {\n\treturn (\n\t\t<Slot location={ LOCATION_TOP } />\n\t);\n}\n","import * as React from 'react';\nimport { createContext, PropsWithChildren, useContext } from 'react';\n\nexport interface Settings {\n\turls: {\n\t\tadmin: string,\n\t},\n}\n\nconst SettingsContext = createContext<Settings | null>( null );\n\nexport function SettingsProvider( { children, settings }: PropsWithChildren<{ settings: Settings }> ) {\n\treturn (\n\t\t<SettingsContext.Provider value={ { ...settings } }>\n\t\t\t{ children }\n\t\t</SettingsContext.Provider>\n\t);\n}\n\nexport function useSettings() {\n\tconst context = useContext( SettingsContext );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'The `useSettings()` hook must be used within an `<SettingsProvider />`' );\n\t}\n\n\treturn context;\n}\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase } from '@elementor/ui';\nimport { useColorScheme } from '../sync/use-color-scheme';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport { commandEndEvent, CommandEvent, listenTo, v1ReadyEvent } 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(\n\t\t\tv1ReadyEvent(),\n\t\t\t() => setColorScheme( getV1ColorScheme() )\n\t\t);\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t\t( e ) => {\n\t\t\t\tconst event = e as CommandEvent<{\n\t\t\t\t\tsettings: {\n\t\t\t\t\t\tui_theme?: ColorScheme,\n\t\t\t\t\t},\n\t\t\t\t}>;\n\n\t\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\t\tif ( isColorScheme ) {\n\t\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t\t}\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,uBAAkC;AAE3B,IAAM,eAAe;AAErB,IAAM,oBAAgB,oCAAmB,YAAa;;;ACJ7D,IAAAA,SAAuB;AACvB,eAA0B;AAC1B,kBAAsB;;;ACFtB,YAAuB;AACvB,IAAAC,oBAAqB;AAGN,SAAR,QAAyB;AAC/B,SACC,oCAAC,0BAAK,UAAW,cAAe;AAElC;;;ADJA,IAAAC,aAAkC;AAClC,mBAA2C;AAC3C,IAAAC,6BAAmC;;;AENnC,IAAAC,SAAuB;AACvB,mBAA6D;AAQ7D,IAAM,sBAAkB,4BAAgC,IAAK;AAEtD,SAAS,iBAAkB,EAAE,UAAU,SAAS,GAA+C;AACrG,SACC,qCAAC,gBAAgB,UAAhB,EAAyB,OAAQ,EAAE,GAAG,SAAS,KAC7C,QACH;AAEF;AAEO,SAAS,cAAc;AAC7B,QAAM,cAAU,yBAAY,eAAgB;AAE5C,MAAK,CAAE,SAAU;AAChB,UAAM,IAAI,MAAO,wEAAyE;AAAA,EAC3F;AAEA,SAAO;AACR;;;AC3BA,IAAAC,SAAuB;AACvB,gBAAmD;;;ACDnD,IAAAC,gBAAoC;AACpC,gCAAsE;AAU/D,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,QAAI,wBAAuB,MAAM,iBAAiB,CAAE;AAExF,+BAAW,MAAM;AAChB,eAAO;AAAA,UACN,wCAAa;AAAA,MACb,MAAM,eAAgB,iBAAiB,CAAE;AAAA,IAC1C;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,+BAAW,MAAM;AAChB,eAAO;AAAA,UACN,2CAAiB,4BAA6B;AAAA,MAC9C,CAAE,MAAO;AACR,cAAM,QAAQ;AAOd,cAAM,gBAAgB,MAAM,MAAM,YAAY,cAAc,MAAM,KAAK;AAEvE,YAAK,eAAgB;AACpB,yBAAgB,iBAAiB,CAAE;AAAA,QACpC;AAAA,MACD;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;AAEA,SAAS,mBAAmB;AAC3B,SAAS,OAAsC,WAAW,iBAAkB,UAAW,KAAK;AAC7F;;;AD1Ce,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SACC,qCAAC,UAAAC,eAAA,EAAkB,eAChB,QACH;AAEF;;;AHFe,SAAR,KAAuB,YAAqB,UAA2B;AAC7E,QAAM,YAAQ,0BAAY;AAE1B,qDAAmB;AAEnB,EAAS,gBACR,qCAAC,oBAAiB,YACjB,qCAAC,8BAAc,SACd,qCAAC,gCAAkB,SAAM,mBAAM,KAC9B,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,CACD,GACE,UAAW;AACf;","names":["React","import_locations","import_ui","import_editor_v1_adapters","React","React","import_react","ThemeProviderBase"]}
+{"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 } from './locations';\nexport { default as init } from './init';\n","import { createInjectorFor } from '@elementor/locations';\n\nexport const LOCATION_TOP = 'editor/top';\n\nexport const injectIntoTop = createInjectorFor( LOCATION_TOP );\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { isRTL } from '@wordpress/i18n';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { StoreProvider, createStore } from '@elementor/store';\nimport { dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element ): void {\n\tconst store = createStore();\n\n\tdispatchReadyEvent();\n\n\tReactDOM.render( (\n\t\t<StoreProvider store={ store }>\n\t\t\t<DirectionProvider rtl={ isRTL() }>\n\t\t\t\t<ThemeProvider>\n\t\t\t\t\t<Shell />\n\t\t\t\t</ThemeProvider>\n\t\t\t</DirectionProvider>\n\t\t</StoreProvider>\n\t), domElement );\n}\n","import * as React from 'react';\nimport { Slot } from '@elementor/locations';\nimport { LOCATION_TOP } from '../locations';\n\nexport default function Shell() {\n\treturn (\n\t\t<Slot location={ LOCATION_TOP } />\n\t);\n}\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase } from '@elementor/ui';\nimport { useColorScheme } from '../sync/use-color-scheme';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport { commandEndEvent, CommandEvent, listenTo, v1ReadyEvent } 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(\n\t\t\tv1ReadyEvent(),\n\t\t\t() => setColorScheme( getV1ColorScheme() )\n\t\t);\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t\t( e ) => {\n\t\t\t\tconst event = e as CommandEvent<{\n\t\t\t\t\tsettings: {\n\t\t\t\t\t\tui_theme?: ColorScheme,\n\t\t\t\t\t},\n\t\t\t\t}>;\n\n\t\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\t\tif ( isColorScheme ) {\n\t\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t\t}\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;;;ACAA,uBAAkC;AAE3B,IAAM,eAAe;AAErB,IAAM,oBAAgB,oCAAmB,YAAa;;;ACJ7D,IAAAA,SAAuB;AACvB,eAA0B;AAC1B,kBAAsB;;;ACFtB,YAAuB;AACvB,IAAAC,oBAAqB;AAGN,SAAR,QAAyB;AAC/B,SACC,oCAAC,0BAAK,UAAW,cAAe;AAElC;;;ADJA,IAAAC,aAAkC;AAClC,mBAA2C;AAC3C,IAAAC,6BAAmC;;;AENnC,IAAAC,SAAuB;AACvB,gBAAmD;;;ACDnD,mBAAoC;AACpC,gCAAsE;AAU/D,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,QAAI,uBAAuB,MAAM,iBAAiB,CAAE;AAExF,8BAAW,MAAM;AAChB,eAAO;AAAA,UACN,wCAAa;AAAA,MACb,MAAM,eAAgB,iBAAiB,CAAE;AAAA,IAC1C;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,8BAAW,MAAM;AAChB,eAAO;AAAA,UACN,2CAAiB,4BAA6B;AAAA,MAC9C,CAAE,MAAO;AACR,cAAM,QAAQ;AAOd,cAAM,gBAAgB,MAAM,MAAM,YAAY,cAAc,MAAM,KAAK;AAEvE,YAAK,eAAgB;AACpB,yBAAgB,iBAAiB,CAAE;AAAA,QACpC;AAAA,MACD;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;AAEA,SAAS,mBAAmB;AAC3B,SAAS,OAAsC,WAAW,iBAAkB,UAAW,KAAK;AAC7F;;;AD1Ce,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SACC,qCAAC,UAAAC,eAAA,EAAkB,eAChB,QACH;AAEF;;;AFHe,SAAR,KAAuB,YAA4B;AACzD,QAAM,YAAQ,0BAAY;AAE1B,qDAAmB;AAEnB,EAAS,gBACR,qCAAC,8BAAc,SACd,qCAAC,gCAAkB,SAAM,mBAAM,KAC9B,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,GACE,UAAW;AACf;","names":["React","import_locations","import_ui","import_editor_v1_adapters","React","ThemeProviderBase"]}

package/dist/index.mjs

@@ -4,7 +4,7 @@ var LOCATION_TOP = "editor/top";
 var injectIntoTop = createInjectorFor(LOCATION_TOP);
 
 // src/init.tsx
-import * as React4 from "react";
+import * as React3 from "react";
 import * as ReactDOM from "react-dom";
 import { isRTL } from "@wordpress/i18n";
 
@@ -20,23 +20,8 @@ import { DirectionProvider } from "@elementor/ui";
 import { StoreProvider, createStore } from "@elementor/store";
 import { dispatchReadyEvent } from "@elementor/editor-v1-adapters";
 
-// src/contexts/settings-context.tsx
-import * as React2 from "react";
-import { createContext, useContext } from "react";
-var SettingsContext = createContext(null);
-function SettingsProvider({ children, settings }) {
-  return /* @__PURE__ */ React2.createElement(SettingsContext.Provider, { value: { ...settings } }, children);
-}
-function useSettings() {
-  const context = useContext(SettingsContext);
-  if (!context) {
-    throw new Error("The `useSettings()` hook must be used within an `<SettingsProvider />`");
-  }
-  return context;
-}
-
 // src/components/theme-provider.tsx
-import * as React3 from "react";
+import * as React2 from "react";
 import { ThemeProvider as ThemeProviderBase } from "@elementor/ui";
 
 // src/sync/use-color-scheme.ts
@@ -71,18 +56,17 @@ function getV1ColorScheme() {
 // src/components/theme-provider.tsx
 function ThemeProvider({ children }) {
   const colorScheme = useColorScheme();
-  return /* @__PURE__ */ React3.createElement(ThemeProviderBase, { colorScheme }, children);
+  return /* @__PURE__ */ React2.createElement(ThemeProviderBase, { colorScheme }, children);
 }
 
 // src/init.tsx
-function init(domElement, settings) {
+function init(domElement) {
   const store = createStore();
   dispatchReadyEvent();
-  ReactDOM.render(/* @__PURE__ */ React4.createElement(SettingsProvider, { settings }, /* @__PURE__ */ React4.createElement(StoreProvider, { store }, /* @__PURE__ */ React4.createElement(DirectionProvider, { rtl: isRTL() }, /* @__PURE__ */ React4.createElement(ThemeProvider, null, /* @__PURE__ */ React4.createElement(Shell, null))))), domElement);
+  ReactDOM.render(/* @__PURE__ */ React3.createElement(StoreProvider, { store }, /* @__PURE__ */ React3.createElement(DirectionProvider, { rtl: isRTL() }, /* @__PURE__ */ React3.createElement(ThemeProvider, null, /* @__PURE__ */ React3.createElement(Shell, null)))), domElement);
 }
 export {
   init,
-  injectIntoTop,
-  useSettings
+  injectIntoTop
 };
 //# 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/contexts/settings-context.tsx","../src/components/theme-provider.tsx","../src/sync/use-color-scheme.ts"],"sourcesContent":["import { createInjectorFor } from '@elementor/locations';\n\nexport const LOCATION_TOP = 'editor/top';\n\nexport const injectIntoTop = createInjectorFor( LOCATION_TOP );\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { isRTL } from '@wordpress/i18n';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { StoreProvider, createStore } from '@elementor/store';\nimport { dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport { SettingsProvider, Settings } from './contexts/settings-context';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element, settings: Settings ): void {\n\tconst store = createStore();\n\n\tdispatchReadyEvent();\n\n\tReactDOM.render( (\n\t\t<SettingsProvider settings={ settings }>\n\t\t\t<StoreProvider store={ store }>\n\t\t\t\t<DirectionProvider rtl={ isRTL() }>\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</StoreProvider>\n\t\t</SettingsProvider>\n\t), domElement );\n}\n","import * as React from 'react';\nimport { Slot } from '@elementor/locations';\nimport { LOCATION_TOP } from '../locations';\n\nexport default function Shell() {\n\treturn (\n\t\t<Slot location={ LOCATION_TOP } />\n\t);\n}\n","import * as React from 'react';\nimport { createContext, PropsWithChildren, useContext } from 'react';\n\nexport interface Settings {\n\turls: {\n\t\tadmin: string,\n\t},\n}\n\nconst SettingsContext = createContext<Settings | null>( null );\n\nexport function SettingsProvider( { children, settings }: PropsWithChildren<{ settings: Settings }> ) {\n\treturn (\n\t\t<SettingsContext.Provider value={ { ...settings } }>\n\t\t\t{ children }\n\t\t</SettingsContext.Provider>\n\t);\n}\n\nexport function useSettings() {\n\tconst context = useContext( SettingsContext );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'The `useSettings()` hook must be used within an `<SettingsProvider />`' );\n\t}\n\n\treturn context;\n}\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase } from '@elementor/ui';\nimport { useColorScheme } from '../sync/use-color-scheme';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport { commandEndEvent, CommandEvent, listenTo, v1ReadyEvent } 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(\n\t\t\tv1ReadyEvent(),\n\t\t\t() => setColorScheme( getV1ColorScheme() )\n\t\t);\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t\t( e ) => {\n\t\t\t\tconst event = e as CommandEvent<{\n\t\t\t\t\tsettings: {\n\t\t\t\t\t\tui_theme?: ColorScheme,\n\t\t\t\t\t},\n\t\t\t\t}>;\n\n\t\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\t\tif ( isColorScheme ) {\n\t\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t\t}\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,yBAAyB;AAE3B,IAAM,eAAe;AAErB,IAAM,gBAAgB,kBAAmB,YAAa;;;ACJ7D,YAAYA,YAAW;AACvB,YAAY,cAAc;AAC1B,SAAS,aAAa;;;ACFtB,YAAY,WAAW;AACvB,SAAS,YAAY;AAGN,SAAR,QAAyB;AAC/B,SACC,oCAAC,QAAK,UAAW,cAAe;AAElC;;;ADJA,SAAS,yBAAyB;AAClC,SAAS,eAAe,mBAAmB;AAC3C,SAAS,0BAA0B;;;AENnC,YAAYC,YAAW;AACvB,SAAS,eAAkC,kBAAkB;AAQ7D,IAAM,kBAAkB,cAAgC,IAAK;AAEtD,SAAS,iBAAkB,EAAE,UAAU,SAAS,GAA+C;AACrG,SACC,qCAAC,gBAAgB,UAAhB,EAAyB,OAAQ,EAAE,GAAG,SAAS,KAC7C,QACH;AAEF;AAEO,SAAS,cAAc;AAC7B,QAAM,UAAU,WAAY,eAAgB;AAE5C,MAAK,CAAE,SAAU;AAChB,UAAM,IAAI,MAAO,wEAAyE;AAAA,EAC3F;AAEA,SAAO;AACR;;;AC3BA,YAAYC,YAAW;AACvB,SAAS,iBAAiB,yBAAyB;;;ACDnD,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAA+B,UAAU,oBAAoB;AAU/D,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,IAAI,SAAuB,MAAM,iBAAiB,CAAE;AAExF,YAAW,MAAM;AAChB,WAAO;AAAA,MACN,aAAa;AAAA,MACb,MAAM,eAAgB,iBAAiB,CAAE;AAAA,IAC1C;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,YAAW,MAAM;AAChB,WAAO;AAAA,MACN,gBAAiB,4BAA6B;AAAA,MAC9C,CAAE,MAAO;AACR,cAAM,QAAQ;AAOd,cAAM,gBAAgB,MAAM,MAAM,YAAY,cAAc,MAAM,KAAK;AAEvE,YAAK,eAAgB;AACpB,yBAAgB,iBAAiB,CAAE;AAAA,QACpC;AAAA,MACD;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;AAEA,SAAS,mBAAmB;AAC3B,SAAS,OAAsC,WAAW,iBAAkB,UAAW,KAAK;AAC7F;;;AD1Ce,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SACC,qCAAC,qBAAkB,eAChB,QACH;AAEF;;;AHFe,SAAR,KAAuB,YAAqB,UAA2B;AAC7E,QAAM,QAAQ,YAAY;AAE1B,qBAAmB;AAEnB,EAAS,gBACR,qCAAC,oBAAiB,YACjB,qCAAC,iBAAc,SACd,qCAAC,qBAAkB,KAAM,MAAM,KAC9B,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,CACD,GACE,UAAW;AACf;","names":["React","React","React"]}
+{"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 { createInjectorFor } from '@elementor/locations';\n\nexport const LOCATION_TOP = 'editor/top';\n\nexport const injectIntoTop = createInjectorFor( LOCATION_TOP );\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { isRTL } from '@wordpress/i18n';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { StoreProvider, createStore } from '@elementor/store';\nimport { dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element ): void {\n\tconst store = createStore();\n\n\tdispatchReadyEvent();\n\n\tReactDOM.render( (\n\t\t<StoreProvider store={ store }>\n\t\t\t<DirectionProvider rtl={ isRTL() }>\n\t\t\t\t<ThemeProvider>\n\t\t\t\t\t<Shell />\n\t\t\t\t</ThemeProvider>\n\t\t\t</DirectionProvider>\n\t\t</StoreProvider>\n\t), domElement );\n}\n","import * as React from 'react';\nimport { Slot } from '@elementor/locations';\nimport { LOCATION_TOP } from '../locations';\n\nexport default function Shell() {\n\treturn (\n\t\t<Slot location={ LOCATION_TOP } />\n\t);\n}\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase } from '@elementor/ui';\nimport { useColorScheme } from '../sync/use-color-scheme';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport { commandEndEvent, CommandEvent, listenTo, v1ReadyEvent } 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(\n\t\t\tv1ReadyEvent(),\n\t\t\t() => setColorScheme( getV1ColorScheme() )\n\t\t);\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t\t( e ) => {\n\t\t\t\tconst event = e as CommandEvent<{\n\t\t\t\t\tsettings: {\n\t\t\t\t\t\tui_theme?: ColorScheme,\n\t\t\t\t\t},\n\t\t\t\t}>;\n\n\t\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\t\tif ( isColorScheme ) {\n\t\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t\t}\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,yBAAyB;AAE3B,IAAM,eAAe;AAErB,IAAM,gBAAgB,kBAAmB,YAAa;;;ACJ7D,YAAYA,YAAW;AACvB,YAAY,cAAc;AAC1B,SAAS,aAAa;;;ACFtB,YAAY,WAAW;AACvB,SAAS,YAAY;AAGN,SAAR,QAAyB;AAC/B,SACC,oCAAC,QAAK,UAAW,cAAe;AAElC;;;ADJA,SAAS,yBAAyB;AAClC,SAAS,eAAe,mBAAmB;AAC3C,SAAS,0BAA0B;;;AENnC,YAAYC,YAAW;AACvB,SAAS,iBAAiB,yBAAyB;;;ACDnD,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAA+B,UAAU,oBAAoB;AAU/D,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,IAAI,SAAuB,MAAM,iBAAiB,CAAE;AAExF,YAAW,MAAM;AAChB,WAAO;AAAA,MACN,aAAa;AAAA,MACb,MAAM,eAAgB,iBAAiB,CAAE;AAAA,IAC1C;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,YAAW,MAAM;AAChB,WAAO;AAAA,MACN,gBAAiB,4BAA6B;AAAA,MAC9C,CAAE,MAAO;AACR,cAAM,QAAQ;AAOd,cAAM,gBAAgB,MAAM,MAAM,YAAY,cAAc,MAAM,KAAK;AAEvE,YAAK,eAAgB;AACpB,yBAAgB,iBAAiB,CAAE;AAAA,QACpC;AAAA,MACD;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;AAEA,SAAS,mBAAmB;AAC3B,SAAS,OAAsC,WAAW,iBAAkB,UAAW,KAAK;AAC7F;;;AD1Ce,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SACC,qCAAC,qBAAkB,eAChB,QACH;AAEF;;;AFHe,SAAR,KAAuB,YAA4B;AACzD,QAAM,QAAQ,YAAY;AAE1B,qBAAmB;AAEnB,EAAS,gBACR,qCAAC,iBAAc,SACd,qCAAC,qBAAkB,KAAM,MAAM,KAC9B,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,GACE,UAAW;AACf;","names":["React","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor",
-	"version": "0.1.0",
+	"version": "0.2.1",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -19,7 +19,7 @@
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/elementor/elementor-packages.git",
-		"directory": "packages/editor"
+		"directory": "packages/core/editor"
 	},
 	"bugs": {
 		"url": "https://github.com/elementor/elementor-packages/issues"
@@ -32,10 +32,10 @@
 		"dev": "tsup --config=../../tsup.dev.ts"
 	},
 	"dependencies": {
-		"@elementor/editor-v1-adapters": "^0.1.0",
-		"@elementor/locations": "^0.1.0",
-		"@elementor/store": "^0.1.0",
-		"@elementor/ui": "^1.4.47",
+		"@elementor/editor-v1-adapters": "^0.2.0",
+		"@elementor/locations": "^0.2.0",
+		"@elementor/store": "^0.2.0",
+		"@elementor/ui": "^1.4.50",
 		"@wordpress/i18n": "^4.31.0"
 	},
 	"peerDependencies": {
@@ -45,5 +45,5 @@
 	"elementor": {
 		"type": "app"
 	},
-	"gitHead": "2ba9f13a9dbd085eb6ed8e6e303e9275ce626b8d"
+	"gitHead": "3559bb26178072f23c08caab4114671a76bb9eb6"
 }

package/src/index.ts

@@ -1,4 +1,2 @@
 export { injectIntoTop } from './locations';
 export { default as init } from './init';
-export { useSettings } from './contexts/settings-context';
-export type { Settings } from './contexts/settings-context';

package/src/init.tsx

@@ -5,23 +5,20 @@ import Shell from './components/shell';
 import { DirectionProvider } from '@elementor/ui';
 import { StoreProvider, createStore } from '@elementor/store';
 import { dispatchReadyEvent } from '@elementor/editor-v1-adapters';
-import { SettingsProvider, Settings } from './contexts/settings-context';
 import ThemeProvider from './components/theme-provider';
 
-export default function init( domElement: Element, settings: Settings ): void {
+export default function init( domElement: Element ): void {
 	const store = createStore();
 
 	dispatchReadyEvent();
 
 	ReactDOM.render( (
-		<SettingsProvider settings={ settings }>
-			<StoreProvider store={ store }>
-				<DirectionProvider rtl={ isRTL() }>
-					<ThemeProvider>
-						<Shell />
-					</ThemeProvider>
-				</DirectionProvider>
-			</StoreProvider>
-		</SettingsProvider>
+		<StoreProvider store={ store }>
+			<DirectionProvider rtl={ isRTL() }>
+				<ThemeProvider>
+					<Shell />
+				</ThemeProvider>
+			</DirectionProvider>
+		</StoreProvider>
 	), domElement );
 }

package/src/contexts/__tests__/settings-context.test.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { renderHook } from '@testing-library/react-hooks';
-import { Settings, SettingsProvider, useSettings } from '../settings-context';
-
-describe( '@elementor/editor - useSettings()', () => {
-	it( 'should return the value from the context', () => {
-		// Arrange.
-		const settings = {
-			urls: {
-				admin: 'https://localhost/wp-admin/',
-			},
-		};
-
-		// Act.
-		const { result } = renderHookWithSettings(
-			() => useSettings(),
-			settings
-		);
-
-		// Assert.
-		expect( result.current ).toEqual( settings );
-	} );
-
-	it( 'should throw when not rendered inside a <SettingsProvider />', () => {
-		// Arrange.
-		// Mock the `console.error` because `@testing-library/react-hooks` takes over the `console.error`
-		// which breaks `@wordpress/jest-console` assertions.
-
-		// eslint-disable-next-line no-console
-		console.error = jest.fn();
-
-		// Act.
-		const { result } = renderHook( () => useSettings() );
-
-		// Assert.
-		expect( result.error?.message ).toEqual( 'The `useSettings()` hook must be used within an `<SettingsProvider />`' );
-	} );
-} );
-
-function renderHookWithSettings( hook: () => unknown, settings: Settings ) {
-	return renderHook( hook, {
-		wrapper: ( { children } ) => {
-			return (
-				<SettingsProvider settings={ settings }>
-					{ children }
-				</SettingsProvider>
-			);
-		},
-	} );
-}

package/src/contexts/settings-context.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { createContext, PropsWithChildren, useContext } from 'react';
-
-export interface Settings {
-	urls: {
-		admin: string,
-	},
-}
-
-const SettingsContext = createContext<Settings | null>( null );
-
-export function SettingsProvider( { children, settings }: PropsWithChildren<{ settings: Settings }> ) {
-	return (
-		<SettingsContext.Provider value={ { ...settings } }>
-			{ children }
-		</SettingsContext.Provider>
-	);
-}
-
-export function useSettings() {
-	const context = useContext( SettingsContext );
-
-	if ( ! context ) {
-		throw new Error( 'The `useSettings()` hook must be used within an `<SettingsProvider />`' );
-	}
-
-	return context;
-}