feat: create usingPageElements helper function (used in non-React c…

…ontexts)

packages/app-page-builder-elements/src/contexts/PageElements.tsx

@@ -1,11 +1,12 @@
-import React, { createContext, useCallback } from "react";
+import React, { createContext, useCallback, useEffect } from "react";
 import {
     Breakpoint,
     StylesObjects,
     PageElementsContextValue,
     PageElementsProviderProps
 } from "~/types";
 import { css, cx, CSSObject } from "@emotion/css";
+import { setUsingPageElements } from "~/utils";
 
 export const PageElementsContext = createContext(null);
 
@@ -115,6 +116,11 @@ export const PageElementsProvider: React.FC<PageElementsProviderProps> = ({
         return styles.map(item => css(item));
     }, []);
 
+    // Provides a way to check whether the `PageElementsProvider` React component was mounted or not,
+    // in a non-React context. In React contexts, it's strongly recommended the value of `usePageElements`
+    // React hook is checked instead (a `null` value means the provider React component wasn't mounted).
+    useEffect(() => setUsingPageElements(true), []);
+
     const value: PageElementsContextValue = {
         theme,
         renderers,

packages/app-page-builder-elements/src/utils/index.ts

@@ -0,0 +1,12 @@
+// Provides a way to check whether the `PageElementsProvider` React component was mounted or not,
+// in a non-React context. In React contexts, it's strongly recommended the value of `usePageElements`
+// React hook is checked instead (a `null` value means the provider React component wasn't mounted).
+let usingPageElementsFlag = false;
+
+export const usingPageElements = () => {
+    return usingPageElementsFlag;
+};
+
+export const setUsingPageElements = (value: boolean) => {
+    usingPageElementsFlag = value;
+};