@elementor/editor 0.9.0 → 0.10.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 +19 -0
- package/README.md +2 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +5 -5
- package/dist/index.mjs.map +1 -1
- package/package.json +7 -6
- package/src/components/__tests__/shell.test.tsx +7 -7
- package/src/hooks/use-sync-document-title.ts +3 -3
- package/src/init.tsx +1 -1
- package/src/sync/use-color-scheme.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
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.10.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor@0.10.0...@elementor/editor@0.10.1) (2023-09-26)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @elementor/editor
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [0.10.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor@0.9.0...@elementor/editor@0.10.0) (2023-09-14)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* **v1-adapters:** mark private functions [ED-12029] ([#122](https://github.com/elementor/elementor-packages/issues/122)) ([2e79ccc](https://github.com/elementor/elementor-packages/commit/2e79ccc87add5f0508b5a142f9f6d832b4657062))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
# [0.9.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor@0.8.1...@elementor/editor@0.9.0) (2023-09-11)
|
|
7
26
|
|
|
8
27
|
|
package/README.md
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
# Editor
|
|
2
2
|
|
|
3
3
|
> [!WARNING]
|
|
4
|
-
>
|
|
4
|
+
> Please refrain from accessing or depending on functions and variables starting with double underscores, as they are subject to change without notice.
|
|
5
|
+
> Naming convention involving double underscores (`__`) as a prefix to indicate that a function or variable is meant for internal use and should not be accessed or relied upon by third-party developers.
|
package/dist/index.js
CHANGED
|
@@ -88,13 +88,13 @@ var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
|
88
88
|
function useColorScheme() {
|
|
89
89
|
const [colorScheme, setColorScheme] = (0, import_react2.useState)(() => getV1ColorScheme());
|
|
90
90
|
(0, import_react2.useEffect)(() => {
|
|
91
|
-
return (0, import_editor_v1_adapters.
|
|
91
|
+
return (0, import_editor_v1_adapters.__privateListenTo)(
|
|
92
92
|
(0, import_editor_v1_adapters.v1ReadyEvent)(),
|
|
93
93
|
() => setColorScheme(getV1ColorScheme())
|
|
94
94
|
);
|
|
95
95
|
}, []);
|
|
96
96
|
(0, import_react2.useEffect)(() => {
|
|
97
|
-
return (0, import_editor_v1_adapters.
|
|
97
|
+
return (0, import_editor_v1_adapters.__privateListenTo)(
|
|
98
98
|
(0, import_editor_v1_adapters.commandEndEvent)("document/elements/settings"),
|
|
99
99
|
(e) => {
|
|
100
100
|
const event = e;
|
|
@@ -122,7 +122,7 @@ var import_query = require("@elementor/query");
|
|
|
122
122
|
function init(domElement) {
|
|
123
123
|
const store = (0, import_store.__createStore)();
|
|
124
124
|
const queryClient = (0, import_query.createQueryClient)();
|
|
125
|
-
(0, import_editor_v1_adapters2.
|
|
125
|
+
(0, import_editor_v1_adapters2.__privateDispatchReadyEvent)();
|
|
126
126
|
render2(/* @__PURE__ */ React3.createElement(import_store.__StoreProvider, { store }, /* @__PURE__ */ React3.createElement(import_query.QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React3.createElement(import_ui2.DirectionProvider, { rtl: window.document.dir === "rtl" }, /* @__PURE__ */ React3.createElement(ThemeProvider, null, /* @__PURE__ */ React3.createElement(Shell, null))))), domElement);
|
|
127
127
|
}
|
|
128
128
|
function render2(app, domElement) {
|
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/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 Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { __StoreProvider as 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={ 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), 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 =
|
|
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 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), 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 as useActiveDocument, __useHostDocument as 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, __privateListenTo as 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;;;ACH3B,YAAuB;;;ACAvB,mBAA0B;AAC1B,8BAA+F;AAC/F,kBAAmB;AAEJ,SAAR,uBAAwC;AAC9C,QAAM,qBAAiB,wBAAAC,qBAAkB;AACzC,QAAM,mBAAe,wBAAAC,mBAAgB;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;;;ADLA,IAAAC,aAAkC;AAClC,mBAAgE;AAChE,IAAAC,6BAAkE;;;AGPlE,IAAAC,SAAuB;AACvB,gBAAmD;;;ACDnD,IAAAC,gBAAoC;AACpC,gCAA2F;AAUpF,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,QAAI,wBAAuB,MAAM,iBAAiB,CAAE;AAExF,+BAAW,MAAM;AAChB,eAAO,0BAAAC;AAAA,UACN,wCAAa;AAAA,MACb,MAAM,eAAgB,iBAAiB,CAAE;AAAA,IAC1C;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,+BAAW,MAAM;AAChB,eAAO,0BAAAA;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;;;AHHA,mBAAuD;AAExC,SAAR,KAAuB,YAA4B;AACzD,QAAM,YAAQ,4BAAc;AAC5B,QAAM,kBAAc,gCAAkB;AAEtC,iCAAAC,6BAAmB;AAEnB,EAAAC,QACC,qCAAC,aAAAC,iBAAA,EAAc,SACd,qCAAC,oCAAoB,QAAS,eAC7B,qCAAC,gCAAkB,KAAM,OAAO,SAAS,QAAQ,SAChD,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,CACD,GACE,UAAW;AACf;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,SAAU,GAAI;AACb,eAAW,MAAM;AAChB,MAAS,gBAAQ,KAAK,UAAW;AAAA,IAClC;AAAA,EACD;AAEA,WAAS;AACV;","names":["React","useActiveDocument","useHostDocument","import_ui","import_editor_v1_adapters","React","import_react","listenTo","ThemeProviderBase","dispatchReadyEvent","render","StoreProvider"]}
|
package/dist/index.mjs
CHANGED
|
@@ -15,11 +15,11 @@ import * as React from "react";
|
|
|
15
15
|
|
|
16
16
|
// src/hooks/use-sync-document-title.ts
|
|
17
17
|
import { useEffect } from "react";
|
|
18
|
-
import { __useActiveDocument, __useHostDocument } from "@elementor/editor-documents";
|
|
18
|
+
import { __useActiveDocument as useActiveDocument, __useHostDocument as useHostDocument } from "@elementor/editor-documents";
|
|
19
19
|
import { __ } from "@wordpress/i18n";
|
|
20
20
|
function useSyncDocumentTitle() {
|
|
21
|
-
const activeDocument =
|
|
22
|
-
const hostDocument =
|
|
21
|
+
const activeDocument = useActiveDocument();
|
|
22
|
+
const hostDocument = useHostDocument();
|
|
23
23
|
const document = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
|
|
24
24
|
useEffect(() => {
|
|
25
25
|
if (document?.title === void 0) {
|
|
@@ -39,7 +39,7 @@ function Shell() {
|
|
|
39
39
|
// src/init.tsx
|
|
40
40
|
import { DirectionProvider } from "@elementor/ui";
|
|
41
41
|
import { __StoreProvider as StoreProvider, __createStore } from "@elementor/store";
|
|
42
|
-
import { dispatchReadyEvent } from "@elementor/editor-v1-adapters";
|
|
42
|
+
import { __privateDispatchReadyEvent as dispatchReadyEvent } from "@elementor/editor-v1-adapters";
|
|
43
43
|
|
|
44
44
|
// src/components/theme-provider.tsx
|
|
45
45
|
import * as React2 from "react";
|
|
@@ -47,7 +47,7 @@ import { ThemeProvider as ThemeProviderBase } from "@elementor/ui";
|
|
|
47
47
|
|
|
48
48
|
// src/sync/use-color-scheme.ts
|
|
49
49
|
import { useEffect as useEffect2, useState } from "react";
|
|
50
|
-
import { commandEndEvent, listenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
|
|
50
|
+
import { commandEndEvent, __privateListenTo as listenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
|
|
51
51
|
function useColorScheme() {
|
|
52
52
|
const [colorScheme, setColorScheme] = useState(() => getV1ColorScheme());
|
|
53
53
|
useEffect2(() => {
|
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/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 Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { __StoreProvider as 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={ 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), 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 =
|
|
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 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), 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 as useActiveDocument, __useHostDocument as 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, __privateListenTo as 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;;;ACH3B,YAAY,WAAW;;;ACAvB,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB,mBAAmB,qBAAqB,uBAAuB;AAC/F,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;;;ADLA,SAAS,yBAAyB;AAClC,SAAS,mBAAmB,eAAe,qBAAqB;AAChE,SAAS,+BAA+B,0BAA0B;;;AGPlE,YAAYC,YAAW;AACvB,SAAS,iBAAiB,yBAAyB;;;ACDnD,SAAS,aAAAC,YAAW,gBAAgB;AACpC,SAAS,iBAA+B,qBAAqB,UAAU,oBAAoB;AAUpF,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;;;AHHA,SAAS,mBAAmB,2BAA2B;AAExC,SAAR,KAAuB,YAA4B;AACzD,QAAM,QAAQ,cAAc;AAC5B,QAAM,cAAc,kBAAkB;AAEtC,qBAAmB;AAEnB,EAAAC,QACC,qCAAC,iBAAc,SACd,qCAAC,uBAAoB,QAAS,eAC7B,qCAAC,qBAAkB,KAAM,OAAO,SAAS,QAAQ,SAChD,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,GAAI;AACb,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,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elementor/editor",
|
|
3
|
-
"
|
|
3
|
+
"description": "The main application for Elementor's editor",
|
|
4
|
+
"version": "0.10.1",
|
|
4
5
|
"private": false,
|
|
5
6
|
"author": "Elementor Team",
|
|
6
7
|
"homepage": "https://elementor.com/",
|
|
@@ -32,10 +33,10 @@
|
|
|
32
33
|
"dev": "tsup --config=../../tsup.dev.ts"
|
|
33
34
|
},
|
|
34
35
|
"dependencies": {
|
|
35
|
-
"@elementor/editor-documents": "^0.
|
|
36
|
-
"@elementor/editor-v1-adapters": "^0.
|
|
37
|
-
"@elementor/locations": "^0.7.
|
|
38
|
-
"@elementor/query": "^0.1.
|
|
36
|
+
"@elementor/editor-documents": "^0.10.0",
|
|
37
|
+
"@elementor/editor-v1-adapters": "^0.6.0",
|
|
38
|
+
"@elementor/locations": "^0.7.1",
|
|
39
|
+
"@elementor/query": "^0.1.2",
|
|
39
40
|
"@elementor/store": "^0.7.0",
|
|
40
41
|
"@elementor/ui": "^1.4.53",
|
|
41
42
|
"@wordpress/i18n": "^4.36.0"
|
|
@@ -47,5 +48,5 @@
|
|
|
47
48
|
"elementor": {
|
|
48
49
|
"type": "app"
|
|
49
50
|
},
|
|
50
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "63057364b22f05d593555c5953b6b18766c21428"
|
|
51
52
|
}
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { render, screen } from '@testing-library/react';
|
|
3
3
|
import Shell from '../shell';
|
|
4
4
|
import { injectIntoTop } from '../../locations';
|
|
5
|
-
import { __useActiveDocument, __useHostDocument } from '@elementor/editor-documents';
|
|
5
|
+
import { __useActiveDocument as useActiveDocument, __useHostDocument as useHostDocument } from '@elementor/editor-documents';
|
|
6
6
|
import { createMockDocument } from 'test-utils';
|
|
7
7
|
|
|
8
8
|
jest.mock( '@elementor/editor-documents', () => ( {
|
|
@@ -31,7 +31,7 @@ describe( '@elementor/editor Shell component', () => {
|
|
|
31
31
|
|
|
32
32
|
it( 'should set the document title to be the active document', () => {
|
|
33
33
|
// Arrange - set the initial document.
|
|
34
|
-
jest.mocked(
|
|
34
|
+
jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
|
|
35
35
|
type: {
|
|
36
36
|
value: 'page',
|
|
37
37
|
label: 'Page',
|
|
@@ -46,7 +46,7 @@ describe( '@elementor/editor Shell component', () => {
|
|
|
46
46
|
expect( window.document.title ).toBe( 'Edit "Initial Document" with Elementor' );
|
|
47
47
|
|
|
48
48
|
// Arrange - set the new document.
|
|
49
|
-
jest.mocked(
|
|
49
|
+
jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
|
|
50
50
|
type: {
|
|
51
51
|
value: 'page',
|
|
52
52
|
label: 'Page',
|
|
@@ -63,7 +63,7 @@ describe( '@elementor/editor Shell component', () => {
|
|
|
63
63
|
|
|
64
64
|
it( 'should use the host document title when the active document is a kit', () => {
|
|
65
65
|
// Arrange.
|
|
66
|
-
jest.mocked(
|
|
66
|
+
jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
|
|
67
67
|
type: {
|
|
68
68
|
value: 'kit',
|
|
69
69
|
label: 'Kit',
|
|
@@ -71,7 +71,7 @@ describe( '@elementor/editor Shell component', () => {
|
|
|
71
71
|
title: 'My Kit',
|
|
72
72
|
} ) );
|
|
73
73
|
|
|
74
|
-
jest.mocked(
|
|
74
|
+
jest.mocked( useHostDocument ).mockReturnValue( createMockDocument( {
|
|
75
75
|
type: {
|
|
76
76
|
value: 'page',
|
|
77
77
|
label: 'Page',
|
|
@@ -90,7 +90,7 @@ describe( '@elementor/editor Shell component', () => {
|
|
|
90
90
|
|
|
91
91
|
it( 'should not modify the title when there is no active document', () => {
|
|
92
92
|
// Arrange.
|
|
93
|
-
jest.mocked(
|
|
93
|
+
jest.mocked( useActiveDocument ).mockReturnValue( null );
|
|
94
94
|
|
|
95
95
|
window.document.title = 'Old title';
|
|
96
96
|
|
|
@@ -103,7 +103,7 @@ describe( '@elementor/editor Shell component', () => {
|
|
|
103
103
|
|
|
104
104
|
it( 'should allow empty string as title', () => {
|
|
105
105
|
// Arrange.
|
|
106
|
-
jest.mocked(
|
|
106
|
+
jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
|
|
107
107
|
title: '',
|
|
108
108
|
} ) );
|
|
109
109
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
|
-
import { __useActiveDocument, __useHostDocument } from '@elementor/editor-documents';
|
|
2
|
+
import { __useActiveDocument as useActiveDocument, __useHostDocument as useHostDocument } from '@elementor/editor-documents';
|
|
3
3
|
import { __ } from '@wordpress/i18n';
|
|
4
4
|
|
|
5
5
|
export default function useSyncDocumentTitle() {
|
|
6
|
-
const activeDocument =
|
|
7
|
-
const hostDocument =
|
|
6
|
+
const activeDocument = useActiveDocument();
|
|
7
|
+
const hostDocument = useHostDocument();
|
|
8
8
|
|
|
9
9
|
const document = activeDocument && activeDocument.type.value !== 'kit'
|
|
10
10
|
? activeDocument
|
package/src/init.tsx
CHANGED
|
@@ -5,7 +5,7 @@ import { createRoot } from 'react-dom/client';
|
|
|
5
5
|
import Shell from './components/shell';
|
|
6
6
|
import { DirectionProvider } from '@elementor/ui';
|
|
7
7
|
import { __StoreProvider as StoreProvider, __createStore } from '@elementor/store';
|
|
8
|
-
import { dispatchReadyEvent } from '@elementor/editor-v1-adapters';
|
|
8
|
+
import { __privateDispatchReadyEvent as dispatchReadyEvent } from '@elementor/editor-v1-adapters';
|
|
9
9
|
import ThemeProvider from './components/theme-provider';
|
|
10
10
|
import { createQueryClient, QueryClientProvider } from '@elementor/query';
|
|
11
11
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useEffect, useState } from 'react';
|
|
2
|
-
import { commandEndEvent, CommandEvent, listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';
|
|
2
|
+
import { commandEndEvent, CommandEvent, __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';
|
|
3
3
|
|
|
4
4
|
export type ColorScheme = 'auto' | 'dark' | 'light';
|
|
5
5
|
|