@atlaskit/renderer 108.13.1 → 108.14.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/renderer
 
+## 108.14.0
+
+### Minor Changes
+
+- [`fd3a855ab5a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd3a855ab5a) - [ED-19844] Add trailing telepointer logic to renderer behind feature flag
+
 ## 108.13.1
 
 ### Patch Changes

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

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.13.1";
+var packageVersion = "108.14.0";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -379,6 +379,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowCustomPanels: allowCustomPanels,
           allowPlaceholderText: allowPlaceholderText,
           useBlockRenderForCodeBlock: (_featureFlags$feature = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature !== void 0 ? _featureFlags$feature : true,
+          addTelepointer: this.props.addTelepointer,
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
           onMouseDown: this.onMouseDownEditView
@@ -413,6 +414,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowColumnSorting: allowColumnSorting,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
+          addTelepointer: this.props.addTelepointer,
           onClick: handleWrapperOnClick
         }, (0, _react2.jsx)(_ui.UnsupportedBlock, null));
       }
@@ -466,7 +468,60 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     children = props.children,
     onClick = props.onClick,
     onMouseDown = props.onMouseDown,
-    useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock;
+    useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock,
+    addTelepointer = props.addTelepointer;
+  var createTelepointer = function createTelepointer() {
+    var telepointer = document.createElement('span');
+    telepointer.textContent = "\u200B";
+    telepointer.id = _style.TELEPOINTER_ID;
+    return telepointer;
+  };
+  var initialUpdate = _react.default.useRef(true);
+  _react.default.useEffect(function () {
+    if (!addTelepointer || !(innerRef !== null && innerRef !== void 0 && innerRef.current)) {
+      return;
+    }
+    var renderer = innerRef.current.querySelector('.ak-renderer-document');
+    if (initialUpdate.current) {
+      var lastChild = renderer.lastChild;
+      lastChild && lastChild.appendChild(createTelepointer());
+    }
+    var mutateTelepointer = function mutateTelepointer(mutations) {
+      mutations.forEach(function (mutation) {
+        if (initialUpdate.current) {
+          var oldTelepointer = renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
+          if (oldTelepointer) {
+            oldTelepointer.remove();
+          }
+          var _lastChild = renderer.lastChild;
+          _lastChild && _lastChild.appendChild(createTelepointer());
+          initialUpdate.current = false;
+        }
+        if (mutation.type === 'characterData') {
+          var parentNode = mutation.target.parentElement;
+          if (parentNode) {
+            var _oldTelepointer = renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
+            if (_oldTelepointer) {
+              _oldTelepointer.remove();
+            }
+            // initialUpdate.current = true;
+            // Add a new telepointer
+            parentNode.appendChild(createTelepointer());
+          }
+        }
+      });
+    };
+    var observer = new MutationObserver(mutateTelepointer);
+    observer.observe(innerRef.current, {
+      characterData: true,
+      attributes: false,
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      return observer.disconnect();
+    };
+  }, [innerRef, children, addTelepointer]);
   return (0, _react2.jsx)(_ui.WidthProvider, {
     className: "ak-renderer-wrapper is-".concat(appearance),
     "data-appearance": appearance

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rendererStyles = exports.headingSizes = exports.FullPagePadding = void 0;
+exports.rendererStyles = exports.headingSizes = exports.TELEPOINTER_ID = exports.FullPagePadding = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _components = require("@atlaskit/theme/components");
@@ -20,11 +20,31 @@ var _consts = require("../../consts");
 var _headingAnchor = require("../../react/nodes/heading-anchor");
 var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
 var _table = require("../../react/nodes/table");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var FullPagePadding = 32;
 exports.FullPagePadding = FullPagePadding;
+var TELEPOINTER_ID = 'ai-streaming-telepointer';
+exports.TELEPOINTER_ID = TELEPOINTER_ID;
+var telepointerStyles = function telepointerStyles(themeProps) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    #", " {\n      display: inline-block;\n      position: relative;\n      width: 1.5px;\n      height: 25px;\n      background: linear-gradient(\n        45deg,\n        ", " -12.02%,\n        ", "\n          19.18%,\n        ", "\n          71.87%\n      );\n      margin-left: ", ";\n\n      &::after {\n        content: 'AI';\n        position: absolute;\n        display: block;\n        top: 0;\n        left: 0;\n        font-size: 10px;\n        font-weight: 700;\n        width: 12.5px;\n        height: 13px;\n        padding-top: 1px;\n        padding-left: 1.5px;\n        line-height: initial;\n        border-radius: 0px 2px 2px 0px;\n        color: ", ";\n        background: linear-gradient(\n          45deg,\n          ", " -57%,\n          ", "\n            71.87%\n        );\n      }\n    }\n  "])), TELEPOINTER_ID, (0, _components.themed)({
+    light: '#F8E6A0',
+    dark: '#F5CD47'
+  })(themeProps), (0, _components.themed)({
+    light: '#8BDBE5',
+    dark: '#60C6D2'
+  })(themeProps), (0, _components.themed)({
+    light: '#0C66E4',
+    dark: '#388BFF'
+  })(themeProps), "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", (0, _components.themed)({
+    light: '#8BDBE5',
+    dark: '#60C6D2'
+  })(themeProps), (0, _components.themed)({
+    light: '#0C66E4',
+    dark: '#388BFF'
+  })(themeProps));
+};
 var getLineHeight = function getLineHeight(fontCode) {
   return _typography.headingSizes[fontCode].lineHeight / _typography.headingSizes[fontCode].size;
 };
@@ -51,7 +71,7 @@ var headingSizes = {
 exports.headingSizes = headingSizes;
 var headingAnchorStyle = function headingAnchorStyle(headingTag) {
   return (// TODO Delete this comment after verifying space token -> previous value `margin-left: 6px`
-    (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    /**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n    .", " {\n      position: absolute;\n      height: ", "em;\n\n      margin-left: ", ";\n\n      button {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    }\n\n    /**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n    @media (hover: hover) and (pointer: fine) {\n      .", " {\n        > button {\n          opacity: 0;\n          transform: translate(-8px, 0px);\n          transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;\n        }\n      }\n\n      &:hover {\n        .", " > button {\n          opacity: 1;\n          transform: none !important;\n        }\n      }\n    }\n  "])), _headingAnchor.HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName)
+    (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    /**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n    .", " {\n      position: absolute;\n      height: ", "em;\n\n      margin-left: ", ";\n\n      button {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    }\n\n    /**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n    @media (hover: hover) and (pointer: fine) {\n      .", " {\n        > button {\n          opacity: 0;\n          transform: translate(-8px, 0px);\n          transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;\n        }\n      }\n\n      &:hover {\n        .", " > button {\n          opacity: 1;\n          transform: none !important;\n        }\n      }\n    }\n  "])), _headingAnchor.HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName)
   );
 };
 var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
@@ -60,7 +80,7 @@ var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
     return '';
   }
   // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 ", " 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "], ["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 ", " 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "])), _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName, "var(--ds-space-075, 6px)", _headingAnchor.HeadingAnchorWrapperClassName);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 ", " 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "], ["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 ", " 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "])), _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName, "var(--ds-space-075, 6px)", _headingAnchor.HeadingAnchorWrapperClassName);
 };
 var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   var allowColumnSorting = _ref2.allowColumnSorting,
@@ -72,7 +92,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   if (allowNestedHeaderLinks) {
     headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      .", " {\n        margin: 0;\n        .", " {\n          opacity: 1;\n          transition: opacity 0.2s ease-in-out;\n        }\n      }\n\n      .", " {\n        .", " {\n          opacity: 0;\n          &:focus {\n            opacity: 1;\n          }\n        }\n      }\n\n      &:hover {\n        .", " {\n          .", " {\n            opacity: 1;\n          }\n        }\n      }\n    }\n  "])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      .", " {\n        margin: 0;\n        .", " {\n          opacity: 1;\n          transition: opacity 0.2s ease-in-out;\n        }\n      }\n\n      .", " {\n        .", " {\n          opacity: 0;\n          &:focus {\n            opacity: 1;\n          }\n        }\n      }\n\n      &:hover {\n        .", " {\n          .", " {\n            opacity: 1;\n          }\n        }\n      }\n    }\n  "])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
 };
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   var appearance = _ref3.appearance;
@@ -80,17 +100,17 @@ var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   if (appearance !== 'full-page' && appearance !== 'mobile') {
     return '';
   }
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    max-width: ", ";\n    margin: 0 auto;\n    padding: 0 ", "px;\n  "])), theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', appearance === 'full-page' ? FullPagePadding : 0);
+  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    max-width: ", ";\n    margin: 0 auto;\n    padding: 0 ", "px;\n  "])), theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', appearance === 'full-page' ? FullPagePadding : 0);
 };
 var fullWidthStyles = function fullWidthStyles(_ref5) {
   var appearance = _ref5.appearance;
   if (appearance !== 'full-width') {
     return '';
   }
-  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    max-width: ", "px;\n    margin: 0 auto;\n\n    .fabric-editor-breakout-mark,\n    .ak-renderer-extension {\n      width: 100% !important;\n    }\n\n    ", "\n  "])), _editorSharedStyles.akEditorFullWidthLayoutWidth, (0, _table.isTableResizingEnabled)(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    max-width: ", "px;\n    margin: 0 auto;\n\n    .fabric-editor-breakout-mark,\n    .ak-renderer-extension {\n      width: 100% !important;\n    }\n\n    ", "\n  "])), _editorSharedStyles.akEditorFullWidthLayoutWidth, (0, _table.isTableResizingEnabled)(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
 };
 var breakoutWidthStyle = function breakoutWidthStyle() {
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    *:not([data-mark-type='fragment'])\n      .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n\n    [data-mark-type='fragment'] * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n  "])), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    *:not([data-mark-type='fragment'])\n      .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n\n    [data-mark-type='fragment'] * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n  "])), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
 };
 var rendererStyles = function rendererStyles(wrapperProps) {
   return function (theme) {
@@ -99,19 +119,19 @@ var rendererStyles = function rendererStyles(wrapperProps) {
       theme: theme
     };
     var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
-    return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", ";\n        color: ", ";\n        padding: 2px 4px;\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", " 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: 8px;\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        ", "\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: block;\n        /* stylelint-enable */\n\n        position: relative;\n        border-radius: ", ";\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n      }\n\n      ", "\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", ";\n        & > div + div {\n          margin-left: ", ";\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n\n        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      & :not([data-node-type='decisionList']) > li {\n        ", "\n      }\n    "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
+    return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", "\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", ";\n        color: ", ";\n        padding: ", " ", ";\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", " 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: ", ";\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        ", "\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: block;\n        /* stylelint-enable */\n\n        position: relative;\n        border-radius: ", ";\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n      }\n\n      ", "\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", ";\n        & > div + div {\n          margin-left: ", ";\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n\n        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      & :not([data-node-type='decisionList']) > li {\n        ", "\n      }\n    "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, #B8C7E0)"
     })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), (0, _components.themed)({
       light: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
       dark: "var(--ds-text-subtlest, ".concat(colors.DN200, ")")
-    })(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
+    })(themeProps), telepointerStyles(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
       light: "var(--ds-background-neutral, ".concat(colors.N30A, ")"),
       dark: "var(--ds-background-neutral, ".concat(colors.DN70, ")")
     })(themeProps), "var(--ds-border-radius-100, 3px)", (0, _components.themed)({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, ".concat(colors.DN600, ")")
-    })(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
+    })(themeProps), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
       light: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
       dark: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
     })(themeProps), (0, _components.themed)({

package/dist/cjs/ui/renderer-props.js

@@ -1,3 +1,5 @@
 "use strict";
 
-var _analytics = require("@atlaskit/editor-common/analytics");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -15,7 +15,7 @@ import { FabricChannel } from '@atlaskit/analytics-listeners';
 import { FabricEditorAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 import uuid from 'uuid/v4';
 import { ReactSerializer, renderDocument } from '../../';
-import { rendererStyles } from './style';
+import { TELEPOINTER_ID, rendererStyles } from './style';
 import { TruncatedWrapper } from './truncated-wrapper';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { PLATFORM, MODE } from '../../analytics/events';
@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.13.1";
+const packageVersion = "108.14.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);
@@ -354,6 +354,7 @@ export class Renderer extends PureComponent {
         allowCustomPanels: allowCustomPanels,
         allowPlaceholderText: allowPlaceholderText,
         useBlockRenderForCodeBlock: (_featureFlags$feature = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature !== void 0 ? _featureFlags$feature : true,
+        addTelepointer: this.props.addTelepointer,
         innerRef: this.editorRef,
         onClick: handleWrapperOnClick,
         onMouseDown: this.onMouseDownEditView
@@ -388,6 +389,7 @@ export class Renderer extends PureComponent {
         allowColumnSorting: allowColumnSorting,
         allowNestedHeaderLinks: allowNestedHeaderLinks,
         useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
+        addTelepointer: this.props.addTelepointer,
         onClick: handleWrapperOnClick
       }, jsx(UnsupportedBlock, null));
     }
@@ -437,8 +439,59 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     children,
     onClick,
     onMouseDown,
-    useBlockRenderForCodeBlock
+    useBlockRenderForCodeBlock,
+    addTelepointer
   } = props;
+  const createTelepointer = () => {
+    const telepointer = document.createElement('span');
+    telepointer.textContent = '\u200b';
+    telepointer.id = TELEPOINTER_ID;
+    return telepointer;
+  };
+  const initialUpdate = React.useRef(true);
+  React.useEffect(() => {
+    if (!addTelepointer || !(innerRef !== null && innerRef !== void 0 && innerRef.current)) {
+      return;
+    }
+    const renderer = innerRef.current.querySelector('.ak-renderer-document');
+    if (initialUpdate.current) {
+      const lastChild = renderer.lastChild;
+      lastChild && lastChild.appendChild(createTelepointer());
+    }
+    const mutateTelepointer = mutations => {
+      mutations.forEach(mutation => {
+        if (initialUpdate.current) {
+          const oldTelepointer = renderer.querySelector(`#${TELEPOINTER_ID}`);
+          if (oldTelepointer) {
+            oldTelepointer.remove();
+          }
+          const lastChild = renderer.lastChild;
+          lastChild && lastChild.appendChild(createTelepointer());
+          initialUpdate.current = false;
+        }
+        if (mutation.type === 'characterData') {
+          const parentNode = mutation.target.parentElement;
+          if (parentNode) {
+            const oldTelepointer = renderer.querySelector(`#${TELEPOINTER_ID}`);
+            if (oldTelepointer) {
+              oldTelepointer.remove();
+            }
+            // initialUpdate.current = true;
+            // Add a new telepointer
+            parentNode.appendChild(createTelepointer());
+          }
+        }
+      });
+    };
+    const observer = new MutationObserver(mutateTelepointer);
+    observer.observe(innerRef.current, {
+      characterData: true,
+      attributes: false,
+      childList: true,
+      subtree: true
+    });
+    return () => observer.disconnect();
+  }, [innerRef, children, addTelepointer]);
   return jsx(WidthProvider, {
     className: `ak-renderer-wrapper is-${appearance}`,
     "data-appearance": appearance

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

@@ -13,6 +13,64 @@ import { shadowObserverClassNames } from '@atlaskit/editor-common/ui';
 import { getLightWeightCodeBlockStylesForRootRendererStyleSheet } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
 import { isTableResizingEnabled } from '../../react/nodes/table';
 export const FullPagePadding = 32;
+export const TELEPOINTER_ID = 'ai-streaming-telepointer';
+const telepointerStyles = themeProps => {
+  return css`
+    #${TELEPOINTER_ID} {
+      display: inline-block;
+      position: relative;
+      width: 1.5px;
+      height: 25px;
+      background: linear-gradient(
+        45deg,
+        ${themed({
+    light: '#F8E6A0',
+    dark: '#F5CD47'
+  })(themeProps)} -12.02%,
+        ${themed({
+    light: '#8BDBE5',
+    dark: '#60C6D2'
+  })(themeProps)}
+          19.18%,
+        ${themed({
+    light: '#0C66E4',
+    dark: '#388BFF'
+  })(themeProps)}
+          71.87%
+      );
+      margin-left: ${"var(--ds-space-025, 2px)"};
+
+      &::after {
+        content: 'AI';
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 0;
+        font-size: 10px;
+        font-weight: 700;
+        width: 12.5px;
+        height: 13px;
+        padding-top: 1px;
+        padding-left: 1.5px;
+        line-height: initial;
+        border-radius: 0px 2px 2px 0px;
+        color: ${"var(--ds-text-inverse, white)"};
+        background: linear-gradient(
+          45deg,
+          ${themed({
+    light: '#8BDBE5',
+    dark: '#60C6D2'
+  })(themeProps)} -57%,
+          ${themed({
+    light: '#0C66E4',
+    dark: '#388BFF'
+  })(themeProps)}
+            71.87%
+        );
+      }
+    }
+  `;
+};
 const getLineHeight = fontCode => headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
 export const headingSizes = {
   h1: {
@@ -375,6 +433,7 @@ export const rendererStyles = wrapperProps => theme => {
   })(themeProps)};
       }
 
+      ${telepointerStyles(themeProps)}
       ${whitespaceSharedStyles};
       ${blockquoteSharedStyles};
       ${headingsSharedStyles(themeProps)};
@@ -408,7 +467,7 @@ export const rendererStyles = wrapperProps => theme => {
     light: `var(--ds-text, ${colors.N800})`,
     dark: `var(--ds-text, ${colors.DN600})`
   })(themeProps)};
