Merge remote-tracking branch 'origin/dev' into dev

cypress-tests/cypress/e2e/admin/pageBuilder/templates/pageTemplatesCrud.cy.ts

@@ -34,7 +34,9 @@ context("Page Builder - Template CRUD", () => {
                 });
         });
         cy.findByTestId("pb-editor-page-title").click();
-        cy.get(`input[value="${templateName}"]`).clear().type(templateNameEdit).blur();
+        cy.findByTestId("pb-editor-page-title").within(() => {
+            cy.get(`input[value="${templateName}"]`).clear().type(templateNameEdit).blur();
+        });
         cy.findByRole("button", { name: "Save Changes" }).should("exist").click();
         cy.contains(templateNameEdit).should("exist");
 

packages/app-admin/src/hooks/index.ts

@@ -5,4 +5,5 @@ export * from "./useKeyHandler";
 export * from "./useShiftKey";
 export * from "./useModKey";
 export * from "./useIsMounted";
+export * from "./useStateIfMounted";
 export * from "./createGenericContext";

packages/app-admin/src/hooks/useStateIfMounted.ts

@@ -0,0 +1,20 @@
+import { useState, useCallback } from "react";
+import { useIsMounted } from "./useIsMounted";
+
+export function useStateIfMounted<T>(
+    defaultState: T
+): [T, React.Dispatch<React.SetStateAction<T>>] {
+    const [state, setState] = useState<T>(defaultState);
+    const { isMounted } = useIsMounted();
+
+    const setStateIfMounted = useCallback(
+        (state: React.SetStateAction<T>) => {
+            if (isMounted()) {
+                setState(state);
+            }
+        },
+        [isMounted]
+    );
+
+    return [state, setStateIfMounted];
+}

packages/app-page-builder/src/PageBuilder.tsx

@@ -1,6 +1,7 @@
 import React, { Fragment } from "react";
 import { HasPermission } from "@webiny/app-security";
 import { Plugins, AddMenu as Menu, createProviderPlugin, createDecorator } from "@webiny/app-admin";
+import { Global, css } from "@emotion/react";
 import { PageBuilderProvider as ContextProvider } from "./contexts/PageBuilder";
 import { ReactComponent as PagesIcon } from "./admin/assets/table_chart-24px.svg";
 import { WebsiteSettings } from "./modules/WebsiteSettings/WebsiteSettings";
@@ -109,9 +110,17 @@ const EditorRendererPlugin = createDecorator(EditorRenderer, () => {
     };
 });
 
