@elementor/editor 0.18.4 → 0.18.5
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 +6 -0
- package/dist/index.js +5 -38
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -40
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/init.tsx +1 -2
- package/src/components/theme-provider.tsx +0 -10
- package/src/sync/use-color-scheme.ts +0 -46
package/CHANGELOG.md
CHANGED
package/dist/index.js
CHANGED
|
@@ -42,13 +42,13 @@ var { Slot: TopSlot, inject: injectIntoTop } = (0, import_locations.createLocati
|
|
|
42
42
|
var { Slot: LogicSlot, inject: injectIntoLogic } = (0, import_locations.createLocation)();
|
|
43
43
|
|
|
44
44
|
// src/init.tsx
|
|
45
|
-
var
|
|
45
|
+
var React2 = __toESM(require("react"));
|
|
46
46
|
var ReactDOM = __toESM(require("react-dom"));
|
|
47
47
|
var import_client = require("react-dom/client");
|
|
48
|
-
var
|
|
48
|
+
var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
49
49
|
var import_query = require("@elementor/query");
|
|
50
50
|
var import_store = require("@elementor/store");
|
|
51
|
-
var
|
|
51
|
+
var import_ui = require("@elementor/ui");
|
|
52
52
|
|
|
53
53
|
// src/components/shell.tsx
|
|
54
54
|
var React = __toESM(require("react"));
|
|
@@ -56,46 +56,13 @@ function Shell() {
|
|
|
56
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)));
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
// src/components/theme-provider.tsx
|
|
60
|
-
var React2 = __toESM(require("react"));
|
|
61
|
-
var import_ui = require("@elementor/ui");
|
|
62
|
-
|
|
63
|
-
// src/sync/use-color-scheme.ts
|
|
64
|
-
var import_react = require("react");
|
|
65
|
-
var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
66
|
-
function useColorScheme() {
|
|
67
|
-
const [colorScheme, setColorScheme] = (0, import_react.useState)(() => getV1ColorScheme());
|
|
68
|
-
(0, import_react.useEffect)(() => {
|
|
69
|
-
return (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.v1ReadyEvent)(), () => setColorScheme(getV1ColorScheme()));
|
|
70
|
-
}, []);
|
|
71
|
-
(0, import_react.useEffect)(() => {
|
|
72
|
-
return (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.commandEndEvent)("document/elements/settings"), (e) => {
|
|
73
|
-
const event = e;
|
|
74
|
-
const isColorScheme = event.args?.settings && "ui_theme" in event.args.settings;
|
|
75
|
-
if (isColorScheme) {
|
|
76
|
-
setColorScheme(getV1ColorScheme());
|
|
77
|
-
}
|
|
78
|
-
});
|
|
79
|
-
}, []);
|
|
80
|
-
return colorScheme;
|
|
81
|
-
}
|
|
82
|
-
function getV1ColorScheme() {
|
|
83
|
-
return window.elementor?.getPreferences?.("ui_theme") || "auto";
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// src/components/theme-provider.tsx
|
|
87
|
-
function ThemeProvider({ children }) {
|
|
88
|
-
const colorScheme = useColorScheme();
|
|
89
|
-
return /* @__PURE__ */ React2.createElement(import_ui.ThemeProvider, { colorScheme }, children);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
59
|
// src/init.tsx
|
|
93
60
|
function init(domElement) {
|
|
94
61
|
const store = (0, import_store.__createStore)();
|
|
95
62
|
const queryClient = (0, import_query.createQueryClient)();
|
|
96
|
-
(0,
|
|
63
|
+
(0, import_editor_v1_adapters.__privateDispatchReadyEvent)();
|
|
97
64
|
render2(
|
|
98
|
-
/* @__PURE__ */
|
|
65
|
+
/* @__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))))),
|
|
99
66
|
domElement
|
|
100
67
|
);
|
|
101
68
|
}
|
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"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/locations.ts","../src/init.tsx","../src/components/shell.tsx"],"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, ThemeProvider } from '@elementor/ui';\n\nimport Shell from './components/shell';\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"],"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;;;ADFe,SAAR,KAAuB,YAA4B;AACzD,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
CHANGED
|
@@ -4,13 +4,13 @@ var { Slot: TopSlot, inject: injectIntoTop } = createLocation();
|
|
|
4
4
|
var { Slot: LogicSlot, inject: injectIntoLogic } = createLocation();
|
|
5
5
|
|
|
6
6
|
// src/init.tsx
|
|
7
|
-
import * as
|
|
7
|
+
import * as React2 from "react";
|
|
8
8
|
import * as ReactDOM from "react-dom";
|
|
9
9
|
import { createRoot } from "react-dom/client";
|
|
10
10
|
import { __privateDispatchReadyEvent as dispatchReadyEvent } from "@elementor/editor-v1-adapters";
|
|
11
11
|
import { createQueryClient, QueryClientProvider } from "@elementor/query";
|
|
12
12
|
import { __createStore, __StoreProvider as StoreProvider } from "@elementor/store";
|
|
13
|
-
import { DirectionProvider } from "@elementor/ui";
|
|
13
|
+
import { DirectionProvider, ThemeProvider } from "@elementor/ui";
|
|
14
14
|
|
|
15
15
|
// src/components/shell.tsx
|
|
16
16
|
import * as React from "react";
|
|
@@ -18,50 +18,13 @@ function Shell() {
|
|
|
18
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)));
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
// src/components/theme-provider.tsx
|
|
22
|
-
import * as React2 from "react";
|
|
23
|
-
import { ThemeProvider as ThemeProviderBase } from "@elementor/ui";
|
|
24
|
-
|
|
25
|
-
// src/sync/use-color-scheme.ts
|
|
26
|
-
import { useEffect, useState } from "react";
|
|
27
|
-
import {
|
|
28
|
-
__privateListenTo as listenTo,
|
|
29
|
-
commandEndEvent,
|
|
30
|
-
v1ReadyEvent
|
|
31
|
-
} from "@elementor/editor-v1-adapters";
|
|
32
|
-
function useColorScheme() {
|
|
33
|
-
const [colorScheme, setColorScheme] = useState(() => getV1ColorScheme());
|
|
34
|
-
useEffect(() => {
|
|
35
|
-
return listenTo(v1ReadyEvent(), () => setColorScheme(getV1ColorScheme()));
|
|
36
|
-
}, []);
|
|
37
|
-
useEffect(() => {
|
|
38
|
-
return listenTo(commandEndEvent("document/elements/settings"), (e) => {
|
|
39
|
-
const event = e;
|
|
40
|
-
const isColorScheme = event.args?.settings && "ui_theme" in event.args.settings;
|
|
41
|
-
if (isColorScheme) {
|
|
42
|
-
setColorScheme(getV1ColorScheme());
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
}, []);
|
|
46
|
-
return colorScheme;
|
|
47
|
-
}
|
|
48
|
-
function getV1ColorScheme() {
|
|
49
|
-
return window.elementor?.getPreferences?.("ui_theme") || "auto";
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// src/components/theme-provider.tsx
|
|
53
|
-
function ThemeProvider({ children }) {
|
|
54
|
-
const colorScheme = useColorScheme();
|
|
55
|
-
return /* @__PURE__ */ React2.createElement(ThemeProviderBase, { colorScheme }, children);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
21
|
// src/init.tsx
|
|
59
22
|
function init(domElement) {
|
|
60
23
|
const store = __createStore();
|
|
61
24
|
const queryClient = createQueryClient();
|
|
62
25
|
dispatchReadyEvent();
|
|
63
26
|
render2(
|
|
64
|
-
/* @__PURE__ */
|
|
27
|
+
/* @__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))))),
|
|
65
28
|
domElement
|
|
66
29
|
);
|
|
67
30
|
}
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/locations.ts","../src/init.tsx","../src/components/shell.tsx"
|
|
1
|
+
{"version":3,"sources":["../src/locations.ts","../src/init.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 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"],"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;;;ADFe,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","render"]}
|
package/package.json
CHANGED
package/src/init.tsx
CHANGED
|
@@ -5,10 +5,9 @@ import { createRoot } from 'react-dom/client';
|
|
|
5
5
|
import { __privateDispatchReadyEvent as dispatchReadyEvent } from '@elementor/editor-v1-adapters';
|
|
6
6
|
import { createQueryClient, QueryClientProvider } from '@elementor/query';
|
|
7
7
|
import { __createStore, __StoreProvider as StoreProvider } from '@elementor/store';
|
|
8
|
-
import { DirectionProvider } from '@elementor/ui';
|
|
8
|
+
import { DirectionProvider, ThemeProvider } from '@elementor/ui';
|
|
9
9
|
|
|
10
10
|
import Shell from './components/shell';
|
|
11
|
-
import ThemeProvider from './components/theme-provider';
|
|
12
11
|
|
|
13
12
|
export default function init( domElement: Element ): void {
|
|
14
13
|
const store = __createStore();
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { ThemeProvider as ThemeProviderBase } from '@elementor/ui';
|
|
3
|
-
|
|
4
|
-
import { useColorScheme } from '../sync/use-color-scheme';
|
|
5
|
-
|
|
6
|
-
export default function ThemeProvider( { children }: { children: React.ReactNode } ) {
|
|
7
|
-
const colorScheme = useColorScheme();
|
|
8
|
-
|
|
9
|
-
return <ThemeProviderBase colorScheme={ colorScheme }>{ children }</ThemeProviderBase>;
|
|
10
|
-
}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { useEffect, useState } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
__privateListenTo as listenTo,
|
|
4
|
-
commandEndEvent,
|
|
5
|
-
type CommandEvent,
|
|
6
|
-
v1ReadyEvent,
|
|
7
|
-
} from '@elementor/editor-v1-adapters';
|
|
8
|
-
|
|
9
|
-
export type ColorScheme = 'auto' | 'dark' | 'light';
|
|
10
|
-
|
|
11
|
-
export type ExtendedWindow = Window & {
|
|
12
|
-
elementor: {
|
|
13
|
-
getPreferences: ( key: 'ui_theme' ) => ColorScheme;
|
|
14
|
-
};
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export function useColorScheme() {
|
|
18
|
-
const [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );
|
|
19
|
-
|
|
20
|
-
useEffect( () => {
|
|
21
|
-
return listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );
|
|
22
|
-
}, [] );
|
|
23
|
-
|
|
24
|
-
useEffect( () => {
|
|
25
|
-
return listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {
|
|
26
|
-
const event = e as CommandEvent< {
|
|
27
|
-
settings: {
|
|
28
|
-
ui_theme?: ColorScheme;
|
|
29
|
-
};
|
|
30
|
-
} >;
|
|
31
|
-
|
|
32
|
-
// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.
|
|
33
|
-
const isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;
|
|
34
|
-
|
|
35
|
-
if ( isColorScheme ) {
|
|
36
|
-
setColorScheme( getV1ColorScheme() );
|
|
37
|
-
}
|
|
38
|
-
} );
|
|
39
|
-
}, [] );
|
|
40
|
-
|
|
41
|
-
return colorScheme;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
function getV1ColorScheme() {
|
|
45
|
-
return ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';
|
|
46
|
-
}
|