From aed6a0c2666efb387fd4a00256c1aaeb43f18b7c Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta.wolny@automattic.com>
Date: Wed, 25 Aug 2021 16:39:18 +0200
Subject: [PATCH] Pass editor context to inserter library component

We need to pass insertion point data to the inserter Library component in side panel,
so that it select proper blocks and insert block to correct place.
Fallback values in the Library component don't work correctly with the default appender
(plus icon at very end of the form).

[MAILPOET-3654]
---
 .../src/form_editor/components/inserter.tsx   | 39 ++++++++++++-------
 assets/js/src/form_editor/store/actions.ts    |  8 ++--
 .../js/src/form_editor/store/actions_types.ts | 11 ++++++
 .../store/reducers/toggle_sidebar.ts          | 27 +++++++++----
 assets/js/src/form_editor/store/selectors.jsx |  5 ++-
 .../js/src/form_editor/store/state_types.ts   |  4 ++
 assets/js/src/form_editor/store/store.jsx     |  2 +-
 7 files changed, 68 insertions(+), 28 deletions(-)
 create mode 100644 assets/js/src/form_editor/store/actions_types.ts
 create mode 100644 assets/js/src/form_editor/store/state_types.ts

diff --git a/assets/js/src/form_editor/components/inserter.tsx b/assets/js/src/form_editor/components/inserter.tsx
index f7ace487e6..44a3f5be4d 100644
--- a/assets/js/src/form_editor/components/inserter.tsx
+++ b/assets/js/src/form_editor/components/inserter.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelect } from '@wordpress/data';
 import { close } from '@wordpress/icons';
 import {
   Button,
@@ -13,21 +14,29 @@ type Props = {
 
 const Inserter: React.FunctionComponent<Props> = ({
   setIsInserterOpened,
-}: Props) => (
-  <div className="edit-post-editor__inserter-panel">
-    <div className="edit-post-editor__inserter-panel-header">
-      <Button
-        icon={close}
-        onClick={(): void => setIsInserterOpened(false)}
-      />
+}: Props) => {
+  const insertPoint = useSelect(
+    (sel) => sel('mailpoet-form-editor').getInserterPanelInsertPoint(),
+    []
+  );
+  return (
+    <div className="edit-post-editor__inserter-panel">
+      <div className="edit-post-editor__inserter-panel-header">
+        <Button
+          icon={close}
+          onClick={(): void => setIsInserterOpened(false)}
+        />
+      </div>
+      <div className="edit-post-editor__inserter-panel-content">
+        <Library
+          showMostUsedBlocks
+          showInserterHelpPanel={false}
+          rootClientId={insertPoint.rootClientId ?? undefined}
+          __experimentalInsertionIndex={insertPoint.insertionIndex ?? undefined}
+        />
+      </div>
     </div>
-    <div className="edit-post-editor__inserter-panel-content">
-      <Library
-        showMostUsedBlocks
-        showInserterHelpPanel={false}
-      />
-    </div>
-  </div>
-);
+  );
+};
 
 export default Inserter;
diff --git a/assets/js/src/form_editor/store/actions.ts b/assets/js/src/form_editor/store/actions.ts
index 800718c8c1..216a6ab136 100644
--- a/assets/js/src/form_editor/store/actions.ts
+++ b/assets/js/src/form_editor/store/actions.ts
@@ -2,18 +2,20 @@ import { select, dispatch } from '@wordpress/data';
 import { SETTINGS_DEFAULTS } from '@wordpress/block-editor';
 import blocksToFormBodyFactory from './blocks_to_form_body';
 import mapFormDataBeforeSaving from './map_form_data_before_saving';
+import { ToggleAction, ToggleBlockInserterAction } from './actions_types';
+import { BlockInsertionPoint } from './state_types';
 
