@webiny/app-website-builder 6.3.0 → 6.4.0-beta.1

package/modules/pages/PageEditor/TopBar/RevisionsMenu.js

@@ -1,68 +1,74 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { Button, DropdownMenu } from "@webiny/admin-ui";
-import { ReactComponent as ArrowDown } from "@webiny/icons/keyboard_arrow_down.svg";
-import { ReactComponent as Draft } from "@webiny/icons/draw.svg";
-import { ReactComponent as Unpublished } from "@webiny/icons/lock.svg";
-import { ReactComponent as Published } from "@webiny/icons/remove_red_eye.svg";
+import react, { useCallback, useEffect, useState } from "react";
+import { Button, DropdownMenu, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/keyboard_arrow_down.svg";
+import { ReactComponent as draw_svg_ReactComponent } from "@webiny/icons/draw.svg";
+import { ReactComponent as lock_svg_ReactComponent } from "@webiny/icons/lock.svg";
+import { ReactComponent as remove_red_eye_svg_ReactComponent } from "@webiny/icons/remove_red_eye.svg";
 import { useGetPageRevisions } from "../../../../features/pages/index.js";
 import { useSelectFromDocument } from "../../../../BaseEditor/hooks/useSelectFromDocument.js";
 import { useRouter } from "@webiny/app-admin";
 import { Routes } from "../../../../routes.js";
-const {
-  Item
-} = DropdownMenu;
+import { usePageEditorDrawer } from "../Revisions/usePageEditorDrawer.js";
+const { Item: Item } = DropdownMenu;
 const statusIcon = {
-  draft: /*#__PURE__*/React.createElement(Draft, null),
-  published: /*#__PURE__*/React.createElement(Published, null),
-  unpublished: /*#__PURE__*/React.createElement(Unpublished, null)
+    draft: /*#__PURE__*/ react.createElement(draw_svg_ReactComponent, null),
+    published: /*#__PURE__*/ react.createElement(remove_red_eye_svg_ReactComponent, null),
+    unpublished: /*#__PURE__*/ react.createElement(lock_svg_ReactComponent, null)
 };
-export const RevisionsMenu = () => {
-  const {
-    getLink
-  } = useRouter();
-  const [revisions, setRevisions] = useState([]);
-  const {
-    loading,
-    getPageRevisions
-  } = useGetPageRevisions();
-  const id = useSelectFromDocument(document => document.id);
-  const status = useSelectFromDocument(document => document.status);
-  useEffect(() => {
-    const [entryId] = id.split("#");
-    getPageRevisions({
-      entryId
-    }).then(revisions => {
-      setRevisions(revisions.sort((a, b) => {
-        return new Date(a.savedOn).getTime() - new Date(b.savedOn).getTime();
-      }).reverse());
-    });
-  }, [id, status]);
-  const currentRevision = revisions.find(r => r.id === id);
-  const goToRevision = useCallback(id => {
-    // TODO: make this work without a full app reload
-    window.location.pathname = getLink(Routes.Pages.Editor, {
-      id
-    });
-  }, []);
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
-    trigger: /*#__PURE__*/React.createElement(Button, {
-      disabled: loading,
-      variant: "ghost",
-      text: currentRevision ? currentRevision.getLabel() : "Loading...",
-      icon: /*#__PURE__*/React.createElement(ArrowDown, null),
-      iconPosition: "end"
-    })
-  }, revisions.map(revision => /*#__PURE__*/React.createElement(Item, {
-    key: revision.id,
-    className: "cursor-pointer",
-    onClick: () => goToRevision(revision.id),
-    disabled: revision.locked,
-    icon: /*#__PURE__*/React.createElement(Item.Icon, {
-      label: revision.getLabel(),
-      element: statusIcon[revision.status]
-    }),
-    text: revision.getLabel()
-  })));
+const RevisionsMenu = ()=>{
+    const { getLink } = useRouter();
+    const [revisions, setRevisions] = useState([]);
+    const { loading, getPageRevisions } = useGetPageRevisions();
+    const id = useSelectFromDocument((document)=>document.id);
+    const status = useSelectFromDocument((document)=>document.status);
+    const { openRevisionList } = usePageEditorDrawer();
+    useEffect(()=>{
+        const [entryId] = id.split("#");
+        getPageRevisions({
+            entryId
+        }).then((revisions)=>{
+            setRevisions(revisions.sort((a, b)=>new Date(a.savedOn).getTime() - new Date(b.savedOn).getTime()).reverse());
+        });
+    }, [
+        id,
+        status
+    ]);
+    const currentRevision = revisions.find((r)=>r.id === id);
+    const goToRevision = useCallback((id)=>{
+        window.location.pathname = getLink(Routes.Pages.Editor, {
+            id
+        });
+    }, []);
+    const onOpenRevisionList = useCallback(()=>{
+        openRevisionList(true);
+    }, []);
+    return /*#__PURE__*/ react.createElement(DropdownMenu, {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            disabled: loading,
+            variant: "ghost",
+            text: currentRevision ? currentRevision.getLabel() : "Loading...",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            iconPosition: "end"
+        })
+    }, revisions.slice(0, 5).map((revision)=>/*#__PURE__*/ react.createElement(Item, {
+            key: revision.id,
+            className: "cursor-pointer",
+            onClick: ()=>goToRevision(revision.id),
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: revision.getLabel(),
+                element: statusIcon[revision.status]
+            }),
+            text: /*#__PURE__*/ react.createElement(Text, {
+                size: "sm"
+            }, revision.getLabel())
+        })), revisions.length > 5 ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(DropdownMenu.Separator, null), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        key: "revisions-all",
+        onClick: onOpenRevisionList,
+        text: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Text, {
+            size: "sm"
+        }, "Show All Revisions"))
+    })) : null);
 };
+export { RevisionsMenu };
 
 //# sourceMappingURL=RevisionsMenu.js.map

