@splunk/visualizations 28.7.0 → 28.8.0

package/RichText.js

@@ -186,6 +186,19 @@ var themes = {
   defaultBackgroundColor: () => "transparent"
 };
 var editorConfig = [
+  {
+    label: (0, i18n_exports._)("Data display"),
+    open: true,
+    layout: [
+      [
+        {
+          label: (0, i18n_exports._)("Preview token values"),
+          option: "previewTokenValues",
+          editor: "editor.toggle"
+        }
+      ]
+    ]
+  },
   {
     label: (0, i18n_exports._)("Color and style"),
     open: true,
@@ -261,7 +274,7 @@ var config = {
    * viz name
    */
   name: (0, i18n_exports._)("Text"),
-  category: "Comparisons" /* COMPARISONS */,
+  category: "Text" /* TEXT */,
   status: "preview",
   /**
    * viz icon
@@ -672,7 +685,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.7.0 - d7b18cab6"
+  "data-splunk-visualization-version": "28.8.0 - 633c53372"
 })`
     position: relative;
     width: 100%;
@@ -771,7 +784,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.7.0 - d7b18cab6",
+        "data-splunk-visualization-version": "28.8.0 - 633c53372",
         width,
         height,
         backgroundColor
@@ -2670,14 +2683,23 @@ var defaultImport33 = __toESM(require("@splunk/dashboard-context"));
 __reExport(dashboard_context_exports, require("@splunk/dashboard-context"));
 var dashboard_context_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
+// esm-externals:slate
+var slate_exports = {};
+__export(slate_exports, {
+  default: () => slate_default
+});
+var defaultImport34 = __toESM(require("slate"));
+__reExport(slate_exports, require("slate"));
+var slate_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+
 // esm-externals:slate-react
 var slate_react_exports = {};
 __export(slate_react_exports, {
   default: () => slate_react_default
 });
-var defaultImport34 = __toESM(require("slate-react"));
+var defaultImport35 = __toESM(require("slate-react"));
 __reExport(slate_react_exports, require("slate-react"));
-var slate_react_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var slate_react_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // src/RichText/PureRichText/activeInstance.ts
 var activeRichTextId = null;
@@ -2734,15 +2756,6 @@ function isMouseSelecting() {
   return mouseSelecting;
 }
 
-// esm-externals:slate
-var slate_exports = {};
-__export(slate_exports, {
-  default: () => slate_default
-});
-var defaultImport35 = __toESM(require("slate"));
-__reExport(slate_exports, require("slate"));
-var slate_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
-
 // src/RichText/PureRichText/types.ts
 var DEFAULT_TEXT_STYLES = {
   bold: false,
@@ -2799,6 +2812,7 @@ __reExport(dompurify_exports, require("dompurify"));
 var dompurify_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // src/RichText/PureRichText/utils/slateUtils.ts
+var sharedDomParser = new DOMParser();
 function safeSelectEnd(editor) {
   try {
     const end = slate_exports.Editor.end(editor, []);
@@ -3210,7 +3224,10 @@ function slateToHtml(value) {
   };
   const serializeTextNode = (node) => {
     const styles = buildTextStyles(node);
-    let { text } = node;
+    let text = node.tokenName ? `$${node.tokenName}$` : node.text;
+    if (node.isEscapedDollar && (node.text === "$" || node.text === "$$")) {
+      text = "$$";
+    }
     if (!text) {
       return styles.length > 0 ? `<span style="${styles.join("; ")}"></span>` : "";
     }
@@ -3231,7 +3248,7 @@ function slateToHtml(value) {
     const styleAttr = buildBlockStyleAttr(element);
     switch (element.type) {
       case "paragraph":
-        return `<p${styleAttr}>${children || "<br>"}</p>`;
+        return `<p${styleAttr}>${children || "\n"}</p>`;
       case "bulleted-list":
         return `<ul${styleAttr}>${children}</ul>`;
       case "numbered-list":
@@ -3258,7 +3275,23 @@ function htmlToSlate(html) {
   if (!html || html.trim() === "") {
     return EMPTY_SLATE_VALUE;
   }
-  const sanitized = dompurify_default.sanitize(html, {
+  const NULL = "\0";
+  const restorePlaceholderRe = new RegExp(String.raw`${NULL}RT(\d+)${NULL}`, "g");
+  const escapeUnsafeAngleBrackets = (input) => {
+    const placeholders = [];
+    const allowedTagRegex = /<\/?(?:p|br|strong|b|em|i|u|s|strike|span|a|ul|ol|li|div|font)\b[^>]*>/gi;
+    const withPlaceholders = input.replace(allowedTagRegex, (match) => {
+      const index = placeholders.push(match) - 1;
+      return `${NULL}RT${index}${NULL}`;
+    });
+    const escaped = withPlaceholders.replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+    return escaped.replace(restorePlaceholderRe, (_5, index) => {
+      const parsedIndex = Number.parseInt(index, 10);
+      return placeholders[parsedIndex] || "";
+    });
+  };
+  const normalizedHtml = escapeUnsafeAngleBrackets(html);
+  const sanitized = dompurify_default.sanitize(normalizedHtml, {
     ALLOWED_TAGS: [
       "p",
       "br",
@@ -3279,8 +3312,7 @@ function htmlToSlate(html) {
     ],
     ALLOWED_ATTR: ["style", "href", "color", "face", "size"]
   });
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(`<body>${sanitized}</body>`, "text/html");
+  const doc = sharedDomParser.parseFromString(`<body>${sanitized}</body>`, "text/html");
   const applyMarksToChildren = (children, marks) => {
     return children.map((child) => {
       if (slate_exports.Text.isText(child)) {
@@ -3343,6 +3375,14 @@ function htmlToSlate(html) {
     }
     return children;
   };
+  const collapseEmptyLineChildren = (children) => {
+    if (children.length !== 1) return children;
+    const [only] = children;
+    if (slate_exports.Text.isText(only) && /^[\n\r]+$/.test(only.text)) {
+      return [__spreadProps(__spreadValues({}, only), { text: "" })];
+    }
+    return children;
+  };
   const handleTag = (tagName, element, children, blockStyles) => {
     const { align, lineHeight } = blockStyles;
     switch (tagName) {
@@ -3350,13 +3390,23 @@ function htmlToSlate(html) {
       case "div":
         return children;
       case "p":
-        return { type: "paragraph", align, lineHeight, children };
+        return {
+          type: "paragraph",
+          align,
+          lineHeight,
+          children: collapseEmptyLineChildren(children)
+        };
       case "ul":
         return { type: "bulleted-list", align, lineHeight, children };
       case "ol":
         return { type: "numbered-list", align, lineHeight, children };
       case "li":
-        return { type: "list-item", align, lineHeight, children };
+        return {
+          type: "list-item",
+          align,
+          lineHeight,
+          children: collapseEmptyLineChildren(children)
+        };
       case "a":
         return {
           type: "link",
@@ -3495,6 +3545,31 @@ function generateFormatAnnouncement(command, value) {
 }
 
 // src/RichText/PureRichText/PureRichTextContext.tsx
+function activeStylesEqual(a, b) {
+  const keys = [
+    "bold",
+    "italic",
+    "underline",
+    "strikethrough",
+    "color",
+    "backgroundColor",
+    "fontSize",
+    "fontFamily",
+    "textAlign",
+    "verticalAlign",
+    "lineHeight",
+    "listType"
+  ];
+  for (const key of keys) {
+    if (a[key] !== b[key]) return false;
+  }
+  const aMixed = a.isMixed;
+  const bMixed = b.isMixed;
+  if (aMixed === bMixed) return true;
+  if (!aMixed || !bMixed) return false;
+  const mixedKeys = ["color", "backgroundColor", "fontSize", "fontFamily", "lineHeight"];
+  return mixedKeys.every((key) => aMixed[key] === bMixed[key]);
+}
 var PureRichTextContext = (0, react_exports.createContext)(null);
 function usePureRichText() {
   const context = (0, react_exports.useContext)(PureRichTextContext);
@@ -3610,7 +3685,7 @@ function PureRichTextProvider({
       if (slateStyles.isMixed && Object.keys(slateStyles.isMixed).length > 0) {
         newActiveStyles.isMixed = slateStyles.isMixed;
       }
-      setActiveTextStyles(newActiveStyles);
+      setActiveTextStyles((prev) => activeStylesEqual(prev, newActiveStyles) ? prev : newActiveStyles);
     },
     [userDefaultStyles, resolveBooleanMark]
   );
@@ -4988,21 +5063,31 @@ var EditorPanel = ({
       anchor: linkButtonRef.current,
       onRequestClose: handleLinkPopoverClose
     },
-    /* @__PURE__ */ react_default.createElement(LinkPopoverContent, { ref: linkPopoverRef, onKeyDown: handleLinkKeyDown }, /* @__PURE__ */ react_default.createElement(ControlGroup_default, { label: "Text", labelPosition: "top" }, /* @__PURE__ */ react_default.createElement(
-      Text_default,
-      {
-        value: linkText,
-        onChange: (_e, { value: v }) => setLinkText(v),
-        placeholder: "Link text"
-      }
-    )), /* @__PURE__ */ react_default.createElement(ControlGroup_default, { label: "URL", labelPosition: "top" }, /* @__PURE__ */ react_default.createElement(
-      Text_default,
+    /* @__PURE__ */ react_default.createElement(
+      LinkPopoverContent,
       {
-        value: linkUrl,
-        onChange: (_e, { value: v }) => setLinkUrl(v),
-        placeholder: "https://..."
-      }
-    )), /* @__PURE__ */ react_default.createElement(Row, null, /* @__PURE__ */ react_default.createElement(Button_default, { appearance: "primary", onClick: handleLinkSave, label: "Save" }), linkIsActive && /* @__PURE__ */ react_default.createElement(Button_default, { onClick: handleLinkRemove, label: "Remove" }), /* @__PURE__ */ react_default.createElement(Button_default, { onClick: handleLinkPopoverClose, label: "Cancel" })))
+        ref: linkPopoverRef,
+        onKeyDown: handleLinkKeyDown,
+        "data-test": "link-popover-content"
+      },
+      /* @__PURE__ */ react_default.createElement(ControlGroup_default, { label: "Text", labelPosition: "top" }, /* @__PURE__ */ react_default.createElement(
+        Text_default,
+        {
+          value: linkText,
+          onChange: (_e, { value: v }) => setLinkText(v),
+          placeholder: "Link text"
+        }
+      )),
+      /* @__PURE__ */ react_default.createElement(ControlGroup_default, { label: "URL", labelPosition: "top" }, /* @__PURE__ */ react_default.createElement(
+        Text_default,
+        {
+          value: linkUrl,
+          onChange: (_e, { value: v }) => setLinkUrl(v),
+          placeholder: "https://..."
+        }
+      )),
+      /* @__PURE__ */ react_default.createElement(Row, null, /* @__PURE__ */ react_default.createElement(Button_default, { appearance: "primary", onClick: handleLinkSave, label: "Save" }), linkIsActive && /* @__PURE__ */ react_default.createElement(Button_default, { onClick: handleLinkRemove, label: "Remove" }), /* @__PURE__ */ react_default.createElement(Button_default, { onClick: handleLinkPopoverClose, label: "Cancel" }))
+    )
   ), /* @__PURE__ */ react_default.createElement(ControlGroup_default, { label: "Alignment", labelPosition: "top" }, /* @__PURE__ */ react_default.createElement(AlignmentSection, null, /* @__PURE__ */ react_default.createElement(HorizontalAlignmentRadioBar, null, /* @__PURE__ */ react_default.createElement(
     RadioBar_default,
     {
@@ -5318,6 +5403,9 @@ var Leaf = ({ attributes, children, leaf }) => {
   if (customLeaf.strikethrough) {
     content = /* @__PURE__ */ react_exports.createElement("s", null, content);
   }
+  if (customLeaf.tokenName) {
+    return /* @__PURE__ */ react_exports.createElement("span", __spreadProps(__spreadValues({}, attributes), { style }), /* @__PURE__ */ react_exports.createElement("span", { "data-token-name": customLeaf.isRawToken ? customLeaf.tokenName : void 0 }, content));
+  }
   return /* @__PURE__ */ react_exports.createElement("span", __spreadProps(__spreadValues({}, attributes), { style }), content);
 };
 
@@ -5419,7 +5507,7 @@ function getTokenRangeAtPoint(e, point) {
   const [node, path] = slate_exports.Editor.node(e, point);
   if (!slate_exports.Text.isText(node)) return null;
   const custom = node;
-  if (!custom.tokenName) return null;
+  if (!custom.tokenName && !custom.isEscapedDollar) return null;
   return {
     anchor: { path, offset: 0 },
     focus: { path, offset: custom.text.length }
@@ -5439,7 +5527,8 @@ function getAtomicRangeAtPoint(e, point) {
 }
 function isStrictlyInsideAtomic(e, point) {
   const [node] = slate_exports.Editor.node(e, point);
-  if (slate_exports.Text.isText(node) && node.tokenName) {
+  const custom = node;
+  if (slate_exports.Text.isText(node) && (custom.tokenName || custom.isEscapedDollar)) {
     return point.offset > 0 && point.offset < node.text.length;
   }
   const linkEntry = slate_exports.Editor.above(e, {
@@ -5514,11 +5603,26 @@ function expandSelectionToAtomic(e) {
   }
 }
 function moveCursorPastAtomicIfNeeded(e) {
+  var _a;
   if (!e.selection || !slate_exports.Range.isCollapsed(e.selection)) return;
-  if (!isStrictlyInsideAtomic(e, e.selection.anchor)) return;
-  const after = getPointAfterAtomic(e, e.selection.anchor);
-  if (after) {
-    slate_exports.Transforms.select(e, after);
+  const { anchor } = e.selection;
+  const [node] = slate_exports.Editor.node(e, anchor);
+  if (slate_exports.Text.isText(node) && (node.tokenName || node.isEscapedDollar)) {
+    if (anchor.offset > 0 && anchor.offset < node.text.length) {
+      const endPoint = { path: anchor.path, offset: node.text.length };
+      e.selection = { anchor: endPoint, focus: endPoint };
+    }
+    const currentMarks = (_a = slate_exports.Editor.marks(e)) != null ? _a : {};
+    const marksWithoutToken = __spreadValues({}, currentMarks);
+    delete marksWithoutToken.tokenName;
+    delete marksWithoutToken.isEscapedDollar;
+    e.marks = marksWithoutToken;
+    return;
+  }
+  if (!isStrictlyInsideAtomic(e, anchor)) return;
+  const afterAtomic = getPointAfterAtomic(e, anchor);
+  if (afterAtomic) {
+    slate_exports.Transforms.select(e, afterAtomic);
   }
 }
 function tryExitEmptyListItem(e) {
@@ -5537,6 +5641,18 @@ function tryExitEmptyListItem(e) {
   slate_exports.Transforms.setNodes(e, { type: "paragraph" });
   return true;
 }
+function blockPathAt(ed, point) {
+  const above = slate_exports.Editor.above(ed, {
+    at: point,
+    match: (n) => !slate_exports.Editor.isEditor(n) && slate_exports.Element.isElement(n) && slate_exports.Editor.isBlock(ed, n)
+  });
+  return above ? above[1] : null;
+}
+function inSameBlock(ed, a, b) {
+  const pa = blockPathAt(ed, a);
+  const pb = blockPathAt(ed, b);
+  return pa !== null && pb !== null && slate_exports.Path.equals(pa, pb);
+}
 function tryDeleteAtomicBackward(ed, anchor) {
   if (isStrictlyInsideAtomic(ed, anchor)) {
     const range2 = getAtomicRangeAtPoint(ed, anchor);
@@ -5550,7 +5666,8 @@ function tryDeleteAtomicBackward(ed, anchor) {
   }
   if (currentRange) return false;
   const before = slate_exports.Editor.before(ed, anchor);
-  const prevRange = before ? getAtomicRangeAtPoint(ed, before) : null;
+  if (!before || !inSameBlock(ed, anchor, before)) return false;
+  const prevRange = getAtomicRangeAtPoint(ed, before);
   if (!prevRange) return false;
   slate_exports.Transforms.delete(ed, { at: prevRange });
   return true;
@@ -5594,7 +5711,8 @@ function tryDeleteAtomicForward(ed, anchor) {
   }
   if (fwdRange) return false;
   const after = slate_exports.Editor.after(ed, anchor);
-  const nextRange = after ? getAtomicRangeAtPoint(ed, after) : null;
+  if (!after || !inSameBlock(ed, anchor, after)) return false;
+  const nextRange = getAtomicRangeAtPoint(ed, after);
   if (!nextRange) return false;
   slate_exports.Transforms.delete(ed, { at: nextRange });
   return true;
@@ -5658,6 +5776,17 @@ function installDeleteOverrides(e) {
     deleteForward(unit);
   };
 }
+function installNormalizeOverride(e) {
+  const { normalizeNode } = e;
+  e.normalizeNode = (entry) => {
+    const [node, path] = entry;
+    if (slate_exports.Text.isText(node) && node.text === "" && (node.tokenName || node.isEscapedDollar)) {
+      slate_exports.Transforms.unsetNodes(e, ["tokenName", "isEscapedDollar", "isRawToken"], { at: path });
+      return;
+    }
+    normalizeNode(entry);
+  };
+}
 function installOnChangeOverride(e, getSavedMarks, clearSavedMarks) {
   const { onChange } = e;
   e.onChange = () => {
@@ -5681,6 +5810,7 @@ function useEditorSetup(defaultTextStyleRef) {
       savedMarksForOnChange = slate_exports.Editor.marks(e);
     });
     installDeleteOverrides(e);
+    installNormalizeOverride(e);
     installOnChangeOverride(
       e,
       () => savedMarksForOnChange,
@@ -5704,24 +5834,6 @@ function useInitialMarks(editor, isEditMode, defaultTextStyle) {
 }
 
 // src/RichText/PureRichText/hooks/useFakeHighlight.ts
-function pointAbsOffset(editor, point) {
-  let abs = 0;
-  for (const [textNode, path] of slate_exports.Editor.nodes(editor, {
-    at: [],
-    match: (n) => slate_exports.Text.isText(n)
-  })) {
-    if (slate_exports.Path.equals(path, point.path)) return abs + point.offset;
-    abs += textNode.text.length;
-  }
-  return abs;
-}
-function rangeToAbsOffsets(editor, range2) {
-  const [start, end] = slate_exports.Range.edges(range2);
-  return {
-    absStart: pointAbsOffset(editor, start),
-    absEnd: pointAbsOffset(editor, end)
-  };
-}
 function pointToAbsOffset(editor, point) {
   let offset = 0;
   for (const [textNode, path] of slate_exports.Editor.nodes(editor, {
@@ -5733,6 +5845,13 @@ function pointToAbsOffset(editor, point) {
   }
   return offset;
 }
+function rangeToAbsOffsets(editor, range2) {
+  const [start, end] = slate_exports.Range.edges(range2);
+  return {
+    absStart: pointToAbsOffset(editor, start),
+    absEnd: pointToAbsOffset(editor, end)
+  };
+}
 function absOffsetToPoint(editor, absOffset, isStart = false) {
   let seen = 0;
   for (const [textNode, path] of slate_exports.Editor.nodes(editor, {
@@ -5769,8 +5888,9 @@ function useFakeHighlight(editor) {
   }, []);
   const decorate = (0, react_exports.useCallback)(
     ([node, path]) => {
-      if (!fakeHighlightAbs || !slate_exports.Text.isText(node)) return [];
-      const { absStart, absEnd } = fakeHighlightAbs;
+      const abs = fakeHighlightAbsRef.current;
+      if (!abs || !slate_exports.Text.isText(node)) return [];
+      const { absStart, absEnd } = abs;
       let nodeAbsStart = 0;
       for (const [n, p] of slate_exports.Editor.nodes(editor, {
         at: [],
@@ -5791,6 +5911,8 @@ function useFakeHighlight(editor) {
         }
       ];
     },
+    // fakeHighlightAbs (state) triggers re-evaluation; fakeHighlightAbsRef provides the current value.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [fakeHighlightAbs, editor]
   );
   return {
@@ -5802,6 +5924,140 @@ function useFakeHighlight(editor) {
   };
 }
 
+// src/RichText/PureRichText/hooks/useTokenMap.ts
+var NAME_CHARS = String.raw` \w.-`;
+var NAMESPACE_PREFIX = `(?:[${NAME_CHARS}]+:)?`;
+var NAME = String.raw`(?:(?=[\w.-])[${NAME_CHARS}]*[\w.-])`;
+var FILTERS = String.raw`(?:\|[a-zA-Z]+)*`;
+var TOKEN_CONTENT = `${NAMESPACE_PREFIX}${NAME}${FILTERS}`;
+var TOKEN_PATTERN = new RegExp(String.raw`\$(${TOKEN_CONTENT})\$`, "g");
+var TOKEN_OR_ESCAPE_PATTERN = new RegExp(
+  String.raw`\$\$|\$(${TOKEN_CONTENT})\$(?=\$${TOKEN_CONTENT}\$|\$\$|[^$]|$)`,
+  "g"
+);
+function toValueString(value) {
+  return value === null ? null : String(value);
+}
+function normalizeTokenMetadata(metadata, resolvedContent) {
+  const nameToValue = /* @__PURE__ */ new Map();
+  if (!metadata || metadata.length === 0) {
+    return { nameToValue, rawContent: resolvedContent, reconciled: true };
+  }
+  const sorted = [...metadata].sort((a, b) => a.start - b.start);
+  for (const { match, value } of sorted) {
+    const strValue = toValueString(value);
+    if (match !== "$$" && strValue !== null && strValue !== "") {
+      nameToValue.set(match.slice(1, -1), strValue);
+    }
+  }
+  let raw = "";
+  let rawCursor = 0;
+  let resolvedCursor = 0;
+  for (const entry of sorted) {
+    const { match, value, start, end } = entry;
+    const strValue = toValueString(value);
+    const literalLength = start - rawCursor;
+    const expected = strValue != null ? strValue : match;
+    const valuePos = resolvedCursor + literalLength;
+    if (literalLength < 0 || resolvedContent.slice(valuePos, valuePos + expected.length) !== expected) {
+      return { nameToValue, rawContent: resolvedContent, reconciled: false };
+    }
+    raw += resolvedContent.slice(resolvedCursor, valuePos);
+    raw += match;
+    rawCursor = end;
+    resolvedCursor = valuePos + expected.length;
+  }
+  raw += resolvedContent.slice(resolvedCursor);
+  return { nameToValue, rawContent: raw, reconciled: true };
+}
+function wrapTreeNodes(nodes, splitLeaf) {
+  const processNode = (node) => {
+    if (slate_exports.Text.isText(node)) {
+      return splitLeaf(node);
+    }
+    if (slate_exports.Element.isElement(node)) {
+      return [__spreadProps(__spreadValues({}, node), { children: node.children.flatMap(processNode) })];
+    }
+    return [node];
+  };
+  return nodes.flatMap(processNode);
+}
+function wrapRawTokensInTree(nodes, nameToValue) {
+  return wrapTreeNodes(nodes, (node) => splitTextByRawTokens(node, nameToValue));
+}
+function splitTextByRawTokens(textNode, nameToValue) {
+  const _a = textNode, { text, tokenName: existingTokenName, isEscapedDollar } = _a, rest = __objRest(_a, ["text", "tokenName", "isEscapedDollar"]);
+  const marks = __spreadValues({}, rest);
+  delete marks.isRawToken;
+  if (!text) return [textNode];
+  if (isEscapedDollar) {
+    if (text !== "$" && text !== "$$") return [textNode];
+    return [__spreadProps(__spreadValues({}, textNode), { text: displayTextForEscapedDollar(nameToValue) })];
+  }
+  if (existingTokenName) {
+    const display = displayTextForToken(existingTokenName, nameToValue);
+    return [__spreadProps(__spreadValues({}, textNode), { text: display, isRawToken: !nameToValue })];
+  }
+  const re = new RegExp(TOKEN_OR_ESCAPE_PATTERN.source, "g");
+  const result = [];
+  let lastIndex = 0;
+  let match = re.exec(text);
+  while (match !== null) {
+    const startIdx = match.index;
+    const fullMatch = match[0];
+    const name = match[1];
+    if (startIdx > lastIndex) {
+      result.push(__spreadValues({ text: text.slice(lastIndex, startIdx) }, marks));
+    }
+    if (name === void 0) {
+      result.push(__spreadProps(__spreadValues({ text: displayTextForEscapedDollar(nameToValue) }, marks), { isEscapedDollar: true }));
+    } else {
+      result.push(__spreadProps(__spreadValues({
+        text: displayTextForToken(name, nameToValue)
+      }, marks), {
+        tokenName: name,
+        isRawToken: !nameToValue
+      }));
+    }
+    lastIndex = startIdx + fullMatch.length;
+    match = re.exec(text);
+  }
+  if (result.length === 0) return [textNode];
+  if (lastIndex < text.length) {
+    result.push(__spreadValues({ text: text.slice(lastIndex) }, marks));
+  }
+  return result;
+}
+function displayTextForToken(name, nameToValue) {
+  const value = nameToValue == null ? void 0 : nameToValue.get(name);
+  return value !== void 0 && value !== "" ? value : `$${name}$`;
+}
+function displayTextForEscapedDollar(nameToValue) {
+  return nameToValue ? "$" : "$$";
+}
+var EMPTY_MAP = /* @__PURE__ */ new Map();
+function useTokenMap(resolvedContent, richTextTokenMetadata) {
+  var _a, _b, _c, _d, _e;
+  const contentMetadata = (_a = richTextTokenMetadata == null ? void 0 : richTextTokenMetadata.richTextContent) != null ? _a : null;
+  const serialized = contentMetadata ? JSON.stringify(contentMetadata) : null;
+  const resultRef = (0, react_exports.useRef)(null);
+  const prevSerializedRef = (0, react_exports.useRef)(null);
+  const prevResolvedRef = (0, react_exports.useRef)("");
+  if (serialized !== prevSerializedRef.current || resolvedContent !== prevResolvedRef.current) {
+    prevSerializedRef.current = serialized;
+    prevResolvedRef.current = resolvedContent;
+    if (contentMetadata) {
+      const next = normalizeTokenMetadata(contentMetadata, resolvedContent);
+      resultRef.current = next.reconciled || !resultRef.current ? next : __spreadProps(__spreadValues({}, next), { rawContent: resultRef.current.rawContent });
+    } else {
+      resultRef.current = null;
+    }
+  }
+  const nameToValue = (_c = (_b = resultRef.current) == null ? void 0 : _b.nameToValue) != null ? _c : EMPTY_MAP;
+  const rawContent = (_e = (_d = resultRef.current) == null ? void 0 : _d.rawContent) != null ? _e : null;
+  return { nameToValue, rawContent };
+}
+
 // src/RichText/PureRichText/hooks/useContentSync.ts
 function clampPoint(editor, point) {
   try {
@@ -5833,6 +6089,22 @@ function safeRestoreSelection(editor, selection) {
     }
   }
 }
+function directRestoreSelection(editor, selection) {
+  try {
+    if (selection) {
+      editor.selection = clampSelection(editor, selection);
+    } else {
+      const end = slate_exports.Editor.end(editor, []);
+      editor.selection = { anchor: end, focus: end };
+    }
+  } catch (e) {
+    try {
+      const end = slate_exports.Editor.end(editor, []);
+      editor.selection = { anchor: end, focus: end };
+    } catch (e2) {
+    }
+  }
+}
 function consumeForceSync(ref) {
   var _a;
   const value = (_a = ref == null ? void 0 : ref.current) != null ? _a : false;
@@ -5841,18 +6113,104 @@ function consumeForceSync(ref) {
   }
   return value;
 }
-function shouldSkipSync(forceSync, richTextContent, lastEmittedHtml, recentSavesRef, hasFocusRef) {
+function shouldSkipSync(forceSync, richTextContent, recentSavesRef, isTextEditingRef) {
   if (forceSync) return false;
   if (recentSavesRef == null ? void 0 : recentSavesRef.current.has(richTextContent)) return true;
-  if (hasFocusRef.current) return true;
+  if (isTextEditingRef.current) return true;
   return false;
 }
+function snapToTokenEdge(editor, point, isStart) {
+  try {
+    const [node] = slate_exports.Editor.node(editor, point);
+    if (slate_exports.Text.isText(node) && node.tokenName) {
+      return { path: point.path, offset: isStart ? 0 : node.text.length };
+    }
+  } catch (e) {
+  }
+  return point;
+}
+function restoreSelectionAndHighlight({
+  editor,
+  savedSelection,
+  forceSync,
+  isExternalContentChange,
+  fakeHighlightAbsRef,
+  hasFocusRef,
+  updateFakeHighlightAbs
+}) {
+  if (isExternalContentChange || forceSync) {
+    if (forceSync) {
+      directRestoreSelection(editor, savedSelection);
+    } else {
+      safeRestoreSelection(editor, savedSelection);
+    }
+  }
+  if (fakeHighlightAbsRef.current !== null && !hasFocusRef.current && editor.selection) {
+    let [start, end] = slate_exports.Range.isBackward(editor.selection) ? [editor.selection.focus, editor.selection.anchor] : [editor.selection.anchor, editor.selection.focus];
+    start = snapToTokenEdge(editor, start, true);
+    end = snapToTokenEdge(editor, end, false);
+    updateFakeHighlightAbs({
+      absStart: pointToAbsOffset(editor, start),
+      absEnd: pointToAbsOffset(editor, end)
+    });
+  } else {
+    updateFakeHighlightAbs(null);
+  }
+}
 function findHistoryIndex(history, html) {
   for (let i = history.length - 1; i >= 0; i -= 1) {
     if (history[i].html === html) return i;
   }
   return -1;
 }
+function isTypingOnly(editor) {
+  return editor.operations.every(
+    (op) => op.type === "set_selection" || op.type === "insert_text" || op.type === "remove_text"
+  );
+}
+function emitContentChange({
+  editor,
+  html,
+  prevSelection,
+  lastEmittedHtmlRef,
+  emittedHistoryRef,
+  historyPosRef,
+  onContentChange,
+  autoResolveTokensRef
+}) {
+  const typing = isTypingOnly(editor);
+  const hasBareToken = typing && (autoResolveTokensRef == null ? void 0 : autoResolveTokensRef.current) != null && new RegExp(TOKEN_PATTERN.source, TOKEN_PATTERN.flags).test(html);
+  const pos = historyPosRef.current;
+  lastEmittedHtmlRef.current = html;
+  emittedHistoryRef.current = [
+    ...emittedHistoryRef.current.slice(0, pos + 1),
+    { html, selection: editor.selection, preSelection: prevSelection }
+  ];
+  historyPosRef.current = emittedHistoryRef.current.length - 1;
+  onContentChange(html, hasBareToken || !typing);
+  if (autoResolveTokensRef == null ? void 0 : autoResolveTokensRef.current) {
+    queueMicrotask(autoResolveTokensRef.current);
+  }
+}
+function cancelPendingStyleUpdate(styleUpdateRafRef) {
+  if (styleUpdateRafRef.current !== null) {
+    cancelAnimationFrame(styleUpdateRafRef.current);
+    styleUpdateRafRef.current = null;
+  }
+}
+function recomputeStylesForContentChange(styleUpdateRafRef, updateActiveStyles) {
+  cancelPendingStyleUpdate(styleUpdateRafRef);
+  updateActiveStyles(true);
+}
+function scheduleStylesForSelectionChange(editor, styleUpdateRafRef, updateActiveStyles) {
+  if (styleUpdateRafRef.current !== null) return;
+  styleUpdateRafRef.current = requestAnimationFrame(() => {
+    styleUpdateRafRef.current = null;
+    if (editor.selection) {
+      updateActiveStyles(false);
+    }
+  });
+}
 function useContentSync({
   editor,
   initialValue,
@@ -5862,12 +6220,16 @@ function useContentSync({
   updateFakeHighlightAbs,
   fakeHighlightAbsRef,
   hasFocusRef,
+  isTextEditingRef,
   lastSelectionRef,
   recentSavesRef,
-  forceNextSyncRef
+  forceNextSyncRef,
+  transformTreeRef,
+  autoResolveTokensRef
 }) {
   const [value, setValue] = (0, react_exports.useState)(initialValue);
   const lastEmittedHtmlRef = (0, react_exports.useRef)(richTextContent);
+  const styleUpdateRafRef = (0, react_exports.useRef)(null);
   const emittedHistoryRef = (0, react_exports.useRef)([
     { html: richTextContent, selection: null, preSelection: null }
   ]);
@@ -5876,21 +6238,18 @@ function useContentSync({
   (0, react_exports.useEffect)(() => {
     const initialValueChanged = initialValue !== lastInitialValueRef.current;
     lastInitialValueRef.current = initialValue;
-    if (!initialValueChanged && richTextContent === lastEmittedHtmlRef.current) return;
-    const forceSync = consumeForceSync(forceNextSyncRef);
-    if (shouldSkipSync(
-      forceSync,
-      richTextContent,
-      lastEmittedHtmlRef.current,
-      recentSavesRef,
-      hasFocusRef
-    )) {
-      lastEmittedHtmlRef.current = richTextContent;
+    const explicitForceSync = consumeForceSync(forceNextSyncRef);
+    if (!explicitForceSync && !initialValueChanged && richTextContent === lastEmittedHtmlRef.current)
       return;
-    }
     const history = emittedHistoryRef.current;
     const incomingIdx = findHistoryIndex(history, richTextContent);
     const isExternalContentChange = richTextContent !== lastEmittedHtmlRef.current;
+    const isHistoryRevert = isExternalContentChange && incomingIdx !== -1;
+    const forceSync = explicitForceSync || isHistoryRevert;
+    if (shouldSkipSync(forceSync, richTextContent, recentSavesRef, isTextEditingRef)) {
+      lastEmittedHtmlRef.current = richTextContent;
+      return;
+    }
     const pendingMarks = isExternalContentChange ? null : editor.marks;
     lastEmittedHtmlRef.current = richTextContent;
     if (incomingIdx !== -1) {
@@ -5898,17 +6257,32 @@ function useContentSync({
     }
     const undoneEntry = incomingIdx !== -1 ? history[incomingIdx + 1] : null;
     const savedSelection = (undoneEntry == null ? void 0 : undoneEntry.preSelection) || (incomingIdx !== -1 ? history[incomingIdx].selection : null) || lastSelectionRef.current;
-    const treeToApply = forceSync && richTextContent ? htmlToSlate(richTextContent) : initialValue;
+    let treeToApply;
+    if (forceSync && richTextContent) {
+      const parsed = htmlToSlate(richTextContent);
+      treeToApply = (transformTreeRef == null ? void 0 : transformTreeRef.current) ? transformTreeRef.current(parsed) : parsed;
+    } else {
+      treeToApply = initialValue;
+    }
     setValue(treeToApply);
     editor.children = treeToApply;
     editor.selection = null;
-    if (isExternalContentChange || forceSync) {
-      safeRestoreSelection(editor, savedSelection);
-    }
+    restoreSelectionAndHighlight({
+      editor,
+      savedSelection,
+      forceSync,
+      isExternalContentChange,
+      fakeHighlightAbsRef,
+      hasFocusRef,
+      updateFakeHighlightAbs
+    });
     if (pendingMarks) {
       editor.marks = pendingMarks;
     }
   }, [initialValue, richTextContent, editor, lastSelectionRef]);
+  (0, react_exports.useEffect)(() => {
+    return () => cancelPendingStyleUpdate(styleUpdateRafRef);
+  }, []);
   const handleChange = (0, react_exports.useCallback)(
     (newValue) => {
       setValue(newValue);
@@ -5920,27 +6294,28 @@ function useContentSync({
       if (isContentChange) {
         const html = slateToHtml(newValue);
         if (html !== lastEmittedHtmlRef.current) {
-          const isTypingOnly = editor.operations.every(
-            (op) => op.type === "set_selection" || op.type === "insert_text" || op.type === "remove_text"
-          );
-          const pos = historyPosRef.current;
-          lastEmittedHtmlRef.current = html;
-          emittedHistoryRef.current = [
-            ...emittedHistoryRef.current.slice(0, pos + 1),
-            { html, selection: editor.selection, preSelection: prevSelection }
-          ];
-          historyPosRef.current = emittedHistoryRef.current.length - 1;
-          onContentChange(html, !isTypingOnly);
+          emitContentChange({
+            editor,
+            html,
+            prevSelection,
+            lastEmittedHtmlRef,
+            emittedHistoryRef,
+            historyPosRef,
+            onContentChange,
+            autoResolveTokensRef
+          });
         }
       }
       if (hasFocusRef.current || editor.selection) {
-        updateActiveStyles(isContentChange);
-      }
-      if (isContentChange && fakeHighlightAbsRef.current && hasFocusRef.current && editor.selection) {
-        if (slate_exports.Range.isCollapsed(editor.selection)) {
-          updateFakeHighlightAbs(null);
+        if (isContentChange) {
+          recomputeStylesForContentChange(styleUpdateRafRef, updateActiveStyles);
+        } else {
+          scheduleStylesForSelectionChange(editor, styleUpdateRafRef, updateActiveStyles);
         }
       }
+      if (isContentChange && fakeHighlightAbsRef.current && hasFocusRef.current && editor.selection && slate_exports.Range.isCollapsed(editor.selection)) {
+        updateFakeHighlightAbs(null);
+      }
     },
     [
       editor,
@@ -5949,10 +6324,11 @@ function useContentSync({
       updateFakeHighlightAbs,
       fakeHighlightAbsRef,
       hasFocusRef,
-      lastSelectionRef
+      lastSelectionRef,
+      autoResolveTokensRef
     ]
   );
-  return { value, handleChange };
+  return { value, handleChange, lastEmittedHtmlRef };
 }
 
 // src/RichText/PureRichText/hooks/useKeyboardShortcuts.ts
@@ -6486,7 +6862,11 @@ var InnerEditor = ({
   updateActiveStylesRef,
   clearFakeHighlightRef,
   recentSavesRef,
-  onAnnouncement
+  forceNextSyncRef: forceNextSyncRefProp,
+  transformTreeRef,
+  autoResolveTokensRef,
+  onAnnouncement,
+  onCancelPendingChanges
 }) => {
   const {
     setEditor,
@@ -6536,7 +6916,8 @@ var InnerEditor = ({
   const lastSelectionRef = (0, react_exports.useRef)(null);
   useEditModeEffect(editor, editableRef, isEditMode);
   const hasFocusRef = (0, react_exports.useRef)(false);
-  const forceNextSyncRef = (0, react_exports.useRef)(false);
+  const localForceNextSyncRef = (0, react_exports.useRef)(false);
+  const forceNextSyncRef = forceNextSyncRefProp != null ? forceNextSyncRefProp : localForceNextSyncRef;
   const { fakeHighlightAbsRef, updateFakeHighlight, updateFakeHighlightAbs, decorate } = useFakeHighlight(editor);
   const highlightDismissedRef = (0, react_exports.useRef)(false);
   (0, react_exports.useEffect)(() => {
@@ -6556,9 +6937,12 @@ var InnerEditor = ({
     updateFakeHighlightAbs,
     fakeHighlightAbsRef,
     hasFocusRef,
+    isTextEditingRef,
     lastSelectionRef,
     recentSavesRef,
-    forceNextSyncRef
+    forceNextSyncRef,
+    transformTreeRef,
+    autoResolveTokensRef
   });
   const stepFontSize = useStepFontSize({
     editor,
@@ -6657,7 +7041,7 @@ var InnerEditor = ({
       }
       const mod = event.metaKey || event.ctrlKey;
       if (mod && event.key.toLowerCase() === "z") {
-        onFocusLost == null ? void 0 : onFocusLost();
+        onCancelPendingChanges == null ? void 0 : onCancelPendingChanges();
         forceNextSyncRef.current = true;
         return true;
       }
@@ -6665,13 +7049,14 @@ var InnerEditor = ({
       return void 0;
     },
     [
-      editor,
-      editableRef,
+      isTextEditingRef,
       handleKeyboardShortcuts,
       onDeactivateTextEditing,
-      onFocusLost,
+      editor,
       onSavePreEditSelection,
-      wasTextEditingRef
+      wasTextEditingRef,
+      onCancelPendingChanges,
+      forceNextSyncRef
     ]
   );
   const ElementRenderer = (0, react_exports.useMemo)(
@@ -6774,132 +7159,6 @@ function useRichTextState() {
   };
 }
 
-// src/RichText/PureRichText/hooks/useTokenMap.ts
-var TOKEN_PATTERN = /\$([a-zA-Z_]\w*)\$/g;
-function getVizIdFromDom(containerRef) {
-  var _a, _b, _c;
-  const vizItem = (_a = containerRef.current) == null ? void 0 : _a.closest('[data-test="viz-item"]');
-  return (_c = (_b = vizItem == null ? void 0 : vizItem.dataset) == null ? void 0 : _b.id) != null ? _c : null;
-}
-function getRawContent(api, containerRef) {
-  var _a, _b, _c;
-  if (!(api == null ? void 0 : api.getDefinition)) return null;
-  const vizId = getVizIdFromDom(containerRef);
-  if (!vizId) return null;
-  try {
-    const def = api.getDefinition();
-    const rawContent = (_c = (_b = (_a = def == null ? void 0 : def.visualizations) == null ? void 0 : _a[vizId]) == null ? void 0 : _b.options) == null ? void 0 : _c.richTextContent;
-    return typeof rawContent === "string" ? rawContent : null;
-  } catch (e) {
-    return null;
-  }
-}
-function buildTokenMap(rawContent, resolvedContent) {
-  const map = /* @__PURE__ */ new Map();
-  const tokens = [];
-  let match;
-  const re = new RegExp(TOKEN_PATTERN.source, "g");
-  match = re.exec(rawContent);
-  while (match !== null) {
-    tokens.push(match[1]);
-    match = re.exec(rawContent);
-  }
-  if (tokens.length === 0) return map;
-  const escapedParts = rawContent.split(TOKEN_PATTERN);
-  let pattern = "";
-  for (let i = 0; i < escapedParts.length; i += 1) {
-    if (i % 2 === 0) {
-      pattern += escapedParts[i].replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    } else {
-      pattern += "([\\s\\S]*?)";
-    }
-  }
-  const fullMatch = new RegExp(`^${pattern}$`).exec(resolvedContent);
-  if (!fullMatch) return map;
-  for (let i = 0; i < tokens.length; i += 1) {
-    const resolved = fullMatch[i + 1];
-    if (resolved !== void 0) {
-      map.set(resolved, `$${tokens[i]}$`);
-    }
-  }
-  return map;
-}
-function restoreTokens(html, tokenMap) {
-  if (tokenMap.size === 0) return html;
-  let result = html;
-  const entries = [...tokenMap.entries()].filter(([resolved]) => resolved !== "").sort((a, b) => b[0].length - a[0].length);
-  for (const [resolved, tokenPattern] of entries) {
-    result = result.split(resolved).join(tokenPattern);
-  }
-  return result;
-}
-function wrapTokensInTree(nodes, tokenMap) {
-  if (tokenMap.size === 0) return nodes;
-  const resolvedToName = /* @__PURE__ */ new Map();
-  for (const [resolved, pattern] of tokenMap) {
-    if (resolved === "") return nodes;
-    const name = pattern.slice(1, -1);
-    resolvedToName.set(resolved, name);
-  }
-  const processNode = (node) => {
-    if (slate_exports.Text.isText(node)) {
-      return splitTextByTokens(node, resolvedToName);
-    }
-    if (slate_exports.Element.isElement(node)) {
-      const el = node;
-      return [__spreadProps(__spreadValues({}, el), { children: el.children.flatMap(processNode) })];
-    }
-    return [node];
-  };
-  return nodes.flatMap(processNode);
-}
-function splitTextByTokens(textNode, resolvedToName) {
-  const _a = textNode, { text } = _a, marks = __objRest(_a, ["text"]);
-  if (!text) return [textNode];
-  const entries = [...resolvedToName.entries()].sort((a, b) => b[0].length - a[0].length);
-  let earliestIdx = -1;
-  let matchedResolved = "";
-  let matchedName = "";
-  for (const [resolved, name] of entries) {
-    const idx = text.indexOf(resolved);
-    if (idx !== -1 && (earliestIdx === -1 || idx < earliestIdx)) {
-      earliestIdx = idx;
-      matchedResolved = resolved;
-      matchedName = name;
-    }
-  }
-  if (earliestIdx === -1) return [textNode];
-  const result = [];
-  if (earliestIdx > 0) {
-    result.push(__spreadValues({ text: text.slice(0, earliestIdx) }, marks));
-  }
-  result.push(__spreadProps(__spreadValues({ text: matchedResolved }, marks), { tokenName: matchedName }));
-  const after = text.slice(earliestIdx + matchedResolved.length);
-  if (after) {
-    const afterNode = __spreadValues({ text: after }, marks);
-    result.push(...splitTextByTokens(afterNode, resolvedToName));
-  }
-  return result;
-}
-var EMPTY_MAP = /* @__PURE__ */ new Map();
-function useTokenMap(dashboardCoreApi, containerRef, resolvedContent) {
-  const [tokenMap, setTokenMap] = (0, react_exports.useState)(EMPTY_MAP);
-  (0, react_exports.useEffect)(() => {
-    const raw = getRawContent(dashboardCoreApi, containerRef);
-    if (!raw) {
-      setTokenMap((prev) => prev.size === 0 ? prev : EMPTY_MAP);
-      return;
-    }
-    const map = buildTokenMap(raw, resolvedContent);
-    setTokenMap(map);
-  }, [dashboardCoreApi, resolvedContent, containerRef]);
-  const restoreTokensInHtml = (0, react_exports.useMemo)(() => {
-    if (tokenMap.size === 0) return (html) => html;
-    return (html) => restoreTokens(html, tokenMap);
-  }, [tokenMap]);
-  return { restoreTokensInHtml, tokenMap };
-}
-
 // src/RichText/PureRichText/hooks/useContentSave.ts
 var TYPING_IDLE_MS = 300;
 function useContentSave({
@@ -6969,7 +7228,14 @@ function useContentSave({
       pendingHtmlRef.current = null;
     }
   }, [save]);
-  return { handleContentChange, flushPendingChanges, recentSavesRef };
+  const cancelPendingChanges = (0, react_exports.useCallback)(() => {
+    if (idleTimerRef.current) {
+      clearTimeout(idleTimerRef.current);
+      idleTimerRef.current = null;
+    }
+    pendingHtmlRef.current = null;
+  }, []);
+  return { handleContentChange, flushPendingChanges, cancelPendingChanges, recentSavesRef };
 }
 
 // src/RichText/PureRichText/hooks/useDashboardKeyboardNav.ts
@@ -7081,7 +7347,12 @@ function useSidebarAndEditActivation({
       var _a, _b;
       return (_b = (_a = containerRef.current) == null ? void 0 : _a.closest('[data-test="viz-item"]')) != null ? _b : null;
     };
-    const isTargetInSidebar = (target, vizItem) => !(vizItem == null ? void 0 : vizItem.contains(target)) && Boolean(
+    const isTargetInSidebar = (target, vizItem) => !(vizItem == null ? void 0 : vizItem.contains(target)) && // The link popover (Cmd+K) owns its own single-press Escape handling
+    // (useLinkHandlers' handleLinkKeyDown); it must not be treated as
+    // "sidebar" here, or this capture-phase handler intercepts Escape
+    // first and only returns focus to the editor, requiring a second
+    // Escape to actually close the popover.
+    !target.closest('[data-test="link-popover-content"]') && Boolean(
       target.closest('[data-test="sidebar-content"]') || target.closest('[data-test="header"]') || target.id === "configuration-back-button" || target.closest("#configuration-back-button") || target.closest('[data-test="popover"]') || target.closest("[data-test-popover-id]")
     );
     const handleEscapeFromSidebar = (e) => {
@@ -7201,6 +7472,152 @@ function useIsActiveRichText(id) {
     () => getActiveRichTextId() === id
   );
 }
+var identityRestore = (html) => html;
+function resolveTokenDisplay(args) {
+  const { isEditMode, previewTokenValues, resolvedContent, rawContent } = args;
+  const showResolvedTokens = !isEditMode || previewTokenValues;
+  const editorSourceContent = rawContent != null ? rawContent : resolvedContent;
+  return { editorSourceContent, showResolvedTokens };
+}
+function resolveFontSize(defaultTextStyles, fontSize, customFontSize) {
+  if (defaultTextStyles == null ? void 0 : defaultTextStyles.fontSize) {
+    const dtsFs = defaultTextStyles.fontSize;
+    if (typeof dtsFs === "string" && dtsFs.endsWith("px")) {
+      return { effectiveFontSize: "custom", effectiveCustomFontSize: Number.parseInt(dtsFs, 10) };
+    }
+  }
+  return { effectiveFontSize: fontSize, effectiveCustomFontSize: customFontSize };
+}
+function handleTokenToggle(args) {
+  const { editor, richTextContent, recentSavesRef, cancelPendingChanges, forceNextSyncRef } = args;
+  forceNextSyncRef.current = true;
+  if (!editor) return { pendingSave: null, editorSourceOverride: null };
+  const currentRawHtml = slateToHtml(editor.children);
+  if (currentRawHtml !== richTextContent) {
+    recentSavesRef.current.add(currentRawHtml);
+  }
+  cancelPendingChanges();
+  return {
+    pendingSave: currentRawHtml === richTextContent ? null : currentRawHtml,
+    editorSourceOverride: currentRawHtml
+  };
+}
+function resolvePoint(editor, absOffset, isStart = false) {
+  const point = absOffsetToPoint(editor, absOffset, isStart);
+  if (point) return point;
+  try {
+    return slate_exports.Editor.end(editor, []);
+  } catch (e) {
+    return null;
+  }
+}
+function moveCaretPastTokenIfNeeded(editor) {
+  if (!editor.selection || !slate_exports.Editor.isEditor(editor)) return;
+  const { anchor, focus } = editor.selection;
+  const isCollapsed = anchor.offset === focus.offset && anchor.path.join(",") === focus.path.join(",");
+  if (!isCollapsed) return;
+  try {
+    const [node] = slate_exports.Editor.node(editor, anchor);
+    const custom = node;
+    if (!slate_exports.Text.isText(node) || !(custom.tokenName || custom.isEscapedDollar)) return;
+    const endPoint = { path: anchor.path, offset: node.text.length };
+    const blockPath = anchor.path.slice(0, -1);
+    const afterToken = slate_exports.Editor.after(editor, endPoint);
+    const staysInBlock = afterToken && afterToken.path.length > blockPath.length && afterToken.path.slice(0, blockPath.length).join(",") === blockPath.join(",");
+    editor.selection = {
+      anchor: staysInBlock ? afterToken : endPoint,
+      focus: staysInBlock ? afterToken : endPoint
+    };
+  } catch (e) {
+  }
+}
+function adjustAbsOffsetForResolution(absOffset, tokenResolvedLengths) {
+  let adjustment = 0;
+  for (const { absStart, rawLen, resolvedLen } of tokenResolvedLengths) {
+    if (absOffset > absStart + rawLen - 1) {
+      adjustment += resolvedLen - rawLen;
+    } else if (absOffset > absStart) {
+      adjustment += resolvedLen - rawLen;
+      break;
+    }
+  }
+  return absOffset + adjustment;
+}
+function displayForToken(tokenName, nameToValue) {
+  const value = nameToValue.get(tokenName);
+  return value !== void 0 && value !== "" ? value : `$${tokenName}$`;
+}
+function bareTokensInPlainText(text, baseOffset, nameToValue) {
+  var _a;
+  const result = [];
+  const re = new RegExp(TOKEN_OR_ESCAPE_PATTERN.source, "g");
+  let m = re.exec(text);
+  while (m !== null) {
+    const rawPattern = m[0];
+    const tokenName = m[1];
+    const resolvedValue = tokenName === void 0 ? "$" : (_a = nameToValue.get(tokenName)) != null ? _a : rawPattern;
+    result.push({
+      absStart: baseOffset + m.index,
+      rawLen: rawPattern.length,
+      resolvedLen: resolvedValue.length
+    });
+    m = re.exec(text);
+  }
+  return result;
+}
+function bareTokensInNode(node, runningOffset, nameToValue) {
+  const { text } = node;
+  if (node.tokenName) {
+    if (!node.isRawToken) return [];
+    const target = displayForToken(node.tokenName, nameToValue);
+    return [{ absStart: runningOffset, rawLen: text.length, resolvedLen: target.length }];
+  }
+  if (node.isEscapedDollar) {
+    return text === "$$" ? [{ absStart: runningOffset, rawLen: text.length, resolvedLen: 1 }] : [];
+  }
+  return bareTokensInPlainText(text, runningOffset, nameToValue);
+}
+function collectBareTokens(editor, nameToValue) {
+  const result = [];
+  let runningOffset = 0;
+  for (const [textNode] of slate_exports.Editor.nodes(editor, { at: [], match: (n) => slate_exports.Text.isText(n) })) {
+    result.push(...bareTokensInNode(textNode, runningOffset, nameToValue));
+    runningOffset += textNode.text.length;
+  }
+  return result;
+}
+function buildAutoResolveCallback(args) {
+  const { slateEditorRef, nameToValue } = args;
+  return () => {
+    const editor = slateEditorRef.current;
+    if (!editor) return;
+    const bareTokenInfo = collectBareTokens(editor, nameToValue);
+    if (bareTokenInfo.length === 0) return;
+    const rawAnchorAbs = editor.selection ? pointToAbsOffset(editor, editor.selection.anchor) : null;
+    const rawFocusAbs = editor.selection ? pointToAbsOffset(editor, editor.selection.focus) : null;
+    const newTree = wrapRawTokensInTree(editor.children, nameToValue);
+    const anchorAbs = rawAnchorAbs === null ? null : adjustAbsOffsetForResolution(rawAnchorAbs, bareTokenInfo);
+    const focusAbs = rawFocusAbs === null ? null : adjustAbsOffsetForResolution(rawFocusAbs, bareTokenInfo);
+    editor.children = newTree;
+    if (anchorAbs !== null && focusAbs !== null) {
+      const collapsed = anchorAbs === focusAbs;
+      const anchor = resolvePoint(editor, anchorAbs, !collapsed);
+      const focus = resolvePoint(editor, focusAbs, false);
+      editor.selection = anchor && focus ? { anchor, focus } : null;
+    } else {
+      editor.selection = null;
+    }
+    moveCaretPastTokenIfNeeded(editor);
+    const selectionAfterResolve = editor.selection;
+    editor.onChange();
+    if (selectionAfterResolve) {
+      try {
+        slate_exports.Transforms.select(editor, selectionAfterResolve);
+      } catch (e) {
+      }
+    }
+  };
+}
 var PureRichText = react_exports.forwardRef((props, ref) => {
   var _a, _b, _c, _d;
   const theme = (0, themes_exports.useSplunkTheme)();
@@ -7225,7 +7642,9 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
     italic = false,
     underline = false,
     strikethrough = false,
-    defaultTextStyles
+    defaultTextStyles,
+    previewTokenValues = false,
+    richTextTokenMetadata: richTextTokenMetadataProp
   } = props;
   const effectiveFontColorFromStyles = (defaultTextStyles == null ? void 0 : defaultTextStyles.color) || fontColor;
   const effectiveHighlightColor = (defaultTextStyles == null ? void 0 : defaultTextStyles.backgroundColor) || highlightColor;
@@ -7234,21 +7653,19 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
   const effectiveItalic = (_b = defaultTextStyles == null ? void 0 : defaultTextStyles.italic) != null ? _b : italic;
   const effectiveUnderline = (_c = defaultTextStyles == null ? void 0 : defaultTextStyles.underline) != null ? _c : underline;
   const effectiveStrikethrough = (_d = defaultTextStyles == null ? void 0 : defaultTextStyles.strikethrough) != null ? _d : strikethrough;
-  let effectiveFontSize = fontSize;
-  let effectiveCustomFontSize = customFontSize;
-  if (defaultTextStyles == null ? void 0 : defaultTextStyles.fontSize) {
-    const dtsFs = defaultTextStyles.fontSize;
-    if (typeof dtsFs === "string" && dtsFs.endsWith("px")) {
-      effectiveCustomFontSize = parseInt(dtsFs, 10);
-      effectiveFontSize = "custom";
-    }
-  }
+  const { effectiveFontSize, effectiveCustomFontSize } = resolveFontSize(
+    defaultTextStyles,
+    fontSize,
+    customFontSize
+  );
   const effectiveFontColor = effectiveFontColorFromStyles || themeTextColor;
   const isEditMode = mode === "edit";
   const containerRef = (0, react_exports.useRef)(null);
   const slateEditorRef = (0, react_exports.useRef)(null);
   const updateActiveStylesFnRef = (0, react_exports.useRef)(null);
   const clearFakeHighlightRef = (0, react_exports.useRef)(null);
+  const forceNextSyncRef = (0, react_exports.useRef)(false);
+  const transformTreeRef = (0, react_exports.useRef)(null);
   const setContainerRef = (0, react_exports.useCallback)(
     (node) => {
       containerRef.current = node;
@@ -7334,26 +7751,71 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
   const borderStyle = borderConfig.style || "solid";
   const borderRadius = borderConfig.radius || 0;
   const paddingValues = parsePadding(padding);
-  const { restoreTokensInHtml, tokenMap } = useTokenMap(dashboardCoreApi, containerRef, richTextContent);
-  const { handleContentChange, flushPendingChanges, recentSavesRef } = useContentSave({
-    richTextContent,
-    onOptionsChange,
-    restoreTokensInHtml
+  const { nameToValue, rawContent } = useTokenMap(richTextContent, richTextTokenMetadataProp);
+  const { editorSourceContent, showResolvedTokens } = resolveTokenDisplay({
+    isEditMode,
+    previewTokenValues,
+    resolvedContent: richTextContent,
+    rawContent
   });
+  const { handleContentChange, flushPendingChanges, cancelPendingChanges, recentSavesRef } = useContentSave(
+    {
+      richTextContent: editorSourceContent,
+      onOptionsChange,
+      restoreTokensInHtml: identityRestore
+    }
+  );
+  const prevShowResolvedRef = (0, react_exports.useRef)(showResolvedTokens);
+  const pendingToggleSaveRef = (0, react_exports.useRef)(null);
+  let editorSourceOverride = null;
+  if (prevShowResolvedRef.current !== showResolvedTokens) {
+    prevShowResolvedRef.current = showResolvedTokens;
+    const result = handleTokenToggle({
+      editor: slateEditorRef.current,
+      richTextContent,
+      recentSavesRef,
+      cancelPendingChanges,
+      forceNextSyncRef
+    });
+    pendingToggleSaveRef.current = result.pendingSave;
+    editorSourceOverride = result.editorSourceOverride;
+  }
+  (0, react_exports.useEffect)(() => {
+    const html = pendingToggleSaveRef.current;
+    pendingToggleSaveRef.current = null;
+    if (html !== null) {
+      onOptionsChange == null ? void 0 : onOptionsChange({ richTextContent: html });
+    }
+  }, [showResolvedTokens]);
+  transformTreeRef.current = (tree) => wrapRawTokensInTree(tree, showResolvedTokens ? nameToValue : void 0);
+  const autoResolveTokensRef = (0, react_exports.useRef)(null);
+  autoResolveTokensRef.current = showResolvedTokens ? buildAutoResolveCallback({ slateEditorRef, nameToValue }) : null;
+  const prevNameToValueRef = (0, react_exports.useRef)(nameToValue);
+  (0, react_exports.useEffect)(() => {
+    const prev = prevNameToValueRef.current;
+    prevNameToValueRef.current = nameToValue;
+    if (nameToValue.size > 0 && nameToValue !== prev && autoResolveTokensRef.current) {
+      autoResolveTokensRef.current();
+    }
+  }, [nameToValue]);
+  const effectiveEditorSourceContent = editorSourceOverride != null ? editorSourceOverride : editorSourceContent;
   const initialValueRef = (0, react_exports.useRef)(EMPTY_SLATE_VALUE);
+  const initialValueModeRef = (0, react_exports.useRef)(showResolvedTokens);
   const initialValue = (0, react_exports.useMemo)(() => {
-    if (recentSavesRef.current.has(richTextContent) || isTextEditingRef.current) {
+    const modeChanged = initialValueModeRef.current !== showResolvedTokens;
+    initialValueModeRef.current = showResolvedTokens;
+    if (!modeChanged && (recentSavesRef.current.has(effectiveEditorSourceContent) || isTextEditingRef.current)) {
       return initialValueRef.current;
     }
-    if (!richTextContent) {
+    if (!effectiveEditorSourceContent) {
       initialValueRef.current = EMPTY_SLATE_VALUE;
       return EMPTY_SLATE_VALUE;
     }
-    const tree = htmlToSlate(richTextContent);
-    const result = wrapTokensInTree(tree, tokenMap);
+    const tree = htmlToSlate(effectiveEditorSourceContent);
+    const result = wrapRawTokensInTree(tree, showResolvedTokens ? nameToValue : void 0);
     initialValueRef.current = result;
     return result;
-  }, [richTextContent, tokenMap]);
+  }, [effectiveEditorSourceContent, nameToValue, showResolvedTokens]);
   const handleFocusGained = (0, react_exports.useCallback)(
     (editable, slateEditor) => {
       registerActiveRichText(instanceId, editable, slateEditor);
@@ -7467,7 +7929,7 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
         safeSelectEnd(slateEditor);
       }
     },
-    [hasEventHandlers, isEditMode, isTextEditing, onRichtextClick]
+    [activateTextEditing, hasEventHandlers, instanceId, isEditMode, isTextEditing, onRichtextClick]
   );
   return /* @__PURE__ */ react_exports.createElement(
     PureRichTextProvider,
@@ -7530,7 +7992,7 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
           InnerEditor,
           {
             initialValue,
-            richTextContent,
+            richTextContent: effectiveEditorSourceContent,
             isEditMode,
             isTextEditing,
             containerRef,
@@ -7538,6 +8000,7 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
             onContentChange: handleContentChange,
             onFocusGained: handleFocusGained,
             onFocusLost: handleFocusLost,
+            onCancelPendingChanges: cancelPendingChanges,
             richTextState,
             onEditorReady: (ed) => {
               slateEditorRef.current = ed;
@@ -7545,6 +8008,9 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
             updateActiveStylesRef: updateActiveStylesFnRef,
             clearFakeHighlightRef,
             recentSavesRef,
+            forceNextSyncRef,
+            transformTreeRef,
+            autoResolveTokensRef,
             onAnnouncement: handleAnnouncement
           }
         )
@@ -7610,7 +8076,7 @@ function buildDefaultTextStyles(pickedOptions, options) {
   if (pickedOptions.strikethrough) styles.strikethrough = true;
   return styles;
 }
-function resolveFontSize(defaultTextStyles, pickedOptions) {
+function resolveFontSize2(defaultTextStyles, pickedOptions) {
   let fontSize = defaultTextStyles.fontSize || pickedOptions.fontSize;
   let customFontSize = defaultTextStyles.customFontSize || pickedOptions.customFontSize;
   if (typeof fontSize === "string" && fontSize.endsWith("px")) {
@@ -7625,16 +8091,17 @@ var computeVizProps = ({
   onRichtextClick,
   onOptionsChange,
   richTextContent: richTextContentProp,
-  hasEventHandlers = false
+  hasEventHandlers = false,
+  richTextTokenMetadata
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const pickedOptions = pickValidOptions(options);
   const border = buildBorderConfig(pickedOptions, options);
   const defaultTextStyles = buildDefaultTextStyles(pickedOptions, options);
   const fontColor = defaultTextStyles.color || pickedOptions.fontColor;
   const highlightColor = defaultTextStyles.highlightColor || defaultTextStyles.backgroundColor || pickedOptions.highlightColor;
   const fontFamily = defaultTextStyles.fontFamily || pickedOptions.fontFamily;
-  const { fontSize, customFontSize } = resolveFontSize(defaultTextStyles, pickedOptions);
+  const { fontSize, customFontSize } = resolveFontSize2(defaultTextStyles, pickedOptions);
   const bold = (_b = (_a = defaultTextStyles.bold) != null ? _a : pickedOptions.bold) != null ? _b : false;
   const italic = (_d = (_c = defaultTextStyles.italic) != null ? _c : pickedOptions.italic) != null ? _d : false;
   const underline = (_f = (_e = defaultTextStyles.underline) != null ? _e : pickedOptions.underline) != null ? _f : false;
@@ -7659,7 +8126,9 @@ var computeVizProps = ({
     italic,
     underline,
     strikethrough,
-    hasEventHandlers
+    hasEventHandlers,
+    previewTokenValues: (_i = pickedOptions.previewTokenValues) != null ? _i : false,
+    richTextTokenMetadata
   };
 };
 var RichText = withDashboardViz_default({
@@ -7668,6 +8137,7 @@ var RichText = withDashboardViz_default({
   vizConfig: config_default,
   disableEditModeCover: true
 });
+RichText.tokenMetadataProp = "richTextTokenMetadata";
 var { themes: themes2 } = config_default;
 var config2 = config_default;
 var RichText_default3 = RichText;