@elementor/editor 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,41 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.3.0 (2023-05-21)
+
+
+### Features
+
+* **editor-site-navigation:** change post without refresh [ED-10713] ([#39](https://github.com/elementor/elementor-packages/issues/39)) ([b72e82f](https://github.com/elementor/elementor-packages/commit/b72e82f9adb9c1237300cbf603f33f268f9f0400))
+* **locations:** change api to support props for slots [ED-10730] ([#38](https://github.com/elementor/elementor-packages/issues/38)) ([44bec3c](https://github.com/elementor/elementor-packages/commit/44bec3cda1020037ba7105c6f05ce4baa8e3b376))
+
+
+
+## 0.2.1 (2023-05-11)
+
+
+### Bug Fixes
+
+* **editor-app-bar:** make save options button disabled in site-settings [ED-10221] ([#30](https://github.com/elementor/elementor-packages/issues/30)) ([1991096](https://github.com/elementor/elementor-packages/commit/1991096115efeae7bc3648e4889899b85d7328d6))
+
+
+
+# 0.2.0 (2023-05-09)
+
+
+### Features
+
+* **env:** support consuming environment variables in packages [ED-10161] ([#26](https://github.com/elementor/elementor-packages/issues/26)) ([dd811ff](https://github.com/elementor/elementor-packages/commit/dd811ff71e43bf998ee07c6e1f380a379874a7fd))
+
+
+
+
+
+## [0.2.1](https://github.com/elementor/elementor-packages/compare/v0.2.0...v0.2.1) (2023-05-11)
+
+
+### Bug Fixes
+
+* **editor-app-bar:** make save options button disabled in site-settings [ED-10221] ([#30](https://github.com/elementor/elementor-packages/issues/30)) ([1991096](https://github.com/elementor/elementor-packages/commit/1991096115efeae7bc3648e4889899b85d7328d6))

package/dist/index.d.ts

@@ -1,11 +1,6 @@
 import * as _elementor_locations from '@elementor/locations';
 
-declare const injectIntoTop: ({ filler, name, options }: Omit<{
-    location: string;
-    filler: _elementor_locations.Filler;
-    name: string;
-    options?: _elementor_locations.InjectionOptions | undefined;
-}, "location">) => void;
+declare const injectIntoTop: (args: _elementor_locations.InjectArgs<_elementor_locations.EmptyObject>) => void;
 
 declare function init(domElement: Element): void;
 

package/dist/index.js

@@ -37,19 +37,57 @@ module.exports = __toCommonJS(src_exports);
 
 // src/locations.ts
 var import_locations = require("@elementor/locations");
-var LOCATION_TOP = "editor/top";
-var injectIntoTop = (0, import_locations.createInjectorFor)(LOCATION_TOP);
+var {
+  Slot: TopSlot,
+  inject: injectIntoTop
+} = (0, import_locations.createLocation)();
 
 // src/init.tsx
 var React3 = __toESM(require("react"));
 var ReactDOM = __toESM(require("react-dom"));
-var import_i18n = require("@wordpress/i18n");
+var import_i18n2 = require("@wordpress/i18n");
 
 // src/components/shell.tsx
 var React = __toESM(require("react"));
-var import_locations2 = require("@elementor/locations");
+
+// src/hooks/use-sync-document-title.ts
+var import_react = require("react");
+var import_editor_documents = require("@elementor/editor-documents");
+var import_i18n = require("@wordpress/i18n");
+function useSyncDocumentTitle() {
+  const activeDocument = (0, import_editor_documents.useActiveDocument)();
+  const hostDocument = (0, import_editor_documents.useHostDocument)();
+  const document = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
+  (0, import_react.useEffect)(() => {
+    if (!document?.title) {
+      return;
+    }
+    const title = (0, import_i18n.__)('Edit "%s" with Elementor', "elementor").replace("%s", document.title);
+    window.document.title = title;
+  }, [document?.title]);
+}
+
+// src/hooks/use-sync-document-query-params.ts
+var import_react2 = require("react");
+var import_editor_documents2 = require("@elementor/editor-documents");
+function useSyncDocumentQueryParams() {
+  const hostDocument = (0, import_editor_documents2.useHostDocument)();
+  (0, import_react2.useEffect)(() => {
+    if (!hostDocument?.id) {
+      return;
+    }
+    const url = new URL(window.location.href);
+    url.searchParams.set("post", hostDocument.id.toString());
+    url.searchParams.delete("active-document");
+    history.replaceState({}, "", url);
+  }, [hostDocument?.id]);
+}
+
+// src/components/shell.tsx
 function Shell() {
-  return /* @__PURE__ */ React.createElement(import_locations2.Slot, { location: LOCATION_TOP });
+  useSyncDocumentTitle();
+  useSyncDocumentQueryParams();
+  return /* @__PURE__ */ React.createElement(TopSlot, null);
 }
 
 // src/init.tsx
@@ -62,17 +100,17 @@ var React2 = __toESM(require("react"));
 var import_ui = require("@elementor/ui");
 
 // src/sync/use-color-scheme.ts
-var import_react = require("react");
+var import_react3 = require("react");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 function useColorScheme() {
-  const [colorScheme, setColorScheme] = (0, import_react.useState)(() => getV1ColorScheme());
-  (0, import_react.useEffect)(() => {
+  const [colorScheme, setColorScheme] = (0, import_react3.useState)(() => getV1ColorScheme());
+  (0, import_react3.useEffect)(() => {
     return (0, import_editor_v1_adapters.listenTo)(
       (0, import_editor_v1_adapters.v1ReadyEvent)(),
       () => setColorScheme(getV1ColorScheme())
     );
   }, []);
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     return (0, import_editor_v1_adapters.listenTo)(
       (0, import_editor_v1_adapters.commandEndEvent)("document/elements/settings"),
       (e) => {
@@ -100,7 +138,7 @@ function ThemeProvider({ children }) {
 function init(domElement) {
   const store = (0, import_store.createStore)();
   (0, import_editor_v1_adapters2.dispatchReadyEvent)();
-  ReactDOM.render(/* @__PURE__ */ React3.createElement(import_store.StoreProvider, { store }, /* @__PURE__ */ React3.createElement(import_ui2.DirectionProvider, { rtl: (0, import_i18n.isRTL)() }, /* @__PURE__ */ React3.createElement(ThemeProvider, null, /* @__PURE__ */ React3.createElement(Shell, null)))), domElement);
+  ReactDOM.render(/* @__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);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.js.map

@@ -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 } from './locations';\nexport { default as init } from './init';\n","import { createInjectorFor } from '@elementor/locations';\n\nexport const LOCATION_TOP = 'editor/top';\n\nexport const injectIntoTop = createInjectorFor( LOCATION_TOP );\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { isRTL } from '@wordpress/i18n';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { StoreProvider, createStore } from '@elementor/store';\nimport { dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element ): void {\n\tconst store = createStore();\n\n\tdispatchReadyEvent();\n\n\tReactDOM.render( (\n\t\t<StoreProvider store={ store }>\n\t\t\t<DirectionProvider rtl={ isRTL() }>\n\t\t\t\t<ThemeProvider>\n\t\t\t\t\t<Shell />\n\t\t\t\t</ThemeProvider>\n\t\t\t</DirectionProvider>\n\t\t</StoreProvider>\n\t), domElement );\n}\n","import * as React from 'react';\nimport { Slot } from '@elementor/locations';\nimport { LOCATION_TOP } from '../locations';\n\nexport default function Shell() {\n\treturn (\n\t\t<Slot location={ LOCATION_TOP } />\n\t);\n}\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase } from '@elementor/ui';\nimport { useColorScheme } from '../sync/use-color-scheme';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport { commandEndEvent, CommandEvent, listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme,\n\t}\n}\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState<ColorScheme>( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tv1ReadyEvent(),\n\t\t\t() => setColorScheme( getV1ColorScheme() )\n\t\t);\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t\t( e ) => {\n\t\t\t\tconst event = e as CommandEvent<{\n\t\t\t\t\tsettings: {\n\t\t\t\t\t\tui_theme?: ColorScheme,\n\t\t\t\t\t},\n\t\t\t\t}>;\n\n\t\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\t\tif ( isColorScheme ) {\n\t\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,uBAAkC;AAE3B,IAAM,eAAe;AAErB,IAAM,oBAAgB,oCAAmB,YAAa;;;ACJ7D,IAAAA,SAAuB;AACvB,eAA0B;AAC1B,kBAAsB;;;ACFtB,YAAuB;AACvB,IAAAC,oBAAqB;AAGN,SAAR,QAAyB;AAC/B,SACC,oCAAC,0BAAK,UAAW,cAAe;AAElC;;;ADJA,IAAAC,aAAkC;AAClC,mBAA2C;AAC3C,IAAAC,6BAAmC;;;AENnC,IAAAC,SAAuB;AACvB,gBAAmD;;;ACDnD,mBAAoC;AACpC,gCAAsE;AAU/D,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,QAAI,uBAAuB,MAAM,iBAAiB,CAAE;AAExF,8BAAW,MAAM;AAChB,eAAO;AAAA,UACN,wCAAa;AAAA,MACb,MAAM,eAAgB,iBAAiB,CAAE;AAAA,IAC1C;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,8BAAW,MAAM;AAChB,eAAO;AAAA,UACN,2CAAiB,4BAA6B;AAAA,MAC9C,CAAE,MAAO;AACR,cAAM,QAAQ;AAOd,cAAM,gBAAgB,MAAM,MAAM,YAAY,cAAc,MAAM,KAAK;AAEvE,YAAK,eAAgB;AACpB,yBAAgB,iBAAiB,CAAE;AAAA,QACpC;AAAA,MACD;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;AAEA,SAAS,mBAAmB;AAC3B,SAAS,OAAsC,WAAW,iBAAkB,UAAW,KAAK;AAC7F;;;AD1Ce,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SACC,qCAAC,UAAAC,eAAA,EAAkB,eAChB,QACH;AAEF;;;AFHe,SAAR,KAAuB,YAA4B;AACzD,QAAM,YAAQ,0BAAY;AAE1B,qDAAmB;AAEnB,EAAS,gBACR,qCAAC,8BAAc,SACd,qCAAC,gCAAkB,SAAM,mBAAM,KAC9B,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,GACE,UAAW;AACf;","names":["React","import_locations","import_ui","import_editor_v1_adapters","React","ThemeProviderBase"]}
+{"version":3,"sources":["../src/index.ts","../src/locations.ts","../src/init.tsx","../src/components/shell.tsx","../src/hooks/use-sync-document-title.ts","../src/hooks/use-sync-document-query-params.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 { isRTL } from '@wordpress/i18n';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { StoreProvider, createStore } from '@elementor/store';\nimport { dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element ): void {\n\tconst store = createStore();\n\n\tdispatchReadyEvent();\n\n\tReactDOM.render( (\n\t\t<StoreProvider store={ store }>\n\t\t\t<DirectionProvider rtl={ isRTL() }>\n\t\t\t\t<ThemeProvider>\n\t\t\t\t\t<Shell />\n\t\t\t\t</ThemeProvider>\n\t\t\t</DirectionProvider>\n\t\t</StoreProvider>\n\t), domElement );\n}\n","import * as React from 'react';\nimport useSyncDocumentTitle from '../hooks/use-sync-document-title';\nimport useSyncDocumentQueryParams from '../hooks/use-sync-document-query-params';\nimport { TopSlot } from '../locations';\n\nexport default function Shell() {\n\tuseSyncDocumentTitle();\n\tuseSyncDocumentQueryParams();\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\tif ( ! document?.title ) {\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 { useEffect } from 'react';\nimport { useHostDocument } from '@elementor/editor-documents';\n\nexport default function useSyncDocumentQueryParams() {\n\tconst hostDocument = useHostDocument();\n\n\tuseEffect( () => {\n\t\tif ( ! hostDocument?.id ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst url = new URL( window.location.href );\n\n\t\turl.searchParams.set( 'post', hostDocument.id.toString() );\n\t\turl.searchParams.delete( 'active-document' );\n\n\t\thistory.replaceState( {}, '', url );\n\t}, [ hostDocument?.id ] );\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;AAC1B,IAAAC,eAAsB;;;ACFtB,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;AAChB,QAAK,CAAE,UAAU,OAAQ;AACxB;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;;;ACvBA,IAAAC,gBAA0B;AAC1B,IAAAC,2BAAgC;AAEjB,SAAR,6BAA8C;AACpD,QAAM,mBAAe,0CAAgB;AAErC,+BAAW,MAAM;AAChB,QAAK,CAAE,cAAc,IAAK;AACzB;AAAA,IACD;AAEA,UAAM,MAAM,IAAI,IAAK,OAAO,SAAS,IAAK;AAE1C,QAAI,aAAa,IAAK,QAAQ,aAAa,GAAG,SAAS,CAAE;AACzD,QAAI,aAAa,OAAQ,iBAAkB;AAE3C,YAAQ,aAAc,CAAC,GAAG,IAAI,GAAI;AAAA,EACnC,GAAG,CAAE,cAAc,EAAG,CAAE;AACzB;;;AFbe,SAAR,QAAyB;AAC/B,uBAAqB;AACrB,6BAA2B;AAE3B,SACC,oCAAC,aAAQ;AAEX;;;ADRA,IAAAC,aAAkC;AAClC,mBAA2C;AAC3C,IAAAC,6BAAmC;;;AINnC,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;;;AJHe,SAAR,KAAuB,YAA4B;AACzD,QAAM,YAAQ,0BAAY;AAE1B,qDAAmB;AAEnB,EAAS,gBACR,qCAAC,8BAAc,SACd,qCAAC,gCAAkB,SAAM,oBAAM,KAC9B,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,GACE,UAAW;AACf;","names":["React","import_i18n","import_react","import_editor_documents","import_ui","import_editor_v1_adapters","React","import_react","ThemeProviderBase"]}

package/dist/index.mjs

@@ -1,7 +1,9 @@
 // src/locations.ts
-import { createInjectorFor } from "@elementor/locations";
-var LOCATION_TOP = "editor/top";
-var injectIntoTop = createInjectorFor(LOCATION_TOP);
+import { createLocation } from "@elementor/locations";
+var {
+  Slot: TopSlot,
+  inject: injectIntoTop
+} = createLocation();
 
 // src/init.tsx
 import * as React3 from "react";
@@ -10,9 +12,45 @@ import { isRTL } from "@wordpress/i18n";
 
 // src/components/shell.tsx
 import * as React from "react";
-import { Slot } from "@elementor/locations";
+
+// src/hooks/use-sync-document-title.ts
+import { useEffect } from "react";
+import { useActiveDocument, useHostDocument } from "@elementor/editor-documents";
+import { __ } from "@wordpress/i18n";
+function useSyncDocumentTitle() {
+  const activeDocument = useActiveDocument();
+  const hostDocument = useHostDocument();
+  const document = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
+  useEffect(() => {
+    if (!document?.title) {
+      return;
+    }
+    const title = __('Edit "%s" with Elementor', "elementor").replace("%s", document.title);
+    window.document.title = title;
+  }, [document?.title]);
+}
+
+// src/hooks/use-sync-document-query-params.ts
+import { useEffect as useEffect2 } from "react";
+import { useHostDocument as useHostDocument2 } from "@elementor/editor-documents";
+function useSyncDocumentQueryParams() {
+  const hostDocument = useHostDocument2();
+  useEffect2(() => {
+    if (!hostDocument?.id) {
+      return;
+    }
+    const url = new URL(window.location.href);
+    url.searchParams.set("post", hostDocument.id.toString());
+    url.searchParams.delete("active-document");
+    history.replaceState({}, "", url);
+  }, [hostDocument?.id]);
+}
+
+// src/components/shell.tsx
 function Shell() {
-  return /* @__PURE__ */ React.createElement(Slot, { location: LOCATION_TOP });
+  useSyncDocumentTitle();
+  useSyncDocumentQueryParams();
+  return /* @__PURE__ */ React.createElement(TopSlot, null);
 }
 
 // src/init.tsx
@@ -25,17 +63,17 @@ import * as React2 from "react";
 import { ThemeProvider as ThemeProviderBase } from "@elementor/ui";
 
 // src/sync/use-color-scheme.ts
-import { useEffect, useState } from "react";
+import { useEffect as useEffect3, useState } from "react";
 import { commandEndEvent, listenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 function useColorScheme() {
   const [colorScheme, setColorScheme] = useState(() => getV1ColorScheme());
-  useEffect(() => {
+  useEffect3(() => {
     return listenTo(
       v1ReadyEvent(),
       () => setColorScheme(getV1ColorScheme())
     );
   }, []);
-  useEffect(() => {
+  useEffect3(() => {
     return listenTo(
       commandEndEvent("document/elements/settings"),
       (e) => {

package/dist/index.mjs.map

@@ -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 { createInjectorFor } from '@elementor/locations';\n\nexport const LOCATION_TOP = 'editor/top';\n\nexport const injectIntoTop = createInjectorFor( LOCATION_TOP );\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { isRTL } from '@wordpress/i18n';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { StoreProvider, createStore } from '@elementor/store';\nimport { dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element ): void {\n\tconst store = createStore();\n\n\tdispatchReadyEvent();\n\n\tReactDOM.render( (\n\t\t<StoreProvider store={ store }>\n\t\t\t<DirectionProvider rtl={ isRTL() }>\n\t\t\t\t<ThemeProvider>\n\t\t\t\t\t<Shell />\n\t\t\t\t</ThemeProvider>\n\t\t\t</DirectionProvider>\n\t\t</StoreProvider>\n\t), domElement );\n}\n","import * as React from 'react';\nimport { Slot } from '@elementor/locations';\nimport { LOCATION_TOP } from '../locations';\n\nexport default function Shell() {\n\treturn (\n\t\t<Slot location={ LOCATION_TOP } />\n\t);\n}\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase } from '@elementor/ui';\nimport { useColorScheme } from '../sync/use-color-scheme';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport { commandEndEvent, CommandEvent, listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme,\n\t}\n}\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState<ColorScheme>( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tv1ReadyEvent(),\n\t\t\t() => setColorScheme( getV1ColorScheme() )\n\t\t);\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo(\n\t\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t\t( e ) => {\n\t\t\t\tconst event = e as CommandEvent<{\n\t\t\t\t\tsettings: {\n\t\t\t\t\t\tui_theme?: ColorScheme,\n\t\t\t\t\t},\n\t\t\t\t}>;\n\n\t\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\t\tif ( isColorScheme ) {\n\t\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n"],"mappings":";AAAA,SAAS,yBAAyB;AAE3B,IAAM,eAAe;AAErB,IAAM,gBAAgB,kBAAmB,YAAa;;;ACJ7D,YAAYA,YAAW;AACvB,YAAY,cAAc;AAC1B,SAAS,aAAa;;;ACFtB,YAAY,WAAW;AACvB,SAAS,YAAY;AAGN,SAAR,QAAyB;AAC/B,SACC,oCAAC,QAAK,UAAW,cAAe;AAElC;;;ADJA,SAAS,yBAAyB;AAClC,SAAS,eAAe,mBAAmB;AAC3C,SAAS,0BAA0B;;;AENnC,YAAYC,YAAW;AACvB,SAAS,iBAAiB,yBAAyB;;;ACDnD,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAA+B,UAAU,oBAAoB;AAU/D,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,IAAI,SAAuB,MAAM,iBAAiB,CAAE;AAExF,YAAW,MAAM;AAChB,WAAO;AAAA,MACN,aAAa;AAAA,MACb,MAAM,eAAgB,iBAAiB,CAAE;AAAA,IAC1C;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,YAAW,MAAM;AAChB,WAAO;AAAA,MACN,gBAAiB,4BAA6B;AAAA,MAC9C,CAAE,MAAO;AACR,cAAM,QAAQ;AAOd,cAAM,gBAAgB,MAAM,MAAM,YAAY,cAAc,MAAM,KAAK;AAEvE,YAAK,eAAgB;AACpB,yBAAgB,iBAAiB,CAAE;AAAA,QACpC;AAAA,MACD;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;AAEA,SAAS,mBAAmB;AAC3B,SAAS,OAAsC,WAAW,iBAAkB,UAAW,KAAK;AAC7F;;;AD1Ce,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SACC,qCAAC,qBAAkB,eAChB,QACH;AAEF;;;AFHe,SAAR,KAAuB,YAA4B;AACzD,QAAM,QAAQ,YAAY;AAE1B,qBAAmB;AAEnB,EAAS,gBACR,qCAAC,iBAAc,SACd,qCAAC,qBAAkB,KAAM,MAAM,KAC9B,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,GACE,UAAW;AACf;","names":["React","React"]}
+{"version":3,"sources":["../src/locations.ts","../src/init.tsx","../src/components/shell.tsx","../src/hooks/use-sync-document-title.ts","../src/hooks/use-sync-document-query-params.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 { isRTL } from '@wordpress/i18n';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { StoreProvider, createStore } from '@elementor/store';\nimport { dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element ): void {\n\tconst store = createStore();\n\n\tdispatchReadyEvent();\n\n\tReactDOM.render( (\n\t\t<StoreProvider store={ store }>\n\t\t\t<DirectionProvider rtl={ isRTL() }>\n\t\t\t\t<ThemeProvider>\n\t\t\t\t\t<Shell />\n\t\t\t\t</ThemeProvider>\n\t\t\t</DirectionProvider>\n\t\t</StoreProvider>\n\t), domElement );\n}\n","import * as React from 'react';\nimport useSyncDocumentTitle from '../hooks/use-sync-document-title';\nimport useSyncDocumentQueryParams from '../hooks/use-sync-document-query-params';\nimport { TopSlot } from '../locations';\n\nexport default function Shell() {\n\tuseSyncDocumentTitle();\n\tuseSyncDocumentQueryParams();\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\tif ( ! document?.title ) {\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 { useEffect } from 'react';\nimport { useHostDocument } from '@elementor/editor-documents';\n\nexport default function useSyncDocumentQueryParams() {\n\tconst hostDocument = useHostDocument();\n\n\tuseEffect( () => {\n\t\tif ( ! hostDocument?.id ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst url = new URL( window.location.href );\n\n\t\turl.searchParams.set( 'post', hostDocument.id.toString() );\n\t\turl.searchParams.delete( 'active-document' );\n\n\t\thistory.replaceState( {}, '', url );\n\t}, [ hostDocument?.id ] );\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;AAC1B,SAAS,aAAa;;;ACFtB,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;AAChB,QAAK,CAAE,UAAU,OAAQ;AACxB;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;;;ACvBA,SAAS,aAAAC,kBAAiB;AAC1B,SAAS,mBAAAC,wBAAuB;AAEjB,SAAR,6BAA8C;AACpD,QAAM,eAAeA,iBAAgB;AAErC,EAAAD,WAAW,MAAM;AAChB,QAAK,CAAE,cAAc,IAAK;AACzB;AAAA,IACD;AAEA,UAAM,MAAM,IAAI,IAAK,OAAO,SAAS,IAAK;AAE1C,QAAI,aAAa,IAAK,QAAQ,aAAa,GAAG,SAAS,CAAE;AACzD,QAAI,aAAa,OAAQ,iBAAkB;AAE3C,YAAQ,aAAc,CAAC,GAAG,IAAI,GAAI;AAAA,EACnC,GAAG,CAAE,cAAc,EAAG,CAAE;AACzB;;;AFbe,SAAR,QAAyB;AAC/B,uBAAqB;AACrB,6BAA2B;AAE3B,SACC,oCAAC,aAAQ;AAEX;;;ADRA,SAAS,yBAAyB;AAClC,SAAS,eAAe,mBAAmB;AAC3C,SAAS,0BAA0B;;;AINnC,YAAYE,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;;;AJHe,SAAR,KAAuB,YAA4B;AACzD,QAAM,QAAQ,YAAY;AAE1B,qBAAmB;AAEnB,EAAS,gBACR,qCAAC,iBAAc,SACd,qCAAC,qBAAkB,KAAM,MAAM,KAC9B,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,GACE,UAAW;AACf;","names":["React","useEffect","useHostDocument","React","useEffect"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -32,10 +32,11 @@
 		"dev": "tsup --config=../../tsup.dev.ts"
 	},
 	"dependencies": {
+		"@elementor/editor-documents": "^0.4.0",
 		"@elementor/editor-v1-adapters": "^0.2.0",
-		"@elementor/locations": "^0.2.0",
+		"@elementor/locations": "^0.3.0",
 		"@elementor/store": "^0.2.0",
-		"@elementor/ui": "^1.4.47",
+		"@elementor/ui": "^1.4.50",
 		"@wordpress/i18n": "^4.31.0"
 	},
 	"peerDependencies": {
@@ -45,5 +46,5 @@
 	"elementor": {
 		"type": "app"
 	},
-	"gitHead": "f93a1ed5350b151f17d65b21b0b43398774dccc5"
+	"gitHead": "45afd449fda346eea0f8a431ebca7d6c1d518dd1"
 }

package/src/components/__tests__/shell.test.tsx

@@ -2,12 +2,45 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 import Shell from '../shell';
 import { injectIntoTop } from '../../locations';
+import { useActiveDocument, useHostDocument } from '@elementor/editor-documents';
+import { createMockDocument } from 'test-utils';
+
+jest.mock( '@elementor/editor-documents', () => ( {
+	useActiveDocument: jest.fn(),
+	useHostDocument: jest.fn(),
+} ) );
 
 describe( '@elementor/editor Shell component', () => {
+	const originalReplaceState = history.replaceState;
+	const originalLocation = window.location;
+
+	beforeEach( () => {
+		jest.resetAllMocks();
+
+		history.replaceState = jest.fn();
+
+		/**
+		 * @see https://gist.github.com/the0neWhoKnocks/bdac1d09b93b8418d948558f7ab233d7#setting-props-on-windowlocation
+		 */
+		Object.defineProperty( window, 'location', {
+			writable: true,
+			value: new URL( 'https://localhost/' ),
+		} );
+	} );
+
+	afterAll( () => {
+		history.replaceState = originalReplaceState;
+
+		Object.defineProperty( window, 'location', {
+			writable: false,
+			value: originalLocation,
+		} );
+	} );
+
 	it( 'should render', () => {
 		// Arrange.
 		injectIntoTop( {
-			name: 'test',
+			id: 'test',
 			filler: () => <div>test</div>,
 		} );
 
@@ -17,4 +50,123 @@ describe( '@elementor/editor Shell component', () => {
 		// Assert.
 		expect( queryByText( 'test' ) ).toBeTruthy();
 	} );
+
+	it( 'should not modify the query params when there is no host document', () => {
+		// Arrange.
+		jest.mocked( useHostDocument ).mockReturnValue( null );
+
+		// Act.
+		render( <Shell /> );
+
+		// Assert.
+		expect( history.replaceState ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should modify the query params when there is host document', () => {
+		// Arrange.
+		jest.mocked( useHostDocument ).mockReturnValue( createMockDocument( {
+			id: 1,
+		} ) );
+
+		// TS doesn't allow modifying the location object.
+		( window as unknown as { location: URL } ).location = new URL( 'https://localhost/?post=2&active-document=3' );
+
+		// Act.
+		const { rerender } = render( <Shell /> );
+
+		// Assert.
+		expect( history.replaceState ).toHaveBeenCalledTimes( 1 );
+		expect( history.replaceState ).toHaveBeenCalledWith(
+			expect.anything(),
+			expect.anything(),
+			expect.objectContaining( { href: 'https://localhost/?post=1' } )
+		);
+
+		// Act - rerender with another host document.
+		jest.mocked( useHostDocument ).mockReturnValue( createMockDocument( {
+			id: 2,
+		} ) );
+
+		rerender( <Shell /> );
+
+		// Assert.
+		expect( history.replaceState ).toHaveBeenCalledTimes( 2 );
+		expect( history.replaceState ).toHaveBeenCalledWith(
+			expect.anything(),
+			expect.anything(),
+			expect.objectContaining( { href: 'https://localhost/?post=2' } )
+		);
+	} );
+
+	it( 'should set the document title to be the active document', () => {
+		// Arrange - set the initial document.
+		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
+			type: {
+				value: 'page',
+				label: 'Page',
+			},
+			title: 'Initial Document',
+		} ) );
+
+		// Act.
+		const { rerender } = render( <Shell /> );
+
+		// Assert.
+		expect( window.document.title ).toBe( 'Edit "Initial Document" with Elementor' );
+
+		// Arrange - set the new document.
+		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
+			type: {
+				value: 'page',
+				label: 'Page',
+			},
+			title: 'New Document',
+		} ) );
+
+		// Act.
+		rerender( <Shell /> );
+
+		// Assert.
+		expect( window.document.title ).toBe( 'Edit "New Document" with Elementor' );
+	} );
+
+	it( 'should use the host document title when the active document is a kit', () => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
+			type: {
+				value: 'kit',
+				label: 'Kit',
+			},
+			title: 'My Kit',
+		} ) );
+
+		jest.mocked( useHostDocument ).mockReturnValue( createMockDocument( {
+			type: {
+				value: 'page',
+				label: 'Page',
+			},
+			title: 'My Page',
+		} ) );
+
+		window.document.title = 'Old title';
+
+		// Act.
+		render( <Shell /> );
+
+		// Assert.
+		expect( window.document.title ).toBe( 'Edit "My Page" with Elementor' );
+	} );
+
+	it( 'should not modify the title when there is no active document', () => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockReturnValue( null );
+
+		window.document.title = 'Old title';
+
+		// Act.
+		render( <Shell /> );
+
+		// Assert.
+		expect( window.document.title ).toBe( 'Old title' );
+	} );
 } );

package/src/components/shell.tsx

@@ -1,9 +1,13 @@
 import * as React from 'react';
-import { Slot } from '@elementor/locations';
-import { LOCATION_TOP } from '../locations';
+import useSyncDocumentTitle from '../hooks/use-sync-document-title';
+import useSyncDocumentQueryParams from '../hooks/use-sync-document-query-params';
+import { TopSlot } from '../locations';
 
 export default function Shell() {
+	useSyncDocumentTitle();
+	useSyncDocumentQueryParams();
+
 	return (
-		<Slot location={ LOCATION_TOP } />
+		<TopSlot />
 	);
 }

package/src/hooks/use-sync-document-query-params.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { useHostDocument } from '@elementor/editor-documents';
+
+export default function useSyncDocumentQueryParams() {
+	const hostDocument = useHostDocument();
+
+	useEffect( () => {
+		if ( ! hostDocument?.id ) {
+			return;
+		}
+
+		const url = new URL( window.location.href );
+
+		url.searchParams.set( 'post', hostDocument.id.toString() );
+		url.searchParams.delete( 'active-document' );
+
+		history.replaceState( {}, '', url );
+	}, [ hostDocument?.id ] );
+}

package/src/hooks/use-sync-document-title.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { useActiveDocument, useHostDocument } from '@elementor/editor-documents';
+import { __ } from '@wordpress/i18n';
+
+export default function useSyncDocumentTitle() {
+	const activeDocument = useActiveDocument();
+	const hostDocument = useHostDocument();
+
+	const document = activeDocument && activeDocument.type.value !== 'kit'
+		? activeDocument
+		: hostDocument;
+
+	useEffect( () => {
+		if ( ! document?.title ) {
+			return;
+		}
+
+		// translators: %s: Document title.
+		const title = __( 'Edit "%s" with Elementor', 'elementor' )
+			.replace( '%s', document.title );
+
+		window.document.title = title;
+	}, [ document?.title ] );
+}

package/src/locations.ts

@@ -1,5 +1,6 @@
-import { createInjectorFor } from '@elementor/locations';
+import { createLocation } from '@elementor/locations';
 
-export const LOCATION_TOP = 'editor/top';
-
-export const injectIntoTop = createInjectorFor( LOCATION_TOP );
+export const {
+	Slot: TopSlot,
+	inject: injectIntoTop,
+} = createLocation();