package/modules/pages/PageEditor/TopBar/RevisionsMenu.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","useCallback","Button","DropdownMenu","ReactComponent","ArrowDown","Draft","Unpublished","Published","useGetPageRevisions","useSelectFromDocument","useRouter","Routes","Item","statusIcon","draft","createElement","published","unpublished","RevisionsMenu","getLink","revisions","setRevisions","loading","getPageRevisions","id","document","status","entryId","split","then","sort","a","b","Date","savedOn","getTime","reverse","currentRevision","find","r","goToRevision","window","location","pathname","Pages","Editor","trigger","disabled","variant","text","getLabel","icon","iconPosition","map","revision","key","className","onClick","locked","Icon","label","element"],"sources":["RevisionsMenu.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\nimport { Button, DropdownMenu } from \"@webiny/admin-ui\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as Draft } from \"@webiny/icons/draw.svg\";\nimport { ReactComponent as Unpublished } from \"@webiny/icons/lock.svg\";\nimport { ReactComponent as Published } from \"@webiny/icons/remove_red_eye.svg\";\nimport { useGetPageRevisions } from \"~/features/pages/index.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport type { PageRevision } from \"~/domain/PageRevision/index.js\";\nimport type { EditorPage } from \"@webiny/website-builder-sdk\";\nimport { useRouter } from \"@webiny/app-admin\";\nimport { Routes } from \"~/routes.js\";\n\nconst { Item } = DropdownMenu;\n\nconst statusIcon: Record<string, React.JSX.Element> = {\n    draft: <Draft />,\n    published: <Published />,\n    unpublished: <Unpublished />\n};\n\nexport const RevisionsMenu = () => {\n    const { getLink } = useRouter();\n    const [revisions, setRevisions] = useState<PageRevision[]>([]);\n    const { loading, getPageRevisions } = useGetPageRevisions();\n    const id = useSelectFromDocument(document => document.id);\n    const status = useSelectFromDocument<string, EditorPage>(document => document.status);\n\n    useEffect(() => {\n        const [entryId] = id.split(\"#\");\n        getPageRevisions({ entryId }).then(revisions => {\n            setRevisions(\n                revisions\n                    .sort((a, b) => {\n                        return new Date(a.savedOn).getTime() - new Date(b.savedOn).getTime();\n                    })\n                    .reverse()\n            );\n        });\n    }, [id, status]);\n\n    const currentRevision = revisions.find(r => r.id === id);\n\n    const goToRevision = useCallback((id: string) => {\n        // TODO: make this work without a full app reload\n        window.location.pathname = getLink(Routes.Pages.Editor, { id });\n    }, []);\n\n    return (\n        <DropdownMenu\n            trigger={\n                <Button\n                    disabled={loading}\n                    variant=\"ghost\"\n                    text={currentRevision ? currentRevision.getLabel() : \"Loading...\"}\n                    icon={<ArrowDown />}\n                    iconPosition={\"end\"}\n                />\n            }\n        >\n            {revisions.map(revision => (\n                <Item\n                    key={revision.id}\n                    className={\"cursor-pointer\"}\n                    onClick={() => goToRevision(revision.id)}\n                    disabled={revision.locked}\n                    icon={\n                        <Item.Icon\n                            label={revision.getLabel()}\n                            element={statusIcon[revision.status]}\n                        />\n                    }\n                    text={revision.getLabel()}\n                />\n            ))}\n        </DropdownMenu>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"modules/pages/PageEditor/TopBar/RevisionsMenu.js","sources":["../../../../../src/modules/pages/PageEditor/TopBar/RevisionsMenu.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\nimport { Button, DropdownMenu, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as Draft } from \"@webiny/icons/draw.svg\";\nimport { ReactComponent as Unpublished } from \"@webiny/icons/lock.svg\";\nimport { ReactComponent as Published } from \"@webiny/icons/remove_red_eye.svg\";\nimport { useGetPageRevisions } from \"~/features/pages/index.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport type { PageRevision } from \"~/domain/PageRevision/index.js\";\nimport type { EditorPage } from \"@webiny/website-builder-sdk\";\nimport { useRouter } from \"@webiny/app-admin\";\nimport { Routes } from \"~/routes.js\";\nimport { usePageEditorDrawer } from \"~/modules/pages/PageEditor/Revisions/usePageEditorDrawer.js\";\n\nconst { Item } = DropdownMenu;\n\nconst statusIcon: Record<string, React.JSX.Element> = {\n    draft: <Draft />,\n    published: <Published />,\n    unpublished: <Unpublished />\n};\n\nexport const RevisionsMenu = () => {\n    const { getLink } = useRouter();\n    const [revisions, setRevisions] = useState<PageRevision[]>([]);\n    const { loading, getPageRevisions } = useGetPageRevisions();\n    const id = useSelectFromDocument(document => document.id);\n    const status = useSelectFromDocument<string, EditorPage>(document => document.status);\n\n    const { openRevisionList } = usePageEditorDrawer();\n\n    useEffect(() => {\n        const [entryId] = id.split(\"#\");\n        getPageRevisions({ entryId }).then(revisions => {\n            setRevisions(\n                revisions\n                    .sort((a, b) => {\n                        return new Date(a.savedOn).getTime() - new Date(b.savedOn).getTime();\n                    })\n                    .reverse()\n            );\n        });\n    }, [id, status]);\n\n    const currentRevision = revisions.find(r => r.id === id);\n\n    const goToRevision = useCallback((id: string) => {\n        // TODO: make this work without a full app reload\n        window.location.pathname = getLink(Routes.Pages.Editor, { id });\n    }, []);\n\n    const onOpenRevisionList = useCallback(() => {\n        openRevisionList(true);\n    }, []);\n\n    return (\n        <DropdownMenu\n            trigger={\n                <Button\n                    disabled={loading}\n                    variant=\"ghost\"\n                    text={currentRevision ? currentRevision.getLabel() : \"Loading...\"}\n                    icon={<ArrowDown />}\n                    iconPosition={\"end\"}\n                />\n            }\n        >\n            {revisions.slice(0, 5).map(revision => (\n                <Item\n                    key={revision.id}\n                    className={\"cursor-pointer\"}\n                    onClick={() => goToRevision(revision.id)}\n                    icon={\n                        <Item.Icon\n                            label={revision.getLabel()}\n                            element={statusIcon[revision.status]}\n                        />\n                    }\n                    text={<Text size={\"sm\"}>{revision.getLabel()}</Text>}\n                />\n            ))}\n            {revisions.length > 5 ? (\n                <>\n                    <DropdownMenu.Separator />\n                    <DropdownMenu.Item\n                        key={\"revisions-all\"}\n                        onClick={onOpenRevisionList}\n                        text={\n                            <>\n                                <Text size={\"sm\"}>Show All Revisions</Text>\n                            </>\n                        }\n                    />\n                </>\n            ) : null}\n        </DropdownMenu>\n    );\n};\n"],"names":["Item","DropdownMenu","statusIcon","Draft","Published","Unpublished","RevisionsMenu","getLink","useRouter","revisions","setRevisions","useState","loading","getPageRevisions","useGetPageRevisions","id","useSelectFromDocument","document","status","openRevisionList","usePageEditorDrawer","useEffect","entryId","a","b","Date","currentRevision","r","goToRevision","useCallback","window","Routes","onOpenRevisionList","Button","ArrowDown","revision","Text"],"mappings":";;;;;;;;;;;AAcA,MAAM,EAAEA,MAAAA,IAAI,EAAE,GAAGC;AAEjB,MAAMC,aAAgD;IAClD,OAAO,WAAP,GAAO,oBAACC,yBAAKA;IACb,WAAW,WAAX,GAAW,oBAACC,mCAASA;IACrB,aAAa,WAAb,GAAa,oBAACC,yBAAWA;AAC7B;AAEO,MAAMC,gBAAgB;IACzB,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,CAACC,WAAWC,aAAa,GAAGC,SAAyB,EAAE;IAC7D,MAAM,EAAEC,OAAO,EAAEC,gBAAgB,EAAE,GAAGC;IACtC,MAAMC,KAAKC,sBAAsBC,CAAAA,WAAYA,SAAS,EAAE;IACxD,MAAMC,SAASF,sBAA0CC,CAAAA,WAAYA,SAAS,MAAM;IAEpF,MAAM,EAAEE,gBAAgB,EAAE,GAAGC;IAE7BC,UAAU;QACN,MAAM,CAACC,QAAQ,GAAGP,GAAG,KAAK,CAAC;QAC3BF,iBAAiB;YAAES;QAAQ,GAAG,IAAI,CAACb,CAAAA;YAC/BC,aACID,UACK,IAAI,CAAC,CAACc,GAAGC,IACC,IAAIC,KAAKF,EAAE,OAAO,EAAE,OAAO,KAAK,IAAIE,KAAKD,EAAE,OAAO,EAAE,OAAO,IAErE,OAAO;QAEpB;IACJ,GAAG;QAACT;QAAIG;KAAO;IAEf,MAAMQ,kBAAkBjB,UAAU,IAAI,CAACkB,CAAAA,IAAKA,EAAE,EAAE,KAAKZ;IAErD,MAAMa,eAAeC,YAAY,CAACd;QAE9Be,OAAO,QAAQ,CAAC,QAAQ,GAAGvB,QAAQwB,OAAO,KAAK,CAAC,MAAM,EAAE;YAAEhB;QAAG;IACjE,GAAG,EAAE;IAEL,MAAMiB,qBAAqBH,YAAY;QACnCV,iBAAiB;IACrB,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAAClB,cAAYA;QACT,uBACI,oBAACgC,QAAMA;YACH,UAAUrB;YACV,SAAQ;YACR,MAAMc,kBAAkBA,gBAAgB,QAAQ,KAAK;YACrD,oBAAM,oBAACQ,gBAASA;YAChB,cAAc;;OAIrBzB,UAAU,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC0B,CAAAA,WAAAA,WAAAA,GACvB,oBAACnC,MAAIA;YACD,KAAKmC,SAAS,EAAE;YAChB,WAAW;YACX,SAAS,IAAMP,aAAaO,SAAS,EAAE;YACvC,oBACI,oBAACnC,KAAK,IAAI;gBACN,OAAOmC,SAAS,QAAQ;gBACxB,SAASjC,UAAU,CAACiC,SAAS,MAAM,CAAC;;YAG5C,oBAAM,oBAACC,MAAIA;gBAAC,MAAM;eAAOD,SAAS,QAAQ;aAGjD1B,UAAU,MAAM,GAAG,IAAI,WAAJ,GAChB,wDACI,oBAACR,aAAa,SAAS,uBACvB,oBAACA,aAAa,IAAI;QACd,KAAK;QACL,SAAS+B;QACT,oBACI,wDACI,oBAACI,MAAIA;YAAC,MAAM;WAAM;UAKlC;AAGhB"}

