@qoretechnologies/reqraft 0.10.53 → 0.10.54-pr.115.ge2d364c

package/src/components/form/fields/rich-text/RichText.tsx

@@ -4,10 +4,16 @@ import {
 } from '@qoretechnologies/reqore/dist/components/RichTextEditor';
 import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
 import { IReqoreTagProps } from '@qoretechnologies/reqore/dist/components/Tag';
+import { IReqoreTooltip } from '@qoretechnologies/reqore/dist/types/global';
 import { isEqual, size } from 'lodash';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useDebounce } from 'react-use';
+import {
+  renderTemplateItemDescriptions,
+  templateItemsToShow,
+} from '../../../../helpers/templateItems';
 import { getTemplateTagStyle } from '../../../../helpers/templates';
+import { useMarkdownRenderer } from '../../../Description/markdownRendererContext';
 
 export interface IRichTextFormFieldProps extends Omit<
   IReqoreRichTextEditorProps,
@@ -19,6 +25,46 @@ export interface IRichTextFormFieldProps extends Omit<
   templates?: IReqoreFormTemplates;
 }
 
+/**
+ * What each offered template value is FOR, keyed by the value itself.
+ *
+ * Built from the templates a field was already given rather than from the
+ * chip's metadata, which carries only `image` / `displayName` / style flags —
+ * putting a description there would mean threading one through every producer
+ * of a template list.
+ *
+ * Exported so the mapping is assertable without rendering a Slate editor.
+ */
+export const getChipTooltipDescriptions = (
+  templates?: IReqoreFormTemplates
+): Record<string, string> => {
+  const out: Record<string, string> = {};
+
+  /* BOTH shapes, because this list arrives in either one. A picker's items are
+     normally grouped by category, but a LONE category is opened onto its values
+     where the templates are resolved (`templateItemsToShow`), so a field with
+     one category hands down a FLAT list of leaves. Walking only groups made
+     that the common case and silently lost every tooltip on it — one category
+     is the ordinary shape for a field, not the exception.
+
+     Recursive rather than two-level: a leaf is recognised by carrying a value
+     rather than by its depth, so a deeper catalogue works too. */
+  const collect = (items: any[] | undefined): void => {
+    items?.forEach((item: any) => {
+      const value = typeof item?.value === 'object' ? item?.value?.value : item?.value;
+      const description = item?.description ?? item?.short_desc;
+      if (typeof value === 'string' && typeof description === 'string' && description) {
+        out[value] = description;
+      }
+      collect(item?.items);
+    });
+  };
+
+  collect((templates as any)?.items);
+
+  return out;
+};
+
 export const RichTextFormField = memo(({
   value,
   onChange,
@@ -57,26 +103,65 @@ export const RichTextFormField = memo(({
     setLocalValue(val);
   };
 
-  const handleGetTagProps = useCallback((tag: any): IReqoreTagProps => {
-    const tagValue = tag.value?.toString();
+  // One renderer for both surfaces below — the chip's hover and the picker rows
+  // show the same strings, so they must be drawn the same way.
+  const renderMarkdown = useMarkdownRenderer();
 
-    if (!tagValue) {
-      return {};
-    }
+  const descriptionByValue = useMemo(() => getChipTooltipDescriptions(templates), [
+    JSON.stringify(templates),
+  ]);
 
-    if (tagValue.startsWith('$')) {
-      return {
-        icon: 'ExchangeDollarLine',
-        leftIconProps: {
-          image: tag.metadata?.image,
-        },
-        labelKey: tag.metadata?.displayName,
-        ...getTemplateTagStyle(tag.metadata),
-      };
-    }
+  const handleGetTagProps = useCallback(
+    (tag: any): IReqoreTagProps => {
+      const tagValue = tag.value?.toString();
+
+      if (!tagValue) {
+        return {};
+      }
 
-    return {};
-  }, []);
+      if (tagValue.startsWith('$')) {
+        return {
+          icon: 'ExchangeDollarLine',
+          leftIconProps: {
+            image: tag.metadata?.image,
+          },
+          labelKey: tag.metadata?.displayName,
+          /* Hovering a chip says what the value IS, not how it is spelled.
+             Reqore otherwise falls back to the tag's own value, so a chip
+             reading "result" reported `$.result` on hover — the reference the
+             author already chose, restating the label in engine syntax instead
+             of telling them anything. The path stays discoverable in the
+             field's help and in the picker row for an unlabelled value. */
+          /* Drawn, for the same reason the picker row is: this description is
+             the SAME string the row shows, so leaving it raw here would print
+             the punctuation the row no longer prints. A tooltip's `content`
+             takes a node, and without a host renderer it stays the plain
+             string it always was. */
+          /* Drawn, for the same reason the picker row is: this is the SAME
+             string the row shows, so leaving it raw here would print the
+             punctuation the row no longer prints. A drawn description travels
+             as the tooltip's `content` — the prop itself is `string |
+             IReqoreTooltip`, and only the object form takes a node. Without a
+             host renderer it stays the plain string it always was. */
+          tooltip:
+            descriptionByValue[tagValue] ?
+              renderMarkdown ?
+                {
+                  content: renderMarkdown({
+                    value: descriptionByValue[tagValue],
+                    compact: true,
+                  }) as IReqoreTooltip['content'],
+                }
+              : descriptionByValue[tagValue]
+            : undefined,
+          ...getTemplateTagStyle(tag.metadata),
+        };
+      }
+
+      return {};
+    },
+    [descriptionByValue, renderMarkdown]
+  );
 
   const tags = useMemo<IReqoreRichTextEditorProps['tags']>((): IReqoreRichTextEditorProps['tags'] => {
     const _tags: IReqoreRichTextEditorProps['tags'] = {};
@@ -87,12 +172,20 @@ export const RichTextFormField = memo(({
         label: 'Templates',
         flat: false,
         description: 'Universal values that can be used in multiple places',
-        items: templates?.items,
+        /* The in-editor list already nests everything under "Templates", so a
+           lone category makes the author drill through TWO headers to reach
+           the only values on offer. Hoist it. */
+        /* Drawn here, at the hand-off to Reqore. A description is prose written
+           in the same markdown as every other description this package shows,
+           and printing its punctuation at the reader was the last surface still
+           doing that. Never made further up: the list is a `JSON.stringify`
+           memo key in `TemplateField`. */
+        items: renderTemplateItemDescriptions(templateItemsToShow(templates?.items), renderMarkdown),
       };
     }
 
     return _tags;
-  }, [allowTemplates, templates]);
+  }, [allowTemplates, templates, renderMarkdown]);
 
   const formattedValue: IReqoreRichTextEditorProps['value'] =
     typeof localValue !== 'object' ? [{ type: 'paragraph', children: [{ text: String(localValue ?? '') }] }]

package/src/components/form/fields/template/ReadOnlyTemplateTag.tsx

@@ -5,6 +5,7 @@ import { memo } from 'react';
 import {
   getTemplateTagStyle,
   describeTemplateReference,
+  templateTooltip,
   TTemplateMeta,
 } from '../../../../helpers/templates';
 
@@ -18,7 +19,8 @@ export interface IReadOnlyTemplateTagProps {
 
 /**
  * The read-only representation of a selected template — a picker-shaped chip:
- * the `$`-dollar icon, the resolved display name (raw value in the tooltip), the
+ * the `$`-dollar icon, the resolved display name (and what the value IS in the
+ * tooltip, not the reference that names it), the
  * app image when present, coloured by qorus-ide's scheme (info / qorus purple /
  * success — see `getTemplateTagStyle`). Shared by `TemplateField`'s disabled
  * branch and the compact read-first row so a template reads identically wherever
@@ -34,7 +36,7 @@ export const ReadOnlyTemplateTag = memo(
           icon='ExchangeDollarLine'
           leftIconProps={{ image: metadata?.image }}
           label={label}
-          tooltip={value}
+          tooltip={templateTooltip(templates, value)}
           {...getTemplateTagStyle(metadata)}
         />
       </ReqoreTagGroup>