@webiny/app-website-builder 0.0.0-unstable.06b2ede40f

package/BaseEditor/defaultConfig/Content/Preview/ScrollTracker.js

@@ -0,0 +1,67 @@
+export class ScrollTracker {
+  constructor(window, filter = () => true) {
+    this.window = window;
+    this.filter = filter;
+    this.changeTimeout = 150;
+    this.scrollStartSubscribers = new Set();
+    this.scrollSubscribers = new Set();
+    this.scrollEndSubscribers = new Set();
+    this.isChanging = false;
+    this.changeTimer = null;
+  }
+  onScrollStart(callback) {
+    this.scrollStartSubscribers.add(callback);
+    return () => this.scrollStartSubscribers.delete(callback);
+  }
+  onScroll(callback) {
+    this.scrollSubscribers.add(callback);
+    return () => this.scrollSubscribers.delete(callback);
+  }
+  onScrollEnd(callback) {
+    this.scrollEndSubscribers.add(callback);
+    return () => this.scrollEndSubscribers.delete(callback);
+  }
+  start() {
+    this.window.addEventListener("wheel", this.handleScroll, {
+      passive: true
+    });
+  }
+  destroy() {
+    this.window.removeEventListener("wheel", this.handleScroll);
+    if (this.changeTimer !== null) {
+      clearTimeout(this.changeTimer);
+    }
+    this.scrollStartSubscribers.clear();
+    this.scrollSubscribers.clear();
+    this.scrollEndSubscribers.clear();
+  }
+  handleScroll = e => {
+    const scrollEvent = e;
+    const isValidSource = this.filter(scrollEvent);
+    if (this.changeTimer !== null) {
+      clearTimeout(this.changeTimer);
+    }
+    if (!this.isChanging) {
+      if (isValidSource) {
+        this.isChanging = true;
+        this.notifySubscribers(this.scrollStartSubscribers, scrollEvent);
+      }
+    }
+    if (this.isChanging && isValidSource) {
+      this.notifySubscribers(this.scrollSubscribers, scrollEvent);
+    }
+    this.changeTimer = window.setTimeout(() => {
+      this.isChanging = false;
+      this.notifySubscribers(this.scrollEndSubscribers, scrollEvent);
+    }, this.changeTimeout);
+  };
+  notifySubscribers(subscribers, event) {
+    subscribers.forEach(callback => {
+      if (typeof callback === "function") {
+        callback(event);
+      }
+    });
+  }
+}
+
+//# sourceMappingURL=ScrollTracker.js.map

package/BaseEditor/defaultConfig/Content/Preview/ScrollTracker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ScrollTracker","constructor","window","filter","changeTimeout","scrollStartSubscribers","Set","scrollSubscribers","scrollEndSubscribers","isChanging","changeTimer","onScrollStart","callback","add","delete","onScroll","onScrollEnd","start","addEventListener","handleScroll","passive","destroy","removeEventListener","clearTimeout","clear","e","scrollEvent","isValidSource","notifySubscribers","setTimeout","subscribers","event","forEach"],"sources":["ScrollTracker.ts"],"sourcesContent":["type ScrollFilter = (event: WheelEvent) => boolean;\ntype ScrollHandler = (event: WheelEvent) => void;\n\nexport class ScrollTracker {\n    private readonly changeTimeout: number;\n    private readonly scrollStartSubscribers: Set<ScrollHandler>;\n    private readonly scrollSubscribers: Set<ScrollHandler>;\n    private readonly scrollEndSubscribers: Set<ScrollHandler>;\n    private isChanging: boolean;\n    private changeTimer: number | null;\n    private filter: ScrollFilter;\n    private window: Window;\n\n    constructor(window: Window, filter: ScrollFilter = () => true) {\n        this.window = window;\n        this.filter = filter;\n        this.changeTimeout = 150;\n        this.scrollStartSubscribers = new Set();\n        this.scrollSubscribers = new Set();\n        this.scrollEndSubscribers = new Set();\n        this.isChanging = false;\n        this.changeTimer = null;\n    }\n\n    public onScrollStart(callback: ScrollHandler): () => void {\n        this.scrollStartSubscribers.add(callback);\n        return () => this.scrollStartSubscribers.delete(callback);\n    }\n\n    public onScroll(callback: ScrollHandler): () => void {\n        this.scrollSubscribers.add(callback);\n        return () => this.scrollSubscribers.delete(callback);\n    }\n\n    public onScrollEnd(callback: ScrollHandler): () => void {\n        this.scrollEndSubscribers.add(callback);\n        return () => this.scrollEndSubscribers.delete(callback);\n    }\n\n    public start() {\n        this.window.addEventListener(\"wheel\", this.handleScroll, { passive: true });\n    }\n\n    public destroy(): void {\n        this.window.removeEventListener(\"wheel\", this.handleScroll);\n\n        if (this.changeTimer !== null) {\n            clearTimeout(this.changeTimer);\n        }\n        this.scrollStartSubscribers.clear();\n        this.scrollSubscribers.clear();\n        this.scrollEndSubscribers.clear();\n    }\n\n    private handleScroll = (e: Event): void => {\n        const scrollEvent = e as WheelEvent;\n        const isValidSource = this.filter(scrollEvent);\n\n        if (this.changeTimer !== null) {\n            clearTimeout(this.changeTimer);\n        }\n\n        if (!this.isChanging) {\n            if (isValidSource) {\n                this.isChanging = true;\n                this.notifySubscribers(this.scrollStartSubscribers, scrollEvent);\n            }\n        }\n\n        if (this.isChanging && isValidSource) {\n            this.notifySubscribers(this.scrollSubscribers, scrollEvent);\n        }\n\n        this.changeTimer = window.setTimeout(() => {\n            this.isChanging = false;\n            this.notifySubscribers(this.scrollEndSubscribers, scrollEvent);\n        }, this.changeTimeout);\n    };\n\n    private notifySubscribers(subscribers: Set<ScrollHandler>, event: WheelEvent): void {\n        subscribers.forEach(callback => {\n            if (typeof callback === \"function\") {\n                callback(event);\n            }\n        });\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/index.d.ts

@@ -0,0 +1 @@
+export * from "./Preview";

package/BaseEditor/defaultConfig/Content/Preview/index.js

@@ -0,0 +1,3 @@
+export * from "./Preview";
+
+//# sourceMappingURL=index.js.map

package/BaseEditor/defaultConfig/Content/Preview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Preview\";\n"],"mappings":"AAAA","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/mergeRefs.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function mergeRefs<T = any>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T>;

package/BaseEditor/defaultConfig/Content/Preview/mergeRefs.js

@@ -0,0 +1,13 @@
+export function mergeRefs(...refs) {
+  return value => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref && typeof ref === "object") {
+        ref.current = value;
+      }
+    }
+  };
+}
+
+//# sourceMappingURL=mergeRefs.js.map

