From b1afc0bc206da54a653d57475e700d9cb1929322 Mon Sep 17 00:00:00 2001
From: Valery Sizikova <valery.sizikova@thinkmill.com.au>
Date: Mon, 18 Sep 2023 13:47:20 +1000
Subject: [PATCH] fix per comments

---
 packages/keystatic/src/form/api.tsx           |  1 +
 .../component-blocks/chromeful-element.tsx    | 45 +++++++++++++------
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/packages/keystatic/src/form/api.tsx b/packages/keystatic/src/form/api.tsx
index 823404a32..1bc808af8 100644
--- a/packages/keystatic/src/form/api.tsx
+++ b/packages/keystatic/src/form/api.tsx
@@ -292,6 +292,7 @@ export type ComponentBlock<
       chromeless?: false;
       toolbar?: (props: {
         props: Record<string, any>;
+        onShowEditMode(): void;
         onRemove(): void;
         isValid: boolean;
       }) => ReactElement;
diff --git a/packages/keystatic/src/form/fields/document/DocumentEditor/component-blocks/chromeful-element.tsx b/packages/keystatic/src/form/fields/document/DocumentEditor/component-blocks/chromeful-element.tsx
index b0858bf63..02043332d 100644
--- a/packages/keystatic/src/form/fields/document/DocumentEditor/component-blocks/chromeful-element.tsx
+++ b/packages/keystatic/src/form/fields/document/DocumentEditor/component-blocks/chromeful-element.tsx
@@ -8,11 +8,12 @@ import {
   forwardRef,
   Ref,
   useId,
+  useCallback,
 } from 'react';
 import { RenderElementProps, useSelected } from 'slate-react';
 
 import { ActionButton, Button, ButtonGroup } from '@keystar/ui/button';
-import { Dialog, DialogTrigger } from '@keystar/ui/dialog';
+import { Dialog, DialogContainer } from '@keystar/ui/dialog';
 import { FieldMessage } from '@keystar/ui/field';
 import { trash2Icon } from '@keystar/ui/icon/icons/trash2Icon';
 import { Icon } from '@keystar/ui/icon';
@@ -20,7 +21,7 @@ import { Flex } from '@keystar/ui/layout';
 import { Content } from '@keystar/ui/slots';
 import { css, tokenSchema } from '@keystar/ui/style';
 import { Tooltip, TooltipTrigger } from '@keystar/ui/tooltip';
-import { Text } from '@keystar/ui/typography';
+import { Heading, Text } from '@keystar/ui/typography';
 
 import l10nMessages from '../../../../../app/l10n/index.json';
 import {
@@ -67,6 +68,15 @@ export function ChromefulComponentBlockElement(props: {
     [props.componentBlock, props.elementProps]
   );
 
+  const [modalOpen, setModalOpen] = useState(false);
+  const openModal = useCallback(() => {
+    setModalOpen(true);
+  }, []);
+
+  const closeModal = useCallback(() => {
+    setModalOpen(false);
+  }, []);
+
   const ChromefulToolbar =
     props.componentBlock.toolbar ?? DefaultToolbarWithChrome;
   return (
@@ -88,7 +98,21 @@ export function ChromefulComponentBlockElement(props: {
             isValid={isValid}
             onRemove={props.onRemove}
             props={props.previewProps}
+            onShowEditMode={openModal}
           />
+          <DialogContainer onDismiss={() => closeModal()}>
+            {(() => {
+              if (!modalOpen) {
+                return;
+              }
+              return (
+                <Dialog>
+                  <Heading>Edit {props.componentBlock.label}</Heading>
+                  <FormValue props={props.previewProps} onClose={closeModal} />
+                </Dialog>
+              );
+            })()}
+          </DialogContainer>
         </Fragment>
       </Flex>
     </BlockPrimitive>
@@ -140,10 +164,11 @@ const BlockPrimitive = forwardRef(function BlockPrimitive(
 });
 
 function DefaultToolbarWithChrome({
-  props,
+  onShowEditMode,
   onRemove,
   isValid,
 }: {
+  onShowEditMode(): void;
   onRemove(): void;
   props: any;
   isValid: boolean;
@@ -153,14 +178,9 @@ function DefaultToolbarWithChrome({
     <NotEditable>
       <Flex direction="column" gap="medium">
         <Flex alignItems="center" gap="regular" style={{ userSelect: 'none' }}>
-          <DialogTrigger>
-            <ActionButton>{stringFormatter.format('edit')}</ActionButton>
-            {close => (
-              <Dialog onDismiss={close}>
-                <FormValue props={props} onClose={close} />
-              </Dialog>
-            )}
-          </DialogTrigger>
+          <ActionButton onPress={() => onShowEditMode()}>
+            {stringFormatter.format('edit')}
+          </ActionButton>
           <TooltipTrigger>
             <ActionButton prominence="low" onPress={onRemove}>
               <Icon src={trash2Icon} />
@@ -188,8 +208,7 @@ function FormValue({
   const stringFormatter = useLocalizedStringFormatter(l10nMessages);
   const formId = useId();
   const [forceValidation, setForceValidation] = useState(false);
-  const val: unknown[] = previewPropsToValue(props as any);
-  const [state, setState] = useState(val);
+  const [state, setState] = useState(previewPropsToValue(props as any));
   const previewProps = useMemo(
     () => createGetPreviewProps(props.schema, setState, () => undefined),
     [props.schema]