@splunk/visualizations 28.7.0 → 28.9.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
@@ -275,6 +288,11 @@ var config = {
   events: {
     "richtext.click": {
       description: "triggered when user clicks on rich text area not formatted as a link"
+    },
+    "link.open": {
+      description: "triggered when the user activates a link; payload carries the resolved url",
+      // Default behavior: fires ungated by event handlers and in edit mode too.
+      source: "default"
     }
   },
   supports: ["dynamic-options" /* DYNAMIC_OPTIONS */, "events" /* EVENTS */],
@@ -537,7 +555,10 @@ var useSortingParams = ({ requestParams, onRequestParamsChange }) => {
     onSort = (e, { sortKey, sortDir }) => {
       if (typeof sortKey === "string") {
         const nextSortDir = (0, lodash_exports.has)(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : "none";
-        onRequestParamsChange(__spreadValues(__spreadValues({}, requestParams), { offset: 0, sort: { [sortKey]: nextSortDir } }));
+        onRequestParamsChange(__spreadProps(__spreadValues({}, requestParams), {
+          offset: 0,
+          sort: { [sortKey]: nextSortDir }
+        }));
       } else {
         onRequestParamsChange(requestParams);
       }
@@ -672,7 +693,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.9.0 - 96b03188d"
 })`
     position: relative;
     width: 100%;
@@ -771,7 +792,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.7.0 - d7b18cab6",
+        "data-splunk-visualization-version": "28.9.0 - 96b03188d",
         width,
         height,
         backgroundColor
@@ -792,6 +813,14 @@ var shouldShowIconPlaceholder = (dataSources, loading = false) => {
   const noFields = fields === void 0;
   return loading || noData || noFields;
 };
+var PlaceholderContainer = styled_components_default.div`
+    /* The inline token color wins when supported. Older browsers discard an
+       unsupported oklch value and retain this inherited fallback instead. */
+    color: ${(0, themes_exports.pick)({
+  dark: "#fafafa",
+  light: "#2c2c2c"
+})};
+`;
 var IconPlaceholder = (props) => {
   const {
     width = SplunkVisualization_default.defaults.width,
@@ -806,7 +835,6 @@ var IconPlaceholder = (props) => {
       style: {
         left: "50%",
         top: "50%",
-        color: iconColor,
         opacity: 0.15,
         position: "absolute",
         transform: "translate(-50%, -50%)"
@@ -816,7 +844,14 @@ var IconPlaceholder = (props) => {
       "data-test": "icon-placeholder"
     });
   }
-  return /* @__PURE__ */ react_exports.createElement("div", { style: { width, height, background: backgroundColor } }, content);
+  return /* @__PURE__ */ react_exports.createElement(
+    PlaceholderContainer,
+    {
+      "data-test": "icon-placeholder-container",
+      style: { width, height, background: backgroundColor, color: iconColor }
+    },
+    content
+  );
 };
 var IconPlaceholder_default = FixedSizeContainer_default(IconPlaceholder);
 
@@ -825,7 +860,7 @@ var withPlaceholder = (Visualization, useIconPlaceholder = shouldShowIconPlaceho
   const { config: config3 } = Visualization;
   const { themes: themes3 } = config3;
   const Wrapper = (props) => {
-    var _a, _b;
+    var _a2, _b;
     const {
       dataSources,
       loading,
@@ -834,7 +869,7 @@ var withPlaceholder = (Visualization, useIconPlaceholder = shouldShowIconPlaceho
       width = SplunkVisualization_default.defaults.width
     } = props;
     const showPlaceholder = useIconPlaceholder(dataSources, loading, options);
-    const icon = (_a = config3.placeholderIcon) != null ? _a : config3.icon;
+    const icon = (_a2 = config3.placeholderIcon) != null ? _a2 : config3.icon;
     const iconColor = variables_default.contentColorActive(props);
     const bgColorFromTheme = (0, colorUtils_exports.isColor)(options == null ? void 0 : options.backgroundColor) ? options == null ? void 0 : options.backgroundColor : (_b = themes3 == null ? void 0 : themes3.defaultBackgroundColor) == null ? void 0 : _b.call(themes3, props);
     if (config3.supports.includes("placeholder" /* PLACEHOLDER */) && showPlaceholder) {
@@ -890,7 +925,7 @@ var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices)
     let avgY = 0;
     let avgRangeStart = Math.floor((i + 1) * every) + 1;
     let avgRangeEnd = Math.floor((i + 2) * every) + 1;
-    avgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
+    avgRangeEnd = Math.min(avgRangeEnd, dataLength);
     const avgRangeLength = avgRangeEnd - avgRangeStart;
     for (; avgRangeStart < avgRangeEnd; avgRangeStart++) {
       avgX += Number(data[avgRangeStart][0]);
@@ -925,9 +960,9 @@ var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices)
 };
 var strictlyCoerceYColumn = (column, options) => {
   const isNullCoercionEnabled = options.nullValueDisplay === "zero";
-  const canLooselyCoerceSomeValues = column.findIndex(
+  const canLooselyCoerceSomeValues = column.some(
     (value) => (0, numberUtils_exports.startsWithNumber)(`${value}`) || isNullCoercionEnabled && value === null
-  ) >= 0;
+  );
   const coercedColumn = [];
   const canDownsampleColumn = !column.some((value) => {
     const coercedValue = Number(value);
@@ -946,7 +981,7 @@ var strictlyCoerceYColumn = (column, options) => {
 };
 var strictlyCoerceXColumn = (column, fieldType) => {
   if (fieldType === "number") {
-    const coercedXColumn = column.map((xValue) => Number(xValue));
+    const coercedXColumn = column.map(Number);
     if (isColumnStrictlyIncreasing(coercedXColumn, fieldType)) {
       return coercedXColumn;
     }
@@ -959,8 +994,8 @@ var strictlyCoerceXColumn = (column, fieldType) => {
   return [];
 };
 var isDownsamplingEnabledForViz = ({ vizConfig }) => {
-  var _a;
-  return (_a = vizConfig.supports) == null ? void 0 : _a.includes("downsampling" /* DOWNSAMPLING */);
+  var _a2;
+  return (_a2 = vizConfig.supports) == null ? void 0 : _a2.includes("downsampling" /* DOWNSAMPLING */);
 };
 var isColumnStrictlyIncreasing = (column, fieldType) => {
   return column.every((value, index) => {
@@ -984,9 +1019,9 @@ var tryToCoerceAllDisplayedFields = (ds, xField, yFields, fieldTypes, options) =
   let xColumn = [];
   const yColumns = [];
   const canDownsample = !ds.data.fields.some((field, index) => {
-    var _a;
+    var _a2;
     const fieldName = getFieldName(field);
-    const fieldType = (_a = fieldTypes[index]) != null ? _a : "unknown";
+    const fieldType = (_a2 = fieldTypes[index]) != null ? _a2 : "unknown";
     const column = ds.data.columns[index];
     let hasDisplayedColumnThatCantBeDownsampled = false;
     if (fieldName === xField) {
@@ -1028,9 +1063,9 @@ var pickIndicesFromDataSource = (ds, indices) => {
   });
 };
 var downsampleDataSources = ({ dataSources, threshold, options }) => {
-  var _a, _b, _c;
+  var _a2, _b, _c;
   const primaryDS = dataSources == null ? void 0 : dataSources.primary;
-  const numPoints = (_c = (_b = (_a = primaryDS == null ? void 0 : primaryDS.data) == null ? void 0 : _a.columns[0]) == null ? void 0 : _b.length) != null ? _c : 0;
+  const numPoints = (_c = (_b = (_a2 = primaryDS == null ? void 0 : primaryDS.data) == null ? void 0 : _a2.columns[0]) == null ? void 0 : _b.length) != null ? _c : 0;
   if (Number.isNaN(threshold) || numPoints <= threshold || threshold < 2) {
     return dataSources;
   }
@@ -1091,14 +1126,14 @@ var useGetXAndYFields = ({
   dataSources
 }) => {
   const { dataSourcesWithOnlyOnePoint, dataFrameWithOnlyOnePoint } = (0, react_exports.useMemo)(() => {
-    var _a, _b, _c;
+    var _a2, _b, _c;
     if (!shouldEvaluateDSL) {
       return {
         dataSourcesWithOnlyOnePoint: null,
         dataFrameWithOnlyOnePoint: null
       };
     }
-    if (!((_c = (_b = (_a = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.columns) == null ? void 0 : _c.length)) {
+    if (!((_c = (_b = (_a2 = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a2.data) == null ? void 0 : _b.columns) == null ? void 0 : _c.length)) {
       return {
         dataSourcesWithOnlyOnePoint: null,
         dataFrameWithOnlyOnePoint: null
@@ -1251,10 +1286,10 @@ var FeatureFlags_default = "default" in defaultImport27 ? defaultImport27.defaul
 
 // src/common/utils/featureFlagUtils.ts
 var getFeatureFlag = (context, flagName) => {
-  if (context && Object.keys(context).find((key) => key === flagName)) {
+  if (context && Object.keys(context).includes(flagName)) {
     return context[flagName];
   }
-  if (Object.keys(FeatureFlags_default).find((key) => key === flagName)) {
+  if (Object.keys(FeatureFlags_default).includes(flagName)) {
     return FeatureFlags_default[flagName];
   }
   return false;
@@ -1360,16 +1395,16 @@ var triangleEventAnnotationRenderer = ({
 var shouldEnableSearchZoom = (eventHandlers = [], xField = "") => {
   const rangeSelectEventHandler = eventHandlers.find(
     (eventHandler) => {
-      var _a;
-      return (_a = eventHandler.options.events) == null ? void 0 : _a.includes("range.select");
+      var _a2;
+      return (_a2 = eventHandler.options.events) == null ? void 0 : _a2.includes("range.select");
     }
   );
   const xAxisIsTime = xField === "_time";
   return !!rangeSelectEventHandler && xAxisIsTime;
 };
-var canvasSupportedTimeSeriesCharts = ["splunk.line", "splunk.area"];
+var canvasSupportedTimeSeriesCharts = /* @__PURE__ */ new Set(["splunk.line", "splunk.area"]);
 var isTimeSeriesCanvasRenderSupported = (vizConfigKey) => {
-  return canvasSupportedTimeSeriesCharts.includes(vizConfigKey);
+  return canvasSupportedTimeSeriesCharts.has(vizConfigKey);
 };
 var filterChartDataFromInternalFields = (chartData) => {
   const { fields, columns } = chartData;
@@ -1385,7 +1420,7 @@ var filterChartDataFromInternalFields = (chartData) => {
   return { fields: filteredFields, columns: filteredColumns };
 };
 var convert2DArrayToNumbers = (arr) => {
-  return arr.map((subArray) => subArray.map((element) => parseFloat(element)));
+  return arr.map((subArray) => subArray.map((element) => Number.parseFloat(element)));
 };
 var parseAxisValue = (val) => {
   if (val === void 0 || val === null || val === "auto" || val === "") {
@@ -1423,6 +1458,7 @@ var getLegend = (props) => {
       return (0, visualization_canvas_exports.TopLegendFactory)(__spreadValues({
         wrap: true
       }, commonLegendProps));
+    // Note: By default, use right legend
     default:
       return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({}, commonLegendProps));
   }
@@ -1534,7 +1570,7 @@ var getY2Scale = (field, y2fields, overlayFields) => {
   return assignToY2 ? "y2" : "y";
 };
 var getSeriesOverrides = (opts) => {
-  var _a;
+  var _a2;
   const {
     yfields,
     y2fields,
@@ -1555,20 +1591,20 @@ var getSeriesOverrides = (opts) => {
   let spanGaps;
   if (nullValueMode === "gaps") {
     spanGaps = false;
-  } else if (nullValueMode != null) {
-    spanGaps = true;
-  } else {
+  } else if (nullValueMode == null) {
     spanGaps = void 0;
+  } else {
+    spanGaps = true;
   }
   const replaceNullsWithZero = nullValueMode === "zero" ? true : void 0;
   const isAreaChart = type === "area";
   const isStacked = isAreaChart && (stackMode === "stacked" || stackMode === "stacked100");
   const areaFields = isAreaChart ? yfields.filter((f) => !(overlayFields == null ? void 0 : overlayFields.includes(f))) : yfields;
-  const overlayFieldsInOrder = (_a = overlayFields == null ? void 0 : overlayFields.filter((f) => yfields.includes(f))) != null ? _a : [];
+  const overlayFieldsInOrder = (_a2 = overlayFields == null ? void 0 : overlayFields.filter((f) => yfields.includes(f))) != null ? _a2 : [];
   const orderedFields = isAreaChart ? [...areaFields, ...overlayFieldsInOrder] : yfields;
   orderedFields.forEach((field) => {
-    var _a2;
-    const isOverlay = (_a2 = overlayFields == null ? void 0 : overlayFields.includes(field)) != null ? _a2 : false;
+    var _a3;
+    const isOverlay = (_a3 = overlayFields == null ? void 0 : overlayFields.includes(field)) != null ? _a3 : false;
     const isPercent = isAreaChart && stackMode === "stacked100" && !isOverlay;
     const shouldHideAreaOutline = isAreaChart && showLines === false && !isOverlay;
     seriesConfig[field] = {
@@ -1761,11 +1797,11 @@ var handleLegendClick = (chartEvent, onClick, trellisKey, trellisSplitBy) => {
   }
 };
 var handleRangeSelection = (rangeEvent, onSelect, chartData, trellisKey, trellisSplitBy) => {
-  var _a;
+  var _a2;
   if (!rangeEvent) {
     return;
   }
-  const xData = ((_a = chartData == null ? void 0 : chartData.columns) == null ? void 0 : _a[0]) || [];
+  const xData = ((_a2 = chartData == null ? void 0 : chartData.columns) == null ? void 0 : _a2[0]) || [];
   const { startXIndex, endXIndex } = findRangeIndices(xData, rangeEvent.start, rangeEvent.end);
   const payload = {
     startXIndex,
@@ -1783,8 +1819,8 @@ var handleRangeSelection = (rangeEvent, onSelect, chartData, trellisKey, trellis
   }
 };
 var handleRangeZoom = (rangeEvent, onSelect, chartData, trellisKey, trellisSplitBy) => {
-  var _a;
-  const xData = ((_a = chartData == null ? void 0 : chartData.columns) == null ? void 0 : _a[0]) || [];
+  var _a2;
+  const xData = ((_a2 = chartData == null ? void 0 : chartData.columns) == null ? void 0 : _a2[0]) || [];
   const { startXIndex, endXIndex } = findRangeIndices(xData, rangeEvent.start, rangeEvent.end);
   const payload = {
     startXIndex,
@@ -1844,7 +1880,7 @@ var getYAxisTitles = ({
 };
 var TimeSeriesChartWrapper = (props) => {
   var _b, _c, _d;
-  const _a = props, {
+  const _a2 = props, {
     width,
     height,
     chartData,
@@ -1870,7 +1906,7 @@ var TimeSeriesChartWrapper = (props) => {
     y2AxisLineVisibility,
     showYAxisWithZero: showYAxisWithZeroFromProps,
     showY2AxisWithZero: showY2AxisWithZeroFromProps
-  } = _a, otherOptions = __objRest(_a, [
+  } = _a2, otherOptions = __objRest(_a2, [
     "width",
     "height",
     "chartData",
@@ -1989,11 +2025,11 @@ var TimeSeriesChartWrapper = (props) => {
     y2AxisMajorUnitFromSimpleXML,
     y2AxisMajorTickInterval
   );
-  const xAxisMajorTickSizeNum = xAxisMajorTickSize != null ? Number(xAxisMajorTickSize) : void 0;
-  const yAxisMajorTickSizeNum = yAxisMajorTickSize != null ? Number(yAxisMajorTickSize) : void 0;
-  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize != null ? Number(y2AxisMajorTickSize) : void 0;
-  const yAxisMinorTickSizeNum = yAxisMinorTickSize != null ? Number(yAxisMinorTickSize) : void 0;
-  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize != null ? Number(y2AxisMinorTickSize) : void 0;
+  const xAxisMajorTickSizeNum = xAxisMajorTickSize == null ? void 0 : Number(xAxisMajorTickSize);
+  const yAxisMajorTickSizeNum = yAxisMajorTickSize == null ? void 0 : Number(yAxisMajorTickSize);
+  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize == null ? void 0 : Number(y2AxisMajorTickSize);
+  const yAxisMinorTickSizeNum = yAxisMinorTickSize == null ? void 0 : Number(yAxisMinorTickSize);
+  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize == null ? void 0 : Number(y2AxisMinorTickSize);
   const areaOpacityForCanvas = getAreaOpacityForCanvas(areaOpacity);
   const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
   const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
@@ -2405,6 +2441,76 @@ var buildEventCallbackProps = (supportedEvents, evaluatedOptionsToUse, onEventTr
   });
   return result;
 };
+var buildAllEventCallbackProps = (events, evaluatedOptionsToUse, onEventTrigger, { supportsEvents, hasEventHandlers, mode }) => {
+  if (!supportsEvents) return {};
+  const defaultEvents = {};
+  const userEvents = {};
+  Object.entries(events || {}).forEach(([eventKey, eventConfig]) => {
+    (eventConfig.source === "default" ? defaultEvents : userEvents)[eventKey] = eventConfig;
+  });
+  const userProps = hasEventHandlers && mode === "view" ? buildEventCallbackProps(userEvents, evaluatedOptionsToUse, onEventTrigger) : {};
+  return __spreadValues(__spreadValues({}, userProps), buildEventCallbackProps(defaultEvents, evaluatedOptionsToUse, onEventTrigger));
+};
+var applyContextTimezone = (localeContext) => {
+  if (localeContext.serializedTimezone && !moment_default.getDefaultSplunkTimezone()) {
+    moment_default.setDefaultSplunkTimezone(localeContext.serializedTimezone);
+  }
+};
+var getAsyncOptionsEvaluationParams = ({
+  visualizationID,
+  props,
+  optionsToEvaluate,
+  downsampledDataSources,
+  vizConfig,
+  bypassCloneDeepOptionScope,
+  lazyLoadingDataFrame
+}) => {
+  return {
+    visualizationID,
+    props,
+    options: __spreadValues({}, optionsToEvaluate),
+    dataSources: downsampledDataSources,
+    theme: vizConfig.themes,
+    bypassCloneDeepOptionScope,
+    lazyLoadingDataFrame
+  };
+};
+var evaluateOptionsSync = ({
+  optionsToEvaluate,
+  downsampledDataSources,
+  dataSourcesInState,
+  dataFramesInState,
+  setDataSourcesInState,
+  setDataFramesInState,
+  computeDataFrames,
+  featureFlagContext,
+  themeFunc
+}) => {
+  let dataFrames = dataFramesInState;
+  if (downsampledDataSources !== dataSourcesInState) {
+    setDataSourcesInState(downsampledDataSources);
+    dataFrames = Options_exports.Options.dataFrameFromDataSource(
+      downsampledDataSources,
+      getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
+    );
+    setDataFramesInState(dataFrames);
+  }
+  let mergedFrames = dataFrames;
+  if (computeDataFrames && dataFrames) {
+    const derivedFrames = computeDataFrames({
+      dataSources: downsampledDataSources,
+      options: optionsToEvaluate.options
+    });
+    mergedFrames = __spreadValues(__spreadValues({}, dataFrames), derivedFrames);
+  }
+  return Options_exports.Options.evaluate(
+    optionsToEvaluate,
+    downsampledDataSources,
+    themeFunc,
+    mergedFrames,
+    getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
+  );
+};
 var withDashboardViz = (opts) => {
   const {
     ReactViz,
@@ -2420,7 +2526,7 @@ var withDashboardViz = (opts) => {
   const SanitizedReactViz = (0, SanitizeProps_exports.withSanitizedProps)(ReactViz);
   const defaultOptions = (0, JSONSchemaUtils_exports.pickFieldFromJSONSchema)(vizConfig.optionsSchema, "default");
   const DashboardViz = (props) => {
-    var _a;
+    var _a2;
     const {
       mode = "view",
       hasEventHandlers,
@@ -2436,14 +2542,10 @@ var withDashboardViz = (opts) => {
       onRequestParamsChange = lodash_exports.noop
     } = props;
     const localeContext = react_exports.useContext(TimezoneContext_default);
-    if (localeContext.serializedTimezone) {
-      if (!moment_default.getDefaultSplunkTimezone()) {
-        moment_default.setDefaultSplunkTimezone(localeContext.serializedTimezone);
-      }
-    }
+    applyContextTimezone(localeContext);
     const themeFunc = (themeVar) => {
-      var _a2, _b;
-      return (_b = (_a2 = vizConfig.themes)[themeVar]) == null ? void 0 : _b.call(_a2, props);
+      var _a3, _b;
+      return (_b = (_a3 = vizConfig.themes)[themeVar]) == null ? void 0 : _b.call(_a3, props);
     };
     const {
       family: currentThemeFamily,
@@ -2463,16 +2565,21 @@ var withDashboardViz = (opts) => {
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
     );
     const isTrellisFeatureFlagOn = Boolean(featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableTrellis);
-    const isTrellisOn = isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
+    const isTrellisOn = isTrellisFeatureFlagOn && ((_a2 = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a2.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
     const isAcceleratedRenderFeatureFlagOn = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableAcceleratedRender
     );
     const isAcceleratedRenderOn = isAcceleratedRenderFeatureFlagOn && isTimeSeriesCanvasRenderSupported(vizConfig.key) && (options == null ? void 0 : options.acceleratedRender) === true;
-    const isMounted = react_exports.useRef(true);
+    const bypassCloneDeepOptionScope = Boolean(
+      getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
+    );
+    const lazyLoadingDataFrame = Boolean(
+      getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
+    );
     const optionsToEvaluate = react_exports.useMemo(() => {
-      var _a2;
+      var _a3;
       const legendDisplay = turnOffLegendDisplayWhenTrellisIsOn(isTrellisOn, options);
-      const computedOptions = (_a2 = computeVizPropsBeforeEval(options)) != null ? _a2 : {};
+      const computedOptions = (_a3 = computeVizPropsBeforeEval(options)) != null ? _a3 : {};
       return {
         context: (0, lodash_exports.defaultsDeep)({}, context, vizConfig.defaultContext),
         options: (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)(
@@ -2507,63 +2614,74 @@ var withDashboardViz = (opts) => {
       threshold,
       isDownsamplingEnabled
     });
-    evaluatedOptions = useDeepMemo(() => {
+    const asyncOptionsEvaluationParams = useDeepMemo(
+      () => getAsyncOptionsEvaluationParams({
+        visualizationID,
+        props,
+        optionsToEvaluate,
+        downsampledDataSources,
+        vizConfig,
+        bypassCloneDeepOptionScope,
+        lazyLoadingDataFrame
+      }),
+      [
+        visualizationID,
+        optionsToEvaluate,
+        downsampledDataSources,
+        vizConfig,
+        bypassCloneDeepOptionScope,
+        lazyLoadingDataFrame,
+        currentThemeFamily,
+        currentThemeColorScheme,
+        currentThemeDensity,
+        localeContext.serializedTimezone
+      ]
+    );
+    react_exports.useEffect(() => {
+      if (!useAsyncEvaluatedOptions) {
+        return void 0;
+      }
+      let ownsEvaluation = true;
       try {
-        if (useAsyncEvaluatedOptions) {
-          const asyncDynamicOptionsEvaluatorParams = {
-            visualizationID,
-            props,
-            options: optionsToEvaluate,
-            dataSources: downsampledDataSources,
-            theme: vizConfig.themes,
-            bypassCloneDeepOptionScope: Boolean(
-              getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
-            ),
-            lazyLoadingDataFrame: Boolean(
-              getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
-            )
-          };
-          async_dynamic_options_evaluator_default.evaluate(asyncDynamicOptionsEvaluatorParams).then((results) => {
+        async_dynamic_options_evaluator_default.evaluate(asyncOptionsEvaluationParams).then((results) => {
+          if (ownsEvaluation) {
             setEvaluatedOptionsAsync(results.results);
-          }).catch(() => {
-            if (isMounted.current) {
-              setUseAsyncEvaluatedOptions(false);
-            }
-          });
-        } else {
-          let dataFrames = dataFramesInState;
-          if (downsampledDataSources !== dataSourcesInState) {
-            setDataSourcesInState(downsampledDataSources);
-            dataFrames = Options_exports.Options.dataFrameFromDataSource(
-              downsampledDataSources,
-              getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
-            );
-            setDataFramesInState(dataFrames);
           }
-          let mergedFrames = dataFrames;
-          if (computeDataFrames && dataFrames) {
-            const derivedFrames = computeDataFrames({
-              dataSources: downsampledDataSources,
-              options: optionsToEvaluate.options
-            });
-            mergedFrames = __spreadValues(__spreadValues({}, dataFrames), derivedFrames);
+        }).catch(() => {
+          if (ownsEvaluation) {
+            setUseAsyncEvaluatedOptions(false);
           }
-          const result = Options_exports.Options.evaluate(
-            optionsToEvaluate,
-            downsampledDataSources,
-            themeFunc,
-            mergedFrames,
-            getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
-          );
-          return result;
+        });
+      } catch (e) {
+        setUseAsyncEvaluatedOptions(false);
+      }
+      return () => {
+        ownsEvaluation = false;
+        async_dynamic_options_evaluator_default.reset(visualizationID);
+      };
+    }, [asyncOptionsEvaluationParams, useAsyncEvaluatedOptions, visualizationID]);
+    evaluatedOptions = useDeepMemo(() => {
+      try {
+        if (useAsyncEvaluatedOptions) {
+          return {};
         }
+        return evaluateOptionsSync({
+          optionsToEvaluate,
+          downsampledDataSources,
+          dataSourcesInState,
+          dataFramesInState,
+          setDataSourcesInState,
+          setDataFramesInState,
+          computeDataFrames,
+          featureFlagContext,
+          themeFunc
+        });
       } catch (e) {
         if (e instanceof Error) {
           console.error(`unexpected error evaluating options: ${e.message}`);
         }
         return {};
       }
-      return {};
     }, [
       currentThemeFamily,
       currentThemeColorScheme,
@@ -2573,7 +2691,7 @@ var withDashboardViz = (opts) => {
       localeContext.serializedTimezone,
       useAsyncEvaluatedOptions
     ]);
-    const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
+    const evaluatedOptionsToUse = useAsyncEvaluatedOptions ? evaluatedOptionsAsync : evaluatedOptions;
     let dataSourceMetadata = {};
     const OptionKey = "paginateDataSourceKey";
     const optsKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey];
@@ -2595,7 +2713,7 @@ var withDashboardViz = (opts) => {
       sortParams,
       paginatorParams
     };
-    if (vizConfig.supports.indexOf("page-and-sort" /* PAGE_AND_SORT */) === -1 && !(0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
+    if (!vizConfig.supports.includes("page-and-sort" /* PAGE_AND_SORT */) && !(0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
       dataSourceMetadata = {};
     }
     const clonedEvaluatedOptions = __spreadValues({}, evaluatedOptionsToUse);
@@ -2605,14 +2723,6 @@ var withDashboardViz = (opts) => {
     react_exports.useEffect(() => {
       onComputedProps(clonedEvaluatedOptions);
     });
-    react_exports.useEffect(() => {
-      return () => {
-        if (useAsyncEvaluatedOptions) {
-          isMounted.current = false;
-          async_dynamic_options_evaluator_default.reset(visualizationID);
-        }
-      };
-    }, []);
     const { requiredProps = [], supports } = vizConfig;
     const missing = missingKeys(requiredProps, evaluatedOptionsToUse);
     if (missing.length > 0 && supports.includes("placeholder" /* PLACEHOLDER */) && vizConfig.key !== "splunk.singlevalue") {
@@ -2627,7 +2737,16 @@ var withDashboardViz = (opts) => {
         }
       );
     }
-    const eventCallbackProps = hasEventHandlers && mode === "view" && vizConfig.supports.includes("events" /* EVENTS */) ? buildEventCallbackProps(vizConfig.events, evaluatedOptionsToUse, onEventTrigger) : {};
+    const eventCallbackProps = buildAllEventCallbackProps(
+      vizConfig.events,
+      evaluatedOptionsToUse,
+      onEventTrigger,
+      {
+        supportsEvents: vizConfig.supports.includes("events" /* EVENTS */),
+        hasEventHandlers,
+        mode
+      }
+    );
     const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), {
       // Align option transformation with the actual renderer selected below.
       // This prevents canvas-only option preservation from leaking into Highcharts mode.
@@ -2655,8 +2774,9 @@ var withDashboardViz = (opts) => {
     onEventTrigger: SplunkVisualization_default.defaults.onEventTrigger
   });
   DashboardViz.config = vizConfig;
-  return (0, styled_components_exports.withTheme)(
-    withPlaceholder_default(withEditModeCover_default(DashboardViz, disableEditModeCover), useIconPlaceholder)
+  return Object.assign(
+    (0, styled_components_exports.withTheme)(withPlaceholder_default(withEditModeCover_default(DashboardViz, disableEditModeCover), useIconPlaceholder)),
+    { config: vizConfig }
   );
 };
 var withDashboardViz_default = withDashboardViz;
@@ -2670,14 +2790,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;
@@ -2733,15 +2862,15 @@ function setMouseSelecting(value) {
 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;
+var suppressNextEditClick = false;
+function setSuppressNextEditClick(value) {
+  suppressNextEditClick = value;
+}
+function consumeSuppressNextEditClick() {
+  const v = suppressNextEditClick;
+  suppressNextEditClick = false;
+  return v;
+}
 
 // src/RichText/PureRichText/types.ts
 var DEFAULT_TEXT_STYLES = {
@@ -2798,7 +2927,241 @@ var defaultImport36 = __toESM(require("dompurify"));
 __reExport(dompurify_exports, require("dompurify"));
 var dompurify_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
+// 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 splitByTokenWildcards(rawContent) {
+  const re = new RegExp(TOKEN_OR_ESCAPE_PATTERN.source, "g");
+  const literals = [];
+  let hasWildcard = false;
+  let buf = "";
+  let lastIndex = 0;
+  let match = re.exec(rawContent);
+  while (match !== null) {
+    buf += rawContent.slice(lastIndex, match.index);
+    if (match[1] === void 0) {
+      buf += "$";
+    } else {
+      literals.push(buf);
+      buf = "";
+      hasWildcard = true;
+    }
+    lastIndex = match.index + match[0].length;
+    match = re.exec(rawContent);
+  }
+  buf += rawContent.slice(lastIndex);
+  literals.push(buf);
+  return { literals, hasWildcard };
+}
+function isValueOnlyChange(rawContent, resolvedContent) {
+  var _a2;
+  const { literals, hasWildcard } = splitByTokenWildcards(rawContent);
+  if (!hasWildcard) return resolvedContent === literals[0];
+  const prefix = literals[0];
+  const suffix = (_a2 = literals.at(-1)) != null ? _a2 : "";
+  if (!resolvedContent.startsWith(prefix)) return false;
+  if (!resolvedContent.endsWith(suffix)) return false;
+  let cursor = prefix.length;
+  const end = resolvedContent.length - suffix.length;
+  if (cursor > end) return false;
+  for (let i = 1; i < literals.length - 1; i += 1) {
+    const chunk = literals[i];
+    const idx = resolvedContent.indexOf(chunk, cursor);
+    if (idx === -1 || idx + chunk.length > end) return false;
+    cursor = idx + chunk.length;
+  }
+  return 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 _a2 = textNode, {
+    text,
+    tokenName: existingTokenName,
+    isEscapedDollar,
+    isRawToken: existingIsRawToken
+  } = _a2, rest = __objRest(_a2, [
+    "text",
+    "tokenName",
+    "isEscapedDollar",
+    "isRawToken"
+  ]);
+  const marks = __spreadValues({}, rest);
+  if (!text) return [textNode];
+  if (isEscapedDollar) {
+    if (!/^\$+$/.test(text)) return [textNode];
+    const escapeCount = existingIsRawToken ? text.length / 2 : text.length;
+    return [
+      __spreadProps(__spreadValues({}, textNode), {
+        text: displayTextForEscapedDollar(nameToValue).repeat(escapeCount),
+        isRawToken: !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,
+        isRawToken: !nameToValue
+      }));
+    } 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 _a2, _b, _c, _d, _e;
+  const contentMetadata = (_a2 = richTextTokenMetadata == null ? void 0 : richTextTokenMetadata.richTextContent) != null ? _a2 : 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);
+      const canReuseStale = !next.reconciled && resultRef.current != null && isValueOnlyChange(resultRef.current.rawContent, resolvedContent);
+      resultRef.current = canReuseStale ? __spreadProps(__spreadValues({}, next), { rawContent: resultRef.current.rawContent }) : next;
+    } 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/utils/slateUtils.ts
+var sharedDomParser = new DOMParser();
+var ALLOWED_URI_SCHEMES = ["ftps?", "https?", "mailto", "tel", "callto", "sms", "cid", "xmpp", "file"];
+var ALLOWED_URI_REGEXP = new RegExp(
+  String.raw`^(?:(?:${ALLOWED_URI_SCHEMES.join("|")}):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))`,
+  "i"
+);
+function findInWidgetScroller(el) {
+  var _a2;
+  let node = (_a2 = el == null ? void 0 : el.parentElement) != null ? _a2 : null;
+  while (node && node !== document.body && node !== document.documentElement) {
+    const { overflowY } = globalThis.getComputedStyle(node);
+    if ((overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight) {
+      return node;
+    }
+    node = node.parentElement;
+  }
+  return null;
+}
+function editorContentOverflows(editableEl) {
+  return findInWidgetScroller(editableEl) !== null;
+}
+function scrollCaretWithinEditor(editor, domRange) {
+  if (isMouseSelecting()) return;
+  const { selection } = editor;
+  if (selection && !slate_exports.Range.isCollapsed(selection)) return;
+  if (typeof domRange.getBoundingClientRect !== "function") return;
+  const leafEl = domRange.startContainer.parentElement;
+  const scroller = findInWidgetScroller(leafEl);
+  if (!scroller) return;
+  const caret = domRange.getBoundingClientRect();
+  const box = scroller.getBoundingClientRect();
+  if (caret.top < box.top) {
+    scroller.scrollTop -= box.top - caret.top;
+  } else if (caret.bottom > box.bottom) {
+    scroller.scrollTop += caret.bottom - box.bottom;
+  }
+}
 function safeSelectEnd(editor) {
   try {
     const end = slate_exports.Editor.end(editor, []);
@@ -2806,6 +3169,15 @@ function safeSelectEnd(editor) {
   } catch (e) {
   }
 }
+function focusSelectOutline(fromEl) {
+  const selectOutline = fromEl == null ? void 0 : fromEl.closest('[data-test="select-outline"]');
+  if (!selectOutline) return;
+  if (!selectOutline.getAttribute("tabindex")) {
+    selectOutline.setAttribute("tabindex", "-1");
+  }
+  selectOutline.style.outline = "none";
+  selectOutline.focus({ preventScroll: true });
+}
 function safeDeselect(editor) {
   try {
     slate_exports.Transforms.deselect(editor);
@@ -2968,14 +3340,50 @@ function getActiveLink(editor) {
 function slateToPlainText(nodes) {
   return slate_exports.Node.string({ children: nodes });
 }
+function resolveUrlTokens(url, nameToValue) {
+  if (!nameToValue || nameToValue.size === 0) return url;
+  return url.replace(TOKEN_PATTERN, (match, name) => {
+    var _a2;
+    return (_a2 = nameToValue.get(name)) != null ? _a2 : match;
+  });
+}
+function resolveLinkHref(url, nameToValue) {
+  return normalizeUrl(resolveUrlTokens(url, nameToValue));
+}
+var DANGEROUS_URL_SCHEMES = /* @__PURE__ */ new Set(["javascript", "data", "vbscript"]);
+function isOpenableUrl(value) {
+  try {
+    new URL(value);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
 function normalizeUrl(url) {
   const trimmed = url.trim();
   if (!trimmed) return trimmed;
-  if (/^https?:\/\//i.test(trimmed) || /^mailto:/i.test(trimmed) || /^tel:/i.test(trimmed)) {
+  const schemeMatch = /^([a-z][a-z0-9+-]*):/i.exec(trimmed);
+  if (schemeMatch) {
+    if (DANGEROUS_URL_SCHEMES.has(schemeMatch[1].toLowerCase())) return "";
+    return trimmed;
+  }
+  if (/\$[^$]+\$/.test(trimmed)) {
+    return trimmed;
+  }
+  if (/^[#?/]/.test(trimmed)) {
     return trimmed;
   }
   return `https://${trimmed}`;
 }