package/modules/pages/PageEditor/TopBar/SettingsButton.js

@@ -1,63 +1,62 @@
 import { observable, toJS } from "mobx";
-import React, { useCallback, useState } from "react";
+import react, { useCallback, useState } from "react";
 import { IconButton } from "@webiny/admin-ui";
 import { useHotkeys } from "@webiny/app-admin";
-import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { ReactComponent } from "@webiny/icons/settings.svg";
 import { useFeature } from "@webiny/app";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { useSelectFromDocument } from "../../../../BaseEditor/hooks/useSelectFromDocument.js";
 import { PageSettingsFeature } from "../PageSettings/feature.js";
 import { PageSettingsDrawer } from "./PageSettingsDrawer.js";
-export const SettingsButton = () => {
-  const editor = useDocumentEditor();
-  const {
-    presenter
-  } = useFeature(PageSettingsFeature);
-  const [isOverlayOpen, setOverlayOpen] = useState(false);
-  const formData = useSelectFromDocument(document => {
-    return structuredClone({
-      properties: toJS(document.properties),
-      metadata: toJS(document.metadata),
-      extensions: toJS(document.extensions)
+const SettingsButton = ()=>{
+    const editor = useDocumentEditor();
+    const { presenter } = useFeature(PageSettingsFeature);
+    const [isOverlayOpen, setOverlayOpen] = useState(false);
+    const formData = useSelectFromDocument((document)=>structuredClone({
+            properties: toJS(document.properties),
+            metadata: toJS(document.metadata),
+            extensions: toJS(document.extensions)
+        }));
+    const openOverlay = useCallback(()=>{
+        presenter.init(formData);
+        setOverlayOpen(true);
+    }, [
+        formData
+    ]);
+    const closeOverlay = useCallback(()=>{
+        setOverlayOpen(false);
+    }, []);
+    const saveSettings = useCallback(async ()=>{
+        const result = await presenter.submit();
+        if (result) {
+            editor.updateDocument((document)=>{
+                document.properties = observable(result.properties);
+                document.metadata = observable(result.metadata);
+                document.extensions = observable(result.extensions);
+            });
+            closeOverlay();
+        }
+    }, []);
+    useHotkeys({
+        zIndex: 55,
+        disabled: !isOverlayOpen,
+        keys: {
+            esc: closeOverlay
+        }
     });
-  });
-  const openOverlay = useCallback(() => {
-    presenter.init(formData);
-    setOverlayOpen(true);
-  }, [formData]);
-  const closeOverlay = useCallback(() => {
-    setOverlayOpen(false);
-  }, []);
-  const saveSettings = useCallback(async () => {
-    const result = await presenter.submit();
-    if (result) {
-      editor.updateDocument(document => {
-        document.properties = observable(result.properties);
-        document.metadata = observable(result.metadata);
-        document.extensions = observable(result.extensions);
-      });
-      closeOverlay();
-    }
-  }, []);
-  useHotkeys({
-    zIndex: 55,
-    disabled: !isOverlayOpen,
-    keys: {
-      esc: closeOverlay
-    }
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-x-sm"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    variant: "ghost",
-    icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
-    onClick: openOverlay
-  }), /*#__PURE__*/React.createElement(PageSettingsDrawer, {
-    presenter: presenter,
-    open: isOverlayOpen,
-    onClose: closeOverlay,
-    onSave: saveSettings
-  }));
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-x-sm"
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "ghost",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: openOverlay
+    }), /*#__PURE__*/ react.createElement(PageSettingsDrawer, {
+        presenter: presenter,
+        open: isOverlayOpen,
+        onClose: closeOverlay,
+        onSave: saveSettings
+    }));
 };