+const displayContents = css`
+    pb-editor-elements,
+    pb-editor-element {
+        display: contents;
+    }
+`;
+
 export const PageBuilder = () => {
     return (
         <Fragment>
+            <Global styles={displayContents} />
             <PagesModule />
             <PageBuilderProviderPlugin />
             <EditorRendererPlugin />

packages/app-page-builder/src/admin/plugins/routes.tsx

@@ -95,7 +95,9 @@ const plugins: RoutePlugin[] = [
                         <SecureRoute permission={ROLE_PB_PAGES}>
                             <EditorPluginsLoader location={location}>
                                 <Helmet title={"Page Builder - Edit page"} />
-                                <PageEditor />
+                                <CompositionScope name={"pb.pageEditor"}>
+                                    <PageEditor />
+                                </CompositionScope>
                             </EditorPluginsLoader>
                         </SecureRoute>
                     );
@@ -137,7 +139,9 @@ const plugins: RoutePlugin[] = [
                         <SecureRoute permission={ROLE_PB_TEMPLATE}>
                             <EditorPluginsLoader location={location}>
                                 <Helmet title={"Page Builder - Edit template"} />
-                                <TemplateEditor />
+                                <CompositionScope name={"pb.templateEditor"}>
+                                    <TemplateEditor />
+                                </CompositionScope>
                             </EditorPluginsLoader>
                         </SecureRoute>
                     );
@@ -195,7 +199,9 @@ const plugins: RoutePlugin[] = [
                         <SecureRoute permission={ROLE_PB_PAGES}>
                             <EditorPluginsLoader location={location}>
                                 <Helmet title={"Page Builder - Edit block"} />
-                                <BlockEditor />
+                                <CompositionScope name={"pb.blockEditor"}>
+                                    <BlockEditor />
+                                </CompositionScope>
                             </EditorPluginsLoader>
                         </SecureRoute>
                     );

packages/app-page-builder/src/admin/views/Pages/PageTemplatesDialog.tsx

@@ -24,7 +24,7 @@ import {
     listStyle,
     TitleContent
 } from "./PageTemplatesDialogStyled";
-import * as Styled from "~/pageEditor/config/blockEditing/StyledComponents";
+import * as Styled from "~/templateEditor/config/Content/BlocksBrowser/StyledComponents";
 import { PbPageTemplate } from "~/types";
 
 const leftPanelStyle = css`

packages/app-page-builder/src/blockEditor/Editor.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo, useState } from "react";
 import { useApolloClient } from "@apollo/react-hooks";
+import get from "lodash/get";
 import { useRouter } from "@webiny/react-router";
 import { plugins } from "@webiny/plugins";
-import get from "lodash/get";
 import { Editor as PbEditor } from "~/admin/components/Editor";
 import { EditorLoadingScreen } from "~/admin/components/EditorLoadingScreen";
 import {
@@ -12,6 +12,7 @@ import {
 } from "~/admin/graphql/pages";
 import createElementPlugin from "~/admin/utils/createElementPlugin";
 import { createStateInitializer } from "./createStateInitializer";
+import { DefaultEditorConfig } from "~/editor";
 import { BlockEditorConfig } from "./config/BlockEditorConfig";
 import { BlockWithContent } from "~/blockEditor/state";
 import { createElement } from "~/editor/helpers";
@@ -67,8 +68,11 @@ export const BlockEditor = () => {
 
     return (
         <React.Suspense fallback={<EditorLoadingScreen />}>
+            <DefaultEditorConfig />
             <BlockEditorConfig />
             <LoadData>
+                {/* PbEditor components is a shell component, which is decorated in `src/PageBuilder.tsx`. */}
+                {/* This allows developers to override how the editor component is loaded and mounted. */}
                 <PbEditor
                     stateInitializerFactory={createStateInitializer(block as BlockWithContent)}
                 />

packages/app-page-builder/src/blockEditor/components/elementSettingsTab/ElementNotLinked.tsx

@@ -27,7 +27,7 @@ export const ElementLinkStatusWrapper = styled("div")({
     }
 });
 
-const ElementNotLinked = () => {
+export const ElementNotLinked = () => {
     return (
         <ElementLinkStatusWrapper>
             <strong>Element not linked</strong>
@@ -44,5 +44,3 @@ const ElementNotLinked = () => {
         </ElementLinkStatusWrapper>
     );
 };
-
-export default ElementNotLinked;

packages/app-page-builder/src/blockEditor/components/elementSettingsTab/TextInput.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
+import { useStateIfMounted } from "@webiny/app-admin";
 import { Input } from "@webiny/ui/Input";
 
 interface TextInputProps {
@@ -9,7 +10,7 @@ interface TextInputProps {
 }
 
 const TextInput = ({ label, value, onChange, onBlur }: TextInputProps) => {
-    const [localValue, setLocalValue] = useState(value);
+    const [localValue, setLocalValue] = useStateIfMounted(value);
 
     useEffect(() => {
         if (localValue !== value) {

packages/app-page-builder/src/blockEditor/components/elementSettingsTab/VariablesList.tsx

@@ -4,10 +4,10 @@ import { PbEditorElement, PbBlockVariable, PbElement } from "~/types";
 import { Typography } from "@webiny/ui/Typography";
 import { useMoveVariable } from "~/blockEditor/components/elementSettingsTab/variablesListHooks";
 import { useSortableList } from "~/hooks/useSortableList";
-import { Collapsable } from "~/editor/plugins/toolbar/navigator/StyledComponents";
+import { Collapsable } from "~/editor/defaultConfig/Toolbar/Navigator/StyledComponents";
 import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
 import { useUpdateElement } from "~/editor/hooks/useUpdateElement";
-import { ReactComponent as DragIndicatorIcon } from "~/editor/plugins/toolbar/navigator/assets/drag_indicator_24px.svg";
+import { ReactComponent as DragIndicatorIcon } from "~/editor/defaultConfig/Toolbar/Navigator/assets/drag_indicator_24px.svg";
 import { ReactComponent as DeleteIcon } from "~/editor/assets/icons/delete.svg";
 import { findElementByVariableId } from "~/blockEditor/config/eventActions/saveBlock";
 import { useEventActionHandler } from "~/editor/hooks/useEventActionHandler";

packages/app-page-builder/src/blockEditor/config/BlockEditorConfig.tsx

@@ -1,17 +1,15 @@
 import React from "react";
 import { EventActionPlugins, EventActionHandlerPlugin } from "./eventActions";
-import { EditorBarPlugins } from "./editorBar";
-import { ElementSettingsTabContentPlugin } from "./ElementSettingsTabContentPlugin";
-import { ToolbarActionsPlugin } from "./ToolbarActionsPlugin";
+import { DefaultBlockEditorConfig } from "./DefaultBlockEditorConfig";
+import { DefaultEditorConfig } from "~/editor";
 
 export const BlockEditorConfig = React.memo(() => {
     return (
         <>
+            <DefaultEditorConfig />
             <EventActionHandlerPlugin />
-            <EditorBarPlugins />
             <EventActionPlugins />
-            <ElementSettingsTabContentPlugin />
-            <ToolbarActionsPlugin />
+            <DefaultBlockEditorConfig />
         </>
     );
 });

packages/app-page-builder/src/blockEditor/config/DefaultBlockEditorConfig.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { BlockEditorConfig } from "~/blockEditor/editorConfig/BlockEditorConfig";
+import { BackButton } from "~/blockEditor/config/TopBar/BackButton";
+import { Title } from "~/blockEditor/config/TopBar/Title";
+import { SaveBlockButton } from "~/blockEditor/config/TopBar/SaveBlockButton";
+import { BlockSettingsButton } from "~/blockEditor/config/TopBar/BlockSettings/BlockSettingsButton";
+import { ElementSettingsDecorator } from "~/blockEditor/config/ElementSettingsTab";
+
+const { TopBar, Toolbar } = BlockEditorConfig;
+
+export const DefaultBlockEditorConfig = () => {
+    return (
+        <BlockEditorConfig>
+            <TopBar.Element name={"buttonBack"} group={"left"} element={<BackButton />} />
+            <TopBar.Element name={"title"} group={"left"} element={<Title />} />
+            <TopBar.Action name={"buttonSaveBlock"} element={<SaveBlockButton />} />
+            <TopBar.Action
+                name={"buttonBlockSettings"}
+                element={<BlockSettingsButton />}
+                before={"buttonSaveBlock"}
+            />
+            <Toolbar.Element name={"savingIndicator"} remove />
+            <ElementSettingsDecorator />
+        </BlockEditorConfig>
+    );
+};

packages/app-page-builder/src/blockEditor/config/ElementSettingsTab.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { plugins } from "@webiny/plugins";
+import { useActiveElement } from "~/editor/hooks/useActiveElement";
+import { ElementNotLinked } from "~/blockEditor/components/elementSettingsTab/ElementNotLinked";
+import VariableSettings from "~/blockEditor/components/elementSettingsTab/VariableSettings";
+import VariablesList from "~/blockEditor/components/elementSettingsTab/VariablesList";
+import { PbBlockEditorCreateVariablePlugin } from "~/types";
+import { EditorConfig } from "~/editor/config";
+
+export const ElementSettingsDecorator = EditorConfig.Sidebar.Elements.createDecorator(Original => {
+    const variablePlugins = plugins.byType<PbBlockEditorCreateVariablePlugin>(
+        "pb-block-editor-create-variable"
+    );
+
+    return function ElementGroup(props) {
+        const [element] = useActiveElement();
+
+        if (props.group !== "element") {
+            return <Original {...props} />;
+        }
+
+        const canHaveVariable =
+            element && variablePlugins.some(vp => vp.elementType === element.type);
+        const hasVariable = element && element.data?.variableId;
+        const isBlock = element && element.type === "block";
+
+        return (
+            <>
+                {isBlock ? <VariablesList block={element} /> : <Original {...props} />}
+                {canHaveVariable && !hasVariable && <ElementNotLinked />}
+                {canHaveVariable && hasVariable && <VariableSettings element={element} />}
+            </>
+        );
+    };
+});

packages/app-page-builder/src/blockEditor/config/TopBar/BackButton/BackButton.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback } from "react";
+import { css } from "emotion";
+import { useLocation, useNavigate } from "@webiny/react-router";
+import { IconButton } from "@webiny/ui/Button";
+import { ReactComponent as BackIcon } from "./round-arrow_back-24px.svg";
+import { useBlock } from "~/blockEditor/hooks/useBlock";
+import { BlockEditorConfig } from "~/blockEditor/editorConfig/BlockEditorConfig";
+
+const backStyles = css({
+    marginLeft: -10
+});
+
+export function BackButton() {
+    const { key } = useLocation();
+    const navigate = useNavigate();
+    const [block] = useBlock();
+
+    const onClick = useCallback(() => {
+        // If location.key is "default", then we are in a new tab.
+        if (key === "default") {
+            navigate(`/page-builder/page-blocks?category=${block.blockCategory}`);
+        } else {
+            navigate(-1);
+        }
+    }, [key, navigate]);
+
+    return (
+        <>
+            <IconButton
+                data-testid="pb-editor-back-button"
+                className={backStyles}
+                onClick={onClick}
+                icon={<BackIcon />}
+            />
+            <BlockEditorConfig.TopBar.Divider />
+        </>
+    );
+}

packages/app-page-builder/src/blockEditor/config/TopBar/BlockSettings/BlockSettingsButton.tsx

@@ -0,0 +1,23 @@
+import React, { useCallback, useState } from "react";
+import { IconButton } from "@webiny/ui/Button";
+import { ReactComponent as SettingsIcon } from "./settings.svg";
+import { BlockSettingsModal } from "./BlockSettingsModal";
+
+export const BlockSettingsButton = () => {
+    const [open, setState] = useState(false);
+
+    const onClickHandler = useCallback(() => {
+        setState(true);
+    }, []);
+
+    const onClose = useCallback(() => {
+        setState(false);
+    }, []);
+
+    return (
+        <>
+            <IconButton onClick={onClickHandler} icon={<SettingsIcon />} />
+            <BlockSettingsModal open={open} onClose={onClose} />
+        </>
+    );
+};