@atlaskit/renderer 109.40.11 → 109.42.0

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);
       }
     }
   }, {

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

@@ -48,7 +48,7 @@ import { nodeToReact } from '../../react/nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.40.11";
+var packageVersion = "109.42.0";
 export var defaultNodeComponents = nodeToReact;
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);

package/dist/types/react/nodes/mediaSingle/index.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
+import type { EditorAppearance } from '@atlaskit/editor-common/types';
 import type { EventHandlers, MediaSingleWidthType } from '@atlaskit/editor-common/ui';
 import type { AnalyticsEventPayload } from '../../../analytics/events';
 import type { RendererAppearance } from '../../../ui/Renderer/types';
@@ -18,6 +19,7 @@ export interface Props {
     allowCaptions?: boolean;
     isInsideOfInlineExtension?: boolean;
     dataAttributes?: Record<string, any>;
+    editorAppearance?: EditorAppearance;
 }
 export declare const getMediaContainerWidth: (currentContainerWidth: number, layout: MediaSingleLayout) => number;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {

package/dist/types/react/nodes/task-item-with-providers.d.ts

@@ -1,4 +1,4 @@
-import { Component, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import { type ContentRef, type TaskDecisionProvider } from '@atlaskit/task-decision';
 export interface Props {
@@ -20,10 +20,4 @@ export interface Props {
 export interface State {
     resolvedContextProvider?: ContextIdentifierProvider;
 }
-export default class TaskItemWithProviders extends Component<Props, State> {
-    state: State;
-    UNSAFE_componentWillMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
-    private updateContextIdentifierProvider;
-    render(): JSX.Element;
-}
+export default function TaskItemWithProviders(props: Props): JSX.Element;

package/dist/types/ui/ExtensionRenderer.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
+/// <reference types="react" />
 import type { RendererContext } from '../react/types';
 import type { ExtensionLayout } from '@atlaskit/adf-schema';
-import { getNodeRenderer } from '@atlaskit/editor-common/extensions';
 import type { ExtensionHandlers, ExtensionProvider, MultiBodiedExtensionActions } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { Mark as PMMark } from '@atlaskit/editor-prosemirror/model';
@@ -26,18 +25,4 @@ export interface Props {
 export interface State {
     extensionProvider?: ExtensionProvider | null;
 }
-export default class ExtensionRenderer extends React.Component<Props, State> {
-    state: {
-        extensionProvider: null;
-    };
-    mounted: boolean;
-    UNSAFE_componentWillMount(): void;
-    componentWillUnmount(): void;
-    handleProvider: (name: keyof State, providerPromise?: Promise<any>) => void;
-    getNodeRenderer: import("memoize-one").MemoizedFn<typeof getNodeRenderer>;
-    renderExtensionNode: (extensionProvider?: ExtensionProvider | null) => JSX.Element;
-    setupAndRenderExtensionNode: (providers: {
-        extensionProvider?: Promise<ExtensionProvider<any>> | undefined;
-    }) => JSX.Element;
-    render(): JSX.Element;
-}
+export default function ExtensionRenderer(props: Props): JSX.Element;

package/dist/types/ui/MediaCard.d.ts

@@ -52,7 +52,7 @@ export declare class MediaCardView extends Component<MediaCardProps & {
 }, State> {
     state: State;
     componentDidMount(): Promise<void>;
-    UNSAFE_componentWillReceiveProps(newProps: MediaCardProps): void;
+    componentDidUpdate(prevProps: MediaCardProps): void;
     componentWillUnmount(): void;
     saveFileState: (id: string) => Promise<void>;
     private renderLoadingCard;

package/dist/types-ts4.5/react/nodes/mediaSingle/index.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
+import type { EditorAppearance } from '@atlaskit/editor-common/types';
 import type { EventHandlers, MediaSingleWidthType } from '@atlaskit/editor-common/ui';
 import type { AnalyticsEventPayload } from '../../../analytics/events';
 import type { RendererAppearance } from '../../../ui/Renderer/types';
@@ -18,6 +19,7 @@ export interface Props {
     allowCaptions?: boolean;
     isInsideOfInlineExtension?: boolean;
     dataAttributes?: Record<string, any>;
+    editorAppearance?: EditorAppearance;
 }
 export declare const getMediaContainerWidth: (currentContainerWidth: number, layout: MediaSingleLayout) => number;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {

package/dist/types-ts4.5/react/nodes/task-item-with-providers.d.ts

@@ -1,4 +1,4 @@
-import { Component, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import { type ContentRef, type TaskDecisionProvider } from '@atlaskit/task-decision';
 export interface Props {
@@ -20,10 +20,4 @@ export interface Props {
 export interface State {
     resolvedContextProvider?: ContextIdentifierProvider;
 }
-export default class TaskItemWithProviders extends Component<Props, State> {
-    state: State;
-    UNSAFE_componentWillMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
-    private updateContextIdentifierProvider;
-    render(): JSX.Element;
-}
+export default function TaskItemWithProviders(props: Props): JSX.Element;

package/dist/types-ts4.5/ui/ExtensionRenderer.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
+/// <reference types="react" />
 import type { RendererContext } from '../react/types';
 import type { ExtensionLayout } from '@atlaskit/adf-schema';
-import { getNodeRenderer } from '@atlaskit/editor-common/extensions';
 import type { ExtensionHandlers, ExtensionProvider, MultiBodiedExtensionActions } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { Mark as PMMark } from '@atlaskit/editor-prosemirror/model';
@@ -26,18 +25,4 @@ export interface Props {
 export interface State {
     extensionProvider?: ExtensionProvider | null;
 }
-export default class ExtensionRenderer extends React.Component<Props, State> {
-    state: {
-        extensionProvider: null;
-    };
-    mounted: boolean;
-    UNSAFE_componentWillMount(): void;
-    componentWillUnmount(): void;
-    handleProvider: (name: keyof State, providerPromise?: Promise<any>) => void;
-    getNodeRenderer: import("memoize-one").MemoizedFn<typeof getNodeRenderer>;
-    renderExtensionNode: (extensionProvider?: ExtensionProvider | null) => JSX.Element;
-    setupAndRenderExtensionNode: (providers: {
-        extensionProvider?: Promise<ExtensionProvider<any>> | undefined;
-    }) => JSX.Element;
-    render(): JSX.Element;
-}
+export default function ExtensionRenderer(props: Props): JSX.Element;

package/dist/types-ts4.5/ui/MediaCard.d.ts

@@ -52,7 +52,7 @@ export declare class MediaCardView extends Component<MediaCardProps & {
 }, State> {
     state: State;
     componentDidMount(): Promise<void>;
-    UNSAFE_componentWillReceiveProps(newProps: MediaCardProps): void;
+    componentDidUpdate(prevProps: MediaCardProps): void;
     componentWillUnmount(): void;
     saveFileState: (id: string) => Promise<void>;
     private renderLoadingCard;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "109.40.11",
+	"version": "109.42.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,11 +31,11 @@
 		"@atlaskit/analytics-next": "^9.3.0",
 		"@atlaskit/button": "^18.3.0",
 		"@atlaskit/code": "^15.4.0",
-		"@atlaskit/editor-common": "^84.3.0",
+		"@atlaskit/editor-common": "^84.5.0",
 		"@atlaskit/editor-json-transformer": "^8.15.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-prosemirror": "4.0.1",
-		"@atlaskit/editor-shared-styles": "^2.12.0",
+		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/emoji": "^67.6.0",
 		"@atlaskit/feature-gate-js-client": "^4.18.0",
 		"@atlaskit/icon": "^22.6.0",
@@ -134,9 +134,6 @@
 		"platform.editor.renderer-error-boundary-for-dom-errors": {
 			"type": "boolean"
 		},
-		"platform.editor.scale-table-when-number-column-in-table-resized_y4qh2": {
-			"type": "boolean"
-		},
 		"platform.editor.table.use-increased-scaling-percent": {
 			"type": "boolean"
 		},