+export { SettingsButton };
 
 //# sourceMappingURL=SettingsButton.js.map

package/modules/pages/PageEditor/TopBar/SettingsButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["observable","toJS","React","useCallback","useState","IconButton","useHotkeys","ReactComponent","SettingsIcon","useFeature","useDocumentEditor","useSelectFromDocument","PageSettingsFeature","PageSettingsDrawer","SettingsButton","editor","presenter","isOverlayOpen","setOverlayOpen","formData","document","structuredClone","properties","metadata","extensions","openOverlay","init","closeOverlay","saveSettings","result","submit","updateDocument","zIndex","disabled","keys","esc","createElement","className","variant","icon","onClick","open","onClose","onSave"],"sources":["SettingsButton.tsx"],"sourcesContent":["import { observable, toJS } from \"mobx\";\nimport React, { useCallback, useState } from \"react\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { useHotkeys } from \"@webiny/app-admin\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { useFeature } from \"@webiny/app\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { PageSettingsFeature } from \"~/modules/pages/PageEditor/PageSettings/feature.js\";\nimport { PageSettingsDrawer } from \"./PageSettingsDrawer.js\";\nimport { PageSettingsGroup } from \"~/modules/pages/PageEditor/PageSettings/index.js\";\n\nexport const SettingsButton = () => {\n    const editor = useDocumentEditor();\n    const { presenter } = useFeature(PageSettingsFeature);\n    const [isOverlayOpen, setOverlayOpen] = useState(false);\n\n    const formData = useSelectFromDocument(document => {\n        return structuredClone({\n            properties: toJS(document.properties),\n            metadata: toJS(document.metadata),\n            extensions: toJS(document.extensions)\n        }) as PageSettingsGroup.PageDocument;\n    });\n\n    const openOverlay = useCallback(() => {\n        presenter.init(formData);\n        setOverlayOpen(true);\n    }, [formData]);\n\n    const closeOverlay = useCallback(() => {\n        setOverlayOpen(false);\n    }, []);\n\n    const saveSettings = useCallback(async () => {\n        const result = await presenter.submit();\n        if (result) {\n            editor.updateDocument(document => {\n                document.properties = observable(result.properties);\n                document.metadata = observable(result.metadata);\n                document.extensions = observable(result.extensions);\n            });\n            closeOverlay();\n        }\n    }, []);\n\n    useHotkeys({\n        zIndex: 55,\n        disabled: !isOverlayOpen,\n        keys: {\n            esc: closeOverlay\n        }\n    });\n\n    return (\n        <div className={\"flex gap-x-sm\"}>\n            <IconButton variant=\"ghost\" icon={<SettingsIcon />} onClick={openOverlay} />\n            <PageSettingsDrawer\n                presenter={presenter}\n                open={isOverlayOpen}\n                onClose={closeOverlay}\n                onSave={saveSettings}\n            />\n        </div>\n    );\n};\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,IAAI,QAAQ,MAAM;AACvC,OAAOC,KAAK,IAAIC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,cAAc,IAAIC,YAAY,QAAQ,4BAA4B;AAC3E,SAASC,UAAU,QAAQ,aAAa;AACxC,SAASC,iBAAiB;AAC1B,SAASC,qBAAqB;AAC9B,SAASC,mBAAmB;AAC5B,SAASC,kBAAkB;AAG3B,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAChC,MAAMC,MAAM,GAAGL,iBAAiB,CAAC,CAAC;EAClC,MAAM;IAAEM;EAAU,CAAC,GAAGP,UAAU,CAACG,mBAAmB,CAAC;EACrD,MAAM,CAACK,aAAa,EAAEC,cAAc,CAAC,GAAGd,QAAQ,CAAC,KAAK,CAAC;EAEvD,MAAMe,QAAQ,GAAGR,qBAAqB,CAACS,QAAQ,IAAI;IAC/C,OAAOC,eAAe,CAAC;MACnBC,UAAU,EAAErB,IAAI,CAACmB,QAAQ,CAACE,UAAU,CAAC;MACrCC,QAAQ,EAAEtB,IAAI,CAACmB,QAAQ,CAACG,QAAQ,CAAC;MACjCC,UAAU,EAAEvB,IAAI,CAACmB,QAAQ,CAACI,UAAU;IACxC,CAAC,CAAC;EACN,CAAC,CAAC;EAEF,MAAMC,WAAW,GAAGtB,WAAW,CAAC,MAAM;IAClCa,SAAS,CAACU,IAAI,CAACP,QAAQ,CAAC;IACxBD,cAAc,CAAC,IAAI,CAAC;EACxB,CAAC,EAAE,CAACC,QAAQ,CAAC,CAAC;EAEd,MAAMQ,YAAY,GAAGxB,WAAW,CAAC,MAAM;IACnCe,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMU,YAAY,GAAGzB,WAAW,CAAC,YAAY;IACzC,MAAM0B,MAAM,GAAG,MAAMb,SAAS,CAACc,MAAM,CAAC,CAAC;IACvC,IAAID,MAAM,EAAE;MACRd,MAAM,CAACgB,cAAc,CAACX,QAAQ,IAAI;QAC9BA,QAAQ,CAACE,UAAU,GAAGtB,UAAU,CAAC6B,MAAM,CAACP,UAAU,CAAC;QACnDF,QAAQ,CAACG,QAAQ,GAAGvB,UAAU,CAAC6B,MAAM,CAACN,QAAQ,CAAC;QAC/CH,QAAQ,CAACI,UAAU,GAAGxB,UAAU,CAAC6B,MAAM,CAACL,UAAU,CAAC;MACvD,CAAC,CAAC;MACFG,YAAY,CAAC,CAAC;IAClB;EACJ,CAAC,EAAE,EAAE,CAAC;EAENrB,UAAU,CAAC;IACP0B,MAAM,EAAE,EAAE;IACVC,QAAQ,EAAE,CAAChB,aAAa;IACxBiB,IAAI,EAAE;MACFC,GAAG,EAAER;IACT;EACJ,CAAC,CAAC;EAEF,oBACIzB,KAAA,CAAAkC,aAAA;IAAKC,SAAS,EAAE;EAAgB,gBAC5BnC,KAAA,CAAAkC,aAAA,CAAC/B,UAAU;IAACiC,OAAO,EAAC,OAAO;IAACC,IAAI,eAAErC,KAAA,CAAAkC,aAAA,CAAC5B,YAAY,MAAE,CAAE;IAACgC,OAAO,EAAEf;EAAY,CAAE,CAAC,eAC5EvB,KAAA,CAAAkC,aAAA,CAACvB,kBAAkB;IACfG,SAAS,EAAEA,SAAU;IACrByB,IAAI,EAAExB,aAAc;IACpByB,OAAO,EAAEf,YAAa;IACtBgB,MAAM,EAAEf;EAAa,CACxB,CACA,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"modules/pages/PageEditor/TopBar/SettingsButton.js","sources":["../../../../../src/modules/pages/PageEditor/TopBar/SettingsButton.tsx"],"sourcesContent":["import { observable, toJS } from \"mobx\";\nimport React, { useCallback, useState } from \"react\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { useHotkeys } from \"@webiny/app-admin\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { useFeature } from \"@webiny/app\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { PageSettingsFeature } from \"~/modules/pages/PageEditor/PageSettings/feature.js\";\nimport { PageSettingsDrawer } from \"./PageSettingsDrawer.js\";\nimport { PageSettingsGroup } from \"~/modules/pages/PageEditor/PageSettings/index.js\";\n\nexport const SettingsButton = () => {\n    const editor = useDocumentEditor();\n    const { presenter } = useFeature(PageSettingsFeature);\n    const [isOverlayOpen, setOverlayOpen] = useState(false);\n\n    const formData = useSelectFromDocument(document => {\n        return structuredClone({\n            properties: toJS(document.properties),\n            metadata: toJS(document.metadata),\n            extensions: toJS(document.extensions)\n        }) as PageSettingsGroup.PageDocument;\n    });\n\n    const openOverlay = useCallback(() => {\n        presenter.init(formData);\n        setOverlayOpen(true);\n    }, [formData]);\n\n    const closeOverlay = useCallback(() => {\n        setOverlayOpen(false);\n    }, []);\n\n    const saveSettings = useCallback(async () => {\n        const result = await presenter.submit();\n        if (result) {\n            editor.updateDocument(document => {\n                document.properties = observable(result.properties);\n                document.metadata = observable(result.metadata);\n                document.extensions = observable(result.extensions);\n            });\n            closeOverlay();\n        }\n    }, []);\n\n    useHotkeys({\n        zIndex: 55,\n        disabled: !isOverlayOpen,\n        keys: {\n            esc: closeOverlay\n        }\n    });\n\n    return (\n        <div className={\"flex gap-x-sm\"}>\n            <IconButton variant=\"ghost\" icon={<SettingsIcon />} onClick={openOverlay} />\n            <PageSettingsDrawer\n                presenter={presenter}\n                open={isOverlayOpen}\n                onClose={closeOverlay}\n                onSave={saveSettings}\n            />\n        </div>\n    );\n};\n"],"names":["SettingsButton","editor","useDocumentEditor","presenter","useFeature","PageSettingsFeature","isOverlayOpen","setOverlayOpen","useState","formData","useSelectFromDocument","document","structuredClone","toJS","openOverlay","useCallback","closeOverlay","saveSettings","result","observable","useHotkeys","IconButton","SettingsIcon","PageSettingsDrawer"],"mappings":";;;;;;;;;;AAYO,MAAMA,iBAAiB;IAC1B,MAAMC,SAASC;IACf,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,CAACC,eAAeC,eAAe,GAAGC,SAAS;IAEjD,MAAMC,WAAWC,sBAAsBC,CAAAA,WAC5BC,gBAAgB;YACnB,YAAYC,KAAKF,SAAS,UAAU;YACpC,UAAUE,KAAKF,SAAS,QAAQ;YAChC,YAAYE,KAAKF,SAAS,UAAU;QACxC;IAGJ,MAAMG,cAAcC,YAAY;QAC5BZ,UAAU,IAAI,CAACM;QACfF,eAAe;IACnB,GAAG;QAACE;KAAS;IAEb,MAAMO,eAAeD,YAAY;QAC7BR,eAAe;IACnB,GAAG,EAAE;IAEL,MAAMU,eAAeF,YAAY;QAC7B,MAAMG,SAAS,MAAMf,UAAU,MAAM;QACrC,IAAIe,QAAQ;YACRjB,OAAO,cAAc,CAACU,CAAAA;gBAClBA,SAAS,UAAU,GAAGQ,WAAWD,OAAO,UAAU;gBAClDP,SAAS,QAAQ,GAAGQ,WAAWD,OAAO,QAAQ;gBAC9CP,SAAS,UAAU,GAAGQ,WAAWD,OAAO,UAAU;YACtD;YACAF;QACJ;IACJ,GAAG,EAAE;IAELI,WAAW;QACP,QAAQ;QACR,UAAU,CAACd;QACX,MAAM;YACF,KAAKU;QACT;IACJ;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACK,YAAUA;QAAC,SAAQ;QAAQ,oBAAM,oBAACC,gBAAYA;QAAK,SAASR;sBAC7D,oBAACS,oBAAkBA;QACf,WAAWpB;QACX,MAAMG;QACN,SAASU;QACT,QAAQC;;AAIxB"}

