@atlaskit/renderer 109.11.2 → 109.12.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 109.12.1
+
+### Patch Changes
+
+- [#85780](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85780) [`f9127d5f97ed`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f9127d5f97ed) - Add marks to TextHighlighter component
+
+## 109.12.0
+
+### Minor Changes
+
+- [#85610](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85610) [`9e962c72289e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9e962c72289e) - Adding UNSTABLE_textHighlight API to renderer. It allows to wrap text that matches a RegEx in a provided React Component.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 109.11.2
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -23,6 +23,7 @@ var _utils2 = require("../utils");
 var _utils3 = require("@atlaskit/editor-prosemirror/utils");
 var _rendererNode = require("./renderer-node");
 var _code = require("./marks/code");
+var _segmentText = require("./utils/segment-text");
 var _excluded = ["key"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -182,6 +183,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     this.nodeComponents = init.nodeComponents;
     this.allowWindowedCodeBlock = init.allowWindowedCodeBlock;
     this.isInsideOfInlineExtension = init.isInsideOfInlineExtension;
+    this.textHighlighter = init.textHighlighter;
   }
   (0, _createClass2.default)(ReactSerializer, [{
     key: "resetState",
@@ -302,19 +304,47 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         var markKey = "".concat(mark.type.name, "-component__").concat(this.startPos, "__").concat(parentMark.path.length);
         return this.renderMark((0, _marks.toReact)(mark), this.getMarkProps(mark, parentMark.path), markKey, content);
       }
+      var segments = (0, _segmentText.segmentText)(mark.text, this.textHighlighter);
       var startPos = this.startPos;
       var endPos = startPos + mark.nodeSize;
       this.startPos = endPos;
+      var textKey = "text-wrapper_".concat(this.startPos);
       if (this.surroundTextNodesWithTextWrapper) {
-        var textKey = "text-wrapper_".concat(this.startPos);
         var parentDepth = Math.max(parentNode.path.length - 1, 0);
         return /*#__PURE__*/_react.default.createElement(_textWrapper.default, {
           key: textKey,
           startPos: startPos + parentDepth,
           endPos: endPos + parentDepth
-        }, mark.text);
+        }, this.renderTextSegments(segments, textKey, mark));
       }
-      return mark.text || '';
+      return this.renderTextSegments(segments, textKey, mark);
+    }
+  }, {
+    key: "renderTextSegments",
+    value: function renderTextSegments(segments, key, text) {
+      var _this$textHighlighter;
+      var Component = (_this$textHighlighter = this.textHighlighter) === null || _this$textHighlighter === void 0 ? void 0 : _this$textHighlighter.component;
+      var marks = new Set(text.marks.map(function (m) {
+        return m.type.name;
+      }));
+      function renderSegment(segment) {
+        var idx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+        if (segment.type === 'plain' || !Component) {
+          return segment.text;
+        }
+        return /*#__PURE__*/_react.default.createElement(Component, {
+          match: segment.text,
+          groups: segment.groups,
+          marks: marks,
+          key: "".concat(segment.text, "_").concat(idx)
+        }, segment.text);
+      }
+      if (segments.length === 1) {
+        return renderSegment(segments[0]);
+      }
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+        key: key
+      }, segments.map(renderSegment));
     }
   }, {
     key: "renderNode",
@@ -344,14 +374,14 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       // TODO: https://product-fabric.atlassian.net/browse/CEMS-1048
       var stickyHeaders = !(0, _rendererNode.insideBreakoutLayout)(path) ? this.stickyHeaders : undefined;
       var isInsideOfBlockNode = (0, _rendererNode.insideBlockNode)(path, node.type.schema);
-      var isinsideMultiBodiedExtension = (0, _rendererNode.insideMultiBodiedExtension)(path, node.type.schema);
+      var isInsideMultiBodiedExtension = (0, _rendererNode.insideMultiBodiedExtension)(path, node.type.schema);
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         allowColumnSorting: this.allowColumnSorting,
         columnWidths: (0, _utils.calcTableColumnWidths)(node),
         tableNode: node,
         stickyHeaders: stickyHeaders,
         isInsideOfBlockNode: isInsideOfBlockNode,
-        isinsideMultiBodiedExtension: isinsideMultiBodiedExtension
+        isInsideMultiBodiedExtension: isInsideMultiBodiedExtension
       });
     }
   }, {

package/dist/cjs/react/nodes/codeBlock/codeBlock.js

@@ -37,6 +37,7 @@ function CodeBlock(props) {
     text: text,
     wrapLongLines: wrapLongLines
   }, (0, _react2.jsx)(_code.CodeBlock, {
+    testId: "renderer-code-block",
     language: language,
     text: text,
     codeBidiWarningLabel: codeBidiWarningLabel,

package/dist/cjs/react/utils/segment-text.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.segmentText = segmentText;
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function segmentText(text, highlighter) {
+  if (!highlighter || !text) {
+    return [{
+      type: 'plain',
+      text: text !== null && text !== void 0 ? text : ''
+    }];
+  }
+  var segments = [];
+  var pos = 0;
+  try {
+    var markTextSegmentMatches = text.matchAll(highlighter.pattern);
+    var _iterator = _createForOfIteratorHelper(markTextSegmentMatches),
+      _step;
+    try {
+      var _loop = function _loop() {
+        var markTextMatch = _step.value;
+        if (markTextMatch.index !== 0) {
+          segments.push({
+            type: 'plain',
+            text: text.substring(pos, markTextMatch.index)
+          });
+        }
+        segments.push({
+          type: 'match',
+          text: markTextMatch[0],
+          groups: markTextMatch.groups && Object.keys(markTextMatch.groups).filter(function (key) {
+            return markTextMatch.groups[key];
+          })
+        });
+        pos = markTextMatch.index + markTextMatch[0].length;
+      };
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        _loop();
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    if (pos < text.length - 1) {
+      segments.push({
+        type: 'plain',
+        text: text.substring(pos)
+      });
+    }
+    return segments;
+  } catch (_e) {}
+  return [{
+    type: 'plain',
+    text: text
+  }];
+}

package/dist/cjs/ui/Renderer/index.js

@@ -55,7 +55,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.11.2";
+var packageVersion = "109.12.1";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -281,7 +281,8 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
         nodeComponents: props.nodeComponents,
         // does not currently support SSR, should not be enabled in environments where Renderer is SSR-ed
         allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
-        isInsideOfInlineExtension: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension
+        isInsideOfInlineExtension: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension,
+        textHighlighter: props.UNSTABLE_textHighlighter
       };
     }
   }, {

package/dist/es2019/react/index.js

@@ -12,6 +12,7 @@ import { getText } from '../utils';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { insideBlockNode, insideBreakoutLayout, insideMultiBodiedExtension } from './renderer-node';
 import { isCodeMark } from './marks/code';
+import { segmentText } from './utils/segment-text';
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce((acc, markOrNode) => {
     const prev = acc.length && acc[acc.length - 1] || null;
@@ -167,6 +168,7 @@ export default class ReactSerializer {
     this.nodeComponents = init.nodeComponents;
     this.allowWindowedCodeBlock = init.allowWindowedCodeBlock;
     this.isInsideOfInlineExtension = init.isInsideOfInlineExtension;
+    this.textHighlighter = init.textHighlighter;
   }
   resetState() {
     this.headingIds = [];
@@ -270,19 +272,42 @@ export default class ReactSerializer {
       const markKey = `${mark.type.name}-component__${this.startPos}__${parentMark.path.length}`;
       return this.renderMark(markToReact(mark), this.getMarkProps(mark, parentMark.path), markKey, content);
     }
+    const segments = segmentText(mark.text, this.textHighlighter);
     const startPos = this.startPos;
     const endPos = startPos + mark.nodeSize;
     this.startPos = endPos;
+    const textKey = `text-wrapper_${this.startPos}`;
     if (this.surroundTextNodesWithTextWrapper) {
-      const textKey = `text-wrapper_${this.startPos}`;
       const parentDepth = Math.max(parentNode.path.length - 1, 0);
       return /*#__PURE__*/React.createElement(TextWrapperComponent, {
         key: textKey,
         startPos: startPos + parentDepth,
         endPos: endPos + parentDepth
-      }, mark.text);
+      }, this.renderTextSegments(segments, textKey, mark));
     }
-    return mark.text || '';
+    return this.renderTextSegments(segments, textKey, mark);
+  }
+  renderTextSegments(segments, key, text) {
+    var _this$textHighlighter;
+    const Component = (_this$textHighlighter = this.textHighlighter) === null || _this$textHighlighter === void 0 ? void 0 : _this$textHighlighter.component;
+    const marks = new Set(text.marks.map(m => m.type.name));
+    function renderSegment(segment, idx = 0) {
+      if (segment.type === 'plain' || !Component) {
+        return segment.text;
+      }
+      return /*#__PURE__*/React.createElement(Component, {
+        match: segment.text,
+        groups: segment.groups,
+        marks: marks,
+        key: `${segment.text}_${idx}`
+      }, segment.text);
+    }
+    if (segments.length === 1) {
+      return renderSegment(segments[0]);
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: key
+    }, segments.map(renderSegment));
   }
   renderNode(NodeComponent, props, key, content) {
     return /*#__PURE__*/React.createElement(NodeComponent, _extends({
@@ -304,7 +329,7 @@ export default class ReactSerializer {
     // TODO: https://product-fabric.atlassian.net/browse/CEMS-1048
     const stickyHeaders = !insideBreakoutLayout(path) ? this.stickyHeaders : undefined;
     const isInsideOfBlockNode = insideBlockNode(path, node.type.schema);
-    const isinsideMultiBodiedExtension = insideMultiBodiedExtension(path, node.type.schema);
+    const isInsideMultiBodiedExtension = insideMultiBodiedExtension(path, node.type.schema);
     return {
       ...this.getProps(node),
       allowColumnSorting: this.allowColumnSorting,
@@ -312,7 +337,7 @@ export default class ReactSerializer {
       tableNode: node,
       stickyHeaders,
       isInsideOfBlockNode,
-      isinsideMultiBodiedExtension
+      isInsideMultiBodiedExtension
     };
   }
   getDateProps(node, parentInfo) {

package/dist/es2019/react/nodes/codeBlock/codeBlock.js

@@ -25,6 +25,7 @@ function CodeBlock(props) {
     text: text,
     wrapLongLines: wrapLongLines
   }, jsx(AkCodeBlock, {
+    testId: "renderer-code-block",
     language: language,
     text: text,
     codeBidiWarningLabel: codeBidiWarningLabel,

package/dist/es2019/react/utils/segment-text.js

@@ -0,0 +1,38 @@
+export function segmentText(text, highlighter) {
+  if (!highlighter || !text) {
+    return [{
+      type: 'plain',
+      text: text !== null && text !== void 0 ? text : ''
+    }];
+  }
+  const segments = [];
+  let pos = 0;
+  try {
+    const markTextSegmentMatches = text.matchAll(highlighter.pattern);
+    for (const markTextMatch of markTextSegmentMatches) {
+      if (markTextMatch.index !== 0) {
+        segments.push({
+          type: 'plain',
+          text: text.substring(pos, markTextMatch.index)
+        });
+      }
+      segments.push({
+        type: 'match',
+        text: markTextMatch[0],
+        groups: markTextMatch.groups && Object.keys(markTextMatch.groups).filter(key => markTextMatch.groups[key])
+      });
+      pos = markTextMatch.index + markTextMatch[0].length;
+    }
+    if (pos < text.length - 1) {
+      segments.push({
+        type: 'plain',
+        text: text.substring(pos)
+      });
+    }
+    return segments;
+  } catch (_e) {}
+  return [{
+    type: 'plain',
+    text
+  }];
+}

package/dist/es2019/ui/Renderer/index.js

@@ -36,7 +36,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.11.2";
+const packageVersion = "109.12.1";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);
@@ -260,7 +260,8 @@ export class Renderer extends PureComponent {
       nodeComponents: props.nodeComponents,
       // does not currently support SSR, should not be enabled in environments where Renderer is SSR-ed
       allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
-      isInsideOfInlineExtension: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension
+      isInsideOfInlineExtension: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension,
+      textHighlighter: props.UNSTABLE_textHighlighter
     };
   }
   render() {

package/dist/esm/react/index.js

@@ -19,6 +19,7 @@ import { getText } from '../utils';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { insideBlockNode, insideBreakoutLayout, insideMultiBodiedExtension } from './renderer-node';
 import { isCodeMark } from './marks/code';
+import { segmentText } from './utils/segment-text';
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce(function (acc, markOrNode) {
     var prev = acc.length && acc[acc.length - 1] || null;
@@ -175,6 +176,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.nodeComponents = init.nodeComponents;
     this.allowWindowedCodeBlock = init.allowWindowedCodeBlock;
     this.isInsideOfInlineExtension = init.isInsideOfInlineExtension;
+    this.textHighlighter = init.textHighlighter;
   }
   _createClass(ReactSerializer, [{
     key: "resetState",
@@ -295,19 +297,47 @@ var ReactSerializer = /*#__PURE__*/function () {
         var markKey = "".concat(mark.type.name, "-component__").concat(this.startPos, "__").concat(parentMark.path.length);
         return this.renderMark(markToReact(mark), this.getMarkProps(mark, parentMark.path), markKey, content);
       }
+      var segments = segmentText(mark.text, this.textHighlighter);
       var startPos = this.startPos;
       var endPos = startPos + mark.nodeSize;
       this.startPos = endPos;
+      var textKey = "text-wrapper_".concat(this.startPos);
       if (this.surroundTextNodesWithTextWrapper) {
-        var textKey = "text-wrapper_".concat(this.startPos);
         var parentDepth = Math.max(parentNode.path.length - 1, 0);
         return /*#__PURE__*/React.createElement(TextWrapperComponent, {
           key: textKey,
           startPos: startPos + parentDepth,
           endPos: endPos + parentDepth
-        }, mark.text);
+        }, this.renderTextSegments(segments, textKey, mark));
       }
-      return mark.text || '';
+      return this.renderTextSegments(segments, textKey, mark);
+    }
+  }, {
+    key: "renderTextSegments",
+    value: function renderTextSegments(segments, key, text) {
+      var _this$textHighlighter;
+      var Component = (_this$textHighlighter = this.textHighlighter) === null || _this$textHighlighter === void 0 ? void 0 : _this$textHighlighter.component;
+      var marks = new Set(text.marks.map(function (m) {
+        return m.type.name;
+      }));
+      function renderSegment(segment) {
+        var idx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+        if (segment.type === 'plain' || !Component) {
+          return segment.text;
+        }
+        return /*#__PURE__*/React.createElement(Component, {
+          match: segment.text,
+          groups: segment.groups,
+          marks: marks,
+          key: "".concat(segment.text, "_").concat(idx)
+        }, segment.text);
+      }
+      if (segments.length === 1) {
+        return renderSegment(segments[0]);
+      }
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: key
+      }, segments.map(renderSegment));
     }
   }, {
     key: "renderNode",
@@ -337,14 +367,14 @@ var ReactSerializer = /*#__PURE__*/function () {
       // TODO: https://product-fabric.atlassian.net/browse/CEMS-1048
       var stickyHeaders = !insideBreakoutLayout(path) ? this.stickyHeaders : undefined;
       var isInsideOfBlockNode = insideBlockNode(path, node.type.schema);
-      var isinsideMultiBodiedExtension = insideMultiBodiedExtension(path, node.type.schema);
+      var isInsideMultiBodiedExtension = insideMultiBodiedExtension(path, node.type.schema);
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         allowColumnSorting: this.allowColumnSorting,
         columnWidths: calcTableColumnWidths(node),
         tableNode: node,
         stickyHeaders: stickyHeaders,
         isInsideOfBlockNode: isInsideOfBlockNode,
-        isinsideMultiBodiedExtension: isinsideMultiBodiedExtension
+        isInsideMultiBodiedExtension: isInsideMultiBodiedExtension
       });
     }
   }, {

package/dist/esm/react/nodes/codeBlock/codeBlock.js

@@ -29,6 +29,7 @@ function CodeBlock(props) {
     text: text,
     wrapLongLines: wrapLongLines
   }, jsx(AkCodeBlock, {
+    testId: "renderer-code-block",
     language: language,
     text: text,
     codeBidiWarningLabel: codeBidiWarningLabel,

package/dist/esm/react/utils/segment-text.js

@@ -0,0 +1,55 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+export function segmentText(text, highlighter) {
+  if (!highlighter || !text) {
+    return [{
+      type: 'plain',
+      text: text !== null && text !== void 0 ? text : ''
+    }];
+  }
+  var segments = [];
+  var pos = 0;
+  try {
+    var markTextSegmentMatches = text.matchAll(highlighter.pattern);
+    var _iterator = _createForOfIteratorHelper(markTextSegmentMatches),
+      _step;
+    try {
+      var _loop = function _loop() {
+        var markTextMatch = _step.value;
+        if (markTextMatch.index !== 0) {
+          segments.push({
+            type: 'plain',
+            text: text.substring(pos, markTextMatch.index)
+          });
+        }
+        segments.push({
+          type: 'match',
+          text: markTextMatch[0],
+          groups: markTextMatch.groups && Object.keys(markTextMatch.groups).filter(function (key) {
+            return markTextMatch.groups[key];
+          })
+        });
+        pos = markTextMatch.index + markTextMatch[0].length;
+      };
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        _loop();
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    if (pos < text.length - 1) {
+      segments.push({
+        type: 'plain',
+        text: text.substring(pos)
+      });
+    }
+    return segments;
+  } catch (_e) {}
+  return [{
+    type: 'plain',
+    text: text
+  }];
+}

package/dist/esm/ui/Renderer/index.js

@@ -46,7 +46,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.11.2";
+var packageVersion = "109.12.1";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -272,7 +272,8 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         nodeComponents: props.nodeComponents,
         // does not currently support SSR, should not be enabled in environments where Renderer is SSR-ed
         allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
-        isInsideOfInlineExtension: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension
+        isInsideOfInlineExtension: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension,
+        textHighlighter: props.UNSTABLE_textHighlighter
       };
     }
   }, {

package/dist/types/react/index.d.ts

@@ -7,7 +7,7 @@ import type { TextWrapper } from './nodes';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
-import type { RendererContext } from './types';
+import type { RendererContext, TextHighlighter } from './types';
 import type { MediaOptions } from '../types/mediaOptions';
 import type { SmartLinksOptions } from '../types/smartLinksOptions';
 import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
@@ -40,6 +40,7 @@ export interface ReactSerializerInit {
     nodeComponents?: NodeComponentsProps;
     allowWindowedCodeBlock?: boolean;
     isInsideOfInlineExtension?: boolean;
+    textHighlighter?: TextHighlighter;
 }
 interface ParentInfo {
     parentIsIncompleteTask: boolean;
@@ -86,6 +87,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private nodeComponents?;
     private allowWindowedCodeBlock?;
     private isInsideOfInlineExtension?;
+    private textHighlighter?;
     constructor(init: ReactSerializerInit);
     private resetState;
     private getNodeProps;
@@ -94,6 +96,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private withMediaMarkProps;
     private serializeTextWrapper;
     private serializeMark;
+    private renderTextSegments;
     private renderNode;
     private renderMark;
     private getTableChildrenProps;

package/dist/types/react/nodes/codeBlock/codeBlock.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { WrappedComponentProps } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
 import type { SupportedLanguages } from '@atlaskit/code';
 export interface Props {
     text: string;

package/dist/types/react/types.d.ts

@@ -57,3 +57,12 @@ export interface AnnotationMarkMeta extends MarkMeta {
 }
 export type NodeProps<NodeAttrs = {}> = NodeAttrs & PropsWithChildren<NodeMeta>;
 export type MarkProps<MarkAttrs = {}> = MarkAttrs & PropsWithChildren<MarkMeta>;
+export type TextHighlighter = {
+    pattern: RegExp;
+    component: React.ComponentType<{
+        children: React.ReactNode;
+        match: string;
+        marks: Set<string>;
+        groups: Array<string> | undefined;
+    }>;
+};

package/dist/types/react/utils/segment-text.d.ts

@@ -0,0 +1,10 @@
+import type { TextHighlighter } from '../types';
+export type TextSegment = {
+    type: 'plain';
+    text: string;
+} | {
+    type: 'match';
+    text: string;
+    groups: Array<string> | undefined;
+};
+export declare function segmentText(text: string | undefined, highlighter: TextHighlighter | undefined): Array<TextSegment>;

package/dist/types/ui/renderer-props.d.ts

@@ -15,6 +15,7 @@ import type { MediaOptions } from '../types/mediaOptions';
 import type { SmartLinksOptions } from '../types/smartLinksOptions';
 import type { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import type { DocNode } from '@atlaskit/adf-schema';
+import type { TextHighlighter } from '../react/types';
 export interface RawObjectFeatureFlags {
     ['renderer-render-tracking']: string;
 }
@@ -113,4 +114,5 @@ export interface RendererProps {
     featureFlags?: {
         [featureFlag: string]: boolean;
     } | Partial<RawObjectFeatureFlags>;
+    UNSTABLE_textHighlighter?: TextHighlighter;
 }

package/dist/types-ts4.5/react/index.d.ts

@@ -7,7 +7,7 @@ import type { TextWrapper } from './nodes';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
-import type { RendererContext } from './types';
+import type { RendererContext, TextHighlighter } from './types';
 import type { MediaOptions } from '../types/mediaOptions';
 import type { SmartLinksOptions } from '../types/smartLinksOptions';
 import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
@@ -40,6 +40,7 @@ export interface ReactSerializerInit {
     nodeComponents?: NodeComponentsProps;
     allowWindowedCodeBlock?: boolean;
     isInsideOfInlineExtension?: boolean;
+    textHighlighter?: TextHighlighter;
 }
 interface ParentInfo {
     parentIsIncompleteTask: boolean;
@@ -86,6 +87,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private nodeComponents?;
     private allowWindowedCodeBlock?;
     private isInsideOfInlineExtension?;
+    private textHighlighter?;
     constructor(init: ReactSerializerInit);
     private resetState;
     private getNodeProps;
@@ -94,6 +96,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private withMediaMarkProps;
     private serializeTextWrapper;
     private serializeMark;
+    private renderTextSegments;
     private renderNode;
     private renderMark;
     private getTableChildrenProps;

package/dist/types-ts4.5/react/nodes/codeBlock/codeBlock.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { WrappedComponentProps } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
 import type { SupportedLanguages } from '@atlaskit/code';
 export interface Props {
     text: string;

package/dist/types-ts4.5/react/types.d.ts

@@ -57,3 +57,12 @@ export interface AnnotationMarkMeta extends MarkMeta {
 }
 export type NodeProps<NodeAttrs = {}> = NodeAttrs & PropsWithChildren<NodeMeta>;
 export type MarkProps<MarkAttrs = {}> = MarkAttrs & PropsWithChildren<MarkMeta>;
+export type TextHighlighter = {
+    pattern: RegExp;
+    component: React.ComponentType<{
+        children: React.ReactNode;
+        match: string;
+        marks: Set<string>;
+        groups: Array<string> | undefined;
+    }>;
+};

package/dist/types-ts4.5/react/utils/segment-text.d.ts

@@ -0,0 +1,10 @@
+import type { TextHighlighter } from '../types';
+export type TextSegment = {
+    type: 'plain';
+    text: string;
+} | {
+    type: 'match';
+    text: string;
+    groups: Array<string> | undefined;
+};
+export declare function segmentText(text: string | undefined, highlighter: TextHighlighter | undefined): Array<TextSegment>;

package/dist/types-ts4.5/ui/renderer-props.d.ts

@@ -15,6 +15,7 @@ import type { MediaOptions } from '../types/mediaOptions';
 import type { SmartLinksOptions } from '../types/smartLinksOptions';
 import type { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import type { DocNode } from '@atlaskit/adf-schema';
+import type { TextHighlighter } from '../react/types';
 export interface RawObjectFeatureFlags {
     ['renderer-render-tracking']: string;
 }
@@ -113,4 +114,5 @@ export interface RendererProps {
     featureFlags?: {
         [featureFlag: string]: boolean;
     } | Partial<RawObjectFeatureFlags>;
+    UNSTABLE_textHighlighter?: TextHighlighter;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.11.2",
+  "version": "109.12.1",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,9 +29,9 @@
     "@atlaskit/analytics-listeners": "^8.9.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.8.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/editor-common": "^78.21.0",
+    "@atlaskit/editor-common": "^78.22.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-prosemirror": "3.0.0",