-export function toggleSidebar(toggleTo) {
+export function toggleSidebar(toggleTo): ToggleAction {
   return {
     type: 'TOGGLE_SIDEBAR',
     toggleTo,
   };
 }
 
-export function toggleInserter(toggleTo) {
+export function toggleInserter(toggleTo: BlockInsertionPoint|boolean): ToggleBlockInserterAction {
   return {
     type: 'TOGGLE_INSERTER_SIDEBAR',
-    toggleTo: !!toggleTo,
+    value: toggleTo,
   };
 }
 
diff --git a/assets/js/src/form_editor/store/actions_types.ts b/assets/js/src/form_editor/store/actions_types.ts
new file mode 100644
index 0000000000..9c01d37011
--- /dev/null
+++ b/assets/js/src/form_editor/store/actions_types.ts
@@ -0,0 +1,11 @@
+import { BlockInsertionPoint } from './state_types';
+
+export type ToggleAction = {
+  type: string;
+  toggleTo: boolean;
+}
+
+export type ToggleBlockInserterAction = {
+  type: string;
+  value: boolean | BlockInsertionPoint;
+}
diff --git a/assets/js/src/form_editor/store/reducers/toggle_sidebar.ts b/assets/js/src/form_editor/store/reducers/toggle_sidebar.ts
index 7ee74baf28..8dd08a0570 100644
--- a/assets/js/src/form_editor/store/reducers/toggle_sidebar.ts
+++ b/assets/js/src/form_editor/store/reducers/toggle_sidebar.ts
@@ -1,14 +1,25 @@
-type ToggleAction = {
-  type: string;
-  toggleTo: boolean;
-}
+import { ToggleAction, ToggleBlockInserterAction } from '../actions_types';
+import { BlockInsertionPoint } from '../state_types';
 
 export const toggleSidebar = (state, action: ToggleAction) => ({
   ...state,
   sidebarOpened: action.toggleTo,
 });
 
-export const toggleInserterSidebar = (state, action: ToggleAction) => ({
-  ...state,
-  isInserterOpened: action.toggleTo,
-});
+export const toggleInserterSidebar = (state, action: ToggleBlockInserterAction) => {
+  let inserterPanel: BlockInsertionPoint;
+  if (!action.value) {
+    inserterPanel = null;
+  } else if (action.value === true) {
+    inserterPanel = {
+      rootClientId: undefined,
+      insertionIndex: undefined,
+    };
+  } else {
+    inserterPanel = action.value;
+  }
+  return {
+    ...state,
+    inserterPanel,
+  };
+};
diff --git a/assets/js/src/form_editor/store/selectors.jsx b/assets/js/src/form_editor/store/selectors.jsx
index 28dc104176..33c01f6933 100644
--- a/assets/js/src/form_editor/store/selectors.jsx
+++ b/assets/js/src/form_editor/store/selectors.jsx
@@ -23,7 +23,10 @@ export default {
     return state.fullscreenStatus;
   },
   isInserterOpened(state) {
-    return state.isInserterOpened;
+    return !!state.inserterPanel;
+  },
+  getInserterPanelInsertPoint(state) {
+    return state.inserterPanel;
   },
   getSidebarOpened(state) {
     return state.sidebarOpened;
diff --git a/assets/js/src/form_editor/store/state_types.ts b/assets/js/src/form_editor/store/state_types.ts
new file mode 100644
index 0000000000..2c4065872f
--- /dev/null
+++ b/assets/js/src/form_editor/store/state_types.ts
@@ -0,0 +1,4 @@
+export type BlockInsertionPoint = {
+  rootClientId: string|undefined;
+  insertionIndex: number|undefined;
+}
diff --git a/assets/js/src/form_editor/store/store.jsx b/assets/js/src/form_editor/store/store.jsx
index 69c782b774..531e974e68 100644
--- a/assets/js/src/form_editor/store/store.jsx
+++ b/assets/js/src/form_editor/store/store.jsx
@@ -64,7 +64,7 @@ export default () => {
     isFormSaving: false,
     isCustomFieldSaving: false,
     isCustomFieldCreating: false,
-    isInserterOpened: false,
+    inserterPanel: null,
     notices: [],
     hasUnsavedChanges: false,
     sidebar: {