parser status indication

src/public/app/widgets/note_attributes.js

@@ -3,7 +3,6 @@ import libraryLoader from "../services/library_loader.js";
 import noteAutocompleteService from "../services/note_autocomplete.js";
 import treeCache from "../services/tree_cache.js";
 import server from "../services/server.js";
-import utils from "../services/utils.js";
 import ws from "../services/ws.js";
 import SpacedUpdate from "../services/spaced_update.js";
 import attributesParser from "../services/attribute_parser.js";
@@ -81,6 +80,10 @@ const TPL = `
     margin-bottom: 5px !important;
 }
 
+.note-attributes.error .note-attributes-editor {
+    border-color: red !important;
+}
+
 .attr-extras {
     display: block;
     background-color: var(--accented-background-color);
@@ -109,7 +112,7 @@ const TPL = `
     <div class="attr-extras-more-notes"></div>
 </div>
 
-<div class="note-attributes-editor"></div>
+<div class="note-attributes-editor" tabindex="200"></div>
 </div>
 `;
 
@@ -119,10 +122,8 @@ export default class NoteAttributesWidget extends TabAwareWidget {
     constructor() {
         super();
 
-        this.spacedUpdate = new SpacedUpdate(async () => {
+        this.spacedUpdate = new SpacedUpdate(() => {
-            const content = this.textEditor.getData();
+            this.parseAttributes();
-
-            this.parse(content);
 
             this.$attrExtras.hide();
         });
@@ -141,19 +142,46 @@ export default class NoteAttributesWidget extends TabAwareWidget {
             const keycode = (e.keyCode ? e.keyCode : e.which);
 
             if (keycode === 13) {
-                const attributes = attributesParser.lexAndParse(this.textEditor.getData());
+                this.triggerCommand('focusOnDetail', {tabId: this.tabContext.tabId});
 
-                await server.put(`notes/${this.noteId}/attributes2`, attributes, this.componentId);
+                await this.save();
             }
 
             this.$attrExtras.hide();
         });
 
-        this.$editor.on('blur', () => this.$attrExtras.hide());
+        this.$editor.on('blur', () => {
+            this.save();
+
+            this.$attrExtras.hide();
+        });
 
         return this.$widget;
     }
 
+    async save() {
+        const attributes = this.parseAttributes();
+
+        if (attributes) {
+            await server.put(`notes/${this.noteId}/attributes2`, attributes, this.componentId);
+        }
+    }
+
+    parseAttributes() {
+        try {
+            const attrs = attributesParser.lexAndParse(this.textEditor.getData());
+
+            this.$widget.removeClass("error");
+            this.$widget.removeAttr("title");
+
+            return attrs;
+        }
+        catch (e) {
+            this.$widget.attr("title", e.message);
+            this.$widget.addClass("error");
+        }
+    }
+
     async initEditor() {
         await libraryLoader.requireLibrary(libraryLoader.CKEDITOR);
 
@@ -413,15 +441,9 @@ export default class NoteAttributesWidget extends TabAwareWidget {
         return searchStr;
     }
 
-    parse(content) {
+    async focusOnAttributesEvent({tabId}) {
-        if (content.startsWith('<p>')) {
+        if (this.tabContext.tabId === tabId) {
-            content = content.substr(3);
+            this.$editor.trigger('focus');
         }
-
-        if (content.endsWith('</p>')) {
-            content = content.substr(0, content - 4);
-        }
-
-        console.log(content);
     }
 }

src/public/app/widgets/note_title.js

@@ -23,7 +23,7 @@ const TPL = `
     }
     </style>
 
-    <input autocomplete="off" value="" class="note-title" tabindex="1">
+    <input autocomplete="off" value="" class="note-title" tabindex="100">
 </div>`;
 
 export default class NoteTitleWidget extends TabAwareWidget {

src/public/app/widgets/promoted_attributes.js

@@ -98,7 +98,7 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
         const $tr = $("<tr>");
         const $labelCell = $("<th>").append(valueAttr.name);
         const $input = $("<input>")
-            .prop("tabindex", definitionAttr.position)
+            .prop("tabindex", 200 + definitionAttr.position)
             .prop("attribute-id", valueAttr.noteId === this.noteId ? valueAttr.attributeId : '') // if not owned, we'll force creation of a new attribute instead of updating the inherited one
             .prop("attribute-type", valueAttr.type)
             .prop("attribute-name", valueAttr.name)

src/public/app/widgets/type_widgets/editable_code.js

@@ -108,7 +108,7 @@ export default class EditableCodeTypeWidget extends TypeWidget {
             lint: true,
             gutters: ["CodeMirror-lint-markers"],
             lineNumbers: true,
-            tabindex: 100,
+            tabindex: 300,
             // we linewrap partly also because without it horizontal scrollbar displays only when you scroll
             // all the way to the bottom of the note. With line wrap there's no horizontal scrollbar so no problem
             lineWrapping: true,

src/public/app/widgets/type_widgets/editable_text.js

@@ -72,7 +72,7 @@ const TPL = `
     }
     </style>
 
-    <div class="note-detail-text-editor" tabindex="10000"></div>
+    <div class="note-detail-text-editor" tabindex="300"></div>
 </div>
 `;