@elementor/editor 0.16.0 → 0.17.1

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/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # Change Log
2
2
 
3
+ ## 0.17.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 1926fe1: Update dependencies
8
+ - Updated dependencies [1926fe1]
9
+ - @elementor/query@0.2.4
10
+
11
+ ## 0.17.0
12
+
13
+ ### Minor Changes
14
+
15
+ - e4c6e3b: update @elementor/ui version
16
+ fix color picker position in box shadow repeater control
17
+ make the color control full width
18
+
19
+ ### Patch Changes
20
+
21
+ - 7781969: Update `@elementor/ui` version
22
+ - Updated dependencies [0c6bcb6]
23
+ - @elementor/editor-v1-adapters@0.8.4
24
+
3
25
  ## 0.16.0
4
26
 
5
27
  ### Minor Changes
package/dist/index.js CHANGED
@@ -45,6 +45,10 @@ var { Slot: LogicSlot, inject: injectIntoLogic } = (0, import_locations.createLo
45
45
  var React3 = __toESM(require("react"));
46
46
  var ReactDOM = __toESM(require("react-dom"));
47
47
  var import_client = require("react-dom/client");
48
+ var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
49
+ var import_query = require("@elementor/query");
50
+ var import_store = require("@elementor/store");
51
+ var import_ui2 = require("@elementor/ui");
48
52
 
49
53
  // src/components/shell.tsx
50
54
  var React = __toESM(require("react"));
@@ -52,11 +56,6 @@ function Shell() {
52
56
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TopSlot, null), /* @__PURE__ */ React.createElement("div", { style: { display: "none" } }, /* @__PURE__ */ React.createElement(LogicSlot, null)));
53
57
  }
54
58
 
55
- // src/init.tsx
56
- var import_ui2 = require("@elementor/ui");
57
- var import_store = require("@elementor/store");
58
- var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
59
-
60
59
  // src/components/theme-provider.tsx
61
60
  var React2 = __toESM(require("react"));
62
61
  var import_ui = require("@elementor/ui");
@@ -91,7 +90,6 @@ function ThemeProvider({ children }) {
91
90
  }
92
91
 
93
92
  // src/init.tsx
94
- var import_query = require("@elementor/query");
95
93
  function init(domElement) {
96
94
  const store = (0, import_store.__createStore)();
97
95
  const queryClient = (0, import_query.createQueryClient)();
package/dist/index.js.map CHANGED
@@ -1 +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 * as ReactDOM from 'react-dom';\nimport { JSX } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { __StoreProvider as StoreProvider, __createStore } from '@elementor/store';\nimport { __privateDispatchReadyEvent as dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport ThemeProvider from './components/theme-provider';\nimport { createQueryClient, QueryClientProvider } from '@elementor/query';\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';\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';\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\tcommandEndEvent,\n\tCommandEvent,\n\t__privateListenTo as listenTo,\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;AACvB,eAA0B;AAE1B,oBAA2B;;;ACH3B,YAAuB;AAGR,SAAR,QAAyB;AAC/B,SACC,0DACC,oCAAC,aAAQ,GACT,oCAAC,SAAI,OAAQ,EAAE,SAAS,OAAO,KAC9B,oCAAC,eAAU,CACZ,CACD;AAEF;;;ADPA,IAAAC,aAAkC;AAClC,mBAAgE;AAChE,IAAAC,6BAAkE;;;AEPlE,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;;;ADzCe,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SAAO,qCAAC,UAAAC,eAAA,EAAkB,eAA8B,QAAU;AACnE;;;AFCA,mBAAuD;AAExC,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_ui","import_editor_v1_adapters","React","listenTo","ThemeProviderBase","dispatchReadyEvent","render","StoreProvider"]}
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"]}
package/dist/index.mjs CHANGED
@@ -7,6 +7,10 @@ var { Slot: LogicSlot, inject: injectIntoLogic } = createLocation();
7
7
  import * as React3 from "react";
8
8
  import * as ReactDOM from "react-dom";
9
9
  import { createRoot } from "react-dom/client";
10
+ import { __privateDispatchReadyEvent as dispatchReadyEvent } from "@elementor/editor-v1-adapters";
11
+ import { createQueryClient, QueryClientProvider } from "@elementor/query";
12
+ import { __createStore, __StoreProvider as StoreProvider } from "@elementor/store";
13
+ import { DirectionProvider } from "@elementor/ui";
10
14
 
11
15
  // src/components/shell.tsx
12
16
  import * as React from "react";
@@ -14,11 +18,6 @@ function Shell() {
14
18
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TopSlot, null), /* @__PURE__ */ React.createElement("div", { style: { display: "none" } }, /* @__PURE__ */ React.createElement(LogicSlot, null)));
15
19
  }
16
20
 
17
- // src/init.tsx
18
- import { DirectionProvider } from "@elementor/ui";
19
- import { __StoreProvider as StoreProvider, __createStore } from "@elementor/store";
20
- import { __privateDispatchReadyEvent as dispatchReadyEvent } from "@elementor/editor-v1-adapters";
21
-
22
21
  // src/components/theme-provider.tsx
23
22
  import * as React2 from "react";
24
23
  import { ThemeProvider as ThemeProviderBase } from "@elementor/ui";
