@atlaskit/renderer 105.1.1 → 105.1.2

package/dist/cjs/ui/Renderer/click-to-edit.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isInteractiveElement = isInteractiveElement;
-
 var _classnames = require("@atlaskit/media-card/classnames");
-
 var _classnames2 = require("@atlaskit/media-viewer/classnames");
-
 /**
  * Check if an element is interactive (or otherwise if clicking on it shouldn't transition the
  * renderer to the editor in somewhere like the Jira description
@@ -18,14 +15,11 @@ function isInteractiveElement(element) {
   if ('href' in element && element.href != null) {
     return true;
   }
-
   if (element.classList.contains(_classnames2.mediaViewerPopupClass)) {
     return true;
   }
-
   if (element.classList.contains(_classnames.fileCardImageViewSelector)) {
     return true;
   }
-
   return false;
 }

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

@@ -1,121 +1,71 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Renderer = exports.NORMAL_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
-
 var _traverse = require("@atlaskit/adf-utils/traverse");
-
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
-
 var _ui = require("@atlaskit/editor-common/ui");
-
 var _utils = require("@atlaskit/editor-common/utils");
-
 var _normalizeFeatureFlags = require("@atlaskit/editor-common/normalize-feature-flags");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-
 var _analyticsListeners = require("@atlaskit/analytics-listeners");
-
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
-
 var _v = _interopRequireDefault(require("uuid/v4"));
-
 var _ = require("../../");
-
 var _style = require("./style");
-
 var _truncatedWrapper = require("./truncated-wrapper");
-
 var _analytics = require("@atlaskit/editor-common/analytics");
-
 var _events = require("../../analytics/events");
-
 var _analyticsContext = _interopRequireDefault(require("../../analytics/analyticsContext"));
-
 var _SmartCardStorage = require("../SmartCardStorage");
-
 var _breakoutSsr = require("./breakout-ssr");
-
 var _RendererActionsContext = require("../RendererActionsContext");
-
 var _activeHeaderIdProvider = require("../active-header-id-provider");
-
 var _annotations = require("../annotations");
-
 var _links = require("../../react/utils/links");
-
 var _utils2 = require("../../utils");
-
 var _clickToEdit = require("./click-to-edit");
-
 var _rendererContext = require("../../renderer-context");
-
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
-
 var _ErrorBoundary = require("./ErrorBoundary");
-
 var _RenderTracking = require("../../react/utils/performance/RenderTracking");
-
 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; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var NORMAL_SEVERITY_THRESHOLD = 2000;
 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 = "105.1.1";
-
+var packageVersion = "105.1.2";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
-
   var _super = _createSuper(Renderer);
-
   /**
    * This is used in measuring the Renderer Mount time and is then
    * deleted once that measurement occurs.
    */
+
   function Renderer(props) {
     var _this;
-
     (0, _classCallCheck2.default)(this, Renderer);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderedMeasurementDistortedDurationMonitor", (0, _utils.getDistortedDurationMonitor)());
@@ -129,7 +79,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
     }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireAnalyticsEvent", function (event) {
       var createAnalyticsEvent = _this.props.createAnalyticsEvent;
-
       if (createAnalyticsEvent) {
         var channel = _analyticsListeners.FabricChannel.editor;
         createAnalyticsEvent(event).fire(channel);
@@ -139,7 +88,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
       if (schema) {
         return schema;
       }
-
       return (0, _schemaDefault.getSchemaBasedOnStage)(adfStage);
     }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseDownEditView", function () {
@@ -152,56 +100,43 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseTripleClickInTables", function (event) {
       var _parentElement, _parentElement2;
-
       if (_utils.browser.ios || _utils.browser.android) {
         return;
       }
-
       var badBrowser = _utils.browser.chrome || _utils.browser.safari;
       var tripleClick = event.detail >= 3;
-
       if (!(badBrowser && tripleClick)) {
         return;
       }
-
       var selection = window.getSelection();
-
       if (!selection) {
         return;
       }
-
       var type = selection.type,
-          anchorNode = selection.anchorNode,
-          focusNode = selection.focusNode;
+        anchorNode = selection.anchorNode,
+        focusNode = selection.focusNode;
       var rangeSelection = Boolean(type === 'Range' && anchorNode && focusNode);
