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

POC: EasyblocksEditor plugins + editor left sidebar as plugin #53

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

timoconnellaus
Copy link

This PR does 2 things:

  1. It introduces a plugins property to the EasyblocksEditor component
  2. It introduces a plugin sidebarLeft - a react component
export type EditorSidebarLeftProps = {
  focussedField: string[];
  form: Form<any, InternalAnyField>;
};

export type EasyblocksEditorPlugins = {
  components?: {
    sidebarLeft?: ComponentType<EditorSidebarLeftProps>;
  };
};

export type EasyblocksEditorProps = {
  config: Config;
  externalData?: ExternalData;
  onExternalDataChange?: ExternalDataChangeHandler;
  components?: Record<string, React.ComponentType<any>>;
  widgets?: Record<
    string,
    | ComponentType<WidgetComponentProps<any>>
    | ComponentType<InlineTypeWidgetComponentProps<any>>
  >;
  plugins?: EasyblocksEditorPlugins;
  __debug?: boolean;
};

Here is an example of using the plugin

import {
  EasyblocksEditor,
  EditorSidebarLeftProps
} from "@easyblocks/editor";

const EditorSidebarLeft = (props: EditorSidebarLeftProps) => {
  return (
    <div className="w-full">
      <div className="w-full pt-10 text-center text-sm">Sidebar Left</div>
    </div>
  );
};

<EasyblocksEditor
  config={easyblocksConfig}
  components={components}
  plugins={{
    components: {
      sidebarLeft: EditorSidebarLeft,
    },
  }}
/>
image

Copy link

vercel bot commented May 22, 2024

@timoconnellaus is attempting to deploy a commit to the Shopstory Team on Vercel.

A member of the Team first needs to authorize it.

@timoconnellaus timoconnellaus changed the title Feature: editor left sidebar plugin Feature: EasyblocksEditor plugins + editor left sidebar as plugin May 22, 2024
@timoconnellaus
Copy link
Author

Here's an example of how it can be used - in this case, I created a tree view of the components that will trigger setFocused and scroll to the selected component

image

@timoconnellaus timoconnellaus changed the title Feature: EasyblocksEditor plugins + editor left sidebar as plugin POC: EasyblocksEditor plugins + editor left sidebar as plugin May 22, 2024
@r00dY
Copy link
Contributor

r00dY commented May 29, 2024

I thought about it a bit, here are my suggestions.

For v1 we could start with most basic top-level components:

  1. RootLayout (responsible for displaying canvas, right sidebar, top bar, potentially your left sidebar etc).
  2. TopBar

I wouldn't give them any props, they can simply use editor context. In the Editor.tsx there's an editor context set up but I don't think we should make all its properties available for modular components. I'd pick a subset and also add a couple of new ones. Here's my list of properties

focusedFields
setFocusedFields
entry // better name than form
isEditing
actions // maybe not all of them
isAdminMode // probably should be named isDebugMode
readOnly
breakpointIndex
mainBreakpointIndex
locales
locale
devices

// I'd add some new ones from `Editor.tsx
viewport 
setViewport
undo // probably should go to actions
redo // probably should go to actions
close // probably should go to actions
setViewport // probably should go to actions

editorComponents: { RootLayout, TopBar } // the editor component themselves.

Thanks to this approach you could trivially:

  1. Customise topbar (feature(editor): hide topbar config #37)
  2. Add your sidebar by providing custom RootLayout.
  3. Add components that are deeper in the hierarchy

What do you think about such approach?

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

Successfully merging this pull request may close these issues.

None yet

2 participants