-        padding: 2px 4px;
+        padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"};
         margin: 0 1px;
         transition: background 0.3s;
       }
@@ -450,7 +509,7 @@ export const rendererStyles = wrapperProps => theme => {
         & + h4,
         & + h5,
         & + h6 {
-          margin-top: 8px;
+          margin-top: ${"var(--ds-space-100, 8px)"};
         }
       }
 

package/dist/es2019/ui/renderer-props.js

@@ -1 +1 @@
-import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+export {};

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

@@ -25,7 +25,7 @@ import { FabricChannel } from '@atlaskit/analytics-listeners';
 import { FabricEditorAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 import uuid from 'uuid/v4';
 import { ReactSerializer, renderDocument } from '../../';
-import { rendererStyles } from './style';
+import { TELEPOINTER_ID, rendererStyles } from './style';
 import { TruncatedWrapper } from './truncated-wrapper';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { PLATFORM, MODE } from '../../analytics/events';
@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.13.1";
+var packageVersion = "108.14.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -369,6 +369,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowCustomPanels: allowCustomPanels,
           allowPlaceholderText: allowPlaceholderText,
           useBlockRenderForCodeBlock: (_featureFlags$feature = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature !== void 0 ? _featureFlags$feature : true,
+          addTelepointer: this.props.addTelepointer,
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
           onMouseDown: this.onMouseDownEditView
@@ -403,6 +404,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowColumnSorting: allowColumnSorting,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
+          addTelepointer: this.props.addTelepointer,
           onClick: handleWrapperOnClick
         }, jsx(UnsupportedBlock, null));
       }