package/BaseEditor/defaultConfig/Content/Preview/mergeRefs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mergeRefs","refs","value","ref","current"],"sources":["mergeRefs.ts"],"sourcesContent":["export function mergeRefs<T = any>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {\n    return (value: T) => {\n        for (const ref of refs) {\n            if (typeof ref === \"function\") {\n                ref(value);\n            } else if (ref && typeof ref === \"object\") {\n                (ref as React.MutableRefObject<T | null>).current = value;\n            }\n        }\n    };\n}\n"],"mappings":"AAAA,OAAO,SAASA,SAASA,CAAU,GAAGC,IAAkC,EAAwB;EAC5F,OAAQC,KAAQ,IAAK;IACjB,KAAK,MAAMC,GAAG,IAAIF,IAAI,EAAE;MACpB,IAAI,OAAOE,GAAG,KAAK,UAAU,EAAE;QAC3BA,GAAG,CAACD,KAAK,CAAC;MACd,CAAC,MAAM,IAAIC,GAAG,IAAI,OAAOA,GAAG,KAAK,QAAQ,EAAE;QACtCA,GAAG,CAAsCC,OAAO,GAAGF,KAAK;MAC7D;IACJ;EACJ,CAAC;AACL","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.d.ts

@@ -0,0 +1 @@
+export declare const useElementComponentManifest: (elementId: string) => import("@webiny/website-builder-sdk").ComponentManifest | undefined;

package/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js

@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+import { useDocumentEditor } from "../../../../DocumentEditor";
+import { $getComponentManifestByElementId } from "../../../../editorSdk/utils";
+export const useElementComponentManifest = elementId => {
+  const editor = useDocumentEditor();
+  return useMemo(() => {
+    return $getComponentManifestByElementId(editor, elementId ?? "");
+  }, [elementId]);
+};
+
+//# sourceMappingURL=useElementComponentManifest.js.map

package/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useDocumentEditor","$getComponentManifestByElementId","useElementComponentManifest","elementId","editor"],"sources":["useElementComponentManifest.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils\";\n\nexport const useElementComponentManifest = (elementId: string) => {\n    const editor = useDocumentEditor();\n\n    return useMemo(() => {\n        return $getComponentManifestByElementId(editor, elementId ?? \"\");\n    }, [elementId]);\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,iBAAiB;AAC1B,SAASC,gCAAgC;AAEzC,OAAO,MAAMC,2BAA2B,GAAIC,SAAiB,IAAK;EAC9D,MAAMC,MAAM,GAAGJ,iBAAiB,CAAC,CAAC;EAElC,OAAOD,OAAO,CAAC,MAAM;IACjB,OAAOE,gCAAgC,CAACG,MAAM,EAAED,SAAS,IAAI,EAAE,CAAC;EACpE,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;AACnB,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/useIframeUrl.d.ts

@@ -0,0 +1 @@
+export declare const useIframeUrl: () => string | null;

package/BaseEditor/defaultConfig/Content/Preview/useIframeUrl.js

@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import { useTenancy } from "@webiny/app-tenancy";
+import { useSelectFromDocument } from "../../../hooks/useSelectFromDocument";
+import { usePreviewDomain } from "./usePreviewDomain";
+export const useIframeUrl = () => {
+  const {
+    tenant
+  } = useTenancy();
+  const {
+    previewDomain
+  } = usePreviewDomain();
+  const id = useSelectFromDocument(document => document.id);
+  const documentType = useSelectFromDocument(document => document.metadata.documentType);
+  const path = useSelectFromDocument(document => document.properties.path);
+  return useMemo(() => {
+    if (!previewDomain) {
+      return null;
+    }
+    const newUrl = new URL(`${previewDomain}${path}`);
+    addSearchParamsFromDocument(tenant, newUrl, id, documentType);
+    return newUrl.toString();
+  }, [previewDomain, id, path, documentType]);
+};
+function addSearchParamsFromDocument(tenant, url, id, documentType) {
+  const searchParams = url.searchParams;
+  searchParams.set("wb.editing", "true");
+  searchParams.set("wb.type", documentType);
+  searchParams.set("wb.id", id);
+  searchParams.set("wb.path", url.pathname);
+  searchParams.set("wb.referrer", window.location.origin);
+  searchParams.set("wb.tenant", tenant);
+}
+
+//# sourceMappingURL=useIframeUrl.js.map

package/BaseEditor/defaultConfig/Content/Preview/useIframeUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useTenancy","useSelectFromDocument","usePreviewDomain","useIframeUrl","tenant","previewDomain","id","document","documentType","metadata","path","properties","newUrl","URL","addSearchParamsFromDocument","toString","url","searchParams","set","pathname","window","location","origin"],"sources":["useIframeUrl.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useTenancy } from \"@webiny/app-tenancy\";\nimport { useSelectFromDocument } from \"~/BaseEditor/hooks/useSelectFromDocument\";\nimport { usePreviewDomain } from \"./usePreviewDomain\";\n\nexport const useIframeUrl = () => {\n    const { tenant } = useTenancy();\n    const { previewDomain } = usePreviewDomain();\n\n    const id = useSelectFromDocument(document => document.id);\n    const documentType = useSelectFromDocument(document => document.metadata.documentType);\n    const path = useSelectFromDocument(document => document.properties.path);\n\n    return useMemo(() => {\n        if (!previewDomain) {\n            return null;\n        }\n        const newUrl = new URL(`${previewDomain}${path}`);\n        addSearchParamsFromDocument(tenant!, newUrl, id, documentType);\n        return newUrl.toString();\n    }, [previewDomain, id, path, documentType]);\n};\n\nfunction addSearchParamsFromDocument(tenant: string, url: URL, id: string, documentType: string) {\n    const searchParams = url.searchParams;\n    searchParams.set(\"wb.editing\", \"true\");\n    searchParams.set(\"wb.type\", documentType);\n    searchParams.set(\"wb.id\", id);\n    searchParams.set(\"wb.path\", url.pathname);\n    searchParams.set(\"wb.referrer\", window.location.origin);\n    searchParams.set(\"wb.tenant\", tenant);\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,UAAU,QAAQ,qBAAqB;AAChD,SAASC,qBAAqB;AAC9B,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM;IAAEC;EAAO,CAAC,GAAGJ,UAAU,CAAC,CAAC;EAC/B,MAAM;IAAEK;EAAc,CAAC,GAAGH,gBAAgB,CAAC,CAAC;EAE5C,MAAMI,EAAE,GAAGL,qBAAqB,CAACM,QAAQ,IAAIA,QAAQ,CAACD,EAAE,CAAC;EACzD,MAAME,YAAY,GAAGP,qBAAqB,CAACM,QAAQ,IAAIA,QAAQ,CAACE,QAAQ,CAACD,YAAY,CAAC;EACtF,MAAME,IAAI,GAAGT,qBAAqB,CAACM,QAAQ,IAAIA,QAAQ,CAACI,UAAU,CAACD,IAAI,CAAC;EAExE,OAAOX,OAAO,CAAC,MAAM;IACjB,IAAI,CAACM,aAAa,EAAE;MAChB,OAAO,IAAI;IACf;IACA,MAAMO,MAAM,GAAG,IAAIC,GAAG,CAAC,GAAGR,aAAa,GAAGK,IAAI,EAAE,CAAC;IACjDI,2BAA2B,CAACV,MAAM,EAAGQ,MAAM,EAAEN,EAAE,EAAEE,YAAY,CAAC;IAC9D,OAAOI,MAAM,CAACG,QAAQ,CAAC,CAAC;EAC5B,CAAC,EAAE,CAACV,aAAa,EAAEC,EAAE,EAAEI,IAAI,EAAEF,YAAY,CAAC,CAAC;AAC/C,CAAC;AAED,SAASM,2BAA2BA,CAACV,MAAc,EAAEY,GAAQ,EAAEV,EAAU,EAAEE,YAAoB,EAAE;EAC7F,MAAMS,YAAY,GAAGD,GAAG,CAACC,YAAY;EACrCA,YAAY,CAACC,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC;EACtCD,YAAY,CAACC,GAAG,CAAC,SAAS,EAAEV,YAAY,CAAC;EACzCS,YAAY,CAACC,GAAG,CAAC,OAAO,EAAEZ,EAAE,CAAC;EAC7BW,YAAY,CAACC,GAAG,CAAC,SAAS,EAAEF,GAAG,CAACG,QAAQ,CAAC;EACzCF,YAAY,CAACC,GAAG,CAAC,aAAa,EAAEE,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC;EACvDL,YAAY,CAACC,GAAG,CAAC,WAAW,EAAEd,MAAM,CAAC;AACzC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/useIsDragging.d.ts

@@ -0,0 +1 @@
+export declare function useIsDragging(): boolean;

package/BaseEditor/defaultConfig/Content/Preview/useIsDragging.js

@@ -0,0 +1,6 @@
+import { useDragLayer } from "react-dnd";
+export function useIsDragging() {
+  return useDragLayer(monitor => monitor.isDragging());
+}
+
+//# sourceMappingURL=useIsDragging.js.map

package/BaseEditor/defaultConfig/Content/Preview/useIsDragging.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useDragLayer","useIsDragging","monitor","isDragging"],"sources":["useIsDragging.ts"],"sourcesContent":["import { useDragLayer } from \"react-dnd\";\n\nexport function useIsDragging(): boolean {\n    return useDragLayer(monitor => monitor.isDragging());\n}\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,WAAW;AAExC,OAAO,SAASC,aAAaA,CAAA,EAAY;EACrC,OAAOD,YAAY,CAACE,OAAO,IAAIA,OAAO,CAACC,UAAU,CAAC,CAAC,CAAC;AACxD","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/usePreviewDomain.d.ts

@@ -0,0 +1,10 @@
+/**
+ * This hook loads preview domain from settings, and also takes into account the override
+ * via localstorage, which is a developers-only feature.
+ */
+export declare const usePreviewDomain: () => {
+    previewDomain: string;
+    setPreviewDomain: (domain: string) => void;
+    unsetPreviewDomain: () => void;
+    isOverridden: boolean | "" | null;
+};

package/BaseEditor/defaultConfig/Content/Preview/usePreviewDomain.js

@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useState } from "react";
+import { useGetWebsiteBuilderSettings } from "../../../../features";
+import { useSubscribeToLocalStorage } from "./useSubscribeToLocalStorage";
+const CUSTOM_PREVIEW_DOMAIN = "webiny_wb_custom_preview_domain";
+
+/**
+ * This hook loads preview domain from settings, and also takes into account the override
+ * via localstorage, which is a developers-only feature.
+ */
+export const usePreviewDomain = () => {
+  const [previewDomain, setDomainFromSettings] = useState("");
+  const [customDomain, setCustomDomain] = useState(() => window.localStorage.getItem(CUSTOM_PREVIEW_DOMAIN));
+  const localStorage = useSubscribeToLocalStorage(CUSTOM_PREVIEW_DOMAIN, newValue => {
+    setCustomDomain(newValue);
+  });
+  const setPreviewDomain = useCallback(domain => {
+    if (domain === previewDomain) {
+      localStorage.unset();
+    } else {
+      localStorage.set(domain);
+    }
+  }, [previewDomain]);
+  const unsetPreviewDomain = useCallback(() => {
+    localStorage.unset();
+  }, []);
+  const {
+    getSettings
+  } = useGetWebsiteBuilderSettings();
+  useEffect(() => {
+    getSettings().then(settings => {
+      setDomainFromSettings(settings.previewDomain ?? "http://localhost:3000");
+    });
+  }, []);
+  return {
+    previewDomain: customDomain ?? previewDomain,
+    setPreviewDomain,
+    unsetPreviewDomain,
+    isOverridden: customDomain && customDomain !== previewDomain
+  };
+};
+
+//# sourceMappingURL=usePreviewDomain.js.map

package/BaseEditor/defaultConfig/Content/Preview/usePreviewDomain.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useState","useGetWebsiteBuilderSettings","useSubscribeToLocalStorage","CUSTOM_PREVIEW_DOMAIN","usePreviewDomain","previewDomain","setDomainFromSettings","customDomain","setCustomDomain","window","localStorage","getItem","newValue","setPreviewDomain","domain","unset","set","unsetPreviewDomain","getSettings","then","settings","isOverridden"],"sources":["usePreviewDomain.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { useGetWebsiteBuilderSettings } from \"~/features\";\nimport { useSubscribeToLocalStorage } from \"./useSubscribeToLocalStorage\";\n\nconst CUSTOM_PREVIEW_DOMAIN = \"webiny_wb_custom_preview_domain\";\n\n/**\n * This hook loads preview domain from settings, and also takes into account the override\n * via localstorage, which is a developers-only feature.\n */\nexport const usePreviewDomain = () => {\n    const [previewDomain, setDomainFromSettings] = useState<string>(\"\");\n\n    const [customDomain, setCustomDomain] = useState(() =>\n        window.localStorage.getItem(CUSTOM_PREVIEW_DOMAIN)\n    );\n\n    const localStorage = useSubscribeToLocalStorage(CUSTOM_PREVIEW_DOMAIN, newValue => {\n        setCustomDomain(newValue);\n    });\n\n    const setPreviewDomain = useCallback(\n        (domain: string) => {\n            if (domain === previewDomain) {\n                localStorage.unset();\n            } else {\n                localStorage.set(domain);\n            }\n        },\n        [previewDomain]\n    );\n\n    const unsetPreviewDomain = useCallback(() => {\n        localStorage.unset();\n    }, []);\n\n    const { getSettings } = useGetWebsiteBuilderSettings();\n\n    useEffect(() => {\n        getSettings().then(settings => {\n            setDomainFromSettings(settings.previewDomain ?? \"http://localhost:3000\");\n        });\n    }, []);\n\n    return {\n        previewDomain: customDomain ?? previewDomain,\n        setPreviewDomain,\n        unsetPreviewDomain,\n        isOverridden: customDomain && customDomain !== previewDomain\n    };\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AACxD,SAASC,4BAA4B;AACrC,SAASC,0BAA0B;AAEnC,MAAMC,qBAAqB,GAAG,iCAAiC;;AAE/D;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM,CAACC,aAAa,EAAEC,qBAAqB,CAAC,GAAGN,QAAQ,CAAS,EAAE,CAAC;EAEnE,MAAM,CAACO,YAAY,EAAEC,eAAe,CAAC,GAAGR,QAAQ,CAAC,MAC7CS,MAAM,CAACC,YAAY,CAACC,OAAO,CAACR,qBAAqB,CACrD,CAAC;EAED,MAAMO,YAAY,GAAGR,0BAA0B,CAACC,qBAAqB,EAAES,QAAQ,IAAI;IAC/EJ,eAAe,CAACI,QAAQ,CAAC;EAC7B,CAAC,CAAC;EAEF,MAAMC,gBAAgB,GAAGf,WAAW,CAC/BgB,MAAc,IAAK;IAChB,IAAIA,MAAM,KAAKT,aAAa,EAAE;MAC1BK,YAAY,CAACK,KAAK,CAAC,CAAC;IACxB,CAAC,MAAM;MACHL,YAAY,CAACM,GAAG,CAACF,MAAM,CAAC;IAC5B;EACJ,CAAC,EACD,CAACT,aAAa,CAClB,CAAC;EAED,MAAMY,kBAAkB,GAAGnB,WAAW,CAAC,MAAM;IACzCY,YAAY,CAACK,KAAK,CAAC,CAAC;EACxB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM;IAAEG;EAAY,CAAC,GAAGjB,4BAA4B,CAAC,CAAC;EAEtDF,SAAS,CAAC,MAAM;IACZmB,WAAW,CAAC,CAAC,CAACC,IAAI,CAACC,QAAQ,IAAI;MAC3Bd,qBAAqB,CAACc,QAAQ,CAACf,aAAa,IAAI,uBAAuB,CAAC;IAC5E,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACHA,aAAa,EAAEE,YAAY,IAAIF,aAAa;IAC5CQ,gBAAgB;IAChBI,kBAAkB;IAClBI,YAAY,EAAEd,YAAY,IAAIA,YAAY,KAAKF;EACnD,CAAC;AACL,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/useProximityDropzone.d.ts

@@ -0,0 +1,21 @@
+import type { Box } from "./Box";
+import type { DropZoneProximity } from "./DropZoneManager";
+export interface DropEvent {
+    item: {
+        id?: string;
+        componentName: string;
+    };
+    target: {
+        parentId: string;
+        slot: string;
+        index: number;
+    };
+}
+interface UseProximityDropzoneParams {
+    id: string;
+    box: Box;
+}
+export declare function useProximityDropzone({ id, box }: UseProximityDropzoneParams): {
+    proximity: DropZoneProximity | null;
+};
+export {};

package/BaseEditor/defaultConfig/Content/Preview/useProximityDropzone.js

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { useDropZoneManager } from "./DropZoneManagerProvider";
+export function useProximityDropzone({
+  id,
+  box
+}) {
+  const dropzoneManager = useDropZoneManager();
+  const [proximity, setProximity] = useState(null);
+  useEffect(() => {
+    dropzoneManager.register({
+      id,
+      box,
+      onProximityChange: setProximity
+    });
+    return () => {
+      dropzoneManager.unregister(id);
+    };
+  }, [id, box]);
+  return {
+    proximity
+  };
+}
+
+//# sourceMappingURL=useProximityDropzone.js.map

package/BaseEditor/defaultConfig/Content/Preview/useProximityDropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","useDropZoneManager","useProximityDropzone","id","box","dropzoneManager","proximity","setProximity","register","onProximityChange","unregister"],"sources":["useProximityDropzone.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDropZoneManager } from \"./DropZoneManagerProvider\";\nimport type { Box } from \"./Box\";\nimport type { DropZoneProximity } from \"~/BaseEditor/defaultConfig/Content/Preview/DropZoneManager\";\n\nexport interface DropEvent {\n    item: { id?: string; componentName: string };\n    target: { parentId: string; slot: string; index: number };\n}\n\ninterface UseProximityDropzoneParams {\n    id: string;\n    box: Box;\n}\n\nexport function useProximityDropzone({ id, box }: UseProximityDropzoneParams) {\n    const dropzoneManager = useDropZoneManager();\n    const [proximity, setProximity] = useState<DropZoneProximity | null>(null);\n\n    useEffect(() => {\n        dropzoneManager.register({\n            id,\n            box,\n            onProximityChange: setProximity\n        });\n\n        return () => {\n            dropzoneManager.unregister(id);\n        };\n    }, [id, box]);\n\n    return { proximity };\n}\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,kBAAkB;AAc3B,OAAO,SAASC,oBAAoBA,CAAC;EAAEC,EAAE;EAAEC;AAAgC,CAAC,EAAE;EAC1E,MAAMC,eAAe,GAAGJ,kBAAkB,CAAC,CAAC;EAC5C,MAAM,CAACK,SAAS,EAAEC,YAAY,CAAC,GAAGP,QAAQ,CAA2B,IAAI,CAAC;EAE1ED,SAAS,CAAC,MAAM;IACZM,eAAe,CAACG,QAAQ,CAAC;MACrBL,EAAE;MACFC,GAAG;MACHK,iBAAiB,EAAEF;IACvB,CAAC,CAAC;IAEF,OAAO,MAAM;MACTF,eAAe,CAACK,UAAU,CAACP,EAAE,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,CAACA,EAAE,EAAEC,GAAG,CAAC,CAAC;EAEb,OAAO;IAAEE;EAAU,CAAC;AACxB","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer.d.ts

