@elementor/editor 0.6.1 → 0.7.0
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 +22 -0
- package/dist/index.d.mts +7 -0
- package/dist/index.js +7 -22
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +6 -21
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -3
- package/src/components/__tests__/shell.test.tsx +0 -69
- package/src/components/shell.tsx +0 -2
- package/src/init.tsx +9 -5
- package/src/hooks/use-sync-document-query-params.ts +0 -19
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.7.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor@0.6.2...@elementor/editor@0.7.0) (2023-06-28)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **query:** add support for React Query [ED-11193] ([#62](https://github.com/elementor/elementor-packages/issues/62)) ([d50db2f](https://github.com/elementor/elementor-packages/commit/d50db2f4b310e644ddc154620bef1a850764d9a2))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [0.6.2](https://github.com/elementor/elementor-packages/compare/@elementor/editor@0.6.1...@elementor/editor@0.6.2) (2023-06-25)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* **editor:** document query parameters are not synced properly [ED-11024] ([#54](https://github.com/elementor/elementor-packages/issues/54)) ([4c17080](https://github.com/elementor/elementor-packages/commit/4c17080a7cecec7c807954e9381fb7c840e51ea4))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
## [0.6.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor@0.6.0...@elementor/editor@0.6.1) (2023-06-11)
|
|
7
29
|
|
|
8
30
|
**Note:** Version bump only for package @elementor/editor
|
package/dist/index.d.mts
ADDED
package/dist/index.js
CHANGED
|
@@ -68,26 +68,9 @@ function useSyncDocumentTitle() {
|
|
|
68
68
|
}, [document?.title]);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
// src/hooks/use-sync-document-query-params.ts
|
|
72
|
-
var import_react2 = require("react");
|
|
73
|
-
var import_editor_documents2 = require("@elementor/editor-documents");
|
|
74
|
-
function useSyncDocumentQueryParams() {
|
|
75
|
-
const hostDocument = (0, import_editor_documents2.useHostDocument)();
|
|
76
|
-
(0, import_react2.useEffect)(() => {
|
|
77
|
-
if (!hostDocument?.id) {
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
|
-
const url = new URL(window.location.href);
|
|
81
|
-
url.searchParams.set("post", hostDocument.id.toString());
|
|
82
|
-
url.searchParams.delete("active-document");
|
|
83
|
-
history.replaceState({}, "", url);
|
|
84
|
-
}, [hostDocument?.id]);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
71
|
// src/components/shell.tsx
|
|
88
72
|
function Shell() {
|
|
89
73
|
useSyncDocumentTitle();
|
|
90
|
-
useSyncDocumentQueryParams();
|
|
91
74
|
return /* @__PURE__ */ React.createElement(TopSlot, null);
|
|
92
75
|
}
|
|
93
76
|
|
|
@@ -101,17 +84,17 @@ var React2 = __toESM(require("react"));
|
|
|
101
84
|
var import_ui = require("@elementor/ui");
|
|
102
85
|
|
|
103
86
|
// src/sync/use-color-scheme.ts
|
|
104
|
-
var
|
|
87
|
+
var import_react2 = require("react");
|
|
105
88
|
var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
106
89
|
function useColorScheme() {
|
|
107
|
-
const [colorScheme, setColorScheme] = (0,
|
|
108
|
-
(0,
|
|
90
|
+
const [colorScheme, setColorScheme] = (0, import_react2.useState)(() => getV1ColorScheme());
|
|
91
|
+
(0, import_react2.useEffect)(() => {
|
|
109
92
|
return (0, import_editor_v1_adapters.listenTo)(
|
|
110
93
|
(0, import_editor_v1_adapters.v1ReadyEvent)(),
|
|
111
94
|
() => setColorScheme(getV1ColorScheme())
|
|
112
95
|
);
|
|
113
96
|
}, []);
|
|
114
|
-
(0,
|
|
97
|
+
(0, import_react2.useEffect)(() => {
|
|
115
98
|
return (0, import_editor_v1_adapters.listenTo)(
|
|
116
99
|
(0, import_editor_v1_adapters.commandEndEvent)("document/elements/settings"),
|
|
117
100
|
(e) => {
|
|
@@ -136,10 +119,12 @@ function ThemeProvider({ children }) {
|
|
|
136
119
|
}
|
|
137
120
|
|
|
138
121
|
// src/init.tsx
|
|
122
|
+
var import_query = require("@elementor/query");
|
|
139
123
|
function init(domElement) {
|
|
140
124
|
const store = (0, import_store.createStore)();
|
|
125
|
+
const queryClient = (0, import_query.createQueryClient)();
|
|
141
126
|
(0, import_editor_v1_adapters2.dispatchReadyEvent)();
|
|
142
|
-
render2(/* @__PURE__ */ React3.createElement(import_store.StoreProvider, { store }, /* @__PURE__ */ React3.createElement(import_ui2.DirectionProvider, { rtl: (0, import_i18n2.isRTL)() }, /* @__PURE__ */ React3.createElement(ThemeProvider, null, /* @__PURE__ */ React3.createElement(Shell, null)))), domElement);
|
|
127
|
+
render2(/* @__PURE__ */ React3.createElement(import_store.StoreProvider, { store }, /* @__PURE__ */ React3.createElement(import_query.QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React3.createElement(import_ui2.DirectionProvider, { rtl: (0, import_i18n2.isRTL)() }, /* @__PURE__ */ React3.createElement(ThemeProvider, null, /* @__PURE__ */ React3.createElement(Shell, null))))), domElement);
|
|
143
128
|
}
|
|
144
129
|
function render2(app, domElement) {
|
|
145
130
|
let renderFn;
|
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/hooks/use-sync-document-title.ts","../src/
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/locations.ts","../src/init.tsx","../src/components/shell.tsx","../src/hooks/use-sync-document-title.ts","../src/components/theme-provider.tsx","../src/sync/use-color-scheme.ts"],"sourcesContent":["export { injectIntoTop } from './locations';\nexport { default as init } from './init';\n","import { createLocation } from '@elementor/locations';\n\nexport const {\n\tSlot: TopSlot,\n\tinject: injectIntoTop,\n} = createLocation();\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { JSX } from 'react';\nimport { createRoot } from 'react-dom/client';\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';\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={ 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</QueryClientProvider>\n\t\t</StoreProvider>\n\t), domElement );\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 ( e ) {\n\t\trenderFn = () => {\n\t\t\tReactDOM.render( app, domElement );\n\t\t};\n\t}\n\n\trenderFn();\n}\n","import * as React from 'react';\nimport useSyncDocumentTitle from '../hooks/use-sync-document-title';\nimport { TopSlot } from '../locations';\n\nexport default function Shell() {\n\tuseSyncDocumentTitle();\n\n\treturn (\n\t\t<TopSlot />\n\t);\n}\n","import { useEffect } from 'react';\nimport { useActiveDocument, useHostDocument } from '@elementor/editor-documents';\nimport { __ } from '@wordpress/i18n';\n\nexport default function useSyncDocumentTitle() {\n\tconst activeDocument = useActiveDocument();\n\tconst hostDocument = useHostDocument();\n\n\tconst document = activeDocument && activeDocument.type.value !== 'kit'\n\t\t? activeDocument\n\t\t: hostDocument;\n\n\tuseEffect( () => {\n\t\t// Allow empty string as title.\n\t\tif ( document?.title === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// translators: %s: Document title.\n\t\tconst title = __( 'Edit \"%s\" with Elementor', 'elementor' )\n\t\t\t.replace( '%s', document.title );\n\n\t\twindow.document.title = title;\n\t}, [ document?.title ] );\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,uBAA+B;AAExB,IAAM;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AACT,QAAI,iCAAe;;;ACLnB,IAAAA,SAAuB;AACvB,eAA0B;AAE1B,oBAA2B;AAC3B,IAAAC,eAAsB;;;ACJtB,YAAuB;;;ACAvB,mBAA0B;AAC1B,8BAAmD;AACnD,kBAAmB;AAEJ,SAAR,uBAAwC;AAC9C,QAAM,qBAAiB,2CAAkB;AACzC,QAAM,mBAAe,yCAAgB;AAErC,QAAM,WAAW,kBAAkB,eAAe,KAAK,UAAU,QAC9D,iBACA;AAEH,8BAAW,MAAM;AAEhB,QAAK,UAAU,UAAU,QAAY;AACpC;AAAA,IACD;AAGA,UAAM,YAAQ,gBAAI,4BAA4B,WAAY,EACxD,QAAS,MAAM,SAAS,KAAM;AAEhC,WAAO,SAAS,QAAQ;AAAA,EACzB,GAAG,CAAE,UAAU,KAAM,CAAE;AACxB;;;ADpBe,SAAR,QAAyB;AAC/B,uBAAqB;AAErB,SACC,oCAAC,aAAQ;AAEX;;;ADJA,IAAAC,aAAkC;AAClC,mBAA2C;AAC3C,IAAAC,6BAAmC;;;AGRnC,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;;;AHFA,mBAAuD;AAExC,SAAR,KAAuB,YAA4B;AACzD,QAAM,YAAQ,0BAAY;AAC1B,QAAM,kBAAc,gCAAkB;AAEtC,qDAAmB;AAEnB,EAAAC,QACC,qCAAC,8BAAc,SACd,qCAAC,oCAAoB,QAAS,eAC7B,qCAAC,gCAAkB,SAAM,oBAAM,KAC9B,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,CACD,GACE,UAAW;AACf;AAIA,SAASA,QAAQ,KAAkB,YAAsB;AACxD,MAAI;AAEJ,MAAI;AACH,UAAM,WAAO,0BAAY,UAAW;AAEpC,eAAW,MAAM;AAChB,WAAK,OAAQ,GAAI;AAAA,IAClB;AAAA,EACD,SAAU,GAAR;AACD,eAAW,MAAM;AAChB,MAAS,gBAAQ,KAAK,UAAW;AAAA,IAClC;AAAA,EACD;AAEA,WAAS;AACV;","names":["React","import_i18n","import_ui","import_editor_v1_adapters","React","import_react","ThemeProviderBase","render"]}
|
package/dist/index.mjs
CHANGED
|
@@ -31,26 +31,9 @@ function useSyncDocumentTitle() {
|
|
|
31
31
|
}, [document?.title]);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
// src/hooks/use-sync-document-query-params.ts
|
|
35
|
-
import { useEffect as useEffect2 } from "react";
|
|
36
|
-
import { useHostDocument as useHostDocument2 } from "@elementor/editor-documents";
|
|
37
|
-
function useSyncDocumentQueryParams() {
|
|
38
|
-
const hostDocument = useHostDocument2();
|
|
39
|
-
useEffect2(() => {
|
|
40
|
-
if (!hostDocument?.id) {
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
const url = new URL(window.location.href);
|
|
44
|
-
url.searchParams.set("post", hostDocument.id.toString());
|
|
45
|
-
url.searchParams.delete("active-document");
|
|
46
|
-
history.replaceState({}, "", url);
|
|
47
|
-
}, [hostDocument?.id]);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
34
|
// src/components/shell.tsx
|
|
51
35
|
function Shell() {
|
|
52
36
|
useSyncDocumentTitle();
|
|
53
|
-
useSyncDocumentQueryParams();
|
|
54
37
|
return /* @__PURE__ */ React.createElement(TopSlot, null);
|
|
55
38
|
}
|
|
56
39
|
|
|
@@ -64,17 +47,17 @@ import * as React2 from "react";
|
|
|
64
47
|
import { ThemeProvider as ThemeProviderBase } from "@elementor/ui";
|
|
65
48
|
|
|
66
49
|
// src/sync/use-color-scheme.ts
|
|
67
|
-
import { useEffect as
|
|
50
|
+
import { useEffect as useEffect2, useState } from "react";
|
|
68
51
|
import { commandEndEvent, listenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
|
|
69
52
|
function useColorScheme() {
|
|
70
53
|
const [colorScheme, setColorScheme] = useState(() => getV1ColorScheme());
|
|
71
|
-
|
|
54
|
+
useEffect2(() => {
|
|
72
55
|
return listenTo(
|
|
73
56
|
v1ReadyEvent(),
|
|
74
57
|
() => setColorScheme(getV1ColorScheme())
|
|
75
58
|
);
|
|
76
59
|
}, []);
|
|
77
|
-
|
|
60
|
+
useEffect2(() => {
|
|
78
61
|
return listenTo(
|
|
79
62
|
commandEndEvent("document/elements/settings"),
|
|
80
63
|
(e) => {
|
|
@@ -99,10 +82,12 @@ function ThemeProvider({ children }) {
|
|
|
99
82
|
}
|
|
100
83
|
|
|
101
84
|
// src/init.tsx
|
|
85
|
+
import { createQueryClient, QueryClientProvider } from "@elementor/query";
|
|
102
86
|
function init(domElement) {
|
|
103
87
|
const store = createStore();
|
|
88
|
+
const queryClient = createQueryClient();
|
|
104
89
|
dispatchReadyEvent();
|
|
105
|
-
render2(/* @__PURE__ */ React3.createElement(StoreProvider, { store }, /* @__PURE__ */ React3.createElement(DirectionProvider, { rtl: isRTL() }, /* @__PURE__ */ React3.createElement(ThemeProvider, null, /* @__PURE__ */ React3.createElement(Shell, null)))), domElement);
|
|
90
|
+
render2(/* @__PURE__ */ React3.createElement(StoreProvider, { store }, /* @__PURE__ */ React3.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React3.createElement(DirectionProvider, { rtl: isRTL() }, /* @__PURE__ */ React3.createElement(ThemeProvider, null, /* @__PURE__ */ React3.createElement(Shell, null))))), domElement);
|
|
106
91
|
}
|
|
107
92
|
function render2(app, domElement) {
|
|
108
93
|
let renderFn;
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/locations.ts","../src/init.tsx","../src/components/shell.tsx","../src/hooks/use-sync-document-title.ts","../src/
|
|
1
|
+
{"version":3,"sources":["../src/locations.ts","../src/init.tsx","../src/components/shell.tsx","../src/hooks/use-sync-document-title.ts","../src/components/theme-provider.tsx","../src/sync/use-color-scheme.ts"],"sourcesContent":["import { createLocation } from '@elementor/locations';\n\nexport const {\n\tSlot: TopSlot,\n\tinject: injectIntoTop,\n} = createLocation();\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { JSX } from 'react';\nimport { createRoot } from 'react-dom/client';\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';\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={ 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</QueryClientProvider>\n\t\t</StoreProvider>\n\t), domElement );\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 ( e ) {\n\t\trenderFn = () => {\n\t\t\tReactDOM.render( app, domElement );\n\t\t};\n\t}\n\n\trenderFn();\n}\n","import * as React from 'react';\nimport useSyncDocumentTitle from '../hooks/use-sync-document-title';\nimport { TopSlot } from '../locations';\n\nexport default function Shell() {\n\tuseSyncDocumentTitle();\n\n\treturn (\n\t\t<TopSlot />\n\t);\n}\n","import { useEffect } from 'react';\nimport { useActiveDocument, useHostDocument } from '@elementor/editor-documents';\nimport { __ } from '@wordpress/i18n';\n\nexport default function useSyncDocumentTitle() {\n\tconst activeDocument = useActiveDocument();\n\tconst hostDocument = useHostDocument();\n\n\tconst document = activeDocument && activeDocument.type.value !== 'kit'\n\t\t? activeDocument\n\t\t: hostDocument;\n\n\tuseEffect( () => {\n\t\t// Allow empty string as title.\n\t\tif ( document?.title === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// translators: %s: Document title.\n\t\tconst title = __( 'Edit \"%s\" with Elementor', 'elementor' )\n\t\t\t.replace( '%s', document.title );\n\n\t\twindow.document.title = title;\n\t}, [ document?.title ] );\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,sBAAsB;AAExB,IAAM;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AACT,IAAI,eAAe;;;ACLnB,YAAYA,YAAW;AACvB,YAAY,cAAc;AAE1B,SAAS,kBAAkB;AAC3B,SAAS,aAAa;;;ACJtB,YAAY,WAAW;;;ACAvB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB,uBAAuB;AACnD,SAAS,UAAU;AAEJ,SAAR,uBAAwC;AAC9C,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,eAAe,gBAAgB;AAErC,QAAM,WAAW,kBAAkB,eAAe,KAAK,UAAU,QAC9D,iBACA;AAEH,YAAW,MAAM;AAEhB,QAAK,UAAU,UAAU,QAAY;AACpC;AAAA,IACD;AAGA,UAAM,QAAQ,GAAI,4BAA4B,WAAY,EACxD,QAAS,MAAM,SAAS,KAAM;AAEhC,WAAO,SAAS,QAAQ;AAAA,EACzB,GAAG,CAAE,UAAU,KAAM,CAAE;AACxB;;;ADpBe,SAAR,QAAyB;AAC/B,uBAAqB;AAErB,SACC,oCAAC,aAAQ;AAEX;;;ADJA,SAAS,yBAAyB;AAClC,SAAS,eAAe,mBAAmB;AAC3C,SAAS,0BAA0B;;;AGRnC,YAAYC,YAAW;AACvB,SAAS,iBAAiB,yBAAyB;;;ACDnD,SAAS,aAAAC,YAAW,gBAAgB;AACpC,SAAS,iBAA+B,UAAU,oBAAoB;AAU/D,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,IAAI,SAAuB,MAAM,iBAAiB,CAAE;AAExF,EAAAA,WAAW,MAAM;AAChB,WAAO;AAAA,MACN,aAAa;AAAA,MACb,MAAM,eAAgB,iBAAiB,CAAE;AAAA,IAC1C;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,EAAAA,WAAW,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;;;AHFA,SAAS,mBAAmB,2BAA2B;AAExC,SAAR,KAAuB,YAA4B;AACzD,QAAM,QAAQ,YAAY;AAC1B,QAAM,cAAc,kBAAkB;AAEtC,qBAAmB;AAEnB,EAAAC,QACC,qCAAC,iBAAc,SACd,qCAAC,uBAAoB,QAAS,eAC7B,qCAAC,qBAAkB,KAAM,MAAM,KAC9B,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,CACD,GACE,UAAW;AACf;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,SAAU,GAAR;AACD,eAAW,MAAM;AAChB,MAAS,gBAAQ,KAAK,UAAW;AAAA,IAClC;AAAA,EACD;AAEA,WAAS;AACV;","names":["React","React","useEffect","render"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elementor/editor",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Elementor Team",
|
|
6
6
|
"homepage": "https://elementor.com/",
|
|
@@ -32,9 +32,10 @@
|
|
|
32
32
|
"dev": "tsup --config=../../tsup.dev.ts"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@elementor/editor-documents": "^0.8.
|
|
35
|
+
"@elementor/editor-documents": "^0.8.2",
|
|
36
36
|
"@elementor/editor-v1-adapters": "^0.5.0",
|
|
37
37
|
"@elementor/locations": "^0.6.0",
|
|
38
|
+
"@elementor/query": "^0.1.0",
|
|
38
39
|
"@elementor/store": "^0.6.0",
|
|
39
40
|
"@elementor/ui": "^1.4.50",
|
|
40
41
|
"@wordpress/i18n": "^4.31.0"
|
|
@@ -46,5 +47,5 @@
|
|
|
46
47
|
"elementor": {
|
|
47
48
|
"type": "app"
|
|
48
49
|
},
|
|
49
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "f49a8d92dae1c54284e15b723d2f66e0c473280b"
|
|
50
51
|
}
|
|
@@ -11,30 +11,8 @@ jest.mock( '@elementor/editor-documents', () => ( {
|
|
|
11
11
|
} ) );
|
|
12
12
|
|
|
13
13
|
describe( '@elementor/editor Shell component', () => {
|
|
14
|
-
const originalReplaceState = history.replaceState;
|
|
15
|
-
const originalLocation = window.location;
|
|
16
|
-
|
|
17
14
|
beforeEach( () => {
|
|
18
15
|
jest.resetAllMocks();
|
|
19
|
-
|
|
20
|
-
history.replaceState = jest.fn();
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* @see https://gist.github.com/the0neWhoKnocks/bdac1d09b93b8418d948558f7ab233d7#setting-props-on-windowlocation
|
|
24
|
-
*/
|
|
25
|
-
Object.defineProperty( window, 'location', {
|
|
26
|
-
writable: true,
|
|
27
|
-
value: new URL( 'https://localhost/' ),
|
|
28
|
-
} );
|
|
29
|
-
} );
|
|
30
|
-
|
|
31
|
-
afterAll( () => {
|
|
32
|
-
history.replaceState = originalReplaceState;
|
|
33
|
-
|
|
34
|
-
Object.defineProperty( window, 'location', {
|
|
35
|
-
writable: false,
|
|
36
|
-
value: originalLocation,
|
|
37
|
-
} );
|
|
38
16
|
} );
|
|
39
17
|
|
|
40
18
|
it( 'should render', () => {
|
|
@@ -51,53 +29,6 @@ describe( '@elementor/editor Shell component', () => {
|
|
|
51
29
|
expect( queryByText( 'test' ) ).toBeTruthy();
|
|
52
30
|
} );
|
|
53
31
|
|
|
54
|
-
it( 'should not modify the query params when there is no host document', () => {
|
|
55
|
-
// Arrange.
|
|
56
|
-
jest.mocked( useHostDocument ).mockReturnValue( null );
|
|
57
|
-
|
|
58
|
-
// Act.
|
|
59
|
-
render( <Shell /> );
|
|
60
|
-
|
|
61
|
-
// Assert.
|
|
62
|
-
expect( history.replaceState ).not.toHaveBeenCalled();
|
|
63
|
-
} );
|
|
64
|
-
|
|
65
|
-
it( 'should modify the query params when there is host document', () => {
|
|
66
|
-
// Arrange.
|
|
67
|
-
jest.mocked( useHostDocument ).mockReturnValue( createMockDocument( {
|
|
68
|
-
id: 1,
|
|
69
|
-
} ) );
|
|
70
|
-
|
|
71
|
-
// TS doesn't allow modifying the location object.
|
|
72
|
-
( window as unknown as { location: URL } ).location = new URL( 'https://localhost/?post=2&active-document=3' );
|
|
73
|
-
|
|
74
|
-
// Act.
|
|
75
|
-
const { rerender } = render( <Shell /> );
|
|
76
|
-
|
|
77
|
-
// Assert.
|
|
78
|
-
expect( history.replaceState ).toHaveBeenCalledTimes( 1 );
|
|
79
|
-
expect( history.replaceState ).toHaveBeenCalledWith(
|
|
80
|
-
expect.anything(),
|
|
81
|
-
expect.anything(),
|
|
82
|
-
expect.objectContaining( { href: 'https://localhost/?post=1' } )
|
|
83
|
-
);
|
|
84
|
-
|
|
85
|
-
// Act - rerender with another host document.
|
|
86
|
-
jest.mocked( useHostDocument ).mockReturnValue( createMockDocument( {
|
|
87
|
-
id: 2,
|
|
88
|
-
} ) );
|
|
89
|
-
|
|
90
|
-
rerender( <Shell /> );
|
|
91
|
-
|
|
92
|
-
// Assert.
|
|
93
|
-
expect( history.replaceState ).toHaveBeenCalledTimes( 2 );
|
|
94
|
-
expect( history.replaceState ).toHaveBeenCalledWith(
|
|
95
|
-
expect.anything(),
|
|
96
|
-
expect.anything(),
|
|
97
|
-
expect.objectContaining( { href: 'https://localhost/?post=2' } )
|
|
98
|
-
);
|
|
99
|
-
} );
|
|
100
|
-
|
|
101
32
|
it( 'should set the document title to be the active document', () => {
|
|
102
33
|
// Arrange - set the initial document.
|
|
103
34
|
jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
|
package/src/components/shell.tsx
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import useSyncDocumentTitle from '../hooks/use-sync-document-title';
|
|
3
|
-
import useSyncDocumentQueryParams from '../hooks/use-sync-document-query-params';
|
|
4
3
|
import { TopSlot } from '../locations';
|
|
5
4
|
|
|
6
5
|
export default function Shell() {
|
|
7
6
|
useSyncDocumentTitle();
|
|
8
|
-
useSyncDocumentQueryParams();
|
|
9
7
|
|
|
10
8
|
return (
|
|
11
9
|
<TopSlot />
|
package/src/init.tsx
CHANGED
|
@@ -8,19 +8,23 @@ import { DirectionProvider } from '@elementor/ui';
|
|
|
8
8
|
import { StoreProvider, createStore } from '@elementor/store';
|
|
9
9
|
import { dispatchReadyEvent } from '@elementor/editor-v1-adapters';
|
|
10
10
|
import ThemeProvider from './components/theme-provider';
|
|
11
|
+
import { createQueryClient, QueryClientProvider } from '@elementor/query';
|
|
11
12
|
|
|
12
13
|
export default function init( domElement: Element ): void {
|
|
13
14
|
const store = createStore();
|
|
15
|
+
const queryClient = createQueryClient();
|
|
14
16
|
|
|
15
17
|
dispatchReadyEvent();
|
|
16
18
|
|
|
17
19
|
render( (
|
|
18
20
|
<StoreProvider store={ store }>
|
|
19
|
-
<
|
|
20
|
-
<
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
<QueryClientProvider client={ queryClient }>
|
|
22
|
+
<DirectionProvider rtl={ isRTL() }>
|
|
23
|
+
<ThemeProvider>
|
|
24
|
+
<Shell />
|
|
25
|
+
</ThemeProvider>
|
|
26
|
+
</DirectionProvider>
|
|
27
|
+
</QueryClientProvider>
|
|
24
28
|
</StoreProvider>
|
|
25
29
|
), domElement );
|
|
26
30
|
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
import { useHostDocument } from '@elementor/editor-documents';
|
|
3
|
-
|
|
4
|
-
export default function useSyncDocumentQueryParams() {
|
|
5
|
-
const hostDocument = useHostDocument();
|
|
6
|
-
|
|
7
|
-
useEffect( () => {
|
|
8
|
-
if ( ! hostDocument?.id ) {
|
|
9
|
-
return;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const url = new URL( window.location.href );
|
|
13
|
-
|
|
14
|
-
url.searchParams.set( 'post', hostDocument.id.toString() );
|
|
15
|
-
url.searchParams.delete( 'active-document' );
|
|
16
|
-
|
|
17
|
-
history.replaceState( {}, '', url );
|
|
18
|
-
}, [ hostDocument?.id ] );
|
|
19
|
-
}
|