-
       if (!rangeSelection) {
         return;
       }
-
       var target = event.target;
       var tableCell = target.closest('td,th');
       var clickedInCell = Boolean(tableCell);
-
       if (!clickedInCell) {
         return;
       }
-
       var anchorInCell = tableCell.contains(anchorNode);
       var focusInCell = tableCell.contains(focusNode);
       var selectionStartsOrEndsOutsideClickedCell = !(anchorInCell && focusInCell);
-
       if (!selectionStartsOrEndsOutsideClickedCell) {
         return;
-      } // If selection starts or ends in a different cell than the clicked cell,
+      }
+      // If selection starts or ends in a different cell than the clicked cell,
       // we select the node inside the clicked cell (or if both are in a different
       // cell, we select the cell's contents instead). We want to select the nearest
       // parent block, so that a whole line of text/content is selected (rather than
       // selecting a span that would select one specific chunk of text).
-
-
       var elementToSelect = anchorInCell ? (_parentElement = anchorNode.parentElement) === null || _parentElement === void 0 ? void 0 : _parentElement.closest('div,p') : focusInCell ? (_parentElement2 = focusNode.parentElement) === null || _parentElement2 === void 0 ? void 0 : _parentElement2.closest('div,p') : tableCell;
-
       if (elementToSelect) {
         selection.selectAllChildren(elementToSelect);
       }
@@ -211,9 +146,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
     _this.editorRef = props.innerRef || /*#__PURE__*/_react.default.createRef();
     _this.id = (0, _v.default)();
     (0, _utils.startMeasure)("Renderer Render Time: ".concat(_this.id));
-
     var _featureFlags = _this.featureFlags(_this.props.featureFlags).featureFlags;
-
     if (_featureFlags !== null && _featureFlags !== void 0 && _featureFlags.rendererTtiTracking) {
       (0, _utils.measureTTI)(function (tti, ttiFromInvocation, canceled) {
         _this.fireAnalyticsEvent({
@@ -228,20 +161,17 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         });
       });
     }
-
     return _this;
   }