@@ -0,0 +1,7 @@
+import type { ViewportManager } from "@webiny/website-builder-sdk";
+/**
+ * Calculate the real width of the preview container, taking into account the current display mode
+ * and actual container size. If the display mode width is larger than the available space, return the
+ * width of the available space.
+ */
+export declare const useResponsiveContainer: (viewportManager: ViewportManager) => string;

package/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer.js

@@ -0,0 +1,26 @@
+import { useEffect, useMemo, useState } from "react";
+import { useBreakpoint } from "../../../hooks/useBreakpoint";
+/**
+ * Calculate the real width of the preview container, taking into account the current display mode
+ * and actual container size. If the display mode width is larger than the available space, return the
+ * width of the available space.
+ */
+export const useResponsiveContainer = viewportManager => {
+  const [containerWidth, setContainerWidth] = useState(0);
+  useEffect(() => {
+    const updateContainerWidth = () => {
+      const width = document.body.clientWidth - 600;
+      setContainerWidth(width);
+    };
+    updateContainerWidth();
+    return viewportManager.onViewportChangeEnd(updateContainerWidth);
+  }, []);
+  const {
+    breakpoint
+  } = useBreakpoint();
+  return useMemo(() => {
+    return Math.min(containerWidth, breakpoint.maxWidth) + "px";
+  }, [breakpoint.name, containerWidth]);
+};
+
+//# sourceMappingURL=useResponsiveContainer.js.map

