POC: EasyblocksEditor plugins + editor left sidebar as plugin

[timoconnellaus]

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,
    },
  }}
/>

[vercel[bot]]

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

A member of the Team first needs to authorize it.

[timoconnellaus]

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

[r00dY]

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 (https://github.com/easyblockshq/easyblocks/pull/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?