Fix issue wehre markdown editor would not report the edit completion event correctly

Author: jassmith

packages/core/src/data-grid-overlay-editor/private/markdown-overlay-editor.tsx

@@ -3,23 +3,25 @@ import MarkdownDiv from "../../markdown-div/markdown-div";
 import { GrowingEntry } from "../../growing-entry/growing-entry";
 import { MarkdownOverlayEditorStyle } from "./markdown-overlay-editor-style";
 import { EditPencil, Checkmark } from "../../common/utils";
-import type { Rectangle, SelectionRange } from "../../data-grid/data-grid-types";
+import type { MarkdownCell, Rectangle, SelectionRange } from "../../data-grid/data-grid-types";
 
 interface Props {
     readonly targetRect: Rectangle;
-    readonly markdown: string;
     readonly onChange: (ev: React.ChangeEvent<HTMLTextAreaElement>) => void;
     readonly forceEditMode: boolean;
-    readonly onFinish: () => void;
+    readonly onFinish: (newValue?: MarkdownCell | undefined) => void;
     readonly validatedSelection?: SelectionRange;
 
-    readonly readonly: boolean;
+    readonly value: MarkdownCell;
 
     createNode?: (content: string) => DocumentFragment;
 }
 
 export const MarkdownOverlayEditor: React.FunctionComponent<Props> = p => {
-    const { markdown, onChange, forceEditMode, createNode, targetRect, readonly, onFinish, validatedSelection } = p;
+    const { value, onChange, forceEditMode, createNode, targetRect, onFinish, validatedSelection } = p;
+
+    const markdown = value.data;
+    const readonly = value.readonly === true;
 
     const [editMode, setEditMode] = React.useState<boolean>(markdown === "" || forceEditMode);
     const onEditClick = React.useCallback(() => {
@@ -40,7 +42,7 @@ export const MarkdownOverlayEditor: React.FunctionComponent<Props> = p => {
                     }}
                     onChange={onChange}
                 />
-                <div className={`edit-icon checkmark-hover ${addLeftPad}`} onClick={() => onFinish()}>
+                <div className={`edit-icon checkmark-hover ${addLeftPad}`} onClick={() => onFinish(value)}>
                     <Checkmark />
                 </div>
             </MarkdownOverlayEditorStyle>

packages/core/src/data-grid/cells/markdown-cell.tsx

@@ -21,21 +21,13 @@ export const markdownCellRenderer: InternalCellRenderer<MarkdownCell> = {
         data: "",
     }),
     provideEditor: () => p => {
-        const {
-            onChange,
-            value,
-            target,
-            onFinishedEditing,
-            markdownDivCreateNode,
-            forceEditMode,
-            validatedSelection,
-        } = p;
+        const { onChange, value, target, onFinishedEditing, markdownDivCreateNode, forceEditMode, validatedSelection } =
+            p;
         return (
             <MarkdownOverlayEditor
                 onFinish={onFinishedEditing}
                 targetRect={target}
-                readonly={value.readonly === true}
-                markdown={value.data}
+                value={value}
                 validatedSelection={validatedSelection}
                 onChange={e =>
                     onChange({

packages/core/test/data-grid-overlay.test.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { render } from "@testing-library/react";
 import BubblesOverlayEditor from "../src/data-grid-overlay-editor/private/bubbles-overlay-editor";
 import DrilldownOverlayEditor from "../src/data-grid-overlay-editor/private/drilldown-overlay-editor";
-import { ImageOverlayEditor } from "../src";
+import { GridCellKind, ImageOverlayEditor } from "../src";
 import { MarkdownOverlayEditor } from "../src/data-grid-overlay-editor/private/markdown-overlay-editor";
 import NumberOverlayEditor from "../src/data-grid-overlay-editor/private/number-overlay-editor";
 import UriOverlayEditor from "../src/data-grid-overlay-editor/private/uri-overlay-editor";
@@ -28,10 +28,13 @@ describe("data-grid-overlay", () => {
         render(
             <MarkdownOverlayEditor
                 forceEditMode={false}
-                markdown="# Header"
+                value={{
+                    kind: GridCellKind.Markdown,
+                    allowOverlay: true,
+                    data: "# Header",
+                }}
                 onChange={spy}
                 onFinish={spy}
-                readonly={false}
                 targetRect={{ x: 0, y: 0, width: 200, height: 32 }}
             />
         );