feat(editor): include picker position calculation

Author: maarten2424

packages/editor/src/ModalPicker.tsx

@@ -115,6 +115,7 @@ export const ModalPicker: FC<ModalProps> = ({ config, onClose, pickers }) => {
       onClose: onModalClose,
       templates: templatesDictionary,
       mode: picker,
+      domRect: config.domRect,
     })
   ) : (
     <div>Unknown picker: {picker}</div>

packages/editor/src/TemplatePicker.ts

@@ -12,6 +12,7 @@ type TemplatePickerProps = {
   templates?: TemplatesDictionary;
   onClose: (template?: Template) => void;
   mode?: string;
+  domRect?: DOMRect;
 };
 
 export type TemplatePicker<T = Record<never, never>> = React.FC<

packages/editor/src/selectionFrame/AddButton.tsx

@@ -14,7 +14,7 @@ interface AddButtonProps {
   position: "before" | "after";
   index?: number;
   offset?: number | { x: number; y: number };
-  onClick?: () => void;
+  onClick?: ($event?: any) => void;
 }
 
 function AddButton({ position, index, offset, onClick }: AddButtonProps) {
@@ -25,9 +25,11 @@ function AddButton({ position, index, offset, onClick }: AddButtonProps) {
     event.stopPropagation();
     event.preventDefault();
 
+    const domRect = addBlockButtonRef.current?.getBoundingClientRect();
+
     // Custom add action
     if (onClick) {
-      onClick();
+      onClick(domRect);
       return;
     }
   };

packages/editor/src/selectionFrame/SelectionFrame.tsx

@@ -96,7 +96,10 @@ function SelectionFrame({ width, height, transform }: SelectionFrameProps) {
     };
   }, [direction, height, isAddingEnabled, width]);
 
-  async function handleAddButtonClick(which: "before" | "after") {
+  async function handleAddButtonClick(
+    domRect: DOMRect,
+    which: "before" | "after"
+  ) {
     let path = focussedField.length === 1 ? focussedField[0] : undefined;
 
     if (!path) {
@@ -129,7 +132,10 @@ function SelectionFrame({ width, height, transform }: SelectionFrameProps) {
     const parentPath =
       parent.path + (parent.path === "" ? "" : ".") + parent.fieldName;
 
-    const config = await actions.openComponentPicker({ path: parentPath });
+    const config = await actions.openComponentPicker({
+      path: parentPath,
+      domRect,
+    });
 
     if (config) {
       actions.insertItem({
@@ -148,11 +154,11 @@ function SelectionFrame({ width, height, transform }: SelectionFrameProps) {
       <FrameWrapper width={width} height={height} transform={transform}>
         <AddButton
           position="before"
-          onClick={() => handleAddButtonClick("before")}
+          onClick={(domRect) => handleAddButtonClick(domRect, "before")}
         />
         <AddButton
           position="after"
-          onClick={() => handleAddButtonClick("after")}
+          onClick={(domRect) => handleAddButtonClick(domRect, "after")}
         />
       </FrameWrapper>
     </Wrapper>

packages/editor/src/types.ts

@@ -11,6 +11,7 @@ import { EditorContextType } from "./EditorContext";
 export type OpenComponentPickerConfig = {
   path: string;
   componentTypes?: string[];
+  domRect?: DOMRect;
 };
 
 export type MoveItemActionType = {