Please check the image for reference
The editable div
is added using tags and text. Text is inputted by the user. The tags are selected from the two boxes above them.
When the data in the tags is changed then the tags selection list data is also changed accordingly.
But the data in the content-editable div remains same. I need it to also change accordingly or notify missing when deleted.
I am using Meteor JS and Blaze , React for this . I took some reference from this fiddle link
"click .selectable-tags"(e, t) {
// sets the tags inside the Method box on click
let el = e.target.cloneNode(true);
el.setAttribute('contenteditable', false);
document.querySelector('[contenteditable]').appendChild(el);
},
<div class="recipe_create_form_input_lable">Ing</div>
<div class="ingredients-list">
{{#each ing}}
<div class="ingredients-div" id="ing_parent_{{@index}}">
<div class="ing-list-box-left">
<input type="text" value="{{this}}" placeholder="Ing " class="ree-create-text_box_rectangle ingredient_input" id="ing_{{@index}}"> <span class="timeLable"></span>
</div>
<div class="ings-list-box-right">
<button type="button" class="btn btn-default delete-ing-btn" style="margin-left : 5px;">
<!-- <img src="/images/remove-copy-2.svg" style="width:30px;"/> -->
<label style="width:30px;height: 18px;">x</label>
</button>
</div>
</div>
{{/each}}
</div>
{{#each stepList}}
<div class="step-div" id="step_{{@index}}">
<div class="step-list-box-left">
<div class="rec_create_form_input_lable stepLabel">Step {{getStepNo(@index)}}</div>
<div value="{{this}}" id="step_input_{{@index}}" name="step" class="rec-create-text_box_rectangle stepbox step_input" contenteditable="true"></div>
</div>
<div class="step-list-box-right">
<button type="button" class="btn btn-default delete-step-btn" style="margin-left : 5px;">
<label style="width:30px;height: 18px;">x</label>
</button>
</div>
</div>
<div class="showbiz">
<div class="custom-input">
<div class="selectable-tags">
{{#each ing }}
<span style=" background: #E1ECF4;border: 1px dotted #39739d;" class="ingredients-tags"> {{this}} </span>
{{/each}}
</div> </div>
</div>
{{/each}}
<div>