+function stripTokenMarks(marks) {
+  if (!marks) return marks;
+  const styleMarks = __spreadValues({}, marks);
+  delete styleMarks.tokenName;
+  delete styleMarks.tokenOccurrence;
+  delete styleMarks.isRawToken;
+  delete styleMarks.isEscapedDollar;
+  return styleMarks;
+}
 function insertLink(editor, url, text) {
   if (isLinkActive(editor)) {
     unwrapLink(editor);
@@ -2986,7 +3394,7 @@ function insertLink(editor, url, text) {
   const isCollapsed = slate_exports.Range.isCollapsed(selection);
   let linkChild = { text: text || normalizedUrl };
   if (isCollapsed) {
-    const marks = slate_exports.Editor.marks(editor);
+    const marks = stripTokenMarks(slate_exports.Editor.marks(editor));
     if (marks) {
       linkChild = __spreadValues(__spreadValues({}, linkChild), marks);
     }
@@ -2997,7 +3405,7 @@ function insertLink(editor, url, text) {
     children: isCollapsed ? [linkChild] : []
   };
   if (isCollapsed) {
-    const marksBeforeInsert = slate_exports.Editor.marks(editor);
+    const marksBeforeInsert = stripTokenMarks(slate_exports.Editor.marks(editor));
     slate_exports.Transforms.insertNodes(editor, link);
     slate_exports.Transforms.move(editor, { unit: "offset" });
     if (marksBeforeInsert) {
@@ -3016,6 +3424,9 @@ function insertLink(editor, url, text) {
         anchor: { path: anchor.path, offset: anchor.offset - text.length },
         focus: anchor
       });
+      slate_exports.Editor.removeMark(editor, "tokenName");
+      slate_exports.Editor.removeMark(editor, "isRawToken");
+      slate_exports.Editor.removeMark(editor, "isEscapedDollar");
     }
     slate_exports.Transforms.wrapNodes(editor, link, { split: true });
     slate_exports.Transforms.collapse(editor, { edge: "end" });
@@ -3086,11 +3497,11 @@ function getPendingMarks(editor) {
   }
 }
 function mergeMarks(nodeMarks, pendingMarksResult) {
-  var _a, _b, _c, _d;
+  var _a2, _b, _c, _d;
   const { marks: pendingMarks, hasPendingMarks } = pendingMarksResult;
   const marks = __spreadValues({}, nodeMarks);
   if (hasPendingMarks) {
-    marks.bold = (_a = pendingMarks.bold) != null ? _a : false;
+    marks.bold = (_a2 = pendingMarks.bold) != null ? _a2 : false;
     marks.italic = (_b = pendingMarks.italic) != null ? _b : false;
     marks.underline = (_c = pendingMarks.underline) != null ? _c : false;
     marks.strikethrough = (_d = pendingMarks.strikethrough) != null ? _d : false;
@@ -3210,7 +3621,11 @@ function slateToHtml(value) {
   };
   const serializeTextNode = (node) => {
     const styles = buildTextStyles(node);
-    let { text } = node;
+    let text = node.tokenName ? `$${node.tokenName}$` : node.text;
+    if (node.isEscapedDollar && /^\$+$/.test(node.text)) {
+      const escapeCount = node.isRawToken ? node.text.length / 2 : node.text.length;
+      text = "$$".repeat(escapeCount);
+    }
     if (!text) {
       return styles.length > 0 ? `<span style="${styles.join("; ")}"></span>` : "";
     }
@@ -3231,7 +3646,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 +3673,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",
@@ -3277,10 +3708,10 @@ function htmlToSlate(html) {
       "div",
       "font"
     ],
-    ALLOWED_ATTR: ["style", "href", "color", "face", "size"]
+    ALLOWED_ATTR: ["style", "href", "color", "face", "size"],
+    ALLOWED_URI_REGEXP
   });
-  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 +3774,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 +3789,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 +3944,32 @@ 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",
+    "isLink"
+  ];
+  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);
@@ -3557,18 +4032,18 @@ function PureRichTextProvider({
   }, []);
   const resolveBooleanMark = (0, react_exports.useCallback)(
     (format, slateValue, hasAnyLeafContent, hasPendingMarks) => {
-      var _a;
+      var _a2;
       if (boolMarkOverrideRef.current !== null && format in boolMarkOverrideRef.current) {
         return Boolean(boolMarkOverrideRef.current[format]);
       }
       if (hasAnyLeafContent || hasPendingMarks) return slateValue;
-      return (_a = userDefaultStyles[format]) != null ? _a : false;
+      return (_a2 = userDefaultStyles[format]) != null ? _a2 : false;
     },
     [userDefaultStyles]
   );
   const updateActiveStyles = (0, react_exports.useCallback)(
     (isContentChange) => {
-      var _a, _b;
+      var _a2, _b;
       const editor = editorRef.current;
       if (!(editor == null ? void 0 : editor.selection)) {
         return;
@@ -3599,29 +4074,29 @@ function PureRichTextProvider({
           hasPendingMarks
         ),
         color: slateStyles.color || userDefaultStyles.color,
-        backgroundColor: (_a = slateStyles.backgroundColor) != null ? _a : hasAnyLeafContent || hasPendingMarks ? null : userDefaultStyles.backgroundColor,
+        backgroundColor: (_a2 = slateStyles.backgroundColor) != null ? _a2 : hasAnyLeafContent || hasPendingMarks ? null : userDefaultStyles.backgroundColor,
         fontSize: slateStyles.fontSize || userDefaultStyles.fontSize,
         fontFamily: slateStyles.fontFamily || userDefaultStyles.fontFamily,
         textAlign: slateStyles.textAlign || userDefaultStyles.textAlign,
         verticalAlign: userDefaultStyles.verticalAlign,
         lineHeight: slateStyles.lineHeight || userDefaultStyles.lineHeight,
-        listType: (_b = slateStyles.listType) != null ? _b : userDefaultStyles.listType
+        listType: (_b = slateStyles.listType) != null ? _b : userDefaultStyles.listType,
+        isLink: isLinkActive(editor)
       };
       if (slateStyles.isMixed && Object.keys(slateStyles.isMixed).length > 0) {
         newActiveStyles.isMixed = slateStyles.isMixed;
       }
-      setActiveTextStyles(newActiveStyles);
+      setActiveTextStyles((prev) => activeStylesEqual(prev, newActiveStyles) ? prev : newActiveStyles);
     },
     [userDefaultStyles, resolveBooleanMark]
   );
   const toggleBooleanMark = (0, react_exports.useCallback)((editor, format) => {
-    var _a;
     toggleMark(editor, format);
     if (editor.selection && slate_exports.Range.isCollapsed(editor.selection)) {
       const editorWithMarks = editor;
       const internalMarks = editorWithMarks.marks;
-      const newValue = internalMarks !== null ? Boolean(internalMarks[format]) : false;
-      boolMarkOverrideRef.current = __spreadProps(__spreadValues({}, (_a = boolMarkOverrideRef.current) != null ? _a : {}), {
+      const newValue = internalMarks === null ? false : Boolean(internalMarks[format]);
+      boolMarkOverrideRef.current = __spreadProps(__spreadValues({}, boolMarkOverrideRef.current), {
         [format]: newValue
       });
     }
@@ -3663,7 +4138,7 @@ function PureRichTextProvider({
   );
   const applyFormat = (0, react_exports.useCallback)(
     (command, value) => {
-      var _a, _b;
+      var _a2, _b;
       const editor = editorRef.current;
       if (!editor) return;
       if (!editor.selection && savedSelectionRef.current) {
@@ -3678,7 +4153,7 @@ function PureRichTextProvider({
         dispatchFormatCommand(editor, command, value);
         if (editor.selection) {
           savedSelectionRef.current = editor.selection;
-          (_a = onFormatAppliedRef.current) == null ? void 0 : _a.call(onFormatAppliedRef, editor.selection);
+          (_a2 = onFormatAppliedRef.current) == null ? void 0 : _a2.call(onFormatAppliedRef, editor.selection);
         }
         updateActiveStyles();
         (_b = onAnnouncementRef.current) == null ? void 0 : _b.call(onAnnouncementRef, generateFormatAnnouncement(command, value));
@@ -3784,6 +4259,14 @@ function PureRichTextProvider({
     const editor = editorRef.current;
     if (!editor) return;
     try {
+      if (!editor.selection && savedSelectionRef.current) {
+        try {
+          slate_exports.Transforms.select(editor, savedSelectionRef.current);
+        } catch (e) {
+          return;
+        }
+      }
+      if (!editor.selection) return;
       unwrapLink(editor);
       updateActiveStyles();
     } catch (error) {
@@ -4398,8 +4881,8 @@ function useLinkHandlers(handlers) {
     }
     resetLinkState();
     setTimeout(() => {
-      var _a;
-      (_a = linkButtonRef.current) == null ? void 0 : _a.focus();
+      var _a2;
+      (_a2 = linkButtonRef.current) == null ? void 0 : _a2.focus();
     }, 0);
   }, [linkUrl, linkText, createOrUpdateLink, resetLinkState]);
   const handleLinkRemove = (0, react_exports.useCallback)(() => {
@@ -4408,13 +4891,14 @@ function useLinkHandlers(handlers) {
     }
     resetLinkState();
     setTimeout(() => {
-      var _a;
-      (_a = linkButtonRef.current) == null ? void 0 : _a.focus();
+      var _a2;
+      (_a2 = linkButtonRef.current) == null ? void 0 : _a2.focus();
     }, 0);
   }, [removeLink, resetLinkState]);
   const handleLinkKeyDown = (0, react_exports.useCallback)(
     (e) => {
-      if (e.key === "Enter") {
+      var _a2;
+      if (e.key === "Enter" && ((_a2 = e.target) == null ? void 0 : _a2.tagName) === "INPUT") {
         e.preventDefault();
         handleLinkSave();
       }
@@ -4424,8 +4908,8 @@ function useLinkHandlers(handlers) {
         e.nativeEvent.stopImmediatePropagation();
         resetLinkState();
         setTimeout(() => {
-          var _a;
-          (_a = linkButtonRef.current) == null ? void 0 : _a.focus();
+          var _a3;
+          (_a3 = linkButtonRef.current) == null ? void 0 : _a3.focus();
         }, 0);
       }
     },
@@ -4434,8 +4918,8 @@ function useLinkHandlers(handlers) {
   (0, react_exports.useEffect)(() => {
     if (!linkPopoverOpen) return void 0;
     const timer = setTimeout(() => {
-      var _a, _b;
-      (_b = (_a = linkPopoverRef.current) == null ? void 0 : _a.querySelector("input")) == null ? void 0 : _b.focus();
+      var _a2, _b;
+      (_b = (_a2 = linkPopoverRef.current) == null ? void 0 : _a2.querySelector("input")) == null ? void 0 : _b.focus();
     }, 50);
     return () => clearTimeout(timer);
   }, [linkPopoverOpen]);
@@ -4484,7 +4968,7 @@ function useLineSpacing(lineHeight, displayLineHeight, isLineHeightMixed, applyF
   }, [displayLineHeight, lineHeight, isLineHeightMixed]);
   const handleLineSpacingChange = (0, react_exports.useCallback)(
     (_e, data) => {
-      var _a, _b;
+      var _a2, _b;
       const { value, reason } = data;
       if (value !== void 0 && value !== null) {
         setLineSpacingPercent(value);
@@ -4495,7 +4979,7 @@ function useLineSpacing(lineHeight, displayLineHeight, isLineHeightMixed, applyF
         if (reason === "stepButton" && applyFormat) {
           if (isLineHeightMixed && stepLineSpacing) {
             const target = _e == null ? void 0 : _e.currentTarget;
-            const testId = ((_a = target == null ? void 0 : target.getAttribute) == null ? void 0 : _a.call(target, "data-test")) || ((_b = target == null ? void 0 : target.getAttribute) == null ? void 0 : _b.call(target, "data-testid")) || "";
+            const testId = ((_a2 = target == null ? void 0 : target.getAttribute) == null ? void 0 : _a2.call(target, "data-test")) || ((_b = target == null ? void 0 : target.getAttribute) == null ? void 0 : _b.call(target, "data-testid")) || "";
             const isDecrement = testId === "decrement" || testId.includes("down");
             stepLineSpacing(isDecrement ? -1 : 1);
             return;
@@ -4523,158 +5007,13 @@ function useLineSpacing(lineHeight, displayLineHeight, isLineHeightMixed, applyF
   };
 }
 
-// src/RichText/PureRichText/Editor/EditorPanel.tsx
-var TextAlignJustified = () => /* @__PURE__ */ react_default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ react_default.createElement(
-  "path",
-  {
-    d: "M3 6h18M3 10h18M3 14h18M3 18h18",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round"
-  }
-));
-var preventDefaultMouseDown = (e) => e.preventDefault();
-var focusMixedSwatch = (selector) => {
-  setTimeout(() => {
-    var _a;
-    (_a = document.querySelector(selector)) == null ? void 0 : _a.focus();
-  }, 50);
-};
-var EditorPanel = ({
+// src/RichText/PureRichText/Editor/hooks/useConfigPanelFocus.ts
+function useConfigPanelFocus({
   isEditMode,
-  isActive = false,
-  fontColor = "#ffffff",
-  fontSize: fontSizeProp = 14,
-  lineHeight = "1.5",
-  verticalAlign: verticalAlignProp = "top",
-  onVerticalAlignChange
-}) => {
-  var _a, _b;
-  const portalTargetRef = (0, react_exports.useRef)(null);
-  const [renderTick, forceUpdate] = react_default.useReducer((n) => n + 1, 0);
-  const portalReady = renderTick >= 0 && portalTargetRef.current !== null;
-  const contextValue = usePureRichTextOptional();
-  const activeTextStyles = (contextValue == null ? void 0 : contextValue.activeTextStyles) || DEFAULT_TEXT_STYLES;
-  const applyFormat = contextValue == null ? void 0 : contextValue.applyFormat;
-  const resetToDefault = contextValue == null ? void 0 : contextValue.resetToDefault;
-  const stepFontSize = contextValue == null ? void 0 : contextValue.stepFontSize;
-  const stepLineSpacing = contextValue == null ? void 0 : contextValue.stepLineSpacing;
-  const isInLink = contextValue == null ? void 0 : contextValue.isInLink;
-  const getLinkInfo = contextValue == null ? void 0 : contextValue.getLinkInfo;
-  const createOrUpdateLink = contextValue == null ? void 0 : contextValue.createOrUpdateLink;
-  const removeLink = contextValue == null ? void 0 : contextValue.removeLink;
-  const registerOpenLinkPopover = contextValue == null ? void 0 : contextValue.registerOpenLinkPopover;
-  const [align, setAlign] = (0, react_exports.useState)("left");
-  const [verticalAlign, setVerticalAlign] = (0, react_exports.useState)(verticalAlignProp);
-  const [currentFontSize, setCurrentFontSize] = (0, react_exports.useState)(fontSizeProp);
-  const [fontSizePreset, setFontSizePreset] = (0, react_exports.useState)(() => getFontSizePreset(fontSizeProp));
-  const fontSizeDirtyRef = (0, react_exports.useRef)(false);
-  const {
-    linkIsActive,
-    linkPopoverOpen,
-    linkPopoverRef,
-    linkText,
-    linkUrl,
-    linkButtonRef,
-    setLinkText,
-    setLinkUrl,
-    handleLinkButtonClick,
-    handleLinkPopoverClose,
-    handleLinkSave,
-    handleLinkRemove,
-    handleLinkKeyDown
-  } = useLinkHandlers({
-    isInLink,
-    getLinkInfo,
-    createOrUpdateLink,
-    removeLink
-  });
-  (0, react_exports.useEffect)(() => {
-    registerOpenLinkPopover == null ? void 0 : registerOpenLinkPopover(handleLinkButtonClick);
-  }, [registerOpenLinkPopover, handleLinkButtonClick]);
-  const wasMouseRef = (0, react_exports.useRef)(false);
-  const handleFormat = (0, react_exports.useCallback)(
-    (command, value) => {
-      if (!applyFormat) return;
-      applyFormat(command, value);
-      if (wasMouseRef.current) {
-        setTimeout(() => {
-          focusActiveEditable();
-        }, 0);
-      }
-    },
-    [applyFormat]
-  );
-  const isLineHeightMixed = ((_a = activeTextStyles.isMixed) == null ? void 0 : _a.lineHeight) === true;
-  const {
-    lineSpacingPercent,
-    showMixed: showLineSpacingMixed,
-    handleLineSpacingChange,
-    handleLineSpacingBlur
-  } = useLineSpacing(
-    lineHeight,
-    activeTextStyles.lineHeight,
-    isLineHeightMixed,
-    applyFormat,
-    handleFormat,
-    stepLineSpacing
-  );
-  const handleFontFamilyChange = (0, react_exports.useCallback)(
-    (fontFamily) => handleFormat("fontName", fontFamily),
-    [handleFormat]
-  );
-  (0, react_exports.useEffect)(() => {
-    if (!isEditMode) {
-      portalTargetRef.current = null;
-      forceUpdate();
-      return void 0;
-    }
-    const findTarget = () => {
-      const target = getEditorPanelTarget();
-      if (target && target !== portalTargetRef.current) {
-        portalTargetRef.current = target;
-        forceUpdate();
-      }
-    };
-    findTarget();
-    const interval = setInterval(findTarget, 100);
-    return () => {
-      clearInterval(interval);
-      portalTargetRef.current = null;
-    };
-  }, [isEditMode]);
-  (0, react_exports.useEffect)(() => {
-    if (activeTextStyles.textAlign) {
-      setAlign(activeTextStyles.textAlign);
-    }
-  }, [activeTextStyles.textAlign]);
-  (0, react_exports.useEffect)(() => {
-    setVerticalAlign(verticalAlignProp);
-  }, [verticalAlignProp]);
-  (0, react_exports.useEffect)(() => {
-    fontSizeDirtyRef.current = false;
-    if (activeTextStyles.fontSize) {
-      const size2 = Number.parseInt(String(activeTextStyles.fontSize), 10) || 14;
-      setCurrentFontSize(size2);
-      setFontSizePreset(getFontSizePreset(size2));
-    }
-  }, [activeTextStyles.fontSize]);
-  const handleVerticalAlignChange = (0, react_exports.useCallback)(
-    (newAlign) => {
-      setVerticalAlign(newAlign);
-      onVerticalAlignChange == null ? void 0 : onVerticalAlignChange(newAlign);
-    },
-    [onVerticalAlignChange]
-  );
-  const isMixedStyles = activeTextStyles.isMixed || {};
-  const isColorMixed = isMixedStyles.color === true;
-  const isHighlightMixed = isMixedStyles.backgroundColor === true;
-  const isFontSizeMixed = isMixedStyles.fontSize === true;
-  const isFontFamilyMixed = isMixedStyles.fontFamily === true;
-  const displayTextColor = isColorMixed ? "" : activeTextStyles.color || fontColor;
-  const displayHighlightColor = isHighlightMixed ? "" : (_b = activeTextStyles.backgroundColor) != null ? _b : "transparent";
-  const displayFontFamily = isFontFamilyMixed ? "" : activeTextStyles.fontFamily || "Splunk Data Sans";
-  const editorContainerRef = (0, react_exports.useRef)(null);
+  isActive,
+  editorContainerRef,
+  wasMouseRef
+}) {
   (0, react_exports.useEffect)(() => {
     if (!isEditMode || !isActive) return void 0;
     const handleMouseDown = (e) => {
@@ -4702,7 +5041,7 @@ var EditorPanel = ({
       document.removeEventListener("mousedown", handleMouseDown, true);
       document.removeEventListener("keydown", handleKeyDown, true);
     };
-  }, [isEditMode, isActive]);
+  }, [isEditMode, isActive, editorContainerRef, wasMouseRef]);
   (0, react_exports.useEffect)(() => {
     if (!isEditMode || !isActive) return void 0;
     const FOCUS_RING_ATTR = "data-trap-focused";
@@ -4731,23 +5070,32 @@ var EditorPanel = ({
     const handleBlurCleanup = () => {
       removeFocusRing();
     };
-    const getConfigPanel = () => editorContainerRef.current;
     const getFocusableElements = (panel) => {
       const selector = 'button:not([disabled]):not([aria-disabled="true"]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href]:not([disabled])';
       return Array.from(panel.querySelectorAll(selector)).filter(
         (el) => el.offsetParent !== null && el.offsetWidth > 0 && el.offsetHeight > 0
       );
     };
+    const moveFocus = (e, focusable, currentIndex) => {
+      const backward = e.shiftKey;
+      const atBoundary = backward ? currentIndex <= 0 : currentIndex >= focusable.length - 1;
+      if (atBoundary) {
+        removeFocusRing();
+        return;
+      }
+      e.preventDefault();
+      const nextEl = focusable[backward ? currentIndex - 1 : currentIndex + 1];
+      nextEl.focus();
+      applyFocusRing(nextEl);
+    };
     const handleConfigPanelKeyDown = (e) => {
       const target = e.target;
       if (e.key === "Escape") {
         removeFocusRing();
         return;
       }
-      const configPanel = getConfigPanel();
-      if (!configPanel) return;
-      if (!configPanel.contains(target)) return;
-      if (e.key !== "Tab") return;
+      const configPanel = editorContainerRef.current;
+      if (!(configPanel == null ? void 0 : configPanel.contains(target)) || e.key !== "Tab") return;
       const focusable = getFocusableElements(configPanel);
       if (focusable.length === 0) return;
       const currentIndex = focusable.indexOf(target);
@@ -4755,25 +5103,7 @@ var EditorPanel = ({
         removeFocusRing();
         return;
       }
-      if (e.shiftKey) {
-        if (currentIndex <= 0) {
-          removeFocusRing();
-          return;
-        }
-        e.preventDefault();
-        const nextEl = focusable[currentIndex - 1];
-        nextEl.focus();
-        applyFocusRing(nextEl);
-      } else {
-        if (currentIndex >= focusable.length - 1) {
-          removeFocusRing();
-          return;
-        }
-        e.preventDefault();
-        const nextEl = focusable[currentIndex + 1];
-        nextEl.focus();
-        applyFocusRing(nextEl);
-      }
+      moveFocus(e, focusable, currentIndex);
     };
     document.addEventListener("keydown", handleConfigPanelKeyDown, true);
     document.addEventListener("focusout", handleBlurCleanup, true);
@@ -4782,7 +5112,311 @@ var EditorPanel = ({
       document.removeEventListener("focusout", handleBlurCleanup, true);
       removeFocusRing();
     };
-  }, [isEditMode, isActive]);
+  }, [isEditMode, isActive, editorContainerRef]);
+}
+
+// src/RichText/PureRichText/Editor/hooks/usePortalTarget.ts
+function usePortalTarget(isEditMode) {
+  const portalTargetRef = (0, react_exports.useRef)(null);
+  const [renderTick, forceUpdate] = (0, react_exports.useReducer)((n) => n + 1, 0);
+  const portalReady = renderTick >= 0 && portalTargetRef.current !== null;
+  (0, react_exports.useEffect)(() => {
+    if (!isEditMode) {
+      portalTargetRef.current = null;
+      forceUpdate();
+      return void 0;
+    }
+    const findTarget = () => {
+      const target = getEditorPanelTarget();
+      if (target && target !== portalTargetRef.current) {
+        portalTargetRef.current = target;
+        forceUpdate();
+      }
+    };
+    findTarget();
+    const interval = setInterval(findTarget, 100);
+    return () => {
+      clearInterval(interval);
+      portalTargetRef.current = null;
+    };
+  }, [isEditMode]);
+  return { portalTargetRef, portalReady };
+}
+
+// src/RichText/PureRichText/Editor/hooks/useEditorPanelSync.ts
+function useEditorPanelSync({
+  textAlign,
+  setAlign,
+  verticalAlignProp,
+  setVerticalAlign,
+  activeFontSize,
+  fontSizeDirtyRef,
+  setCurrentFontSize,
+  setFontSizePreset
+}) {
+  (0, react_exports.useEffect)(() => {
+    if (textAlign) {
+      setAlign(textAlign);
+    }
+  }, [textAlign, setAlign]);
+  (0, react_exports.useEffect)(() => {
+    setVerticalAlign(verticalAlignProp);
+  }, [verticalAlignProp, setVerticalAlign]);
+  (0, react_exports.useEffect)(() => {
+    fontSizeDirtyRef.current = false;
+    if (activeFontSize) {
+      const size2 = Number.parseInt(String(activeFontSize), 10) || 14;
+      setCurrentFontSize(size2);
+      setFontSizePreset(getFontSizePreset(size2));
+    }
+  }, [activeFontSize, fontSizeDirtyRef, setCurrentFontSize, setFontSizePreset]);
+}
+
+// src/RichText/PureRichText/Editor/EditorPanel.tsx
+var TextAlignJustified = () => /* @__PURE__ */ react_default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ react_default.createElement(
+  "path",
+  {
+    d: "M3 6h18M3 10h18M3 14h18M3 18h18",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }
+));
+var preventDefaultMouseDown = (e) => e.preventDefault();
+function handleFontSizeStep(e, val, ctx) {
+  var _a2, _b;
+  if (!ctx.stepFontSize) {
+    if (val != null) {
+      ctx.setCurrentFontSize(val);
+      ctx.setFontSizePreset(getFontSizePreset(val));
+      ctx.handleFormat("fontSize", `${val}px`);
+    }
+    return;
+  }
+  const target = e == null ? void 0 : e.currentTarget;
+  const testId = ((_a2 = target == null ? void 0 : target.getAttribute) == null ? void 0 : _a2.call(target, "data-test")) || ((_b = target == null ? void 0 : target.getAttribute) == null ? void 0 : _b.call(target, "data-testid")) || "";
+  const isDecrement = testId === "decrement" || testId.includes("down");
+  ctx.stepFontSize(isDecrement ? -2 : 2);
+  if (ctx.wasMouseRef.current) {
+    setTimeout(() => focusActiveEditable(), 0);
+  }
+}
+function handleFontSizeChange(e, val, reason, ctx) {
+  if (reason === "stepButton") {
+    handleFontSizeStep(e, val, ctx);
+    return;
+  }
+  if (val != null) {
+    ctx.fontSizeDirtyRef.current = true;
+    ctx.setCurrentFontSize(val);
+    ctx.setFontSizePreset(getFontSizePreset(val));
+  }
+}
+var focusMixedSwatch = (selector) => {
+  setTimeout(() => {
+    var _a2;
+    (_a2 = document.querySelector(selector)) == null ? void 0 : _a2.focus();
+  }, 50);
+};
+function handleMixedSwatchClick(isMixed) {
+  if (isMixed) focusMixedSwatch('[data-test="textbox-swatch"]');
+}
+var ALIGN_COMMANDS = {
+  left: "justifyLeft",
+  center: "justifyCenter",
+  right: "justifyRight",
+  justify: "justifyFull"
+};
+function handleAlignmentChange(newAlign, setAlign, handleFormat) {
+  setAlign(newAlign);
+  handleFormat(ALIGN_COMMANDS[newAlign]);
+}
+function handleFontSizePresetChange(val, ctx) {
+  const preset = FONT_SIZE_OPTIONS.find((p) => p.value === val);
+  if (!preset) {
+    ctx.setFontSizePreset("custom");
+    return;
+  }
+  ctx.setCurrentFontSize(Number.parseInt(preset.value, 10));
+  ctx.setFontSizePreset(preset.value);
+  ctx.handleFormat("fontSize", `${preset.value}px`);
+}
+function handleFontSizeArrowCapture(e, stepFontSize) {
+  if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+  e.preventDefault();
+  e.stopPropagation();
+  stepFontSize(e.key === "ArrowUp" ? 2 : -2);
+}
+function handleFontSizeInputKeyDown(e, ctx) {
+  if (e.key !== "Enter" || !ctx.currentFontSize) return;
+  e.preventDefault();
+  e.stopPropagation();
+  ctx.fontSizeDirtyRef.current = false;
+  ctx.handleFormat("fontSize", `${ctx.currentFontSize}px`);
+}
+function handleFontSizeInputBlur(ctx) {
+  if (ctx.fontSizeDirtyRef.current && ctx.currentFontSize) {
+    ctx.handleFormat("fontSize", `${ctx.currentFontSize}px`);
+  }
+  ctx.fontSizeDirtyRef.current = false;
+}
+function handleLineSpacingKeyDown(e, ctx) {
+  if (e.key === "Enter") {
+    ctx.handleLineSpacingBlur();
+  }
+  if (!ctx.isLineHeightMixed || !ctx.stepLineSpacing) return;
+  if (e.key === "ArrowUp") {
+    e.preventDefault();
+    ctx.stepLineSpacing(1);
+  } else if (e.key === "ArrowDown") {
+    e.preventDefault();
+    ctx.stepLineSpacing(-1);
+  }
+}
+function computeMixedDisplayStyles(activeTextStyles, fontColor) {
+  var _a2;
+  const isMixedStyles = activeTextStyles.isMixed || {};
+  const isColorMixed = isMixedStyles.color === true;
+  const isHighlightMixed = isMixedStyles.backgroundColor === true;
+  const isFontSizeMixed = isMixedStyles.fontSize === true;
+  const isFontFamilyMixed = isMixedStyles.fontFamily === true;
+  return {
+    isColorMixed,
+    isHighlightMixed,
+    isFontSizeMixed,
+    isFontFamilyMixed,
+    displayTextColor: isColorMixed ? "" : activeTextStyles.color || fontColor,
+    displayHighlightColor: isHighlightMixed ? "" : (_a2 = activeTextStyles.backgroundColor) != null ? _a2 : "transparent",
+    displayFontFamily: isFontFamilyMixed ? "" : activeTextStyles.fontFamily || "Splunk Data Sans"
+  };
+}
+function handleResetToDefault(resetToDefault, wasMouseRef) {
+  resetToDefault == null ? void 0 : resetToDefault();
+  if (wasMouseRef.current) {
+    setTimeout(() => focusActiveEditable(), 0);
+  }
+}
+var EditorPanel = ({
+  isEditMode,
+  isActive = false,
+  fontColor = "#ffffff",
+  fontSize: fontSizeProp = 14,
+  lineHeight = "1.5",
+  verticalAlign: verticalAlignProp = "top",
+  onVerticalAlignChange
+}) => {
+  var _a2, _b;
+  const { portalTargetRef, portalReady } = usePortalTarget(isEditMode);
+  const contextValue = usePureRichTextOptional();
+  const activeTextStyles = (contextValue == null ? void 0 : contextValue.activeTextStyles) || DEFAULT_TEXT_STYLES;
+  const applyFormat = contextValue == null ? void 0 : contextValue.applyFormat;
+  const resetToDefault = contextValue == null ? void 0 : contextValue.resetToDefault;
+  const stepFontSize = contextValue == null ? void 0 : contextValue.stepFontSize;
+  const stepLineSpacing = contextValue == null ? void 0 : contextValue.stepLineSpacing;
+  const isInLink = contextValue == null ? void 0 : contextValue.isInLink;
+  const getLinkInfo = contextValue == null ? void 0 : contextValue.getLinkInfo;
+  const createOrUpdateLink = contextValue == null ? void 0 : contextValue.createOrUpdateLink;
+  const removeLink = contextValue == null ? void 0 : contextValue.removeLink;
+  const registerOpenLinkPopover = contextValue == null ? void 0 : contextValue.registerOpenLinkPopover;
+  const [align, setAlign] = (0, react_exports.useState)("left");
+  const [verticalAlign, setVerticalAlign] = (0, react_exports.useState)(verticalAlignProp);
+  const [currentFontSize, setCurrentFontSize] = (0, react_exports.useState)(fontSizeProp);
+  const [fontSizePreset, setFontSizePreset] = (0, react_exports.useState)(() => getFontSizePreset(fontSizeProp));
+  const fontSizeDirtyRef = (0, react_exports.useRef)(false);
+  const linkIsActive = (_a2 = activeTextStyles.isLink) != null ? _a2 : false;
+  const {
+    linkPopoverOpen,
+    linkPopoverRef,
+    linkText,
+    linkUrl,
+    linkButtonRef,
+    setLinkText,
+    setLinkUrl,
+    handleLinkButtonClick,
+    handleLinkPopoverClose,
+    handleLinkSave,
+    handleLinkRemove,
+    handleLinkKeyDown
+  } = useLinkHandlers({
+    isInLink,
+    getLinkInfo,
+    createOrUpdateLink,
+    removeLink
+  });
+  (0, react_exports.useEffect)(() => {
+    registerOpenLinkPopover == null ? void 0 : registerOpenLinkPopover(handleLinkButtonClick);
+  }, [registerOpenLinkPopover, handleLinkButtonClick]);
+  const wasMouseRef = (0, react_exports.useRef)(false);
+  const handleFormat = (0, react_exports.useCallback)(
+    (command, value) => {
+      if (!applyFormat) return;
+      applyFormat(command, value);
+      if (wasMouseRef.current) {
+        setTimeout(() => {
+          focusActiveEditable();
+        }, 0);
+      }
+    },
+    [applyFormat]
+  );
+  const isLineHeightMixed = ((_b = activeTextStyles.isMixed) == null ? void 0 : _b.lineHeight) === true;
+  const {
+    lineSpacingPercent,
+    showMixed: showLineSpacingMixed,
+    handleLineSpacingChange,
+    handleLineSpacingBlur
+  } = useLineSpacing(
+    lineHeight,
+    activeTextStyles.lineHeight,
+    isLineHeightMixed,
+    applyFormat,
+    handleFormat,
+    stepLineSpacing
+  );
+  const handleFontFamilyChange = (0, react_exports.useCallback)(
+    (fontFamily) => handleFormat("fontName", fontFamily),
+    [handleFormat]
+  );
+  const onFontSizeChange = (0, react_exports.useCallback)(
+    (e, { value: val, reason }) => {
+      handleFontSizeChange(e, val, reason, {
+        stepFontSize,
+        setCurrentFontSize,
+        setFontSizePreset,
+        handleFormat,
+        fontSizeDirtyRef,
+        wasMouseRef
+      });
+    },
+    [stepFontSize, handleFormat]
+  );
+  useEditorPanelSync({
+    textAlign: activeTextStyles.textAlign,
+    setAlign,
+    verticalAlignProp,
+    setVerticalAlign,
+    activeFontSize: activeTextStyles.fontSize,
+    fontSizeDirtyRef,
+    setCurrentFontSize,
+    setFontSizePreset
+  });
+  const handleVerticalAlignChange = (0, react_exports.useCallback)(
+    (newAlign) => {
+      setVerticalAlign(newAlign);
+      onVerticalAlignChange == null ? void 0 : onVerticalAlignChange(newAlign);
+    },
+    [onVerticalAlignChange]
+  );
+  const {
+    isColorMixed,
+    isHighlightMixed,
+    isFontSizeMixed,
+    displayTextColor,
+    displayHighlightColor,
+    displayFontFamily
+  } = computeMixedDisplayStyles(activeTextStyles, fontColor);
+  const editorContainerRef = (0, react_exports.useRef)(null);
+  useConfigPanelFocus({ isEditMode, isActive, editorContainerRef, wasMouseRef });
   if (!isEditMode) return null;
   const editor = /* @__PURE__ */ react_default.createElement(EditorContainer, { ref: editorContainerRef, "data-test": "editor-purerichtext-content" }, /* @__PURE__ */ react_default.createElement(FontSelector, { value: displayFontFamily, onChange: handleFontFamilyChange }), /* @__PURE__ */ react_default.createElement(ControlGroup_default, { label: "Font size", labelPosition: "top" }, /* @__PURE__ */ react_default.createElement(Row, { style: { gap: "12px" } }, /* @__PURE__ */ react_default.createElement(
     Select_default,
@@ -4790,90 +5424,52 @@ var EditorPanel = ({
       value: isFontSizeMixed ? void 0 : fontSizePreset,
       placeholder: isFontSizeMixed ? "Mixed" : void 0,
       onChange: (_e, { value: val }) => {
-        const preset = FONT_SIZE_OPTIONS.find((p) => p.value === val);
-        if (preset) {
-          setCurrentFontSize(Number.parseInt(preset.value, 10));
-          setFontSizePreset(val);
-          handleFormat("fontSize", `${preset.value}px`);
-        } else {
-          setFontSizePreset("custom");
-        }
+        handleFontSizePresetChange(val, {
+          setCurrentFontSize,
+          setFontSizePreset,
+          handleFormat
+        });
       },
       style: { flex: 1, minWidth: 100 }
     },
     FONT_SIZE_OPTIONS.map(({ label, value }) => /* @__PURE__ */ react_default.createElement(Select_default.Option, { key: value, label, value })),
     /* @__PURE__ */ react_default.createElement(Select_default.Option, { label: "Custom", value: "custom" })
-  ), /* @__PURE__ */ react_default.createElement("div", { style: { width: "80px", flexShrink: 0 } }, /* @__PURE__ */ react_default.createElement(
-    Number_default,
+  ), /* @__PURE__ */ react_default.createElement(
+    "div",
     {
-      "aria-label": "Font size in pixels",
-      value: isFontSizeMixed ? void 0 : currentFontSize,
-      onFocus: () => {
-        fontSizeDirtyRef.current = false;
-      },
-      onChange: (_e, { value: val, reason }) => {
-        var _a2, _b2;
-        if (reason === "stepButton") {
-          if (!stepFontSize) {
-            if (val != null) {
-              setCurrentFontSize(val);
-              setFontSizePreset(getFontSizePreset(val));
-              handleFormat("fontSize", `${val}px`);
-            }
-            return;
-          }
-          const target = _e == null ? void 0 : _e.currentTarget;
-          const testId = ((_a2 = target == null ? void 0 : target.getAttribute) == null ? void 0 : _a2.call(target, "data-test")) || ((_b2 = target == null ? void 0 : target.getAttribute) == null ? void 0 : _b2.call(target, "data-testid")) || "";
-          const isDecrement = testId === "decrement" || testId.includes("down");
-          stepFontSize(isDecrement ? -2 : 2);
-          if (wasMouseRef.current) {
-            setTimeout(() => {
-              focusActiveEditable();
-            }, 0);
-          }
-          return;
-        }
-        if (val != null) {
-          fontSizeDirtyRef.current = true;
-          setCurrentFontSize(val);
-          setFontSizePreset(getFontSizePreset(val));
-        }
-      },
-      onKeyDown: (e) => {
-        if (e.key === "Enter" && currentFontSize) {
-          e.preventDefault();
-          e.stopPropagation();
+      style: { width: "80px", flexShrink: 0 },
+      onKeyDownCapture: stepFontSize ? (e) => handleFontSizeArrowCapture(e, stepFontSize) : void 0
+    },
+    /* @__PURE__ */ react_default.createElement(
+      Number_default,
+      {
+        "aria-label": "Font size in pixels",
+        value: isFontSizeMixed ? void 0 : currentFontSize,
+        onFocus: () => {
           fontSizeDirtyRef.current = false;
-          handleFormat("fontSize", `${currentFontSize}px`);
-        }
-        if (isFontSizeMixed) {
-          if (e.key === "ArrowUp") {
-            e.preventDefault();
-            stepFontSize == null ? void 0 : stepFontSize(2);
-          } else if (e.key === "ArrowDown") {
-            e.preventDefault();
-            stepFontSize == null ? void 0 : stepFontSize(-2);
-          }
-        }
-      },
-      onBlur: () => {
-        if (fontSizeDirtyRef.current && currentFontSize) {
-          handleFormat("fontSize", `${currentFontSize}px`);
-        }
-        fontSizeDirtyRef.current = false;
-      },
-      min: 8,
-      max: 200,
-      step: 1,
-      inline: true
-    }
-  )))), /* @__PURE__ */ react_default.createElement(ColorRow, null, /* @__PURE__ */ react_default.createElement(ControlGroup_default, { label: "Font color", labelPosition: "top" }, /* @__PURE__ */ react_default.createElement(
+        },
+        onChange: onFontSizeChange,
+        onKeyDown: (e) => {
+          handleFontSizeInputKeyDown(e, {
+            currentFontSize,
+            fontSizeDirtyRef,
+            handleFormat
+          });
+        },
+        onBlur: () => {
+          handleFontSizeInputBlur({ currentFontSize, fontSizeDirtyRef, handleFormat });
+        },
+        min: 8,
+        max: 200,
+        step: 1,
+        inline: true
+      }
+    )
+  ))), /* @__PURE__ */ react_default.createElement(ColorRow, null, /* @__PURE__ */ react_default.createElement(ControlGroup_default, { label: "Font color", labelPosition: "top" }, /* @__PURE__ */ react_default.createElement(
     MixedColorWrapper,
     {
       $isMixed: isColorMixed,
-      onClick: () => {
-        if (isColorMixed) focusMixedSwatch('[data-test="textbox-swatch"]');
-      }
+      onClick: () => handleMixedSwatchClick(isColorMixed)
     },
     /* @__PURE__ */ react_default.createElement(
       Color_default,
@@ -4888,9 +5484,7 @@ var EditorPanel = ({
     MixedColorWrapper,
     {
       $isMixed: isHighlightMixed,
-      onClick: () => {
-        if (isHighlightMixed) focusMixedSwatch('[data-test="textbox-swatch"]');
-      }
+      onClick: () => handleMixedSwatchClick(isHighlightMixed)
     },
     /* @__PURE__ */ react_default.createElement(
       Color_default,
@@ -4970,14 +5564,7 @@ var EditorPanel = ({
       $isActive: false,
       appearance: "secondary",
       onMouseDown: preventDefaultMouseDown,
-      onClick: () => {
-        resetToDefault == null ? void 0 : resetToDefault();
-        if (wasMouseRef.current) {
-          setTimeout(() => {
-            focusActiveEditable();
-          }, 0);
-        }
-      },
+      onClick: () => handleResetToDefault(resetToDefault, wasMouseRef),
       icon: /* @__PURE__ */ react_default.createElement(ArrowTurnBackLeft_default, null),
       "aria-label": "Reset to default"
     }
@@ -4988,32 +5575,37 @@ 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,
     {
       value: align,
       onChange: (_e, { value: val }) => {
-        const newAlign = val;
-        setAlign(newAlign);
-        if (newAlign === "left") handleFormat("justifyLeft");
-        else if (newAlign === "center") handleFormat("justifyCenter");
-        else if (newAlign === "right") handleFormat("justifyRight");
-        else if (newAlign === "justify") handleFormat("justifyFull");
+        handleAlignmentChange(val, setAlign, handleFormat);
       }
     },
     /* @__PURE__ */ react_default.createElement(
@@ -5081,18 +5673,11 @@ var EditorPanel = ({
       onChange: handleLineSpacingChange,
       onBlur: handleLineSpacingBlur,
       onKeyDown: (e) => {
-        if (e.key === "Enter") {
-          handleLineSpacingBlur();
-        }
-        if (isLineHeightMixed && stepLineSpacing) {
-          if (e.key === "ArrowUp") {
-            e.preventDefault();
-            stepLineSpacing(1);
-          } else if (e.key === "ArrowDown") {
-            e.preventDefault();
-            stepLineSpacing(-1);
-          }
-        }
+        handleLineSpacingKeyDown(e, {
+          isLineHeightMixed,
+          stepLineSpacing,
+          handleLineSpacingBlur
+        });
       },
       min: 100,
       max: 300,
@@ -5107,6 +5692,17 @@ var EditorPanel = ({
 };
 
 // src/RichText/PureRichText/RichTextStyles.tsx
+function justifyForVerticalAlign(align) {
+  switch (align) {
+    case "bottom":
+      return "flex-end";
+    case "middle":
+      return "center";
+    case "top":
+    default:
+      return "flex-start";
+  }
+}
 var PureRichTextContainer = styled_components_default.div`
     width: 100%;
     height: 100%;
@@ -5136,27 +5732,57 @@ var PureRichTextContainer = styled_components_default.div`
     ${(props) => props.$hasEventHandlers && !props.$isTextEditing && styled_components_exports.css`
             cursor: pointer;
         `}
+    /* Edit-mode only: hovering a selected block's edges/padding shows grab (PowerPoint-style).
+       EditorWrapper re-asserts its own cursor over the text content. */
+    ${(props) => props.$isEditMode && !props.$isTextEditing && styled_components_exports.css`
+            [data-selected='true'] & {
+                cursor: grab;
+            }
+        `}
 `;
 var DrilldownButton = styled_components_default(Button_default)`
     ${themes_exports.mixins.skipLink()}
-    /**
-     * Override the secondary Button's transparent default so the skip-link is visible when focused.
-     */
+    /* Override the secondary Button's transparent default so the skip-link is visible when focused. */
     &:not([disabled], [aria-disabled='true']) {
         background-color: ${themes_exports.variables.backgroundColorSection};
     }
 `;
 var EditorWrapper = styled_components_default.div`
     width: 100%;
+    /* Fill the container's content box so a click anywhere over the text region enters editing, not
+       just the top. Vertical alignment moves here from the container to keep text top/middle/bottom. */
+    flex: 1 1 auto;
     min-height: 0;
     max-height: 100%;
+    display: flex;
+    flex-direction: column;
     overflow: auto;
-    cursor: ${(props) => props.$isTextEditing ? "text" : "default"};
+    /* Cursor over text: editing -> text; view mode w/ interaction -> pointer; view mode plain -> text;
+       edit mode not editing -> default (grab layered below when selected). */
+    cursor: ${(props) => {
+  if (props.$isTextEditing) return "text";
+  if (props.$hasEventHandlers && !props.$isEditMode) return "pointer";
+  if (!props.$isEditMode) return "text";
+  return "default";
+}};
+
+    /* Selected in edit mode (not editing): grab cursor over the whole block including text, so it
+       doesn't flip to default crossing from padding into text. View mode keeps text/pointer. */
+    ${(props) => props.$isEditMode && !props.$isTextEditing && styled_components_exports.css`
+            [data-selected='true'] & {
+                cursor: grab;
+            }
+        `}
 
     /* Styling for the Slate editor */
     [data-slate-editor] {
         outline: none;
+        /* Fill the stretched wrapper so a click anywhere enters editing, but keep the editable as the
+           vertical-align flex column: the stretched wrapper has no free space to align short content. */
         min-height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: ${(props) => justifyForVerticalAlign(props.$verticalAlign)};
     }
 
     /* Underline styling - match text color */
@@ -5221,8 +5847,179 @@ var LiveRegion = styled_components_default.div`
     border: 0;
 `;
 
+// src/RichText/PureRichText/utils/fontSize.ts
+var getFontSizeInPx = (fontSize, customFontSize) => {
+  if (fontSize === "custom" && customFontSize) {
+    return customFontSize;
+  }
+  return FONT_SIZE_PRESETS[fontSize || "default"];
+};
+
 // src/RichText/PureRichText/renderers/ElementRenderer.tsx
-var createElementRenderer = (isEditMode, defaultLineHeight) => {
+function isBrokenHref(href) {
+  if (!href) return false;
+  if (href.startsWith("/")) return false;
+  return !isOpenableUrl(href);
+}
+function frameworkFlagsHref(href, onLinkOpen) {
+  if (!onLinkOpen) return false;
+  return !/\s/.test(href) && /^https?:\/\//i.test(href);
+}
+function frameworkHandlesHref(href) {
+  if (/\s/.test(href)) return false;
+  return /^https?:\/\//i.test(href) || /^\/(?!\/)/.test(href);
+}
+var _a;
+var platformString = typeof navigator !== "undefined" && (((_a = navigator.userAgentData) == null ? void 0 : _a.platform) || navigator.platform) || "";
+var isMacPlatform = /Mac|iP(hone|ad|od)/.test(platformString);
+var OVERLAY_STYLE = {
+  position: "fixed",
+  transform: "translateY(-100%) translateY(-6px)",
+  zIndex: 2147483647,
+  maxWidth: 320,
+  padding: "4px 8px",
+  borderRadius: 4,
+  background: "#3c444d",
+  color: "#fff",
+  fontSize: 12,
+  lineHeight: 1.4,
+  overflowWrap: "anywhere",
+  pointerEvents: "none",
+  boxShadow: "0 2px 8px rgba(0,0,0,0.4)"
+};
+var styleBlock = { display: "block" };
+var styleBlockOpacity = { display: "block", opacity: 0.75 };
+var LinkFollowTooltip = ({
+  show,
+  pos,
+  href
+}) => {
+  const { fontFamily } = (0, themes_exports.useSplunkTheme)();
+  if (!show || !pos || typeof document === "undefined") return null;
+  return (0, react_dom_exports.createPortal)(
+    /* @__PURE__ */ react_exports.createElement("span", { contentEditable: false, style: __spreadProps(__spreadValues({}, OVERLAY_STYLE), { top: pos.top, left: pos.left, fontFamily }) }, /* @__PURE__ */ react_exports.createElement("span", { style: styleBlock }, href), /* @__PURE__ */ react_exports.createElement("span", { style: styleBlockOpacity }, isMacPlatform ? "\u2318" : "Ctrl", "+click to open")),
+    document.body
+  );
+};
+var BrokenLinkNote = ({ pos, href }) => {
+  const { fontFamily } = (0, themes_exports.useSplunkTheme)();
+  if (!pos || typeof document === "undefined") return null;
+  return (0, react_dom_exports.createPortal)(
+    /* @__PURE__ */ react_exports.createElement(
+      "span",
+      {
+        role: "alert",
+        contentEditable: false,
+        style: __spreadProps(__spreadValues({}, OVERLAY_STYLE), { top: pos.top, left: pos.left, fontFamily })
+      },
+      /* @__PURE__ */ react_exports.createElement("span", { style: styleBlock }, "This link can't be opened."),
+      /* @__PURE__ */ react_exports.createElement("span", { style: styleBlockOpacity }, href)
+    ),
+    document.body
+  );
+};
+function handleAnchorMouseDown(e, ctx) {
+  if (ctx.isEditMode && !e.metaKey && !e.ctrlKey) e.preventDefault();
+}
+function handleAnchorMouseLeave(ctx) {
+  if (ctx.isEditMode) ctx.hideTooltip();
+  ctx.clearBrokenNote();
+}
+function handleAnchorClick(e, ctx) {
+  if (ctx.isEditMode) {
+    e.preventDefault();
+    if (e.metaKey || e.ctrlKey) {
+      e.stopPropagation();
+      ctx.activateLink(e.currentTarget);
+    }
+    return;
+  }
+  e.stopPropagation();
+  if (ctx.showBrokenNote || ctx.routeToFramework) {
+    e.preventDefault();
+    ctx.activateLink(e.currentTarget);
+  }
+}
+function handleAnchorKeyDown(e, ctx) {
+  if (!ctx.isEditMode && e.key === "Enter") {
+    e.preventDefault();
+    e.stopPropagation();
+    ctx.activateLink(e.currentTarget);
+  }
+}
+var LinkElement = ({ attributes, children, isEditMode, url, nameToValue, onLinkOpen }) => {
+  const normalizedHref = resolveLinkHref(url, nameToValue);
+  const broken = isBrokenHref(normalizedHref);
+  const showBrokenNote = broken && !frameworkFlagsHref(normalizedHref, onLinkOpen);
+  const routeToFramework = !!onLinkOpen && frameworkHandlesHref(normalizedHref);
+  const [tooltipPos, setTooltipPos] = (0, react_exports.useState)(null);
+  const [brokenPos, setBrokenPos] = (0, react_exports.useState)(null);
+  const dismissTimer = (0, react_exports.useRef)();
+  const flagBroken = (0, react_exports.useCallback)((el) => {
+    const rect = el.getBoundingClientRect();
+    setBrokenPos({ top: rect.top, left: rect.left });
+  }, []);
+  (0, react_exports.useEffect)(() => {
+    if (!brokenPos) return void 0;
+    dismissTimer.current = setTimeout(() => setBrokenPos(null), 2500);
+    return () => clearTimeout(dismissTimer.current);
+  }, [brokenPos]);
+  const showTooltip = (0, react_exports.useCallback)((ev) => {
+    const rect = ev.currentTarget.getBoundingClientRect();
+    setTooltipPos({ top: rect.top, left: rect.left });
+  }, []);
+  const hideTooltip = (0, react_exports.useCallback)(() => setTooltipPos(null), []);
+  const activateLink = (0, react_exports.useCallback)(
+    (el) => {
+      if (showBrokenNote) {
+        flagBroken(el);
+        return;
+      }
+      openHref(normalizedHref, onLinkOpen);
+    },
+    [showBrokenNote, flagBroken, normalizedHref, onLinkOpen]
+  );
+  const clearBrokenNote = (0, react_exports.useCallback)(() => setBrokenPos(null), []);
+  const ctx = {
+    isEditMode,
+    showBrokenNote,
+    routeToFramework,
+    activateLink,
+    hideTooltip,
+    clearBrokenNote
+  };
+  return /* @__PURE__ */ react_exports.createElement(
+    "a",
+    __spreadProps(__spreadValues({
+      href: normalizedHref,
+      style: { display: "inline" }
+    }, attributes), {
+      target: isEditMode || routeToFramework || broken ? void 0 : "_blank",
+      rel: isEditMode || routeToFramework ? void 0 : "noopener noreferrer",
+      tabIndex: isEditMode ? void 0 : 0,
+      onMouseDown: (e) => handleAnchorMouseDown(e, ctx),
+      onMouseEnter: isEditMode ? showTooltip : void 0,
+      onMouseLeave: () => handleAnchorMouseLeave(ctx),
+      onClick: (e) => handleAnchorClick(e, ctx),
+      onKeyDown: (e) => handleAnchorKeyDown(e, ctx)
+    }),
+    children,
+    /* @__PURE__ */ react_exports.createElement(LinkFollowTooltip, { show: isEditMode, pos: tooltipPos, href: normalizedHref }),
+    /* @__PURE__ */ react_exports.createElement(BrokenLinkNote, { pos: brokenPos, href: normalizedHref })
+  );
+};
+function openHref(href, onLinkOpen) {
+  if (!href) return;
+  if (onLinkOpen && frameworkHandlesHref(href)) {
+    onLinkOpen(href);
+    return;
+  }
+  try {
+    window.open(href, "_blank", "noopener,noreferrer");
+  } catch (e) {
+  }
+}
+var createElementRenderer = (isEditMode, defaultLineHeight, nameToValue, onLinkOpen) => {
   return function ElementRenderer({ attributes, children, element }) {
     const customElement = element;
     const baseStyle = {
@@ -5247,36 +6044,23 @@ var createElementRenderer = (isEditMode, defaultLineHeight) => {
         if (firstLeaf == null ? void 0 : firstLeaf.fontSize) {
           listItemStyle.fontSize = firstLeaf.fontSize;
         }
-        const fontSize = parseInt(String((firstLeaf == null ? void 0 : firstLeaf.fontSize) || "0"), 10);
+        const fontSize = Number.parseInt(String((firstLeaf == null ? void 0 : firstLeaf.fontSize) || "0"), 10);
         if (customElement.align === "center" || customElement.align === "right" || fontSize > 24) {
           listItemStyle.listStylePosition = "inside";
         }
         return /* @__PURE__ */ react_exports.createElement("li", __spreadValues({ style: listItemStyle }, attributes), children);
       }
       case "link": {
-        const normalizedHref = normalizeUrl(customElement.url || "");
         return /* @__PURE__ */ react_exports.createElement(
-          "a",
-          __spreadProps(__spreadValues({
-            href: normalizedHref,
-            style: { display: "inline" }
-          }, attributes), {
-            target: isEditMode ? void 0 : "_blank",
-            rel: isEditMode ? void 0 : "noopener noreferrer",
-            tabIndex: isEditMode ? void 0 : 0,
-            onClick: (e) => {
-              if (isEditMode) {
-                e.preventDefault();
-                return;
-              }
-              e.stopPropagation();
-            },
-            onKeyDown: (e) => {
-              if (!isEditMode && e.key === "Enter") {
-                window.open(normalizedHref, "_blank", "noopener,noreferrer");
-              }
-            }
-          }),
+          LinkElement,
+          {
+            attributes,
+            element,
+            isEditMode,
+            url: customElement.url || "",
+            nameToValue,
+            onLinkOpen
+          },
           children
         );
       }
@@ -5318,18 +6102,60 @@ var Leaf = ({ attributes, children, leaf }) => {
   if (customLeaf.strikethrough) {
     content = /* @__PURE__ */ react_exports.createElement("s", null, content);
   }
-  return /* @__PURE__ */ react_exports.createElement("span", __spreadProps(__spreadValues({}, attributes), { style }), content);
-};
-
-// src/RichText/PureRichText/utils/fontSize.ts
-var getFontSizeInPx = (fontSize, customFontSize) => {
-  if (fontSize === "custom" && customFontSize) {
-    return customFontSize;
+  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 FONT_SIZE_PRESETS[fontSize || "default"];
+  return /* @__PURE__ */ react_exports.createElement("span", __spreadProps(__spreadValues({}, attributes), { style }), content);
 };
 
 // src/RichText/PureRichText/hooks/useEditorSetup.ts
+function pointAfterLinkInBlock(e, linkPath) {
+  const blockEntry = slate_exports.Editor.above(e, {
+    at: linkPath,
+    match: (n) => !slate_exports.Editor.isEditor(n) && slate_exports.Element.isElement(n) && slate_exports.Editor.isBlock(e, n)
+  });
+  const after = slate_exports.Editor.after(e, linkPath);
+  if (after && blockEntry && slate_exports.Path.isDescendant(after.path, blockEntry[1])) {
+    return after;
+  }
+  return null;
+}
+function pointBeforeLinkInBlock(e, linkPath) {
+  const blockEntry = slate_exports.Editor.above(e, {
+    at: linkPath,
+    match: (n) => !slate_exports.Editor.isEditor(n) && slate_exports.Element.isElement(n) && slate_exports.Editor.isBlock(e, n)
+  });
+  const before = slate_exports.Editor.before(e, linkPath);
+  if (before && blockEntry && slate_exports.Path.isDescendant(before.path, blockEntry[1])) {
+    return before;
+  }
+  return null;
+}
+function exitLinkStartBeforeInsert(e) {
+  const { selection } = e;
+  if (!selection || !slate_exports.Range.isCollapsed(selection)) return;
+  const above = slate_exports.Editor.above(e, {
+    match: (n) => !slate_exports.Editor.isEditor(n) && slate_exports.Element.isElement(n) && n.type === "link"
+  });
+  if (!above) return;
+  const [, linkPath] = above;
+  if (!slate_exports.Editor.isStart(e, selection.anchor, linkPath)) return;
+  let before = pointBeforeLinkInBlock(e, linkPath);
+  if (before) {
+    const prevLink = slate_exports.Editor.above(e, {
+      at: before,
+      match: (n) => !slate_exports.Editor.isEditor(n) && slate_exports.Element.isElement(n) && n.type === "link"
+    });
+    if (prevLink) before = null;
+  }
+  if (!before) {
+    slate_exports.Transforms.insertNodes(e, { text: "" }, { at: linkPath });
+    before = pointBeforeLinkInBlock(e, slate_exports.Path.next(linkPath));
+  }
+  if (before) {
+    slate_exports.Transforms.select(e, before);
+  }
+}
 function exitLinkBeforeInsert(e) {
   const { selection } = e;
   if (!selection || !slate_exports.Range.isCollapsed(selection)) return;
@@ -5338,8 +6164,17 @@ function exitLinkBeforeInsert(e) {
   });
   if (!above) return;
   const [, linkPath] = above;
+  if (slate_exports.Editor.isStart(e, selection.anchor, linkPath)) {
+    exitLinkStartBeforeInsert(e);
+    return;
+  }
   if (!slate_exports.Editor.isEnd(e, selection.anchor, linkPath)) return;
-  const after = slate_exports.Editor.after(e, linkPath);
+  let after = pointAfterLinkInBlock(e, linkPath);
+  if (!after) {
+    const trailingPath = slate_exports.Path.next(linkPath);
+    slate_exports.Transforms.insertNodes(e, { text: "" }, { at: trailingPath });
+    after = pointAfterLinkInBlock(e, linkPath);
+  }
   if (after) {
     slate_exports.Transforms.select(e, after);
   }
@@ -5419,7 +6254,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 }
@@ -5437,9 +6272,26 @@ function getLinkRangeAtPoint(e, point) {
 function getAtomicRangeAtPoint(e, point) {
   return getTokenRangeAtPoint(e, point) || getLinkRangeAtPoint(e, point);
 }
+function deleteAtomicRange(e, point, range2) {
+  const linkEntry = slate_exports.Editor.above(e, {
+    at: point,
+    match: (n) => !slate_exports.Editor.isEditor(n) && slate_exports.Element.isElement(n) && n.type === "link"
+  });
+  if (linkEntry) {
+    const [, linkPath] = linkEntry;
+    const before = slate_exports.Editor.before(e, slate_exports.Editor.start(e, linkPath));
+    const after = slate_exports.Editor.after(e, slate_exports.Editor.end(e, linkPath));
+    if (before) slate_exports.Transforms.select(e, before);
+    else if (after) slate_exports.Transforms.select(e, after);
+    slate_exports.Transforms.removeNodes(e, { at: linkPath });
+    return;
+  }
+  slate_exports.Transforms.delete(e, { at: range2 });
+}
 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, {
@@ -5460,16 +6312,16 @@ function getPointAfterAtomic(e, point) {
   });
   if (linkEntry) {
     const [, linkPath] = linkEntry;
-    return slate_exports.Editor.after(e, linkPath) || null;
+    return pointAfterLinkInBlock(e, linkPath);
   }
   const tokenRange = getTokenRangeAtPoint(e, point);
   if (tokenRange) return tokenRange.focus;
   return null;
 }
 function getAtomicExpansion(atomicRange, isAnchorEndpoint, isBackward) {
-  const adjustAnchor = isAnchorEndpoint ? !isBackward : isBackward;
-  const target = adjustAnchor ? atomicRange.anchor : atomicRange.focus;
-  return { adjustAnchor, target };
+  const isLeftEnd = isAnchorEndpoint ? !isBackward : isBackward;
+  const target = isLeftEnd ? atomicRange.anchor : atomicRange.focus;
+  return { adjustAnchor: isAnchorEndpoint, target };
 }
 function snapEndpointToAtomic(e, point, isAnchorEndpoint, anchor, focus, isBackward) {
   const atomicRange = getAtomicRangeAtPoint(e, point);
@@ -5514,11 +6366,27 @@ function expandSelectionToAtomic(e) {
   }
 }
 function moveCursorPastAtomicIfNeeded(e) {
+  var _a2;
   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 = (_a2 = slate_exports.Editor.marks(e)) != null ? _a2 : {};
+    const marksWithoutToken = __spreadValues({}, currentMarks);
+    delete marksWithoutToken.tokenName;
+    delete marksWithoutToken.tokenOccurrence;
+    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,22 +6405,63 @@ 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 atomicRangeBefore(ed, point) {
+  const before = slate_exports.Editor.before(ed, point);
+  if (!before || !inSameBlock(ed, point, before)) return null;
+  const direct = getAtomicRangeAtPoint(ed, before);
+  if (direct) return { range: direct, at: before };
+  const [node] = slate_exports.Editor.node(ed, before.path);
+  if (slate_exports.Text.isText(node) && node.text === "") {
+    const prior = slate_exports.Editor.before(ed, before);
+    if (prior && inSameBlock(ed, point, prior)) {
+      const priorRange = getAtomicRangeAtPoint(ed, prior);
+      if (priorRange) return { range: priorRange, at: prior };
+    }
+  }
+  return null;
+}
+function atomicRangeAfter(ed, point) {
+  const after = slate_exports.Editor.after(ed, point);
+  if (!after || !inSameBlock(ed, point, after)) return null;
+  const direct = getAtomicRangeAtPoint(ed, after);
+  if (direct) return { range: direct, at: after };
+  const [node] = slate_exports.Editor.node(ed, after.path);
+  if (slate_exports.Text.isText(node) && node.text === "") {
+    const next = slate_exports.Editor.after(ed, after);
+    if (next && inSameBlock(ed, point, next)) {
+      const nextRange = getAtomicRangeAtPoint(ed, next);
+      if (nextRange) return { range: nextRange, at: next };
+    }
+  }
+  return null;
+}
 function tryDeleteAtomicBackward(ed, anchor) {
   if (isStrictlyInsideAtomic(ed, anchor)) {
     const range2 = getAtomicRangeAtPoint(ed, anchor);
-    if (range2) slate_exports.Transforms.delete(ed, { at: range2 });
+    if (range2) deleteAtomicRange(ed, anchor, range2);
     return true;
   }
   const currentRange = getAtomicRangeAtPoint(ed, anchor);
   if (currentRange && slate_exports.Point.equals(anchor, currentRange.focus)) {
-    slate_exports.Transforms.delete(ed, { at: currentRange });
+    deleteAtomicRange(ed, anchor, currentRange);
     return true;
   }
-  if (currentRange) return false;
-  const before = slate_exports.Editor.before(ed, anchor);
-  const prevRange = before ? getAtomicRangeAtPoint(ed, before) : null;
-  if (!prevRange) return false;
-  slate_exports.Transforms.delete(ed, { at: prevRange });
+  if (currentRange && !slate_exports.Point.equals(anchor, currentRange.anchor)) return false;
+  const prev = atomicRangeBefore(ed, anchor);
+  if (!prev) return false;
+  deleteAtomicRange(ed, prev.at, prev.range);
   return true;
 }
 function tryUnwrapListItem(ed, anchor) {
@@ -5584,19 +6493,18 @@ function tryUnwrapListItem(ed, anchor) {
 function tryDeleteAtomicForward(ed, anchor) {
   if (isStrictlyInsideAtomic(ed, anchor)) {
     const range2 = getAtomicRangeAtPoint(ed, anchor);
-    if (range2) slate_exports.Transforms.delete(ed, { at: range2 });
+    if (range2) deleteAtomicRange(ed, anchor, range2);
     return true;
   }
   const fwdRange = getAtomicRangeAtPoint(ed, anchor);
   if (fwdRange && slate_exports.Point.equals(anchor, fwdRange.anchor)) {
-    slate_exports.Transforms.delete(ed, { at: fwdRange });
+    deleteAtomicRange(ed, anchor, fwdRange);
     return true;
   }
-  if (fwdRange) return false;
-  const after = slate_exports.Editor.after(ed, anchor);
-  const nextRange = after ? getAtomicRangeAtPoint(ed, after) : null;
-  if (!nextRange) return false;
-  slate_exports.Transforms.delete(ed, { at: nextRange });
+  if (fwdRange && !slate_exports.Point.equals(anchor, fwdRange.focus)) return false;
+  const next = atomicRangeAfter(ed, anchor);
+  if (!next) return false;
+  deleteAtomicRange(ed, next.at, next.range);
   return true;
 }
 function recoverStaleSelection(e) {
@@ -5621,15 +6529,27 @@ function expandAtomicPreservingMarks(e) {
     e.marks = savedMarks;
   }
 }
+function stripAtomicMarksInRange(e, range2) {
+  slate_exports.Transforms.unsetNodes(e, ["tokenName", "tokenOccurrence", "isEscapedDollar", "isRawToken"], {
+    at: range2,
+    match: (n) => slate_exports.Text.isText(n) && (Boolean(n.tokenName) || Boolean(n.isEscapedDollar))
+  });
+}
 function installInsertOverrides(e, defaultTextStyleRef, onBeforeBreak) {
   const { insertText, insertBreak } = e;
   e.insertText = (text) => {
     if (text && isLinkActive(e)) {
+      if (e.selection && !slate_exports.Range.isCollapsed(e.selection)) {
+        slate_exports.Transforms.delete(e);
+      }
       exitLinkBeforeInsert(e);
     }
     if (text === " " && handleAutoformat(e, defaultTextStyleRef)) {
       return;
     }
+    if (e.selection && !slate_exports.Range.isCollapsed(e.selection)) {
+      stripAtomicMarksInRange(e, e.selection);
+    }
     moveCursorPastAtomicIfNeeded(e);
     insertText(text);
   };
@@ -5640,6 +6560,15 @@ function installInsertOverrides(e, defaultTextStyleRef, onBeforeBreak) {
     insertBreak();
   };
 }
+function handleTextInsert(e, event) {
+  if (event.inputType !== "insertText" || typeof event.data !== "string" || event.data === "") {
+    return false;
+  }
+  if (!e.selection) return false;
+  event.preventDefault();
+  e.insertText(event.data);
+  return true;
+}
 function installDeleteOverrides(e) {
   const { deleteBackward, deleteForward } = e;
   e.deleteBackward = (unit) => {
@@ -5658,6 +6587,67 @@ function installDeleteOverrides(e) {
     deleteForward(unit);
   };
 }
+function getTokenRun(children, start) {
+  const first = children[start];
+  if (!slate_exports.Text.isText(first) || !first.tokenName) return null;
+  let end = start + 1;
+  while (end < children.length) {
+    const child = children[end];
+    if (!slate_exports.Text.isText(child) || child.tokenName !== first.tokenName) break;
+    end += 1;
+  }
+  return { start, end, first };
+}
+function normalizeTokenRun(e, children, path, run) {
+  const { start, end, first } = run;
+  if (end - start === 1) {
+    if (first.tokenOccurrence === void 0) return false;
+    slate_exports.Transforms.unsetNodes(e, "tokenOccurrence", { at: path.concat(start) });
+    return true;
+  }
+  for (let index = start; index < end; index += 1) {
+    const child = children[index];
+    const occurrence = index - start;
+    if (child.tokenOccurrence !== occurrence) {
+      slate_exports.Transforms.setNodes(e, { tokenOccurrence: occurrence }, { at: path.concat(index) });
+      return true;
+    }
+  }
+  return false;
+}
+function normalizeAdjacentTokenOccurrences(e, node, path) {
+  let start = 0;
+  while (start < node.children.length) {
+    const run = getTokenRun(node.children, start);
+    if (run) {
+      if (normalizeTokenRun(e, node.children, path, run)) return true;
+      start = run.end;
+    } else {
+      start += 1;
+    }
+  }
+  return false;
+}
+function installNormalizeOverride(e) {
+  const { normalizeNode } = e;
+  e.normalizeNode = (entry) => {
+    const [node, path] = entry;
+    if (slate_exports.Element.isElement(node) && normalizeAdjacentTokenOccurrences(e, node, path)) {
+      return;
+    }
+    if (slate_exports.Text.isText(node) && node.text === "" && (node.tokenName || node.isEscapedDollar)) {
+      slate_exports.Transforms.unsetNodes(e, ["tokenName", "tokenOccurrence", "isEscapedDollar", "isRawToken"], {
+        at: path
+      });
+      return;
+    }
+    if (slate_exports.Element.isElement(node) && node.type === "link" && slate_exports.Node.string(node) === "") {
+      slate_exports.Transforms.removeNodes(e, { at: path });
+      return;
+    }
+    normalizeNode(entry);
+  };
+}
 function installOnChangeOverride(e, getSavedMarks, clearSavedMarks) {
   const { onChange } = e;
   e.onChange = () => {
@@ -5681,6 +6671,7 @@ function useEditorSetup(defaultTextStyleRef) {
       savedMarksForOnChange = slate_exports.Editor.marks(e);
     });
     installDeleteOverrides(e);
+    installNormalizeOverride(e);
     installOnChangeOverride(
       e,
       () => savedMarksForOnChange,
@@ -5704,24 +6695,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 +6706,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 +6749,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 +6772,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 {
@@ -5833,26 +6816,149 @@ 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;
+  var _a2;
+  const value = (_a2 = ref == null ? void 0 : ref.current) != null ? _a2 : false;
   if (value && ref) {
     ref.current = false;
   }
   return value;
 }
-function shouldSkipSync(forceSync, richTextContent, lastEmittedHtml, recentSavesRef, hasFocusRef) {
+function shouldSkipSync(forceSync, richTextContent, recentSavesRef, isTextEditingRef, hasFocusRef) {
   if (forceSync) return false;
   if (recentSavesRef == null ? void 0 : recentSavesRef.current.has(richTextContent)) return true;
-  if (hasFocusRef.current) return true;
+  if (isTextEditingRef.current && hasFocusRef.current) return true;
   return false;
 }
+function shouldSkipUnchangedContent(explicitForceSync, contentMatchesLastEdit, initialValueChanged, syncInitialValueChanges) {
+  return !explicitForceSync && contentMatchesLastEdit && (!initialValueChanged || !syncInitialValueChanges);
+}
+function recordSkippedExternalContent(isRecentSave, richTextContent, lastEmittedHtmlRef) {
+  if (!isRecentSave) {
+    lastEmittedHtmlRef.current = richTextContent;
+  }
+}
+function getSavedSelection(history, incomingIdx, lastSelection) {
+  var _a2;
+  if (incomingIdx === -1) return lastSelection;
+  return ((_a2 = history[incomingIdx + 1]) == null ? void 0 : _a2.preSelection) || history[incomingIdx].selection || lastSelection;
+}
+function getTreeToApply(forceSync, richTextContent, initialValue, transformTree) {
+  if (!forceSync || !richTextContent) return initialValue;
+  const parsed = htmlToSlate(richTextContent);
+  return transformTree ? transformTree(parsed) : parsed;
+}
+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(() => {
+      var _a2;
+      return (_a2 = autoResolveTokensRef.current) == null ? void 0 : _a2.call(autoResolveTokensRef);
+    });
+  }
+}
+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,53 +6968,93 @@ function useContentSync({
   updateFakeHighlightAbs,
   fakeHighlightAbsRef,
   hasFocusRef,
+  isTextEditingRef,
   lastSelectionRef,
   recentSavesRef,
-  forceNextSyncRef
+  forceNextSyncRef,
+  transformTreeRef,
+  syncInitialValueChanges = true,
+  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 }
   ]);
   const historyPosRef = (0, react_exports.useRef)(0);
   const lastInitialValueRef = (0, react_exports.useRef)(initialValue);
   (0, react_exports.useEffect)(() => {
+    var _a2;
     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
+    const explicitForceSync = consumeForceSync(forceNextSyncRef);
+    const contentMatchesLastEdit = richTextContent === lastEmittedHtmlRef.current;
+    if (shouldSkipUnchangedContent(
+      explicitForceSync,
+      contentMatchesLastEdit,
+      initialValueChanged,
+      syncInitialValueChanges
     )) {
-      lastEmittedHtmlRef.current = richTextContent;
       return;
     }
     const history = emittedHistoryRef.current;
     const incomingIdx = findHistoryIndex(history, richTextContent);
+    const isRecentSave = (_a2 = recentSavesRef == null ? void 0 : recentSavesRef.current.has(richTextContent)) != null ? _a2 : false;
     const isExternalContentChange = richTextContent !== lastEmittedHtmlRef.current;
+    const isHistoryRevert = isExternalContentChange && incomingIdx !== -1 && !isRecentSave;
+    const forceSync = explicitForceSync || isHistoryRevert;
+    if (shouldSkipSync(forceSync, richTextContent, recentSavesRef, isTextEditingRef, hasFocusRef)) {
+      recordSkippedExternalContent(isRecentSave, richTextContent, lastEmittedHtmlRef);
+      return;
+    }
     const pendingMarks = isExternalContentChange ? null : editor.marks;
     lastEmittedHtmlRef.current = richTextContent;
     if (incomingIdx !== -1) {
       historyPosRef.current = incomingIdx;
     }
-    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;
+    const savedSelection = getSavedSelection(history, incomingIdx, lastSelectionRef.current);
+    const treeToApply = getTreeToApply(
+      forceSync,
+      richTextContent,
+      initialValue,
+      transformTreeRef == null ? void 0 : transformTreeRef.current
+    );
     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]);
+    if (!hasFocusRef.current) {
+      editor.onChange();
+    }
+  }, [
+    initialValue,
+    richTextContent,
+    editor,
+    lastSelectionRef,
+    hasFocusRef,
+    syncInitialValueChanges,
+    fakeHighlightAbsRef,
+    forceNextSyncRef,
+    isTextEditingRef,
+    recentSavesRef,
+    transformTreeRef,
+    updateFakeHighlightAbs
+  ]);
+  (0, react_exports.useEffect)(() => {
+    return () => cancelPendingStyleUpdate(styleUpdateRafRef);
+  }, []);
   const handleChange = (0, react_exports.useCallback)(
     (newValue) => {
       setValue(newValue);
@@ -5920,27 +7066,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 +7096,11 @@ function useContentSync({
       updateFakeHighlightAbs,
       fakeHighlightAbsRef,
       hasFocusRef,
-      lastSelectionRef
+      lastSelectionRef,
+      autoResolveTokensRef
     ]
   );
-  return { value, handleChange };
+  return { value, handleChange, lastEmittedHtmlRef };
 }
 
 // src/RichText/PureRichText/hooks/useKeyboardShortcuts.ts
@@ -5997,9 +7145,13 @@ function handleTabKey(editor, event) {
   const [parentListNode] = parentList;
   const parentListElement = parentListNode;
   const listType = parentListElement.type === "numbered-list" ? "numbered-list" : "bulleted-list";
-  slate_exports.Transforms.wrapNodes(editor, { type: listType, children: [] }, {
-    at: listItemPath
-  });
+  slate_exports.Transforms.wrapNodes(
+    editor,
+    { type: listType, children: [] },
+    {
+      at: listItemPath
+    }
+  );
 }
 function cycleAlignment(editor, applyFormat) {
   const cycle = {
@@ -6141,7 +7293,7 @@ function restoreSelection(editor, fakeHighlightAbsRef, lastSelectionRef) {
 }
 function stepCollapsed(editor, delta, updateActiveStyles) {
   const marks = slate_exports.Editor.marks(editor);
-  const current = (marks == null ? void 0 : marks.fontSize) ? parseInt(String(marks.fontSize), 10) : 14;
+  const current = (marks == null ? void 0 : marks.fontSize) ? Number.parseInt(String(marks.fontSize), 10) : 14;
   slate_exports.Editor.addMark(editor, "fontSize", `${clampFontSize(current + delta)}px`);
   updateActiveStyles();
 }
@@ -6154,7 +7306,7 @@ function collectTextEntries(editor) {
     match: (n) => slate_exports.Text.isText(n)
   })) {
     const fontSize = node.fontSize;
-    const cur = fontSize ? parseInt(fontSize, 10) : 14;
+    const cur = fontSize ? Number.parseInt(fontSize, 10) : 14;
     const nodeStart = slate_exports.Editor.start(editor, path);
     const nodeEnd = slate_exports.Editor.end(editor, path);
     const start = slate_exports.Point.compare(nodeStart, selStart) >= 0 ? nodeStart : selStart;
@@ -6183,7 +7335,7 @@ function useStepFontSize({
 }) {
   const stepFontSize = (0, react_exports.useCallback)(
     (delta) => {
-      var _a;
+      var _a2;
       restoreSelection(editor, fakeHighlightAbsRef, lastSelectionRef);
       if (!editor.selection) return;
       if (slate_exports.Range.isCollapsed(editor.selection)) {
@@ -6201,7 +7353,7 @@ function useStepFontSize({
         editor.selection = { anchor: newStart, focus: newEnd };
         updateActiveStyles();
       }
-      (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+      (_a2 = globalThis.getSelection()) == null ? void 0 : _a2.removeAllRanges();
     },
     [editor, fakeHighlightAbsRef, lastSelectionRef, updateFakeHighlightAbs, updateActiveStyles]
   );
@@ -6234,7 +7386,7 @@ function useStepLineSpacing({
 }) {
   const stepLineSpacing = (0, react_exports.useCallback)(
     (delta) => {
-      var _a;
+      var _a2;
       if (!editor.selection && fakeHighlightAbsRef.current) {
         const s = absOffsetToPoint(editor, fakeHighlightAbsRef.current.absStart, true);
         const e = absOffsetToPoint(editor, fakeHighlightAbsRef.current.absEnd);
@@ -6274,7 +7426,7 @@ function useStepLineSpacing({
         editor.selection = { anchor: newStart, focus: newEnd };
         updateActiveStyles();
       }
-      (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+      (_a2 = globalThis.getSelection()) == null ? void 0 : _a2.removeAllRanges();
     },
     [editor, fakeHighlightAbsRef, lastSelectionRef, updateFakeHighlightAbs, updateActiveStyles]
   );
@@ -6286,8 +7438,8 @@ function useStepLineSpacing({
 
 // src/RichText/PureRichText/hooks/useFocusHandlers.ts
 function findConfigPanel() {
-  var _a;
-  return ((_a = document.querySelector('[data-test="editor-richTextContent"]')) == null ? void 0 : _a.closest('[class*="StyledInsetWrapper"]')) || document.querySelector('[data-test="editor-richTextContent"]') || document.querySelector('[data-test="editor-purerichtext"]') || document.querySelector('[data-test="sidebar-content"]') || null;
+  var _a2;
+  return ((_a2 = document.querySelector('[data-test="editor-richTextContent"]')) == null ? void 0 : _a2.closest('[class*="StyledInsetWrapper"]')) || document.querySelector('[data-test="editor-richTextContent"]') || document.querySelector('[data-test="editor-purerichtext"]') || document.querySelector('[data-test="sidebar-content"]') || null;
 }
 function isFocusInPanelUI(relatedTarget, configPanel) {
   if (!relatedTarget) return false;
@@ -6317,15 +7469,15 @@ function useFocusHandlers({
   onDeactivateTextEditing
 }) {
   const handleFocus = (0, react_exports.useCallback)(() => {
-    var _a, _b;
+    var _a2, _b;
     if (wasTextEditingRef.current) {
       updateFakeHighlightAbs(null);
       wasTextEditingRef.current = false;
     }
     if (!isTextEditingRef.current) {
-      (_a = editableRef.current) == null ? void 0 : _a.blur();
+      (_a2 = editableRef.current) == null ? void 0 : _a2.blur();
       safeDeselect(editor);
-      (_b = window.getSelection()) == null ? void 0 : _b.removeAllRanges();
+      (_b = globalThis.getSelection()) == null ? void 0 : _b.removeAllRanges();
       return;
     }
     hasFocusRef.current = true;
@@ -6333,7 +7485,7 @@ function useFocusHandlers({
   }, [onFocusGained, editor, editableRef, hasFocusRef, wasTextEditingRef, updateFakeHighlightAbs]);
   const handleBlur = (0, react_exports.useCallback)(
     (e) => {
-      var _a, _b;
+      var _a2, _b;
       saveSelection();
       hasFocusRef.current = false;
       const sel = editor.selection ? { anchor: __spreadValues({}, editor.selection.anchor), focus: __spreadValues({}, editor.selection.focus) } : lastSelectionRef.current;
@@ -6356,14 +7508,14 @@ function useFocusHandlers({
         if (canShowFakeHighlight) {
           updateFakeHighlight(sel);
         }
-        (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+        (_a2 = globalThis.getSelection()) == null ? void 0 : _a2.removeAllRanges();
       }
       if (!focusStaysInPanel) {
         updateFakeHighlight(null);
         wasTextEditingRef.current = false;
         lastSelectionRef.current = null;
         safeDeselect(editor);
-        (_b = window.getSelection()) == null ? void 0 : _b.removeAllRanges();
+        (_b = globalThis.getSelection()) == null ? void 0 : _b.removeAllRanges();
         onDeactivateTextEditing == null ? void 0 : onDeactivateTextEditing();
       }
       onFocusLost == null ? void 0 : onFocusLost();
@@ -6386,9 +7538,51 @@ function useFocusHandlers({
 }
 
 // src/RichText/PureRichText/hooks/useMouseHandlers.ts
+var MOVE_THRESHOLD = 4;
+function placeCaretAtPoint(editor, clientX, clientY, target, editableEl) {
+  try {
+    let domRange = null;
+    const doc = document;
+    if (typeof doc.caretRangeFromPoint === "function") {
+      domRange = doc.caretRangeFromPoint(clientX, clientY);
+    } else if (typeof doc.caretPositionFromPoint === "function") {
+      const pos = doc.caretPositionFromPoint(clientX, clientY);
+      if (pos) {
+        const r = document.createRange();
+        r.setStart(pos.offsetNode, pos.offset);
+        r.collapse(true);
+        domRange = r;
+      }
+    }
+    if (domRange) {
+      const sel = globalThis.getSelection();
+      sel == null ? void 0 : sel.removeAllRanges();
+      sel == null ? void 0 : sel.addRange(domRange);
+      const point = slate_react_exports.ReactEditor.toSlatePoint(editor, [domRange.startContainer, domRange.startOffset], {
+        exactMatch: false,
+        suppressThrow: true
+      });
+      if (point) {
+        slate_exports.Transforms.select(editor, point);
+        return;
+      }
+    }
+    if (target) {
+      const node = slate_react_exports.ReactEditor.toSlateNode(editor, target);
+      const path = slate_react_exports.ReactEditor.findPath(editor, node);
+      slate_exports.Transforms.select(editor, slate_exports.Editor.start(editor, path));
+      return;
+    }
+  } catch (e) {
+  }
+  if (!editorContentOverflows(editableEl != null ? editableEl : null)) {
+    safeSelectEnd(editor);
+  }
+}
 function useMouseHandlers({
   editor,
   editableRef,
+  containerRef,
   isEditMode,
   isTextEditing,
   onActivateTextEditing,
@@ -6396,31 +7590,45 @@ function useMouseHandlers({
 }) {
   const handleMouseDown = (0, react_exports.useCallback)(
     (e) => {
-      var _a;
+      var _a2, _b;
       if (isEditMode && !isTextEditing) {
-        onActivateTextEditing == null ? void 0 : onActivateTextEditing();
-        setMouseSelecting(true);
-        const onMouseUp = () => {
+        const isVizSelected = ((_a2 = containerRef.current) == null ? void 0 : _a2.closest('[data-selected="true"]')) != null;
+        if (isVizSelected) {
+          e.stopPropagation();
+        }
+        setSuppressNextEditClick(false);
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const onMouseUp = (ev) => {
           document.removeEventListener("mouseup", onMouseUp, true);
+          const moved = Math.abs(ev.clientX - startX) > MOVE_THRESHOLD || Math.abs(ev.clientY - startY) > MOVE_THRESHOLD;
+          if (moved) {
+            setSuppressNextEditClick(true);
+            return;
+          }
+          onActivateTextEditing == null ? void 0 : onActivateTextEditing();
+          setMouseSelecting(true);
           requestAnimationFrame(() => {
             setMouseSelecting(false);
           });
+          const clickTarget = ev.target;
+          setTimeout(() => {
+            var _a3;
+            (_a3 = editableRef.current) == null ? void 0 : _a3.focus({ preventScroll: true });
+            placeCaretAtPoint(editor, startX, startY, clickTarget, editableRef.current);
+          }, 0);
         };
         document.addEventListener("mouseup", onMouseUp, true);
-        setTimeout(() => {
-          var _a2;
-          (_a2 = editableRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
-        }, 0);
         return;
       }
       if (isTextEditing) {
         clearFakeHighlight();
         e.stopPropagation();
+        setMouseSelecting(true);
         if (editor.selection && !slate_exports.Range.isCollapsed(editor.selection)) {
           slate_exports.Transforms.collapse(editor, { edge: "focus" });
-          (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+          (_b = globalThis.getSelection()) == null ? void 0 : _b.removeAllRanges();
         }
-        setMouseSelecting(true);
         const onMouseUp = (ev) => {
           document.removeEventListener("mouseup", onMouseUp, true);
           ev.stopPropagation();
@@ -6431,7 +7639,15 @@ function useMouseHandlers({
         document.addEventListener("mouseup", onMouseUp, true);
       }
     },
-    [isEditMode, isTextEditing, onActivateTextEditing, editableRef, clearFakeHighlight]
+    [
+      editor,
+      isEditMode,
+      isTextEditing,
+      onActivateTextEditing,
+      editableRef,
+      containerRef,
+      clearFakeHighlight
+    ]
   );
   const handleEmptySpaceClick = (0, react_exports.useCallback)(
     (e) => {
@@ -6440,14 +7656,14 @@ function useMouseHandlers({
       const target = e.target;
       if (target.closest("[data-slate-node]")) return;
       editableRef.current.focus({ preventScroll: true });
-      safeSelectEnd(editor);
+      placeCaretAtPoint(editor, e.clientX, e.clientY, null, editableRef.current);
     },
     [isTextEditing, editor, editableRef]
   );
   const handleDragStart = (0, react_exports.useCallback)(
     (e) => {
+      e.preventDefault();
       if (isEditMode) {
-        e.preventDefault();
         e.stopPropagation();
       }
     },
@@ -6460,12 +7676,12 @@ function useMouseHandlers({
 function useEditModeEffect(editor, editableRef, isEditMode) {
   const prevIsEditModeRef = (0, react_exports.useRef)(isEditMode);
   (0, react_exports.useEffect)(() => {
-    var _a;
+    var _a2;
     const wasEditMode = prevIsEditModeRef.current;
     prevIsEditModeRef.current = isEditMode;
     if (wasEditMode && !isEditMode) {
       safeDeselect(editor);
-      (_a = editableRef.current) == null ? void 0 : _a.blur();
+      (_a2 = editableRef.current) == null ? void 0 : _a2.blur();
     }
   }, [isEditMode, editor, editableRef]);
 }
@@ -6486,7 +7702,15 @@ var InnerEditor = ({
   updateActiveStylesRef,
   clearFakeHighlightRef,
   recentSavesRef,
-  onAnnouncement
+  forceNextSyncRef: forceNextSyncRefProp,
+  transformTreeRef,
+  syncInitialValueChanges,
+  autoResolveTokensRef,
+  onPasteStart,
+  onAnnouncement,
+  onCancelPendingChanges,
+  nameToValue,
+  onLinkOpen
 }) => {
   const {
     setEditor,
@@ -6536,7 +7760,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 +7781,13 @@ var InnerEditor = ({
     updateFakeHighlightAbs,
     fakeHighlightAbsRef,
     hasFocusRef,
+    isTextEditingRef,
     lastSelectionRef,
     recentSavesRef,
-    forceNextSyncRef
+    forceNextSyncRef,
+    transformTreeRef,
+    syncInitialValueChanges,
+    autoResolveTokensRef
   });
   const stepFontSize = useStepFontSize({
     editor,
@@ -6622,7 +7851,7 @@ var InnerEditor = ({
   );
   const handleKeyDown = (0, react_exports.useCallback)(
     (event) => {
-      var _a, _b, _c;
+      var _a2, _b;
       if (!isTextEditingRef.current) {
         return void 0;
       }
@@ -6633,18 +7862,10 @@ var InnerEditor = ({
           slate_exports.Transforms.deselect(editor);
         } catch (e) {
         }
-        (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+        (_a2 = globalThis.getSelection()) == null ? void 0 : _a2.removeAllRanges();
         onDeactivateTextEditing == null ? void 0 : onDeactivateTextEditing();
         (_b = editableRef.current) == null ? void 0 : _b.blur();
-        const selectOutline = (_c = editableRef.current) == null ? void 0 : _c.closest(
-          '[data-test="select-outline"]'
-        );
-        if (selectOutline) {
-          if (!selectOutline.getAttribute("tabindex")) {
-            selectOutline.setAttribute("tabindex", "-1");
-          }
-          selectOutline.focus({ preventScroll: true });
-        }
+        focusSelectOutline(editableRef.current);
         return void 0;
       }
       if (event.key === "Tab" && event.shiftKey) {
@@ -6657,7 +7878,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,30 +7886,43 @@ var InnerEditor = ({
       return void 0;
     },
     [
-      editor,
-      editableRef,
+      isTextEditingRef,
       handleKeyboardShortcuts,
       onDeactivateTextEditing,
-      onFocusLost,
+      editor,
       onSavePreEditSelection,
-      wasTextEditingRef
+      wasTextEditingRef,
+      onCancelPendingChanges,
+      forceNextSyncRef
     ]
   );
   const ElementRenderer = (0, react_exports.useMemo)(
-    () => createElementRenderer(isEditMode, defaultTextStyle.lineHeight || "1.5"),
-    [isEditMode, defaultTextStyle.lineHeight]
+    () => createElementRenderer(isEditMode, defaultTextStyle.lineHeight || "1.5", nameToValue, onLinkOpen),
+    [isEditMode, defaultTextStyle.lineHeight, nameToValue, onLinkOpen]
   );
   const renderElement = (0, react_exports.useCallback)(
     (props) => /* @__PURE__ */ react_exports.createElement(ElementRenderer, __spreadValues({}, props)),
     [ElementRenderer]
   );
   const renderLeaf = (0, react_exports.useCallback)((props) => /* @__PURE__ */ react_exports.createElement(Leaf, __spreadValues({}, props)), []);
+  const handleDOMBeforeInput = (0, react_exports.useCallback)(
+    (event) => handleTextInsert(editor, event) || void 0,
+    [editor]
+  );
   const editableStyle = {
     color: defaultTextStyle.color || "#ffffff",
     fontSize: defaultTextStyle.fontSize || "14px",
     fontFamily: FONT_FAMILY_WITH_FALLBACKS[defaultTextStyle.fontFamily] || defaultTextStyle.fontFamily || FONT_FAMILY_WITH_FALLBACKS["Splunk Data Sans"],
-    lineHeight: defaultTextStyle.lineHeight || "1.5"
+    lineHeight: defaultTextStyle.lineHeight || "1.5",
+    // Text I-beam only while editing; otherwise inherit from wrapper so read-only
+    // viewers don't get a text cursor (pointer when an interaction is bound).
+    cursor: isTextEditing ? "text" : "inherit"
   };
+  const editorContainerStyle = __spreadValues({
+    // Keep the Slate editor's percentage min-height resolvable while actively editing so
+    // vertical alignment has the same full-height layout used in read-only mode.
+    minHeight: "100%"
+  }, isTextEditing ? {} : { caretColor: "transparent", outline: "none" });
   return /* @__PURE__ */ react_exports.createElement(
     "div",
     {
@@ -6696,7 +7930,8 @@ var InnerEditor = ({
       suppressContentEditableWarning: true,
       onMouseDown: handleMouseDown,
       onClick: handleEmptySpaceClick,
-      style: isTextEditing ? void 0 : { minHeight: "100%", caretColor: "transparent", outline: "none" }
+      onDragStart: handleDragStart,
+      style: editorContainerStyle
     },
     /* @__PURE__ */ react_exports.createElement(slate_react_exports.Slate, { editor, initialValue: value, onChange: handleChange }, /* @__PURE__ */ react_exports.createElement(
       slate_react_exports.Editable,
@@ -6707,9 +7942,12 @@ var InnerEditor = ({
         decorate,
         renderElement,
         renderLeaf,
+        onDOMBeforeInput: handleDOMBeforeInput,
+        scrollSelectionIntoView: scrollCaretWithinEditor,
         style: editableStyle,
         ref: editableRef,
         onKeyDown: handleKeyDown,
+        onPaste: onPasteStart,
         onDragStart: handleDragStart,
         onFocus: handleFocus,
         onBlur: handleBlur,
@@ -6774,132 +8012,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 +8081,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
@@ -6977,20 +8096,21 @@ function useSkipLinkAndFocusOut({
   isEditMode,
   containerRef,
   slateEditorRef,
+  isTextEditingRef,
   wasTextEditingRef,
   clearFakeHighlightRef,
   deactivateTextEditing,
   dashboardCoreApi
 }) {
   (0, react_exports.useEffect)(() => {
-    var _a;
+    var _a2;
     if (!isEditMode) return void 0;
-    const vizItem = (_a = containerRef.current) == null ? void 0 : _a.closest('[data-test="viz-item"]');
+    const vizItem = (_a2 = containerRef.current) == null ? void 0 : _a2.closest('[data-test="viz-item"]');
     if (!vizItem) return void 0;
     const handleEscapeOnSkipLink = (configLink) => {
-      var _a2;
+      var _a3;
       if (configLink) configLink.setAttribute("tabindex", "-1");
-      (_a2 = clearFakeHighlightRef.current) == null ? void 0 : _a2.call(clearFakeHighlightRef);
+      (_a3 = clearFakeHighlightRef.current) == null ? void 0 : _a3.call(clearFakeHighlightRef);
       const ed = slateEditorRef.current;
       if (ed) {
         safeDeselect(ed);
@@ -7024,14 +8144,26 @@ function useSkipLinkAndFocusOut({
       if (actionMenuLink) actionMenuLink.setAttribute("tabindex", "-1");
     };
     const handleKeyDown = (e) => {
-      if (!vizItem.contains(e.target)) return;
+      var _a3, _b;
       const target = e.target;
+      if (!vizItem.contains(target)) return;
       const configLink = vizItem.querySelector('[data-test="skip-link-config"]');
       if (e.key === "Escape" && target.closest('[data-test="skip-link-config"]')) {
         e.preventDefault();
         handleEscapeOnSkipLink(configLink);
         return;
       }
+      if (e.key === "Escape" && !isTextEditingRef.current) {
+        const isSelected = ((_a3 = containerRef.current) == null ? void 0 : _a3.closest('[data-selected="true"]')) != null;
+        if (isSelected) {
+          e.preventDefault();
+          (_b = document.activeElement) == null ? void 0 : _b.blur();
+          if (dashboardCoreApi) {
+            dashboardCoreApi.updateSelectedItems([]);
+          }
+          return;
+        }
+      }
       if (e.key !== "Tab") return;
       if (e.shiftKey) {
         handleShiftTab(e, target, configLink);
@@ -7078,15 +8210,17 @@ function useSidebarAndEditActivation({
   (0, react_exports.useEffect)(() => {
     if (!isEditMode) return void 0;
     const getOurVizItem = () => {
-      var _a, _b;
-      return (_b = (_a = containerRef.current) == null ? void 0 : _a.closest('[data-test="viz-item"]')) != null ? _b : null;
+      var _a2, _b;
+      return (_b = (_a2 = containerRef.current) == null ? void 0 : _a2.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 Escape (useLinkHandlers); excluded here so
+    // this capture handler doesn't intercept it, forcing a second Escape to close.
+    !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) => {
-      var _a, _b;
-      const isSelected = ((_a = containerRef.current) == null ? void 0 : _a.closest('[data-selected="true"]')) != null;
+      var _a2, _b;
+      const isSelected = ((_a2 = containerRef.current) == null ? void 0 : _a2.closest('[data-selected="true"]')) != null;
       if (!isSelected) return;
       e.preventDefault();
       e.stopImmediatePropagation();
@@ -7094,15 +8228,15 @@ function useSidebarAndEditActivation({
       const selToRestore = ((_b = slateEditorRef.current) == null ? void 0 : _b.selection) || richTextState.getPreEditSelection();
       richTextState.returnFromConfigPanel();
       requestAnimationFrame(() => {
-        var _a2, _b2;
-        const editable = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector("[data-slate-editor]");
+        var _a3, _b2;
+        const editable = (_a3 = containerRef.current) == null ? void 0 : _a3.querySelector("[data-slate-editor]");
         editable == null ? void 0 : editable.focus();
         const ed = slateEditorRef.current;
         if (ed && selToRestore) {
           try {
             slate_exports.Transforms.select(ed, selToRestore);
             const domRange = slate_react_exports.ReactEditor.toDOMRange(ed, selToRestore);
-            const domSel = window.getSelection();
+            const domSel = globalThis.getSelection();
             domSel == null ? void 0 : domSel.removeAllRanges();
             domSel == null ? void 0 : domSel.addRange(domRange);
           } catch (e2) {
@@ -7116,7 +8250,7 @@ function useSidebarAndEditActivation({
       });
     };
     const handleSkipLinkActivate = (e) => {
-      var _a;
+      var _a2;
       e.preventDefault();
       e.stopImmediatePropagation();
       registerActiveRichText(instanceId, null, slateEditorRef.current);
@@ -7131,7 +8265,7 @@ function useSidebarAndEditActivation({
           } catch (e2) {
           }
         }
-        (_a = updateActiveStylesFnRef.current) == null ? void 0 : _a.call(updateActiveStylesFnRef);
+        (_a2 = updateActiveStylesFnRef.current) == null ? void 0 : _a2.call(updateActiveStylesFnRef);
       }
       richTextState.clearWasTextEditing();
       const configBtn = document.getElementById("configuration-back-button");
@@ -7140,7 +8274,7 @@ function useSidebarAndEditActivation({
       }
     };
     const handleKeyDown = (e) => {
-      var _a;
+      var _a2;
       const target = e.target;
       const ourVizItem = getOurVizItem();
       if (e.key === "Escape" && isTargetInSidebar(target, ourVizItem)) {
@@ -7153,7 +8287,7 @@ function useSidebarAndEditActivation({
         return;
       }
       if (e.key === "Enter" && !isTextEditingRef.current) {
-        const isVizSelected = ((_a = containerRef.current) == null ? void 0 : _a.closest('[data-selected="true"]')) != null;
+        const isVizSelected = ((_a2 = containerRef.current) == null ? void 0 : _a2.closest('[data-selected="true"]')) != null;
         if (!isVizSelected) return;
         e.preventDefault();
         e.stopImmediatePropagation();
@@ -7161,8 +8295,8 @@ function useSidebarAndEditActivation({
       }
     };
     const handleClick2 = (e) => {
-      var _a;
-      const link = (_a = e.target) == null ? void 0 : _a.closest('[data-test="skip-link-config"]');
+      var _a2;
+      const link = (_a2 = e.target) == null ? void 0 : _a2.closest('[data-test="skip-link-config"]');
       if (!link) return;
       const ourVizItem = getOurVizItem();
       if (!(ourVizItem == null ? void 0 : ourVizItem.contains(link))) return;
@@ -7186,6 +8320,7 @@ function useDashboardKeyboardNav(args) {
     isEditMode: args.isEditMode,
     containerRef: args.containerRef,
     slateEditorRef: args.slateEditorRef,
+    isTextEditingRef: args.isTextEditingRef,
     wasTextEditingRef: args.wasTextEditingRef,
     clearFakeHighlightRef: args.clearFakeHighlightRef,
     deactivateTextEditing: args.richTextState.deactivateTextEditing,
@@ -7201,8 +8336,220 @@ function useIsActiveRichText(id) {
     () => getActiveRichTextId() === id
   );
 }
+var identityRestore = (html) => html;
+var CONTAINER_MOVE_THRESHOLD = 4;
+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
+  };
+}
+var TOKEN_PASTE_SETTLE_MS = 300;
+function useTokenResolutionScheduler(resolverRef, enabled) {
+  const pasteBurstRef = (0, react_exports.useRef)(false);
+  const timerRef = (0, react_exports.useRef)(null);
+  const hasPendingRequestRef = (0, react_exports.useRef)(false);
+  const includeValueChangesRef = (0, react_exports.useRef)(false);
+  const enabledRef = (0, react_exports.useRef)(enabled);
+  enabledRef.current = enabled;
+  const clearTimer = (0, react_exports.useCallback)(() => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  const cancelPendingResolution = (0, react_exports.useCallback)(() => {
+    clearTimer();
+    pasteBurstRef.current = false;
+    hasPendingRequestRef.current = false;
+    includeValueChangesRef.current = false;
+  }, [clearTimer]);
+  const flushPendingResolution = (0, react_exports.useCallback)(() => {
+    var _a2;
+    const shouldResolve = enabledRef.current && hasPendingRequestRef.current;
+    const includeValueChanges = includeValueChangesRef.current;
+    clearTimer();
+    pasteBurstRef.current = false;
+    hasPendingRequestRef.current = false;
+    includeValueChangesRef.current = false;
+    if (shouldResolve) {
+      (_a2 = resolverRef.current) == null ? void 0 : _a2.call(resolverRef, includeValueChanges);
+    }
+  }, [clearTimer, resolverRef]);
+  const restartPasteTimer = (0, react_exports.useCallback)(() => {
+    clearTimer();
+    timerRef.current = setTimeout(flushPendingResolution, TOKEN_PASTE_SETTLE_MS);
+  }, [clearTimer, flushPendingResolution]);
+  const beginPasteBurst = (0, react_exports.useCallback)(() => {
+    if (!enabledRef.current) return;
+    pasteBurstRef.current = true;
+    restartPasteTimer();
+  }, [restartPasteTimer]);
+  const requestResolutionRef = (0, react_exports.useRef)(null);
+  requestResolutionRef.current = enabled ? (includeValueChanges = false) => {
+    var _a2;
+    if (!pasteBurstRef.current) {
+      (_a2 = resolverRef.current) == null ? void 0 : _a2.call(resolverRef, includeValueChanges);
+      return;
+    }
+    hasPendingRequestRef.current = true;
+    includeValueChangesRef.current || (includeValueChangesRef.current = includeValueChanges);
+    restartPasteTimer();
+  } : null;
+  (0, react_exports.useEffect)(() => {
+    if (!enabled) {
+      cancelPendingResolution();
+    }
+  }, [cancelPendingResolution, enabled]);
+  (0, react_exports.useEffect)(() => cancelPendingResolution, [cancelPendingResolution]);
+  return {
+    beginPasteBurst,
+    flushPendingResolution,
+    requestResolutionRef
+  };
+}
+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 _a2;
+  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 ? "$" : (_a2 = nameToValue.get(tokenName)) != null ? _a2 : rawPattern;
+    result.push({
+      absStart: baseOffset + m.index,
+      rawLen: rawPattern.length,
+      resolvedLen: resolvedValue.length
+    });
+    m = re.exec(text);
+  }
+  return result;
+}
+function bareTokensInNode(node, runningOffset, nameToValue, includeValueChanges) {
+  const { text } = node;
+  if (node.tokenName) {
+    const target = displayForToken(node.tokenName, nameToValue);
+    if (!node.isRawToken && !(includeValueChanges && text !== target)) return [];
+    return [{ absStart: runningOffset, rawLen: text.length, resolvedLen: target.length }];
+  }
+  if (node.isEscapedDollar) {
+    if (!node.isRawToken || !/^\$+$/.test(text)) return [];
+    return [{ absStart: runningOffset, rawLen: text.length, resolvedLen: text.length / 2 }];
+  }
+  return bareTokensInPlainText(text, runningOffset, nameToValue);
+}
+function collectBareTokens(editor, nameToValue, includeValueChanges) {
+  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, includeValueChanges));
+    runningOffset += textNode.text.length;
+  }
+  return result;
+}
+function buildAutoResolveCallback(args) {
+  const { slateEditorRef, nameToValue } = args;
+  return (includeValueChanges = false) => {
+    const editor = slateEditorRef.current;
+    if (!editor) return;
+    const bareTokenInfo = collectBareTokens(editor, nameToValue, includeValueChanges);
+    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;
+  var _a2, _b, _c, _d;
   const theme = (0, themes_exports.useSplunkTheme)();
   const themeTextColor = theme.contentColorDefault;
   const {
@@ -7220,35 +8567,42 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
     mode = "view",
     onOptionsChange,
     onRichtextClick = lodash_exports.noop,
+    onLinkOpen,
     hasEventHandlers = false,
     bold = false,
     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;
   const effectiveFontFamily = (defaultTextStyles == null ? void 0 : defaultTextStyles.fontFamily) || fontFamily;
-  const effectiveBold = (_a = defaultTextStyles == null ? void 0 : defaultTextStyles.bold) != null ? _a : bold;
+  const effectiveBold = (_a2 = defaultTextStyles == null ? void 0 : defaultTextStyles.bold) != null ? _a2 : bold;
   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 handleLinkOpen = (0, react_exports.useMemo)(
+    () => onLinkOpen ? (url) => onLinkOpen({ payload: { url } }) : void 0,
+    [onLinkOpen]
+  );
   const effectiveFontColor = effectiveFontColorFromStyles || themeTextColor;
   const isEditMode = mode === "edit";
   const containerRef = (0, react_exports.useRef)(null);
+  const containerMouseDownRef = (0, react_exports.useRef)(null);
   const slateEditorRef = (0, react_exports.useRef)(null);
+  const editorHasFocusRef = (0, react_exports.useRef)(false);
   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;
@@ -7280,16 +8634,16 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
     }
   }, [isEditMode, instanceId]);
   (0, react_exports.useEffect)(() => {
-    var _a2;
+    var _a3;
     if (!isEditMode || isTextEditing) return void 0;
     const checkAndRegister = () => {
-      var _a3;
-      const isSelected = ((_a3 = containerRef.current) == null ? void 0 : _a3.closest('[data-selected="true"]')) != null;
+      var _a4;
+      const isSelected = ((_a4 = containerRef.current) == null ? void 0 : _a4.closest('[data-selected="true"]')) != null;
       if (isSelected) {
         registerActiveRichText(instanceId, null, slateEditorRef.current);
       }
     };
-    const selectedAncestor = (_a2 = containerRef.current) == null ? void 0 : _a2.closest("[data-selected]");
+    const selectedAncestor = (_a3 = containerRef.current) == null ? void 0 : _a3.closest("[data-selected]");
     let observer = null;
     if (selectedAncestor) {
       observer = new MutationObserver(checkAndRegister);
@@ -7304,12 +8658,12 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
     };
   }, [instanceId, isEditMode, isTextEditing]);
   (0, react_exports.useEffect)(() => {
-    var _a2;
+    var _a3;
     if (!isEditMode || !isTextEditing) return void 0;
-    const selectedAncestor = (_a2 = containerRef.current) == null ? void 0 : _a2.closest("[data-selected]");
+    const selectedAncestor = (_a3 = containerRef.current) == null ? void 0 : _a3.closest("[data-selected]");
     if (!selectedAncestor) return void 0;
     const observer = new MutationObserver(() => {
-      const isSelected = selectedAncestor.getAttribute("data-selected") === "true";
+      const isSelected = selectedAncestor.dataset.selected === "true";
       if (!isSelected) {
         richTextState.deactivateTextEditing();
       }
@@ -7334,35 +8688,93 @@ 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) => showResolvedTokens ? wrapRawTokensInTree(tree, nameToValue) : tree;
+  const tokenResolverRef = (0, react_exports.useRef)(null);
+  tokenResolverRef.current = showResolvedTokens ? buildAutoResolveCallback({ slateEditorRef, nameToValue }) : null;
+  const {
+    beginPasteBurst,
+    flushPendingResolution,
+    requestResolutionRef: autoResolveTokensRef
+  } = useTokenResolutionScheduler(tokenResolverRef, showResolvedTokens);
+  const prevNameToValueRef = (0, react_exports.useRef)(nameToValue);
+  const prevEditorSourceContentRef = (0, react_exports.useRef)(editorSourceContent);
+  (0, react_exports.useEffect)(() => {
+    const prev = prevNameToValueRef.current;
+    const tokenMapChanged = nameToValue !== prev;
+    const sourceContentChanged = editorSourceContent !== prevEditorSourceContentRef.current;
+    prevNameToValueRef.current = nameToValue;
+    prevEditorSourceContentRef.current = editorSourceContent;
+    if ((tokenMapChanged || sourceContentChanged) && autoResolveTokensRef.current) {
+      autoResolveTokensRef.current(tokenMapChanged);
+    }
+  }, [autoResolveTokensRef, editorSourceContent, nameToValue]);
+  const effectiveEditorSourceContent = editorSourceOverride != null ? editorSourceOverride : editorSourceContent;
+  const initialValueTokenMap = showResolvedTokens ? nameToValue : null;
   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 && editorHasFocusRef.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 = initialValueTokenMap ? wrapRawTokensInTree(tree, initialValueTokenMap) : tree;
     initialValueRef.current = result;
     return result;
-  }, [richTextContent, tokenMap]);
+  }, [effectiveEditorSourceContent, initialValueTokenMap, showResolvedTokens]);
   const handleFocusGained = (0, react_exports.useCallback)(
     (editable, slateEditor) => {
+      editorHasFocusRef.current = true;
       registerActiveRichText(instanceId, editable, slateEditor);
     },
     [instanceId]
   );
   const handleFocusLost = (0, react_exports.useCallback)(() => {
+    editorHasFocusRef.current = false;
+    flushPendingResolution();
     flushPendingChanges();
-  }, [flushPendingChanges]);
+  }, [flushPendingChanges, flushPendingResolution]);
   (0, react_exports.useEffect)(() => {
     return () => {
       flushPendingChanges();
@@ -7403,8 +8815,8 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
   const activateTextEditing = (0, react_exports.useCallback)(() => {
     richTextState.activateTextEditing();
     requestAnimationFrame(() => {
-      var _a2;
-      const editable = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector("[data-slate-editor]");
+      var _a3;
+      const editable = (_a3 = containerRef.current) == null ? void 0 : _a3.querySelector("[data-slate-editor]");
       editable == null ? void 0 : editable.focus({ preventScroll: true });
       if (slateEditorRef.current && !slateEditorRef.current.selection) {
         safeSelectEnd(slateEditorRef.current);
@@ -7427,9 +8839,9 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
   (0, react_exports.useEffect)(() => {
     if (!isEditMode) return void 0;
     const guard = (e) => {
-      var _a2;
+      var _a3;
       const target = e.target;
-      if (!((_a2 = containerRef.current) == null ? void 0 : _a2.contains(target))) return;
+      if (!((_a3 = containerRef.current) == null ? void 0 : _a3.contains(target))) return;
       const isVizSelected = containerRef.current.closest('[data-selected="true"]') != null;
       if (!isVizSelected) return;
       if (!isTextEditingRef.current) {
@@ -7446,28 +8858,74 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
     document.addEventListener("mousedown", guard, true);
     return () => document.removeEventListener("mousedown", guard, true);
   }, [isEditMode]);
-  const handleContainerClick = (0, react_exports.useCallback)(
+  const maybeActivateEditing = (0, react_exports.useCallback)(
     (e) => {
-      if (hasEventHandlers && !isEditMode) {
-        onRichtextClick(e);
-      }
-      if (isEditMode && !isTextEditing && containerRef.current) {
-        const isVizSelected = containerRef.current.closest('[data-selected="true"]') != null;
-        if (!isVizSelected) return;
-        registerActiveRichText(instanceId, null, slateEditorRef.current);
-        activateTextEditing();
+      if (!containerRef.current) return;
+      const down = containerMouseDownRef.current;
+      containerMouseDownRef.current = null;
+      if (down && (Math.abs(e.clientX - down.x) > CONTAINER_MOVE_THRESHOLD || Math.abs(e.clientY - down.y) > CONTAINER_MOVE_THRESHOLD)) {
         return;
       }
-      if (!isTextEditing || !containerRef.current || isMouseSelecting()) return;
+      if (consumeSuppressNextEditClick()) return;
+      if (isMouseSelecting()) return;
+      const isVizSelected = containerRef.current.closest('[data-selected="true"]') != null;
+      if (!isVizSelected) return;
+      const wrapper = containerRef.current.querySelector("[data-richtext-editor-wrapper]");
+      if (wrapper && !wrapper.contains(e.target)) return;
+      registerActiveRichText(instanceId, null, slateEditorRef.current);
+      activateTextEditing();
+    },
+    [activateTextEditing, instanceId]
+  );
+  const handleEditingOutsideClick = (0, react_exports.useCallback)(
+    (e) => {
+      var _a3;
+      if (!containerRef.current) return;
       const editable = containerRef.current.querySelector("[data-slate-editor]");
       if (!editable || editable.contains(e.target)) return;
+      const wrapper = containerRef.current.querySelector("[data-richtext-editor-wrapper]");
+      if (wrapper && !wrapper.contains(e.target)) {
+        const editorToDeselect = slateEditorRef.current;
+        if (editorToDeselect) {
+          try {
+            slate_exports.Transforms.deselect(editorToDeselect);
+          } catch (e2) {
+          }
+        }
+        (_a3 = globalThis.getSelection()) == null ? void 0 : _a3.removeAllRanges();
+        richTextState.deactivateTextEditing();
+        editable.blur();
+        focusSelectOutline(containerRef.current);
+        return;
+      }
       editable.focus({ preventScroll: true });
       const slateEditor = getActiveSlateEditor();
       if (slateEditor) {
         safeSelectEnd(slateEditor);
       }
     },
-    [hasEventHandlers, isEditMode, isTextEditing, onRichtextClick]
+    [richTextState]
+  );
+  const handleContainerClick = (0, react_exports.useCallback)(
+    (e) => {
+      if (hasEventHandlers && !isEditMode) {
+        onRichtextClick(e);
+      }
+      if (isEditMode && !isTextEditing && containerRef.current) {
+        maybeActivateEditing(e);
+        return;
+      }
+      if (!isTextEditing || !containerRef.current || isMouseSelecting()) return;
+      handleEditingOutsideClick(e);
+    },
+    [
+      hasEventHandlers,
+      isEditMode,
+      isTextEditing,
+      onRichtextClick,
+      maybeActivateEditing,
+      handleEditingOutsideClick
+    ]
   );
   return /* @__PURE__ */ react_exports.createElement(
     PureRichTextProvider,
@@ -7493,12 +8951,16 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
         $borderRadius: borderRadius,
         $padding: paddingValues,
         $isTextEditing: isTextEditing,
+        $isEditMode: isEditMode,
         $hasEventHandlers: hasEventHandlers && !isEditMode,
         "data-no-drag": isTextEditing ? "true" : void 0,
         "data-text-editor": isTextEditing ? "true" : void 0,
         "data-test": "purerichtext-container",
-        role: !isEditMode ? "region" : void 0,
-        "aria-label": !isEditMode ? slateToPlainText(initialValue) || "Empty rich text" : void 0,
+        role: isEditMode ? void 0 : "region",
+        "aria-label": isEditMode ? void 0 : slateToPlainText(initialValue) || "Empty rich text",
+        onMouseDownCapture: (e) => {
+          containerMouseDownRef.current = { x: e.clientX, y: e.clientY };
+        },
         onClick: handleContainerClick
       },
       hasEventHandlers && !isEditMode && /* @__PURE__ */ react_exports.createElement(
@@ -7518,19 +8980,21 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
         {
           $isEditMode: isEditMode,
           $isTextEditing: isTextEditing,
+          $hasEventHandlers: hasEventHandlers,
           $lineHeight: currentLineHeight,
+          $verticalAlign: currentVerticalAlign,
           "data-richtext-editor-wrapper": true,
-          onMouseDown: isTextEditing ? (e) => {
+          onMouseDown: (e) => {
             if (e.target === e.currentTarget) {
               e.stopPropagation();
             }
-          } : void 0
+          }
         },
         /* @__PURE__ */ react_exports.createElement(
           InnerEditor,
           {
             initialValue,
-            richTextContent,
+            richTextContent: effectiveEditorSourceContent,
             isEditMode,
             isTextEditing,
             containerRef,
@@ -7538,6 +9002,7 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
             onContentChange: handleContentChange,
             onFocusGained: handleFocusGained,
             onFocusLost: handleFocusLost,
+            onCancelPendingChanges: cancelPendingChanges,
             richTextState,
             onEditorReady: (ed) => {
               slateEditorRef.current = ed;
@@ -7545,7 +9010,14 @@ var PureRichText = react_exports.forwardRef((props, ref) => {
             updateActiveStylesRef: updateActiveStylesFnRef,
             clearFakeHighlightRef,
             recentSavesRef,
-            onAnnouncement: handleAnnouncement
+            forceNextSyncRef,
+            transformTreeRef,
+            syncInitialValueChanges: showResolvedTokens,
+            autoResolveTokensRef,
+            onPasteStart: beginPasteBurst,
+            onAnnouncement: handleAnnouncement,
+            nameToValue,
+            onLinkOpen: handleLinkOpen
           }
         )
       ),
@@ -7610,11 +9082,11 @@ 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")) {
-    customFontSize = parseInt(fontSize, 10);
+    customFontSize = Number.parseInt(fontSize, 10);
     fontSize = "custom";
   }
   return { fontSize, customFontSize };
@@ -7625,17 +9097,18 @@ var computeVizProps = ({
   onRichtextClick,
   onOptionsChange,
   richTextContent: richTextContentProp,
-  hasEventHandlers = false
+  hasEventHandlers = false,
+  richTextTokenMetadata
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a2, _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 bold = (_b = (_a = defaultTextStyles.bold) != null ? _a : pickedOptions.bold) != null ? _b : false;
+  const { fontSize, customFontSize } = resolveFontSize2(defaultTextStyles, pickedOptions);
+  const bold = (_b = (_a2 = defaultTextStyles.bold) != null ? _a2 : 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;
   const strikethrough = (_h = (_g = defaultTextStyles.strikethrough) != null ? _g : pickedOptions.strikethrough) != null ? _h : false;
@@ -7659,7 +9132,9 @@ var computeVizProps = ({
     italic,
     underline,
     strikethrough,
-    hasEventHandlers
+    hasEventHandlers,
+    previewTokenValues: (_i = pickedOptions.previewTokenValues) != null ? _i : false,
+    richTextTokenMetadata
   };
 };
 var RichText = withDashboardViz_default({
@@ -7668,6 +9143,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;