-
   (0, _createClass2.default)(Renderer, [{
     key: "anchorLinkAnalytics",
     value: function anchorLinkAnalytics() {
       var hash = window.location.hash && decodeURIComponent(window.location.hash.slice(1));
       var disableHeadingIDs = this.props.disableHeadingIDs;
-
       if (!disableHeadingIDs && hash && this.editorRef && this.editorRef.current instanceof HTMLElement) {
-        var anchorLinkElement = document.getElementById(hash); // We are not use this.editorRef.querySelector here, instead we have this.editorRef.contains
+        var anchorLinkElement = document.getElementById(hash);
+        // We are not use this.editorRef.querySelector here, instead we have this.editorRef.contains
         // because querySelector might fail if there are special characters in hash, and CSS.escape is still experimental.
-
         if (anchorLinkElement && this.editorRef.current.contains(anchorLinkElement)) {
           this.fireAnalyticsEvent({
             action: _analytics.ACTION.VIEWED,
@@ -259,7 +189,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-
       this.fireAnalyticsEvent({
         action: _analytics.ACTION.STARTED,
         actionSubject: _analytics.ACTION_SUBJECT.RENDERER,
@@ -271,11 +200,9 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
       this.rafID = requestAnimationFrame(function () {
         (0, _utils.stopMeasure)("Renderer Render Time: ".concat(_this2.id), function (duration) {
           var _analyticsEventSeveri, _analyticsEventSeveri2;
-
           var analyticsEventSeverityTracking = _this2.props.analyticsEventSeverityTracking;
           var forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && (0, _utils.shouldForceTracking)();
           var severity = !!forceSeverityTracking || analyticsEventSeverityTracking !== null && analyticsEventSeverityTracking !== void 0 && analyticsEventSeverityTracking.enabled ? (0, _utils.getAnalyticsEventSeverity)(duration, (_analyticsEventSeveri = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityNormalThreshold) !== null && _analyticsEventSeveri !== void 0 ? _analyticsEventSeveri : NORMAL_SEVERITY_THRESHOLD, (_analyticsEventSeveri2 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityDegradedThreshold) !== null && _analyticsEventSeveri2 !== void 0 ? _analyticsEventSeveri2 : DEGRADED_SEVERITY_THRESHOLD) : undefined;
-
           _this2.fireAnalyticsEvent({
             action: _analytics.ACTION.RENDERED,
             actionSubject: _analytics.ACTION_SUBJECT.RENDERER,
@@ -292,12 +219,9 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
             },
             eventType: _analytics.EVENT_TYPE.OPERATIONAL
           });
-
           _this2.renderedMeasurementDistortedDurationMonitor.cleanup();
-
           delete _this2.renderedMeasurementDistortedDurationMonitor;
         });
-
         _this2.anchorLinkAnalytics();
       });
     }
@@ -306,7 +230,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
       var nextMedia = nextProps.media || {};
       var media = this.props.media || {};
-
       if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.allowCustomPanels !== this.props.allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
         this.serializer = new _.ReactSerializer(this.deriveSerializerProps(nextProps));
       }
@@ -318,10 +241,8 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
       var stickyHeaders = props.stickyHeaders ? props.stickyHeaders === true ? {} : props.stickyHeaders : undefined;
       var annotationProvider = props.annotationProvider;
       var allowAnnotationsDraftMode = Boolean(annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.allowDraftMode);
-
       var _this$featureFlags = this.featureFlags(props.featureFlags),
-          featureFlags = _this$featureFlags.featureFlags;
-
+        featureFlags = _this$featureFlags.featureFlags;
       return {
         providers: this.providerFactory,
         eventHandlers: props.eventHandlers,
@@ -359,22 +280,21 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this3 = this;
-
       var _this$props = this.props,
-          adfDocument = _this$props.document,
-          onComplete = _this$props.onComplete,
-          onError = _this$props.onError,
-          appearance = _this$props.appearance,
-          adfStage = _this$props.adfStage,
-          truncated = _this$props.truncated,
-          maxHeight = _this$props.maxHeight,
-          fadeOutHeight = _this$props.fadeOutHeight,
-          enableSsrInlineScripts = _this$props.enableSsrInlineScripts,
-          allowHeadingAnchorLinks = _this$props.allowHeadingAnchorLinks,
-          allowPlaceholderText = _this$props.allowPlaceholderText,
-          allowColumnSorting = _this$props.allowColumnSorting,
-          allowCopyToClipboard = _this$props.allowCopyToClipboard,
-          allowCustomPanels = _this$props.allowCustomPanels;
+        adfDocument = _this$props.document,
+        onComplete = _this$props.onComplete,
+        onError = _this$props.onError,
+        appearance = _this$props.appearance,
+        adfStage = _this$props.adfStage,
+        truncated = _this$props.truncated,
+        maxHeight = _this$props.maxHeight,
+        fadeOutHeight = _this$props.fadeOutHeight,
+        enableSsrInlineScripts = _this$props.enableSsrInlineScripts,
+        allowHeadingAnchorLinks = _this$props.allowHeadingAnchorLinks,
+        allowPlaceholderText = _this$props.allowPlaceholderText,
+        allowColumnSorting = _this$props.allowColumnSorting,
+        allowCopyToClipboard = _this$props.allowCopyToClipboard,
+        allowCustomPanels = _this$props.allowCustomPanels;
       var allowNestedHeaderLinks = (0, _links.isNestedHeaderLinksEnabled)(allowHeadingAnchorLinks);
       /**
        * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
@@ -382,64 +302,55 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
        * renderer out for the editor).
        * @param event Click event anywhere inside renderer
        */
-
       var handleWrapperOnClick = function handleWrapperOnClick(event) {
         var _this3$props$eventHan;
+        var targetElement = event.target;
 
-        var targetElement = event.target; // ED-14862: When a user triple clicks to select a line of content inside a
+        // ED-14862: When a user triple clicks to select a line of content inside a
         // a table cell, but the browser incorrectly moves the selection start or end into
         // a different table cell, we manually set the selection back to within the original
         // table cell the user intended to target
-
         _this3.handleMouseTripleClickInTables(event);
-
         if (!((_this3$props$eventHan = _this3.props.eventHandlers) !== null && _this3$props$eventHan !== void 0 && _this3$props$eventHan.onUnhandledClick)) {
           return;
         }
-
         if (!(targetElement instanceof window.Element)) {
           return;
         }
+        var rendererWrapper = event.currentTarget;
 
-        var rendererWrapper = event.currentTarget; // Check if the click was on an interactive element
-
+        // Check if the click was on an interactive element
         var isInteractiveElementInTree = (0, _utils2.findInTree)(targetElement, rendererWrapper, _clickToEdit.isInteractiveElement);
-
         if (isInteractiveElementInTree) {
           return;
-        } // Ensure that selecting text in the renderer doesn't trigger onUnhandledClick
+        }
+
+        // Ensure that selecting text in the renderer doesn't trigger onUnhandledClick
         // This logic originated in jira-frontend:
         // src/packages/issue/issue-view/src/views/field/rich-text/rich-text-inline-edit-view.js
+
         // The selection is required to be checked in `onMouseDown` and here. If not here, a new
         // selection isn't reported; if not in `onMouseDown`, a click outside the selection will
         // return an empty selection, which will erroneously fire onUnhandledClick.
-
-
         var windowSelection = window.getSelection();
         var selection = windowSelection !== null ? windowSelection.toString() : undefined;
         var hasSelection = selection && selection.length !== 0;
         var hasSelectionMouseDown = _this3.mouseDownSelection && _this3.mouseDownSelection.length !== 0;
         var allowEditBasedOnSelection = !hasSelection && !hasSelectionMouseDown;
-
         if (allowEditBasedOnSelection) {
           _this3.props.eventHandlers.onUnhandledClick(event);
         }
       };
-
       try {
         var _this$featureFlags2, _this$featureFlags2$f, _this$featureFlags2$f2;
-
         var schema = this.getSchema(this.props.schema, this.props.adfStage);
-
         var _renderDocument = (0, _.renderDocument)(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
-            result = _renderDocument.result,
-            stat = _renderDocument.stat,
-            pmDoc = _renderDocument.pmDoc;
-
+          result = _renderDocument.result,
+          stat = _renderDocument.stat,
+          pmDoc = _renderDocument.pmDoc;
         if (onComplete) {
           onComplete(stat);
         }
-
         var rendererOutput = (0, _react2.jsx)(_rendererContext.RendererContextProvider, {
           value: this.featureFlags(this.props.featureFlags)
         }, (0, _react2.jsx)(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
@@ -482,7 +393,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         if (onError) {
           onError(e);
         }
-
         return (0, _react2.jsx)(RendererWrapper, {
           appearance: appearance,
           allowCopyToClipboard: allowCopyToClipboard,
@@ -497,13 +407,12 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       var dataProviders = this.props.dataProviders;
-
       if (this.rafID) {
         window.cancelAnimationFrame(this.rafID);
-      } // if this is the ProviderFactory which was created in constructor
-      // it's safe to destroy it on Renderer unmount
-
+      }
 
+      // if this is the ProviderFactory which was created in constructor
+      // it's safe to destroy it on Renderer unmount
       if (!dataProviders) {
         this.providerFactory.destroy();
       }
@@ -511,9 +420,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
   }]);
   return Renderer;
 }(_react.PureComponent);
-
 exports.Renderer = Renderer;
-
 var RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
   return (0, _react2.jsx)(_analyticsNamespacedContext.FabricEditorAnalyticsContext, {
     data: {
@@ -537,15 +444,14 @@ var RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
     }
   }));
 });
-
 var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   var allowColumnSorting = props.allowColumnSorting,
-      allowNestedHeaderLinks = props.allowNestedHeaderLinks,
-      innerRef = props.innerRef,
-      appearance = props.appearance,
-      children = props.children,
-      onClick = props.onClick,
-      onMouseDown = props.onMouseDown;
+    allowNestedHeaderLinks = props.allowNestedHeaderLinks,
+    innerRef = props.innerRef,
+    appearance = props.appearance,
+    children = props.children,
+    onClick = props.onClick,
+    onMouseDown = props.onMouseDown;
   return (0, _react2.jsx)(_ui.WidthProvider, {
     className: "ak-renderer-wrapper"
   }, (0, _react2.jsx)(_ui.BaseTheme, {
@@ -561,12 +467,11 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     })
   }, children)));
 });