package/BaseEditor/defaultConfig/Content/Preview/useResponsiveContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useState","useBreakpoint","useResponsiveContainer","viewportManager","containerWidth","setContainerWidth","updateContainerWidth","width","document","body","clientWidth","onViewportChangeEnd","breakpoint","Math","min","maxWidth","name"],"sources":["useResponsiveContainer.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport type { ViewportManager } from \"@webiny/website-builder-sdk\";\n\n/**\n * Calculate the real width of the preview container, taking into account the current display mode\n * and actual container size. If the display mode width is larger than the available space, return the\n * width of the available space.\n */\nexport const useResponsiveContainer = (viewportManager: ViewportManager) => {\n    const [containerWidth, setContainerWidth] = useState(0);\n\n    useEffect(() => {\n        const updateContainerWidth = () => {\n            const width = document.body.clientWidth - 600;\n            setContainerWidth(width);\n        };\n\n        updateContainerWidth();\n\n        return viewportManager.onViewportChangeEnd(updateContainerWidth);\n    }, []);\n\n    const { breakpoint } = useBreakpoint();\n\n    return useMemo(() => {\n        return Math.min(containerWidth, breakpoint.maxWidth) + \"px\";\n    }, [breakpoint.name, containerWidth]);\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,aAAa;AAGtB;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,GAAIC,eAAgC,IAAK;EACxE,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGL,QAAQ,CAAC,CAAC,CAAC;EAEvDF,SAAS,CAAC,MAAM;IACZ,MAAMQ,oBAAoB,GAAGA,CAAA,KAAM;MAC/B,MAAMC,KAAK,GAAGC,QAAQ,CAACC,IAAI,CAACC,WAAW,GAAG,GAAG;MAC7CL,iBAAiB,CAACE,KAAK,CAAC;IAC5B,CAAC;IAEDD,oBAAoB,CAAC,CAAC;IAEtB,OAAOH,eAAe,CAACQ,mBAAmB,CAACL,oBAAoB,CAAC;EACpE,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM;IAAEM;EAAW,CAAC,GAAGX,aAAa,CAAC,CAAC;EAEtC,OAAOF,OAAO,CAAC,MAAM;IACjB,OAAOc,IAAI,CAACC,GAAG,CAACV,cAAc,EAAEQ,UAAU,CAACG,QAAQ,CAAC,GAAG,IAAI;EAC/D,CAAC,EAAE,CAACH,UAAU,CAACI,IAAI,EAAEZ,cAAc,CAAC,CAAC;AACzC,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Content/Preview/useSubscribeToLocalStorage.d.ts

