@webiny/app-website-builder 6.0.0 → 6.1.0-beta.0

package/BaseEditor/config/EditorConfig.d.ts

@@ -1,5 +1,485 @@
 import type { ElementConfig } from "./Element.js";
 import type { ElementInputConfig } from "./ElementInput.js";
+interface EditorConfig {
+    elements: ElementConfig[];
+    inputRenderers: ElementInputConfig[];
+}
+export declare const EditorConfigComponents: {
+    /**
+     * Components to configure editor UI.
+     */
+    Ui: {
+        Element: (({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element) & {
+            original: ({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element) & {
+                original: ({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element) & {
+                original: ({ id, name, element, group, scope, remove, before, after }: import("./Element.js").ElementProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        Elements: ({ group, scope, transform }: import("./Elements.js").ElementsProps) => import("react").JSX.Element;
+        Layout: (() => import("react").JSX.Element) & {
+            original: () => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        Content: (() => import("react").JSX.Element) & {
+            original: () => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        } & {
+            Layout: ({ children }: import("./Content/Layout.js").LayoutProps) => import("react").ReactNode;
+            Element: ((props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element) & {
+                original: (props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Content/Content.js").ElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Elements: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: (() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+        };
+        TopBar: (() => import("react").JSX.Element) & {
+            Element: ((props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element) & {
+                original: (props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Elements: ((props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element) & {
+                original: (props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ElementsProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Layout: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: (() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Divider: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: (() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Action: ((props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element) & {
+                original: (props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").ActionProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            DropdownAction: ((props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element) & {
+                original: (props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element) & {
+                    original: (props: import("./TopBar/TopBar.js").DropdownActionProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            } & {
+                MenuItem: (props: import("./TopBar/MenuItem.js").MenuItemProps) => import("react").JSX.Element;
+            };
+        };
+        Toolbar: (() => import("react").JSX.Element) & {
+            original: () => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        } & {
+            Layout: () => import("react").JSX.Element;
+            Element: ((props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element) & {
+                original: (props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Toolbar/Toolbar.js").ElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Elements: ((props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element) & {
+                original: (props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Toolbar/Toolbar.js").ElementsProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+        };
+        Sidebar: (() => import("react").JSX.Element) & {
+            original: () => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        } & {
+            Layout: (() => import("react").JSX.Element) & {
+                original: () => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: (() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+                    original: () => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Element: ((props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element) & {
+                original: (props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").BaseElementProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Elements: ((props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element) & {
+                original: (props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").ElementsProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+            Group: ((props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element) & {
+                original: (props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element) & {
+                    original: (props: import("./Sidebar/Sidebar.js").GroupProps) => import("react").JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            } & {
+                Tab: ({ name, label, disabled, element, visible, noPadding }: import("./Sidebar/Tab.js").TabProps) => import("react").JSX.Element;
+            };
+            ScrollableContainer: ({ children }: any) => import("react").JSX.Element;
+        };
+        IsReadOnly: ({ children }: import("~/BaseEditor/config/IsReadOnly.js").IsNotReadOnlyProps) => import("react").JSX.Element | null;
+        IsNotReadOnly: ({ children }: import("~/BaseEditor/config/IsNotReadOnly.js").IsNotReadOnlyProps) => import("react").JSX.Element | null;
+        OnActiveElement: ({ children }: import("./OnActiveElement.js").OnActiveElementProps) => import("react").JSX.Element | null;
+        NoActiveElement: ({ children }: import("./NoActiveElement.js").NoActiveElementProps) => import("react").JSX.Element | null;
+    };
+    ElementInput: {
+        Renderer: (props: import("./ElementInput.js").RendererProps) => import("react").JSX.Element;
+    };
+    /**
+     * Define a new element property.
+     */
+    ElementProperty: ((props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element) & {
+        original: (props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element) & {
+            original: (props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element) & {
+            original: (props: import("./ElementProperty.js").ElementPropertyProps) => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        STYLE: string;
+        ELEMENT: string;
+    };
+    /**
+     * Render element properties for the given group.
+     */
+    ElementProperties: (props: import("./ElementProperty.js").ElementPropertiesProps) => import("react").JSX.Element;
+    /**
+     * Define an element action.
+     */
+    ElementAction: ((props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element) & {
+        original: (props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element) & {
+            original: (props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element) & {
+            original: (props: import("./ElementAction.js").ElementActionProps) => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        IconButton: ({ label, icon, disabled, onClick }: import("./IconButton.js").IconButtonProps) => import("react").JSX.Element;
+    };
+    /**
+     * Render all element actions.
+     */
+    ElementActions: (() => import("react").JSX.Element) & {
+        original: () => import("react").JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (() => import("react").JSX.Element) & {
+            original: () => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(() => import("react").JSX.Element) & {
+            original: () => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+    /**
+     * Customize ElementOverlay
+     */
+    ElementOverlay: {
+        Element: (({ name, element }: import("./ElementOverlay.js").ElementProps) => import("react").JSX.Element) & {
+            Container: ({ position, children }: import("./ElementOverlay.js").ElementOverlayContainerProps) => import("react").JSX.Element;
+        };
+        Elements: () => import("react").JSX.Element;
+    };
+    /**
+     * Access full editor config. WARNING: very low-level, we don't recommend using this directly!
+     */
+    useEditorConfig: typeof useEditorConfig;
+};
 export declare const EditorConfig: (({ priority, children }: import("@webiny/react-properties").ConfigProps) => React.JSX.Element) & {
     /**
      * Components to configure editor UI.
@@ -379,6 +859,8 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
             };
             ScrollableContainer: ({ children }: any) => import("react").JSX.Element;
         };
+        IsReadOnly: ({ children }: import("~/BaseEditor/config/IsReadOnly.js").IsNotReadOnlyProps) => import("react").JSX.Element | null;
+        IsNotReadOnly: ({ children }: import("~/BaseEditor/config/IsNotReadOnly.js").IsNotReadOnlyProps) => import("react").JSX.Element | null;
         OnActiveElement: ({ children }: import("./OnActiveElement.js").OnActiveElementProps) => import("react").JSX.Element | null;
         NoActiveElement: ({ children }: import("./NoActiveElement.js").NoActiveElementProps) => import("react").JSX.Element | null;
     };
@@ -460,6 +942,15 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
+    /**
+     * Customize ElementOverlay
+     */
+    ElementOverlay: {
+        Element: (({ name, element }: import("./ElementOverlay.js").ElementProps) => import("react").JSX.Element) & {
+            Container: ({ position, children }: import("./ElementOverlay.js").ElementOverlayContainerProps) => import("react").JSX.Element;
+        };
+        Elements: () => import("react").JSX.Element;
+    };
     /**
      * Access full editor config. WARNING: very low-level, we don't recommend using this directly!
      */
@@ -468,7 +959,8 @@ export declare const EditorConfig: (({ priority, children }: import("@webiny/rea
 export declare const EditorWithConfig: (({ onProperties, children }: import("@webiny/react-properties").WithConfigProps) => React.JSX.Element) & {
     displayName: string;
 };
-export declare function useEditorConfig(): {
+export declare function useEditorConfig<TConfig = EditorConfig>(): {
     elements: ElementConfig[];
     inputRenderers: ElementInputConfig[];
-};
+} & Omit<EditorConfig & TConfig, "elements" | "inputRenderers">;
+export {};

package/BaseEditor/config/EditorConfig.js

@@ -11,8 +11,11 @@ import { NoActiveElement } from "./NoActiveElement.js";
 import { ElementProperties, ElementProperty } from "./ElementProperty.js";
 import { ElementAction, ElementActions } from "./ElementAction.js";
 import { ElementInput } from "./ElementInput.js";
+import { IsNotReadOnly } from "./IsNotReadOnly.js";
+import { IsReadOnly } from "./IsReadOnly.js";
+import { ElementOverlay } from "./ElementOverlay.js";
 const base = createConfigurableComponent("DocumentEditor");
-export const EditorConfig = Object.assign(base.Config, {
+export const EditorConfigComponents = {
   /**
    * Components to configure editor UI.
    */
@@ -24,6 +27,8 @@ export const EditorConfig = Object.assign(base.Config, {
     TopBar,
     Toolbar,
     Sidebar,
+    IsReadOnly,
+    IsNotReadOnly,
     OnActiveElement,
     NoActiveElement
   },
@@ -44,19 +49,29 @@ export const EditorConfig = Object.assign(base.Config, {
    * Render all element actions.
    */
   ElementActions,
+  /**
+   * Customize ElementOverlay
+   */
+  ElementOverlay,
   /**
    * Access full editor config. WARNING: very low-level, we don't recommend using this directly!
    */
   useEditorConfig
-});
+};
+export const EditorConfig = Object.assign(base.Config, EditorConfigComponents);
 export const EditorWithConfig = Object.assign(base.WithConfig, {
   displayName: "EditorWithConfig"
 });
 export function useEditorConfig() {
-  const config = base.useConfig();
+  const {
+    elements,
+    inputRenderers,
+    ...rest
+  } = base.useConfig();
   return {
-    elements: config.elements || [],
-    inputRenderers: config.inputRenderers || []
+    elements: elements || [],
+    inputRenderers: inputRenderers || [],
+    ...rest
   };
 }
 

package/BaseEditor/config/EditorConfig.js.map

@@ -1 +1 @@
-{"version":3,"names":["createConfigurableComponent","Element","TopBar","Layout","Content","Toolbar","Sidebar","Elements","OnActiveElement","NoActiveElement","ElementProperties","ElementProperty","ElementAction","ElementActions","ElementInput","base","EditorConfig","Object","assign","Config","Ui","useEditorConfig","EditorWithConfig","WithConfig","displayName","config","useConfig","elements","inputRenderers"],"sources":["EditorConfig.tsx"],"sourcesContent":["import { createConfigurableComponent } from \"@webiny/react-properties\";\nimport type { ElementConfig } from \"./Element.js\";\nimport { Element } from \"./Element.js\";\nimport { TopBar } from \"./TopBar/TopBar.js\";\nimport { Layout } from \"./Layout.js\";\nimport { Content } from \"./Content/Content.js\";\nimport { Toolbar } from \"./Toolbar/Toolbar.js\";\nimport { Sidebar } from \"./Sidebar/Sidebar.js\";\nimport { Elements } from \"./Elements.js\";\nimport { OnActiveElement } from \"./OnActiveElement.js\";\nimport { NoActiveElement } from \"./NoActiveElement.js\";\nimport { ElementProperties, ElementProperty } from \"./ElementProperty.js\";\nimport { ElementAction, ElementActions } from \"./ElementAction.js\";\nimport type { ElementInputConfig } from \"./ElementInput.js\";\nimport { ElementInput } from \"./ElementInput.js\";\n\ninterface EditorConfig {\n    elements: ElementConfig[];\n    inputRenderers: ElementInputConfig[];\n}\n\nconst base = createConfigurableComponent<EditorConfig>(\"DocumentEditor\");\n\nexport const EditorConfig = Object.assign(base.Config, {\n    /**\n     * Components to configure editor UI.\n     */\n    Ui: {\n        Element,\n        Elements,\n        Layout,\n        Content,\n        TopBar,\n        Toolbar,\n        Sidebar,\n        OnActiveElement,\n        NoActiveElement\n    },\n    ElementInput,\n    /**\n     * Define a new element property.\n     */\n    ElementProperty,\n    /**\n     * Render element properties for the given group.\n     */\n    ElementProperties,\n    /**\n     * Define an element action.\n     */\n    ElementAction,\n    /**\n     * Render all element actions.\n     */\n    ElementActions,\n    /**\n     * Access full editor config. WARNING: very low-level, we don't recommend using this directly!\n     */\n    useEditorConfig\n});\n\nexport const EditorWithConfig = Object.assign(base.WithConfig, { displayName: \"EditorWithConfig\" });\n\nexport function useEditorConfig() {\n    const config = base.useConfig();\n\n    return { elements: config.elements || [], inputRenderers: config.inputRenderers || [] };\n}\n"],"mappings":"AAAA,SAASA,2BAA2B,QAAQ,0BAA0B;AAEtE,SAASC,OAAO;AAChB,SAASC,MAAM;AACf,SAASC,MAAM;AACf,SAASC,OAAO;AAChB,SAASC,OAAO;AAChB,SAASC,OAAO;AAChB,SAASC,QAAQ;AACjB,SAASC,eAAe;AACxB,SAASC,eAAe;AACxB,SAASC,iBAAiB,EAAEC,eAAe;AAC3C,SAASC,aAAa,EAAEC,cAAc;AAEtC,SAASC,YAAY;AAOrB,MAAMC,IAAI,GAAGf,2BAA2B,CAAe,gBAAgB,CAAC;AAExE,OAAO,MAAMgB,YAAY,GAAGC,MAAM,CAACC,MAAM,CAACH,IAAI,CAACI,MAAM,EAAE;EACnD;AACJ;AACA;EACIC,EAAE,EAAE;IACAnB,OAAO;IACPM,QAAQ;IACRJ,MAAM;IACNC,OAAO;IACPF,MAAM;IACNG,OAAO;IACPC,OAAO;IACPE,eAAe;IACfC;EACJ,CAAC;EACDK,YAAY;EACZ;AACJ;AACA;EACIH,eAAe;EACf;AACJ;AACA;EACID,iBAAiB;EACjB;AACJ;AACA;EACIE,aAAa;EACb;AACJ;AACA;EACIC,cAAc;EACd;AACJ;AACA;EACIQ;AACJ,CAAC,CAAC;AAEF,OAAO,MAAMC,gBAAgB,GAAGL,MAAM,CAACC,MAAM,CAACH,IAAI,CAACQ,UAAU,EAAE;EAAEC,WAAW,EAAE;AAAmB,CAAC,CAAC;AAEnG,OAAO,SAASH,eAAeA,CAAA,EAAG;EAC9B,MAAMI,MAAM,GAAGV,IAAI,CAACW,SAAS,CAAC,CAAC;EAE/B,OAAO;IAAEC,QAAQ,EAAEF,MAAM,CAACE,QAAQ,IAAI,EAAE;IAAEC,cAAc,EAAEH,MAAM,CAACG,cAAc,IAAI;EAAG,CAAC;AAC3F","ignoreList":[]}
+{"version":3,"names":["createConfigurableComponent","Element","TopBar","Layout","Content","Toolbar","Sidebar","Elements","OnActiveElement","NoActiveElement","ElementProperties","ElementProperty","ElementAction","ElementActions","ElementInput","IsNotReadOnly","IsReadOnly","ElementOverlay","base","EditorConfigComponents","Ui","useEditorConfig","EditorConfig","Object","assign","Config","EditorWithConfig","WithConfig","displayName","elements","inputRenderers","rest","useConfig"],"sources":["EditorConfig.tsx"],"sourcesContent":["import { createConfigurableComponent } from \"@webiny/react-properties\";\nimport type { ElementConfig } from \"./Element.js\";\nimport { Element } from \"./Element.js\";\nimport { TopBar } from \"./TopBar/TopBar.js\";\nimport { Layout } from \"./Layout.js\";\nimport { Content } from \"./Content/Content.js\";\nimport { Toolbar } from \"./Toolbar/Toolbar.js\";\nimport { Sidebar } from \"./Sidebar/Sidebar.js\";\nimport { Elements } from \"./Elements.js\";\nimport { OnActiveElement } from \"./OnActiveElement.js\";\nimport { NoActiveElement } from \"./NoActiveElement.js\";\nimport { ElementProperties, ElementProperty } from \"./ElementProperty.js\";\nimport { ElementAction, ElementActions } from \"./ElementAction.js\";\nimport type { ElementInputConfig } from \"./ElementInput.js\";\nimport { ElementInput } from \"./ElementInput.js\";\nimport { IsNotReadOnly } from \"~/BaseEditor/config/IsNotReadOnly.js\";\nimport { IsReadOnly } from \"~/BaseEditor/config/IsReadOnly.js\";\nimport { ElementOverlay } from \"./ElementOverlay.js\";\n\ninterface EditorConfig {\n    elements: ElementConfig[];\n    inputRenderers: ElementInputConfig[];\n}\n\nconst base = createConfigurableComponent<EditorConfig>(\"DocumentEditor\");\n\nexport const EditorConfigComponents = {\n    /**\n     * Components to configure editor UI.\n     */\n    Ui: {\n        Element,\n        Elements,\n        Layout,\n        Content,\n        TopBar,\n        Toolbar,\n        Sidebar,\n        IsReadOnly,\n        IsNotReadOnly,\n        OnActiveElement,\n        NoActiveElement\n    },\n    ElementInput,\n    /**\n     * Define a new element property.\n     */\n    ElementProperty,\n    /**\n     * Render element properties for the given group.\n     */\n    ElementProperties,\n    /**\n     * Define an element action.\n     */\n    ElementAction,\n    /**\n     * Render all element actions.\n     */\n    ElementActions,\n    /**\n     * Customize ElementOverlay\n     */\n    ElementOverlay,\n    /**\n     * Access full editor config. WARNING: very low-level, we don't recommend using this directly!\n     */\n    useEditorConfig\n};\n\nexport const EditorConfig = Object.assign(base.Config, EditorConfigComponents);\n\nexport const EditorWithConfig = Object.assign(base.WithConfig, { displayName: \"EditorWithConfig\" });\n\nexport function useEditorConfig<TConfig = EditorConfig>() {\n    const { elements, inputRenderers, ...rest } = base.useConfig<TConfig & EditorConfig>();\n\n    return {\n        elements: elements || [],\n        inputRenderers: inputRenderers || [],\n        ...rest\n    };\n}\n"],"mappings":"AAAA,SAASA,2BAA2B,QAAQ,0BAA0B;AAEtE,SAASC,OAAO;AAChB,SAASC,MAAM;AACf,SAASC,MAAM;AACf,SAASC,OAAO;AAChB,SAASC,OAAO;AAChB,SAASC,OAAO;AAChB,SAASC,QAAQ;AACjB,SAASC,eAAe;AACxB,SAASC,eAAe;AACxB,SAASC,iBAAiB,EAAEC,eAAe;AAC3C,SAASC,aAAa,EAAEC,cAAc;AAEtC,SAASC,YAAY;AACrB,SAASC,aAAa;AACtB,SAASC,UAAU;AACnB,SAASC,cAAc;AAOvB,MAAMC,IAAI,GAAGlB,2BAA2B,CAAe,gBAAgB,CAAC;AAExE,OAAO,MAAMmB,sBAAsB,GAAG;EAClC;AACJ;AACA;EACIC,EAAE,EAAE;IACAnB,OAAO;IACPM,QAAQ;IACRJ,MAAM;IACNC,OAAO;IACPF,MAAM;IACNG,OAAO;IACPC,OAAO;IACPU,UAAU;IACVD,aAAa;IACbP,eAAe;IACfC;EACJ,CAAC;EACDK,YAAY;EACZ;AACJ;AACA;EACIH,eAAe;EACf;AACJ;AACA;EACID,iBAAiB;EACjB;AACJ;AACA;EACIE,aAAa;EACb;AACJ;AACA;EACIC,cAAc;EACd;AACJ;AACA;EACII,cAAc;EACd;AACJ;AACA;EACII;AACJ,CAAC;AAED,OAAO,MAAMC,YAAY,GAAGC,MAAM,CAACC,MAAM,CAACN,IAAI,CAACO,MAAM,EAAEN,sBAAsB,CAAC;AAE9E,OAAO,MAAMO,gBAAgB,GAAGH,MAAM,CAACC,MAAM,CAACN,IAAI,CAACS,UAAU,EAAE;EAAEC,WAAW,EAAE;AAAmB,CAAC,CAAC;AAEnG,OAAO,SAASP,eAAeA,CAAA,EAA2B;EACtD,MAAM;IAAEQ,QAAQ;IAAEC,cAAc;IAAE,GAAGC;EAAK,CAAC,GAAGb,IAAI,CAACc,SAAS,CAAyB,CAAC;EAEtF,OAAO;IACHH,QAAQ,EAAEA,QAAQ,IAAI,EAAE;IACxBC,cAAc,EAAEA,cAAc,IAAI,EAAE;IACpC,GAAGC;EACP,CAAC;AACL","ignoreList":[]}

package/BaseEditor/config/Element.d.ts

@@ -3,12 +3,12 @@ export interface ElementConfig {
     name: string;
     group: string;
     scope: string;
-    element: JSX.Element;
+    element: React.JSX.Element;
 }
 export interface ElementProps {
     name: string;
     id?: string;
-    element?: JSX.Element | null;
+    element?: React.JSX.Element | null;
     /**
      * `group` is a public prop that can be used by external developers to logically group elements.
      * For example: "actions", "buttons", etc.

package/BaseEditor/config/Element.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","Property","useIdGenerator","Element","id","name","element","group","scope","remove","before","after","getId","realId","placeAfter","undefined","placeBefore","createElement","array","value"],"sources":["Element.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { Property, useIdGenerator } from \"@webiny/react-properties\";\n\nexport interface ElementConfig {\n    name: string;\n    group: string;\n    scope: string;\n    element: JSX.Element;\n}\n\nexport interface ElementProps {\n    name: string;\n    id?: string;\n    element?: JSX.Element | null;\n    /**\n     * `group` is a public prop that can be used by external developers to logically group elements.\n     * For example: \"actions\", \"buttons\", etc.\n     */\n    group?: string;\n    /**\n     * `scope` is used for internal grouping of elements. It is only used to create higher level components used by the 3rd party.\n     * For example: \"sidebar\", \"topBar\", \"toolbar\".\n     * This creates a scope within which we can then filter elements by their `group` prop.\n     */\n    scope?: string;\n    remove?: boolean;\n    before?: string;\n    after?: string;\n}\n\nexport const Element = makeDecoratable(\n    \"EditorElement\",\n    ({ id, name, element, group, scope, remove, before, after }: ElementProps) => {\n        const getId = useIdGenerator(\"element\");\n        const realId = id ?? name;\n\n        const placeAfter = after !== undefined ? getId(after) : undefined;\n        const placeBefore = before !== undefined ? getId(before) : undefined;\n\n        return (\n            <Property\n                id={getId(realId)}\n                name={\"elements\"}\n                remove={remove}\n                array={true}\n                before={placeBefore}\n                after={placeAfter}\n            >\n                <Property id={getId(realId, \"name\")} name={\"name\"} value={name} />\n                {element ? (\n                    <Property id={getId(realId, \"element\")} name={\"element\"} value={element} />\n                ) : null}\n                {group ? (\n                    <Property id={getId(realId, \"group\")} name={\"group\"} value={group} />\n                ) : null}\n                {scope ? (\n                    <Property id={getId(realId, \"scope\")} name={\"scope\"} value={scope} />\n                ) : null}\n            </Property>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,QAAQ,EAAEC,cAAc,QAAQ,0BAA0B;AA6BnE,OAAO,MAAMC,OAAO,GAAGH,eAAe,CAClC,eAAe,EACf,CAAC;EAAEI,EAAE;EAAEC,IAAI;EAAEC,OAAO;EAAEC,KAAK;EAAEC,KAAK;EAAEC,MAAM;EAAEC,MAAM;EAAEC;AAAoB,CAAC,KAAK;EAC1E,MAAMC,KAAK,GAAGV,cAAc,CAAC,SAAS,CAAC;EACvC,MAAMW,MAAM,GAAGT,EAAE,IAAIC,IAAI;EAEzB,MAAMS,UAAU,GAAGH,KAAK,KAAKI,SAAS,GAAGH,KAAK,CAACD,KAAK,CAAC,GAAGI,SAAS;EACjE,MAAMC,WAAW,GAAGN,MAAM,KAAKK,SAAS,GAAGH,KAAK,CAACF,MAAM,CAAC,GAAGK,SAAS;EAEpE,oBACIhB,KAAA,CAAAkB,aAAA,CAAChB,QAAQ;IACLG,EAAE,EAAEQ,KAAK,CAACC,MAAM,CAAE;IAClBR,IAAI,EAAE,UAAW;IACjBI,MAAM,EAAEA,MAAO;IACfS,KAAK,EAAE,IAAK;IACZR,MAAM,EAAEM,WAAY;IACpBL,KAAK,EAAEG;EAAW,gBAElBf,KAAA,CAAAkB,aAAA,CAAChB,QAAQ;IAACG,EAAE,EAAEQ,KAAK,CAACC,MAAM,EAAE,MAAM,CAAE;IAACR,IAAI,EAAE,MAAO;IAACc,KAAK,EAAEd;EAAK,CAAE,CAAC,EACjEC,OAAO,gBACJP,KAAA,CAAAkB,aAAA,CAAChB,QAAQ;IAACG,EAAE,EAAEQ,KAAK,CAACC,MAAM,EAAE,SAAS,CAAE;IAACR,IAAI,EAAE,SAAU;IAACc,KAAK,EAAEb;EAAQ,CAAE,CAAC,GAC3E,IAAI,EACPC,KAAK,gBACFR,KAAA,CAAAkB,aAAA,CAAChB,QAAQ;IAACG,EAAE,EAAEQ,KAAK,CAACC,MAAM,EAAE,OAAO,CAAE;IAACR,IAAI,EAAE,OAAQ;IAACc,KAAK,EAAEZ;EAAM,CAAE,CAAC,GACrE,IAAI,EACPC,KAAK,gBACFT,KAAA,CAAAkB,aAAA,CAAChB,QAAQ;IAACG,EAAE,EAAEQ,KAAK,CAACC,MAAM,EAAE,OAAO,CAAE;IAACR,IAAI,EAAE,OAAQ;IAACc,KAAK,EAAEX;EAAM,CAAE,CAAC,GACrE,IACE,CAAC;AAEnB,CACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","Property","useIdGenerator","Element","id","name","element","group","scope","remove","before","after","getId","realId","placeAfter","undefined","placeBefore","createElement","array","value"],"sources":["Element.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { Property, useIdGenerator } from \"@webiny/react-properties\";\n\nexport interface ElementConfig {\n    name: string;\n    group: string;\n    scope: string;\n    element: React.JSX.Element;\n}\n\nexport interface ElementProps {\n    name: string;\n    id?: string;\n    element?: React.JSX.Element | null;\n    /**\n     * `group` is a public prop that can be used by external developers to logically group elements.\n     * For example: \"actions\", \"buttons\", etc.\n     */\n    group?: string;\n    /**\n     * `scope` is used for internal grouping of elements. It is only used to create higher level components used by the 3rd party.\n     * For example: \"sidebar\", \"topBar\", \"toolbar\".\n     * This creates a scope within which we can then filter elements by their `group` prop.\n     */\n    scope?: string;\n    remove?: boolean;\n    before?: string;\n    after?: string;\n}\n\nexport const Element = makeDecoratable(\n    \"EditorElement\",\n    ({ id, name, element, group, scope, remove, before, after }: ElementProps) => {\n        const getId = useIdGenerator(\"element\");\n        const realId = id ?? name;\n\n        const placeAfter = after !== undefined ? getId(after) : undefined;\n        const placeBefore = before !== undefined ? getId(before) : undefined;\n\n        return (\n            <Property\n                id={getId(realId)}\n                name={\"elements\"}\n                remove={remove}\n                array={true}\n                before={placeBefore}\n                after={placeAfter}\n            >\n                <Property id={getId(realId, \"name\")} name={\"name\"} value={name} />\n                {element ? (\n                    <Property id={getId(realId, \"element\")} name={\"element\"} value={element} />\n                ) : null}\n                {group ? (\n                    <Property id={getId(realId, \"group\")} name={\"group\"} value={group} />\n                ) : null}\n                {scope ? (\n                    <Property id={getId(realId, \"scope\")} name={\"scope\"} value={scope} />\n                ) : null}\n            </Property>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,QAAQ,EAAEC,cAAc,QAAQ,0BAA0B;AA6BnE,OAAO,MAAMC,OAAO,GAAGH,eAAe,CAClC,eAAe,EACf,CAAC;EAAEI,EAAE;EAAEC,IAAI;EAAEC,OAAO;EAAEC,KAAK;EAAEC,KAAK;EAAEC,MAAM;EAAEC,MAAM;EAAEC;AAAoB,CAAC,KAAK;EAC1E,MAAMC,KAAK,GAAGV,cAAc,CAAC,SAAS,CAAC;EACvC,MAAMW,MAAM,GAAGT,EAAE,IAAIC,IAAI;EAEzB,MAAMS,UAAU,GAAGH,KAAK,KAAKI,SAAS,GAAGH,KAAK,CAACD,KAAK,CAAC,GAAGI,SAAS;EACjE,MAAMC,WAAW,GAAGN,MAAM,KAAKK,SAAS,GAAGH,KAAK,CAACF,MAAM,CAAC,GAAGK,SAAS;EAEpE,oBACIhB,KAAA,CAAAkB,aAAA,CAAChB,QAAQ;IACLG,EAAE,EAAEQ,KAAK,CAACC,MAAM,CAAE;IAClBR,IAAI,EAAE,UAAW;IACjBI,MAAM,EAAEA,MAAO;IACfS,KAAK,EAAE,IAAK;IACZR,MAAM,EAAEM,WAAY;IACpBL,KAAK,EAAEG;EAAW,gBAElBf,KAAA,CAAAkB,aAAA,CAAChB,QAAQ;IAACG,EAAE,EAAEQ,KAAK,CAACC,MAAM,EAAE,MAAM,CAAE;IAACR,IAAI,EAAE,MAAO;IAACc,KAAK,EAAEd;EAAK,CAAE,CAAC,EACjEC,OAAO,gBACJP,KAAA,CAAAkB,aAAA,CAAChB,QAAQ;IAACG,EAAE,EAAEQ,KAAK,CAACC,MAAM,EAAE,SAAS,CAAE;IAACR,IAAI,EAAE,SAAU;IAACc,KAAK,EAAEb;EAAQ,CAAE,CAAC,GAC3E,IAAI,EACPC,KAAK,gBACFR,KAAA,CAAAkB,aAAA,CAAChB,QAAQ;IAACG,EAAE,EAAEQ,KAAK,CAACC,MAAM,EAAE,OAAO,CAAE;IAACR,IAAI,EAAE,OAAQ;IAACc,KAAK,EAAEZ;EAAM,CAAE,CAAC,GACrE,IAAI,EACPC,KAAK,gBACFT,KAAA,CAAAkB,aAAA,CAAChB,QAAQ;IAACG,EAAE,EAAEQ,KAAK,CAACC,MAAM,EAAE,OAAO,CAAE;IAACR,IAAI,EAAE,OAAQ;IAACc,KAAK,EAAEX;EAAM,CAAE,CAAC,GACrE,IACE,CAAC;AAEnB,CACJ,CAAC","ignoreList":[]}