-
 function RendererActionsInternalUpdater(_ref) {
   var children = _ref.children,
-      doc = _ref.doc,
-      schema = _ref.schema,
-      onAnalyticsEvent = _ref.onAnalyticsEvent;
+    doc = _ref.doc,
+    schema = _ref.schema,
+    onAnalyticsEvent = _ref.onAnalyticsEvent;
   var actions = (0, _react.useContext)(_RendererActionsContext.RendererContext);
   var rendererRef = (0, _react.useRef)(null);
   (0, _react.useLayoutEffect)(function () {
@@ -575,28 +480,22 @@ function RendererActionsInternalUpdater(_ref) {
     } else {
       actions._privateUnregisterRenderer();
     }
-
     return function () {
       return actions._privateUnregisterRenderer();
     };
   }, [actions, schema, doc, onAnalyticsEvent]);
   return children;
 }
-
 var RendererWithAnnotationSelection = function RendererWithAnnotationSelection(props) {
   var allowAnnotations = props.allowAnnotations,
-      adfDocument = props.document;
-
+    adfDocument = props.document;
   var localRef = _react.default.useRef(null);
-
   var innerRef = props.innerRef || localRef;
-
   if (!allowAnnotations) {
     return (0, _react2.jsx)(RendererWithAnalytics, (0, _extends2.default)({
       innerRef: innerRef
     }, props));
   }
-
   return (0, _react2.jsx)(_RendererActionsContext.RendererActionsContext, null, (0, _react2.jsx)(_annotations.AnnotationsWrapper, {
     rendererRef: innerRef,
     adfDocument: adfDocument,
@@ -607,6 +506,5 @@ var RendererWithAnnotationSelection = function RendererWithAnnotationSelection(p
     featureFlags: props.featureFlags
   }))));
 };