@@ -0,0 +1,10 @@
+type Listener = (newValue: string | null, oldValue: string | null) => void;
+/**
+ * React hook to subscribe to localStorage changes on a specific key.
+ * Fires on cross-tab change only (native behavior), but also supports same-tab updates via custom event.
+ */
+export declare function useSubscribeToLocalStorage(key: string, listener: Listener): {
+    set: (value: string) => void;
+    unset: () => void;
+};
+export {};

package/BaseEditor/defaultConfig/Content/Preview/useSubscribeToLocalStorage.js

@@ -0,0 +1,63 @@
+import { useCallback, useEffect } from "react";
+const listeners = {};
+function subscribe(key, listener) {
+  if (!listeners[key]) {
+    listeners[key] = new Set();
+  }
+  listeners[key].add(listener);
+  const handler = e => {
+    if (e.key === key) {
+      listeners[key]?.forEach(fn => fn(e.newValue, e.oldValue));
+    }
+  };
+  const handleCustomEvent = e => {
+    const detail = e.detail;
+    if (detail.key === key) {
+      listeners[key]?.forEach(fn => fn(detail.value, localStorage.getItem(key)));
+    }
+  };
+  window.addEventListener("storage", handler);
+  window.addEventListener("local-storage-change", handleCustomEvent);
+  return () => {
+    listeners[key]?.delete(listener);
+    if (listeners[key]?.size === 0) {
+      window.removeEventListener("storage", handler);
+      window.removeEventListener("local-storage-change", handleCustomEvent);
+      delete listeners[key];
+    }
+  };
+}
+
+/**
+ * React hook to subscribe to localStorage changes on a specific key.
+ * Fires on cross-tab change only (native behavior), but also supports same-tab updates via custom event.
+ */
+export function useSubscribeToLocalStorage(key, listener) {
+  useEffect(() => {
+    return subscribe(key, listener);
+  }, [key, listener]);
+  const set = useCallback(value => {
+    localStorage.setItem(key, value);
+    window.dispatchEvent(new CustomEvent("local-storage-change", {
+      detail: {
+        key,
+        value
+      }
+    }));
+  }, []);
+  const unset = useCallback(() => {
+    localStorage.removeItem(key);
+    window.dispatchEvent(new CustomEvent("local-storage-change", {
+      detail: {
+        key,
+        value: null
+      }
+    }));
+  }, []);
+  return {
+    set,
+    unset
+  };
+}
+
+//# sourceMappingURL=useSubscribeToLocalStorage.js.map

