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]

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;

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,
   };
 }
 

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;
+}

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,
+  };
+};

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;

assets/js/src/form_editor/store/state_types.ts

@@ -0,0 +1,4 @@
+export type BlockInsertionPoint = {
+  rootClientId: string|undefined;
+  insertionIndex: number|undefined;
+}

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