fix(app-website): decorate lexical renderers on first mount (#4452)

webiny · Dec 18, 2024 · 4e4de20 · 4e4de20
1 parent 9b7ddad
commit 4e4de20
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 41 deletions.
diff --git a/extensions/theme/src/layouts/pages/Static/HeaderMobile.tsx b/extensions/theme/src/layouts/pages/Static/HeaderMobile.tsx
@@ -98,6 +98,7 @@ const HeaderMobileWrapper = styled.div`
         }
 
         > nav {
+            display: none;
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
             animation: slide-out 0.5s forwards;

diff --git a/packages/app-page-builder/src/render/PageBuilder.tsx b/packages/app-page-builder/src/render/PageBuilder.tsx
@@ -2,17 +2,15 @@ import React from "react";
 import { AddButtonClickHandlers } from "~/elementDecorators/AddButtonClickHandlers";
 import { AddButtonLinkComponent } from "~/elementDecorators/AddButtonLinkComponent";
 import { InjectElementVariables } from "~/render/variables/InjectElementVariables";
-import { LexicalParagraphRenderer } from "~/render/plugins/elements/paragraph/LexicalParagraph";
-import { LexicalHeadingRenderer } from "~/render/plugins/elements/heading/LexicalHeading";
 
-export const PageBuilder = () => {
+export const PageBuilder = React.memo(() => {
     return (
         <>
             <AddButtonLinkComponent />
             <AddButtonClickHandlers />
             <InjectElementVariables />
-            <LexicalParagraphRenderer />
-            <LexicalHeadingRenderer />
         </>
     );
-};
+});
+
+PageBuilder.displayName = "PageBuilder";
diff --git a/packages/app-page-builder/src/render/lexicalRendererDecorators.tsx b/packages/app-page-builder/src/render/lexicalRendererDecorators.tsx
@@ -0,0 +1,10 @@
+import type { DecoratorsCollection } from "@webiny/app";
+import { ParagraphRenderer } from "@webiny/app-page-builder-elements/renderers/paragraph";
+import { HeadingRenderer } from "@webiny/app-page-builder-elements/renderers/heading";
+import { LexicalParagraphDecorator } from "~/render/plugins/elements/paragraph/LexicalParagraph";
+import { LexicalHeadingDecorator } from "~/render/plugins/elements/heading/LexicalHeading";
+
+export const lexicalRendererDecorators: DecoratorsCollection = [
+    [ParagraphRenderer.Component, [LexicalParagraphDecorator]],
+    [HeadingRenderer.Component, [LexicalHeadingDecorator]]
+];
diff --git a/packages/app-page-builder/src/render/plugins/elements/heading/LexicalHeading.tsx b/packages/app-page-builder/src/render/plugins/elements/heading/LexicalHeading.tsx
@@ -1,14 +1,16 @@
 import React from "react";
 import {
-    HeadingRenderer,
-    elementInputs
+    elementInputs,
+    HeadingRenderer
 } from "@webiny/app-page-builder-elements/renderers/heading";
 import { usePageElements, useRenderer } from "@webiny/app-page-builder-elements";
 import { assignStyles } from "@webiny/app-page-builder-elements/utils";
 import { isValidLexicalData, LexicalHtmlRenderer } from "@webiny/lexical-editor";
+import type { ComponentDecorator } from "@webiny/app";
+import type { Renderer } from "@webiny/app-page-builder-elements/types";
 
-export const LexicalHeadingRenderer = HeadingRenderer.Component.createDecorator(Original => {
-    return function LexicalHeadingRenderer() {
+export const LexicalHeadingDecorator: ComponentDecorator<Renderer> = Original => {
+    return function LexicalHeadingRenderer(props) {
         const { theme } = usePageElements();
         const { getInputValues } = useRenderer();
         const inputs = getInputValues<typeof elementInputs>();
@@ -29,6 +31,9 @@ export const LexicalHeadingRenderer = HeadingRenderer.Component.createDecorator(
             );
         }
 
-        return <Original />;
+        return <Original {...props} />;
     };
-});
+};
+
+export const LexicalHeadingRenderer =
+    HeadingRenderer.Component.createDecorator(LexicalHeadingDecorator);
diff --git a/packages/app-page-builder/src/render/plugins/elements/paragraph/LexicalParagraph.tsx b/packages/app-page-builder/src/render/plugins/elements/paragraph/LexicalParagraph.tsx
@@ -1,14 +1,16 @@
 import React from "react";
 import {
-    ParagraphRenderer,
-    elementInputs
+    elementInputs,
+    ParagraphRenderer
 } from "@webiny/app-page-builder-elements/renderers/paragraph";
 import { usePageElements, useRenderer } from "@webiny/app-page-builder-elements";
 import { assignStyles } from "@webiny/app-page-builder-elements/utils";
 import { isValidLexicalData, LexicalHtmlRenderer } from "@webiny/lexical-editor";
+import type { ComponentDecorator } from "@webiny/app";
+import type { Renderer } from "@webiny/app-page-builder-elements/types";
 
-export const LexicalParagraphRenderer = ParagraphRenderer.Component.createDecorator(Original => {
-    return function LexicalParagraphRenderer() {
+export const LexicalParagraphDecorator: ComponentDecorator<Renderer> = Original => {
+    return function LexicalParagraphRenderer(props) {
         const { theme } = usePageElements();
         const { getInputValues } = useRenderer();
         const inputs = getInputValues<typeof elementInputs>();
@@ -29,6 +31,9 @@ export const LexicalParagraphRenderer = ParagraphRenderer.Component.createDecora
             );
         }
 
-        return <Original />;
+        return <Original {...props} />;
     };
-});
+};
+
+export const LexicalParagraphRenderer =
+    ParagraphRenderer.Component.createDecorator(LexicalParagraphDecorator);
diff --git a/packages/app-website/src/Website.tsx b/packages/app-website/src/Website.tsx
@@ -2,12 +2,13 @@ import React, { useMemo } from "react";
 import { App, AppProps, Decorator, GenericComponent } from "@webiny/app";
 import { ApolloProvider } from "@apollo/react-hooks";
 import { CacheProvider } from "@emotion/react";
-import { Page } from "./Page";
-import { createApolloClient, createEmotionCache } from "~/utils";
 import { ThemeProvider } from "@webiny/app-theme";
 import { PageBuilderProvider } from "@webiny/app-page-builder/contexts/PageBuilder";
+import { lexicalRendererDecorators } from "@webiny/app-page-builder/render/lexicalRendererDecorators";
 import { PageBuilder } from "@webiny/app-page-builder/render";
 import { RouteProps } from "@webiny/react-router";
+import { createApolloClient, createEmotionCache } from "~/utils";
+import { Page } from "./Page";
 import { LinkPreload } from "~/LinkPreload";
 import { WebsiteLoaderCache } from "~/utils/WebsiteLoaderCache";
 
@@ -53,6 +54,7 @@ export const Website = ({ children, routes = [], providers = [], ...props }: Web
                         debounceRender={debounceMs}
                         routes={appRoutes}
                         providers={[PageBuilderProviderHOC, ...providers]}
+                        decorators={[...lexicalRendererDecorators]}
                     >
                         <LinkPreload />
                         <PageBuilder />

diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -13,7 +13,8 @@ import {
     GenericComponent,
     compose,
     Decorator,
-    HigherOrderComponent
+    HigherOrderComponent,
+    DecoratorsCollection
 } from "@webiny/react-composition";
 import { Routes as SortRoutes } from "./core/Routes";
 import { DebounceRender } from "./core/DebounceRender";
@@ -53,6 +54,7 @@ export interface AppProps {
     debounceRender?: number;
     routes?: Array<RouteProps>;
     providers?: Array<Decorator<GenericComponent<ProviderProps>>>;
+    decorators?: DecoratorsCollection;
     children?: React.ReactNode | React.ReactNode[];
 }
 
@@ -62,7 +64,13 @@ interface ProviderProps {
 
 type ComponentWithChildren = React.ComponentType<{ children?: React.ReactNode }>;
 
-export const App = ({ debounceRender = 50, routes = [], providers = [], children }: AppProps) => {
+export const App = ({
+    debounceRender = 50,
+    routes = [],
+    providers = [],
+    decorators = [],
+    children
+}: AppProps) => {
     const [state, setState] = useState<State>({
         routes: routes.reduce<RoutesByPath>((acc, item) => {
             return { ...acc, [item.path as string]: <Route {...item} /> };
@@ -129,7 +137,7 @@ export const App = ({ debounceRender = 50, routes = [], providers = [], children
 
     return (
         <AppContext.Provider value={appContext}>
-            <CompositionProvider>
+            <CompositionProvider decorators={decorators}>
                 {children}
                 <BrowserRouter>
                     <Providers>

diff --git a/...p-template-aws/template/common/extensions/theme/src/layouts/pages/Static/HeaderMobile.tsx b/...p-template-aws/template/common/extensions/theme/src/layouts/pages/Static/HeaderMobile.tsx
@@ -98,6 +98,7 @@ const HeaderMobileWrapper = styled.div`
         }
 
         > nav {
+            display: none;
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
             animation: slide-out 0.5s forwards;

diff --git a/packages/react-composition/src/Context.tsx b/packages/react-composition/src/Context.tsx
@@ -10,6 +10,7 @@ import { useCompositionScope } from "~/CompositionScope";
 import {
     ComposedFunction,
     ComposeWith,
+    Decoratable,
     DecoratableComponent,
     DecoratableHook,
     Decorator,
@@ -70,35 +71,56 @@ interface CompositionContext {
 
 const CompositionContext = createContext<CompositionContext | undefined>(undefined);
 
+export type DecoratorsTuple = [Decoratable, Decorator<any>[]];
+export type DecoratorsCollection = Array<DecoratorsTuple>;
+
 interface CompositionProviderProps {
+    decorators?: DecoratorsCollection;
     children: React.ReactNode;
 }
 
-export const CompositionProvider = ({ children }: CompositionProviderProps) => {
-    const [components, setComponents] = useState<ComponentScopes>(new Map());
+const composeComponents = (
+    components: ComponentScopes,
+    decorators: Array<[GenericComponent | GenericHook, Decorator<any>[]]>,
+    scope = "*"
+) => {
+    const scopeMap: ComposedComponents = components.get(scope) || new Map();
+    for (const [component, hocs] of decorators) {
+        const recipe = scopeMap.get(component) || { component: null, hocs: [] };
+
+        const newHocs = [...(recipe.hocs || []), ...hocs] as Decorator<
+            GenericHook | GenericComponent
+        >[];
+
+        scopeMap.set(component, {
+            component: compose(...[...newHocs].reverse())(component),
+            hocs: newHocs
+        });
+
+        components.set(scope, scopeMap);
+    }
+
+    return components;
+};
+
+export const CompositionProvider = ({ decorators = [], children }: CompositionProviderProps) => {
+    const [components, setComponents] = useState<ComponentScopes>(() => {
+        return composeComponents(
+            new Map(),
+            decorators.map(tuple => {
+                return [tuple[0].original, tuple[1]];
+            })
+        );
+    });
 
     const composeComponent = useCallback(
         (
-            component: GenericHook | GenericComponent,
+            component: GenericComponent | GenericHook,
             hocs: HigherOrderComponent<any, any>[],
             scope: string | undefined = "*"
         ) => {
             setComponents(prevComponents => {
-                const components = new Map(prevComponents);
-                const scopeMap: ComposedComponents = components.get(scope) || new Map();
-                const recipe = scopeMap.get(component) || { component: null, hocs: [] };
-
-                const newHocs = [...(recipe.hocs || []), ...hocs] as Decorator<
-                    GenericHook | GenericComponent
-                >[];
-
-                scopeMap.set(component, {
-                    component: compose(...[...newHocs].reverse())(component),
-                    hocs: newHocs
-                });
-
-                components.set(scope, scopeMap);
-                return components;
+                return composeComponents(new Map(prevComponents), [[component, hocs]], scope);
             });
 
             // Return a function that will remove the added HOCs.