chore(react/ribbon): react to add new label/relation even when not shown

apps/client/src/widgets/containers/ribbon_container.ts

@@ -28,50 +28,6 @@ export default class RibbonContainer extends NoteContextAwareWidget {
         this.buttonWidgets = [];
     }
 
-    isRibbonTabActive(name: string) {
-        const $ribbonComponent = this.$widget.find(`.ribbon-tab-title[data-ribbon-component-name='${name}']`);
-
-        return $ribbonComponent.hasClass("active");
-    }
-
-    ensureOwnedAttributesAreOpen(ntxId: string | null | undefined) {
-        if (ntxId && this.isNoteContext(ntxId) && !this.isRibbonTabActive("ownedAttributes")) {
-            this.toggleRibbonTabWithName("ownedAttributes", ntxId);
-        }
-    }
-
-    addNewLabelEvent({ ntxId }: EventData<"addNewLabel">) {
-        this.ensureOwnedAttributesAreOpen(ntxId);
-    }
-
-    addNewRelationEvent({ ntxId }: EventData<"addNewRelation">) {
-        this.ensureOwnedAttributesAreOpen(ntxId);
-    }
-
-    toggleRibbonTabWithName(name: string, ntxId?: string) {
-        if (!this.isNoteContext(ntxId)) {
-            return false;
-        }
-
-        const $ribbonComponent = this.$widget.find(`.ribbon-tab-title[data-ribbon-component-name='${name}']`);
-
-        if ($ribbonComponent) {
-            this.toggleRibbonTab($ribbonComponent);
-        }
-    }
-
-    handleEvent<T extends EventNames>(name: T, data: EventData<T>) {
-        const PREFIX = "toggleRibbonTab";
-
-        if (name.startsWith(PREFIX)) {
-            let componentName = name.substr(PREFIX.length);
-            componentName = componentName[0].toLowerCase() + componentName.substr(1);
-
-            this.toggleRibbonTabWithName(componentName, (data as any).ntxId);
-        } else {
-            return super.handleEvent(name, data);
-        }
-    }
 
     async handleEventInChildren<T extends EventNames>(name: T, data: EventData<T>) {
         if (["activeContextChanged", "setNoteContext"].includes(name)) {

apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx

@@ -1,11 +1,14 @@
+import { useTriliumEvents } from "../react/hooks";
 import AttributeEditor from "./components/AttributeEditor";
 import { TabContext } from "./ribbon-interface";
 
-export default function OwnedAttributesTab({ note, ...restProps }: TabContext) {
+export default function OwnedAttributesTab({ note, hidden, activate, ...restProps }: TabContext) {
+    useTriliumEvents([ "addNewLabel", "addNewRelation" ], activate);
+
     return (
         <div className="attribute-list">
             { note && (
-                <AttributeEditor note={note} {...restProps} />
+                <AttributeEditor note={note} {...restProps} hidden={hidden} />
             )}
         </div>
     )

apps/client/src/widgets/ribbon/Ribbon.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { t } from "../../services/i18n";
-import { useNoteContext, useStaticTooltip, useTooltip, useTriliumEvents } from "../react/hooks";
+import { useNoteContext, useStaticTooltip, useTooltip, useTriliumEvent, useTriliumEvents } from "../react/hooks";
 import "./style.css";
 import { VNode } from "preact";
 import BasicPropertiesTab from "./BasicPropertiesTab";
@@ -39,7 +39,7 @@ interface TabConfiguration {
     toggleCommand?: KeyboardActionNames;
     activate?: boolean | ((context: TitleContext) => boolean);
     /**
-     * By default the tab content will not be rendered unless the tab is active (i.e. selected by the user). Setting to `true` will ensure that the tab is rendered even when inactive, for cases where the tab needs to be accessible at all times (e.g. for the detached editor toolbar).
+     * By default the tab content will not be rendered unless the tab is active (i.e. selected by the user). Setting to `true` will ensure that the tab is rendered even when inactive, for cases where the tab needs to be accessible at all times (e.g. for the detached editor toolbar) or if event handling is needed.
      */
     stayInDom?: boolean;
 }
@@ -119,7 +119,8 @@ const TAB_CONFIGURATION = numberObjectsInPlace<TabConfiguration>([
         icon: "bx bx-list-check",
         content: OwnedAttributesTab,
         show: ({note}) => !note?.isLaunchBarConfig(),
-        toggleCommand: "toggleRibbonTabOwnedAttributes"
+        toggleCommand: "toggleRibbonTabOwnedAttributes",
+        stayInDom: true
     },
     {
         title: t("inherited_attribute_list.title"),
@@ -228,7 +229,10 @@ export default function Ribbon() {
                                     hoistedNoteId,
                                     notePath,
                                     noteContext,
-                                    componentId
+                                    componentId,
+                                    activate: useCallback(() => {
+                                        setActiveTabIndex(tab.index)
+                                    }, [setActiveTabIndex])
                                 });
                             })}
                         </div>

apps/client/src/widgets/ribbon/components/AttributeEditor.tsx

@@ -74,7 +74,15 @@ const mentionSetup: MentionFeed[] = [
 ];
 
 
-export default function AttributeEditor({ note, componentId, notePath, ntxId }: { note: FNote, componentId: string, notePath?: string | null, ntxId?: string | null }) {
+interface AttributeEditorProps {
+    note: FNote;
+    componentId: string;
+    notePath?: string | null;
+    ntxId?: string | null;
+    hidden?: boolean;
+}
+
+export default function AttributeEditor({ note, componentId, notePath, ntxId, hidden }: AttributeEditorProps) {
     const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">();
     const [ error, setError ] = useState<unknown>();
     const [ needsSaving, setNeedsSaving ] = useState(false);
@@ -267,7 +275,7 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId }:
     
     return (
         <>
-            <div
+            {!hidden && <div
                 ref={wrapperRef}
                 style="position: relative; padding-top: 10px; padding-bottom: 10px"
                 onKeyDown={(e) => {
@@ -379,7 +387,7 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId }:
                         {getErrorMessage(error)}
                     </div>
                 )}
-            </div>
+            </div>}
 
             {attributeDetailWidgetEl}
         </>

apps/client/src/widgets/ribbon/ribbon-interface.ts

@@ -9,4 +9,5 @@ export interface TabContext {
     notePath?: string | null;
     noteContext?: NoteContext;
     componentId: string;
+    activate(): void;
 }