@@ -455,7 +457,60 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
     children = props.children,
     onClick = props.onClick,
     onMouseDown = props.onMouseDown,
-    useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock;
+    useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock,
+    addTelepointer = props.addTelepointer;
+  var createTelepointer = function createTelepointer() {
+    var telepointer = document.createElement('span');
+    telepointer.textContent = "\u200B";
+    telepointer.id = TELEPOINTER_ID;
+    return telepointer;
+  };
+  var initialUpdate = React.useRef(true);
+  React.useEffect(function () {
+    if (!addTelepointer || !(innerRef !== null && innerRef !== void 0 && innerRef.current)) {
+      return;
+    }
+    var renderer = innerRef.current.querySelector('.ak-renderer-document');
+    if (initialUpdate.current) {
+      var lastChild = renderer.lastChild;
+      lastChild && lastChild.appendChild(createTelepointer());
+    }
+    var mutateTelepointer = function mutateTelepointer(mutations) {
+      mutations.forEach(function (mutation) {
+        if (initialUpdate.current) {
+          var oldTelepointer = renderer.querySelector("#".concat(TELEPOINTER_ID));
+          if (oldTelepointer) {
+            oldTelepointer.remove();
+          }
+          var _lastChild = renderer.lastChild;
+          _lastChild && _lastChild.appendChild(createTelepointer());
+          initialUpdate.current = false;
+        }
+        if (mutation.type === 'characterData') {
+          var parentNode = mutation.target.parentElement;
+          if (parentNode) {
+            var _oldTelepointer = renderer.querySelector("#".concat(TELEPOINTER_ID));
+            if (_oldTelepointer) {
+              _oldTelepointer.remove();
+            }
+            // initialUpdate.current = true;
+            // Add a new telepointer
+            parentNode.appendChild(createTelepointer());
+          }
+        }
+      });
+    };
+    var observer = new MutationObserver(mutateTelepointer);
+    observer.observe(innerRef.current, {
+      characterData: true,
+      attributes: false,
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      return observer.disconnect();
+    };
+  }, [innerRef, children, addTelepointer]);
   return jsx(WidthProvider, {
     className: "ak-renderer-wrapper is-".concat(appearance),
     "data-appearance": appearance

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

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { fontFamily, fontSize } from '@atlaskit/theme/constants';
@@ -15,6 +15,25 @@ import { shadowObserverClassNames } from '@atlaskit/editor-common/ui';
 import { getLightWeightCodeBlockStylesForRootRendererStyleSheet } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
 import { isTableResizingEnabled } from '../../react/nodes/table';
 export var FullPagePadding = 32;
+export var TELEPOINTER_ID = 'ai-streaming-telepointer';
+var telepointerStyles = function telepointerStyles(themeProps) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    #", " {\n      display: inline-block;\n      position: relative;\n      width: 1.5px;\n      height: 25px;\n      background: linear-gradient(\n        45deg,\n        ", " -12.02%,\n        ", "\n          19.18%,\n        ", "\n          71.87%\n      );\n      margin-left: ", ";\n\n      &::after {\n        content: 'AI';\n        position: absolute;\n        display: block;\n        top: 0;\n        left: 0;\n        font-size: 10px;\n        font-weight: 700;\n        width: 12.5px;\n        height: 13px;\n        padding-top: 1px;\n        padding-left: 1.5px;\n        line-height: initial;\n        border-radius: 0px 2px 2px 0px;\n        color: ", ";\n        background: linear-gradient(\n          45deg,\n          ", " -57%,\n          ", "\n            71.87%\n        );\n      }\n    }\n  "])), TELEPOINTER_ID, themed({
+    light: '#F8E6A0',
+    dark: '#F5CD47'
+  })(themeProps), themed({
+    light: '#8BDBE5',
+    dark: '#60C6D2'
+  })(themeProps), themed({
+    light: '#0C66E4',
+    dark: '#388BFF'
+  })(themeProps), "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", themed({
+    light: '#8BDBE5',
+    dark: '#60C6D2'
+  })(themeProps), themed({
+    light: '#0C66E4',
+    dark: '#388BFF'
+  })(themeProps));
+};
 var getLineHeight = function getLineHeight(fontCode) {
   return headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
 };
