feat(react/ribbon): display help tooltip in attribute editor

apps/client/src/widgets/react/CKEditor.tsx

@@ -1,4 +1,4 @@
-import type { AttributeEditor, EditorConfig } from "@triliumnext/ckeditor5";
+import { CKTextEditor, type AttributeEditor, type EditorConfig, type ModelPosition } from "@triliumnext/ckeditor5";
 import { useEffect, useRef } from "preact/compat";
 
 interface CKEditorOpts {
@@ -9,15 +9,19 @@ interface CKEditorOpts {
     disableNewlines?: boolean;
     disableSpellcheck?: boolean;
     onChange?: () => void;
+    onClick?: (pos?: ModelPosition | null) => void;
 }
 
-export default function CKEditor({ className, tabIndex, editor, config, disableNewlines, disableSpellcheck, onChange }: CKEditorOpts) {
+export default function CKEditor({ className, tabIndex, editor, config, disableNewlines, disableSpellcheck, onChange, onClick }: CKEditorOpts) {
     const editorContainerRef = useRef<HTMLDivElement>(null);    
+    const textEditorRef = useRef<CKTextEditor>(null);
 
     useEffect(() => {
         if (!editorContainerRef.current) return;
 
         editor.create(editorContainerRef.current, config).then((textEditor) => {
+            textEditorRef.current = textEditor;
+
             if (disableNewlines) {
                 textEditor.editing.view.document.on(
                     "enter",
@@ -48,6 +52,12 @@ export default function CKEditor({ className, tabIndex, editor, config, disableN
             ref={editorContainerRef}
             className={className}
             tabIndex={tabIndex}
+            onClick={() => {
+                if (onClick) {
+                    const pos = textEditorRef.current?.model.document.selection.getFirstPosition();
+                    onClick(pos);
+                }
+            }}
         />
     )
 }

apps/client/src/widgets/react/hooks.tsx

@@ -12,7 +12,8 @@ import FNote from "../../entities/fnote";
 import attributes from "../../services/attributes";
 import FBlob from "../../entities/fblob";
 import NoteContextAwareWidget from "../note_context_aware_widget";
-import { RefObject, VNode } from "preact";
+import { Ref, RefObject, VNode } from "preact";
+import { Tooltip } from "bootstrap";
 
 type TriliumEventHandler<T extends EventNames> = (data: EventData<T>) => void;
 const registeredHandlers: Map<Component, Map<EventNames, TriliumEventHandler<any>[]>> = new Map();
@@ -510,4 +511,29 @@ export function useWindowSize() {
     });
 
     return size;
+}
+
+export function useTooltip(elRef: RefObject<HTMLElement>, config: Partial<Tooltip.Options>) {
+    useEffect(() => {
+        if (!elRef?.current) return;
+
+        const $el = $(elRef.current);
+        $el.tooltip(config);        
+    }, [ elRef, config ]);
+
+    const showTooltip = useCallback(() => {
+        if (!elRef?.current) return;
+
+        const $el = $(elRef.current);
+        $el.tooltip("show");
+    }, [ elRef ]);
+
+    const hideTooltip = useCallback(() => {
+        if (!elRef?.current) return;
+
+        const $el = $(elRef.current);
+        $el.tooltip("hide");
+    }, [ elRef ]);
+
+    return { showTooltip, hideTooltip };
 }