@qoretechnologies/reqraft 0.10.62-pr.142.g62c577f → 0.10.62

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

@@ -1,5 +1,5 @@
 import { StoryObj } from '@storybook/react-vite';
-import { expect, fn, within } from 'storybook/test';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 import { useState } from 'react';
 
 import { StoryMeta } from '../../../../types';
@@ -49,6 +49,183 @@ export const WithValue: Story = {
   },
 };
 
+export const WithChoiceValue: Story = {
+  args: {
+    value: 'C07ERBFS0P6',
+    allowed_values: [
+      {
+        display_name: 'general',
+        short_desc: 'Company-wide announcements',
+        value: { type: 'richtext', value: 'C07ERBFS0P6' },
+      },
+      { display_name: 'random', value: { type: 'richtext', value: 'C07RANDOM01' } },
+    ] as never,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the RichText field holding the value of one of its own choices — the Slack channel id C07ERBFS0P6 — drawn as one chip named "general"; the id itself is not shown, and stays the stored value.',
+      },
+    },
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('general')).toBeInTheDocument();
+    await expect(canvas.queryByText('C07ERBFS0P6')).not.toBeInTheDocument();
+  },
+};
+
+export const WithChoiceValueAsDocument: Story = {
+  args: {
+    ...WithChoiceValue.args,
+    value: [{ type: 'paragraph', children: [{ text: 'C07ERBFS0P6' }] }] as never,
+  },
+  parameters: {
+    // Interaction-only: the play assertions are the guard, and the end state
+    // is already pictured by `WithChoiceValue`.
+    qlip: { skip: true },
+    docs: {
+      description: {
+        story:
+          'Renders the RichText field holding a document that is nothing but the id of one of its choices — what an edit of the chip stores — drawn as the chip "general"; the id is not shown, and nothing is emitted for it, since the document already stands for the choice.',
+      },
+    },
+  },
+  async play({ args, canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('general')).toBeInTheDocument();
+    await expect(canvas.queryByText('C07ERBFS0P6')).not.toBeInTheDocument();
+    await new Promise((resolve) => setTimeout(resolve, 400));
+    await expect(args.onChange).not.toHaveBeenCalled();
+  },
+};
+
+export const RetypingTheChoiceReturnsItsChip: Story = {
+  args: WithChoiceValue.args,
+  parameters: {
+    // Interaction-only: the play assertions are the guard, and the end state
+    // is already pictured by `WithChoiceValue`.
+    qlip: { skip: true },
+    docs: {
+      description: {
+        story:
+          'Renders the RichText field holding a choice drawn as the chip "general". A click opens it into C07ERBFS0P6 as text; Backspace emits C07ERBFS0P, and a typed 6 emits C07ERBFS0P6 again, each as a document and still shown as text while the author types; leaving the field with Tab draws it as the chip "general" once more and emits nothing further, since that document already stands for the choice.',
+      },
+    },
+  },
+  async play({ args, canvasElement }) {
+    const canvas = within(canvasElement);
+    const editor = canvas.getByRole('textbox');
+
+    await userEvent.click(canvas.getByText('general'));
+    await waitFor(() => {
+      expect(editor.querySelector('.reqore-tag')).toBeNull();
+      expect(editor.contains(document.activeElement)).toBe(true);
+    });
+
+    // One key at a time, each emitted before the next: typed within the
+    // field's debounce, the two would settle as the value the field started
+    // with, and nothing would be emitted at all.
+    await userEvent.keyboard('{Backspace}');
+    await waitFor(() =>
+      expect(args.onChange).toHaveBeenLastCalledWith([
+        { type: 'paragraph', children: [{ text: 'C07ERBFS0P' }] },
+      ])
+    );
+    await userEvent.keyboard('6');
+    await waitFor(() =>
+      expect(args.onChange).toHaveBeenLastCalledWith([
+        { type: 'paragraph', children: [{ text: 'C07ERBFS0P6' }] },
+      ])
+    );
+    await expect(editor.querySelector('.reqore-tag')).toBeNull();
+
+    await userEvent.tab();
+    await waitFor(() => {
+      expect(editor.querySelector('.reqore-tag')?.textContent).toContain('general');
+      expect(editor.textContent).not.toContain('C07ERBFS0P6');
+    });
+    // Leaving the field changed nothing: the chip stands for what was emitted.
+    await expect(args.onChange).toHaveBeenLastCalledWith([
+      { type: 'paragraph', children: [{ text: 'C07ERBFS0P6' }] },
+    ]);
+  },
+};
+
+export const ClickOpensTheChoiceChip: Story = {
+  args: WithChoiceValue.args,
+  parameters: {
+    // Interaction-only: the play assertions are the guard, and the end state
+    // is already pictured by a plain editor holding text.
+    qlip: { skip: true },
+    docs: {
+      description: {
+        story:
+          'Renders the RichText field holding a choice drawn as the chip "general", with the default chip behaviour. A click on the chip opens it into its value as editable text: the editor shows C07ERBFS0P6 and no chip, the cursor at its end, so Backspace and a typed 7 make it C07ERBFS0P7, which is what the field emits.',
+      },
+    },
+  },
+  async play({ args, canvasElement }) {
+    const canvas = within(canvasElement);
+    const editor = canvas.getByRole('textbox');
+
+    await userEvent.click(canvas.getByText('general'));
+    await waitFor(() => {
+      expect(editor.querySelector('.reqore-tag')).toBeNull();
+      expect(editor.textContent).toBe('C07ERBFS0P6');
+      expect(editor.contains(document.activeElement)).toBe(true);
+    });
+
+    await userEvent.keyboard('{Backspace}7');
+    await waitFor(() => expect(editor.textContent).toBe('C07ERBFS0P7'));
+    await waitFor(() =>
+      expect(args.onChange).toHaveBeenLastCalledWith([
+        { type: 'paragraph', children: [{ text: 'C07ERBFS0P7' }] },
+      ])
+    );
+  },
+};
+
+export const BackspaceOpensTheChoiceChip: Story = {
+  args: {
+    ...WithChoiceValue.args,
+    choiceChip: { click: 'cursor' },
+  },
+  parameters: {
+    // Interaction-only: the play assertions are the guard, and the end state
+    // is already pictured by a plain editor holding text.
+    qlip: { skip: true },
+    docs: {
+      description: {
+        story:
+          'Renders the RichText field holding a choice drawn as the chip "general", configured so that a click on the chip only places the cursor after it. Backspace then opens the chip into its value as editable text: the editor shows C07ERBFS0P6 and no chip, the cursor at its end, so one more Backspace and a typed 7 make it C07ERBFS0P7, which is what the field emits.',
+      },
+    },
+  },
+  async play({ args, canvasElement }) {
+    const canvas = within(canvasElement);
+    const editor = canvas.getByRole('textbox');
+
+    await userEvent.click(canvas.getByText('general'));
+    await waitFor(() => expect(editor.contains(document.activeElement)).toBe(true));
+
+    await userEvent.keyboard('{Backspace}');
+    await waitFor(() => {
+      expect(editor.querySelector('.reqore-tag')).toBeNull();
+      expect(editor.textContent).toBe('C07ERBFS0P6');
+    });
+
+    await userEvent.keyboard('{Backspace}7');
+    await waitFor(() => expect(editor.textContent).toBe('C07ERBFS0P7'));
+    await waitFor(() =>
+      expect(args.onChange).toHaveBeenLastCalledWith([
+        { type: 'paragraph', children: [{ text: 'C07ERBFS0P7' }] },
+      ])
+    );
+  },
+};
+
 export const Empty: Story = {
   parameters: {
     docs: {

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

@@ -1,14 +1,29 @@
 import {
   IReqoreRichTextEditorProps,
   ReqoreRichTextEditor,
+  TReqoreRichTextEditorRef,
 } 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 { IQorusAllowedValue } from '@qoretechnologies/ts-toolkit';
 import { isEqual, size } from 'lodash';
-import { KeyboardEvent, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FocusEvent, KeyboardEvent, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDebounce } from 'react-use';
+import { Path } from 'slate';
+import { ReactEditor } from 'slate-react';
 import { useEmittedValues } from '../emittedValues';
+import {
+  choiceChipAtCursor,
+  choiceForValue,
+  choiceToNodes,
+  choiceValue,
+  choiceValueOfNodes,
+  DEFAULT_CHOICE_CHIP_BEHAVIOR,
+  IChoiceChipBehavior,
+  pathOfNode,
+  unwrapChoiceChip,
+} from '../../../../helpers/choiceChip';
 import { flattenToSingleLine, hasLineBreak } from '../../../../helpers/singleLineString';
 import {
   renderTemplateItemDescriptions,
@@ -57,6 +72,25 @@ export interface IRichTextFormFieldProps extends Omit<
   valueFormat?: 'richtext' | 'text';
   /** With `valueFormat: 'text'`: the value holds one line, so Enter adds none. */
   singleLine?: boolean;
+  /**
+   * The choices the field offers, when it offers any. A value that IS one of
+   * them — the whole string, as picked from the field's suggestions, or a
+   * document of nothing but that string, as an edit of it stores — is drawn as
+   * one chip named from the choice (`general` rather than `C07ERBFS0P6`), and
+   * is still emitted as that value: the chip's own value is the choice's, and a
+   * document that is nothing but the chip reads back as it. A field spreads
+   * its schema here, so this is the schema's own key.
+   */
+  allowed_values?: IQorusAllowedValue[];
+  /**
+   * What a choice chip does when the author acts on it — Backspace right after
+   * it, a click on it. By default each opens the chip into its value as plain
+   * text, the cursor at the end, so one letter of what was chosen can be
+   * changed; see `IChoiceChipBehavior` for the alternatives. Text that is again
+   * exactly one of the choices becomes its chip when the author leaves the
+   * field — not while typing, where a choice can be the start of a longer value.
+   */
+  choiceChip?: IChoiceChipBehavior;
   /**
    * With `valueFormat: 'text'`: the token grammar the value's references are
    * WRITTEN in, when the host speaks one of its own.
@@ -111,18 +145,6 @@ export const getChipTooltipDescriptions = (
   return out;
 };
 
-/* The chip references a document holds, in order, as one comparable string. Two documents that stand for
-   the same text but chip different references differ here; two that chip the same references do not — so a
-   re-parse that recognises nothing new is not taken for a change (which would move the cursor). */
-const chipValuesOf = (nodes?: ReadonlyArray<{ children?: ReadonlyArray<Record<string, any>> }>): string =>
-  JSON.stringify(
-    (nodes ?? []).flatMap((paragraph) =>
-      (paragraph?.children ?? [])
-        .filter((node) => node?.type === 'tag')
-        .map((node) => String(node?.value ?? ''))
-    )
-  );
-
 export const RichTextFormField = memo(({
   value,
   onChange,
@@ -131,12 +153,39 @@ export const RichTextFormField = memo(({
   valueFormat = 'richtext',
   singleLine,
   templateToken,
+  allowed_values,
+  choiceChip,
   ...rest
 }: IRichTextFormFieldProps) => {
   const isText = valueFormat === 'text';
-  const [localValue, setLocalValue] = useState<any>(() =>
-    isText ? templateTextToNodes(String(value ?? ''), templates, templateToken) : value
-  );
+  /* The Slate editor behind Reqore's, for the two chip actions below: both
+     rewrite the document in place, which the editor's props cannot. */
+  const editorRef = useRef<TReqoreRichTextEditorRef>(null);
+  const chipBehavior = { ...DEFAULT_CHOICE_CHIP_BEHAVIOR, ...choiceChip };
+  /* The document the editor shows for a value: a choice by its chip, a text
+     with its references as chips, a document as it is. */
+  const toLocal = (next: unknown): any => {
+    if (isText) {
+      const text = String(next ?? '');
+      const choice = choiceForValue(text, allowed_values);
+      return choice ? choiceToNodes(choice) : templateTextToNodes(text, templates, templateToken);
+    }
+    const choice = choiceForValue(next, allowed_values);
+    return choice ? choiceToNodes(choice) : next;
+  };
+  const [localValue, setLocalValue] = useState<any>(() => toLocal(value));
+  /* What a value stands for: the choice's value when the value is that choice
+     by any spelling — the plain string, the chip, a document of just the text —
+     else the value itself. Values are compared by this, so opening a chip, or
+     typing its id back, is not a change to the value. */
+  const standsFor = (next: unknown): unknown => {
+    const chip = choiceValueOfNodes(next);
+    if (chip !== undefined) {
+      return chip;
+    }
+    const choice = choiceForValue(next, allowed_values);
+    return choice ? choiceValue(choice) : next;
+  };
   /* In text mode, the string the editor's document stands for. The value that
      comes back from the parent is usually that same string, and rebuilding the
      document from it would hand the editor a new tree on every keystroke —
@@ -155,31 +204,34 @@ export const RichTextFormField = memo(({
       const text = String(value ?? '');
       if (text !== lastTextRef.current) {
         lastTextRef.current = text;
-        setLocalValue(templateTextToNodes(text, templates, templateToken));
+        setLocalValue(toLocal(text));
       }
       return;
     }
-    if (JSON.stringify(value) !== JSON.stringify(localValue)) {
-      setLocalValue(value);
+    // Compared as what each stands for: a lone choice chip IS the value it
+    // draws, so the value coming back is not a change to it.
+    if (!isEqual(standsFor(value), standsFor(localValue))) {
+      setLocalValue(toLocal(value));
     }
   }, [JSON.stringify(value)]);
 
-  /* A reference in a string is drawn as a chip only once something can name it: the field's own grammar
-     (`templateToken`), or — for a reference neither grammar matches, a DPQL `@create` say — the catalogue
-     that NAMES it. Both can arrive AFTER the first render: the catalogue is fetched, and the effect above
-     rebuilds the document only when the stored string changes. So a preset reference the catalogue had not
-     yet named stayed raw text until the author re-picked it (qorus#646). Re-chip the string in hand when
-     what recognises its references changes — text mode only, and only when a chip is actually gained or
-     lost, so a document being edited is left exactly as it is while nothing new is recognised. */
+  /* The choices usually arrive after the value — they are fetched — so a
+     value already shown as text becomes its chip once they do. Only while the
+     editor still shows the stored value as it is: an edit in progress is
+     never redrawn from under the author. */
+  const choiceKey = JSON.stringify(
+    allowed_values?.map((choice) => [choice.value, choice.display_name]) ?? null
+  );
   useEffect(() => {
-    if (!isText) {
+    if (!allowed_values?.length) {
       return;
     }
-    const rebuilt = templateTextToNodes(lastTextRef.current, templates, templateToken);
-    setLocalValue((current: any) =>
-      chipValuesOf(current) === chipValuesOf(rebuilt) ? current : rebuilt
-    );
-  }, [JSON.stringify(templates), String(templateToken)]);
+    const shown = isText ? templateNodesToText(localValue) : (choiceValueOfNodes(localValue) ?? localValue);
+    const stored = isText ? String(value ?? '') : value;
+    if (isEqual(shown, stored) && choiceForValue(stored, allowed_values)) {
+      setLocalValue(toLocal(stored));
+    }
+  }, [choiceKey]);
 
   useDebounce(
     () => {
@@ -190,9 +242,12 @@ export const RichTextFormField = memo(({
         }
         return;
       }
-      if (!isEqual(localValue, value)) {
-        emitted.record(localValue);
-        onChange?.(localValue);
+      // A document that is nothing but one choice chip is emitted as the
+      // choice's value — what was stored and what the server resolves.
+      const next = choiceValueOfNodes(localValue) ?? localValue;
+      if (!isEqual(standsFor(next), standsFor(value))) {
+        emitted.record(next);
+        onChange?.(next);
       }
     },
     100,
@@ -211,7 +266,7 @@ export const RichTextFormField = memo(({
       // stopped below. Flattened text is shown as the one line it now is.
       if (singleLine && hasLineBreak(text)) {
         lastTextRef.current = flattenToSingleLine(text);
-        setLocalValue(templateTextToNodes(lastTextRef.current, templates, templateToken));
+        setLocalValue(toLocal(lastTextRef.current));
         return;
       }
       lastTextRef.current = text;
@@ -233,6 +288,43 @@ export const RichTextFormField = memo(({
     JSON.stringify(templates),
   ]);
 
+  /* Opens a choice chip into its value as text and puts the cursor there.
+     A click on the chip — a non-editable node — need not have given the
+     editor focus, so focus is asked of Slate, which places the DOM caret where
+     the selection is and focuses after; but only once the text the chip became
+     is rendered (the effect below), since Slate resolves the caret through the
+     rendered DOM. Asked any earlier it lost: a DOM `focus()` before the
+     transform let the browser put the caret at the editor's start and the
+     `selectionchange` it raised beat the render, so the next key typed landed
+     there; asked on the next frame, the frame came before React's commit
+     often enough. An editor that already has focus (Backspace came from it)
+     is returned at once, and its own render puts the caret where the
+     selection is. */
+  const focusOnceRendered = useRef(false);
+  const openChoiceChip = useCallback((path: Path | undefined): void => {
+    const editor = editorRef.current;
+
+    if (editor && path && unwrapChoiceChip(editor, path)) {
+      focusOnceRendered.current = true;
+    }
+  }, []);
+
+  useEffect(() => {
+    const editor = editorRef.current;
+
+    if (!focusOnceRendered.current || !editor) {
+      return;
+    }
+    focusOnceRendered.current = false;
+
+    try {
+      ReactEditor.toDOMNode(editor, editor);
+      ReactEditor.focus(editor);
+    } catch {
+      // Not mounted in a document — nothing to focus.
+    }
+  }, [localValue]);
+
   const handleGetTagProps = useCallback(
     (tag: any): IReqoreTagProps => {
       const tagValue = tag.value?.toString();
@@ -241,6 +333,21 @@ export const RichTextFormField = memo(({
         return {};
       }
 
+      /* One of the field's own choices, drawn by the name it was picked by;
+         what it stands for on hover. */
+      if (tag.metadata?.allowedValue) {
+        return {
+          icon: 'ListCheck',
+          label: tag.label ?? tagValue,
+          tooltip: tag.metadata?.description,
+          /* The editor hands the document's own node here, so the chip is
+             found by identity; a chip already gone is a click on nothing. */
+          ...(chipBehavior.click === 'unwrap' ?
+            { onClick: () => openChoiceChip(editorRef.current ? pathOfNode(editorRef.current, tag) : undefined) }
+          : {}),
+        };
+      }
+
       /* A reference in a string is drawn exactly as the collapsed row draws the
          same value (`ReadOnlyTemplateTag`): named from the catalogue, its
          description on hover. Read at render, so a catalogue that arrives
@@ -253,10 +360,6 @@ export const RichTextFormField = memo(({
           leftIconProps: { image: metadata?.image },
           label: templateChipLabel(templates, tagValue),
           tooltip: templateTooltip(templates, tagValue),
-          // The same chip the read summary (`TemplateText`) and the read-only tag draw: a `tiny` box whose
-          // label takes the font of the text it sits in, so a reference is the same size in every view.
-          size: 'tiny',
-          style: { fontSize: 'inherit' },
           ...getTemplateTagStyle(metadata),
         };
       }
@@ -296,16 +399,29 @@ export const RichTextFormField = memo(({
                 }
               : descriptionByValue[tagValue]
             : undefined,
-          // The same chip the read summary and the read-only tag draw — see the `isText` branch above.
-          size: 'tiny',
-          style: { fontSize: 'inherit' },
           ...getTemplateTagStyle(tag.metadata),
         };
       }
 
       return {};
     },
-    [descriptionByValue, renderMarkdown, isText, templates]
+    [descriptionByValue, renderMarkdown, isText, templates, chipBehavior.click, openChoiceChip]
+  );
+
+  /* Leaving the field: text that is exactly one of the choices becomes its
+     chip again, as the picker would have drawn it. Only here, never while
+     typing — a choice can be the start of a longer value, and a chip drawn
+     under the cursor would swallow it. */
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLTextAreaElement>): void => {
+      const shown = isText ? lastTextRef.current : localValue;
+
+      if (choiceForValue(shown, allowed_values)) {
+        setLocalValue(toLocal(shown));
+      }
+      (rest as { onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void }).onBlur?.(event);
+    },
+    [isText, localValue, choiceKey, (rest as { onBlur?: unknown }).onBlur]
   );
 
   const handleKeyDown = useCallback(
@@ -313,9 +429,26 @@ export const RichTextFormField = memo(({
       if (isText && singleLine && event.key === 'Enter') {
         event.preventDefault();
       }
+      /* Backspace right after a choice chip opens it rather than deleting it,
+         when so configured. Stopped here, at keydown, so the browser raises no
+         `beforeinput` for the editor to delete the chip by. */
+      if (event.key === 'Backspace' && chipBehavior.backspace === 'unwrap' && editorRef.current) {
+        const path = choiceChipAtCursor(editorRef.current);
+
+        if (path) {
+          event.preventDefault();
+          openChoiceChip(path);
+        }
+      }
       (rest as { onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void }).onKeyDown?.(event);
     },
-    [isText, singleLine, (rest as { onKeyDown?: unknown }).onKeyDown]
+    [
+      isText,
+      singleLine,
+      chipBehavior.backspace,
+      openChoiceChip,
+      (rest as { onKeyDown?: unknown }).onKeyDown,
+    ]
   );
 
   const tags = useMemo<IReqoreRichTextEditorProps['tags']>((): IReqoreRichTextEditorProps['tags'] => {
@@ -366,6 +499,7 @@ export const RichTextFormField = memo(({
 
   return (
     <ReqoreRichTextEditor
+      ref={editorRef}
       value={formattedValue}
       onChange={handleChange}
       /* `rest` is spread BEFORE everything this component computes. It used to
@@ -391,6 +525,7 @@ export const RichTextFormField = memo(({
       panelProps={{ fluid: true, style: { minWidth: '150px', ...rest.panelProps?.style } }}
       readOnly={readOnly}
       onKeyDown={handleKeyDown}
+      onBlur={handleBlur}
       /* A form field carries no document toolbar. Styling was already off, so
          the bar held only undo and redo — drawn by Reqore as a panel as wide as
          the tag list, which under a field reads as an empty 600px menu with two

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

@@ -1,5 +1,6 @@
 import { ReqoreTag, ReqoreTagGroup } from '@qoretechnologies/reqore';
 import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
+import { TSizes } from '@qoretechnologies/reqore/dist/constants/sizes';
 import { memo } from 'react';
 import {
   getTemplateTagStyle,
@@ -13,6 +14,7 @@ export interface IReadOnlyTemplateTagProps {
   value: string;
   /** Template catalogue, for resolving the display name + image + metadata. */
   templates?: IReqoreFormTemplates;
+  size?: TSizes;
 }
 
 /**
@@ -25,19 +27,16 @@ export interface IReadOnlyTemplateTagProps {
  * it's shown non-editably.
  */
 export const ReadOnlyTemplateTag = memo(
-  ({ value, templates }: IReadOnlyTemplateTagProps) => {
+  ({ value, templates, size }: IReadOnlyTemplateTagProps) => {
     const { label, item } = describeTemplateReference(templates, value);
     const metadata = item?.metadata as TTemplateMeta | undefined;
     return (
-      // The same chip the read summary (`TemplateText`) and the expression editor draw: a `tiny` box whose
-      // label takes the font of the text it sits in, so a reference is the same size in every view.
-      <ReqoreTagGroup size='tiny'>
+      <ReqoreTagGroup size={size}>
         <ReqoreTag
           icon='ExchangeDollarLine'
           leftIconProps={{ image: metadata?.image }}
           label={label}
           tooltip={templateTooltip(templates, value)}
-          style={{ fontSize: 'inherit' }}
           {...getTemplateTagStyle(metadata)}
         />
       </ReqoreTagGroup>

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

@@ -1595,7 +1595,7 @@ const TemplateFieldImpl = memo(
         // here; reqraft upgrades the read-only template to a proper picker chip —
         // the $-dollar icon + resolved display name + app image, coloured by the
         // IDE's intent scheme. Shared with the compact read-first row.
-        return <ReadOnlyTemplateTag value={templateValue} templates={templates} />;
+        return <ReadOnlyTemplateTag value={templateValue} templates={templates} size={rest.size} />;
       }
 
       return (