Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UserComponent settings should store state instead of a dedicated component for scalability #409

Open
trulysinclair opened this issue Apr 21, 2022 · 0 comments

Comments

@trulysinclair
Copy link

Is your feature request related to a problem? Please describe.
Currently, Craft takes a component for settings, which means each independent user component must declare its own settings. This gets tedious and redundant when using a settings panel vs a dedicated set of controls.

For example:

import { UserComponent } from "@craftjs/core";
import { SettingsPanel } from "components/base/ui/settings/SettingsPanel";
import { createElement } from "react";

interface BlocksProps {
  type:
    | "div"
    | "header"
    | "footer"
    | "nav"
    | "main"
    | "section"
    | "article"
    | "aside"
    | "address"
    | "figure";
}

export const Block: UserComponent<BlocksProps> = (props) => {
  const { children, type, ...elementProps } = props;
  return createElement(type, elementProps, children);
};

Block.craft = {
  displayName: "Block",
  related: { settings: SettingsPanel },
};

For every user component, we're stuck declaring either a new or existing settings component. Now imagine you have hundreds of components, or want to port in a component library, this gets very exhausting.

Describe the solution you'd like
Instead, it would be more appropriate to store what we need in the global editor context. So that a settings panel could just edit that state instead of adding a bunch of components just for a single task.

const SettingsPanel = () => {
  const settings = useContext(EditorContext);
  
  return (...)
}

And if not through the context, then through the useEditor() hook. But be more direct about querying which node is currently selected. selectedNode would give the state of the currently selected node such as displayName, id, state, props, and helperMethods. While I believe there are already methods for all of this, I believe it could be consolidated into a single object.

const SettingsPanel = () => {
  const { selectedNode } = useEditor(...);

  return (...)
}

Additional context
Add any other context or screenshots about the feature request here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant