@atlaskit/adf-schema 33.2.3 → 34.0.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/adf-schema
 
+## 34.0.1
+
+### Patch Changes
+
+- 726054a: ED-21266: updated extensionFrame to be non-selectable to address selection issue
+
+## 34.0.0
+
+### Major Changes
+
+- 8132ac3: ED-20699 Add LCH color inversion method behind feature flag platform.editor.use-lch-for-color-inversion_1qv8ol for text and table cell background colors. Also adds @atlaskit/platform-feature-flags as a devDep.
+
 ## 33.2.3
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -567,6 +567,12 @@ Object.defineProperty(exports, "getCellDomAttrs", {
     return _schema.getCellDomAttrs;
   }
 });
+Object.defineProperty(exports, "getDarkModeLCHColor", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getDarkModeLCHColor;
+  }
+});
 Object.defineProperty(exports, "getEmojiAcName", {
   enumerable: true,
   get: function get() {

package/dist/cjs/schema/marks/text-color.js

@@ -10,6 +10,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _editorPalette = require("../../utils/editor-palette");
 var _groups = require("../groups");
 var _colors = require("../../utils/colors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _lchColorInversion = require("../../utils/lch-color-inversion");
 /**
  * @name textColor_mark
  */
@@ -197,7 +199,12 @@ var textColor = {
     } else {
       if (getGlobalTheme().colorMode === 'dark') {
         // if we have a custom color, we need to check if we are in dark mode
-        paletteColorValue = invertCustomColor(mark.attrs.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, _lchColorInversion.getDarkModeLCHColor)(mark.attrs.color);
+        } else {
+          paletteColorValue = invertCustomColor(mark.attrs.color);
+        }
       } else {
         // if we are in light mode, we can just set the color
         paletteColorValue = mark.attrs.color;

package/dist/cjs/schema/nodes/multi-bodied-extension.js

@@ -20,7 +20,7 @@ var extensionFrame = {
   isolating: true,
   definingAsContext: false,
   definingForContent: true,
-  selectable: true,
+  selectable: false,
   attrs: {},
   parseDOM: [{
     context: 'extensionFrame//',

package/dist/cjs/schema/nodes/tableNodes.js

@@ -10,6 +10,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _editorPalette = require("../../utils/editor-palette");
 var _colors = require("../../utils/colors");
 var _uuid = require("../../utils/uuid");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _lchColorInversion = require("../../utils/lch-color-inversion");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var tablePrefixSelector = 'pm-table';
@@ -170,7 +172,12 @@ var getCellDomAttrs = function getCellDomAttrs(node) {
         // if we have a custom color, we need to check if we are in dark mode
         if (getGlobalTheme().colorMode === 'dark') {
           // if we have a custom color, we need to check if we are in dark mode
-          attrs.style = "background-color: ".concat(invertCustomColor(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')) {
+            attrs.style = "background-color: ".concat((0, _lchColorInversion.getDarkModeLCHColor)(color), ";");
+          } else {
+            attrs.style = "background-color: ".concat(invertCustomColor(color), ";");
+          }
         } else {
           // if we are in light mode, we can just set the color
           attrs.style = "background-color: ".concat(background, ";");

package/dist/cjs/utils/index.js

@@ -297,6 +297,12 @@ Object.defineProperty(exports, "generateUuid", {
     return _uuid.generateUuid;
   }
 });
+Object.defineProperty(exports, "getDarkModeLCHColor", {
+  enumerable: true,
+  get: function get() {
+    return _lchColorInversion.getDarkModeLCHColor;
+  }
+});
 Object.defineProperty(exports, "getEmojiAcName", {
   enumerable: true,
   get: function get() {
@@ -378,4 +384,5 @@ Object.defineProperty(exports, "uuid", {
 var _emoji = require("./confluence/emoji");
 var _uuid = require("./uuid");
 var _colors = require("./colors");
-var _url = require("./url");
+var _url = require("./url");
+var _lchColorInversion = require("./lch-color-inversion");

package/dist/cjs/utils/lch-color-inversion.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDarkModeLCHColor = exports.clampLightness = void 0;
+// https://en.wikipedia.org/wiki/HCL_color_space
+
+// https://en.wikipedia.org/wiki/CIE_1931_color_space#CIE_xy_chromaticity_diagram_and_the_CIE_xyY_color_space
+
+// https://en.wikipedia.org/wiki/CIELAB_color_space
+
+var clamp = function clamp(i, min, max) {
+  return Math.round(Math.min(Math.max(i, min), max));
+};
+var expandShorthandHex = function expandShorthandHex(input) {
+  return input.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function (m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+};
+var rgbFromHex = function rgbFromHex(input) {
+  var fullHex = expandShorthandHex(input);
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(fullHex);
+  return result === null ? null : {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  };
+};
+var rgbToHex = function rgbToHex(_ref) {
+  var r = _ref.r,
+    g = _ref.g,
+    b = _ref.b;
+  var convertComponent = function convertComponent(c) {
+    var cBase16 = c.toString(16);
+    return cBase16.length === 1 ? "0".concat(cBase16) : cBase16;
+  };
+  return "#".concat(convertComponent(r)).concat(convertComponent(g)).concat(convertComponent(b));
+};
+var rgbToXyz = function rgbToXyz(rgb) {
+  var convertRgbComponent = function convertRgbComponent(c) {
+    return c > 0.04045 ? Math.pow((c + 0.055) / 1.055, 2.4) : c / 12.92;
+  };
+  var convertXyzComponent = function convertXyzComponent(c) {
+    return c > 0.008856452 ? Math.pow(c, 1 / 3) : c / 0.12841855 + 0.137931034;
+  };
+  var r = convertRgbComponent(rgb.r / 255);
+  var g = convertRgbComponent(rgb.g / 255);
+  var b = convertRgbComponent(rgb.b / 255);
+  return {
+    x: convertXyzComponent((0.4124564 * r + 0.3575761 * g + 0.1804375 * b) / 0.95047),
+    y: convertXyzComponent(0.2126729 * r + 0.7151522 * g + 0.072175 * b),
+    z: convertXyzComponent((0.0193339 * r + 0.119192 * g + 0.9503041 * b) / 1.08883)
+  };
+};
+var xyzToLab = function xyzToLab(_ref2) {
+  var x = _ref2.x,
+    y = _ref2.y,
+    z = _ref2.z;
+  return {
+    l: Math.max(116 * y - 16, 0),
+    a: 500 * (x - y),
+    b: 200 * (y - z)
+  };
+};
+var labToLch = function labToLch(_ref3) {
+  var l = _ref3.l,
+    a = _ref3.a,
+    b = _ref3.b;
+  var h = (Math.atan2(b, a) * (180 / Math.PI) + 360) % 360;
+  var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
+  if (Math.round(c * 10000) === 0) h = Number.NaN;
+  return {
+    l: l,
+    c: c,
+    h: h
+  };
+};
+var lchToLab = function lchToLab(_ref4) {
+  var l = _ref4.l,
+    c = _ref4.c,
+    h = _ref4.h;
+  var convertH = Number.isNaN(h) ? 0 : h * (Math.PI / 180);
+  return {
+    l: l,
+    a: Math.cos(convertH) * c,
+    b: Math.sin(convertH) * c
+  };
+};
+var labToXyz = function labToXyz(_ref5) {
+  var l = _ref5.l,
+    a = _ref5.a,
+    b = _ref5.b;
+  var convertComponent = function convertComponent(c) {
+    return c > 0.206896552 ? Math.pow(c, 3) : 0.12841855 * (c - 0.137931034);
+  };
+  var y = (l + 16) / 116;
+  var x = a / 500 + y;
+  var z = y - b / 200;
+  return {
+    x: convertComponent(x) * 0.95047,
+    y: convertComponent(y),
+    z: convertComponent(z) * 1.08883
+  };
+};
+var xyzToRgb = function xyzToRgb(_ref6) {
+  var x = _ref6.x,
+    y = _ref6.y,
+    z = _ref6.z;
+  var convertComponent = function convertComponent(c) {
+    return 255 * (c <= 0.00304 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055);
+  };
+  return {
+    r: clamp(convertComponent(3.2404542 * x - 1.5371385 * y - 0.4985314 * z), 0, 255),
+    g: clamp(convertComponent(-0.969266 * x + 1.8760108 * y + 0.041556 * z), 0, 255),
+    b: clamp(convertComponent(0.0556434 * x - 0.2040259 * y + 1.0572252 * z), 0, 255)
+  };
+};
+var rgbToLch = function rgbToLch(rgb) {
+  return labToLch(xyzToLab(rgbToXyz(rgb)));
+};
+var lchToRgb = function lchToRgb(lch) {
+  return xyzToRgb(labToXyz(lchToLab(lch)));
+};
+var clampLightness = function clampLightness(color, newPercent) {
+  var rgb = rgbFromHex(color);
+  if (rgb === null) {
+    return color;
+  }
+
+  // LCH (rather than HSL) gives the best results here as the L component in LCH is based on human color perception
+  var lch = rgbToLch(rgb);
+  lch.l = clamp(newPercent, 0, 100);
+  return rgbToHex(lchToRgb(lch));
+};
+exports.clampLightness = clampLightness;
+var getLightness = function getLightness(color) {
+  var rgb = rgbFromHex(color);
+  if (rgb === null) {
+    return 0;
+  }
+  var lch = rgbToLch(rgb);
+  return lch.l;
+};
+var getDarkModeLCHColor = function getDarkModeLCHColor(currentBackgroundColor) {
+  var lightness = getLightness(currentBackgroundColor);
+  var newLightness = Math.abs(100 - lightness);
+  return clampLightness(currentBackgroundColor, newLightness).toUpperCase();
+};
+exports.getDarkModeLCHColor = getDarkModeLCHColor;

package/dist/es2019/index.js

@@ -1,3 +1,3 @@
 export { PanelType, AnnotationTypes, alignment, alignmentPositionMap, annotation, blockCard, blockquote, bodiedExtension, breakout, bulletList, bulletListSelector, caption, code, codeBlock, codeBlockToJSON, colorPalette, /** @deprecated [ED-15849] The extended palette is now rolled into the main one. Use `colorPalette` instead. */
 colorPaletteExtended, confluenceInlineComment, confluenceJiraIssue, confluenceUnsupportedBlock, confluenceUnsupportedInline, copyPrivateMediaAttributes, createSchema, dataConsumer, dataConsumerToJSON, date, decisionItem, decisionList, decisionListSelector, doc, em, embedCard, emoji, expand, expandToJSON, extension, fragment, fragmentToJSON, hardBreak, heading, image, indentation, inlineCard, inlineExtension, inlineNodes, layoutColumn, layoutSection, link, linkToJSON, listItem, media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaSingleWithWidthType, mediaSingleFull, mediaSingleSpec, mediaInline, mediaSingleToJSON, mediaToJSON, mention, mentionToJSON, nestedExpand, orderedList, orderedListSelector, orderedListWithOrder, panel, paragraph, placeholder, rule, sanitizeNodes, getCellAttrs, getCellDomAttrs, status, strike, strong, subsup, table, tableWithCustomWidth, tableBackgroundBorderColor, tableBackgroundColorNames, tableBackgroundColorPalette, tableCell, tableCellContentDomSelector, tableCellContentWrapperSelector, tableCellSelector, tableHeader, tableHeaderSelector, tablePrefixSelector, tableRow, tableToJSON, taskItem, taskList, taskListSelector, text, textColor, toJSONTableCell, toJSONTableHeader, typeAheadQuery, underline, unknownBlock, unsupportedBlock, unsupportedInline, unsupportedNodeTypesForMediaCards, buildAnnotationMarkDataAttributes, AnnotationMarkStates, unsupportedMark, unsupportedNodeAttribute, border, borderColorPalette, extensionFrame, multiBodiedExtension } from './schema';
-export { B100, B400, B50, B500, B75, G200, G300, G400, G50, G500, G75, N0, N20, N200, N30, N300, N40, N50, N500, N60, N80, N800, N90, P100, P300, P400, P50, P500, P75, R100, R300, R400, R50, R500, R75, T100, T300, T50, T500, T75, Y200, Y400, Y50, Y500, Y75, acNameToEmoji, acShortcutToEmoji, emojiIdToAcName, generateUuid, getEmojiAcName, getLinkMatch, hexToRgb, hexToRgba, isHex, isRgb, isSafeUrl, linkify, linkifyMatch, normalizeHexColor, normalizeUrl, rgbToHex, uuid } from './utils';
+export { B100, B400, B50, B500, B75, G200, G300, G400, G50, G500, G75, N0, N20, N200, N30, N300, N40, N50, N500, N60, N80, N800, N90, P100, P300, P400, P50, P500, P75, R100, R300, R400, R50, R500, R75, T100, T300, T50, T500, T75, Y200, Y400, Y50, Y500, Y75, acNameToEmoji, acShortcutToEmoji, emojiIdToAcName, generateUuid, getEmojiAcName, getLinkMatch, hexToRgb, hexToRgba, isHex, isRgb, isSafeUrl, linkify, linkifyMatch, normalizeHexColor, normalizeUrl, rgbToHex, uuid, getDarkModeLCHColor } from './utils';

package/dist/es2019/schema/marks/text-color.js

@@ -1,6 +1,8 @@
 import { hexToEditorTextPaletteColor } from '../../utils/editor-palette';
 import { COLOR } from '../groups';
 import { rgbToHex, N0, N80, P50, P300, P500, T75, T300, T500, G75, G300, G500, R75, R300, R500, Y75, Y200, Y400, B75, B100, B500, isHex, isRgb } from '../../utils/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getDarkModeLCHColor } from '../../utils/lch-color-inversion';
 
 /**
  * @name textColor_mark
@@ -181,7 +183,12 @@ export const textColor = {
     } else {
       if (getGlobalTheme().colorMode === 'dark') {
         // if we have a custom color, we need to check if we are in dark mode
-        paletteColorValue = invertCustomColor(mark.attrs.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(mark.attrs.color);
+        } else {
+          paletteColorValue = invertCustomColor(mark.attrs.color);
+        }
       } else {
         // if we are in light mode, we can just set the color
         paletteColorValue = mark.attrs.color;

package/dist/es2019/schema/nodes/multi-bodied-extension.js

@@ -15,7 +15,7 @@ export const extensionFrame = {
   isolating: true,
   definingAsContext: false,
   definingForContent: true,
-  selectable: true,
+  selectable: false,
   attrs: {},
   parseDOM: [{
     context: 'extensionFrame//',

package/dist/es2019/schema/nodes/tableNodes.js

@@ -1,6 +1,8 @@
 import { hexToEditorBackgroundPaletteRawValue } from '../../utils/editor-palette';
 import { B100, B50, B75, G200, G50, G75, hexToRgba, isHex, isRgb, N0, N20, N60, N800, P100, P50, P75, R100, R50, R75, rgbToHex, T100, T50, T75, Y200, Y50, Y75 } from '../../utils/colors';
 import { uuid } from '../../utils/uuid';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getDarkModeLCHColor } from '../../utils/lch-color-inversion';
 export const tablePrefixSelector = 'pm-table';
 export const tableCellSelector = `${tablePrefixSelector}-cell-content-wrap`;
 export const tableHeaderSelector = `${tablePrefixSelector}-header-content-wrap`;
@@ -153,7 +155,12 @@ export const getCellDomAttrs = node => {
         // if we have a custom color, we need to check if we are in dark mode
         if (getGlobalTheme().colorMode === 'dark') {
           // if we have a custom color, we need to check if we are in dark mode
-          attrs.style = `background-color: ${invertCustomColor(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')) {
+            attrs.style = `background-color: ${getDarkModeLCHColor(color)};`;
+          } else {
+            attrs.style = `background-color: ${invertCustomColor(color)};`;
+          }
         } else {
           // if we are in light mode, we can just set the color
           attrs.style = `background-color: ${background};`;

package/dist/es2019/utils/index.js

@@ -1,4 +1,5 @@
 export { acNameToEmoji, acShortcutToEmoji, emojiIdToAcName, getEmojiAcName } from './confluence/emoji';
 export { generateUuid, uuid } from './uuid';
 export { B100, B400, B50, B500, B75, G200, G300, G400, G50, G500, G75, N0, N20, N200, N30, N300, N40, N50, N500, N60, N80, N800, N90, P100, P300, P400, P50, P500, P75, R100, R300, R400, R50, R500, R75, T100, T300, T50, T500, T75, Y200, Y400, Y50, Y500, Y75, hexToRgb, hexToRgba, isHex, isRgb, normalizeHexColor, rgbToHex } from './colors';
-export { getLinkMatch, isSafeUrl, normalizeUrl, linkify, linkifyMatch } from './url';
+export { getLinkMatch, isSafeUrl, normalizeUrl, linkify, linkifyMatch } from './url';
+export { getDarkModeLCHColor } from './lch-color-inversion';

package/dist/es2019/utils/lch-color-inversion.js

@@ -0,0 +1,128 @@
+// https://en.wikipedia.org/wiki/HCL_color_space
+
+// https://en.wikipedia.org/wiki/CIE_1931_color_space#CIE_xy_chromaticity_diagram_and_the_CIE_xyY_color_space
+
+// https://en.wikipedia.org/wiki/CIELAB_color_space
+
+const clamp = (i, min, max) => Math.round(Math.min(Math.max(i, min), max));
+const expandShorthandHex = input => input.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => r + r + g + g + b + b);
+const rgbFromHex = input => {
+  const fullHex = expandShorthandHex(input);
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(fullHex);
+  return result === null ? null : {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  };
+};
+const rgbToHex = ({
+  r,
+  g,
+  b
+}) => {
+  const convertComponent = c => {
+    const cBase16 = c.toString(16);
+    return cBase16.length === 1 ? `0${cBase16}` : cBase16;
+  };
+  return `#${convertComponent(r)}${convertComponent(g)}${convertComponent(b)}`;
+};
+const rgbToXyz = rgb => {
+  const convertRgbComponent = c => c > 0.04045 ? Math.pow((c + 0.055) / 1.055, 2.4) : c / 12.92;
+  const convertXyzComponent = c => c > 0.008856452 ? Math.pow(c, 1 / 3) : c / 0.12841855 + 0.137931034;
+  const r = convertRgbComponent(rgb.r / 255);
+  const g = convertRgbComponent(rgb.g / 255);
+  const b = convertRgbComponent(rgb.b / 255);
+  return {
+    x: convertXyzComponent((0.4124564 * r + 0.3575761 * g + 0.1804375 * b) / 0.95047),
+    y: convertXyzComponent(0.2126729 * r + 0.7151522 * g + 0.072175 * b),
+    z: convertXyzComponent((0.0193339 * r + 0.119192 * g + 0.9503041 * b) / 1.08883)
+  };
+};
+const xyzToLab = ({
+  x,
+  y,
+  z
+}) => ({
+  l: Math.max(116 * y - 16, 0),
+  a: 500 * (x - y),
+  b: 200 * (y - z)
+});
+const labToLch = ({
+  l,
+  a,
+  b
+}) => {
+  let h = (Math.atan2(b, a) * (180 / Math.PI) + 360) % 360;
+  const c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
+  if (Math.round(c * 10000) === 0) h = Number.NaN;
+  return {
+    l,
+    c,
+    h
+  };
+};
+const lchToLab = ({
+  l,
+  c,
+  h
+}) => {
+  const convertH = Number.isNaN(h) ? 0 : h * (Math.PI / 180);
+  return {
+    l,
+    a: Math.cos(convertH) * c,
+    b: Math.sin(convertH) * c
+  };
+};
+const labToXyz = ({
+  l,
+  a,
+  b
+}) => {
+  const convertComponent = c => c > 0.206896552 ? Math.pow(c, 3) : 0.12841855 * (c - 0.137931034);
+  const y = (l + 16) / 116;
+  const x = a / 500 + y;
+  const z = y - b / 200;
+  return {
+    x: convertComponent(x) * 0.95047,
+    y: convertComponent(y),
+    z: convertComponent(z) * 1.08883
+  };
+};
+const xyzToRgb = ({
+  x,
+  y,
+  z
+}) => {
+  const convertComponent = c => 255 * (c <= 0.00304 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055);
+  return {
+    r: clamp(convertComponent(3.2404542 * x - 1.5371385 * y - 0.4985314 * z), 0, 255),
+    g: clamp(convertComponent(-0.969266 * x + 1.8760108 * y + 0.041556 * z), 0, 255),
+    b: clamp(convertComponent(0.0556434 * x - 0.2040259 * y + 1.0572252 * z), 0, 255)
+  };
+};
+const rgbToLch = rgb => labToLch(xyzToLab(rgbToXyz(rgb)));
+const lchToRgb = lch => xyzToRgb(labToXyz(lchToLab(lch)));
+export const clampLightness = (color, newPercent) => {
+  const rgb = rgbFromHex(color);
+  if (rgb === null) {
+    return color;
+  }
+
+  // LCH (rather than HSL) gives the best results here as the L component in LCH is based on human color perception
+  const lch = rgbToLch(rgb);
+  lch.l = clamp(newPercent, 0, 100);
+  return rgbToHex(lchToRgb(lch));
+};
+const getLightness = color => {
+  const rgb = rgbFromHex(color);
+  if (rgb === null) {
+    return 0;
+  }
+  const lch = rgbToLch(rgb);
+  return lch.l;
+};
+export const getDarkModeLCHColor = currentBackgroundColor => {
+  const lightness = getLightness(currentBackgroundColor);
+  const newLightness = Math.abs(100 - lightness);
+  return clampLightness(currentBackgroundColor, newLightness).toUpperCase();
+};

package/dist/esm/index.js

@@ -1,3 +1,3 @@
 export { PanelType, AnnotationTypes, alignment, alignmentPositionMap, annotation, blockCard, blockquote, bodiedExtension, breakout, bulletList, bulletListSelector, caption, code, codeBlock, codeBlockToJSON, colorPalette, /** @deprecated [ED-15849] The extended palette is now rolled into the main one. Use `colorPalette` instead. */
 colorPaletteExtended, confluenceInlineComment, confluenceJiraIssue, confluenceUnsupportedBlock, confluenceUnsupportedInline, copyPrivateMediaAttributes, createSchema, dataConsumer, dataConsumerToJSON, date, decisionItem, decisionList, decisionListSelector, doc, em, embedCard, emoji, expand, expandToJSON, extension, fragment, fragmentToJSON, hardBreak, heading, image, indentation, inlineCard, inlineExtension, inlineNodes, layoutColumn, layoutSection, link, linkToJSON, listItem, media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaSingleWithWidthType, mediaSingleFull, mediaSingleSpec, mediaInline, mediaSingleToJSON, mediaToJSON, mention, mentionToJSON, nestedExpand, orderedList, orderedListSelector, orderedListWithOrder, panel, paragraph, placeholder, rule, sanitizeNodes, getCellAttrs, getCellDomAttrs, status, strike, strong, subsup, table, tableWithCustomWidth, tableBackgroundBorderColor, tableBackgroundColorNames, tableBackgroundColorPalette, tableCell, tableCellContentDomSelector, tableCellContentWrapperSelector, tableCellSelector, tableHeader, tableHeaderSelector, tablePrefixSelector, tableRow, tableToJSON, taskItem, taskList, taskListSelector, text, textColor, toJSONTableCell, toJSONTableHeader, typeAheadQuery, underline, unknownBlock, unsupportedBlock, unsupportedInline, unsupportedNodeTypesForMediaCards, buildAnnotationMarkDataAttributes, AnnotationMarkStates, unsupportedMark, unsupportedNodeAttribute, border, borderColorPalette, extensionFrame, multiBodiedExtension } from './schema';
-export { B100, B400, B50, B500, B75, G200, G300, G400, G50, G500, G75, N0, N20, N200, N30, N300, N40, N50, N500, N60, N80, N800, N90, P100, P300, P400, P50, P500, P75, R100, R300, R400, R50, R500, R75, T100, T300, T50, T500, T75, Y200, Y400, Y50, Y500, Y75, acNameToEmoji, acShortcutToEmoji, emojiIdToAcName, generateUuid, getEmojiAcName, getLinkMatch, hexToRgb, hexToRgba, isHex, isRgb, isSafeUrl, linkify, linkifyMatch, normalizeHexColor, normalizeUrl, rgbToHex, uuid } from './utils';
+export { B100, B400, B50, B500, B75, G200, G300, G400, G50, G500, G75, N0, N20, N200, N30, N300, N40, N50, N500, N60, N80, N800, N90, P100, P300, P400, P50, P500, P75, R100, R300, R400, R50, R500, R75, T100, T300, T50, T500, T75, Y200, Y400, Y50, Y500, Y75, acNameToEmoji, acShortcutToEmoji, emojiIdToAcName, generateUuid, getEmojiAcName, getLinkMatch, hexToRgb, hexToRgba, isHex, isRgb, isSafeUrl, linkify, linkifyMatch, normalizeHexColor, normalizeUrl, rgbToHex, uuid, getDarkModeLCHColor } from './utils';

package/dist/esm/schema/marks/text-color.js

@@ -3,6 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { hexToEditorTextPaletteColor } from '../../utils/editor-palette';
 import { COLOR } from '../groups';
 import { rgbToHex, N0, N80, P50, P300, P500, T75, T300, T500, G75, G300, G500, R75, R300, R500, Y75, Y200, Y400, B75, B100, B500, isHex, isRgb } from '../../utils/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getDarkModeLCHColor } from '../../utils/lch-color-inversion';
 
 /**
  * @name textColor_mark
@@ -188,7 +190,12 @@ export var textColor = {
     } else {
       if (getGlobalTheme().colorMode === 'dark') {
         // if we have a custom color, we need to check if we are in dark mode
-        paletteColorValue = invertCustomColor(mark.attrs.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(mark.attrs.color);
+        } else {
+          paletteColorValue = invertCustomColor(mark.attrs.color);
+        }
       } else {
         // if we are in light mode, we can just set the color
         paletteColorValue = mark.attrs.color;

package/dist/esm/schema/nodes/multi-bodied-extension.js

@@ -15,7 +15,7 @@ export var extensionFrame = {
   isolating: true,
   definingAsContext: false,
   definingForContent: true,
-  selectable: true,
+  selectable: false,
   attrs: {},
   parseDOM: [{
     context: 'extensionFrame//',

package/dist/esm/schema/nodes/tableNodes.js

@@ -5,6 +5,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { hexToEditorBackgroundPaletteRawValue } from '../../utils/editor-palette';
 import { B100, B50, B75, G200, G50, G75, hexToRgba, isHex, isRgb, N0, N20, N60, N800, P100, P50, P75, R100, R50, R75, rgbToHex, T100, T50, T75, Y200, Y50, Y75 } from '../../utils/colors';
 import { uuid } from '../../utils/uuid';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getDarkModeLCHColor } from '../../utils/lch-color-inversion';
 export var tablePrefixSelector = 'pm-table';
 export var tableCellSelector = "".concat(tablePrefixSelector, "-cell-content-wrap");
 export var tableHeaderSelector = "".concat(tablePrefixSelector, "-header-content-wrap");
@@ -156,7 +158,12 @@ export var getCellDomAttrs = function getCellDomAttrs(node) {
         // if we have a custom color, we need to check if we are in dark mode
         if (getGlobalTheme().colorMode === 'dark') {
           // if we have a custom color, we need to check if we are in dark mode
-          attrs.style = "background-color: ".concat(invertCustomColor(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')) {
+            attrs.style = "background-color: ".concat(getDarkModeLCHColor(color), ";");
+          } else {
+            attrs.style = "background-color: ".concat(invertCustomColor(color), ";");
+          }
         } else {
           // if we are in light mode, we can just set the color
           attrs.style = "background-color: ".concat(background, ";");

package/dist/esm/utils/index.js

@@ -1,4 +1,5 @@
 export { acNameToEmoji, acShortcutToEmoji, emojiIdToAcName, getEmojiAcName } from './confluence/emoji';
 export { generateUuid, uuid } from './uuid';
 export { B100, B400, B50, B500, B75, G200, G300, G400, G50, G500, G75, N0, N20, N200, N30, N300, N40, N50, N500, N60, N80, N800, N90, P100, P300, P400, P50, P500, P75, R100, R300, R400, R50, R500, R75, T100, T300, T50, T500, T75, Y200, Y400, Y50, Y500, Y75, hexToRgb, hexToRgba, isHex, isRgb, normalizeHexColor, rgbToHex } from './colors';
-export { getLinkMatch, isSafeUrl, normalizeUrl, linkify, linkifyMatch } from './url';
+export { getLinkMatch, isSafeUrl, normalizeUrl, linkify, linkifyMatch } from './url';
+export { getDarkModeLCHColor } from './lch-color-inversion';

package/dist/esm/utils/lch-color-inversion.js

@@ -0,0 +1,142 @@
+// https://en.wikipedia.org/wiki/HCL_color_space
+
+// https://en.wikipedia.org/wiki/CIE_1931_color_space#CIE_xy_chromaticity_diagram_and_the_CIE_xyY_color_space
+
+// https://en.wikipedia.org/wiki/CIELAB_color_space
+
+var clamp = function clamp(i, min, max) {
+  return Math.round(Math.min(Math.max(i, min), max));
+};
+var expandShorthandHex = function expandShorthandHex(input) {
+  return input.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function (m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+};
+var rgbFromHex = function rgbFromHex(input) {
+  var fullHex = expandShorthandHex(input);
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(fullHex);
+  return result === null ? null : {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  };
+};
+var rgbToHex = function rgbToHex(_ref) {
+  var r = _ref.r,
+    g = _ref.g,
+    b = _ref.b;
+  var convertComponent = function convertComponent(c) {
+    var cBase16 = c.toString(16);
+    return cBase16.length === 1 ? "0".concat(cBase16) : cBase16;
+  };
+  return "#".concat(convertComponent(r)).concat(convertComponent(g)).concat(convertComponent(b));
+};
+var rgbToXyz = function rgbToXyz(rgb) {
+  var convertRgbComponent = function convertRgbComponent(c) {
+    return c > 0.04045 ? Math.pow((c + 0.055) / 1.055, 2.4) : c / 12.92;
+  };
+  var convertXyzComponent = function convertXyzComponent(c) {
+    return c > 0.008856452 ? Math.pow(c, 1 / 3) : c / 0.12841855 + 0.137931034;
+  };
+  var r = convertRgbComponent(rgb.r / 255);
+  var g = convertRgbComponent(rgb.g / 255);
+  var b = convertRgbComponent(rgb.b / 255);
+  return {
+    x: convertXyzComponent((0.4124564 * r + 0.3575761 * g + 0.1804375 * b) / 0.95047),
+    y: convertXyzComponent(0.2126729 * r + 0.7151522 * g + 0.072175 * b),
+    z: convertXyzComponent((0.0193339 * r + 0.119192 * g + 0.9503041 * b) / 1.08883)
+  };
+};
+var xyzToLab = function xyzToLab(_ref2) {
+  var x = _ref2.x,
+    y = _ref2.y,
+    z = _ref2.z;
+  return {
+    l: Math.max(116 * y - 16, 0),
+    a: 500 * (x - y),
+    b: 200 * (y - z)
+  };
+};
+var labToLch = function labToLch(_ref3) {
+  var l = _ref3.l,
+    a = _ref3.a,
+    b = _ref3.b;
+  var h = (Math.atan2(b, a) * (180 / Math.PI) + 360) % 360;
+  var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
+  if (Math.round(c * 10000) === 0) h = Number.NaN;
+  return {
+    l: l,
+    c: c,
+    h: h
+  };
+};
+var lchToLab = function lchToLab(_ref4) {
+  var l = _ref4.l,
+    c = _ref4.c,
+    h = _ref4.h;
+  var convertH = Number.isNaN(h) ? 0 : h * (Math.PI / 180);
+  return {
+    l: l,
+    a: Math.cos(convertH) * c,
+    b: Math.sin(convertH) * c
+  };
+};
+var labToXyz = function labToXyz(_ref5) {
+  var l = _ref5.l,
+    a = _ref5.a,
+    b = _ref5.b;
+  var convertComponent = function convertComponent(c) {
+    return c > 0.206896552 ? Math.pow(c, 3) : 0.12841855 * (c - 0.137931034);
+  };
+  var y = (l + 16) / 116;
+  var x = a / 500 + y;
+  var z = y - b / 200;
+  return {
+    x: convertComponent(x) * 0.95047,
+    y: convertComponent(y),
+    z: convertComponent(z) * 1.08883
+  };
+};
+var xyzToRgb = function xyzToRgb(_ref6) {
+  var x = _ref6.x,
+    y = _ref6.y,
+    z = _ref6.z;
+  var convertComponent = function convertComponent(c) {
+    return 255 * (c <= 0.00304 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055);
+  };
+  return {
+    r: clamp(convertComponent(3.2404542 * x - 1.5371385 * y - 0.4985314 * z), 0, 255),
+    g: clamp(convertComponent(-0.969266 * x + 1.8760108 * y + 0.041556 * z), 0, 255),
+    b: clamp(convertComponent(0.0556434 * x - 0.2040259 * y + 1.0572252 * z), 0, 255)
+  };
+};
+var rgbToLch = function rgbToLch(rgb) {
+  return labToLch(xyzToLab(rgbToXyz(rgb)));
+};
+var lchToRgb = function lchToRgb(lch) {
+  return xyzToRgb(labToXyz(lchToLab(lch)));
+};
+export var clampLightness = function clampLightness(color, newPercent) {
+  var rgb = rgbFromHex(color);
+  if (rgb === null) {
+    return color;
+  }
+
+  // LCH (rather than HSL) gives the best results here as the L component in LCH is based on human color perception
+  var lch = rgbToLch(rgb);
+  lch.l = clamp(newPercent, 0, 100);
+  return rgbToHex(lchToRgb(lch));
+};
+var getLightness = function getLightness(color) {
+  var rgb = rgbFromHex(color);
+  if (rgb === null) {
+    return 0;
+  }
+  var lch = rgbToLch(rgb);
+  return lch.l;
+};
+export var getDarkModeLCHColor = function getDarkModeLCHColor(currentBackgroundColor) {
+  var lightness = getLightness(currentBackgroundColor);
+  var newLightness = Math.abs(100 - lightness);
+  return clampLightness(currentBackgroundColor, newLightness).toUpperCase();
+};

package/dist/types/index.d.ts

@@ -2,5 +2,5 @@ export { PanelType, AnnotationTypes, alignment, alignmentPositionMap, annotation
 /** @deprecated [ED-15849] The extended palette is now rolled into the main one. Use `colorPalette` instead. */
 colorPaletteExtended, confluenceInlineComment, confluenceJiraIssue, confluenceUnsupportedBlock, confluenceUnsupportedInline, copyPrivateMediaAttributes, createSchema, dataConsumer, dataConsumerToJSON, date, decisionItem, decisionList, decisionListSelector, doc, em, embedCard, emoji, expand, expandToJSON, extension, fragment, fragmentToJSON, hardBreak, heading, image, indentation, inlineCard, inlineExtension, inlineNodes, layoutColumn, layoutSection, link, linkToJSON, listItem, media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaSingleWithWidthType, mediaSingleFull, mediaSingleSpec, mediaInline, mediaSingleToJSON, mediaToJSON, mention, mentionToJSON, nestedExpand, orderedList, orderedListSelector, orderedListWithOrder, panel, paragraph, placeholder, rule, sanitizeNodes, getCellAttrs, getCellDomAttrs, status, strike, strong, subsup, table, tableWithCustomWidth, tableBackgroundBorderColor, tableBackgroundColorNames, tableBackgroundColorPalette, tableCell, tableCellContentDomSelector, tableCellContentWrapperSelector, tableCellSelector, tableHeader, tableHeaderSelector, tablePrefixSelector, tableRow, tableToJSON, taskItem, taskList, taskListSelector, text, textColor, toJSONTableCell, toJSONTableHeader, typeAheadQuery, underline, unknownBlock, unsupportedBlock, unsupportedInline, unsupportedNodeTypesForMediaCards, buildAnnotationMarkDataAttributes, AnnotationMarkStates, unsupportedMark, unsupportedNodeAttribute, border, borderColorPalette, extensionFrame, multiBodiedExtension, } from './schema';
 export type { AlignmentAttributes, AlignmentMarkDefinition, AnnotationMarkAttributes, AnnotationMarkDefinition, BlockCardDefinition, BlockContent, BlockQuoteDefinition, BodiedExtensionDefinition, BreakoutMarkAttrs, BreakoutMarkDefinition, BulletListDefinition, CaptionDefinition, CardAttributes, CellAttributes, CodeBlockAttrs, CodeBlockBaseDefinition, CodeBlockDefinition, CodeBlockWithMarksDefinition, CodeDefinition, DatasourceAttributes, DatasourceAttributeProperties, DataConsumerAttributes, DataConsumerDefinition, DataType, DateDefinition, DecisionItemDefinition, DecisionListDefinition, DocNode, EmbedCardDefinition, EmbedCardAttributes, EmDefinition, EmojiAttributes, EmojiDefinition, ExpandDefinition, ExtensionDefinition, ExtensionLayout, ExternalMediaAttributes, FragmentAttributes, FragmentDefinition, HardBreakDefinition, HeadingBaseDefinition, HeadingDefinition, HeadingWithAlignmentDefinition, HeadingWithIndentationDefinition, HeadingWithMarksDefinition, IndentationMarkAttributes, IndentationMarkDefinition, Inline, InlineAtomic, InlineCardDefinition, InlineCode, InlineExtensionDefinition, InlineFormattedText, InlineLinkText, LayoutColumnDefinition, LayoutSectionDefinition, LayoutSectionFullDefinition, LayoutSectionWithSingleColumnDefinition, LinkAttributes, LinkDefinition, ListItemArray, ListItemDefinition, MarksObject, MediaADFAttrs, MediaAttributes, MediaInlineAttributes, MediaInlineDefinition, MediaBaseAttributes, MediaDefinition, MediaDisplayType, MediaGroupDefinition, MediaSingleDefinition, MediaType, MentionAttributes, MentionDefinition, MentionUserType, NestedExpandContent, NestedExpandDefinition, NoMark, NonNestableBlockContent, OrderedListDefinition, PanelAttributes, PanelDefinition, ParagraphBaseDefinition, ParagraphDefinition, ParagraphWithAlignmentDefinition, ParagraphWithIndentationDefinition, ParagraphWithMarksDefinition, PlaceholderDefinition, RuleDefinition, StatusDefinition, StrikeDefinition, StrongDefinition, SubSupAttributes, SubSupDefinition, TableAttributes, TableCellDefinition, TableDefinition, TableHeaderDefinition, TableLayout, TableRowDefinition, TaskItemDefinition, TaskListContent, TaskListDefinition, TextColorAttributes, TextColorDefinition, TextDefinition, UnderlineDefinition, UrlType, AnnotationId, RichMediaAttributes, ExtendedMediaAttributes, RichMediaLayout, AnnotationDataAttributes, CellDomAttrs, BorderMarkAttributes, BorderMarkDefinition, MultiBodiedExtensionDefinition, ExtensionFrameDefinition, } from './schema';
-export { B100, B400, B50, B500, B75, G200, G300, G400, G50, G500, G75, N0, N20, N200, N30, N300, N40, N50, N500, N60, N80, N800, N90, P100, P300, P400, P50, P500, P75, R100, R300, R400, R50, R500, R75, T100, T300, T50, T500, T75, Y200, Y400, Y50, Y500, Y75, acNameToEmoji, acShortcutToEmoji, emojiIdToAcName, generateUuid, getEmojiAcName, getLinkMatch, hexToRgb, hexToRgba, isHex, isRgb, isSafeUrl, linkify, linkifyMatch, normalizeHexColor, normalizeUrl, rgbToHex, uuid, } from './utils';
+export { B100, B400, B50, B500, B75, G200, G300, G400, G50, G500, G75, N0, N20, N200, N30, N300, N40, N50, N500, N60, N80, N800, N90, P100, P300, P400, P50, P500, P75, R100, R300, R400, R50, R500, R75, T100, T300, T50, T500, T75, Y200, Y400, Y50, Y500, Y75, acNameToEmoji, acShortcutToEmoji, emojiIdToAcName, generateUuid, getEmojiAcName, getLinkMatch, hexToRgb, hexToRgba, isHex, isRgb, isSafeUrl, linkify, linkifyMatch, normalizeHexColor, normalizeUrl, rgbToHex, uuid, getDarkModeLCHColor, } from './utils';
 export type { Match, NameToEmoji } from './utils';

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

@@ -4,3 +4,4 @@ export { generateUuid, uuid } from './uuid';
 export { B100, B400, B50, B500, B75, G200, G300, G400, G50, G500, G75, N0, N20, N200, N30, N300, N40, N50, N500, N60, N80, N800, N90, P100, P300, P400, P50, P500, P75, R100, R300, R400, R50, R500, R75, T100, T300, T50, T500, T75, Y200, Y400, Y50, Y500, Y75, hexToRgb, hexToRgba, isHex, isRgb, normalizeHexColor, rgbToHex, } from './colors';
 export { getLinkMatch, isSafeUrl, normalizeUrl, linkify, linkifyMatch, } from './url';
 export type { Match } from './url';
+export { getDarkModeLCHColor } from './lch-color-inversion';

package/dist/types/utils/lch-color-inversion.d.ts

@@ -0,0 +1,2 @@
+export declare const clampLightness: (color: string, newPercent: number) => string;
+export declare const getDarkModeLCHColor: (currentBackgroundColor: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/adf-schema",
-  "version": "33.2.3",
+  "version": "34.0.1",
   "description": "Shared package that contains the ADF-schema (json) and ProseMirror node/mark specs",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,6 +41,7 @@
     "memoize-one": "^6.0.0"
   },
   "devDependencies": {
+    "@atlaskit/platform-feature-flags": "^0.2.4",
     "@atlassian/adf-schema-json": "^1.2.0",
     "@babel/cli": "^7.22.9",
     "@babel/core": "^7.22.9",