@atlaskit/renderer 109.12.0 → 109.12.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 109.12.2
+
+### Patch Changes
+
+- [#85922](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85922) [`9cb0eef56b9d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9cb0eef56b9d) - Adjusted renderer TextHighlighter API added more tests and fixed off by 1 error
+
+## 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

package/dist/cjs/react/index.js

@@ -24,6 +24,7 @@ var _utils3 = require("@atlaskit/editor-prosemirror/utils");
 var _rendererNode = require("./renderer-node");
 var _code = require("./marks/code");
 var _segmentText = require("./utils/segment-text");
+var _renderTextSegments = require("./utils/render-text-segments");
 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; }
@@ -304,7 +305,6 @@ 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;
@@ -314,33 +314,13 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         return /*#__PURE__*/_react.default.createElement(_textWrapper.default, {
           key: textKey,
           startPos: startPos + parentDepth,
-          endPos: endPos + parentDepth
-        }, this.renderTextSegments(segments, textKey));
-      }
-      return this.renderTextSegments(segments, textKey);
-    }
-  }, {
-    key: "renderTextSegments",
-    value: function renderTextSegments(segments, key) {
-      var _this$textHighlighter;
-      var Component = (_this$textHighlighter = this.textHighlighter) === null || _this$textHighlighter === void 0 ? void 0 : _this$textHighlighter.component;
-      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,
-          key: "".concat(segment.text, "_").concat(idx)
-        }, segment.text);
-      }
-      if (segments.length === 1) {
-        return renderSegment(segments[0]);
+          endPos: endPos + parentDepth,
+          textHighlighter: this.textHighlighter,
+          marks: mark.marks
+        }, mark.text);
       }
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-        key: key
-      }, segments.map(renderSegment));
+      var segments = (0, _segmentText.segmentText)(mark.text, this.textHighlighter);
+      return (0, _renderTextSegments.renderTextSegments)(segments, this.textHighlighter, mark.marks, startPos);
     }
   }, {
     key: "renderNode",
@@ -370,14 +350,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/text-wrapper.js

@@ -16,7 +16,9 @@ var TextWrapper = function TextWrapper(props) {
   }
   return /*#__PURE__*/_react.default.createElement(_annotations.TextWithAnnotationDraft, {
     startPos: startPos,
-    endPos: endPos
+    endPos: endPos,
+    textHighlighter: props.textHighlighter,
+    marks: props.marks
   }, children);
 };
 var _default = exports.default = TextWrapper;

package/dist/cjs/react/utils/render-text-segments.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderTextSegments = renderTextSegments;
+var _react = _interopRequireDefault(require("react"));
+function renderTextSegments(segments, textHighlighter, marksList, startPos) {
+  var Component = textHighlighter === null || textHighlighter === void 0 ? void 0 : textHighlighter.component;
+  var marks = new Set(marksList.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("span", {
+      "data-highlighted": true
+    }, /*#__PURE__*/_react.default.createElement(Component, {
+      match: segment.text,
+      groups: segment.groups,
+      marks: marks,
+      key: "".concat(segment.text, "_").concat(startPos, "_").concat(idx),
+      startPos: startPos + idx
+    }, segment.text));
+  }
+  if (segments.length === 1) {
+    return renderSegment(segments[0]);
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: "text-wrapper_".concat(startPos)
+  }, segments.map(renderSegment));
+}

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