@@ -26,8 +25,8 @@ import { ThemeProvider as ThemeProviderBase } from "@elementor/ui";
26
25
  // src/sync/use-color-scheme.ts
27
26
  import { useEffect, useState } from "react";
28
27
  import {
29
- commandEndEvent,
30
28
  __privateListenTo as listenTo,
29
+ commandEndEvent,
31
30
  v1ReadyEvent
32
31
  } from "@elementor/editor-v1-adapters";
33
32
  function useColorScheme() {
@@ -57,7 +56,6 @@ function ThemeProvider({ children }) {
57
56
  }
58
57
 
59
58
  // src/init.tsx
60
- import { createQueryClient, QueryClientProvider } from "@elementor/query";
61
59
  function init(domElement) {
62
60
  const store = __createStore();
63
61
  const queryClient = createQueryClient();
@@ -1 +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 * as ReactDOM from 'react-dom';\nimport { JSX } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { __StoreProvider as StoreProvider, __createStore } from '@elementor/store';\nimport { __privateDispatchReadyEvent as dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport ThemeProvider from './components/theme-provider';\nimport { createQueryClient, QueryClientProvider } from '@elementor/query';\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';\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';\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\tcommandEndEvent,\n\tCommandEvent,\n\t__privateListenTo as listenTo,\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;AACvB,YAAY,cAAc;AAE1B,SAAS,kBAAkB;;;ACH3B,YAAY,WAAW;AAGR,SAAR,QAAyB;AAC/B,SACC,0DACC,oCAAC,aAAQ,GACT,oCAAC,SAAI,OAAQ,EAAE,SAAS,OAAO,KAC9B,oCAAC,eAAU,CACZ,CACD;AAEF;;;ADPA,SAAS,yBAAyB;AAClC,SAAS,mBAAmB,eAAe,qBAAqB;AAChE,SAAS,+BAA+B,0BAA0B;;;AEPlE,YAAYC,YAAW;AACvB,SAAS,iBAAiB,yBAAyB;;;ACDnD,SAAS,WAAW,gBAAgB;AACpC;AAAA,EACC;AAAA,EAEA,qBAAqB;AAAA,EACrB;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;;;ADzCe,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SAAO,qCAAC,qBAAkB,eAA8B,QAAU;AACnE;;;AFCA,SAAS,mBAAmB,2BAA2B;AAExC,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"]}
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"]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elementor/editor",
3
3
  "description": "The main application for Elementor's editor",
4
- "version": "0.16.0",
4
+ "version": "0.17.1",
5
5
  "private": false,
6
6
  "author": "Elementor Team",
7
7
  "homepage": "https://elementor.com/",
@@ -40,11 +40,11 @@
40
40
  "dev": "tsup --config=../../tsup.dev.ts"
41
41
  },
42
42
  "dependencies": {
43
- "@elementor/editor-v1-adapters": "^0.8.3",
43
+ "@elementor/editor-v1-adapters": "^0.8.4",
44
44
  "@elementor/locations": "^0.7.6",
45
- "@elementor/query": "^0.2.3",
45
+ "@elementor/query": "^0.2.4",
46
46
  "@elementor/store": "^0.8.6",
47
- "@elementor/ui": "^1.21.7"
47
+ "@elementor/ui": "^1.22.0"
48
48
  },
49
49
  "peerDependencies": {
50
50
  "react": "^18.3.1",
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+
2
3
  import { LogicSlot, TopSlot } from '../locations';
3
4
 
4
5
  export default function Shell() {
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { ThemeProvider as ThemeProviderBase } from '@elementor/ui';
3
+
3
4
  import { useColorScheme } from '../sync/use-color-scheme';
4
5
 
5
6
  export default function ThemeProvider( { children }: { children: React.ReactNode } ) {
package/src/init.tsx CHANGED
@@ -1,13 +1,14 @@
1
1
  import * as React from 'react';
2
+ import { type JSX } from 'react';
2
3
  import * as ReactDOM from 'react-dom';
3
- import { JSX } from 'react';
4
4
  import { createRoot } from 'react-dom/client';
5
- import Shell from './components/shell';
6
- import { DirectionProvider } from '@elementor/ui';
7
- import { __StoreProvider as StoreProvider, __createStore } from '@elementor/store';
8
5
  import { __privateDispatchReadyEvent as dispatchReadyEvent } from '@elementor/editor-v1-adapters';
9
- import ThemeProvider from './components/theme-provider';
10
6
  import { createQueryClient, QueryClientProvider } from '@elementor/query';
7
+ import { __createStore, __StoreProvider as StoreProvider } from '@elementor/store';
8
+ import { DirectionProvider } from '@elementor/ui';
9
+
10
+ import Shell from './components/shell';
11
+ import ThemeProvider from './components/theme-provider';
11
12
 
12
13
  export default function init( domElement: Element ): void {
13
14
  const store = __createStore();
@@ -1,8 +1,8 @@
1
1
  import { useEffect, useState } from 'react';
2
2
  import {
3
- commandEndEvent,
4
- CommandEvent,
5
3
  __privateListenTo as listenTo,
4
+ commandEndEvent,
5
+ type CommandEvent,
6
6
  v1ReadyEvent,
7
7
  } from '@elementor/editor-v1-adapters';
8
8