Notebook fixes for NT10 'click-to-edit entry' (#3475)

* Notebook fixes for NT10 'click-to-edit entry'

- Hovering over entries now displays a subtle background change, and
only displays the 'inline input' look when clicked into;
- Changed default styling and behavior to not apply default text
content: new entries now start with a blank entry, and do not include
'placeholder' formatting;
- Refactored styles associated with `c-input-inline`, `c-ne__input` and
`reactive-input` mixin;
- New mixin `inlineInput`;
- Removed unused CSS classes, general cleanups;

* fixed defaultText as blank issue and some cleanup

* Update _mixins.scss

- Remove commented code;

Co-authored-by: Nikhil Mandlik <nikhil.k.mandlik@nasa.gov>

src/plugins/notebook/components/NotebookEntry.vue

@@ -12,12 +12,11 @@
         <div class="c-ne__content">
             <div :id="entry.id"
                  class="c-ne__text"
-                 :class="{'c-input-inline' : !readOnly }"
+                 :class="{'c-ne__input' : !readOnly }"
                  :contenteditable="!readOnly"
-                 :style="!entry.text.length ? defaultEntryStyle : ''"
                  @blur="updateEntryValue($event, entry.id)"
                  @focus="updateCurrentEntryValue($event, entry.id)"
-            >{{ entry.text.length ? entry.text : defaultText }}</div>
+            >{{ entry.text }}</div>
             <div class="c-snapshots c-ne__embeds">
                 <NotebookEmbed v-for="embed in entry.embeds"
                                :key="embed.id"
@@ -106,12 +105,7 @@ export default {
     },
     data() {
         return {
-            currentEntryValue: '',
-            defaultEntryStyle: {
-                fontStyle: 'italic',
-                color: '#6e6e6e'
-            },
-            defaultText: 'add description'
+            currentEntryValue: ''
         };
     },
     computed: {
@@ -235,24 +229,13 @@ export default {
             this.entry.embeds.splice(embedPosition, 1);
             this.updateEntry(this.entry);
         },
-        selectTextInsideElement(element) {
-            const range = document.createRange();
-            range.selectNodeContents(element);
-            let selection = window.getSelection();
-            selection.removeAllRanges();
-            selection.addRange(range);
-        },
         updateCurrentEntryValue($event) {
             if (this.readOnly) {
                 return;
             }
 
             const target = $event.target;
-            this.currentEntryValue = target ? target.innerText : '';
-
-            if (!this.entry.text.length) {
-                this.selectTextInsideElement(target);
-            }
+            this.currentEntryValue = target ? target.textContent : '';
         },
         updateEmbed(newEmbed) {
             this.entry.embeds.some(e => {
@@ -292,6 +275,8 @@ export default {
             const entryPos = this.entryPosById(entryId);
             const value = target.textContent.trim();
             if (this.currentEntryValue !== value) {
+                target.textContent = value;
+
                 const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
                 entries[entryPos].text = value;