POC: EasyblocksEditor plugins + editor left sidebar as plugin

packages/core/src/types.ts

@@ -574,7 +574,7 @@ export type SchemaPropShared<Type extends string> = {
   layout?: "row" | "column";
 };
 
-type ValueSchemaProp<
+export type ValueSchemaProp<
   Type extends string,
   ValueType,
   Responsiveness extends "optional" | "forced" | "never"

packages/editor/src/EasyblocksEditor.tsx

@@ -62,6 +62,7 @@ export function EasyblocksEditor(props: EasyblocksEditorProps) {
           onExternalDataChange={props.onExternalDataChange ?? (() => ({}))}
           widgets={props.widgets}
           components={props.components}
+          plugins={props.plugins}
         />
       )}
 

packages/editor/src/EasyblocksEditorProps.ts

@@ -7,12 +7,25 @@ import {
   WidgetComponentProps,
 } from "@easyblocks/core";
 import React, { ComponentType } from "react";
+import { Form } from "./form";
+import { InternalAnyField } from "@easyblocks/core/_internals";
 
 export type ExternalDataChangeHandler = (
   externalData: RequestedExternalData,
   contextParams: ContextParams
 ) => void;
 
+export type EditorSidebarLeftProps = {
+  focussedField: string[];
+  form: Form<any, InternalAnyField>;
+};
+
+export type EasyblocksEditorPlugins = {
+  components?: {
+    sidebarLeft?: ComponentType<EditorSidebarLeftProps>;
+  };
+};
+
 export type EasyblocksEditorProps = {
   config: Config;
   externalData?: ExternalData;
@@ -23,6 +36,6 @@ export type EasyblocksEditorProps = {
     | ComponentType<WidgetComponentProps<any>>
     | ComponentType<InlineTypeWidgetComponentProps<any>>
   >;
-
+  plugins?: EasyblocksEditorPlugins;
   __debug?: boolean;
 };

packages/editor/src/EasyblocksParent.tsx

@@ -19,7 +19,10 @@ import { GlobalStyles } from "./tinacms/styles";
 import { SpaceTokenWidget } from "./sidebar/SpaceTokenWidget";
 import { parseQueryParams } from "./parseQueryParams";
 import { DocumentDataWidgetComponent } from "./sidebar/DocumentDataWidget";
-import { ExternalDataChangeHandler } from "./EasyblocksEditorProps";
+import {
+  EasyblocksEditorPlugins,
+  ExternalDataChangeHandler,
+} from "./EasyblocksEditorProps";
 
 type EasyblocksParentProps = {
   config: Config;
@@ -31,6 +34,7 @@ type EasyblocksParentProps = {
     | ComponentType<InlineTypeWidgetComponentProps<any>>
   >;
   components?: Record<string, ComponentType<any>>;
+  plugins?: EasyblocksEditorPlugins;
 };
 
 const shouldForwardProp: ShouldForwardProp<"web"> = (propName, target) => {
@@ -82,6 +86,7 @@ export function EasyblocksParent(props: EasyblocksParentProps) {
               ...props.widgets,
             }}
             components={props.components}
+            plugins={props.plugins}
           />
         </TooltipProvider>
         <Toaster containerStyle={{ zIndex: 100100 }} />

packages/editor/src/Editor.tsx

@@ -53,7 +53,10 @@ import React, {
 import Modal from "react-modal";
 import styled from "styled-components";
 import { ConfigAfterAutoContext } from "./ConfigAfterAutoContext";
-import { ExternalDataChangeHandler } from "./EasyblocksEditorProps";
+import {
+  EasyblocksEditorPlugins,
+  ExternalDataChangeHandler,
+} from "./EasyblocksEditorProps";
 import { EditorContext, EditorContextType } from "./EditorContext";
 import { EditorExternalDataProvider } from "./EditorExternalDataProvider";
 import { EditorIframe } from "./EditorIframe";
@@ -115,6 +118,19 @@ const SidebarContainer = styled.div`
   overflow-y: auto;
 `;
 
+const SidebarContainerLeft = styled.div`
+  flex: 0 0 240px;
+  background: ${Colors.white};
+  border-right: 1px solid ${Colors.black100};
+  box-sizing: border-box;
+
+  > * {
+    box-sizing: border-box;
+  }
+
+  overflow-y: auto;
+`;
+
 const DataSaverRoot = styled.div`
   position: fixed;
   width: 100%;
@@ -176,6 +192,7 @@ type EditorProps = {
     | ComponentType<TokenTypeWidgetComponentProps<any>>
   >;
   components?: Record<string, ComponentType<any>>;
+  plugins?: EasyblocksEditorPlugins;
 };
 
 export const Editor = EditorBackendInitializer;
@@ -310,6 +327,7 @@ const EditorWrapper = memo(
         compilationContext={compilationContext}
         initialDocument={props.document}
         initialEntry={initialEntry}
+        plugins={props.plugins}
       />
     );
   }
@@ -320,6 +338,7 @@ type EditorContentProps = EditorProps & {
   initialDocument: Document | null;
   initialEntry: NoCodeComponentEntry;
   heightMode?: "viewport" | "full";
+  plugins?: EasyblocksEditorPlugins;
 };
 
 function parseExternalDataId(externalDataId: string): {
@@ -642,6 +661,7 @@ const EditorContent = ({
   };
 
   const sidebarNodeRef = useRef<HTMLDivElement | null>(null);
+  const sidebarLeftNodeRef = useRef<HTMLDivElement | null>(null);
 
   const [editableData, form] = useForm({
     id: "easyblocks-editor",
@@ -990,6 +1010,8 @@ const EditorContent = ({
     Modal.setAppElement("#shopstory-app");
   }, []);
 
+  const EditorSidebarLeft = props.plugins?.components?.sidebarLeft;
+
   return (
     <div id={"shopstory-app"} style={{ height: appHeight, overflow: "hidden" }}>
       {isDataSaverOverlayOpen && (
@@ -1041,6 +1063,14 @@ const EditorContent = ({
               readOnly={editorContext.readOnly}
             />
             <SidebarAndContentContainer height={appHeight}>
+              {isEditing && EditorSidebarLeft && (
+                <SidebarContainerLeft ref={sidebarLeftNodeRef}>
+                  <EditorSidebarLeft
+                    focussedField={focussedField}
+                    form={form}
+                  />
+                </SidebarContainerLeft>
+              )}
               <ContentContainer
                 onClick={() => {
                   setFocussedField([]);

packages/editor/src/index.ts

@@ -2,4 +2,7 @@ export type { EditorContextType } from "./EditorContext";
 export type { EditorWindowAPI } from "./types";
 export { useEditorContext } from "./EditorContext";
 export { EasyblocksEditor } from "./EasyblocksEditor";
-export type { ExternalDataChangeHandler } from "./EasyblocksEditorProps";
+export type {
+  ExternalDataChangeHandler,
+  EditorSidebarLeftProps,
+} from "./EasyblocksEditorProps";