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

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

@@ -1,9 +1,17 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks"
-import { AttributeEditor as CKEditorAttributeEditor, EditorConfig, MentionFeed } from "@triliumnext/ckeditor5";
+import { useEffect, useRef, useState } from "preact/hooks"
+import { AttributeEditor as CKEditorAttributeEditor, MentionFeed } from "@triliumnext/ckeditor5";
 import { t } from "../../../services/i18n";
 import server from "../../../services/server";
 import note_autocomplete, { Suggestion } from "../../../services/note_autocomplete";
 import CKEditor from "../../react/CKEditor";
+import { useTooltip } from "../../react/hooks";
+
+const HELP_TEXT = `
+<p>${t("attribute_editor.help_text_body1")}</p>
+
+<p>${t("attribute_editor.help_text_body2")}</p>
+
+<p>${t("attribute_editor.help_text_body3")}</p>`;
 
 const mentionSetup: MentionFeed[] = [
     {
@@ -51,11 +59,27 @@ const mentionSetup: MentionFeed[] = [
 
 
 export default function AttributeEditor() {
-    
-    const [ attributeDetailVisible, setAttributeDetailVisible ] = useState(false);
 
+    const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">();
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const { showTooltip, hideTooltip } = useTooltip(wrapperRef, {
+        trigger: "focus",
+        html: true,
+        title: HELP_TEXT,
+        placement: "bottom",
+        offset: "0,30"
+    });
+
+    useEffect(() => {
+        if (state === "showHelpTooltip") {
+            showTooltip();
+        } else {
+            hideTooltip();
+        }
+    }, [ state ]);
+    
     return (
-        <div style="position: relative; padding-top: 10px; padding-bottom: 10px">
+        <div ref={wrapperRef} style="position: relative; padding-top: 10px; padding-bottom: 10px">
             <CKEditor
                 className="attribute-list-editor"
                 tabIndex={200}
@@ -69,6 +93,13 @@ export default function AttributeEditor() {
                 onChange={() => {
                     console.log("Data changed!");
                 }}
+                onClick={(pos) => {
+                    if (pos && pos.textNode && pos.textNode.data) {
+                        setState("showAttributeDetail")
+                    } else {
+                        setState("showHelpTooltip");
+                    }
+                }}
                 disableNewlines disableSpellcheck
             />
         </div>