@@ -17,8 +17,8 @@ function segmentText(text, highlighter) {
   var segments = [];
   var pos = 0;
   try {
-    var markTextSeggmentMatches = text.matchAll(highlighter.pattern);
-    var _iterator = _createForOfIteratorHelper(markTextSeggmentMatches),
+    var markTextSegmentMatches = text.matchAll(highlighter.pattern);
+    var _iterator = _createForOfIteratorHelper(markTextSegmentMatches),
       _step;
     try {
       var _loop = function _loop() {
@@ -46,7 +46,7 @@ function segmentText(text, highlighter) {
     } finally {
       _iterator.f();
     }
-    if (pos < text.length - 1) {
+    if (pos < text.length) {
       segments.push({
         type: 'plain',
         text: text.substring(pos)

package/dist/cjs/steps/index.js

@@ -39,6 +39,10 @@ function isElementNode(node) {
 function isTextNode(node) {
   return node.nodeType === Node.TEXT_NODE;
 }
+function isHighlightTextNode(node) {
+  var _dataset;
+  return !!((_dataset = node.dataset) !== null && _dataset !== void 0 && _dataset.highlighted);
+}
 function isNodeInlineMark(node) {
   return isElementNode(node) && Boolean(node.dataset.rendererMark);
 }
@@ -49,7 +53,7 @@ function resolveNodePos(node) {
   var resolvedPos = 0;
   var prev = node.previousSibling;
   while (prev) {
-    if (prev && isTextNode(prev)) {
+    if (prev && (isTextNode(prev) || isHighlightTextNode(prev))) {
       resolvedPos += (prev.textContent || '').length;
     } else if (prev) {
       if (isNodeInlineMark(prev) && prev.textContent) {

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.12.0";
+var packageVersion = "109.12.2";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/cjs/ui/annotations/draft/component.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getAnnotationIndex = exports.applyAnnotationOnText = exports.TextWithAnnotationDraft = exports.AnnotationDraft = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _types = require("../types");
@@ -16,12 +15,18 @@ var _text = require("./text");
 var _position = require("./position");
 var _dom = require("./dom");
 var _styles = require("@atlaskit/editor-common/styles");
-var _templateObject;
-/** @jsx jsx */
+var _segmentText = require("../../../react/utils/segment-text");
+var _renderTextSegments = require("../../../react/utils/render-text-segments");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/** @jsx jsx */
+
 var markStyles = function markStyles() {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  ", ";\n"])), (0, _styles.AnnotationSharedCSSByState)().focus);
+  return (0, _react2.css)({
+    color: 'inherit',
+    backgroundColor: 'unset',
+    WebkitTapHighlightColor: 'transparent'
+  }, (0, _styles.AnnotationSharedCSSByState)().focus);
 };
 var AnnotationDraft = exports.AnnotationDraft = function AnnotationDraft(_ref) {
   var draftPosition = _ref.draftPosition,
@@ -47,24 +52,29 @@ var getAnnotationIndex = exports.getAnnotationIndex = function getAnnotationInde
 var applyAnnotationOnText = exports.applyAnnotationOnText = function applyAnnotationOnText(_ref2) {
   var texts = _ref2.texts,
     shouldApplyAnnotationAt = _ref2.shouldApplyAnnotationAt,
-    draftPosition = _ref2.draftPosition;
+    draftPosition = _ref2.draftPosition,
+    textHighlighter = _ref2.textHighlighter,
+    marks = _ref2.marks;
   var annotateIndex = getAnnotationIndex(shouldApplyAnnotationAt, texts.length);
   return texts.map(function (value, index) {
+    var segments = (0, _segmentText.segmentText)(value, textHighlighter);
     if (annotateIndex === index) {
       return (0, _react2.jsx)(AnnotationDraft, {
         key: index,
         draftPosition: draftPosition
-      }, value);
+      }, (0, _renderTextSegments.renderTextSegments)(segments, textHighlighter, marks || [], draftPosition.from));
     }
     return (0, _react2.jsx)(_react.default.Fragment, {
       key: index
-    }, value);
+    }, (0, _renderTextSegments.renderTextSegments)(segments, textHighlighter, marks || [], draftPosition.from));
   });
 };
 var TextWithAnnotationDraft = exports.TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
   var startPos = _ref3.startPos,
     endPos = _ref3.endPos,
-    children = _ref3.children;
+    children = _ref3.children,
+    textHighlighter = _ref3.textHighlighter,
+    marks = _ref3.marks;
   var textPosition = _react.default.useMemo(function () {
     return {
       start: startPos,
@@ -78,28 +88,33 @@ var TextWithAnnotationDraft = exports.TextWithAnnotationDraft = function TextWit
     }
     return (0, _position.calcInsertDraftPositionOnText)(textPosition, nextDraftPosition);
   }, [nextDraftPosition, textPosition]);
-  if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
+  var textString = (0, _text.findTextString)(children);
+  if (!textString) {
     return (0, _react2.jsx)(_react.Fragment, null, children);
   }
+  if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
+    var segments = (0, _segmentText.segmentText)(textString, textHighlighter);
+    return (0, _react2.jsx)(_react.Fragment, null, (0, _renderTextSegments.renderTextSegments)(segments, textHighlighter, marks || [], startPos));
+  }
   if (shouldApplyAnnotationAt === _types.InsertDraftPosition.AROUND_TEXT) {
+    var _segments = (0, _segmentText.segmentText)(textString, textHighlighter);
     return (0, _react2.jsx)(AnnotationDraft, {
       key: 0,
       draftPosition: nextDraftPosition
-    }, children);
-  }
-  var textString = (0, _text.findTextString)(children);
-  if (!textString) {
-    return (0, _react2.jsx)(_react.Fragment, null, children);
+    }, (0, _renderTextSegments.renderTextSegments)(_segments, textHighlighter, marks || [], startPos));
   }
   var offsets = (0, _text.calcTextSplitOffset)(nextDraftPosition, textPosition, textString);
   var texts = (0, _text.splitText)(textString, offsets);
   if (!texts) {
-    return (0, _react2.jsx)(_react.Fragment, null, children);
+    var _segments2 = (0, _segmentText.segmentText)(textString, textHighlighter);
+    return (0, _react2.jsx)(_react.Fragment, null, (0, _renderTextSegments.renderTextSegments)(_segments2, textHighlighter, marks || [], startPos));
   }
   var components = applyAnnotationOnText({
     texts: texts,
     shouldApplyAnnotationAt: shouldApplyAnnotationAt,
-    draftPosition: nextDraftPosition
+    draftPosition: nextDraftPosition,
+    textHighlighter: textHighlighter,
+    marks: marks
   });
   return (0, _react2.jsx)(_react.Fragment, null, components);
 };

package/dist/es2019/react/index.js

@@ -13,6 +13,7 @@ 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';
+import { renderTextSegments } from './utils/render-text-segments';
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce((acc, markOrNode) => {
     const prev = acc.length && acc[acc.length - 1] || null;
@@ -272,7 +273,6 @@ 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;
@@ -282,30 +282,13 @@ export default class ReactSerializer {
       return /*#__PURE__*/React.createElement(TextWrapperComponent, {
         key: textKey,
         startPos: startPos + parentDepth,
-        endPos: endPos + parentDepth
-      }, this.renderTextSegments(segments, textKey));
-    }
-    return this.renderTextSegments(segments, textKey);
-  }
-  renderTextSegments(segments, key) {
-    var _this$textHighlighter;
-    const Component = (_this$textHighlighter = this.textHighlighter) === null || _this$textHighlighter === void 0 ? void 0 : _this$textHighlighter.component;
-    function renderSegment(segment, idx = 0) {
-      if (segment.type === 'plain' || !Component) {
-        return segment.text;
-      }
-      return /*#__PURE__*/React.createElement(Component, {
-        match: segment.text,
-        groups: segment.groups,
-        key: `${segment.text}_${idx}`
-      }, segment.text);
+        endPos: endPos + parentDepth,
+        textHighlighter: this.textHighlighter,
+        marks: mark.marks
+      }, mark.text);
     }
-    if (segments.length === 1) {
-      return renderSegment(segments[0]);
-    }
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: key
-    }, segments.map(renderSegment));
+    const segments = segmentText(mark.text, this.textHighlighter);
+    return renderTextSegments(segments, this.textHighlighter, mark.marks, startPos);
   }
   renderNode(NodeComponent, props, key, content) {
     return /*#__PURE__*/React.createElement(NodeComponent, _extends({
@@ -327,7 +310,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,
@@ -335,7 +318,7 @@ export default class ReactSerializer {
       tableNode: node,
       stickyHeaders,
       isInsideOfBlockNode,
-      isinsideMultiBodiedExtension
+      isInsideMultiBodiedExtension
     };
   }
   getDateProps(node, parentInfo) {

package/dist/es2019/react/nodes/text-wrapper.js

@@ -13,7 +13,9 @@ const TextWrapper = props => {
   }
   return /*#__PURE__*/React.createElement(TextWithAnnotationDraft, {
     startPos: startPos,
-    endPos: endPos
+    endPos: endPos,
+    textHighlighter: props.textHighlighter,
+    marks: props.marks
   }, children);
 };
 export default TextWrapper;

package/dist/es2019/react/utils/render-text-segments.js

@@ -0,0 +1,25 @@
+import React from 'react';
+export function renderTextSegments(segments, textHighlighter, marksList, startPos) {
+  const Component = textHighlighter === null || textHighlighter === void 0 ? void 0 : textHighlighter.component;
+  const marks = new Set(marksList.map(m => m.type.name));
+  function renderSegment(segment, idx = 0) {
+    if (segment.type === 'plain' || !Component) {
+      return segment.text;
+    }
+    return /*#__PURE__*/React.createElement("span", {
+      "data-highlighted": true
+    }, /*#__PURE__*/React.createElement(Component, {
+      match: segment.text,
+      groups: segment.groups,
+      marks: marks,
+      key: `${segment.text}_${startPos}_${idx}`,
+      startPos: startPos + idx
+    }, segment.text));
+  }
+  if (segments.length === 1) {
+    return renderSegment(segments[0]);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, {
+    key: `text-wrapper_${startPos}`
+  }, segments.map(renderSegment));
+}

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

@@ -8,8 +8,8 @@ export function segmentText(text, highlighter) {
   const segments = [];
   let pos = 0;
   try {
-    const markTextSeggmentMatches = text.matchAll(highlighter.pattern);
-    for (const markTextMatch of markTextSeggmentMatches) {
+    const markTextSegmentMatches = text.matchAll(highlighter.pattern);
+    for (const markTextMatch of markTextSegmentMatches) {
       if (markTextMatch.index !== 0) {
         segments.push({
           type: 'plain',
@@ -23,7 +23,7 @@ export function segmentText(text, highlighter) {
       });
       pos = markTextMatch.index + markTextMatch[0].length;
     }
-    if (pos < text.length - 1) {
+    if (pos < text.length) {
       segments.push({
         type: 'plain',
         text: text.substring(pos)

package/dist/es2019/steps/index.js

@@ -35,6 +35,10 @@ function isElementNode(node) {
 function isTextNode(node) {
   return node.nodeType === Node.TEXT_NODE;
 }
+function isHighlightTextNode(node) {
+  var _dataset;
+  return !!((_dataset = node.dataset) !== null && _dataset !== void 0 && _dataset.highlighted);
+}
 function isNodeInlineMark(node) {
   return isElementNode(node) && Boolean(node.dataset.rendererMark);
 }
@@ -45,7 +49,7 @@ function resolveNodePos(node) {
   let resolvedPos = 0;
   let prev = node.previousSibling;
   while (prev) {
-    if (prev && isTextNode(prev)) {
+    if (prev && (isTextNode(prev) || isHighlightTextNode(prev))) {
       resolvedPos += (prev.textContent || '').length;
     } else if (prev) {
       if (isNodeInlineMark(prev) && prev.textContent) {

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.12.0";
+const packageVersion = "109.12.2";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/es2019/ui/annotations/draft/component.js

@@ -8,13 +8,13 @@ import { splitText, calcTextSplitOffset, findTextString } from './text';
 import { calcInsertDraftPositionOnText } from './position';
 import { dataAttributes } from './dom';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
-const markStyles = () => css`
-  color: inherit;
-  background-color: unset;
-  -webkit-tap-highlight-color: transparent;
-
-  ${AnnotationSharedCSSByState().focus};
-`;
+import { segmentText } from '../../../react/utils/segment-text';
+import { renderTextSegments } from '../../../react/utils/render-text-segments';
+const markStyles = () => css({
+  color: 'inherit',
+  backgroundColor: 'unset',
+  WebkitTapHighlightColor: 'transparent'
+}, AnnotationSharedCSSByState().focus);
 export const AnnotationDraft = ({
   draftPosition,
   children
@@ -40,25 +40,30 @@ export const getAnnotationIndex = (annotationPosition, fragmentCount) => {
 export const applyAnnotationOnText = ({
   texts,
   shouldApplyAnnotationAt,
-  draftPosition
+  draftPosition,
+  textHighlighter,
+  marks
 }) => {
   const annotateIndex = getAnnotationIndex(shouldApplyAnnotationAt, texts.length);
   return texts.map((value, index) => {
+    const segments = segmentText(value, textHighlighter);
     if (annotateIndex === index) {
       return jsx(AnnotationDraft, {
         key: index,
         draftPosition: draftPosition
-      }, value);
+      }, renderTextSegments(segments, textHighlighter, marks || [], draftPosition.from));
     }
     return jsx(React.Fragment, {
       key: index
-    }, value);
+    }, renderTextSegments(segments, textHighlighter, marks || [], draftPosition.from));
   });
 };
 export const TextWithAnnotationDraft = ({
   startPos,
   endPos,
-  children
+  children,
+  textHighlighter,
+  marks
 }) => {
   const textPosition = React.useMemo(() => ({
     start: startPos,
@@ -71,28 +76,33 @@ export const TextWithAnnotationDraft = ({
     }
     return calcInsertDraftPositionOnText(textPosition, nextDraftPosition);
   }, [nextDraftPosition, textPosition]);
-  if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
+  const textString = findTextString(children);
+  if (!textString) {
     return jsx(Fragment, null, children);
   }
+  if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
+    const segments = segmentText(textString, textHighlighter);
+    return jsx(Fragment, null, renderTextSegments(segments, textHighlighter, marks || [], startPos));
+  }
   if (shouldApplyAnnotationAt === InsertDraftPosition.AROUND_TEXT) {
+    const segments = segmentText(textString, textHighlighter);
     return jsx(AnnotationDraft, {
       key: 0,
       draftPosition: nextDraftPosition
-    }, children);
-  }
-  const textString = findTextString(children);
-  if (!textString) {
-    return jsx(Fragment, null, children);
+    }, renderTextSegments(segments, textHighlighter, marks || [], startPos));
   }
   const offsets = calcTextSplitOffset(nextDraftPosition, textPosition, textString);
   const texts = splitText(textString, offsets);
   if (!texts) {
-    return jsx(Fragment, null, children);
+    const segments = segmentText(textString, textHighlighter);
+    return jsx(Fragment, null, renderTextSegments(segments, textHighlighter, marks || [], startPos));
   }
   const components = applyAnnotationOnText({
     texts,
     shouldApplyAnnotationAt,
-    draftPosition: nextDraftPosition
+    draftPosition: nextDraftPosition,
+    textHighlighter,
+    marks
   });
   return jsx(Fragment, null, components);
 };

package/dist/esm/react/index.js

@@ -20,6 +20,7 @@ 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';
+import { renderTextSegments } from './utils/render-text-segments';
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce(function (acc, markOrNode) {
     var prev = acc.length && acc[acc.length - 1] || null;
@@ -297,7 +298,6 @@ 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;
@@ -307,33 +307,13 @@ var ReactSerializer = /*#__PURE__*/function () {
         return /*#__PURE__*/React.createElement(TextWrapperComponent, {
           key: textKey,
           startPos: startPos + parentDepth,
-          endPos: endPos + parentDepth
-        }, this.renderTextSegments(segments, textKey));
-      }
-      return this.renderTextSegments(segments, textKey);
-    }
-  }, {
-    key: "renderTextSegments",
-    value: function renderTextSegments(segments, key) {
-      var _this$textHighlighter;
-      var Component = (_this$textHighlighter = this.textHighlighter) === null || _this$textHighlighter === void 0 ? void 0 : _this$textHighlighter.component;
-      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,
-          key: "".concat(segment.text, "_").concat(idx)
-        }, segment.text);
-      }
-      if (segments.length === 1) {
-        return renderSegment(segments[0]);
+          endPos: endPos + parentDepth,
+          textHighlighter: this.textHighlighter,
+          marks: mark.marks
+        }, mark.text);
       }
-      return /*#__PURE__*/React.createElement(React.Fragment, {
-        key: key
-      }, segments.map(renderSegment));
+      var segments = segmentText(mark.text, this.textHighlighter);
+      return renderTextSegments(segments, this.textHighlighter, mark.marks, startPos);
     }
   }, {
     key: "renderNode",
@@ -363,14 +343,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/text-wrapper.js

@@ -9,7 +9,9 @@ var TextWrapper = function TextWrapper(props) {
   }
   return /*#__PURE__*/React.createElement(TextWithAnnotationDraft, {
     startPos: startPos,
-    endPos: endPos
+    endPos: endPos,
+    textHighlighter: props.textHighlighter,
+    marks: props.marks
   }, children);
 };
 export default TextWrapper;

package/dist/esm/react/utils/render-text-segments.js

@@ -0,0 +1,28 @@
+import React from 'react';
+export function renderTextSegments(segments, textHighlighter, marksList, startPos) {
+  var Component = textHighlighter === null || textHighlighter === void 0 ? void 0 : textHighlighter.component;
+  var marks = new Set(marksList.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("span", {
+      "data-highlighted": true
+    }, /*#__PURE__*/React.createElement(Component, {
+      match: segment.text,
+      groups: segment.groups,
+      marks: marks,
+      key: "".concat(segment.text, "_").concat(startPos, "_").concat(idx),
+      startPos: startPos + idx
+    }, segment.text));
+  }
+  if (segments.length === 1) {
+    return renderSegment(segments[0]);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, {
+    key: "text-wrapper_".concat(startPos)
+  }, segments.map(renderSegment));
+}

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

@@ -11,8 +11,8 @@ export function segmentText(text, highlighter) {
   var segments = [];
   var pos = 0;
   try {
-    var markTextSeggmentMatches = text.matchAll(highlighter.pattern);
-    var _iterator = _createForOfIteratorHelper(markTextSeggmentMatches),
+    var markTextSegmentMatches = text.matchAll(highlighter.pattern);
+    var _iterator = _createForOfIteratorHelper(markTextSegmentMatches),
       _step;
     try {
       var _loop = function _loop() {
@@ -40,7 +40,7 @@ export function segmentText(text, highlighter) {
     } finally {
       _iterator.f();
     }
-    if (pos < text.length - 1) {
+    if (pos < text.length) {
       segments.push({
         type: 'plain',
         text: text.substring(pos)

package/dist/esm/steps/index.js

@@ -31,6 +31,10 @@ function isElementNode(node) {
 function isTextNode(node) {
   return node.nodeType === Node.TEXT_NODE;
 }
+function isHighlightTextNode(node) {
+  var _dataset;
+  return !!((_dataset = node.dataset) !== null && _dataset !== void 0 && _dataset.highlighted);
+}
 function isNodeInlineMark(node) {
   return isElementNode(node) && Boolean(node.dataset.rendererMark);
 }
@@ -41,7 +45,7 @@ function resolveNodePos(node) {
   var resolvedPos = 0;
   var prev = node.previousSibling;
   while (prev) {
-    if (prev && isTextNode(prev)) {
+    if (prev && (isTextNode(prev) || isHighlightTextNode(prev))) {
       resolvedPos += (prev.textContent || '').length;
     } else if (prev) {
       if (isNodeInlineMark(prev) && prev.textContent) {

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.12.0";
+var packageVersion = "109.12.2";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/esm/ui/annotations/draft/component.js

@@ -1,6 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -10,8 +8,14 @@ import { splitText, calcTextSplitOffset, findTextString } from './text';
 import { calcInsertDraftPositionOnText } from './position';
 import { dataAttributes } from './dom';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
+import { segmentText } from '../../../react/utils/segment-text';
+import { renderTextSegments } from '../../../react/utils/render-text-segments';
 var markStyles = function markStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  ", ";\n"])), AnnotationSharedCSSByState().focus);
+  return css({
+    color: 'inherit',
+    backgroundColor: 'unset',
+    WebkitTapHighlightColor: 'transparent'
+  }, AnnotationSharedCSSByState().focus);
 };
 export var AnnotationDraft = function AnnotationDraft(_ref) {
   var draftPosition = _ref.draftPosition,
@@ -37,24 +41,29 @@ export var getAnnotationIndex = function getAnnotationIndex(annotationPosition,
 export var applyAnnotationOnText = function applyAnnotationOnText(_ref2) {
   var texts = _ref2.texts,
     shouldApplyAnnotationAt = _ref2.shouldApplyAnnotationAt,
-    draftPosition = _ref2.draftPosition;
+    draftPosition = _ref2.draftPosition,
+    textHighlighter = _ref2.textHighlighter,
+    marks = _ref2.marks;
   var annotateIndex = getAnnotationIndex(shouldApplyAnnotationAt, texts.length);
   return texts.map(function (value, index) {
+    var segments = segmentText(value, textHighlighter);
     if (annotateIndex === index) {
       return jsx(AnnotationDraft, {
         key: index,
         draftPosition: draftPosition
-      }, value);
+      }, renderTextSegments(segments, textHighlighter, marks || [], draftPosition.from));
     }
     return jsx(React.Fragment, {
       key: index
-    }, value);
+    }, renderTextSegments(segments, textHighlighter, marks || [], draftPosition.from));
   });
 };
 export var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
   var startPos = _ref3.startPos,
     endPos = _ref3.endPos,
-    children = _ref3.children;
+    children = _ref3.children,
+    textHighlighter = _ref3.textHighlighter,
+    marks = _ref3.marks;
   var textPosition = React.useMemo(function () {
     return {
       start: startPos,
@@ -68,28 +77,33 @@ export var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
     }
     return calcInsertDraftPositionOnText(textPosition, nextDraftPosition);
   }, [nextDraftPosition, textPosition]);
-  if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
+  var textString = findTextString(children);
+  if (!textString) {
     return jsx(Fragment, null, children);
   }
+  if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
+    var segments = segmentText(textString, textHighlighter);
+    return jsx(Fragment, null, renderTextSegments(segments, textHighlighter, marks || [], startPos));
+  }
   if (shouldApplyAnnotationAt === InsertDraftPosition.AROUND_TEXT) {
+    var _segments = segmentText(textString, textHighlighter);
     return jsx(AnnotationDraft, {
       key: 0,
       draftPosition: nextDraftPosition
-    }, children);
-  }
-  var textString = findTextString(children);
-  if (!textString) {
-    return jsx(Fragment, null, children);
+    }, renderTextSegments(_segments, textHighlighter, marks || [], startPos));
   }
   var offsets = calcTextSplitOffset(nextDraftPosition, textPosition, textString);
   var texts = splitText(textString, offsets);
   if (!texts) {
-    return jsx(Fragment, null, children);
+    var _segments2 = segmentText(textString, textHighlighter);
+    return jsx(Fragment, null, renderTextSegments(_segments2, textHighlighter, marks || [], startPos));
   }
   var components = applyAnnotationOnText({
     texts: texts,
     shouldApplyAnnotationAt: shouldApplyAnnotationAt,
-    draftPosition: nextDraftPosition
+    draftPosition: nextDraftPosition,
+    textHighlighter: textHighlighter,
+    marks: marks
   });
   return jsx(Fragment, null, components);
 };

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

@@ -96,7 +96,6 @@ 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/text-wrapper.d.ts

@@ -1,8 +1,12 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type { TextHighlighter } from '../types';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 type Props = {
     startPos: number;
     endPos: number;
     children?: ReactNode | null;
+    textHighlighter?: TextHighlighter;
+    marks?: readonly Mark[];
 };
 declare const TextWrapper: (props: Props) => JSX.Element | null;
 export default TextWrapper;

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

@@ -62,6 +62,8 @@ export type TextHighlighter = {
     component: React.ComponentType<{
         children: React.ReactNode;
         match: string;
+        marks: Set<string>;
         groups: Array<string> | undefined;
+        startPos: number;
     }>;
 };

package/dist/types/react/utils/render-text-segments.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { TextSegment } from './segment-text';
+import type { TextHighlighter } from '../types';
+export declare function renderTextSegments(segments: Array<TextSegment>, textHighlighter: TextHighlighter | undefined, marksList: readonly Mark[], startPos: number): string | JSX.Element;

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

@@ -1,4 +1,4 @@
-import { Schema } from '@atlaskit/editor-prosemirror/model';
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import { AddMarkStep } from '@atlaskit/editor-prosemirror/transform';
 export declare function resolvePos(node: Node | null, offset: number): number | false;
 interface AnnotationStepOptions {

package/dist/types/ui/annotations/draft/component.d.ts

@@ -3,6 +3,8 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import type { Position } from '../types';
 import { InsertDraftPosition } from '../types';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { TextHighlighter } from '../../../react/types';
 export declare const AnnotationDraft: ({ draftPosition, children, }: React.PropsWithChildren<{
     draftPosition: Position;
 }>) => jsx.JSX.Element;
@@ -10,12 +12,16 @@ type ApplyAnnotationsProps = {
     texts: string[];
     shouldApplyAnnotationAt: InsertDraftPosition.INSIDE | InsertDraftPosition.START | InsertDraftPosition.END;
     draftPosition: Position;
+    textHighlighter?: TextHighlighter;
+    marks?: readonly Mark[];
 };
 export declare const getAnnotationIndex: (annotationPosition: InsertDraftPosition, fragmentCount: number) => number;
-export declare const applyAnnotationOnText: ({ texts, shouldApplyAnnotationAt, draftPosition, }: ApplyAnnotationsProps) => JSX.Element[];
+export declare const applyAnnotationOnText: ({ texts, shouldApplyAnnotationAt, draftPosition, textHighlighter, marks, }: ApplyAnnotationsProps) => JSX.Element[];
 type Props = React.PropsWithChildren<{
     startPos: number;
     endPos: number;
+    textHighlighter?: TextHighlighter;
+    marks?: readonly Mark[];
 }>;
-export declare const TextWithAnnotationDraft: ({ startPos, endPos, children, }: Props) => jsx.JSX.Element;
+export declare const TextWithAnnotationDraft: ({ startPos, endPos, children, textHighlighter, marks, }: Props) => jsx.JSX.Element;
 export {};

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

@@ -96,7 +96,6 @@ 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/text-wrapper.d.ts

@@ -1,8 +1,12 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type { TextHighlighter } from '../types';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 type Props = {
     startPos: number;
     endPos: number;
     children?: ReactNode | null;
+    textHighlighter?: TextHighlighter;
+    marks?: readonly Mark[];
 };
 declare const TextWrapper: (props: Props) => JSX.Element | null;
 export default TextWrapper;

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

@@ -62,6 +62,8 @@ export type TextHighlighter = {
     component: React.ComponentType<{
         children: React.ReactNode;
         match: string;
+        marks: Set<string>;
         groups: Array<string> | undefined;
+        startPos: number;
     }>;
 };

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { TextSegment } from './segment-text';
+import type { TextHighlighter } from '../types';
+export declare function renderTextSegments(segments: Array<TextSegment>, textHighlighter: TextHighlighter | undefined, marksList: readonly Mark[], startPos: number): string | JSX.Element;

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

@@ -1,4 +1,4 @@
-import { Schema } from '@atlaskit/editor-prosemirror/model';
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import { AddMarkStep } from '@atlaskit/editor-prosemirror/transform';
 export declare function resolvePos(node: Node | null, offset: number): number | false;
 interface AnnotationStepOptions {

package/dist/types-ts4.5/ui/annotations/draft/component.d.ts

@@ -3,6 +3,8 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import type { Position } from '../types';
 import { InsertDraftPosition } from '../types';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { TextHighlighter } from '../../../react/types';
 export declare const AnnotationDraft: ({ draftPosition, children, }: React.PropsWithChildren<{
     draftPosition: Position;
 }>) => jsx.JSX.Element;
@@ -10,12 +12,16 @@ type ApplyAnnotationsProps = {
     texts: string[];
     shouldApplyAnnotationAt: InsertDraftPosition.INSIDE | InsertDraftPosition.START | InsertDraftPosition.END;
     draftPosition: Position;
+    textHighlighter?: TextHighlighter;
+    marks?: readonly Mark[];
 };
 export declare const getAnnotationIndex: (annotationPosition: InsertDraftPosition, fragmentCount: number) => number;
-export declare const applyAnnotationOnText: ({ texts, shouldApplyAnnotationAt, draftPosition, }: ApplyAnnotationsProps) => JSX.Element[];
+export declare const applyAnnotationOnText: ({ texts, shouldApplyAnnotationAt, draftPosition, textHighlighter, marks, }: ApplyAnnotationsProps) => JSX.Element[];
 type Props = React.PropsWithChildren<{
     startPos: number;
     endPos: number;
+    textHighlighter?: TextHighlighter;
+    marks?: readonly Mark[];
 }>;
-export declare const TextWithAnnotationDraft: ({ startPos, endPos, children, }: Props) => jsx.JSX.Element;
+export declare const TextWithAnnotationDraft: ({ startPos, endPos, children, textHighlighter, marks, }: Props) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.12.0",
+  "version": "109.12.2",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"