fix: create new PB element plugins (#4342)

packages/app-page-builder/src/plugins/PbEditorPageElementAdvancedSettingsPlugin.tsx

@@ -0,0 +1,19 @@
+import type { PbEditorPageElementAdvancedSettingsPlugin as BasePbEditorPageElementAdvancedSettingsPlugin } from "~/types";
+import { useRegisterLegacyPlugin } from "@webiny/app/hooks/useRegisterLegacyPlugin";
+
+export interface PbEditorPageElementAdvancedSettingsPluginParams
+    extends Pick<BasePbEditorPageElementAdvancedSettingsPlugin, "elementType" | "onSave"> {
+    element: JSX.Element;
+}
+
+export const PbEditorPageElementAdvancedSettingsPlugin = (
+    props: PbEditorPageElementAdvancedSettingsPluginParams
+) => {
+    useRegisterLegacyPlugin<BasePbEditorPageElementAdvancedSettingsPlugin>({
+        ...props,
+        render: () => props.element,
+        type: "pb-editor-page-element-advanced-settings"
+    });
+
+    return null;
+};

packages/app-page-builder/src/plugins/PbEditorPageElementPlugin.tsx

@@ -0,0 +1,24 @@
+import type { PbEditorPageElementPlugin as BasePbEditorPageElementPlugin } from "~/types";
+import { legacyPluginToReactComponent } from "@webiny/app/utils";
+
+export const PbEditorPageElementPlugin = legacyPluginToReactComponent<
+    Pick<
+        BasePbEditorPageElementPlugin,
+        | "elementType"
+        | "toolbar"
+        | "help"
+        | "target"
+        | "settings"
+        | "create"
+        | "render"
+        | "canDelete"
+        | "canReceiveChildren"
+        | "onReceived"
+        | "onChildDeleted"
+        | "onCreate"
+        | "renderElementPreview"
+    >
+>({
+    pluginType: "pb-editor-page-element",
+    componentDisplayName: "PbEditorPageElementPlugin"
+});

packages/app-page-builder/src/plugins/PbRenderElementPlugin.tsx

@@ -0,0 +1,9 @@
+import type { PbRenderElementPlugin as BasePbRenderElementPlugin } from "~/types";
+import { legacyPluginToReactComponent } from "@webiny/app/utils";
+
+export const PbRenderElementPlugin = legacyPluginToReactComponent<
+    Pick<BasePbRenderElementPlugin, "elementType" | "render">
+>({
+    pluginType: "pb-render-page-element",
+    componentDisplayName: "PbRenderElementPlugin"
+});

packages/app-page-builder/src/plugins/index.ts

@@ -1 +1,4 @@
 export * from "./PbPageLayoutPlugin";
+export * from "./PbEditorPageElementAdvancedSettingsPlugin";
+export * from "./PbRenderElementPlugin";
+export * from "./PbEditorPageElementPlugin";

packages/app-website/src/index.tsx

@@ -29,6 +29,7 @@ export * from "./Page/WebsiteScripts";
 export * from "./Page/ErrorPage";
 export * from "./Menu";
 export * from "./LinkPreload";
+export * from "./plugins";
 
 // Exporting chosen utils from `@webiny/app` package.
 export * from "@webiny/app/utils/getApiUrl";

packages/app-website/src/plugins/PbRenderElementPlugin.tsx

@@ -0,0 +1,9 @@
+import type { PbRenderElementPlugin as BasePbRenderElementPlugin } from "@webiny/app-page-builder/types";
+import { legacyPluginToReactComponent } from "@webiny/app/utils";
+
+export const PbRenderElementPlugin = legacyPluginToReactComponent<
+    Pick<BasePbRenderElementPlugin, "elementType" | "render">
+>({
+    pluginType: "pb-render-page-element",
+    componentDisplayName: "PbRenderElementPlugin"
+});

packages/app-website/src/plugins/index.ts

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

packages/app/src/hooks/useRegisterLegacyPlugin.tsx

@@ -0,0 +1,11 @@
+import { useRef } from "react";
+import { plugins } from "@webiny/plugins";
+import { type Plugin } from "@webiny/plugins/types";
+
+export function useRegisterLegacyPlugin<TPlugin extends Plugin>(plugin: TPlugin) {
+    const pluginRegistered = useRef<boolean>(false);
+    if (!pluginRegistered.current) {
+        pluginRegistered.current = true;
+        plugins.register(plugin);
+    }
+}

packages/app/src/utils/index.ts

@@ -7,3 +7,4 @@ export * from "./getPrerenderId";
 export * from "./getTenantId";
 export * from "./isLocalhost";
 export * from "./isPrerendering";
+export * from "./legacyPluginToReactComponent";

packages/app/src/utils/legacyPluginToReactComponent.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { useRegisterLegacyPlugin } from "~/hooks/useRegisterLegacyPlugin";
+
+export interface LegacyPluginToReactComponentParams {
+    pluginType: string;
+    componentDisplayName: string;
+}
+
+export const legacyPluginToReactComponent = function <TProps extends Record<string, any>>(
+    params: LegacyPluginToReactComponentParams
+) {
+    const Component: React.ComponentType<TProps> = props => {
+        useRegisterLegacyPlugin({ ...props, type: params.pluginType });
+        return null;
+    };
+
+    Component.displayName = params.componentDisplayName;
+
+    return Component;
+};