@atlaskit/editor-common 93.2.0 → 93.2.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-common
 
+## 93.2.1
+
+### Patch Changes
+
+- [#150725](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150725)
+  [`46e9eccf1d0bc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/46e9eccf1d0bc) -
+  ED-24117: refactors image loader for react 18
+- Updated dependencies
+
 ## 93.2.0
 
 ### Minor Changes

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 = "93.2.0";
+var packageVersion = "93.2.1";
 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

@@ -24,7 +24,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 = "93.2.0";
+var packageVersion = "93.2.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/utils/imageLoader.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withImageLoader = void 0;
+exports.withImageLoaderOld = exports.withImageLoader = 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"));
@@ -15,11 +15,12 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var withImageLoader = exports.withImageLoader = function withImageLoader(Wrapped) {
+var withImageLoaderOld = exports.withImageLoaderOld = function withImageLoaderOld(Wrapped) {
   return /*#__PURE__*/function (_Component) {
     (0, _inherits2.default)(WithImageLoader, _Component);
     var _super = _createSuper(WithImageLoader);
@@ -100,4 +101,92 @@ var withImageLoader = exports.withImageLoader = function withImageLoader(Wrapped
     }]);
     return WithImageLoader;
   }(_react.Component);
+};
+var withImageLoaderNew = function withImageLoaderNew(Wrapped) {
+  return /*#__PURE__*/function (_Component2) {
+    (0, _inherits2.default)(WithImageLoader, _Component2);
+    var _super2 = _createSuper(WithImageLoader);
+    function WithImageLoader() {
+      var _this2;
+      (0, _classCallCheck2.default)(this, WithImageLoader);
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      _this2 = _super2.call.apply(_super2, [this].concat(args));
+      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "state", {
+        imageStatus: 'loading'
+      });
+      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "onLoad", function () {
+        _this2.setState({
+          imageStatus: 'complete'
+        });
+        var onExternalImageLoaded = _this2.props.onExternalImageLoaded;
+        if (onExternalImageLoaded && _this2.img) {
+          onExternalImageLoaded({
+            width: _this2.img.naturalWidth,
+            height: _this2.img.naturalHeight
+          });
+        }
+      });
+      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "onError", function () {
+        _this2.setState({
+          imageStatus: 'error'
+        });
+      });
+      return _this2;
+    }
+    (0, _createClass2.default)(WithImageLoader, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.fetchImage(this.props);
+      }
+    }, {
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(newProps) {
+        if (newProps.url !== this.props.url) {
+          this.setState({
+            imageStatus: 'loading'
+          });
+          this.fetchImage(newProps);
+        }
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        if (this.img) {
+          this.img.removeEventListener('load', this.onLoad);
+          this.img.removeEventListener('error', this.onError);
+          this.img = null;
+        }
+      }
+    }, {
+      key: "fetchImage",
+      value: function fetchImage(_ref2) {
+        var url = _ref2.url;
+        if (url) {
+          if (!this.img) {
+            this.img = new Image();
+            this.img.addEventListener('load', this.onLoad);
+            this.img.addEventListener('error', this.onError);
+          }
+          this.img.src = url;
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var imageStatus = this.state.imageStatus;
+        return /*#__PURE__*/_react.default.createElement(Wrapped, (0, _extends2.default)({}, this.props, {
+          imageStatus: imageStatus
+        }));
+      }
+    }]);
+    return WithImageLoader;
+  }(_react.Component);
+};
+var withImageLoader = exports.withImageLoader = function withImageLoader(Wrapped) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2')) {
+    return withImageLoaderNew(Wrapped);
+  }
+  return withImageLoaderOld(Wrapped);
 };

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 = "93.2.0";
+const packageVersion = "93.2.1";
 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 = "93.2.0";
+const packageVersion = "93.2.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/utils/imageLoader.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
-export const withImageLoader = Wrapped => class WithImageLoader extends Component {
+import { fg } from '@atlaskit/platform-feature-flags';
+export const withImageLoaderOld = Wrapped => class WithImageLoader extends Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "state", {
@@ -65,4 +66,75 @@ export const withImageLoader = Wrapped => class WithImageLoader extends Componen
       imageStatus: imageStatus
     }));
   }
+};
+const withImageLoaderNew = Wrapped => class WithImageLoader extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      imageStatus: 'loading'
+    });
+    _defineProperty(this, "onLoad", () => {
+      this.setState({
+        imageStatus: 'complete'
+      });
+      const {
+        onExternalImageLoaded
+      } = this.props;
+      if (onExternalImageLoaded && this.img) {
+        onExternalImageLoaded({
+          width: this.img.naturalWidth,
+          height: this.img.naturalHeight
+        });
+      }
+    });
+    _defineProperty(this, "onError", () => {
+      this.setState({
+        imageStatus: 'error'
+      });
+    });
+  }
+  componentDidMount() {
+    this.fetchImage(this.props);
+  }
+  componentDidUpdate(newProps) {
+    if (newProps.url !== this.props.url) {
+      this.setState({
+        imageStatus: 'loading'
+      });
+      this.fetchImage(newProps);
+    }
+  }
+  componentWillUnmount() {
+    if (this.img) {
+      this.img.removeEventListener('load', this.onLoad);
+      this.img.removeEventListener('error', this.onError);
+      this.img = null;
+    }
+  }
+  fetchImage({
+    url
+  }) {
+    if (url) {
+      if (!this.img) {
+        this.img = new Image();
+        this.img.addEventListener('load', this.onLoad);
+        this.img.addEventListener('error', this.onError);
+      }
+      this.img.src = url;
+    }
+  }
+  render() {
+    const {
+      imageStatus
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Wrapped, _extends({}, this.props, {
+      imageStatus: imageStatus
+    }));
+  }
+};
+export const withImageLoader = Wrapped => {
+  if (fg('platform_editor_react18_phase2')) {
+    return withImageLoaderNew(Wrapped);
+  }
+  return withImageLoaderOld(Wrapped);
 };

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 = "93.2.0";
+var packageVersion = "93.2.1";
 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

@@ -21,7 +21,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 = "93.2.0";
+var packageVersion = "93.2.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/utils/imageLoader.js

@@ -9,7 +9,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
-export var withImageLoader = function withImageLoader(Wrapped) {
+import { fg } from '@atlaskit/platform-feature-flags';
+export var withImageLoaderOld = function withImageLoaderOld(Wrapped) {
   return /*#__PURE__*/function (_Component) {
     _inherits(WithImageLoader, _Component);
     var _super = _createSuper(WithImageLoader);
@@ -90,4 +91,92 @@ export var withImageLoader = function withImageLoader(Wrapped) {
     }]);
     return WithImageLoader;
   }(Component);
+};
+var withImageLoaderNew = function withImageLoaderNew(Wrapped) {
+  return /*#__PURE__*/function (_Component2) {
+    _inherits(WithImageLoader, _Component2);
+    var _super2 = _createSuper(WithImageLoader);
+    function WithImageLoader() {
+      var _this2;
+      _classCallCheck(this, WithImageLoader);
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      _this2 = _super2.call.apply(_super2, [this].concat(args));
+      _defineProperty(_assertThisInitialized(_this2), "state", {
+        imageStatus: 'loading'
+      });
+      _defineProperty(_assertThisInitialized(_this2), "onLoad", function () {
+        _this2.setState({
+          imageStatus: 'complete'
+        });
+        var onExternalImageLoaded = _this2.props.onExternalImageLoaded;
+        if (onExternalImageLoaded && _this2.img) {
+          onExternalImageLoaded({
+            width: _this2.img.naturalWidth,
+            height: _this2.img.naturalHeight
+          });
+        }
+      });
+      _defineProperty(_assertThisInitialized(_this2), "onError", function () {
+        _this2.setState({
+          imageStatus: 'error'
+        });
+      });
+      return _this2;
+    }
+    _createClass(WithImageLoader, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.fetchImage(this.props);
+      }
+    }, {
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(newProps) {
+        if (newProps.url !== this.props.url) {
+          this.setState({
+            imageStatus: 'loading'
+          });
+          this.fetchImage(newProps);
+        }
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        if (this.img) {
+          this.img.removeEventListener('load', this.onLoad);
+          this.img.removeEventListener('error', this.onError);
+          this.img = null;
+        }
+      }
+    }, {
+      key: "fetchImage",
+      value: function fetchImage(_ref2) {
+        var url = _ref2.url;
+        if (url) {
+          if (!this.img) {
+            this.img = new Image();
+            this.img.addEventListener('load', this.onLoad);
+            this.img.addEventListener('error', this.onError);
+          }
+          this.img.src = url;
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var imageStatus = this.state.imageStatus;
+        return /*#__PURE__*/React.createElement(Wrapped, _extends({}, this.props, {
+          imageStatus: imageStatus
+        }));
+      }
+    }]);
+    return WithImageLoader;
+  }(Component);
+};
+export var withImageLoader = function withImageLoader(Wrapped) {
+  if (fg('platform_editor_react18_phase2')) {
+    return withImageLoaderNew(Wrapped);
+  }
+  return withImageLoaderOld(Wrapped);
 };

package/dist/types/utils/imageLoader.d.ts

@@ -1,4 +1,5 @@
-import React, { type ComponentType } from 'react';
+import React from 'react';
+import type { ComponentType } from 'react';
 export interface ImageLoaderProps {
     url?: string;
     onExternalImageLoaded?: (dimensions: {
@@ -11,4 +12,5 @@ export interface ImageLoaderState {
     imageStatus: ImageStatus;
 }
 export type ImageStatus = 'complete' | 'loading' | 'error';
+export declare const withImageLoaderOld: <P extends {}>(Wrapped: ComponentType<React.PropsWithChildren<P & ImageLoaderProps>>) => React.ComponentClass<P & ImageLoaderProps>;
 export declare const withImageLoader: <P extends {}>(Wrapped: ComponentType<React.PropsWithChildren<P & ImageLoaderProps>>) => React.ComponentClass<P & ImageLoaderProps>;

package/dist/types-ts4.5/utils/imageLoader.d.ts

@@ -1,4 +1,5 @@
-import React, { type ComponentType } from 'react';
+import React from 'react';
+import type { ComponentType } from 'react';
 export interface ImageLoaderProps {
     url?: string;
     onExternalImageLoaded?: (dimensions: {
@@ -11,4 +12,5 @@ export interface ImageLoaderState {
     imageStatus: ImageStatus;
 }
 export type ImageStatus = 'complete' | 'loading' | 'error';
+export declare const withImageLoaderOld: <P extends {}>(Wrapped: ComponentType<React.PropsWithChildren<P & ImageLoaderProps>>) => React.ComponentClass<P & ImageLoaderProps>;
 export declare const withImageLoader: <P extends {}>(Wrapped: ComponentType<React.PropsWithChildren<P & ImageLoaderProps>>) => React.ComponentClass<P & ImageLoaderProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "93.2.0",
+	"version": "93.2.1",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -137,7 +137,7 @@
 		"@atlaskit/media-file-preview": "^0.9.0",
 		"@atlaskit/media-picker": "^66.7.0",
 		"@atlaskit/media-ui": "^25.15.0",
-		"@atlaskit/media-viewer": "49.0.1",
+		"@atlaskit/media-viewer": "49.1.0",
 		"@atlaskit/mention": "^23.3.0",
 		"@atlaskit/menu": "^2.12.0",
 		"@atlaskit/onboarding": "^11.2.0",
@@ -145,7 +145,7 @@
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/profilecard": "^20.4.0",
 		"@atlaskit/section-message": "^6.6.0",
-		"@atlaskit/smart-card": "^29.2.0",
+		"@atlaskit/smart-card": "^29.3.0",
 		"@atlaskit/smart-user-picker": "^6.10.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/task-decision": "^17.11.0",
@@ -265,6 +265,9 @@
 		"platform_editor_react18_mention_with_provider": {
 			"type": "boolean"
 		},
+		"platform_editor_react18_phase2": {
+			"type": "boolean"
+		},
 		"cc_page_experiences_live_search_wysiwyg": {
 			"type": "boolean"
 		},