@qoretechnologies/reqraft 0.10.65 → 0.10.66-pr.137.ga1983bf

package/dist/components/form/fields/rich-text/RichText.js

@@ -10,6 +10,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,6 +57,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextFormField = exports.getChipTooltipDescriptions = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
@@ -28,14 +73,45 @@ var RichTextEditor_1 = require("@qoretechnologies/reqore/dist/components/RichTex
 var lodash_1 = require("lodash");
 var react_1 = require("react");
 var react_use_1 = require("react-use");
+var slate_1 = require("slate");
 var slate_react_1 = require("slate-react");
 var emittedValues_1 = require("../emittedValues");
+var pendingEdit_1 = require("../pendingEdit");
+var descriptionTooltip_1 = require("../../../../helpers/descriptionTooltip");
+var typeSentenceForm_1 = require("../../typeSentenceForm");
 var choiceChip_1 = require("../../../../helpers/choiceChip");
 var singleLineString_1 = require("../../../../helpers/singleLineString");
-var templateItems_1 = require("../../../../helpers/templateItems");
 var templateText_1 = require("../../../../helpers/templateText");
 var templates_1 = require("../../../../helpers/templates");
-var markdownRendererContext_1 = require("../../../Description/markdownRendererContext");
+var useTemplateTags_1 = require("./useTemplateTags");
+var CompletionMenu_1 = require("../../../smartEditor/CompletionMenu");
+var helpers_1 = require("../../../smartEditor/helpers");
+var noDescription_1 = require("../../../../helpers/noDescription");
+var referenceNames_1 = require("../template/referenceNames");
+var templateCompletions_1 = require("../../../smartEditor/templateCompletions");
+var templateTree_1 = require("../../../../helpers/templateTree");
+var templateCatalogue_1 = require("../../../../helpers/templateCatalogue");
+var templateCatalogueContext_1 = require("../../../../helpers/templateCatalogueContext");
+var typedReferences_1 = require("../../../smartEditor/typedReferences");
+var useCoarsePointer_1 = require("../../../../hooks/useCoarsePointer");
+var useLspAutocomplete_1 = require("../../../smartEditor/useLspAutocomplete");
+var useTabCameIn_1 = require("../../../smartEditor/useTabCameIn");
+/** What opens the field's template list as it is typed: a template begins with `$`. */
+/* A `$` asks for templates; a `:` or `.` in a reference being written goes on to what is in its context, state or
+   record (qorus#646): asked anywhere else, nothing is offered (`offerTemplates`). */
+var TEMPLATE_TRIGGERS = new Set(['$', ':', '.']);
+/* What the list says where a context is written that nothing is listed in. One function for the editor's life:
+   the completion request is remade when it changes, and a remade request drops the one waiting to be sent. */
+var unlistedContextMessageAt = function (plainText, offset) {
+    return (0, templateCompletions_1.unlistedContextMessage)(plainText.slice(0, offset));
+};
+/**
+ * A reference being typed at the end of a text: a `$` and the template after it (`$data:receive_order.`), or an
+ * `@` and the record field after it (`@po`) - an `@` that starts a word, not one in an email address.
+ */
+var REFERENCE_BEING_TYPED = /(?:^|[^\p{L}\p{N}_.])([$@][\p{L}\p{M}\p{N}_.:{}[\]*-]*)$/u;
+/** Distinguishes the completion lists of the fields on a page, for each field's `aria-controls`. */
+var textCompletionMenuCounter = 0;
 /**
  * What each offered template value is FOR, keyed by the value itself.
  *
@@ -72,24 +148,55 @@ var getChipTooltipDescriptions = function (templates) {
     return out;
 };
 exports.getChipTooltipDescriptions = getChipTooltipDescriptions;
+/* 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). */
+var chipValuesOf = function (nodes) {
+    return JSON.stringify((nodes !== null && nodes !== void 0 ? nodes : []).flatMap(function (paragraph) {
+        var _a;
+        return ((_a = paragraph === null || paragraph === void 0 ? void 0 : paragraph.children) !== null && _a !== void 0 ? _a : [])
+            .filter(function (node) { return (node === null || node === void 0 ? void 0 : node.type) === 'tag'; })
+            .map(function (node) { var _a; return String((_a = node === null || node === void 0 ? void 0 : node.value) !== null && _a !== void 0 ? _a : ''); });
+    }));
+};
 exports.RichTextFormField = (0, react_1.memo)(function (_a) {
     var _b, _c;
-    var value = _a.value, onChange = _a.onChange, allowTemplates = _a.allowTemplates, templates = _a.templates, _d = _a.valueFormat, valueFormat = _d === void 0 ? 'richtext' : _d, singleLine = _a.singleLine, templateToken = _a.templateToken, allowed_values = _a.allowed_values, choiceChip = _a.choiceChip, rest = __rest(_a, ["value", "onChange", "allowTemplates", "templates", "valueFormat", "singleLine", "templateToken", "allowed_values", "choiceChip"]);
+    var value = _a.value, onChange = _a.onChange, allowTemplates = _a.allowTemplates, templates = _a.templates, ownCatalogue = _a.templateCatalogue, namingTemplates = _a.namingTemplates, _d = _a.valueFormat, valueFormat = _d === void 0 ? 'richtext' : _d, singleLine = _a.singleLine, templateToken = _a.templateToken, allowed_values = _a.allowed_values, choiceChip = _a.choiceChip, wholeRecords = _a.wholeRecords, rest = __rest(_a, ["value", "onChange", "allowTemplates", "templates", "templateCatalogue", "namingTemplates", "valueFormat", "singleLine", "templateToken", "allowed_values", "choiceChip", "wholeRecords"]);
     var isText = valueFormat === 'text';
-    /* The Slate editor behind Reqore's, for the two chip actions below: both
-       rewrite the document in place, which the editor's props cannot. */
+    /** What chips are named from: the whole catalogue, not only what is offered (see the prop). */
+    var naming = namingTemplates !== null && namingTemplates !== void 0 ? namingTemplates : templates;
+    // the catalogue, as what follows it is keyed on: written out once a render - it is the whole catalogue
+    var namingKey = JSON.stringify(naming);
+    /* The Slate editor behind Reqore's: the two choice-chip actions below rewrite the document in place,
+       which the editor's props cannot, and the completion list reads and edits the text through it. */
     var editorRef = (0, react_1.useRef)(null);
     var chipBehavior = __assign(__assign({}, choiceChip_1.DEFAULT_CHOICE_CHIP_BEHAVIOR), choiceChip);
+    /* The document a rich-text value stands for. Rich text the server holds is its string type, so a value
+       arrives as a string as often as a document - a saved `$local:name`, or text - and a string handed to
+       the editor as its document was drawn as raw text, each reference spelled out rather than its chip. It
+       is read as text with references, as the `text` format reads it; until it is edited, nothing is sent
+       back, so a string held stays a string. (A field mounted through an untyped first render was handed
+       the string in the `text` format, and kept the chips it drew then, by accident: that first render is
+       gone - see `resolveAutoFieldTypes`.) */
+    var documentOf = function (held) {
+        return typeof held === 'string' ? (0, templateText_1.templateTextToNodes)(held, naming, templateToken) : held;
+    };
+    /** The same document: a chip read from a string carries `metadata: undefined`, which the editor's own
+     *  copy of it may leave out. */
+    var sameDocument = function (a, b) {
+        return (0, lodash_1.isEqual)(a, b) || JSON.stringify(a) === JSON.stringify(b);
+    };
     /* 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. */
+       with its references as chips (a string held in rich text read the same way,
+       see `documentOf`), a document as it is. */
     var toLocal = function (next) {
         if (isText) {
             var text = String(next !== null && next !== void 0 ? next : '');
             var choice_1 = (0, choiceChip_1.choiceForValue)(text, allowed_values);
-            return choice_1 ? (0, choiceChip_1.choiceToNodes)(choice_1) : (0, templateText_1.templateTextToNodes)(text, templates, templateToken);
+            return choice_1 ? (0, choiceChip_1.choiceToNodes)(choice_1) : (0, templateText_1.templateTextToNodes)(text, naming, templateToken);
         }
         var choice = (0, choiceChip_1.choiceForValue)(next, allowed_values);
-        return choice ? (0, choiceChip_1.choiceToNodes)(choice) : next;
+        return choice ? (0, choiceChip_1.choiceToNodes)(choice) : documentOf(next);
     };
     var _e = (0, react_1.useState)(function () { return toLocal(value); }), localValue = _e[0], setLocalValue = _e[1];
     /* What a value stands for: the choice's value when the value is that choice
@@ -113,10 +220,19 @@ exports.RichTextFormField = (0, react_1.memo)(function (_a) {
        while the next keys are typed, and rebuilding the document from it threw
        them away. See `EmittedValues`. */
     var emitted = (0, emittedValues_1.useEmittedValues)(lodash_1.isEqual);
+    var pendingEdit = (0, pendingEdit_1.usePendingEdit)(function (edit) {
+        emitted.record(edit);
+        onChange === null || onChange === void 0 ? void 0 : onChange(edit);
+    });
+    var setPending = function (next) {
+        return next ? pendingEdit.hold(next.edit) : pendingEdit.release();
+    };
     (0, react_1.useEffect)(function () {
         if (emitted.isEcho(isText ? String(value !== null && value !== void 0 ? value : '') : value)) {
             return;
         }
+        // the parent has a value of its own: what was typed before it is no edit to send any more
+        pendingEdit.release();
         if (isText) {
             var text = String(value !== null && value !== void 0 ? value : '');
             if (text !== lastTextRef.current) {
@@ -125,9 +241,9 @@ exports.RichTextFormField = (0, react_1.memo)(function (_a) {
             }
             return;
         }
-        // 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 (!(0, lodash_1.isEqual)(standsFor(value), standsFor(localValue))) {
+        // Compared as what each stands for: a lone choice chip IS the value it draws, and the document a string
+        // held stands for is that string - so the value coming back is not a change to either.
+        if (!(0, lodash_1.isEqual)(standsFor(value), standsFor(localValue)) && !sameDocument(documentOf(value), localValue)) {
             setLocalValue(toLocal(value));
         }
     }, [JSON.stringify(value)]);
@@ -143,23 +259,54 @@ exports.RichTextFormField = (0, react_1.memo)(function (_a) {
         }
         var shown = isText ? (0, templateText_1.templateNodesToText)(localValue) : ((_a = (0, choiceChip_1.choiceValueOfNodes)(localValue)) !== null && _a !== void 0 ? _a : localValue);
         var stored = isText ? String(value !== null && value !== void 0 ? value : '') : value;
-        if ((0, lodash_1.isEqual)(shown, stored) && (0, choiceChip_1.choiceForValue)(stored, allowed_values)) {
+        // as it is: the same value, or the document a string held in rich text stands for (`documentOf`)
+        var showsStored = (0, lodash_1.isEqual)(shown, stored) || (!isText && sameDocument(localValue, documentOf(stored)));
+        if (showsStored && (0, choiceChip_1.choiceForValue)(stored, allowed_values)) {
             setLocalValue(toLocal(stored));
         }
     }, [choiceKey]);
+    /* 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. A choice
+       chip is the choices' to draw (see above), so a document that is one is left alone. */
+    (0, react_1.useEffect)(function () {
+        if (!isText) {
+            return;
+        }
+        var rebuilt = (0, templateText_1.templateTextToNodes)(lastTextRef.current, naming, templateToken);
+        setLocalValue(function (current) {
+            return (0, choiceChip_1.choiceValueOfNodes)(current) !== undefined || chipValuesOf(current) === chipValuesOf(rebuilt) ?
+                current
+                : rebuilt;
+        });
+    }, [namingKey, String(templateToken)]);
+    /** What the host will hold once the emits in flight come back: what an edit is a change from. */
+    var settled = function () { return emitted.settled(isText ? String(value !== null && value !== void 0 ? value : '') : value); };
+    /** A rich-text document as it is sent: one that is nothing but a choice chip, as the choice's value. */
+    var emittedFormOf = function (document) { var _a; return ((_a = (0, choiceChip_1.choiceValueOfNodes)(document)) !== null && _a !== void 0 ? _a : document); };
+    /** Whether a rich-text document is what the host will hold already: the same choice, or the document the
+     *  string it holds stands for. */
+    var isUnchanged = function (document) {
+        return (0, lodash_1.isEqual)(standsFor(emittedFormOf(document)), standsFor(settled())) ||
+            sameDocument(document, documentOf(settled()));
+    };
     (0, react_use_1.useDebounce)(function () {
-        var _a;
+        pendingEdit.release();
         if (isText) {
-            if (lastTextRef.current !== String(value !== null && value !== void 0 ? value : '')) {
+            if (lastTextRef.current !== emitted.settled(String(value !== null && value !== void 0 ? value : ''))) {
                 emitted.record(lastTextRef.current);
                 onChange === null || onChange === void 0 ? void 0 : onChange(lastTextRef.current);
             }
             return;
         }
-        // A document that is nothing but one choice chip is emitted as the
-        // choice's value — what was stored and what the server resolves.
-        var next = (_a = (0, choiceChip_1.choiceValueOfNodes)(localValue)) !== null && _a !== void 0 ? _a : localValue;
-        if (!(0, lodash_1.isEqual)(standsFor(next), standsFor(value))) {
+        // A document that is nothing but one choice chip is sent as the choice's value — what was stored and
+        // what the server resolves — and the document a string held stands for is that string, not an edit of it.
+        if (!isUnchanged(localValue)) {
+            var next = emittedFormOf(localValue);
             emitted.record(next);
             onChange === null || onChange === void 0 ? void 0 : onChange(next);
         }
@@ -170,6 +317,8 @@ exports.RichTextFormField = (0, react_1.memo)(function (_a) {
     // the typed value never reaches the form. react-use runs the latest
     // closure from a ref, so the fresh `onChange` is used either way.
     [localValue]);
+    /** The text as an edit to send, or nothing where it is what the host will hold. */
+    var changedFrom = function (text) { return (text === settled() ? undefined : { edit: text }); };
     var handleChange = function (val) {
         if (isText) {
             var text = (0, templateText_1.templateNodesToText)(val);
@@ -177,25 +326,37 @@ exports.RichTextFormField = (0, react_1.memo)(function (_a) {
             // stopped below. Flattened text is shown as the one line it now is.
             if (singleLine && (0, singleLineString_1.hasLineBreak)(text)) {
                 lastTextRef.current = (0, singleLineString_1.flattenToSingleLine)(text);
+                setPending(changedFrom(lastTextRef.current));
                 setLocalValue(toLocal(lastTextRef.current));
                 return;
             }
             lastTextRef.current = text;
+            setPending(changedFrom(text));
             setLocalValue(val);
             return;
         }
         if (JSON.stringify(val) === '[{"type":"paragraph","children":[{"text":""}]}]') {
+            // the empty text a held '' stands for is no edit of it (a click into the field reports it)
+            if (sameDocument(val, documentOf(settled()))) {
+                setPending(undefined);
+                setLocalValue(val);
+                return;
+            }
+            setPending((0, lodash_1.isEqual)(undefined, settled()) ? undefined : { edit: undefined });
             setLocalValue(undefined);
             return;
         }
+        setPending(isUnchanged(val) ? undefined : { edit: emittedFormOf(val) });
         setLocalValue(val);
     };
-    // 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.
-    var renderMarkdown = (0, markdownRendererContext_1.useMarkdownRenderer)();
-    var descriptionByValue = (0, react_1.useMemo)(function () { return (0, exports.getChipTooltipDescriptions)(templates); }, [
-        JSON.stringify(templates),
-    ]);
+    // A chip's hover draws its description as the picker rows draw the same
+    // string, and opens on a tap where there is no hover.
+    var descriptions = (0, descriptionTooltip_1.useDescriptionTooltips)();
+    // what the host knows of references its catalogue does not list (`referenceNames`)
+    var referenceNames = (0, referenceNames_1.useTemplateReferenceNames)();
+    // a template's hover says its type, in words
+    var getTypeSentenceForm = (0, typeSentenceForm_1.useTypeSentenceForm)();
+    var descriptionByValue = (0, react_1.useMemo)(function () { return (0, exports.getChipTooltipDescriptions)(naming); }, [namingKey]);
     /* 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
@@ -229,8 +390,148 @@ exports.RichTextFormField = (0, react_1.memo)(function (_a) {
             // Not mounted in a document — nothing to focus.
         }
     }, [localValue]);
+    // Read-only: ReqoreRichTextEditor makes the Slate surface non-editable (and
+    // disables tag click/remove) when `readOnly` is set. Honour the field-level
+    // flags — the IDE Options model passes `readonly`, the compact form passes
+    // `readOnly` + `disabled` — so a read-only form renders the formatted content
+    // rather than an editable box.
+    var readOnly = !!(rest.readOnly ||
+        rest.readonly ||
+        rest.disabled);
+    /* The field's templates, in one picker (qorus#646, David's decisions): browsed as they nest - a click, a tap or
+       Tab into the text opens it at the caret, a click on a chip opens it at the chip's group to replace it - and
+       reached by what is typed after a `$`, in the rows the same popover shows then (a group's row opens the picker
+       at its members). */
+    // the field's own catalogue, or that of the fields where it is (`TemplateCatalogueProvider`)
+    var hostCatalogue = (0, templateCatalogueContext_1.useTemplateCatalogue)();
+    var templateCatalogue = ownCatalogue !== null && ownCatalogue !== void 0 ? ownCatalogue : hostCatalogue;
+    // with the field's catalogue's contexts, where it has one: typed and picked alike
+    var templateRoots = (0, react_1.useMemo)(function () {
+        return allowTemplates !== false && !readOnly ?
+            (0, templateCatalogue_1.withTemplateCatalogue)((0, templateTree_1.templateTree)(templates, { wholeRecords: wholeRecords }), templateCatalogue, wholeRecords)
+            : [];
+    }, [allowTemplates, readOnly, templates, templateCatalogue, wholeRecords]);
+    // a lone group kept whole, for the picker to open only where nothing is added beside it (`openLoneGroup`)
+    var templateRootsKept = (0, react_1.useMemo)(function () {
+        return allowTemplates !== false && !readOnly ?
+            (0, templateCatalogue_1.withTemplateCatalogue)((0, templateTree_1.templateTree)(templates, { wholeRecords: wholeRecords, keepLoneGroup: true }), templateCatalogue, wholeRecords)
+            : [];
+    }, [allowTemplates, readOnly, templates, templateCatalogue, wholeRecords]);
+    var pickerRoots = (0, react_1.useMemo)(function () { return (0, templateTree_1.openLoneGroup)((0, templateTree_1.withTemplateContexts)(templateRootsKept, wholeRecords)); }, [templateRootsKept, wholeRecords]);
+    var completionMenuId = (0, react_1.useMemo)(function () { return "completion-menu-text-".concat(++textCompletionMenuCounter); }, []);
+    // a template's type named in its row by the catalogue the surrounding form has, never its code
+    var typeLabel = (0, typeSentenceForm_1.useTypeLabel)();
+    /* The text as the field reads it: its whole references chips (`templateTextToNodes`), for a reference typed out
+       to be drawn as its chip when the field is left, or Enter or Tab takes it - as a picked one is, and as the DPQL
+       editor draws one (qorus#646, David: `$static:order.id` stayed text). One that names nothing the field is given
+       stays text. */
+    var typedConverter = (0, react_1.useMemo)(function () { return (__assign(__assign({}, helpers_1.defaultSlateConverter), { toSlateNodes: function (text) { return (0, templateText_1.templateTextToNodes)(text, naming, templateToken); } })); }, [naming, templateToken]);
+    var namesNothing = (0, react_1.useCallback)(function (reference) { return (0, templateTree_1.referenceNamesNothing)(templateRoots, reference); }, [templateRoots]);
+    var offerTemplates = (0, react_1.useCallback)(function (plainText, offset, typedInText) { return __awaiter(void 0, void 0, void 0, function () {
+        var typed, rows;
+        var _a;
+        return __generator(this, function (_b) {
+            typed = (_a = REFERENCE_BEING_TYPED.exec(typedInText !== null && typedInText !== void 0 ? typedInText : plainText.slice(0, offset))) === null || _a === void 0 ? void 0 : _a[1];
+            if (!typed)
+                return [2 /*return*/, []];
+            rows = (0, templateCompletions_1.templateSearchItems)(templateRoots, typed, typeLabel, wholeRecords);
+            /* a context written that nothing is listed in: the list says what to write next above Browse all
+               templates, which puts a working reference in its place (`noteAt`; qorus#646, David's review) */
+            return [2 /*return*/, __spreadArray(__spreadArray([], rows, true), [(0, templateCompletions_1.browseAllTemplatesItem)()], false)];
+        });
+    }); }, [templateRoots, typeLabel, wholeRecords]);
+    var autocomplete = (0, useLspAutocomplete_1.useLspAutocomplete)({
+        getCompletions: offerTemplates,
+        isReady: !readOnly && templateRoots.length > 0,
+        triggerCharacters: TEMPLATE_TRIGGERS,
+        converter: helpers_1.defaultSlateConverter,
+        inserter: templateCompletions_1.templateChipInserter,
+        // a context written that nothing is listed in: what to write next, the list held open
+        emptyMessage: unlistedContextMessageAt,
+        noteAt: unlistedContextMessageAt,
+        // Enter or Tab where nothing more is listed: what is written at the caret, a whole reference, is its chip
+        commitTyped: function (editor) {
+            var _a;
+            return (0, typedReferences_1.commitTypedReferences)(editor, typedConverter, namesNothing, (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]);
+        },
+    });
+    var openBrowse = autocomplete.openBrowse, openAtCaret = autocomplete.openAtCaret;
+    var coarse = (0, useCoarsePointer_1.useCoarsePointer)();
+    var autocompleteRef = (0, react_1.useRef)(autocomplete);
+    autocompleteRef.current = autocomplete;
+    /* A click, a tap or Tab into the text opens the picker at the caret the page put there: not on a chip, which is
+       a control of its own, nor outside the text. */
+    var tabCameIn = (0, useTabCameIn_1.useTabCameIn)(function () {
+        var editor = editorRef.current;
+        return editor ? slate_react_1.ReactEditor.toDOMNode(editor, editor) : null;
+    });
+    var browseAtPageCaret = (0, react_1.useCallback)(function (target) {
+        var _a;
+        var editor = editorRef.current;
+        if (!templateRoots.length || readOnly || !editor)
+            return;
+        try {
+            var root = slate_react_1.ReactEditor.toDOMNode(editor, editor);
+            if (!(target instanceof Node) || !root.contains(target))
+                return;
+            if (target instanceof Element && target.closest('[data-slate-void="true"]'))
+                return;
+            var page = slate_react_1.ReactEditor.getWindow(editor).getSelection();
+            if (!page || page.rangeCount === 0 || !page.isCollapsed)
+                return;
+            var caret = slate_react_1.ReactEditor.toSlateRange(editor, page, { exactMatch: false, suppressThrow: true });
+            if (!caret)
+                return;
+            var box = page.getRangeAt(0).getBoundingClientRect();
+            // a caret in an empty line has no box of its own: the text's
+            var at = box.width || box.height ? box : root.getBoundingClientRect();
+            // in an empty text the arrows have nowhere else to go: they move through the picker
+            var empty = !helpers_1.defaultSlateConverter.fromSlateNodes(editor.children).trim();
+            /* A reference being written at the caret is completed where it is: what is listed of it, what to write
+               next and Browse all templates, to put a working one in its place - not the picker's top (qorus#646,
+               David's review: a click at the end of `$dynamic:` showed the picker's top silently). */
+            // what is typed in the text the caret is in: a chip before it is a value, not a reference being written
+            var leaf = slate_1.Editor.leaf(editor, caret.anchor)[0];
+            var textBefore = ((_a = leaf.text) !== null && _a !== void 0 ? _a : '').slice(0, caret.anchor.offset);
+            if (REFERENCE_BEING_TYPED.test(textBefore)) {
+                openAtCaret(editor, caret.anchor, { left: at.left, bottom: at.bottom });
+                return;
+            }
+            openBrowse(editor, { rect: { left: at.left, bottom: at.bottom }, caret: caret.anchor, arrows: empty });
+        }
+        catch (_b) {
+            // the editor is not drawn, or the page's caret is not in it: nothing opens
+        }
+    }, [templateRoots, readOnly, openBrowse, openAtCaret]);
+    /* A click on a template chip the catalogue lists opens the picker at the chip's group, its row the keyboard's,
+       and the pick takes its place; a second click puts it away. */
+    var templateChipClick = (0, react_1.useCallback)(function (tag) {
+        var listed = templateRoots.length && typeof tag.value === 'string' ? (0, templateTree_1.templateNodeFor)(templateRoots, tag.value) : undefined;
+        if (!listed)
+            return {};
+        return __assign(__assign({}, (coarse ? { tooltip: undefined } : {})), { onClick: function (event) {
+                var editor = editorRef.current;
+                var current = autocompleteRef.current;
+                if (!editor)
+                    return;
+                if (current.browse && current.isReplaceMode) {
+                    current.close();
+                    return;
+                }
+                var path = (0, choiceChip_1.pathOfNode)(editor, tag);
+                if (!path)
+                    return;
+                var rect = event.currentTarget.getBoundingClientRect();
+                current.openBrowse(editor, {
+                    rect: { left: rect.left, bottom: rect.bottom },
+                    replacementPath: path,
+                    levelId: listed.trailIds[listed.trailIds.length - 1],
+                    selectedValue: tag.value,
+                });
+            } });
+    }, [templateRoots, coarse]);
     var handleGetTagProps = (0, react_1.useCallback)(function (tag) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         var tagValue = (_a = tag.value) === null || _a === void 0 ? void 0 : _a.toString();
         if (!tagValue) {
             return {};
@@ -247,44 +548,47 @@ exports.RichTextFormField = (0, react_1.memo)(function (_a) {
            description on hover. Read at render, so a catalogue that arrives
            after the value still names it. */
         if (isText && tagValue.startsWith('$')) {
-            var item = (0, templates_1.describeTemplateReference)(templates, tagValue).item;
+            var item = (0, templates_1.describeTemplateReference)(naming, tagValue).item;
             var metadata = item === null || item === void 0 ? void 0 : item.metadata;
-            return __assign({ icon: 'ExchangeDollarLine', leftIconProps: { image: metadata === null || metadata === void 0 ? void 0 : metadata.image }, label: (0, templateText_1.templateChipLabel)(templates, tagValue), tooltip: (0, templates_1.templateTooltip)(templates, tagValue) }, (0, templates_1.getTemplateTagStyle)(metadata));
+            // a reference nothing names says so; one the host knows wears its name (`referenceStanding`)
+            var standing = (0, referenceNames_1.referenceStanding)(naming, tagValue, referenceNames);
+            var unlisted = standing.unlisted ? (0, referenceNames_1.unlistedReferenceChipProps)(referenceNames) : undefined;
+            return __assign(__assign(__assign(__assign({ icon: 'ExchangeDollarLine', leftIconProps: { image: metadata === null || metadata === void 0 ? void 0 : metadata.image }, label: (_e = standing.label) !== null && _e !== void 0 ? _e : (0, templateText_1.templateChipLabel)(naming, tagValue), tooltip: (_f = unlisted === null || unlisted === void 0 ? void 0 : unlisted.tooltip) !== null && _f !== void 0 ? _f : (0, templates_1.templateTooltip)(naming, tagValue, descriptions, getTypeSentenceForm, (0, referenceNames_1.hostSaysOf)(tagValue, referenceNames)) }, templates_1.REFERENCE_CHIP_PROPS), (0, templates_1.getTemplateTagStyle)(metadata)), (unlisted ? { intent: unlisted.intent, className: unlisted.className } : {})), templateChipClick(tag));
         }
         if (tagValue.startsWith('$')) {
-            return __assign({ icon: 'ExchangeDollarLine', leftIconProps: {
-                    image: (_e = tag.metadata) === null || _e === void 0 ? void 0 : _e.image,
-                }, labelKey: (_f = tag.metadata) === null || _f === void 0 ? void 0 : _f.displayName, 
+            // named as every view names it: where it is, then its name ("Receive order › Event type")
+            var listed = (0, templates_1.describeTemplateReference)(naming, tagValue).item;
+            return __assign(__assign(__assign(__assign(__assign({ icon: 'ExchangeDollarLine', leftIconProps: {
+                    image: (_g = tag.metadata) === null || _g === void 0 ? void 0 : _g.image,
+                } }, (listed ?
+                { label: (0, templateText_1.templateChipLabel)(naming, tagValue) }
+                : { labelKey: (_h = tag.metadata) === null || _h === void 0 ? void 0 : _h.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,
-                            }),
-                        }
-                        : descriptionByValue[tagValue]
-                    : undefined }, (0, templates_1.getTemplateTagStyle)(tag.metadata));
+                /* Drawn, as the picker row draws the same string (`descriptionTooltip`):
+                   left raw, it printed the punctuation the row does not. */
+                // what the value is, or why nothing says so (qorus#646)
+                tooltip: listed ?
+                    // its whole path heads the card, as every view's hover of a listed template says it
+                    (0, templates_1.templateTooltip)(naming, tagValue, descriptions, getTypeSentenceForm)
+                    : (0, descriptionTooltip_1.descriptionTooltip)(descriptionByValue[tagValue] || noDescription_1.NO_VALUE_DESCRIPTION, descriptions) }), templates_1.REFERENCE_CHIP_PROPS), (0, templates_1.getTemplateTagStyle)(tag.metadata)), templateChipClick(tag));
         }
         return {};
-    }, [descriptionByValue, renderMarkdown, isText, templates, chipBehavior.click, openChoiceChip]);
+    }, [
+        descriptionByValue,
+        descriptions,
+        getTypeSentenceForm,
+        isText,
+        naming,
+        referenceNames,
+        chipBehavior.click,
+        openChoiceChip,
+        templateChipClick,
+    ]);
     /* 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
@@ -295,8 +599,12 @@ exports.RichTextFormField = (0, react_1.memo)(function (_a) {
         if ((0, choiceChip_1.choiceForValue)(shown, allowed_values)) {
             setLocalValue(toLocal(shown));
         }
+        else if (isText && editorRef.current && !readOnly) {
+            // every reference typed out in full is drawn as its chip
+            (0, typedReferences_1.commitTypedReferences)(editorRef.current, typedConverter, namesNothing);
+        }
         (_b = (_a = rest).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-    }, [isText, localValue, choiceKey, rest.onBlur]);
+    }, [isText, localValue, choiceKey, rest.onBlur, typedConverter, namesNothing, readOnly]);
     var handleKeyDown = (0, react_1.useCallback)(function (event) {
         var _a, _b;
         if (isText && singleLine && event.key === 'Enter') {
@@ -320,51 +628,34 @@ exports.RichTextFormField = (0, react_1.memo)(function (_a) {
         openChoiceChip,
         rest.onKeyDown,
     ]);
-    var tags = (0, react_1.useMemo)(function () {
-        var _tags = {};
-        if ((0, lodash_1.size)(templates === null || templates === void 0 ? void 0 : templates.items) && allowTemplates) {
-            _tags.templates = {
-                icon: 'MoneyDollarBoxLine',
-                label: 'Templates',
-                flat: false,
-                description: 'Universal values that can be used in multiple places',
-                /* 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: (0, templateItems_1.renderTemplateItemDescriptions)((0, templateItems_1.templateItemsToShow)(templates === null || templates === void 0 ? void 0 : templates.items), renderMarkdown),
-            };
-        }
-        return _tags;
-    }, [allowTemplates, templates, renderMarkdown]);
     var formattedValue = typeof localValue !== 'object' ? [{ type: 'paragraph', children: [{ text: String(localValue !== null && localValue !== void 0 ? localValue : '') }] }]
         : localValue === null ? undefined
             : localValue;
-    // Read-only: ReqoreRichTextEditor makes the Slate surface non-editable (and
-    // disables tag click/remove) when `readOnly` is set. Honour the field-level
-    // flags — the IDE Options model passes `readonly`, the compact form passes
-    // `readOnly` + `disabled` — so a read-only form renders the formatted content
-    // rather than an editable box.
-    var readOnly = !!(rest.readOnly ||
-        rest.readonly ||
-        rest.disabled);
     /* Everything the caller passed, minus its own `tags` — see the prop's doc
        above: on a form field that name means the chips to show, while the
        editor's `tags` is the template catalogue this component computes. */
     var editorProps = __assign({}, rest);
     delete editorProps.tags;
-    return ((0, jsx_runtime_1.jsx)(RichTextEditor_1.ReqoreRichTextEditor, __assign({ ref: editorRef, value: formattedValue, onChange: handleChange }, editorProps, { tagsListProps: __assign({ useTargetWidth: true, minWidth: '300px', maxWidth: '600px', listCustomTheme: {
-                main: '#1b151f',
-            } }, (rest.tagsListProps || {})), getTagProps: handleGetTagProps, tags: tags, panelProps: { fluid: true, style: __assign({ minWidth: '150px' }, (_c = rest.panelProps) === null || _c === void 0 ? void 0 : _c.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
-           greyed icons in it (they are disabled until there is history to walk).
-           Both still work from the keyboard, where every other text field's do. */
-        actions: { undo: false, redo: false, styling: false } })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_1.ReqoreRichTextEditor, __assign({ ref: editorRef, 
+                // a click, a tap or Tab into the text opens the template picker at the caret (`browseAtPageCaret`)
+                onClick: function (event) { return browseAtPageCaret(event.target); }, 
+                // Tab's key comes up in the editor it moved the focus into
+                onKeyUp: function (event) {
+                    // only a Tab that brought the focus in: one that took a completion here asks nothing more
+                    if (event.key === 'Tab' && tabCameIn())
+                        browseAtPageCaret(event.target);
+                }, value: formattedValue, onChange: function (val) {
+                    handleChange(val);
+                    if (editorRef.current)
+                        autocomplete.onSlateChange(editorRef.current, val);
+                } }, editorProps, { tagsListProps: __assign(__assign({ useTargetWidth: true }, useTemplateTags_1.TEMPLATE_BROWSE_LIST_PROPS), (rest.tagsListProps || {})), getTagProps: handleGetTagProps, "aria-autocomplete": 'list', "aria-expanded": autocomplete.isOpen, "aria-controls": completionMenuId, panelProps: __assign(__assign({ fluid: true }, rest.panelProps), { style: __assign({ minWidth: '150px' }, (_c = rest.panelProps) === null || _c === void 0 ? void 0 : _c.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
+                   greyed icons in it (they are disabled until there is history to walk).
+                   Both still work from the keyboard, where every other text field's do. */
+                actions: { undo: false, redo: false, styling: false } })), (0, jsx_runtime_1.jsx)(CompletionMenu_1.CompletionMenu, { autocomplete: autocomplete, id: completionMenuId, 
+                // the picker offers what typing offers: the template contexts too, each taken whole or gone into
+                templateRoots: pickerRoots, onSelect: function (item) { return editorRef.current && autocomplete.onItemSelect(item, editorRef.current); } })] }));
 });
 //# sourceMappingURL=RichText.js.map