click on inherited attr will also bring up the attribute detail widget

package-lock.json

@@ -8487,9 +8487,9 @@
       }
     },
     "ws": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.0.tgz",
-      "integrity": "sha512-iFtXzngZVXPGgpTlP1rBqsUK82p9tKqsWRPg5L56egiljujJT3vGAYnHANvFxBieXrTFavhzhxW52jnaWV+w2w=="
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz",
+      "integrity": "sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA=="
     },
     "x-xss-protection": {
       "version": "1.3.0",

package.json

@@ -70,7 +70,7 @@
     "turndown": "6.0.0",
     "turndown-plugin-gfm": "1.0.2",
     "unescape": "1.0.1",
-    "ws": "7.3.0",
+    "ws": "7.3.1",
     "yauzl": "^2.10.0",
     "yazl": "^2.5.1"
   },

src/public/app/widgets/attribute_detail.js

@@ -50,6 +50,8 @@ const TPL = `
         <span class="bx bx-x close-attr-detail-button"></span>
     </div>
 
+    <div class="attr-is-owned-by"></div>
+
     <table class="attr-edit">
         <tr>
             <th>Name:</th>
@@ -64,7 +66,7 @@ const TPL = `
             <td><input type="checkbox" class="attr-edit-inheritable form-control form-control-sm" /></td>
         </tr>
         <tr>
-            <td colspan="2">
+            <td colspan="2" class="attr-edit-button-row">
                 <div style="display: flex; justify-content: space-between">
                     <div>
                         <button type="submit" class="btn btn-sm btn-primary">Save</button>
@@ -100,7 +102,9 @@ export default class AttributeDetailWidget extends BasicWidget {
         this.$attrEditName = this.$widget.find('.attr-edit-name');
         this.$attrEditValue = this.$widget.find('.attr-edit-value');
         this.$attrEditInheritable = this.$widget.find('.attr-edit-inheritable');
+        this.$attrEditButtonRow = this.$widget.find('.attr-edit-button-row');
         this.$closeAttrDetailButton = this.$widget.find('.close-attr-detail-button');
+        this.$attrIsOwnedBy = this.$widget.find('.attr-is-owned-by');
 
         this.$closeAttrDetailButton.on('click', () => this.hide());
 
@@ -111,8 +115,8 @@ export default class AttributeDetailWidget extends BasicWidget {
         });
     }
 
-    async showAttributeDetail(attr, x, y) {
-        if (!attr) {
+    async showAttributeDetail({attribute, isOwned, x, y}) {
+        if (!attribute) {
             this.hide();
 
             return;
@@ -120,7 +124,7 @@ export default class AttributeDetailWidget extends BasicWidget {
 
         this.toggleInt(true);
 
-        let {results, count} = await server.post('search-related', attr);
+        let {results, count} = await server.post('search-related', attribute);
 
         for (const res of results) {
             res.noteId = res.notePathArray[res.notePathArray.length - 1];
@@ -132,7 +136,7 @@ export default class AttributeDetailWidget extends BasicWidget {
             this.$relatedNotesTitle.hide();
         }
         else {
-            this.$relatedNotesTitle.text(`Other notes with ${attr.type} name "${attr.name}"`);
+            this.$relatedNotesTitle.text(`Other notes with ${attribute.type} name "${attribute.name}"`);
         }
 
         this.$relatedNotesList.empty();
@@ -156,8 +160,26 @@ export default class AttributeDetailWidget extends BasicWidget {
             this.$relatedNotesMoreNotes.hide();
         }
 
-        this.$attrEditName.val(attr.name);
-        this.$attrEditValue.val(attr.value);
+        if (isOwned) {
+            this.$attrIsOwnedBy.hide();
+        }
+        else {
+            this.$attrIsOwnedBy
+                .show()
+                .append(attribute.type === 'label' ? 'Label' : 'Relation')
+                .append(' is owned by note ')
+                .append(await linkService.createNoteLink(attribute.noteId))
+        }
+
+        this.$attrEditName
+            .val(attribute.name)
+            .attr('readonly', () => !isOwned);
+
+        this.$attrEditValue
+            .val(attribute.value)
+            .attr('readonly', () => !isOwned);
+
+        this.$attrEditButtonRow.toggle(!!isOwned);
 
         this.$widget.css("left", x - this.$widget.width() / 2);
         this.$widget.css("top", y + 30);

src/public/app/widgets/note_attributes.js

@@ -329,7 +329,12 @@ export default class NoteAttributesWidget extends TabAwareWidget {
                     }
                 }
 
-                this.attributeDetailWidget.showAttributeDetail(matchedAttr, e.pageX, e.pageY);
+                this.attributeDetailWidget.showAttributeDetail({
+                    attribute: matchedAttr,
+                    isOwned: true,
+                    x: e.pageX,
+                    y: e.pageY
+                });
             }
         });
 
@@ -419,7 +424,7 @@ export default class NoteAttributesWidget extends TabAwareWidget {
         const ownedAttributes = note.getOwnedAttributes();
         const $attributesContainer = $("<div>");
 
-        await this.renderAttributes(ownedAttributes, $attributesContainer);
+        await this.renderAttributesIntoCKEditor(ownedAttributes, $attributesContainer);
 
         await this.spacedUpdate.allowUpdateWithoutChange(() => {
             this.textEditor.setData($attributesContainer.html());
@@ -440,7 +445,7 @@ export default class NoteAttributesWidget extends TabAwareWidget {
 
         this.$inheritedAttributes.empty();
 
-        await this.renderAttributes(inheritedAttributes, this.$inheritedAttributes);
+        await this.renderAttributesIntoDiv(inheritedAttributes, this.$inheritedAttributes);
 
         this.parseAttributes();
     }
@@ -457,8 +462,34 @@ export default class NoteAttributesWidget extends TabAwareWidget {
         });
     }
 
-    async renderAttributes(attributes, $container) {
+    async renderAttributesIntoCKEditor(attributes, $container) {
         for (const attribute of attributes) {
+            this.renderAttribute(attribute, $container);
+        }
+    }
+
+    renderAttributesIntoDiv(attributes, $container) {
+        for (const attribute of attributes) {
+            const $span = $("<span>")
+                .on('click', e => this.attributeDetailWidget.showAttributeDetail({
+                    attribute: {
+                        noteId: attribute.noteId,
+                        type: attribute.type,
+                        name: attribute.name,
+                        value: attribute.value
+                    },
+                    isOwned: false,
+                    x: e.pageX,
+                    y: e.pageY
+                }));
+
+            $container.append($span);
+
+            this.renderAttribute(attribute, $span);
+        }
+    }
+
+    renderAttribute(attribute, $container) {
         if (attribute.type === 'label') {
             $container.append(document.createTextNode('#' + attribute.name));
 
@@ -470,7 +501,7 @@ export default class NoteAttributesWidget extends TabAwareWidget {
             $container.append(' ');
         } else if (attribute.type === 'relation') {
             if (attribute.isAutoLink) {
-                    continue;
+                return;
             }
 
             if (attribute.value) {
@@ -484,7 +515,6 @@ export default class NoteAttributesWidget extends TabAwareWidget {
             ws.logError("Unknown attr type: " + attribute.type);
         }
     }
-    }
 
     formatValue(val) {
         if (/^[\p{L}\p{N}\-_,.]+$/u.test(val)) {