Feature/#161 insert markdown when click on add delivery

src/common/components/panel/panel.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as CSSTransitionReplace from 'react-css-transition-replace';
+import {IMarkdownEntry} from '../../../model/trainer/markdownEntry';
 
 export class PanelItem {
   public panelId: string;
@@ -9,16 +10,17 @@ export class PanelItem {
 interface Props {
   activePanelId: string;
   panelList: PanelItem[];
+  insertMarkdownEntry?: (markdownEntry: IMarkdownEntry) => void;
 }
 
-const renderSelectedComponent = ({ activePanelId, panelList }: Props) => {
+const renderSelectedComponent = ({ activePanelId, panelList, insertMarkdownEntry }: Props) => {
   let panelItem = <div key={activePanelId} />;
   const panel = panelList.find((currentPanel) => currentPanel.panelId === activePanelId);
 
   if (panel) {
     const Component = panel.component;
     if (Component) {
-      panelItem = <Component key={activePanelId} />;
+      panelItem = <Component key={activePanelId} insertMarkdownEntry={insertMarkdownEntry}/>;
     }
   }
 

src/common/components/panel/spec/panel.spec.tsx

@@ -36,14 +36,18 @@ describe('PanelComponent', () => {
       { panelId: 'panel A', component: innerComponentA },
       { panelId: 'panel B', component: innerComponentB },
     ];
+    const insertMarkdownEntry = sinon.spy();
 
     // Act
     const panelComponent = shallow(
-      <PanelComponent panelList={panelList} activePanelId={activePanelId} />,
+      <PanelComponent panelList={panelList} activePanelId={activePanelId}
+                      insertMarkdownEntry={insertMarkdownEntry}
+      />,
     );
 
     // Assert
     expect(panelComponent.html()).to.contain('<div><span>Inner Component B</span></div>');
     expect(panelComponent.html()).to.not.contain('<div><span>Inner Component A</span></div>');
+    expect(panelComponent.instance().props.insertMarkdownEntry).not.to.be.undefined;
   });
 });

src/pages/trainer/training/edit/components/editor.tsx

@@ -83,7 +83,11 @@ export class EditorComponent extends React.Component<Props, {}> {
           togglePreviewMode={this.props.togglePreviewMode}
         />
         <div className={styles.editorContainer}>
-          <PanelComponent activePanelId={this.props.activePanelId} panelList={panelList} />
+          <PanelComponent
+            activePanelId={this.props.activePanelId}
+            panelList={panelList}
+            insertMarkdownEntry={this.insertMarkdownEntry}
+          />
           {
             !this.props.showPreview ?
               <textarea

src/pages/trainer/training/edit/components/panels/delivery/deliveryForm.tsx

@@ -3,10 +3,14 @@ import {
   InputComponent,
   TextAreaComponent,
 } from '../../../../../../../common/components/form';
+import {IMarkdownEntry} from '../../../../../../../model/trainer/markdownEntry';
+import {markdownEntryConstants} from '../../markdownEntryConstants';
+
 const styles: any = require('./styles.scss');
 
 interface Props {
   togglePanel(): void;
+  insertMarkdownEntry: (markdownEntry: IMarkdownEntry) => void;
 }
 
 interface State {
@@ -80,5 +84,11 @@ export class DeliveryFormComponent extends React.Component<Props, State> {
   private onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     this.props.togglePanel();
+    this.props.insertMarkdownEntry(
+      { mdCaret: `${markdownEntryConstants.link.mdCaret.slice(0, 1)}${this.state.title}`
+               + `${markdownEntryConstants.link.mdCaret.slice(1)}`,
+        caretCursorPosition: markdownEntryConstants.link.cursorPosition,
+      },
+    );
   }
 }

src/pages/trainer/training/edit/components/panels/delivery/deliveryPanelComponent.tsx

@@ -1,15 +1,21 @@
 import * as React from 'react';
 import { DeliveryFormComponent } from './deliveryForm';
+import {IMarkdownEntry} from '../../../../../../../model/trainer/markdownEntry';
+import {markdownEntryConstants} from '../../markdownEntryConstants';
 
 interface Props {
   togglePanel(): void;
+  insertMarkdownEntry: (markdownEntry: IMarkdownEntry) => void;
 }
 
 export const DeliveryPanelComponent: React.StatelessComponent<Props> = (props) => {
   return (
     <div>
       <h4>Add delivery</h4>
-      <DeliveryFormComponent togglePanel={props.togglePanel} />
+      <DeliveryFormComponent
+        togglePanel={props.togglePanel}
+        insertMarkdownEntry={props.insertMarkdownEntry}
+      />
     </div>
   );
 };

src/pages/trainer/training/edit/components/toolbar/groups/commandsGroupComponent.tsx

@@ -38,8 +38,8 @@ export const CommandGroupComponent = (props: IProps) => {
 
         <div className={classNames.horizontalContainer}>
           <ToolbarLabeledMarkdownButton
-            mdCaret={markdownEntryConstants.header.mdCaret}
-            caretCursorPosition={markdownEntryConstants.header.cursorPosition}
+            mdCaret={markdownEntryConstants.link.mdCaret}
+            caretCursorPosition={markdownEntryConstants.link.cursorPosition}
             onClick={props.insertMarkdownEntry}
             paneldId={panelIds.delivery}
             label="Add Delivery"

src/reducers/trainer/spec/training.spec.ts

@@ -187,5 +187,6 @@ describe('trainingReducer', () => {
     // Assert
     expect(nextState.showPreview).to.be.false;
     expect(originalState).to.be.frozen;
+    expect(nextState.shouldUpdateEditorCursor).to.be.false;
   });
 });

src/reducers/trainer/training.ts

@@ -62,6 +62,7 @@ const handleSetActivePanel = (state: TrainingState, payload: string) => ({
 const handleToggleEditorPreview = (state: TrainingState) => ({
   ...state,
   showPreview: !state.showPreview,
+  shouldUpdateEditorCursor: false,
 });
 
 const handleGetSummaryTrainingRequestCompleted = (state: TrainingState, payload: TrainingSummary[]) => ({