@atlaskit/renderer 109.12.1 → 109.12.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 109.12.3
+
+### Patch Changes
+
+- [#85984](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85984) [`3689328bd7c4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3689328bd7c4) - Fix resolvePos for renderer TextHighlight
+
+## 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

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,37 +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, mark));
+          endPos: endPos + parentDepth,
+          textHighlighter: this.textHighlighter,
+          marks: mark.marks
+        }, 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));
+      var segments = (0, _segmentText.segmentText)(mark.text, this.textHighlighter);
+      return (0, _renderTextSegments.renderTextSegments)(segments, this.textHighlighter, mark.marks, startPos);
     }
   }, {
     key: "renderNode",

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

@@ -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 !!(node !== null && node !== void 0 && (_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) {
@@ -66,7 +70,7 @@ function isRoot(element) {
   return !!element && element.classList.contains('ak-renderer-document');
 }
 function resolvePos(node, offset) {
-  // If the passed node doesnt exist, we should abort
+  // If the passed node doesn't exist, we should abort
   if (!node) {
     return false;
   }
@@ -84,12 +88,12 @@ function resolvePos(node, offset) {
   var current = node;
   if (current.parentElement && current.parentElement !== parent) {
     // Find the parent element that is a direct child of the position pointer
-    // the outter most element from our text position.
+    // the outer most element from our text position.
     var preParentPointer = findParentBeforePointer(current.parentElement);
     // If our range is inside an inline node
     // We need to move our pointers to parent element
-    // since we dont want to count text inside inline nodes at all
-    if (!isElementInlineMark(preParentPointer)) {
+    // since we don't want to count text inside inline nodes at all
+    if (!(isElementInlineMark(preParentPointer) || isHighlightTextNode(preParentPointer))) {
       current = current.parentElement;
       offset = 0;
     }

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.1";
+var packageVersion = "109.12.3";
 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,32 +282,13 @@ export default class ReactSerializer {
       return /*#__PURE__*/React.createElement(TextWrapperComponent, {
         key: textKey,
         startPos: startPos + parentDepth,
-        endPos: endPos + parentDepth
-      }, this.renderTextSegments(segments, textKey, mark));
-    }
-    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);
+        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({

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

@@ -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 !!(node !== null && node !== void 0 && (_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) {
@@ -62,7 +66,7 @@ function isRoot(element) {
   return !!element && element.classList.contains('ak-renderer-document');
 }
 export function resolvePos(node, offset) {
-  // If the passed node doesnt exist, we should abort
+  // If the passed node doesn't exist, we should abort
   if (!node) {
     return false;
   }
@@ -80,12 +84,12 @@ export function resolvePos(node, offset) {
   let current = node;
   if (current.parentElement && current.parentElement !== parent) {
     // Find the parent element that is a direct child of the position pointer
-    // the outter most element from our text position.
+    // the outer most element from our text position.
     const preParentPointer = findParentBeforePointer(current.parentElement);
     // If our range is inside an inline node
     // We need to move our pointers to parent element
-    // since we dont want to count text inside inline nodes at all
-    if (!isElementInlineMark(preParentPointer)) {
+    // since we don't want to count text inside inline nodes at all
+    if (!(isElementInlineMark(preParentPointer) || isHighlightTextNode(preParentPointer))) {
       current = current.parentElement;
       offset = 0;
     }

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.1";
+const packageVersion = "109.12.3";
 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,37 +307,13 @@ var ReactSerializer = /*#__PURE__*/function () {
         return /*#__PURE__*/React.createElement(TextWrapperComponent, {
           key: textKey,
           startPos: startPos + parentDepth,
-          endPos: endPos + parentDepth
-        }, this.renderTextSegments(segments, textKey, mark));
+          endPos: endPos + parentDepth,
+          textHighlighter: this.textHighlighter,
+          marks: mark.marks
+        }, 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));
+      var segments = segmentText(mark.text, this.textHighlighter);
+      return renderTextSegments(segments, this.textHighlighter, mark.marks, startPos);
     }
   }, {
     key: "renderNode",

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

@@ -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 !!(node !== null && node !== void 0 && (_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) {
@@ -58,7 +62,7 @@ function isRoot(element) {
   return !!element && element.classList.contains('ak-renderer-document');
 }
 export function resolvePos(node, offset) {
-  // If the passed node doesnt exist, we should abort
+  // If the passed node doesn't exist, we should abort
   if (!node) {
     return false;
   }
@@ -76,12 +80,12 @@ export function resolvePos(node, offset) {
   var current = node;
   if (current.parentElement && current.parentElement !== parent) {
     // Find the parent element that is a direct child of the position pointer
-    // the outter most element from our text position.
+    // the outer most element from our text position.
     var preParentPointer = findParentBeforePointer(current.parentElement);
     // If our range is inside an inline node
     // We need to move our pointers to parent element
-    // since we dont want to count text inside inline nodes at all
-    if (!isElementInlineMark(preParentPointer)) {
+    // since we don't want to count text inside inline nodes at all
+    if (!(isElementInlineMark(preParentPointer) || isHighlightTextNode(preParentPointer))) {
       current = current.parentElement;
       offset = 0;
     }

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.1";
+var packageVersion = "109.12.3";
 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

@@ -64,5 +64,6 @@ export type TextHighlighter = {
         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

@@ -64,5 +64,6 @@ export type TextHighlighter = {
         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.1",
+  "version": "109.12.3",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"