feat: add content editable support

src/app/features/path/path.component.html

@@ -1,6 +1,6 @@
 <div class="path">
   <div class="header markdown">
-    <h2>Path to Production</h2>
+    <h3>Path to Production</h3>
   </div>
 
   <mat-toolbar>
@@ -24,17 +24,20 @@ <h2>{{pipe.title}}</h2>
         </div>
       </div>
       <div class='wrapper' id="pipe">
-        <div class='container' *ngFor="let pipe of pipeData;let i = index"
+        <div class='container'
+             *ngFor="let pipe of pipeData;let i = index"
              id="{{i}}_pipe"
              [ngStyle]="getContainerStyle(pipe)">
 
           <div
             class="editable"
-            contenteditable="true"
+            #itemElement
+            id="pipe{{i}}_child{{j}}"
+            (click)="enableEdit(i, j)"
             [ngStyle]="getEditableStyle()"
             (keydown.enter)="updateItem(i, j, $event)"
             ngDefaultControl
-            *ngFor="let item of pipe.items;let j = index" id="{{i}}_pipe_child{{j}}">
+            *ngFor="let item of pipe.items;let j = index">
             {{item}}
           </div>
         </div>

src/app/features/path/path.component.scss

@@ -10,7 +10,7 @@
 
 .header {
   margin-top: 1em;
-  h2 {
+  h3 {
     text-align: center;
   }
 }

src/app/features/path/path.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, ElementRef, OnInit, QueryList, Renderer2, ViewChildren} from '@angular/core';
 import {StorageMap} from '@ngx-pwa/local-storage';
 
 interface Item {
@@ -15,6 +15,7 @@ interface Item {
   styleUrls: ['./path.component.scss']
 })
 export class PathComponent implements OnInit {
+  @ViewChildren('itemElement') itemElements: QueryList<ElementRef>;
   pipeData = [
     {
       id: 1,
@@ -74,7 +75,7 @@ export class PathComponent implements OnInit {
   ];
   private maxLength: number;
 
-  constructor(private storage: StorageMap) {
+  constructor(private storage: StorageMap, private renderer: Renderer2) {
   }
 
   ngOnInit(): void {
@@ -169,4 +170,15 @@ export class PathComponent implements OnInit {
 
     });
   }
+
+  enableEdit(i: number, j: number) {
+    const elementId = `pipe${i}_child${j}`;
+    const filterElements = this.itemElements.filter((el) => {
+      return el.nativeElement.id === elementId;
+    });
+    if (filterElements.length > 0 ) {
+      const element = filterElements[0];
+      this.renderer.setProperty(element.nativeElement, 'contentEditable', true);
+    }
+  }
 }

src/app/shared/shared.module.ts

@@ -27,6 +27,7 @@ import {DragulaModule} from 'ng2-dragula';
     FormsModule,
     ReactiveFormsModule,
     MarkdownRenderComponent,
+    DragulaModule
   ],
   entryComponents: []
 })