-
 var _default = RendererWithAnnotationSelection;
 exports.default = _default;

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

@@ -1,53 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.rendererStyles = exports.headingSizes = exports.FullPagePadding = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = require("@emotion/react");
-
 var _components = require("@atlaskit/theme/components");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-
 var _typography = require("@atlaskit/theme/typography");
-
 var _styles = require("@atlaskit/editor-common/styles");
-
 var _ui = require("@atlaskit/editor-common/ui");
-
 var _utils = require("@atlaskit/editor-common/utils");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-
 var _consts = require("../../consts");
-
 var _headingAnchor = require("../../react/nodes/heading-anchor");
-
 var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
 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 getLineHeight = function getLineHeight(fontCode) {
   return _typography.headingSizes[fontCode].lineHeight / _typography.headingSizes[fontCode].size;
 };
-
 var headingSizes = {
   h1: {
     lineHeight: getLineHeight('h700')
@@ -69,59 +48,43 @@ var headingSizes = {
   }
 };
 exports.headingSizes = headingSizes;
-
 var headingAnchorStyle = function headingAnchorStyle(headingTag) {
   return (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: 6px;\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, _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName);
 };
-
 var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
   var allowNestedHeaderLinks = _ref.allowNestedHeaderLinks;
-
   if (!allowNestedHeaderLinks) {
     return '';
   }
-
   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 6px 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 6px 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, _headingAnchor.HeadingAnchorWrapperClassName);
 };
-
 var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   var allowColumnSorting = _ref2.allowColumnSorting,
-      allowNestedHeaderLinks = _ref2.allowNestedHeaderLinks;
-
+    allowNestedHeaderLinks = _ref2.allowNestedHeaderLinks;
   if (!allowColumnSorting) {
     return '';
   }
-
   var headingsCss = '';
-
   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);
 };
-
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   var appearance = _ref3.appearance;
   var theme = _ref4.theme;
-
   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);
 };
-
 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    .pm-table-container,\n    .ak-renderer-extension {\n      width: 100% !important;\n    }\n  "])), _editorSharedStyles.akEditorFullWidthLayoutWidth);
 };
-
 var rendererStyles = function rendererStyles(wrapperProps) {
   return function (theme) {
     // This is required to be compatible with styled-components prop structure.
@@ -167,5 +130,4 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
   };
 };
-
 exports.rendererStyles = rendererStyles;