@atlaskit/renderer 109.41.0 → 109.42.1

package/dist/es2019/ui/ExtensionRenderer.js

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -7,7 +6,7 @@ import memoizeOne from 'memoize-one';
 import { getNodeRenderer } from '@atlaskit/editor-common/extensions';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { getExtensionRenderer } from '@atlaskit/editor-common/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 const inlineExtensionStyle = css({
   display: 'inline-block',
   maxWidth: '100%',
@@ -19,113 +18,99 @@ const inlineExtensionStyle = css({
     maxWidth: '100%'
   }
 });
-export default class ExtensionRenderer extends React.Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "state", {
-      extensionProvider: null
+export default function ExtensionRenderer(props) {
+  const {
+    extensionHandlers,
+    rendererContext,
+    extensionType,
+    extensionKey,
+    parameters,
+    content,
+    text,
+    type,
+    localId,
+    marks,
+    actions,
+    children
+  } = props;
+  const isMounted = React.useRef(true);
+  const localGetNodeRenderer = React.useMemo(() => memoizeOne(getNodeRenderer), []);
+  const [extensionProvider, setExtensionProvider] = React.useState(null);
+  const handleProvider = React.useCallback((name, providerPromise) => {
+    providerPromise && providerPromise.then(provider => {
+      if (isMounted.current) {
+        setExtensionProvider(provider);
+      }
     });
-    _defineProperty(this, "mounted", false);
-    _defineProperty(this, "handleProvider", (name, providerPromise) => {
-      providerPromise && providerPromise.then(provider => {
-        if (this.mounted) {
-          this.setState({
-            [name]: provider
+  }, []);
+  const renderExtensionNode = React.useCallback(extensionProvider => {
+    var _marks$find, _marks$find$attrs;
+    const fragmentLocalId = marks === null || marks === void 0 ? void 0 : (_marks$find = marks.find(m => m.type.name === 'fragment')) === null || _marks$find === void 0 ? void 0 : (_marks$find$attrs = _marks$find.attrs) === null || _marks$find$attrs === void 0 ? void 0 : _marks$find$attrs.localId;
+    const node = {
+      type,
+      extensionKey,
+      extensionType,
+      parameters,
+      content: content || text,
+      localId,
+      fragmentLocalId
+    };
+    let result = null;
+    try {
+      if (extensionHandlers && extensionHandlers[extensionType]) {
+        const render = getExtensionRenderer(extensionHandlers[extensionType]);
+        result = render(node, rendererContext.adDoc);
+      }
+      if (!result && extensionProvider) {
+        const NodeRenderer = localGetNodeRenderer(extensionProvider, extensionType, extensionKey);
+        if (node.type === 'multiBodiedExtension') {
+          result = jsx(NodeRenderer, {
+            node: node,
+            actions: actions
+          });
+        } else if (node.type === 'inlineExtension') {
+          result = jsx(InlineNodeRendererWrapper, null, jsx(NodeRenderer, {
+            node: node
+          }));
+        } else {
+          result = jsx(NodeRenderer, {
+            node: node
           });
         }
-      });
-    });
-    _defineProperty(this, "getNodeRenderer", memoizeOne(getNodeRenderer));
-    _defineProperty(this, "renderExtensionNode", extensionProvider => {
-      var _marks$find, _marks$find$attrs;
-      const {
-        extensionHandlers,
-        rendererContext,
-        extensionType,
-        extensionKey,
-        parameters,
-        content,
-        text,
-        type,
-        localId,
-        marks,
-        actions
-      } = this.props;
-      const fragmentLocalId = marks === null || marks === void 0 ? void 0 : (_marks$find = marks.find(m => m.type.name === 'fragment')) === null || _marks$find === void 0 ? void 0 : (_marks$find$attrs = _marks$find.attrs) === null || _marks$find$attrs === void 0 ? void 0 : _marks$find$attrs.localId;
-      const node = {
-        type,
-        extensionKey,
-        extensionType,
-        parameters,
-        content: content || text,
-        localId,
-        fragmentLocalId
-      };
-      let result = null;
-      try {
-        if (extensionHandlers && extensionHandlers[extensionType]) {
-          const render = getExtensionRenderer(extensionHandlers[extensionType]);
-          result = render(node, rendererContext.adDoc);
-        }
-        if (!result && extensionProvider) {
-          const NodeRenderer = this.getNodeRenderer(extensionProvider, extensionType, extensionKey);
-          if (node.type === 'multiBodiedExtension') {
-            result = jsx(NodeRenderer, {
-              node: node,
-              actions: actions
-            });
-          } else if (node.type === 'inlineExtension') {
-            result = jsx(InlineNodeRendererWrapper, null, jsx(NodeRenderer, {
-              node: node
-            }));
-          } else {
-            result = jsx(NodeRenderer, {
-              node: node
-            });
-          }
-        }
-      } catch (e) {
-        /** We don't want this error to block renderer */
-        /** We keep rendering the default content */
       }
-      return this.props.children({
-        result
-      });
-    });
-    _defineProperty(this, "setupAndRenderExtensionNode", providers => {
-      const {
-        extensionProvider
-      } = this.state;
-      if (!extensionProvider && providers.extensionProvider) {
-        this.handleProvider('extensionProvider', providers.extensionProvider);
-      }
-      return this.renderExtensionNode(extensionProvider);
-    });
-  }
-  UNSAFE_componentWillMount() {
-    this.mounted = true;
-  }
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-  render() {
-    const {
-      providers
-    } = this.props;
-    if (!providers) {
-      return this.setupAndRenderExtensionNode({});
+    } catch (e) {
+      /** We don't want this error to block renderer */
+      /** We keep rendering the default content */
     }
-    return jsx(WithProviders, {
-      providers: ['extensionProvider'],
-      providerFactory: providers,
-      renderNode: this.setupAndRenderExtensionNode
+    return children({
+      result
     });
+  }, [actions, children, content, extensionHandlers, extensionKey, extensionType, localGetNodeRenderer, localId, marks, parameters, rendererContext === null || rendererContext === void 0 ? void 0 : rendererContext.adDoc, text, type]);
+  const setupAndRenderExtensionNode = React.useCallback(providers => {
+    if (!extensionProvider && providers.extensionProvider) {
+      handleProvider('extensionProvider', providers.extensionProvider);
+    }
+    return renderExtensionNode(extensionProvider);
+  }, [extensionProvider, handleProvider, renderExtensionNode]);
+  React.useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  if (!props.providers) {
+    return setupAndRenderExtensionNode({});
   }
+  return jsx(WithProviders, {
+    providers: ['extensionProvider'],
+    providerFactory: props.providers,
+    renderNode: setupAndRenderExtensionNode
+  });
 }
 const InlineNodeRendererWrapper = ({
   children
 }) => {
-  if (getBooleanFF('platform.editor.inline_extension.extended_lcqdn')) {
+  if (fg('platform.editor.inline_extension.extended_lcqdn')) {
     return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       jsx("div", {

package/dist/es2019/ui/MediaCard.js

@@ -116,12 +116,12 @@ export class MediaCardView extends Component {
       this.saveFileState(id);
     }
   }
-  UNSAFE_componentWillReceiveProps(newProps) {
+  componentDidUpdate(prevProps) {
     const {
-      id: newId
-    } = newProps;
-    if (newId && newId !== this.props.id) {
-      this.saveFileState(newId);
+      id: oldId
+    } = prevProps;
+    if (this.props.id && oldId !== this.props.id) {
+      this.saveFileState(this.props.id);
     }
   }
   componentWillUnmount() {

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

@@ -38,7 +38,7 @@ import { nodeToReact } from '../../react/nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.41.0";
+const packageVersion = "109.42.1";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {

package/dist/esm/react/nodes/task-item-with-providers.js

@@ -1,108 +1,58 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["contextIdentifierProvider", "objectAri", "isRenderer"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
-import { Component } from 'react';
 import { ResourcedTaskItem } from '@atlaskit/task-decision';
-var TaskItemWithProviders = /*#__PURE__*/function (_Component) {
-  _inherits(TaskItemWithProviders, _Component);
-  var _super = _createSuper(TaskItemWithProviders);
-  function TaskItemWithProviders() {
-    var _this;
-    _classCallCheck(this, TaskItemWithProviders);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      resolvedContextProvider: undefined
-    });
-    return _this;
-  }
-  _createClass(TaskItemWithProviders, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      this.updateContextIdentifierProvider(this.props);
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.contextIdentifierProvider !== this.props.contextIdentifierProvider) {
-        this.updateContextIdentifierProvider(nextProps);
-      }
-    }
-  }, {
-    key: "updateContextIdentifierProvider",
-    value: function () {
-      var _updateContextIdentifierProvider = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(props) {
-        var resolvedContextProvider;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (!props.contextIdentifierProvider) {
-                _context.next = 13;
-                break;
-              }
-              _context.prev = 1;
-              _context.next = 4;
-              return props.contextIdentifierProvider;
-            case 4:
-              resolvedContextProvider = _context.sent;
-              this.setState({
-                resolvedContextProvider: resolvedContextProvider
-              });
+export default function TaskItemWithProviders(props) {
+  var contextIdentifierProvider = props.contextIdentifierProvider,
+    objectAri = props.objectAri,
+    isRenderer = props.isRenderer,
+    otherProps = _objectWithoutProperties(props, _excluded);
+  var _React$useState = React.useState(undefined),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    resolvedContextProvider = _React$useState2[0],
+    setResolvedContextProvider = _React$useState2[1];
+  var updateContextIdentifierProvider = React.useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(contextIdentifierProvider) {
+      var _resolvedContextProvider;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!contextIdentifierProvider) {
               _context.next = 11;
               break;
-            case 8:
-              _context.prev = 8;
-              _context.t0 = _context["catch"](1);
-              this.setState({
-                resolvedContextProvider: undefined
-              });
-            case 11:
-              _context.next = 14;
-              break;
-            case 13:
-              this.setState({
-                resolvedContextProvider: undefined
-              });
-            case 14:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this, [[1, 8]]);
-      }));
-      function updateContextIdentifierProvider(_x) {
-        return _updateContextIdentifierProvider.apply(this, arguments);
-      }
-      return updateContextIdentifierProvider;
-    }()
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        contextIdentifierProvider = _this$props.contextIdentifierProvider,
-        objectAri = _this$props.objectAri,
-        isRenderer = _this$props.isRenderer,
-        otherProps = _objectWithoutProperties(_this$props, _excluded);
-      var resolvedObjectId = this.state.resolvedContextProvider && this.state.resolvedContextProvider.objectId || objectAri;
-      return /*#__PURE__*/React.createElement(ResourcedTaskItem, _extends({}, otherProps, {
-        objectAri: resolvedObjectId,
-        isRenderer: isRenderer
-      }));
-    }
-  }]);
-  return TaskItemWithProviders;
-}(Component);
-export { TaskItemWithProviders as default };
+            }
+            _context.prev = 1;
+            _context.next = 4;
+            return contextIdentifierProvider;
+          case 4:
+            _resolvedContextProvider = _context.sent;
+            setResolvedContextProvider(_resolvedContextProvider);
+            return _context.abrupt("return");
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](1);
+          case 11:
+            setResolvedContextProvider(undefined);
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 9]]);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), []);
+  React.useMemo(function () {
+    updateContextIdentifierProvider(props.contextIdentifierProvider);
+  }, [props.contextIdentifierProvider, updateContextIdentifierProvider]);
+  var resolvedObjectId = resolvedContextProvider && resolvedContextProvider.objectId || objectAri;
+  return /*#__PURE__*/React.createElement(ResourcedTaskItem, _extends({}, otherProps, {
+    objectAri: resolvedObjectId,
+    isRenderer: isRenderer
+  }));
+}