package/modules/pages/PageEditor/TopBar/Title.js

@@ -1,62 +1,56 @@
-import React, { useCallback, useState } from "react";
+import react, { useCallback, useState } from "react";
 import { Input, Text } from "@webiny/admin-ui";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { useSelectFromDocument } from "../../../../BaseEditor/hooks/useSelectFromDocument.js";
 import { useSelectFromEditor } from "../../../../BaseEditor/hooks/useSelectFromEditor.js";
 import { LanguageCodeTag } from "../../../../presentation/components/LanguageCodeTag.js";
-export function Title() {
-  const [localValue, setLocalValue] = useState();
-  const [isEditing, setIsEditing] = useState(false);
-  const isEditorReadOnly = useSelectFromEditor(state => state.isReadOnly);
-  const editor = useDocumentEditor();
-  const {
-    title,
-    language
-  } = useSelectFromDocument(document => {
-    return {
-      title: document.properties.title ?? "Untitled",
-      language: document.properties.language ?? undefined
-    };
-  });
-  const commitValue = useCallback(value => {
-    editor.updateDocument(document => {
-      document.properties.title = value;
-    });
-    setLocalValue(undefined);
-    setIsEditing(false);
-  }, []);
-  const cancelEditing = useCallback(() => {
-    setIsEditing(false);
-    setLocalValue(undefined);
-  }, []);
-  if (isEditorReadOnly) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex flex-col min-w-0"
-    }, /*#__PURE__*/React.createElement(Text, {
-      className: "text-accent-primary font-bold mx-sm truncate",
-      size: "lg"
+function Title() {
+    const [localValue, setLocalValue] = useState();
+    const [isEditing, setIsEditing] = useState(false);
+    const isEditorReadOnly = useSelectFromEditor((state)=>state.isReadOnly);
+    const editor = useDocumentEditor();
+    const { title, language } = useSelectFromDocument((document)=>({
+            title: document.properties.title ?? "Untitled",
+            language: document.properties.language ?? void 0
+        }));
+    const commitValue = useCallback((value)=>{
+        editor.updateDocument((document)=>{
+            document.properties.title = value;
+        });
+        setLocalValue(void 0);
+        setIsEditing(false);
+    }, []);
+    const cancelEditing = useCallback(()=>{
+        setIsEditing(false);
+        setLocalValue(void 0);
+    }, []);
+    if (isEditorReadOnly) return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col min-w-0"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        className: "text-accent-primary font-bold mx-sm truncate",
+        size: "lg"
     }, title));
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-row min-w-0"
-  }, /*#__PURE__*/React.createElement(LanguageCodeTag, {
-    code: language
-  }), !isEditing ? /*#__PURE__*/React.createElement(Text, {
-    onClick: () => setIsEditing(true),
-    className: "cursor-pointer text-accent-primary font-bold mx-sm truncate",
-    size: "lg"
-  }, title) : null, isEditing ? /*#__PURE__*/React.createElement(Input, {
-    autoFocus: true,
-    autoSelect: true,
-    size: "md",
-    variant: "secondary",
-    className: "mx-sm",
-    value: localValue ?? title,
-    onChange: setLocalValue,
-    onBlur: e => commitValue(e.currentTarget.value),
-    onEnter: e => commitValue(e.currentTarget.value),
-    onEscape: cancelEditing
-  }) : null);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-row min-w-0"
+    }, /*#__PURE__*/ react.createElement(LanguageCodeTag, {
+        code: language
+    }), isEditing ? null : /*#__PURE__*/ react.createElement(Text, {
+        onClick: ()=>setIsEditing(true),
+        className: "cursor-pointer text-accent-primary font-bold mx-sm truncate",
+        size: "lg"
+    }, title), isEditing ? /*#__PURE__*/ react.createElement(Input, {
+        autoFocus: true,
+        autoSelect: true,
+        size: "md",
+        variant: "secondary",
+        className: "mx-sm",
+        value: localValue ?? title,
+        onChange: setLocalValue,
+        onBlur: (e)=>commitValue(e.currentTarget.value),
+        onEnter: (e)=>commitValue(e.currentTarget.value),
+        onEscape: cancelEditing
+    }) : null);
 }
