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/tinacms/fields/plugins/IdentityFieldPlugin.tsx

@@ -9,7 +9,7 @@ import {
 } from "@easyblocks/core/_internals";
 import { ButtonGhost, Icons, Typography } from "@easyblocks/design-system";
 import { toArray } from "@easyblocks/utils";
-import React, { useContext } from "react";
+import React, { useContext, useRef } from "react";
 import type { FieldRenderProps } from "react-final-form";
 import { css } from "styled-components";
 import { useEditorContext } from "../../../EditorContext";
@@ -25,6 +25,8 @@ function IdentityField({ input, field }: IdentityFieldProps) {
   const editorContext = useEditorContext();
   const panelContext = useContext(PanelContext);
 
+  const changeComponentButton = useRef<HTMLButtonElement>(null);
+
   const isMixed = isMixedFieldValue(input.value);
   const config = isMixed ? null : input.value;
 
@@ -71,8 +73,10 @@ function IdentityField({ input, field }: IdentityFieldProps) {
 
     const componentPickerPath = parent.path + "." + parent.fieldName;
 
+    const domRect = changeComponentButton?.current?.getBoundingClientRect();
+
     editorContext.actions
-      .openComponentPicker({ path: componentPickerPath })
+      .openComponentPicker({ path: componentPickerPath, domRect })
       .then((selectedConfig) => {
         if (!selectedConfig) {
           return;
@@ -142,7 +146,10 @@ function IdentityField({ input, field }: IdentityFieldProps) {
           <div style={{ padding: "7px 6px" }}>{titleContent}</div>
         )}
         {!isNonChangable && (
-          <ButtonGhost onClick={handleChangeComponentType}>
+          <ButtonGhost
+            ref={changeComponentButton}
+            onClick={handleChangeComponentType}
+          >
             {titleContent}
           </ButtonGhost>
         )}

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 = {