package/dist/esm/ui/ExtensionRenderer.js

@@ -1,12 +1,4 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -15,7 +7,7 @@ import memoizeOne from 'memoize-one';
 import { getNodeRenderer } from '@atlaskit/editor-common/extensions';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { getExtensionRenderer } from '@atlaskit/editor-common/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 var inlineExtensionStyle = css({
   display: 'inline-block',
   maxWidth: '100%',
@@ -27,124 +19,103 @@ var inlineExtensionStyle = css({
     maxWidth: '100%'
   }
 });
-var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
-  _inherits(ExtensionRenderer, _React$Component);
-  var _super = _createSuper(ExtensionRenderer);
-  function ExtensionRenderer() {
-    var _this;
-    _classCallCheck(this, ExtensionRenderer);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      extensionProvider: null
-    });
-    _defineProperty(_assertThisInitialized(_this), "mounted", false);
-    _defineProperty(_assertThisInitialized(_this), "handleProvider", function (name, providerPromise) {
-      providerPromise && providerPromise.then(function (provider) {
-        if (_this.mounted) {
-          _this.setState(_defineProperty({}, name, provider));
-        }
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "getNodeRenderer", memoizeOne(getNodeRenderer));
-    _defineProperty(_assertThisInitialized(_this), "renderExtensionNode", function (extensionProvider) {
-      var _marks$find;
-      var _this$props = _this.props,
-        extensionHandlers = _this$props.extensionHandlers,
-        rendererContext = _this$props.rendererContext,
-        extensionType = _this$props.extensionType,
-        extensionKey = _this$props.extensionKey,
-        parameters = _this$props.parameters,
-        content = _this$props.content,
-        text = _this$props.text,
-        type = _this$props.type,
-        localId = _this$props.localId,
-        marks = _this$props.marks,
-        actions = _this$props.actions;
-      var fragmentLocalId = marks === null || marks === void 0 || (_marks$find = marks.find(function (m) {
-        return m.type.name === 'fragment';
-      })) === null || _marks$find === void 0 || (_marks$find = _marks$find.attrs) === null || _marks$find === void 0 ? void 0 : _marks$find.localId;
-      var node = {
-        type: type,
-        extensionKey: extensionKey,
-        extensionType: extensionType,
-        parameters: parameters,
-        content: content || text,
-        localId: localId,
-        fragmentLocalId: fragmentLocalId
-      };
-      var result = null;
-      try {
-        if (extensionHandlers && extensionHandlers[extensionType]) {
-          var render = getExtensionRenderer(extensionHandlers[extensionType]);
-          result = render(node, rendererContext.adDoc);
-        }
-        if (!result && extensionProvider) {
-          var NodeRenderer = _this.getNodeRenderer(extensionProvider, extensionType, extensionKey);
-          if (node.type === 'multiBodiedExtension') {
-            result = jsx(NodeRenderer, {
-              node: node,
-              actions: actions
-            });
-          } else if (node.type === 'inlineExtension') {
-            result = jsx(InlineNodeRendererWrapper, null, jsx(NodeRenderer, {
-              node: node
-            }));
-          } else {
-            result = jsx(NodeRenderer, {
-              node: node
-            });
-          }
-        }
-      } catch (e) {
-        /** We don't want this error to block renderer */
-        /** We keep rendering the default content */
+export default function ExtensionRenderer(props) {
+  var extensionHandlers = props.extensionHandlers,
+    rendererContext = props.rendererContext,
+    extensionType = props.extensionType,
+    extensionKey = props.extensionKey,
+    parameters = props.parameters,
+    content = props.content,
+    text = props.text,
+    type = props.type,
+    localId = props.localId,
+    marks = props.marks,
+    actions = props.actions,
+    children = props.children;
+  var isMounted = React.useRef(true);
+  var localGetNodeRenderer = React.useMemo(function () {
+    return memoizeOne(getNodeRenderer);
+  }, []);
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    extensionProvider = _React$useState2[0],
+    setExtensionProvider = _React$useState2[1];
+  var handleProvider = React.useCallback(function (name, providerPromise) {
+    providerPromise && providerPromise.then(function (provider) {
+      if (isMounted.current) {
+        setExtensionProvider(provider);
       }
-      return _this.props.children({
-        result: result
-      });
     });
-    _defineProperty(_assertThisInitialized(_this), "setupAndRenderExtensionNode", function (providers) {
-      var extensionProvider = _this.state.extensionProvider;
-      if (!extensionProvider && providers.extensionProvider) {
-        _this.handleProvider('extensionProvider', providers.extensionProvider);
+  }, []);
+  var renderExtensionNode = React.useCallback(function (extensionProvider) {
+    var _marks$find;
+    var fragmentLocalId = marks === null || marks === void 0 || (_marks$find = marks.find(function (m) {
+      return m.type.name === 'fragment';
+    })) === null || _marks$find === void 0 || (_marks$find = _marks$find.attrs) === null || _marks$find === void 0 ? void 0 : _marks$find.localId;
+    var node = {
+      type: type,
+      extensionKey: extensionKey,
+      extensionType: extensionType,
+      parameters: parameters,
+      content: content || text,
+      localId: localId,
+      fragmentLocalId: fragmentLocalId
+    };
+    var result = null;
+    try {
+      if (extensionHandlers && extensionHandlers[extensionType]) {
+        var render = getExtensionRenderer(extensionHandlers[extensionType]);
+        result = render(node, rendererContext.adDoc);
       }
-      return _this.renderExtensionNode(extensionProvider);
-    });
-    return _this;
-  }
-  _createClass(ExtensionRenderer, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      this.mounted = true;
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.mounted = false;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var providers = this.props.providers;
-      if (!providers) {
-        return this.setupAndRenderExtensionNode({});
+      if (!result && extensionProvider) {
+        var NodeRenderer = localGetNodeRenderer(extensionProvider, extensionType, extensionKey);
+        if (node.type === 'multiBodiedExtension') {
+          result = jsx(NodeRenderer, {
+            node: node,
+            actions: actions
+          });
+        } else if (node.type === 'inlineExtension') {
+          result = jsx(InlineNodeRendererWrapper, null, jsx(NodeRenderer, {
+            node: node
+          }));
+        } else {
+          result = jsx(NodeRenderer, {
+            node: node
+          });
+        }
       }
-      return jsx(WithProviders, {
-        providers: ['extensionProvider'],
-        providerFactory: providers,
-        renderNode: this.setupAndRenderExtensionNode
-      });
+    } catch (e) {
+      /** We don't want this error to block renderer */
+      /** We keep rendering the default content */
     }
-  }]);
-  return ExtensionRenderer;
-}(React.Component);
-export { ExtensionRenderer as default };
+    return children({
+      result: result
+    });
+  }, [actions, children, content, extensionHandlers, extensionKey, extensionType, localGetNodeRenderer, localId, marks, parameters, rendererContext === null || rendererContext === void 0 ? void 0 : rendererContext.adDoc, text, type]);
+  var setupAndRenderExtensionNode = React.useCallback(function (providers) {
+    if (!extensionProvider && providers.extensionProvider) {
+      handleProvider('extensionProvider', providers.extensionProvider);
+    }
+    return renderExtensionNode(extensionProvider);
+  }, [extensionProvider, handleProvider, renderExtensionNode]);
+  React.useEffect(function () {
+    isMounted.current = true;
+    return function () {
+      isMounted.current = false;
+    };
+  }, []);
+  if (!props.providers) {
+    return setupAndRenderExtensionNode({});
+  }
+  return jsx(WithProviders, {
+    providers: ['extensionProvider'],
+    providerFactory: props.providers,
+    renderNode: setupAndRenderExtensionNode
+  });
+}
 var InlineNodeRendererWrapper = function InlineNodeRendererWrapper(_ref) {
   var children = _ref.children;
-  if (getBooleanFF('platform.editor.inline_extension.extended_lcqdn')) {
+  if (fg('platform.editor.inline_extension.extended_lcqdn')) {
     return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       jsx("div", {

package/dist/esm/ui/MediaCard.js

@@ -172,11 +172,11 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
       return componentDidMount;
     }()
   }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(newProps) {
-      var newId = newProps.id;
-      if (newId && newId !== this.props.id) {
-        this.saveFileState(newId);
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var oldId = prevProps.id;
+      if (this.props.id && oldId !== this.props.id) {
+        this.saveFileState(this.props.id);
       }
     }
   }, {