package/BaseEditor/defaultConfig/Content/Preview/useSubscribeToLocalStorage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","listeners","subscribe","key","listener","Set","add","handler","e","forEach","fn","newValue","oldValue","handleCustomEvent","detail","value","localStorage","getItem","window","addEventListener","delete","size","removeEventListener","useSubscribeToLocalStorage","set","setItem","dispatchEvent","CustomEvent","unset","removeItem"],"sources":["useSubscribeToLocalStorage.ts"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\n\ntype Listener = (newValue: string | null, oldValue: string | null) => void;\n\nconst listeners: Record<string, Set<Listener>> = {};\n\nfunction subscribe(key: string, listener: Listener): () => void {\n    if (!listeners[key]) {\n        listeners[key] = new Set();\n    }\n    listeners[key].add(listener);\n\n    const handler = (e: StorageEvent) => {\n        if (e.key === key) {\n            listeners[key]?.forEach(fn => fn(e.newValue, e.oldValue));\n        }\n    };\n\n    const handleCustomEvent = (e: Event) => {\n        const detail = (e as CustomEvent).detail;\n        if (detail.key === key) {\n            listeners[key]?.forEach(fn => fn(detail.value, localStorage.getItem(key)));\n        }\n    };\n\n    window.addEventListener(\"storage\", handler);\n    window.addEventListener(\"local-storage-change\", handleCustomEvent);\n\n    return () => {\n        listeners[key]?.delete(listener);\n        if (listeners[key]?.size === 0) {\n            window.removeEventListener(\"storage\", handler);\n            window.removeEventListener(\"local-storage-change\", handleCustomEvent);\n            delete listeners[key];\n        }\n    };\n}\n\n/**\n * React hook to subscribe to localStorage changes on a specific key.\n * Fires on cross-tab change only (native behavior), but also supports same-tab updates via custom event.\n */\nexport function useSubscribeToLocalStorage(\n    key: string,\n    listener: Listener\n): {\n    set: (value: string) => void;\n    unset: () => void;\n} {\n    useEffect(() => {\n        return subscribe(key, listener);\n    }, [key, listener]);\n\n    const set = useCallback((value: string) => {\n        localStorage.setItem(key, value);\n        window.dispatchEvent(\n            new CustomEvent(\"local-storage-change\", {\n                detail: { key, value }\n            })\n        );\n    }, []);\n\n    const unset = useCallback(() => {\n        localStorage.removeItem(key);\n        window.dispatchEvent(\n            new CustomEvent(\"local-storage-change\", {\n                detail: { key, value: null }\n            })\n        );\n    }, []);\n\n    return { set, unset };\n}\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,QAAQ,OAAO;AAI9C,MAAMC,SAAwC,GAAG,CAAC,CAAC;AAEnD,SAASC,SAASA,CAACC,GAAW,EAAEC,QAAkB,EAAc;EAC5D,IAAI,CAACH,SAAS,CAACE,GAAG,CAAC,EAAE;IACjBF,SAAS,CAACE,GAAG,CAAC,GAAG,IAAIE,GAAG,CAAC,CAAC;EAC9B;EACAJ,SAAS,CAACE,GAAG,CAAC,CAACG,GAAG,CAACF,QAAQ,CAAC;EAE5B,MAAMG,OAAO,GAAIC,CAAe,IAAK;IACjC,IAAIA,CAAC,CAACL,GAAG,KAAKA,GAAG,EAAE;MACfF,SAAS,CAACE,GAAG,CAAC,EAAEM,OAAO,CAACC,EAAE,IAAIA,EAAE,CAACF,CAAC,CAACG,QAAQ,EAAEH,CAAC,CAACI,QAAQ,CAAC,CAAC;IAC7D;EACJ,CAAC;EAED,MAAMC,iBAAiB,GAAIL,CAAQ,IAAK;IACpC,MAAMM,MAAM,GAAIN,CAAC,CAAiBM,MAAM;IACxC,IAAIA,MAAM,CAACX,GAAG,KAAKA,GAAG,EAAE;MACpBF,SAAS,CAACE,GAAG,CAAC,EAAEM,OAAO,CAACC,EAAE,IAAIA,EAAE,CAACI,MAAM,CAACC,KAAK,EAAEC,YAAY,CAACC,OAAO,CAACd,GAAG,CAAC,CAAC,CAAC;IAC9E;EACJ,CAAC;EAEDe,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAEZ,OAAO,CAAC;EAC3CW,MAAM,CAACC,gBAAgB,CAAC,sBAAsB,EAAEN,iBAAiB,CAAC;EAElE,OAAO,MAAM;IACTZ,SAAS,CAACE,GAAG,CAAC,EAAEiB,MAAM,CAAChB,QAAQ,CAAC;IAChC,IAAIH,SAAS,CAACE,GAAG,CAAC,EAAEkB,IAAI,KAAK,CAAC,EAAE;MAC5BH,MAAM,CAACI,mBAAmB,CAAC,SAAS,EAAEf,OAAO,CAAC;MAC9CW,MAAM,CAACI,mBAAmB,CAAC,sBAAsB,EAAET,iBAAiB,CAAC;MACrE,OAAOZ,SAAS,CAACE,GAAG,CAAC;IACzB;EACJ,CAAC;AACL;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASoB,0BAA0BA,CACtCpB,GAAW,EACXC,QAAkB,EAIpB;EACEJ,SAAS,CAAC,MAAM;IACZ,OAAOE,SAAS,CAACC,GAAG,EAAEC,QAAQ,CAAC;EACnC,CAAC,EAAE,CAACD,GAAG,EAAEC,QAAQ,CAAC,CAAC;EAEnB,MAAMoB,GAAG,GAAGzB,WAAW,CAAEgB,KAAa,IAAK;IACvCC,YAAY,CAACS,OAAO,CAACtB,GAAG,EAAEY,KAAK,CAAC;IAChCG,MAAM,CAACQ,aAAa,CAChB,IAAIC,WAAW,CAAC,sBAAsB,EAAE;MACpCb,MAAM,EAAE;QAAEX,GAAG;QAAEY;MAAM;IACzB,CAAC,CACL,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMa,KAAK,GAAG7B,WAAW,CAAC,MAAM;IAC5BiB,YAAY,CAACa,UAAU,CAAC1B,GAAG,CAAC;IAC5Be,MAAM,CAACQ,aAAa,CAChB,IAAIC,WAAW,CAAC,sBAAsB,EAAE;MACpCb,MAAM,EAAE;QAAEX,GAAG;QAAEY,KAAK,EAAE;MAAK;IAC/B,CAAC,CACL,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IAAES,GAAG;IAAEI;EAAM,CAAC;AACzB","ignoreList":[]}

package/BaseEditor/defaultConfig/DefaultEditorConfig.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const DefaultEditorConfig: React.MemoExoticComponent<() => React.JSX.Element>;

package/BaseEditor/defaultConfig/DefaultEditorConfig.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { ReactComponent as TouchIcon } from "@webiny/icons/touch_app.svg";
+import { Breadcrumbs } from "./Content/Breadcrumbs";
+import { EditorConfig } from "../config";
+import { InfoMessage } from "./Sidebar/InfoMessage";
+import { StyleSettingsGroup } from "./Sidebar/StyleSettings/StyleSettingsGroup";
+import { StyleProperties } from "./Sidebar/StyleSettings/StyleProperties";
+import { ElementSettingsGroup } from "./Sidebar/ElementSettings/ElementSettingsGroup";
+import { InsertElementsTab } from "./Toolbar/InsertElements/InsertElementsTab";
+import { NavigatorTab } from "./Toolbar/Navigator/NavigatorTab";
+import { CommandHandlers } from "../commandHandlers";
+import { ElementSettings } from "./Sidebar/ElementSettings/ElementSettings";
+import { ElementInputRenderers } from "./ElementInputRenderers";
+import { DocumentPreview } from "./Content/Preview/DocumentPreview";
+const {
+  Ui
+} = EditorConfig;
+const ClickToActivate = () => {
+  return /*#__PURE__*/React.createElement(Ui.NoActiveElement, null, /*#__PURE__*/React.createElement(InfoMessage, {
+    icon: /*#__PURE__*/React.createElement(TouchIcon, null),
+    message: "Select an element on the canvas to activate this panel."
+  }));
+};
+export const DefaultEditorConfig = /*#__PURE__*/React.memo(() => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorConfig, null, /*#__PURE__*/React.createElement(CommandHandlers, null), /*#__PURE__*/React.createElement(ElementInputRenderers, null), /*#__PURE__*/React.createElement(Ui.Content.Element, {
+    name: "breadcrumbs",
+    element: /*#__PURE__*/React.createElement(Breadcrumbs, null)
+  }), /*#__PURE__*/React.createElement(Ui.Content.Element, {
+    name: "preview",
+    element: /*#__PURE__*/React.createElement(DocumentPreview, null)
+  }), /*#__PURE__*/React.createElement(Ui.Toolbar.Element, {
+    name: "insertElements",
+    group: "tabs",
+    element: /*#__PURE__*/React.createElement(InsertElementsTab, null)
+  }), /*#__PURE__*/React.createElement(Ui.Toolbar.Element, {
+    name: "navigator",
+    group: "tabs",
+    element: /*#__PURE__*/React.createElement(NavigatorTab, null)
+  }), /*#__PURE__*/React.createElement(Ui.Sidebar.Group, {
+    name: "element",
+    element: /*#__PURE__*/React.createElement(ElementSettingsGroup, null)
+  }), /*#__PURE__*/React.createElement(Ui.Sidebar.Group, {
+    name: "style",
+    element: /*#__PURE__*/React.createElement(StyleSettingsGroup, null)
+  }), /*#__PURE__*/React.createElement(Ui.Sidebar.Element, {
+    name: "styleSettings",
+    group: "style",
+    element: /*#__PURE__*/React.createElement(Ui.OnActiveElement, null, /*#__PURE__*/React.createElement(StyleProperties, null))
+  }), /*#__PURE__*/React.createElement(Ui.Sidebar.Element, {
+    name: "styleInactive",
+    group: "style",
+    element: /*#__PURE__*/React.createElement(ClickToActivate, null)
+  }), /*#__PURE__*/React.createElement(Ui.Sidebar.Element, {
+    name: "elementInactive",
+    group: "element",
+    element: /*#__PURE__*/React.createElement(ClickToActivate, null)
+  }), /*#__PURE__*/React.createElement(Ui.Sidebar.Element, {
+    name: "elementSettings",
+    group: "element",
+    element: /*#__PURE__*/React.createElement(Ui.OnActiveElement, null, /*#__PURE__*/React.createElement(ElementSettings, null))
+  })));
+});
+DefaultEditorConfig.displayName = "DefaultEditorConfig";
+
+//# sourceMappingURL=DefaultEditorConfig.js.map

