@atlaskit/renderer 108.7.2 → 108.7.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 108.7.4
+
+### Patch Changes
+
+- [`5057217ab16`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5057217ab16) - [ux] Fix border cutoff on renderer for linked images
+
+## 108.7.3
+
+### Patch Changes
+
+- [`e7ed90bad7c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7ed90bad7c) - Use renderer appearance to use custom width
+
 ## 108.7.2
 
 ### Patch Changes

package/dist/cjs/react/nodes/{media.js → media/index.js}

@@ -20,11 +20,12 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _ui = require("@atlaskit/editor-common/ui");
-var _MediaCard = require("../../ui/MediaCard");
+var _MediaCard = require("../../../ui/MediaCard");
 var _editorPalette = require("@atlaskit/editor-palette");
-var _utils = require("../../utils");
+var _utils = require("../../../utils");
 var _analytics = require("@atlaskit/editor-common/analytics");
-var _events = require("../../analytics/events");
+var _events = require("../../../analytics/events");
+var _styles = require("./styles");
 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 _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); }; }
@@ -79,21 +80,14 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         "data-mark-type": "border",
         "data-color": borderColor,
         "data-size": borderWidth,
-        style: {
-          width: "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)"),
-          height: "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)"),
-          borderColor: paletteColorValue,
-          borderWidth: "".concat(borderWidth, "px"),
-          borderStyle: 'solid',
-          borderRadius: "".concat(borderWidth * 2, "px")
-        }
+        css: (0, _styles.borderStyle)(!!linkHref, paletteColorValue, borderWidth)
       }, mediaComponent) : mediaComponent;
       return linkHref ? (0, _react2.jsx)("a", {
         href: linkHref,
         rel: "noreferrer noopener",
         onClick: _this.handleMediaLinkClick,
         "data-block-link": linkHref,
-        css: _ui.mediaLinkStyle
+        css: (0, _styles.linkStyle)(!!borderMark)
       }, mediaComponentWithBorder) : mediaComponentWithBorder;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMediaLinkClick", function (event) {

package/dist/cjs/react/nodes/media/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.linkStyle = exports.borderStyle = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _ui = require("@atlaskit/editor-common/ui");
+var _templateObject, _templateObject2;
+var linkStyle = function linkStyle(hasBorderMark) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: ", ";\n  height: ", ";\n"])), hasBorderMark ? "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)") : '100%', hasBorderMark ? "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)") : '100%');
+};
+exports.linkStyle = linkStyle;
+var borderStyle = function borderStyle(hasLinkMark, color, width) {
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  border-color: ", ";\n  border-width: ", "px;\n  border-style: solid;\n  border-radius: ", "px;\n"])), hasLinkMark ? '100%' : "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)"), hasLinkMark ? '100%' : "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)"), color, width, width * 2);
+};
+exports.borderStyle = borderStyle;

package/dist/cjs/react/nodes/table/colgroup.js

@@ -8,8 +8,8 @@ exports.calcScalePercent = exports.Colgroup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
+var _table = require("../table");
 // we allow scaling down column widths by no more than 30%
 // this intends to reduce unwanted scrolling in the Renderer in these scenarios:
 // User A creates a table with column widths → User B views it on a smaller screen
@@ -58,12 +58,13 @@ var Colgroup = function Colgroup(props) {
     layout = props.layout,
     isNumberColumnEnabled = props.isNumberColumnEnabled,
     renderWidth = props.renderWidth,
-    tableNode = props.tableNode;
+    tableNode = props.tableNode,
+    rendererAppearance = props.rendererAppearance;
   if (!columnWidths) {
     return null;
   }
   var tableResized = isTableResized(columnWidths);
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && !tableResized) {
+  if ((0, _table.isTableResizingEnabled)(rendererAppearance) && !tableResized) {
     return /*#__PURE__*/_react.default.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/_react.default.createElement("col", {
       style: {
         width: _editorSharedStyles.akEditorTableNumberColumnWidth
@@ -80,7 +81,7 @@ var Colgroup = function Colgroup(props) {
     return null;
   }
   var tableContainerWidth;
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && tableNode) {
+  if ((0, _table.isTableResizingEnabled)(rendererAppearance) && tableNode) {
     tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
   } else {
     tableContainerWidth = getTableLayoutWidth(layout);

package/dist/cjs/react/nodes/table/sticky.js

@@ -14,9 +14,9 @@ var _react2 = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _table = require("./table");
 var _injectProps = require("../../utils/inject-props");
+var _table2 = require("../table");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 var tableStickyPadding = 8;
@@ -26,22 +26,23 @@ var modeSpecficStyles = {
   stick: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    position: fixed;\n  "]))),
   'pin-bottom': (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n  "])))
 };
-var stickyHeaderZIndex;
-if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
-  stickyHeaderZIndex = 13;
-} else {
-  stickyHeaderZIndex = _editorSharedStyles.akEditorStickyHeaderZIndex;
-}
 
 // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
-var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
-  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n    tr {\n      background: ", ";\n    }\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".is-sticky.right-shadow::after,\n    &\n    .", ".is-sticky.left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, stickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-surface, white)", tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
+var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, rendererAppearance) {
+  var stickyHeaderZIndex;
+  if ((0, _table2.isTableResizingEnabled)(rendererAppearance)) {
+    stickyHeaderZIndex = 13;
+  } else {
+    stickyHeaderZIndex = _editorSharedStyles.akEditorStickyHeaderZIndex;
+  }
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    width: ", "px;\n    z-index: ", ";\n    &\n      .", ",\n      &\n      .", "\n      > table {\n      margin-top: 0;\n      margin-bottom: 0;\n      tr {\n        background: ", ";\n      }\n    }\n\n    border-top: ", "px solid\n      ", ";\n    background: ", ";\n    box-shadow: 0 6px 4px -4px ", ";\n\n    div[data-expanded='false'] & {\n      display: none;\n    }\n\n    &\n      .", ".is-sticky.right-shadow::after,\n      &\n      .", ".is-sticky.left-shadow::before {\n      top: 0px;\n      height: 100%;\n    }\n  "])), typeof top === 'number' && "top: ".concat(top, "px;"), width, stickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, "var(--ds-surface, white)", tableStickyPadding, "var(--ds-surface, white)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
 };
 var FixedTableDiv = function FixedTableDiv(props) {
   var top = props.top,
     wrapperWidth = props.wrapperWidth,
-    mode = props.mode;
-  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
+    mode = props.mode,
+    rendererAppearance = props.rendererAppearance;
+  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth, rendererAppearance), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
   var attrs = {
     mode: mode
   };
@@ -65,10 +66,11 @@ var StickyTable = function StickyTable(_ref) {
     columnWidths = _ref.columnWidths,
     renderWidth = _ref.renderWidth,
     rowHeight = _ref.rowHeight,
-    tableNode = _ref.tableNode;
+    tableNode = _ref.tableNode,
+    rendererAppearance = _ref.rendererAppearance;
   var styles;
   /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
+  if ((0, _table2.isTableResizingEnabled)(rendererAppearance)) {
     styles = (0, _react2.css)({
       top: mode === 'pin-bottom' ? top : undefined,
       position: 'relative'
@@ -86,7 +88,8 @@ var StickyTable = function StickyTable(_ref) {
   }, (0, _react2.jsx)(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
-    wrapperWidth: wrapperWidth
+    wrapperWidth: wrapperWidth,
+    rendererAppearance: rendererAppearance
   }, (0, _react2.jsx)("div", {
     className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " is-sticky ").concat(shadowClassNames || ''),
     "data-layout": layout,
@@ -104,7 +107,8 @@ var StickyTable = function StickyTable(_ref) {
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
     renderWidth: renderWidth,
-    tableNode: tableNode
+    tableNode: tableNode,
+    rendererAppearance: rendererAppearance
   },
   /**
    * @see https://product-fabric.atlassian.net/browse/ED-10235

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

@@ -14,7 +14,8 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     layout = _ref.layout,
     renderWidth = _ref.renderWidth,
     children = _ref.children,
-    tableNode = _ref.tableNode;
+    tableNode = _ref.tableNode,
+    rendererAppearance = _ref.rendererAppearance;
   return /*#__PURE__*/_react.default.createElement("table", {
     "data-number-column": isNumberColumnEnabled,
     ref: innerRef
@@ -23,7 +24,8 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
     renderWidth: renderWidth,
-    tableNode: tableNode
+    tableNode: tableNode,
+    rendererAppearance: rendererAppearance
   }), /*#__PURE__*/_react.default.createElement("tbody", null, children));
 });
 exports.Table = Table;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TableProcessor = exports.TableContainer = void 0;
+exports.isTableResizingEnabled = exports.default = exports.TableProcessor = exports.TableContainer = 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"));
@@ -26,8 +26,13 @@ var _tableCell = require("./tableCell");
 var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _sticky = require("./table/sticky");
 var _table = require("./table/table");
+var _appearance = require("../utils/appearance");
 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 isTableResizingEnabled = function isTableResizingEnabled(appearance) {
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && (0, _appearance.isFullWidthOrFullPageAppearance)(appearance);
+};
+exports.isTableResizingEnabled = isTableResizingEnabled;
 var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
   if (!tableOrderStatus || tableOrderStatus.order === _types.SortOrder.NO_ORDER) {
     return children;
@@ -261,7 +266,7 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance) {
         return rendererAppearance === 'full-width' && !tableNode.attrs.width ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : Math.min((0, _nodeWidth.getTableContainerWidth)(tableNode), renderWidth);
       };
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && tableNode) {
+      if (isTableResizingEnabled(rendererAppearance) && tableNode) {
         tableWidth = calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance);
       } else {
         tableWidth = (0, _styles.calcTableWidth)(layout, renderWidth, false);
@@ -284,7 +289,8 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         innerRef: this.stickyWrapperRef,
         wrapperWidth: wrapperWidth,
         columnWidths: columnWidths,
-        rowHeight: this.headerRowHeight
+        rowHeight: this.headerRowHeight,
+        rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
         "data-layout": layout,
@@ -306,7 +312,8 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         wrapperWidth: wrapperWidth,
         columnWidths: columnWidths,
         rowHeight: this.headerRowHeight,
-        tableNode: tableNode
+        tableNode: tableNode,
+        rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
         className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
         ref: this.wrapperRef,
@@ -317,7 +324,8 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         layout: layout,
         isNumberColumnEnabled: isNumberColumnEnabled,
         renderWidth: renderWidth,
-        tableNode: tableNode
+        tableNode: tableNode,
+        rendererAppearance: rendererAppearance
       }, this.grabFirstRowRef(children)))));
     }
   }]);

package/dist/cjs/react/utils/appearance.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFullWidthOrFullPageAppearance = exports.isFullWidthAppearance = exports.isFullPageAppearance = void 0;
+var isFullWidthAppearance = function isFullWidthAppearance(appearance) {
+  return appearance === 'full-width';
+};
+exports.isFullWidthAppearance = isFullWidthAppearance;
+var isFullPageAppearance = function isFullPageAppearance(appearance) {
+  return appearance === 'full-page';
+};
+exports.isFullPageAppearance = isFullPageAppearance;
+var isFullWidthOrFullPageAppearance = function isFullWidthOrFullPageAppearance(appearance) {
+  return isFullPageAppearance(appearance) || isFullWidthAppearance(appearance);
+};
+exports.isFullWidthOrFullPageAppearance = isFullWidthOrFullPageAppearance;

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

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

@@ -12,7 +12,6 @@ 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -20,6 +19,7 @@ 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 _table = require("../../react/nodes/table");
 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; }
@@ -50,14 +50,17 @@ 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);
+  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)
+  );
 };
 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);
+  // 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);
 };
 var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   var allowColumnSorting = _ref2.allowColumnSorting,
@@ -84,7 +87,7 @@ var fullWidthStyles = function fullWidthStyles(_ref5) {
   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, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
+  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    ");
 };
 var breakoutWidthStyle = function breakoutWidthStyle(useFragmentMarkBreakoutWidthStylingFix) {
   if (useFragmentMarkBreakoutWidthStylingFix) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.7.2",
+	"version": "108.7.4",
 	"sideEffects": false
 }

package/dist/es2019/react/nodes/{media.js → media/index.js}

@@ -7,12 +7,13 @@ import { jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { mediaLinkStyle, IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
-import { MediaCard } from '../../ui/MediaCard';
+import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
+import { MediaCard } from '../../../ui/MediaCard';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
-import { getEventHandler } from '../../utils';
+import { getEventHandler } from '../../../utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { MODE, PLATFORM } from '../../analytics/events';
+import { MODE, PLATFORM } from '../../../analytics/events';
+import { linkStyle, borderStyle } from './styles';
 export default class Media extends PureComponent {
   constructor(...args) {
     super(...args);
@@ -60,21 +61,14 @@ export default class Media extends PureComponent {
         "data-mark-type": "border",
         "data-color": borderColor,
         "data-size": borderWidth,
-        style: {
-          width: `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)`,
-          height: `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)`,
-          borderColor: paletteColorValue,
-          borderWidth: `${borderWidth}px`,
-          borderStyle: 'solid',
-          borderRadius: `${borderWidth * 2}px`
-        }
+        css: borderStyle(!!linkHref, paletteColorValue, borderWidth)
       }, mediaComponent) : mediaComponent;
       return linkHref ? jsx("a", {
         href: linkHref,
         rel: "noreferrer noopener",
         onClick: this.handleMediaLinkClick,
         "data-block-link": linkHref,
-        css: mediaLinkStyle
+        css: linkStyle(!!borderMark)
       }, mediaComponentWithBorder) : mediaComponentWithBorder;
     });
     _defineProperty(this, "handleMediaLinkClick", event => {

package/dist/es2019/react/nodes/media/styles.js

@@ -0,0 +1,21 @@
+import { css } from '@emotion/react';
+import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
+export const linkStyle = hasBorderMark => css`
+  position: absolute;
+  background: transparent;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  cursor: pointer;
+  width: ${hasBorderMark ? `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)` : '100%'};
+  height: ${hasBorderMark ? `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)` : '100%'};
+`;
+export const borderStyle = (hasLinkMark, color, width) => css`
+  width: ${hasLinkMark ? '100%' : `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)`};
+  height: ${hasLinkMark ? '100%' : `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)`};
+  border-color: ${color};
+  border-width: ${width}px;
+  border-style: solid;
+  border-radius: ${width * 2}px;
+`;

package/dist/es2019/react/nodes/table/colgroup.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { isTableResizingEnabled } from '../table';
+
 // we allow scaling down column widths by no more than 30%
 // this intends to reduce unwanted scrolling in the Renderer in these scenarios:
 // User A creates a table with column widths → User B views it on a smaller screen
@@ -50,13 +51,14 @@ export const Colgroup = props => {
     layout,
     isNumberColumnEnabled,
     renderWidth,
-    tableNode
+    tableNode,
+    rendererAppearance
   } = props;
   if (!columnWidths) {
     return null;
   }
   const tableResized = isTableResized(columnWidths);
-  if (getBooleanFF('platform.editor.custom-table-width') && !tableResized) {
+  if (isTableResizingEnabled(rendererAppearance) && !tableResized) {
     return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
       style: {
         width: akEditorTableNumberColumnWidth
@@ -71,7 +73,7 @@ export const Colgroup = props => {
     return null;
   }
   let tableContainerWidth;
-  if (getBooleanFF('platform.editor.custom-table-width') && tableNode) {
+  if (isTableResizingEnabled(rendererAppearance) && tableNode) {
     tableContainerWidth = getTableContainerWidth(tableNode);
   } else {
     tableContainerWidth = getTableLayoutWidth(layout);

package/dist/es2019/react/nodes/table/sticky.js

@@ -5,9 +5,9 @@ import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
+import { isTableResizingEnabled } from '../table';
 export const tableStickyPadding = 8;
 const modeSpecficStyles = {
   none: css`