+export { Title };
 
 //# sourceMappingURL=Title.js.map

package/modules/pages/PageEditor/TopBar/Title.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useState","Input","Text","useDocumentEditor","useSelectFromDocument","useSelectFromEditor","LanguageCodeTag","Title","localValue","setLocalValue","isEditing","setIsEditing","isEditorReadOnly","state","isReadOnly","editor","title","language","document","properties","undefined","commitValue","value","updateDocument","cancelEditing","createElement","className","size","code","onClick","autoFocus","autoSelect","variant","onChange","onBlur","e","currentTarget","onEnter","onEscape"],"sources":["Title.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { Input, Text } from \"@webiny/admin-ui\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { LanguageCodeTag } from \"~/presentation/components/LanguageCodeTag.js\";\n\nexport function Title() {\n    const [localValue, setLocalValue] = useState<string | undefined>();\n    const [isEditing, setIsEditing] = useState<boolean>(false);\n    const isEditorReadOnly = useSelectFromEditor(state => state.isReadOnly);\n\n    const editor = useDocumentEditor();\n\n    const { title, language } = useSelectFromDocument(document => {\n        return {\n            title: document.properties.title ?? \"Untitled\",\n            language: document.properties.language ?? undefined\n        };\n    });\n\n    const commitValue = useCallback((value: string) => {\n        editor.updateDocument(document => {\n            document.properties.title = value;\n        });\n        setLocalValue(undefined);\n        setIsEditing(false);\n    }, []);\n\n    const cancelEditing = useCallback(() => {\n        setIsEditing(false);\n        setLocalValue(undefined);\n    }, []);\n\n    if (isEditorReadOnly) {\n        return (\n            <div className={\"flex flex-col min-w-0\"}>\n                <Text className={\"text-accent-primary font-bold mx-sm truncate\"} size={\"lg\"}>\n                    {title}\n                </Text>\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"flex flex-row min-w-0\"}>\n            <LanguageCodeTag code={language} />\n            {!isEditing ? (\n                <Text\n                    onClick={() => setIsEditing(true)}\n                    className={\"cursor-pointer text-accent-primary font-bold mx-sm truncate\"}\n                    size={\"lg\"}\n                >\n                    {title}\n                </Text>\n            ) : null}\n            {isEditing ? (\n                <Input\n                    autoFocus\n                    autoSelect\n                    size={\"md\"}\n                    variant={\"secondary\"}\n                    className={\"mx-sm\"}\n                    value={localValue ?? title}\n                    onChange={setLocalValue}\n                    onBlur={e => commitValue(e.currentTarget.value)}\n                    onEnter={e => commitValue(e.currentTarget.value)}\n                    onEscape={cancelEditing}\n                />\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,KAAK,EAAEC,IAAI,QAAQ,kBAAkB;AAC9C,SAASC,iBAAiB;AAC1B,SAASC,qBAAqB;AAC9B,SAASC,mBAAmB;AAC5B,SAASC,eAAe;AAExB,OAAO,SAASC,KAAKA,CAAA,EAAG;EACpB,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGT,QAAQ,CAAqB,CAAC;EAClE,MAAM,CAACU,SAAS,EAAEC,YAAY,CAAC,GAAGX,QAAQ,CAAU,KAAK,CAAC;EAC1D,MAAMY,gBAAgB,GAAGP,mBAAmB,CAACQ,KAAK,IAAIA,KAAK,CAACC,UAAU,CAAC;EAEvE,MAAMC,MAAM,GAAGZ,iBAAiB,CAAC,CAAC;EAElC,MAAM;IAAEa,KAAK;IAAEC;EAAS,CAAC,GAAGb,qBAAqB,CAACc,QAAQ,IAAI;IAC1D,OAAO;MACHF,KAAK,EAAEE,QAAQ,CAACC,UAAU,CAACH,KAAK,IAAI,UAAU;MAC9CC,QAAQ,EAAEC,QAAQ,CAACC,UAAU,CAACF,QAAQ,IAAIG;IAC9C,CAAC;EACL,CAAC,CAAC;EAEF,MAAMC,WAAW,GAAGtB,WAAW,CAAEuB,KAAa,IAAK;IAC/CP,MAAM,CAACQ,cAAc,CAACL,QAAQ,IAAI;MAC9BA,QAAQ,CAACC,UAAU,CAACH,KAAK,GAAGM,KAAK;IACrC,CAAC,CAAC;IACFb,aAAa,CAACW,SAAS,CAAC;IACxBT,YAAY,CAAC,KAAK,CAAC;EACvB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMa,aAAa,GAAGzB,WAAW,CAAC,MAAM;IACpCY,YAAY,CAAC,KAAK,CAAC;IACnBF,aAAa,CAACW,SAAS,CAAC;EAC5B,CAAC,EAAE,EAAE,CAAC;EAEN,IAAIR,gBAAgB,EAAE;IAClB,oBACId,KAAA,CAAA2B,aAAA;MAAKC,SAAS,EAAE;IAAwB,gBACpC5B,KAAA,CAAA2B,aAAA,CAACvB,IAAI;MAACwB,SAAS,EAAE,8CAA+C;MAACC,IAAI,EAAE;IAAK,GACvEX,KACC,CACL,CAAC;EAEd;EAEA,oBACIlB,KAAA,CAAA2B,aAAA;IAAKC,SAAS,EAAE;EAAwB,gBACpC5B,KAAA,CAAA2B,aAAA,CAACnB,eAAe;IAACsB,IAAI,EAAEX;EAAS,CAAE,CAAC,EAClC,CAACP,SAAS,gBACPZ,KAAA,CAAA2B,aAAA,CAACvB,IAAI;IACD2B,OAAO,EAAEA,CAAA,KAAMlB,YAAY,CAAC,IAAI,CAAE;IAClCe,SAAS,EAAE,6DAA8D;IACzEC,IAAI,EAAE;EAAK,GAEVX,KACC,CAAC,GACP,IAAI,EACPN,SAAS,gBACNZ,KAAA,CAAA2B,aAAA,CAACxB,KAAK;IACF6B,SAAS;IACTC,UAAU;IACVJ,IAAI,EAAE,IAAK;IACXK,OAAO,EAAE,WAAY;IACrBN,SAAS,EAAE,OAAQ;IACnBJ,KAAK,EAAEd,UAAU,IAAIQ,KAAM;IAC3BiB,QAAQ,EAAExB,aAAc;IACxByB,MAAM,EAAEC,CAAC,IAAId,WAAW,CAACc,CAAC,CAACC,aAAa,CAACd,KAAK,CAAE;IAChDe,OAAO,EAAEF,CAAC,IAAId,WAAW,CAACc,CAAC,CAACC,aAAa,CAACd,KAAK,CAAE;IACjDgB,QAAQ,EAAEd;EAAc,CAC3B,CAAC,GACF,IACH,CAAC;AAEd","ignoreList":[]}
+{"version":3,"file":"modules/pages/PageEditor/TopBar/Title.js","sources":["../../../../../src/modules/pages/PageEditor/TopBar/Title.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { Input, Text } from \"@webiny/admin-ui\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { LanguageCodeTag } from \"~/presentation/components/LanguageCodeTag.js\";\n\nexport function Title() {\n    const [localValue, setLocalValue] = useState<string | undefined>();\n    const [isEditing, setIsEditing] = useState<boolean>(false);\n    const isEditorReadOnly = useSelectFromEditor(state => state.isReadOnly);\n\n    const editor = useDocumentEditor();\n\n    const { title, language } = useSelectFromDocument(document => {\n        return {\n            title: document.properties.title ?? \"Untitled\",\n            language: document.properties.language ?? undefined\n        };\n    });\n\n    const commitValue = useCallback((value: string) => {\n        editor.updateDocument(document => {\n            document.properties.title = value;\n        });\n        setLocalValue(undefined);\n        setIsEditing(false);\n    }, []);\n\n    const cancelEditing = useCallback(() => {\n        setIsEditing(false);\n        setLocalValue(undefined);\n    }, []);\n\n    if (isEditorReadOnly) {\n        return (\n            <div className={\"flex flex-col min-w-0\"}>\n                <Text className={\"text-accent-primary font-bold mx-sm truncate\"} size={\"lg\"}>\n                    {title}\n                </Text>\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"flex flex-row min-w-0\"}>\n            <LanguageCodeTag code={language} />\n            {!isEditing ? (\n                <Text\n                    onClick={() => setIsEditing(true)}\n                    className={\"cursor-pointer text-accent-primary font-bold mx-sm truncate\"}\n                    size={\"lg\"}\n                >\n                    {title}\n                </Text>\n            ) : null}\n            {isEditing ? (\n                <Input\n                    autoFocus\n                    autoSelect\n                    size={\"md\"}\n                    variant={\"secondary\"}\n                    className={\"mx-sm\"}\n                    value={localValue ?? title}\n                    onChange={setLocalValue}\n                    onBlur={e => commitValue(e.currentTarget.value)}\n                    onEnter={e => commitValue(e.currentTarget.value)}\n                    onEscape={cancelEditing}\n                />\n            ) : null}\n        </div>\n    );\n}\n"],"names":["Title","localValue","setLocalValue","useState","isEditing","setIsEditing","isEditorReadOnly","useSelectFromEditor","state","editor","useDocumentEditor","title","language","useSelectFromDocument","document","undefined","commitValue","useCallback","value","cancelEditing","Text","LanguageCodeTag","Input","e"],"mappings":";;;;;;AAOO,SAASA;IACZ,MAAM,CAACC,YAAYC,cAAc,GAAGC;IACpC,MAAM,CAACC,WAAWC,aAAa,GAAGF,SAAkB;IACpD,MAAMG,mBAAmBC,oBAAoBC,CAAAA,QAASA,MAAM,UAAU;IAEtE,MAAMC,SAASC;IAEf,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,sBAAsBC,CAAAA,WACvC;YACH,OAAOA,SAAS,UAAU,CAAC,KAAK,IAAI;YACpC,UAAUA,SAAS,UAAU,CAAC,QAAQ,IAAIC;QAC9C;IAGJ,MAAMC,cAAcC,YAAY,CAACC;QAC7BT,OAAO,cAAc,CAACK,CAAAA;YAClBA,SAAS,UAAU,CAAC,KAAK,GAAGI;QAChC;QACAhB,cAAca;QACdV,aAAa;IACjB,GAAG,EAAE;IAEL,MAAMc,gBAAgBF,YAAY;QAC9BZ,aAAa;QACbH,cAAca;IAClB,GAAG,EAAE;IAEL,IAAIT,kBACA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACc,MAAIA;QAAC,WAAW;QAAgD,MAAM;OAClET;IAMjB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACU,iBAAeA;QAAC,MAAMT;QACtB,AAACR,YAQE,OARU,WAAZA,GACE,oBAACgB,MAAIA;QACD,SAAS,IAAMf,aAAa;QAC5B,WAAW;QACX,MAAM;OAELM,QAGRP,YAAY,WAAZA,GACG,oBAACkB,OAAKA;QACF;QACA;QACA,MAAM;QACN,SAAS;QACT,WAAW;QACX,OAAOrB,cAAcU;QACrB,UAAUT;QACV,QAAQqB,CAAAA,IAAKP,YAAYO,EAAE,aAAa,CAAC,KAAK;QAC9C,SAASA,CAAAA,IAAKP,YAAYO,EAAE,aAAa,CAAC,KAAK;QAC/C,UAAUJ;SAEd;AAGhB"}