package/BaseEditor/defaultConfig/DefaultEditorConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","TouchIcon","Breadcrumbs","EditorConfig","InfoMessage","StyleSettingsGroup","StyleProperties","ElementSettingsGroup","InsertElementsTab","NavigatorTab","CommandHandlers","ElementSettings","ElementInputRenderers","DocumentPreview","Ui","ClickToActivate","createElement","NoActiveElement","icon","message","DefaultEditorConfig","memo","Fragment","Content","Element","name","element","Toolbar","group","Sidebar","Group","OnActiveElement","displayName"],"sources":["DefaultEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as TouchIcon } from \"@webiny/icons/touch_app.svg\";\nimport { Breadcrumbs } from \"./Content/Breadcrumbs\";\nimport { EditorConfig } from \"~/BaseEditor/config\";\nimport { InfoMessage } from \"./Sidebar/InfoMessage\";\nimport { StyleSettingsGroup } from \"./Sidebar/StyleSettings/StyleSettingsGroup\";\nimport { StyleProperties } from \"./Sidebar/StyleSettings/StyleProperties\";\nimport { ElementSettingsGroup } from \"./Sidebar/ElementSettings/ElementSettingsGroup\";\nimport { InsertElementsTab } from \"./Toolbar/InsertElements/InsertElementsTab\";\nimport { NavigatorTab } from \"./Toolbar/Navigator/NavigatorTab\";\nimport { CommandHandlers } from \"~/BaseEditor/commandHandlers\";\nimport { ElementSettings } from \"./Sidebar/ElementSettings/ElementSettings\";\nimport { ElementInputRenderers } from \"./ElementInputRenderers\";\nimport { DocumentPreview } from \"./Content/Preview/DocumentPreview\";\n\nconst { Ui } = EditorConfig;\n\nconst ClickToActivate = () => {\n    return (\n        <Ui.NoActiveElement>\n            <InfoMessage\n                icon={<TouchIcon />}\n                message={\"Select an element on the canvas to activate this panel.\"}\n            />\n        </Ui.NoActiveElement>\n    );\n};\n\nexport const DefaultEditorConfig = React.memo(() => {\n    return (\n        <>\n            <EditorConfig>\n                <CommandHandlers />\n                <ElementInputRenderers />\n                <Ui.Content.Element name={\"breadcrumbs\"} element={<Breadcrumbs />} />\n                <Ui.Content.Element name={\"preview\"} element={<DocumentPreview />} />\n                <Ui.Toolbar.Element\n                    name={\"insertElements\"}\n                    group={\"tabs\"}\n                    element={<InsertElementsTab />}\n                />\n                <Ui.Toolbar.Element name={\"navigator\"} group={\"tabs\"} element={<NavigatorTab />} />\n                {/* Sidebar Groups */}\n                <Ui.Sidebar.Group name={\"element\"} element={<ElementSettingsGroup />} />\n                <Ui.Sidebar.Group name={\"style\"} element={<StyleSettingsGroup />} />\n                {/* Style Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"styleSettings\"}\n                    group={\"style\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <StyleProperties />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                <Ui.Sidebar.Element\n                    name={\"styleInactive\"}\n                    group={\"style\"}\n                    element={<ClickToActivate />}\n                />\n                {/* Element Settings Tab */}\n                <Ui.Sidebar.Element\n                    name={\"elementInactive\"}\n                    group={\"element\"}\n                    element={<ClickToActivate />}\n                />\n                {/* This element renders element properties. */}\n                <Ui.Sidebar.Element\n                    name={\"elementSettings\"}\n                    group={\"element\"}\n                    element={\n                        <Ui.OnActiveElement>\n                            <ElementSettings />\n                        </Ui.OnActiveElement>\n                    }\n                />\n                {/*<Ui.Sidebar.Element\n                    name={\"stateEditor\"}\n                    group={\"element\"}\n                    element={<DocumentStateEditor />}\n                />*/}\n            </EditorConfig>\n        </>\n    );\n});\n\nDefaultEditorConfig.displayName = \"DefaultEditorConfig\";\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/DocumentStateEditor/DocumentStateEditor.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const DocumentStateEditor: (() => React.JSX.Element) & {
+    displayName: string;
+};

