@atlaskit/editor-common 96.5.6 → 96.5.8

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-common
 
+## 96.5.8
+
+### Patch Changes
+
+- [#179714](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/179714)
+  [`7216b07b8cbe7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7216b07b8cbe7) -
+  [ux] ED-26058 Support dyanmic visibility of media badges based on media size
+- Updated dependencies
+
+## 96.5.7
+
+### Patch Changes
+
+- [#179069](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/179069)
+  [`abcf8b3555cac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/abcf8b3555cac) -
+  Fix issue where new Forge bodied macros don't show content in live page rendered view
+
 ## 96.5.6
 
 ### Patch Changes

package/dist/cjs/extensibility/ExtensionComponent.js

@@ -165,10 +165,10 @@ var ExtensionComponentOld = exports.ExtensionComponentOld = /*#__PURE__*/functio
       };
       if (isBodiedExtension) {
         var rendererExtensionHandler = rendererExtensionHandlers === null || rendererExtensionHandlers === void 0 ? void 0 : rendererExtensionHandlers[extensionType];
-        if (!rendererExtensionHandler) {
-          return null;
+        // Forge bodied extensions don't get rendererExtensionHandlers passed in and use extensionHandlerFromProvider from the below logic instead
+        if (rendererExtensionHandler) {
+          return (0, _utils.getExtensionRenderer)(rendererExtensionHandler)(node, (0, _utils.toJSON)(editorView.state.doc));
         }
-        return (0, _utils.getExtensionRenderer)(rendererExtensionHandler)(node, (0, _utils.toJSON)(editorView.state.doc));
       }
       var result;
       if (extensionHandlers && extensionHandlers[extensionType]) {
@@ -461,10 +461,10 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component2) {
       };
       if (isBodiedExtension) {
         var rendererExtensionHandler = rendererExtensionHandlers === null || rendererExtensionHandlers === void 0 ? void 0 : rendererExtensionHandlers[extensionType];
-        if (!rendererExtensionHandler) {
-          return null;
+        // Forge bodied extensions don't get rendererExtensionHandlers passed in and use extensionHandlerFromProvider from the below logic instead
+        if (rendererExtensionHandler) {
+          return (0, _utils.getExtensionRenderer)(rendererExtensionHandler)(node, (0, _utils.toJSON)(editorView.state.doc));
         }
-        return (0, _utils.getExtensionRenderer)(rendererExtensionHandler)(node, (0, _utils.toJSON)(editorView.state.doc));
       }
       var result;
       if (extensionHandlers && extensionHandlers[extensionType]) {

package/dist/cjs/media-single/MediaBadges.js

@@ -9,9 +9,11 @@ exports.MediaBadges = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var MEDIA_BADGE_VISIBILITY_BREAKPOINT = 200;
 var containerStyles = (0, _primitives.xcss)({
   display: 'flex',
   position: 'absolute',
@@ -43,6 +45,12 @@ var getBadgeSize = function getBadgeSize(width, height) {
   // width is the original width of image, not resized or currently rendered to user. Defaulting to medium for now
   return width && width < 70 || height && height < 70 ? 'small' : 'medium';
 };
+var getBadgeVisible = function getBadgeVisible(width, height) {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_support_media_badge_visibility')) {
+    return true;
+  }
+  return width && width < MEDIA_BADGE_VISIBILITY_BREAKPOINT || height && height < MEDIA_BADGE_VISIBILITY_BREAKPOINT ? false : true;
+};
 var MediaBadges = exports.MediaBadges = function MediaBadges(_ref) {
   var children = _ref.children,
     mediaElement = _ref.mediaElement,
@@ -55,6 +63,10 @@ var MediaBadges = exports.MediaBadges = function MediaBadges(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     badgeSize = _useState2[0],
     setBadgeSize = _useState2[1];
+  var _useState3 = (0, _react.useState)(getBadgeVisible(mediaWidth, mediaHeight)),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
   (0, _react.useEffect)(function () {
     var observer = new ResizeObserver((0, _debounce.default)(function (entries) {
       var _entries = (0, _slicedToArray2.default)(entries, 1),
@@ -63,6 +75,9 @@ var MediaBadges = exports.MediaBadges = function MediaBadges(_ref) {
         width = _entry$contentRect.width,
         height = _entry$contentRect.height;
       setBadgeSize(getBadgeSize(width, height));
+      if ((0, _platformFeatureFlags.fg)('platform_editor_support_media_badge_visibility')) {
+        setVisible(getBadgeVisible(width, height));
+      }
     }));
     if (mediaElement) {
       observer.observe(mediaElement);
@@ -73,7 +88,8 @@ var MediaBadges = exports.MediaBadges = function MediaBadges(_ref) {
   }, [mediaElement]);
   if (typeof children === 'function') {
     children = children({
-      badgeSize: badgeSize
+      badgeSize: badgeSize,
+      visible: visible
     });
   }
   if (!mediaElement || _react.default.Children.count(children) === 0) {

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "96.5.6";
+var packageVersion = "96.5.8";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "96.5.6";
+var packageVersion = "96.5.8";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -130,10 +130,10 @@ export class ExtensionComponentOld extends Component {
       };
       if (isBodiedExtension) {
         const rendererExtensionHandler = rendererExtensionHandlers === null || rendererExtensionHandlers === void 0 ? void 0 : rendererExtensionHandlers[extensionType];
-        if (!rendererExtensionHandler) {
-          return null;
+        // Forge bodied extensions don't get rendererExtensionHandlers passed in and use extensionHandlerFromProvider from the below logic instead
+        if (rendererExtensionHandler) {
+          return getExtensionRenderer(rendererExtensionHandler)(node, toJSON(editorView.state.doc));
         }
-        return getExtensionRenderer(rendererExtensionHandler)(node, toJSON(editorView.state.doc));
       }
       let result;
       if (extensionHandlers && extensionHandlers[extensionType]) {
@@ -396,10 +396,10 @@ class ExtensionComponentInner extends Component {
       };
       if (isBodiedExtension) {
         const rendererExtensionHandler = rendererExtensionHandlers === null || rendererExtensionHandlers === void 0 ? void 0 : rendererExtensionHandlers[extensionType];
-        if (!rendererExtensionHandler) {
-          return null;
+        // Forge bodied extensions don't get rendererExtensionHandlers passed in and use extensionHandlerFromProvider from the below logic instead
+        if (rendererExtensionHandler) {
+          return getExtensionRenderer(rendererExtensionHandler)(node, toJSON(editorView.state.doc));
         }
-        return getExtensionRenderer(rendererExtensionHandler)(node, toJSON(editorView.state.doc));
       }
       let result;
       if (extensionHandlers && extensionHandlers[extensionType]) {

package/dist/es2019/media-single/MediaBadges.js

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import debounce from 'lodash/debounce';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
+const MEDIA_BADGE_VISIBILITY_BREAKPOINT = 200;
 const containerStyles = xcss({
   display: 'flex',
   position: 'absolute',
@@ -32,6 +34,12 @@ const getBadgeSize = (width, height) => {
   // width is the original width of image, not resized or currently rendered to user. Defaulting to medium for now
   return width && width < 70 || height && height < 70 ? 'small' : 'medium';
 };
+const getBadgeVisible = (width, height) => {
+  if (!fg('platform_editor_support_media_badge_visibility')) {
+    return true;
+  }
+  return width && width < MEDIA_BADGE_VISIBILITY_BREAKPOINT || height && height < MEDIA_BADGE_VISIBILITY_BREAKPOINT ? false : true;
+};
 export const MediaBadges = ({
   children,
   mediaElement,
@@ -41,6 +49,7 @@ export const MediaBadges = ({
   useMinimumZIndex = false
 }) => {
   const [badgeSize, setBadgeSize] = useState(getBadgeSize(mediaWidth, mediaHeight));
+  const [visible, setVisible] = useState(getBadgeVisible(mediaWidth, mediaHeight));
   useEffect(() => {
     const observer = new ResizeObserver(debounce(entries => {
       const [entry] = entries;
@@ -49,6 +58,9 @@ export const MediaBadges = ({
         height
       } = entry.contentRect;
       setBadgeSize(getBadgeSize(width, height));
+      if (fg('platform_editor_support_media_badge_visibility')) {
+        setVisible(getBadgeVisible(width, height));
+      }
     }));
     if (mediaElement) {
       observer.observe(mediaElement);
@@ -59,7 +71,8 @@ export const MediaBadges = ({
   }, [mediaElement]);
   if (typeof children === 'function') {
     children = children({
-      badgeSize
+      badgeSize,
+      visible
     });
   }
   if (!mediaElement || React.Children.count(children) === 0) {

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "96.5.6";
+const packageVersion = "96.5.8";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "96.5.6";
+const packageVersion = "96.5.8";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/esm/extensibility/ExtensionComponent.js

@@ -157,10 +157,10 @@ export var ExtensionComponentOld = /*#__PURE__*/function (_Component) {
       };
       if (isBodiedExtension) {
         var rendererExtensionHandler = rendererExtensionHandlers === null || rendererExtensionHandlers === void 0 ? void 0 : rendererExtensionHandlers[extensionType];
-        if (!rendererExtensionHandler) {
-          return null;
+        // Forge bodied extensions don't get rendererExtensionHandlers passed in and use extensionHandlerFromProvider from the below logic instead
+        if (rendererExtensionHandler) {
+          return getExtensionRenderer(rendererExtensionHandler)(node, toJSON(editorView.state.doc));
         }
-        return getExtensionRenderer(rendererExtensionHandler)(node, toJSON(editorView.state.doc));
       }
       var result;
       if (extensionHandlers && extensionHandlers[extensionType]) {
@@ -453,10 +453,10 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component2) {
       };
       if (isBodiedExtension) {
         var rendererExtensionHandler = rendererExtensionHandlers === null || rendererExtensionHandlers === void 0 ? void 0 : rendererExtensionHandlers[extensionType];
-        if (!rendererExtensionHandler) {
-          return null;
+        // Forge bodied extensions don't get rendererExtensionHandlers passed in and use extensionHandlerFromProvider from the below logic instead
+        if (rendererExtensionHandler) {
+          return getExtensionRenderer(rendererExtensionHandler)(node, toJSON(editorView.state.doc));
         }
-        return getExtensionRenderer(rendererExtensionHandler)(node, toJSON(editorView.state.doc));
       }
       var result;
       if (extensionHandlers && extensionHandlers[extensionType]) {

package/dist/esm/media-single/MediaBadges.js

@@ -1,7 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useState } from 'react';
 import debounce from 'lodash/debounce';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
+var MEDIA_BADGE_VISIBILITY_BREAKPOINT = 200;
 var containerStyles = xcss({
   display: 'flex',
   position: 'absolute',
@@ -33,6 +35,12 @@ var getBadgeSize = function getBadgeSize(width, height) {
   // width is the original width of image, not resized or currently rendered to user. Defaulting to medium for now
   return width && width < 70 || height && height < 70 ? 'small' : 'medium';
 };
+var getBadgeVisible = function getBadgeVisible(width, height) {
+  if (!fg('platform_editor_support_media_badge_visibility')) {
+    return true;
+  }
+  return width && width < MEDIA_BADGE_VISIBILITY_BREAKPOINT || height && height < MEDIA_BADGE_VISIBILITY_BREAKPOINT ? false : true;
+};
 export var MediaBadges = function MediaBadges(_ref) {
   var children = _ref.children,
     mediaElement = _ref.mediaElement,
@@ -45,6 +53,10 @@ export var MediaBadges = function MediaBadges(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     badgeSize = _useState2[0],
     setBadgeSize = _useState2[1];
+  var _useState3 = useState(getBadgeVisible(mediaWidth, mediaHeight)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
   useEffect(function () {
     var observer = new ResizeObserver(debounce(function (entries) {
       var _entries = _slicedToArray(entries, 1),
@@ -53,6 +65,9 @@ export var MediaBadges = function MediaBadges(_ref) {
         width = _entry$contentRect.width,
         height = _entry$contentRect.height;
       setBadgeSize(getBadgeSize(width, height));
+      if (fg('platform_editor_support_media_badge_visibility')) {
+        setVisible(getBadgeVisible(width, height));
+      }
     }));
     if (mediaElement) {
       observer.observe(mediaElement);
@@ -63,7 +78,8 @@ export var MediaBadges = function MediaBadges(_ref) {
   }, [mediaElement]);
   if (typeof children === 'function') {
     children = children({
-      badgeSize: badgeSize
+      badgeSize: badgeSize,
+      visible: visible
     });
   }
   if (!mediaElement || React.Children.count(children) === 0) {

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "96.5.6";
+var packageVersion = "96.5.8";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "96.5.6";
+var packageVersion = "96.5.8";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/types/media-single/MediaBadges.d.ts

@@ -7,6 +7,7 @@ type ExternalImageBadgeProps = {
     useMinimumZIndex?: boolean;
     children: ReactNode | ((props: {
         badgeSize: 'medium' | 'small';
+        visible: boolean;
     }) => ReactNode);
 };
 export declare const MediaBadges: ({ children, mediaElement, mediaWidth, mediaHeight, extendedResizeOffset, useMinimumZIndex, }: ExternalImageBadgeProps) => JSX.Element | null;

package/dist/types-ts4.5/media-single/MediaBadges.d.ts

@@ -7,6 +7,7 @@ type ExternalImageBadgeProps = {
     useMinimumZIndex?: boolean;
     children: ReactNode | ((props: {
         badgeSize: 'medium' | 'small';
+        visible: boolean;
     }) => ReactNode);
 };
 export declare const MediaBadges: ({ children, mediaElement, mediaWidth, mediaHeight, extendedResizeOffset, useMinimumZIndex, }: ExternalImageBadgeProps) => JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "96.5.6",
+	"version": "96.5.8",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -133,14 +133,14 @@
 		"@atlaskit/icon-object": "^6.9.0",
 		"@atlaskit/link-datasource": "^3.15.0",
 		"@atlaskit/link-picker": "^1.47.0",
-		"@atlaskit/media-card": "^78.15.0",
+		"@atlaskit/media-card": "^78.16.0",
 		"@atlaskit/media-client": "^28.6.0",
 		"@atlaskit/media-client-react": "^2.4.0",
 		"@atlaskit/media-common": "^11.7.0",
 		"@atlaskit/media-file-preview": "^0.9.0",
 		"@atlaskit/media-picker": "^67.0.0",
-		"@atlaskit/media-ui": "^27.0.0",
-		"@atlaskit/media-viewer": "49.4.5",
+		"@atlaskit/media-ui": "^27.1.0",
+		"@atlaskit/media-viewer": "49.5.0",
 		"@atlaskit/mention": "^23.4.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/onboarding": "^12.2.0",
@@ -191,7 +191,7 @@
 	},
 	"devDependencies": {
 		"@af/visual-regression": "*",
-		"@atlaskit/media-core": "^34.3.0",
+		"@atlaskit/media-core": "^34.4.0",
 		"@atlaskit/media-test-helpers": "^34.7.0",
 		"@atlaskit/util-data-test": "^17.13.0",
 		"@atlaskit/visual-regression": "*",
@@ -315,6 +315,9 @@
 		},
 		"platform_editor_table_row_span_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_support_media_badge_visibility": {
+			"type": "boolean"
 		}
 	}
 }