package/modules/pages/PageEditor/usePageEditorConfig.js

@@ -1,6 +1,5 @@
 import { useEditorConfig } from "../../../BaseEditor/index.js";
-export const usePageEditorConfig = () => {
-  return useEditorConfig();
-};
+const usePageEditorConfig = ()=>useEditorConfig();
+export { usePageEditorConfig };
 
 //# sourceMappingURL=usePageEditorConfig.js.map

package/modules/pages/PageEditor/usePageEditorConfig.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEditorConfig","usePageEditorConfig"],"sources":["usePageEditorConfig.ts"],"sourcesContent":["import { useEditorConfig } from \"~/BaseEditor/index.js\";\n\nexport const usePageEditorConfig = () => {\n    return useEditorConfig();\n};\n"],"mappings":"AAAA,SAASA,eAAe;AAExB,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;EACrC,OAAOD,eAAe,CAAC,CAAC;AAC5B,CAAC","ignoreList":[]}
+{"version":3,"file":"modules/pages/PageEditor/usePageEditorConfig.js","sources":["../../../../src/modules/pages/PageEditor/usePageEditorConfig.ts"],"sourcesContent":["import { useEditorConfig } from \"~/BaseEditor/index.js\";\n\nexport const usePageEditorConfig = () => {\n    return useEditorConfig();\n};\n"],"names":["usePageEditorConfig","useEditorConfig"],"mappings":";AAEO,MAAMA,sBAAsB,IACxBC"}