@@ -40,7 +59,7 @@ export var headingSizes = {
 };
 var headingAnchorStyle = function headingAnchorStyle(headingTag) {
   return (// TODO Delete this comment after verifying space token -> previous value `margin-left: 6px`
-    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    /**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n    .", " {\n      position: absolute;\n      height: ", "em;\n\n      margin-left: ", ";\n\n      button {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    }\n\n    /**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n    @media (hover: hover) and (pointer: fine) {\n      .", " {\n        > button {\n          opacity: 0;\n          transform: translate(-8px, 0px);\n          transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;\n        }\n      }\n\n      &:hover {\n        .", " > button {\n          opacity: 1;\n          transform: none !important;\n        }\n      }\n    }\n  "])), HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName)
+    css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    /**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n    .", " {\n      position: absolute;\n      height: ", "em;\n\n      margin-left: ", ";\n\n      button {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    }\n\n    /**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n    @media (hover: hover) and (pointer: fine) {\n      .", " {\n        > button {\n          opacity: 0;\n          transform: translate(-8px, 0px);\n          transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;\n        }\n      }\n\n      &:hover {\n        .", " > button {\n          opacity: 1;\n          transform: none !important;\n        }\n      }\n    }\n  "])), HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName)
   );
 };
 var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
@@ -49,7 +68,7 @@ var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
     return '';
   }
   // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 ", " 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "], ["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 ", " 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "])), HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName, "var(--ds-space-075, 6px)", HeadingAnchorWrapperClassName);
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 ", " 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "], ["\n    .fabric-editor-block-mark[data-align] > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n      > {\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.", "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\\u202C';\n            }\n          }\n        }\n      }\n      .", " {\n        margin: 0 ", " 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .", " > button {\n          transform: translate(8px, 0px);\n        }\n      }\n    }\n  "])), HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName, "var(--ds-space-075, 6px)", HeadingAnchorWrapperClassName);
 };
 var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   var allowColumnSorting = _ref2.allowColumnSorting,
@@ -61,7 +80,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   if (allowNestedHeaderLinks) {
     headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      .", " {\n        margin: 0;\n        .", " {\n          opacity: 1;\n          transition: opacity 0.2s ease-in-out;\n        }\n      }\n\n      .", " {\n        .", " {\n          opacity: 0;\n          &:focus {\n            opacity: 1;\n          }\n        }\n      }\n\n      &:hover {\n        .", " {\n          .", " {\n            opacity: 1;\n          }\n        }\n      }\n    }\n  "])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      .", " {\n        margin: 0;\n        .", " {\n          opacity: 1;\n          transition: opacity 0.2s ease-in-out;\n        }\n      }\n\n      .", " {\n        .", " {\n          opacity: 0;\n          &:focus {\n            opacity: 1;\n          }\n        }\n      }\n\n      &:hover {\n        .", " {\n          .", " {\n            opacity: 1;\n          }\n        }\n      }\n    }\n  "])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON);
 };
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   var appearance = _ref3.appearance;
@@ -69,17 +88,17 @@ var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   if (appearance !== 'full-page' && appearance !== 'mobile') {
     return '';
   }
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    max-width: ", ";\n    margin: 0 auto;\n    padding: 0 ", "px;\n  "])), theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', appearance === 'full-page' ? FullPagePadding : 0);
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    max-width: ", ";\n    margin: 0 auto;\n    padding: 0 ", "px;\n  "])), theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', appearance === 'full-page' ? FullPagePadding : 0);
 };
 var fullWidthStyles = function fullWidthStyles(_ref5) {
   var appearance = _ref5.appearance;
   if (appearance !== 'full-width') {
     return '';
   }
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    max-width: ", "px;\n    margin: 0 auto;\n\n    .fabric-editor-breakout-mark,\n    .ak-renderer-extension {\n      width: 100% !important;\n    }\n\n    ", "\n  "])), akEditorFullWidthLayoutWidth, isTableResizingEnabled(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    max-width: ", "px;\n    margin: 0 auto;\n\n    .fabric-editor-breakout-mark,\n    .ak-renderer-extension {\n      width: 100% !important;\n    }\n\n    ", "\n  "])), akEditorFullWidthLayoutWidth, isTableResizingEnabled(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
 };
 var breakoutWidthStyle = function breakoutWidthStyle() {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    *:not([data-mark-type='fragment'])\n      .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n\n    [data-mark-type='fragment'] * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n  "])), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    *:not([data-mark-type='fragment'])\n      .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n\n    [data-mark-type='fragment'] * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n  "])), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
 };
 export var rendererStyles = function rendererStyles(wrapperProps) {
   return function (theme) {
@@ -88,19 +107,19 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
       theme: theme
     };
     var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", ";\n        color: ", ";\n        padding: 2px 4px;\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", " 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: 8px;\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        ", "\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: block;\n        /* stylelint-enable */\n\n        position: relative;\n        border-radius: ", ";\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n      }\n\n      ", "\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", ";\n        & > div + div {\n          margin-left: ", ";\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n\n        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      & :not([data-node-type='decisionList']) > li {\n        ", "\n      }\n    "])), editorFontSize(themeProps), themed({
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", "\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", ";\n        color: ", ";\n        padding: ", " ", ";\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", " 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: ", ";\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        ", "\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: block;\n        /* stylelint-enable */\n\n        position: relative;\n        border-radius: ", ";\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n      }\n\n      ", "\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", ";\n        & > div + div {\n          margin-left: ", ";\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n\n        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      & :not([data-node-type='decisionList']) > li {\n        ", "\n      }\n    "])), editorFontSize(themeProps), themed({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, #B8C7E0)"
     })(themeProps), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), themed({
       light: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
       dark: "var(--ds-text-subtlest, ".concat(colors.DN200, ")")
-    })(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(themeProps), ruleSharedStyles(themeProps), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(themeProps), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
+    })(themeProps), telepointerStyles(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(themeProps), ruleSharedStyles(themeProps), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(themeProps), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
       light: "var(--ds-background-neutral, ".concat(colors.N30A, ")"),
       dark: "var(--ds-background-neutral, ".concat(colors.DN70, ")")
     })(themeProps), "var(--ds-border-radius-100, 3px)", themed({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, ".concat(colors.DN600, ")")
-    })(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(themeProps), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, themed({
+    })(themeProps), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(themeProps), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, themed({
       light: "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"),
       dark: "var(--ds-background-neutral, ".concat(akEditorTableToolbarDark, ")")
     })(themeProps), themed({

package/dist/esm/ui/renderer-props.js

@@ -1 +1 @@
-import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+export {};

package/dist/types/ui/Renderer/index.d.ts

@@ -12,8 +12,8 @@ export type { RendererProps as Props };
 export declare class Renderer extends PureComponent<RendererProps> {
     private providerFactory;
     private serializer;
-    private rafID?;
     private editorRef;
+    private rafID?;
     private mouseDownSelection?;
     private id?;
     /**

package/dist/types/ui/Renderer/style.d.ts

@@ -1,5 +1,5 @@
-import { Theme } from '@emotion/react';
-import { RendererAppearance } from './types';
+import type { Theme } from '@emotion/react';
+import type { RendererAppearance } from './types';
 export declare const FullPagePadding = 32;
 export type RendererWrapperProps = {
     appearance?: RendererAppearance;
@@ -7,6 +7,7 @@ export type RendererWrapperProps = {
     allowColumnSorting: boolean;
     useBlockRenderForCodeBlock: boolean;
 };
+export declare const TELEPOINTER_ID = "ai-streaming-telepointer";
 export declare const headingSizes: {
     [key: string]: {
         [key: string]: number;

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

@@ -1,20 +1,20 @@
 /// <reference types="react" />
-import { Schema } from '@atlaskit/editor-prosemirror/model';
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { ADFStage } from '@atlaskit/editor-common/validator';
 import type { AnnotationProviders } from '@atlaskit/editor-common/types';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { UnsupportedContentLevelsTracking } from '@atlaskit/editor-common/utils';
-import { EmojiResourceConfig } from '@atlaskit/emoji/resource';
-import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { RendererContext } from '../';
-import { RenderOutputStat } from '../render-document';
-import { RendererAppearance, StickyHeaderProps, HeadingAnchorLinksProps, NodeComponentsProps } from './Renderer/types';
-import { MediaOptions } from '../types/mediaOptions';
-import { SmartLinksOptions } from '../types/smartLinksOptions';
-import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
-import { DocNode } from '@atlaskit/adf-schema';
+import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { RendererContext } from '../';
+import type { RenderOutputStat } from '../render-document';
+import type { RendererAppearance, StickyHeaderProps, HeadingAnchorLinksProps, NodeComponentsProps } from './Renderer/types';
+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';
 export interface RawObjectFeatureFlags {
     ['renderer-render-tracking']: string;
 }
@@ -71,6 +71,16 @@ export interface RendererProps {
     allowSelectAllTrap?: boolean;
     unsupportedContentLevelsTracking?: UnsupportedContentLevelsTracking;
     nodeComponents?: NodeComponentsProps;
+    /**
+     * When enabled a trailing telepointer will be added to the rendered document
+     * following content updates.
+     *
+     * Content is updated by passing a new value prop to the renderer.
+     *
+     * The trailing pointer is updated by dom injection to the last text node which
+     * is updated as a result of a content update.
+     */
+    addTelepointer?: boolean;
     /**
      * @default undefined
      * @description

package/dist/types-ts4.5/ui/Renderer/index.d.ts

@@ -12,8 +12,8 @@ export type { RendererProps as Props };
 export declare class Renderer extends PureComponent<RendererProps> {
     private providerFactory;
     private serializer;
-    private rafID?;
     private editorRef;
+    private rafID?;
     private mouseDownSelection?;
     private id?;
     /**

package/dist/types-ts4.5/ui/Renderer/style.d.ts

@@ -1,5 +1,5 @@
-import { Theme } from '@emotion/react';
-import { RendererAppearance } from './types';
+import type { Theme } from '@emotion/react';
+import type { RendererAppearance } from './types';
 export declare const FullPagePadding = 32;
 export type RendererWrapperProps = {
     appearance?: RendererAppearance;
@@ -7,6 +7,7 @@ export type RendererWrapperProps = {
     allowColumnSorting: boolean;
     useBlockRenderForCodeBlock: boolean;
 };
+export declare const TELEPOINTER_ID = "ai-streaming-telepointer";
 export declare const headingSizes: {
     [key: string]: {
         [key: string]: number;

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

@@ -1,20 +1,20 @@
 /// <reference types="react" />
-import { Schema } from '@atlaskit/editor-prosemirror/model';
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { ADFStage } from '@atlaskit/editor-common/validator';
 import type { AnnotationProviders } from '@atlaskit/editor-common/types';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { UnsupportedContentLevelsTracking } from '@atlaskit/editor-common/utils';
-import { EmojiResourceConfig } from '@atlaskit/emoji/resource';
-import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { RendererContext } from '../';
-import { RenderOutputStat } from '../render-document';
-import { RendererAppearance, StickyHeaderProps, HeadingAnchorLinksProps, NodeComponentsProps } from './Renderer/types';
-import { MediaOptions } from '../types/mediaOptions';
-import { SmartLinksOptions } from '../types/smartLinksOptions';
-import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
-import { DocNode } from '@atlaskit/adf-schema';
+import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { RendererContext } from '../';
+import type { RenderOutputStat } from '../render-document';
+import type { RendererAppearance, StickyHeaderProps, HeadingAnchorLinksProps, NodeComponentsProps } from './Renderer/types';
+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';
 export interface RawObjectFeatureFlags {
     ['renderer-render-tracking']: string;
 }
@@ -71,6 +71,16 @@ export interface RendererProps {
     allowSelectAllTrap?: boolean;
     unsupportedContentLevelsTracking?: UnsupportedContentLevelsTracking;
     nodeComponents?: NodeComponentsProps;
+    /**
+     * When enabled a trailing telepointer will be added to the rendered document
+     * following content updates.
+     *
+     * Content is updated by passing a new value prop to the renderer.
+     *
+     * The trailing pointer is updated by dom injection to the last text node which
+     * is updated as a result of a content update.
+     */
+    addTelepointer?: boolean;
     /**
      * @default undefined
      * @description

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.13.1",
+  "version": "108.14.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.10.0",
     "@atlaskit/code": "^14.6.0",
-    "@atlaskit/editor-common": "^75.1.0",
+    "@atlaskit/editor-common": "^75.5.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-prosemirror": "1.1.0",
@@ -44,13 +44,13 @@
     "@atlaskit/media-common": "^9.0.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
     "@atlaskit/media-ui": "^25.0.0",
-    "@atlaskit/media-viewer": "^48.0.0",
+    "@atlaskit/media-viewer": "^48.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/smart-card": "^26.26.0",
-    "@atlaskit/status": "^1.3.0",
+    "@atlaskit/smart-card": "^26.27.0",
+    "@atlaskit/status": "^1.4.0",
     "@atlaskit/task-decision": "^17.9.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.22.0",
+    "@atlaskit/tokens": "^1.25.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/report.api.md

@@ -23,9 +23,9 @@ import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import type { ADFStage } from '@atlaskit/editor-common/validator';
 import type { AnnotationProviders } from '@atlaskit/editor-common/types';
 import type { CardProps } from '@atlaskit/smart-card';
-import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { DocNode } from '@atlaskit/adf-schema';
-import { EmojiResourceConfig } from '@atlaskit/emoji/resource';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { DocNode } from '@atlaskit/adf-schema';
+import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
 import { EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
@@ -37,7 +37,7 @@ import type { MediaFeatureFlags } from '@atlaskit/media-common';
 import { Node as Node_2 } from '@atlaskit/editor-prosemirror/model';
 import { OperationalAEP } from '@atlaskit/editor-common/analytics';
 import { PropsDifference } from '@atlaskit/editor-common/utils';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { Schema } from '@atlaskit/editor-prosemirror/model';
 import { SEVERITY } from '@atlaskit/editor-common/utils';
 import { ShallowPropsDifference } from '@atlaskit/editor-common/utils';
@@ -411,6 +411,7 @@ export interface RendererContext {
 
 // @public (undocumented)
 export interface RendererProps {
+  addTelepointer?: boolean;
   // (undocumented)
   adfStage?: ADFStage;
   // (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -12,9 +12,9 @@ import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import type { ADFStage } from '@atlaskit/editor-common/validator';
 import type { AnnotationProviders } from '@atlaskit/editor-common/types';
 import type { CardProps } from '@atlaskit/smart-card';
-import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { DocNode } from '@atlaskit/adf-schema';
-import { EmojiResourceConfig } from '@atlaskit/emoji/resource';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { DocNode } from '@atlaskit/adf-schema';
+import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
 import { EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
@@ -26,7 +26,7 @@ import type { MediaFeatureFlags } from '@atlaskit/media-common';
 import { Node as Node_2 } from '@atlaskit/editor-prosemirror/model';
 import { OperationalAEP } from '@atlaskit/editor-common/analytics';
 import { PropsDifference } from '@atlaskit/editor-common/utils';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { Schema } from '@atlaskit/editor-prosemirror/model';
 import { SEVERITY } from '@atlaskit/editor-common/utils';
 import { ShallowPropsDifference } from '@atlaskit/editor-common/utils';
@@ -293,6 +293,7 @@ export interface RendererContext {
 
 // @public (undocumented)
 export interface RendererProps {
+    addTelepointer?: boolean;
     // (undocumented)
     adfStage?: ADFStage;
     // (undocumented)