@@ -20,54 +20,57 @@ const modeSpecficStyles = {
     position: absolute;
   `
 };
-let stickyHeaderZIndex;
-if (getBooleanFF('platform.editor.custom-table-width')) {
-  stickyHeaderZIndex = 13;
-} else {
-  stickyHeaderZIndex = akEditorStickyHeaderZIndex;
-}
 
 // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
-const fixedTableDivStaticStyles = (top, width) => css`
-  ${typeof top === 'number' && `top: ${top}px;`}
-  width: ${width}px;
-  z-index: ${stickyHeaderZIndex};
-  &
-    .${TableSharedCssClassName.TABLE_CONTAINER},
+const fixedTableDivStaticStyles = (top, width, rendererAppearance) => {
+  let stickyHeaderZIndex;
+  if (isTableResizingEnabled(rendererAppearance)) {
+    stickyHeaderZIndex = 13;
+  } else {
+    stickyHeaderZIndex = akEditorStickyHeaderZIndex;
+  }
+  return css`
+    ${typeof top === 'number' && `top: ${top}px;`}
+    width: ${width}px;
+    z-index: ${stickyHeaderZIndex};
     &
-    .${TableSharedCssClassName.TABLE_STICKY_WRAPPER}
-    > table {
-    margin-top: 0;
-    margin-bottom: 0;
-    tr {
-      background: ${"var(--ds-surface, white)"};
+      .${TableSharedCssClassName.TABLE_CONTAINER},
+      &
+      .${TableSharedCssClassName.TABLE_STICKY_WRAPPER}
+      > table {
+      margin-top: 0;
+      margin-bottom: 0;
+      tr {
+        background: ${"var(--ds-surface, white)"};
+      }
     }
-  }
 
-  border-top: ${tableStickyPadding}px solid
-    ${"var(--ds-surface, white)"};
-  background: ${"var(--ds-surface-overlay, white)"};
-  box-shadow: 0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`};
+    border-top: ${tableStickyPadding}px solid
+      ${"var(--ds-surface, white)"};
+    background: ${"var(--ds-surface-overlay, white)"};
+    box-shadow: 0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`};
 
-  div[data-expanded='false'] & {
-    display: none;
-  }
+    div[data-expanded='false'] & {
+      display: none;
+    }
 
-  &
-    .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.right-shadow::after,
     &
-    .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.left-shadow::before {
-    top: 0px;
-    height: 100%;
-  }
-`;
+      .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.right-shadow::after,
+      &
+      .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.left-shadow::before {
+      top: 0px;
+      height: 100%;
+    }
+  `;
+};
 export const FixedTableDiv = props => {
   const {
     top,
     wrapperWidth,
-    mode
+    mode,
+    rendererAppearance
   } = props;
-  const fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
+  const fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth, rendererAppearance), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
   const attrs = {
     mode
   };
@@ -90,11 +93,12 @@ export const StickyTable = ({
   columnWidths,
   renderWidth,
   rowHeight,
-  tableNode
+  tableNode,
+  rendererAppearance
 }) => {
   let styles;
   /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-  if (getBooleanFF('platform.editor.custom-table-width')) {
+  if (isTableResizingEnabled(rendererAppearance)) {
     styles = css({
       top: mode === 'pin-bottom' ? top : undefined,
       position: 'relative'
@@ -112,7 +116,8 @@ export const StickyTable = ({
   }, jsx(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
-    wrapperWidth: wrapperWidth
+    wrapperWidth: wrapperWidth,
+    rendererAppearance: rendererAppearance
   }, jsx("div", {
     className: `${TableSharedCssClassName.TABLE_CONTAINER} is-sticky ${shadowClassNames || ''}`,
     "data-layout": layout,
@@ -130,7 +135,8 @@ export const StickyTable = ({
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
     renderWidth: renderWidth,
-    tableNode: tableNode
+    tableNode: tableNode,
+    rendererAppearance: rendererAppearance
   },
   /**
    * @see https://product-fabric.atlassian.net/browse/ED-10235