package/modules/pages/PageEditor.js

@@ -1,77 +1,65 @@
-import React, { useEffect, useState } from "react";
-import { useRoute, useRouter } from "@webiny/app-admin";
+import react, { useEffect, useState } from "react";
+import { useRoute } from "@webiny/app-admin";
 import { DocumentEditor } from "../../DocumentEditor/DocumentEditor.js";
-import { useCreatePageRevisionFrom, useGetPage } from "../../features/pages/index.js";
+import { useGetPage } from "../../features/pages/index.js";
 import { OverlayLoader } from "@webiny/admin-ui";
 import { useGetWebsiteBuilderSettings } from "../../features/index.js";
 import { DefaultPageEditorConfig } from "./PageEditor/DefaultPageEditorConfig.js";
 import { DefaultEditorConfig } from "../../BaseEditor/index.js";
 import { EDITOR_NAME } from "./constants.js";
-import { WbPageStatus } from "../../constants.js";
 import { Routes } from "../../routes.js";
-const getPageDataFromPage = page => {
-  return {
-    ...page,
-    id: page.id,
-    version: page.version,
-    status: page.status,
-    location: page.location,
-    properties: page.properties,
-    bindings: page.bindings,
-    elements: page.elements,
-    metadata: page.metadata,
-    state: {}
-  };
-};
-export const PageEditor = () => {
-  const {
-    getSettings
-  } = useGetWebsiteBuilderSettings();
-  const [loading, setLoading] = useState(true);
-  const [page, setPage] = useState(null);
-  const {
-    goToRoute
-  } = useRouter();
-  const {
-    route
-  } = useRoute(Routes.Pages.Editor);
-  const {
-    getPage
-  } = useGetPage();
-  const {
-    createPageRevisionFrom
-  } = useCreatePageRevisionFrom();
-  useEffect(() => {
-    setLoading(true);
-    Promise.all([getSettings(), getPage({
-      id: route.params.id
-    }).then(page => {
-      if (page.status === WbPageStatus.Draft) {
-        setPage(getPageDataFromPage(page));
-        return;
-      }
-      return createPageRevisionFrom({
-        id: page.id
-      }).then(page => {
-        goToRoute(Routes.Pages.Editor, {
-          id: page.id,
-          folderId: page.location.folderId
-        });
-      });
-    })]).then(() => {
-      setLoading(false);
+import { WbPageStatus } from "../../constants.js";
+import { RevisionListDrawer } from "./PageEditor/Revisions/RevisionListDrawer.js";
+import { PageEditorDrawerProvider } from "./PageEditor/Revisions/usePageEditorDrawer.js";
+const getPageDataFromPage = (page)=>({
+        ...page,
+        id: page.id,
+        version: page.version,
+        status: page.status,
+        location: page.location,
+        properties: page.properties,
+        bindings: page.bindings,
+        elements: page.elements,
+        metadata: page.metadata,
+        state: {}
     });
-  }, [route.params.id]);
-  if (loading || !page) {
-    return /*#__PURE__*/React.createElement(OverlayLoader, {
-      text: "Loading page..."
+const PageEditor = ()=>{
+    const { getSettings } = useGetWebsiteBuilderSettings();
+    const [loading, setLoading] = useState(true);
+    const [page, setPage] = useState(null);
+    const [isRevisionListOpen, openRevisionList] = useState(false);
+    const { route } = useRoute(Routes.Pages.Editor);
+    const { getPage } = useGetPage();
+    useEffect(()=>{
+        setLoading(true);
+        Promise.all([
+            getSettings(),
+            getPage({
+                id: route.params.id
+            }).then((page)=>{
+                setPage(getPageDataFromPage(page));
+            })
+        ]).then(()=>{
+            setLoading(false);
+        });
+    }, [
+        route.params.id
+    ]);
+    if (loading || !page) return /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: "Loading page..."
     });
-  }
-  return /*#__PURE__*/React.createElement(DocumentEditor, {
-    key: page.id,
-    document: page,
-    name: EDITOR_NAME
-  }, /*#__PURE__*/React.createElement(DefaultEditorConfig, null), /*#__PURE__*/React.createElement(DefaultPageEditorConfig, null));
+    return /*#__PURE__*/ react.createElement(PageEditorDrawerProvider, {
+        openRevisionList: openRevisionList,
+        isRevisionListOpen: isRevisionListOpen
+    }, /*#__PURE__*/ react.createElement(DocumentEditor, {
+        key: page.id,
+        document: page,
+        name: EDITOR_NAME,
+        readOnly: page.status !== WbPageStatus.Draft
+    }, /*#__PURE__*/ react.createElement(DefaultEditorConfig, null), /*#__PURE__*/ react.createElement(DefaultPageEditorConfig, null), /*#__PURE__*/ react.createElement(RevisionListDrawer, {
+        page: page
+    })));
 };
+export { PageEditor };
 
 //# sourceMappingURL=PageEditor.js.map