package/BaseEditor/defaultConfig/DocumentStateEditor/DocumentStateEditor.js

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import MonacoEditor from "@monaco-editor/react";
+import { Button } from "@webiny/admin-ui";
+import { useDialogs } from "@webiny/app-admin";
+import { Bind } from "@webiny/form";
+import { useDocumentEditor } from "../../../DocumentEditor";
+import { autorun, toJS } from "mobx";
+import { observer } from "mobx-react-lite";
+const monacoOptions = {
+  minimap: {
+    enabled: false
+  }
+};
+const DialogForm = () => {
+  return /*#__PURE__*/React.createElement(Bind, {
+    name: "state"
+  }, ({
+    value,
+    onChange
+  }) => /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: "60vh"
+    }
+  }, /*#__PURE__*/React.createElement(MonacoEditor, {
+    language: "json",
+    defaultValue: value,
+    options: monacoOptions,
+    onChange: onChange
+  })));
+};
+export const DocumentStateEditor = observer(() => {
+  const dialog = useDialogs();
+  const editor = useDocumentEditor();
+  const [state, setState] = useState(() => JSON.stringify(toJS(editor.getDocumentState().read().state), null, 2));
+  useEffect(() => {
+    autorun(() => {
+      const state = editor.getDocumentState().read().state;
+      setState(JSON.stringify(toJS(state), null, 2));
+    });
+  }, []);
+  const openDialog = () => {
+    dialog.showDialog({
+      title: "Document State",
+      content: /*#__PURE__*/React.createElement(DialogForm, {
+        key: state
+      }),
+      formData: {
+        state
+      },
+      acceptLabel: "Save State",
+      cancelLabel: "Cancel",
+      onAccept: ({
+        state
+      }) => {
+        editor.updateDocument(document => {
+          document.state = JSON.parse(state);
+        });
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(Button, {
+    className: "wby-absolute wby-bottom-0 wby-w-full",
+    variant: "secondary",
+    onClick: openDialog,
+    text: "Edit State"
+  });
+});
+
+//# sourceMappingURL=DocumentStateEditor.js.map

package/BaseEditor/defaultConfig/DocumentStateEditor/DocumentStateEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","MonacoEditor","Button","useDialogs","Bind","useDocumentEditor","autorun","toJS","observer","monacoOptions","minimap","enabled","DialogForm","createElement","name","value","onChange","style","height","language","defaultValue","options","DocumentStateEditor","dialog","editor","state","setState","JSON","stringify","getDocumentState","read","openDialog","showDialog","title","content","key","formData","acceptLabel","cancelLabel","onAccept","updateDocument","document","parse","className","variant","onClick","text"],"sources":["DocumentStateEditor.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport MonacoEditor from \"@monaco-editor/react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { useDialogs } from \"@webiny/app-admin\";\nimport type { GenericFormData } from \"@webiny/form\";\nimport { Bind } from \"@webiny/form\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { autorun, toJS } from \"mobx\";\nimport { observer } from \"mobx-react-lite\";\nimport type { EditorDocument } from \"@webiny/website-builder-sdk\";\n\nconst monacoOptions = { minimap: { enabled: false } };\n\nconst DialogForm = () => {\n    return (\n        <Bind name={\"state\"}>\n            {({ value, onChange }) => (\n                <div style={{ height: \"60vh\" }}>\n                    <MonacoEditor\n                        language={\"json\"}\n                        defaultValue={value}\n                        options={monacoOptions}\n                        onChange={onChange}\n                    />\n                </div>\n            )}\n        </Bind>\n    );\n};\n\nexport const DocumentStateEditor = observer(() => {\n    const dialog = useDialogs();\n    const editor = useDocumentEditor<EditorDocument>();\n    const [state, setState] = useState(() =>\n        JSON.stringify(toJS(editor.getDocumentState().read().state), null, 2)\n    );\n\n    useEffect(() => {\n        autorun(() => {\n            const state = editor.getDocumentState().read().state;\n            setState(JSON.stringify(toJS(state), null, 2));\n        });\n    }, []);\n\n    const openDialog = () => {\n        dialog.showDialog({\n            title: \"Document State\",\n            content: <DialogForm key={state} />,\n            formData: {\n                state\n            },\n            acceptLabel: \"Save State\",\n            cancelLabel: \"Cancel\",\n            onAccept: ({ state }: GenericFormData) => {\n                editor.updateDocument(document => {\n                    document.state = JSON.parse(state);\n                });\n            }\n        });\n    };\n\n    return (\n        <Button\n            className=\"wby-absolute wby-bottom-0 wby-w-full\"\n            variant=\"secondary\"\n            onClick={openDialog}\n            text=\"Edit State\"\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,OAAOC,YAAY,MAAM,sBAAsB;AAC/C,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,UAAU,QAAQ,mBAAmB;AAE9C,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,iBAAiB;AAC1B,SAASC,OAAO,EAAEC,IAAI,QAAQ,MAAM;AACpC,SAASC,QAAQ,QAAQ,iBAAiB;AAG1C,MAAMC,aAAa,GAAG;EAAEC,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAM;AAAE,CAAC;AAErD,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACrB,oBACId,KAAA,CAAAe,aAAA,CAACT,IAAI;IAACU,IAAI,EAAE;EAAQ,GACf,CAAC;IAAEC,KAAK;IAAEC;EAAS,CAAC,kBACjBlB,KAAA,CAAAe,aAAA;IAAKI,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAO;EAAE,gBAC3BpB,KAAA,CAAAe,aAAA,CAACZ,YAAY;IACTkB,QAAQ,EAAE,MAAO;IACjBC,YAAY,EAAEL,KAAM;IACpBM,OAAO,EAAEZ,aAAc;IACvBO,QAAQ,EAAEA;EAAS,CACtB,CACA,CAEP,CAAC;AAEf,CAAC;AAED,OAAO,MAAMM,mBAAmB,GAAGd,QAAQ,CAAC,MAAM;EAC9C,MAAMe,MAAM,GAAGpB,UAAU,CAAC,CAAC;EAC3B,MAAMqB,MAAM,GAAGnB,iBAAiB,CAAiB,CAAC;EAClD,MAAM,CAACoB,KAAK,EAAEC,QAAQ,CAAC,GAAG1B,QAAQ,CAAC,MAC/B2B,IAAI,CAACC,SAAS,CAACrB,IAAI,CAACiB,MAAM,CAACK,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAACL,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC,CACxE,CAAC;EAED1B,SAAS,CAAC,MAAM;IACZO,OAAO,CAAC,MAAM;MACV,MAAMmB,KAAK,GAAGD,MAAM,CAACK,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAACL,KAAK;MACpDC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACrB,IAAI,CAACkB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAClD,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMM,UAAU,GAAGA,CAAA,KAAM;IACrBR,MAAM,CAACS,UAAU,CAAC;MACdC,KAAK,EAAE,gBAAgB;MACvBC,OAAO,eAAEpC,KAAA,CAAAe,aAAA,CAACD,UAAU;QAACuB,GAAG,EAAEV;MAAM,CAAE,CAAC;MACnCW,QAAQ,EAAE;QACNX;MACJ,CAAC;MACDY,WAAW,EAAE,YAAY;MACzBC,WAAW,EAAE,QAAQ;MACrBC,QAAQ,EAAEA,CAAC;QAAEd;MAAuB,CAAC,KAAK;QACtCD,MAAM,CAACgB,cAAc,CAACC,QAAQ,IAAI;UAC9BA,QAAQ,CAAChB,KAAK,GAAGE,IAAI,CAACe,KAAK,CAACjB,KAAK,CAAC;QACtC,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;EACN,CAAC;EAED,oBACI3B,KAAA,CAAAe,aAAA,CAACX,MAAM;IACHyC,SAAS,EAAC,sCAAsC;IAChDC,OAAO,EAAC,WAAW;IACnBC,OAAO,EAAEd,UAAW;IACpBe,IAAI,EAAC;EAAY,CACpB,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}