@atlaskit/renderer 108.16.4 → 108.17.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 108.17.0
+
+### Minor Changes
+
+- [#43569](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43569) [`8c40410ca78`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8c40410ca78) - ED-20043: MultiBodied Extension changes
+
+### Patch Changes
+
+- Updated dependencies
+
+## 108.16.5
+
+### Patch Changes
+
+- [#43362](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43362) [`e4cea0e13b9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4cea0e13b9) - [ux] ED-20699 Use LCH color inversion method in dark mode, behind platform.editor.use-lch-for-color-inversion_1qv8ol feature flag.
+
 ## 108.16.4
 
 ### Patch Changes

package/dist/cjs/react/marks/textColor.js

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _tokens = require("@atlaskit/tokens");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
 /**
@@ -76,7 +77,12 @@ function TextColor(props) {
   } else {
     if (colorMode === 'dark') {
       // if we have a custom color, we need to check if we are in dark mode
-      paletteColorValue = invertCustomColor(props.color);
+      // and if the feature flag is enabled we need to use the LCH conversion method
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
+        paletteColorValue = (0, _adfSchema.getDarkModeLCHColor)(props.color);
+      } else {
+        paletteColorValue = invertCustomColor(props.color);
+      }
     } else {
       // if we are in light mode, we can just set the color
       paletteColorValue = props.color;

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

@@ -17,6 +17,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _consts = require("../../consts");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../messages");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var IgnoreSorting = ['LABEL', 'INPUT'];
 var nextStatusOrder = function nextStatusOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -133,7 +134,12 @@ var getStyle = function getStyle(_ref) {
       // if we have a custom color, we need to check if we are in dark mode
       if (colorMode === 'dark') {
         // if we are in dark mode, we need to invert the color
-        style.backgroundColor = invertCustomColor(background);
+        // and if the feature flag is enabled we need to use the LCH conversion method
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
+          style.backgroundColor = (0, _adfSchema.getDarkModeLCHColor)(background);
+        } else {
+          style.backgroundColor = invertCustomColor(background);
+        }
       } else {
         // if we are in light mode, we can just set the color
         style.backgroundColor = background;

package/dist/cjs/ui/ExtensionRenderer.js

@@ -41,7 +41,7 @@ var ExtensionRenderer = exports.default = /*#__PURE__*/function (_React$Componen
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNodeRenderer", (0, _memoizeOne.default)(_extensions.getNodeRenderer));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderExtensionNode", function (extensionProvider) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderExtensionNode", function (extensionProvider, actions) {
       var _marks$find;
       var _this$props = _this.props,
         extensionHandlers = _this$props.extensionHandlers,
@@ -74,9 +74,16 @@ var ExtensionRenderer = exports.default = /*#__PURE__*/function (_React$Componen
         }
         if (!result && extensionProvider) {
           var NodeRenderer = _this.getNodeRenderer(extensionProvider, extensionType, extensionKey);
-          result = /*#__PURE__*/_react.default.createElement(NodeRenderer, {
-            node: node
-          });
+          if (node.type === 'multiBodiedExtension') {
+            result = /*#__PURE__*/_react.default.createElement(NodeRenderer, {
+              node: node,
+              actions: actions
+            });
+          } else {
+            result = /*#__PURE__*/_react.default.createElement(NodeRenderer, {
+              node: node
+            });
+          }
         }
       } catch (e) {
         /** We don't want this error to block renderer */

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

@@ -53,7 +53,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.16.4";
+var packageVersion = "108.17.0";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/es2019/react/marks/textColor.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
-import { isHex, isRgb, rgbToHex } from '@atlaskit/adf-schema';
+import { isHex, isRgb, rgbToHex, getDarkModeLCHColor } from '@atlaskit/adf-schema';
 import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import { useThemeObserver } from '@atlaskit/tokens';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+
 /**
  * This function is duplicated in
  * - @atlaskit/adf-schema
@@ -66,7 +68,12 @@ export default function TextColor(props) {
   } else {
     if (colorMode === 'dark') {
       // if we have a custom color, we need to check if we are in dark mode
-      paletteColorValue = invertCustomColor(props.color);
+      // and if the feature flag is enabled we need to use the LCH conversion method
+      if (getBooleanFF('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
+        paletteColorValue = getDarkModeLCHColor(props.color);
+      } else {
+        paletteColorValue = invertCustomColor(props.color);
+      }
     } else {
       // if we are in light mode, we can just set the color
       paletteColorValue = props.color;

package/dist/es2019/react/nodes/tableCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { isHex, isRgb, rgbToHex, tableBackgroundColorPalette } from '@atlaskit/adf-schema';
+import { isHex, isRgb, rgbToHex, tableBackgroundColorPalette, getDarkModeLCHColor } from '@atlaskit/adf-schema';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { hexToEditorBackgroundPaletteRawValue } from '@atlaskit/editor-palette';
@@ -10,6 +10,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { RendererCssClassName } from '../../consts';
 import { useIntl } from 'react-intl-next';
 import { tableCellMessages } from '../../messages';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const IgnoreSorting = ['LABEL', 'INPUT'];
 const nextStatusOrder = currentSortOrder => {
   switch (currentSortOrder) {
@@ -129,7 +130,12 @@ const getStyle = ({
       // if we have a custom color, we need to check if we are in dark mode
       if (colorMode === 'dark') {
         // if we are in dark mode, we need to invert the color
-        style.backgroundColor = invertCustomColor(background);
+        // and if the feature flag is enabled we need to use the LCH conversion method
+        if (getBooleanFF('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
+          style.backgroundColor = getDarkModeLCHColor(background);
+        } else {
+          style.backgroundColor = invertCustomColor(background);
+        }
       } else {
         // if we are in light mode, we can just set the color
         style.backgroundColor = background;

package/dist/es2019/ui/ExtensionRenderer.js

@@ -21,7 +21,7 @@ export default class ExtensionRenderer extends React.Component {
       });
     });
     _defineProperty(this, "getNodeRenderer", memoizeOne(getNodeRenderer));
-    _defineProperty(this, "renderExtensionNode", extensionProvider => {
+    _defineProperty(this, "renderExtensionNode", (extensionProvider, actions) => {
       var _marks$find, _marks$find$attrs;
       const {
         extensionHandlers,
@@ -53,9 +53,16 @@ export default class ExtensionRenderer extends React.Component {
         }
         if (!result && extensionProvider) {
           const NodeRenderer = this.getNodeRenderer(extensionProvider, extensionType, extensionKey);
-          result = /*#__PURE__*/React.createElement(NodeRenderer, {
-            node: node
-          });
+          if (node.type === 'multiBodiedExtension') {
+            result = /*#__PURE__*/React.createElement(NodeRenderer, {
+              node: node,
+              actions: actions
+            });
+          } else {
+            result = /*#__PURE__*/React.createElement(NodeRenderer, {
+              node: node
+            });
+          }
         }
       } catch (e) {
         /** We don't want this error to block renderer */

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

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.16.4";
+const packageVersion = "108.17.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/esm/react/marks/textColor.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { useMemo } from 'react';
-import { isHex, isRgb, rgbToHex } from '@atlaskit/adf-schema';
+import { isHex, isRgb, rgbToHex, getDarkModeLCHColor } from '@atlaskit/adf-schema';
 import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import { useThemeObserver } from '@atlaskit/tokens';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+
 /**
  * This function is duplicated in
  * - @atlaskit/adf-schema
@@ -66,7 +68,12 @@ export default function TextColor(props) {
   } else {
     if (colorMode === 'dark') {
       // if we have a custom color, we need to check if we are in dark mode
-      paletteColorValue = invertCustomColor(props.color);
+      // and if the feature flag is enabled we need to use the LCH conversion method
+      if (getBooleanFF('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
+        paletteColorValue = getDarkModeLCHColor(props.color);
+      } else {
+        paletteColorValue = invertCustomColor(props.color);
+      }
     } else {
       // if we are in light mode, we can just set the color
       paletteColorValue = props.color;

package/dist/esm/react/nodes/tableCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { isHex, isRgb, rgbToHex, tableBackgroundColorPalette } from '@atlaskit/adf-schema';
+import { isHex, isRgb, rgbToHex, tableBackgroundColorPalette, getDarkModeLCHColor } from '@atlaskit/adf-schema';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { hexToEditorBackgroundPaletteRawValue } from '@atlaskit/editor-palette';
@@ -10,6 +10,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { RendererCssClassName } from '../../consts';
 import { useIntl } from 'react-intl-next';
 import { tableCellMessages } from '../../messages';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var IgnoreSorting = ['LABEL', 'INPUT'];
 var nextStatusOrder = function nextStatusOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -126,7 +127,12 @@ var getStyle = function getStyle(_ref) {
       // if we have a custom color, we need to check if we are in dark mode
       if (colorMode === 'dark') {
         // if we are in dark mode, we need to invert the color
-        style.backgroundColor = invertCustomColor(background);
+        // and if the feature flag is enabled we need to use the LCH conversion method
+        if (getBooleanFF('platform.editor.use-lch-for-color-inversion_1qv8ol')) {
+          style.backgroundColor = getDarkModeLCHColor(background);
+        } else {
+          style.backgroundColor = invertCustomColor(background);
+        }
       } else {
         // if we are in light mode, we can just set the color
         style.backgroundColor = background;

package/dist/esm/ui/ExtensionRenderer.js

@@ -34,7 +34,7 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "getNodeRenderer", memoizeOne(getNodeRenderer));
-    _defineProperty(_assertThisInitialized(_this), "renderExtensionNode", function (extensionProvider) {
+    _defineProperty(_assertThisInitialized(_this), "renderExtensionNode", function (extensionProvider, actions) {
       var _marks$find;
       var _this$props = _this.props,
         extensionHandlers = _this$props.extensionHandlers,
@@ -67,9 +67,16 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
         }
         if (!result && extensionProvider) {
           var NodeRenderer = _this.getNodeRenderer(extensionProvider, extensionType, extensionKey);
-          result = /*#__PURE__*/React.createElement(NodeRenderer, {
-            node: node
-          });
+          if (node.type === 'multiBodiedExtension') {
+            result = /*#__PURE__*/React.createElement(NodeRenderer, {
+              node: node,
+              actions: actions
+            });
+          } else {
+            result = /*#__PURE__*/React.createElement(NodeRenderer, {
+              node: node
+            });
+          }
         }
       } catch (e) {
         /** We don't want this error to block renderer */

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

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.16.4";
+var packageVersion = "108.17.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import { RendererContext } from '../react/types';
-import { ExtensionLayout } from '@atlaskit/adf-schema';
+import type { RendererContext } from '../react/types';
+import type { ExtensionLayout } from '@atlaskit/adf-schema';
 import { getNodeRenderer } from '@atlaskit/editor-common/extensions';
-import type { ExtensionHandlers, ExtensionProvider } from '@atlaskit/editor-common/extensions';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import { Mark as PMMark } from '@atlaskit/editor-prosemirror/model';
+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';
 export interface Props {
-    type: 'extension' | 'inlineExtension' | 'bodiedExtension';
+    type: 'extension' | 'inlineExtension' | 'bodiedExtension' | 'multiBodiedExtension';
     extensionHandlers?: ExtensionHandlers;
     providers?: ProviderFactory;
     rendererContext: RendererContext;
@@ -34,7 +34,7 @@ export default class ExtensionRenderer extends React.Component<Props, State> {
     componentWillUnmount(): void;
     handleProvider: (name: keyof State, providerPromise?: Promise<any>) => void;
     getNodeRenderer: import("memoize-one").MemoizedFn<typeof getNodeRenderer>;
-    renderExtensionNode: (extensionProvider?: ExtensionProvider | null) => JSX.Element;
+    renderExtensionNode: (extensionProvider?: ExtensionProvider | null, actions?: MultiBodiedExtensionActions) => JSX.Element;
     setupAndRenderExtensionNode: (providers: {
         extensionProvider?: Promise<ExtensionProvider<any>> | undefined;
     }) => JSX.Element;

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import { RendererContext } from '../react/types';
-import { ExtensionLayout } from '@atlaskit/adf-schema';
+import type { RendererContext } from '../react/types';
+import type { ExtensionLayout } from '@atlaskit/adf-schema';
 import { getNodeRenderer } from '@atlaskit/editor-common/extensions';
-import type { ExtensionHandlers, ExtensionProvider } from '@atlaskit/editor-common/extensions';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import { Mark as PMMark } from '@atlaskit/editor-prosemirror/model';
+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';
 export interface Props {
-    type: 'extension' | 'inlineExtension' | 'bodiedExtension';
+    type: 'extension' | 'inlineExtension' | 'bodiedExtension' | 'multiBodiedExtension';
     extensionHandlers?: ExtensionHandlers;
     providers?: ProviderFactory;
     rendererContext: RendererContext;
@@ -34,7 +34,7 @@ export default class ExtensionRenderer extends React.Component<Props, State> {
     componentWillUnmount(): void;
     handleProvider: (name: keyof State, providerPromise?: Promise<any>) => void;
     getNodeRenderer: import("memoize-one").MemoizedFn<typeof getNodeRenderer>;
-    renderExtensionNode: (extensionProvider?: ExtensionProvider | null) => JSX.Element;
+    renderExtensionNode: (extensionProvider?: ExtensionProvider | null, actions?: MultiBodiedExtensionActions) => JSX.Element;
     setupAndRenderExtensionNode: (providers: {
         extensionProvider?: Promise<ExtensionProvider<any>> | undefined;
     }) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.16.4",
+  "version": "108.17.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,14 +31,14 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.17.0",
     "@atlaskit/code": "^15.0.0",
-    "@atlaskit/editor-common": "^76.22.0",
+    "@atlaskit/editor-common": "^76.23.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.8.0",
     "@atlaskit/emoji": "^67.6.0",
     "@atlaskit/icon": "^22.0.0",
-    "@atlaskit/link-datasource": "^1.18.0",
+    "@atlaskit/link-datasource": "^1.19.0",
     "@atlaskit/media-card": "^77.4.0",
     "@atlaskit/media-client": "^25.0.0",
     "@atlaskit/media-client-react": "^1.4.0",
@@ -128,6 +128,9 @@
     "platform.media-experience.media-viewer-v2_hgsii": {
       "type": "boolean",
       "referenceOnly": "true"
+    },
+    "platform.editor.use-lch-for-color-inversion_1qv8ol": {
+      "type": "boolean"
     }
   }
 }