@atlaskit/adf-schema 35.11.0 → 35.12.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/adf-schema
 
+## 35.12.1
+
+### Patch Changes
+
+- aea8879: NO-ISSUE Fixed a serialisation bug resulting in invalid ADF JSON in mention nodes
+
+## 35.12.0
+
+### Minor Changes
+
+- 24014bb: [ED-23064] Added the background color mark
+
 ## 35.11.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -321,6 +321,18 @@ Object.defineProperty(exports, "annotation", {
     return _schema.annotation;
   }
 });
+Object.defineProperty(exports, "backgroundColor", {
+  enumerable: true,
+  get: function get() {
+    return _schema.backgroundColor;
+  }
+});
+Object.defineProperty(exports, "backgroundColorPalette", {
+  enumerable: true,
+  get: function get() {
+    return _schema.backgroundColorPalette;
+  }
+});
 Object.defineProperty(exports, "blockCard", {
   enumerable: true,
   get: function get() {

package/dist/cjs/schema/create-schema.js

@@ -263,6 +263,9 @@ var marksInOrder = [{
 }, {
   name: 'border',
   spec: _marks.border
+}, {
+  name: 'backgroundColor',
+  spec: _marks.backgroundColor
 }, {
   name: 'unsupportedMark',
   spec: _marks.unsupportedMark

package/dist/cjs/schema/index.js

@@ -39,6 +39,18 @@ Object.defineProperty(exports, "annotation", {
     return _marks.annotation;
   }
 });
+Object.defineProperty(exports, "backgroundColor", {
+  enumerable: true,
+  get: function get() {
+    return _marks.backgroundColor;
+  }
+});
+Object.defineProperty(exports, "backgroundColorPalette", {
+  enumerable: true,
+  get: function get() {
+    return _marks.backgroundColorPalette;
+  }
+});
 Object.defineProperty(exports, "blockCard", {
   enumerable: true,
   get: function get() {

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

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.backgroundColorPalette = exports.backgroundColor = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _editorPalette = require("../../utils/editor-palette");
+var _groups = require("../groups");
+var _colors = require("../../utils/colors");
+var _textColor = require("./text-color");
+var _lchColorInversion = require("../../utils/lch-color-inversion");
+/**
+ * @name backgroundColor_mark
+ */
+
+var colorArrayPalette = [[_colors.Neutral300, 'Gray'],
+// token: color.background.accent.gray.subtler
+[_colors.T200, 'Teal'],
+// token: color.background.accent.teal.subtler
+[_colors.L200, 'Lime'],
+// token: color.background.accent.lime.subtler
+[_colors.O200, 'Orange'],
+// token: color.background.accent.orange.subtler
+[_colors.M200, 'Magenta'],
+// token: color.background.accent.magenta.subtler
+[_colors.P200, 'Purple'] // token: color.background.accent.purple.subtler
+];
+
+// @see https://product-fabric.atlassian.net/wiki/spaces/E/pages/55979455/Colour+picker+decisions#Colourpickerdecisions-Visualdesigndecisions
+var backgroundColorPalette = exports.backgroundColorPalette = new Map();
+colorArrayPalette.forEach(function (_ref) {
+  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    color = _ref2[0],
+    label = _ref2[1];
+  return backgroundColorPalette.set(color.toLowerCase(), label);
+});
+var backgroundColor = exports.backgroundColor = {
+  attrs: {
+    color: {}
+  },
+  inclusive: true,
+  group: _groups.COLOR,
+  parseDOM: [{
+    style: 'background-color',
+    getAttrs: function getAttrs(maybeValue) {
+      var value = maybeValue;
+      var hexColor;
+      if (value.match(/^rgb/i)) {
+        hexColor = (0, _colors.rgbToHex)(value);
+      } else if (value[0] === '#') {
+        hexColor = value.toLowerCase();
+      }
+      // else handle other colour formats
+      return hexColor && backgroundColorPalette.has(hexColor) ? {
+        color: hexColor
+      } : false;
+    }
+  },
+  // This rule ensures when loading from a renderer or editor where the
+  // presented text color does not match the stored hex color -- that the
+  // text color is preserved.
+  //
+  // This is used to support the work-around that converts the hex color to
+  // a design system token to enable light / dark mode (through a CSS variable --custom-palette-color)
+  {
+    tag: '.fabric-background-color-mark',
+    getAttrs: function getAttrs(maybeElement) {
+      if (!(maybeElement instanceof HTMLElement)) {
+        return false;
+      }
+      var hexColor = maybeElement.dataset.backgroundCustomColor;
+      return hexColor && backgroundColorPalette.has(hexColor) ? {
+        color: hexColor
+      } : false;
+    }
+  }],
+  toDOM: function toDOM(mark) {
+    var paletteColorValue;
+    /**
+     * Documents can contain custom colors when content has been migrated from the old editor, or created via APIs.
+     *
+     * This behaviour predates the introduction of dark mode.
+     *
+     * Without the inversion logic below, text with custom colors, can be hard to read when the user loads the page in dark mode.
+     *
+     * This introduces inversion of the presentation of the custom text colors when the user is in dark mode.
+     *
+     * This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
+     * how we detect text colors copied from external editor sources. Where we load the background color from a
+     * separate attribute (data-text-custom-color), instead of the inline style.
+     *
+     * See the following document for more details on this behaviour
+     * https://hello.atlassian.net/wiki/spaces/CCECO/pages/2908658046/Unsupported+custom+text+colors+in+dark+theme+Editor+Job+Story
+     */
+    var tokenColor = (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(mark.attrs.color);
+    if (tokenColor) {
+      paletteColorValue = tokenColor;
+    } else {
+      if ((0, _textColor.getGlobalTheme)().colorMode === 'dark') {
+        // if we have a custom color, we need to check if we are in dark mode
+        paletteColorValue = (0, _lchColorInversion.getDarkModeLCHColor)(mark.attrs.color);
+      } else {
+        // if we are in light mode, we can just set the color
+        paletteColorValue = mark.attrs.color;
+      }
+    }
+    return ['span', (0, _defineProperty2.default)({
+      class: 'fabric-background-color-mark',
+      // Editor common has a common style which uses this css variable as the value for
+      // the color property using the `fabric-text-background-color-mark` selector applied above.
+      style: "--custom-palette-color: ".concat(paletteColorValue)
+    }, 'data-background-custom-color', mark.attrs.color)];
+  }
+};

package/dist/cjs/schema/marks/index.js

@@ -33,6 +33,18 @@ Object.defineProperty(exports, "annotation", {
     return _annotation.annotation;
   }
 });
+Object.defineProperty(exports, "backgroundColor", {
+  enumerable: true,
+  get: function get() {
+    return _backgroundColor.backgroundColor;
+  }
+});
+Object.defineProperty(exports, "backgroundColorPalette", {
+  enumerable: true,
+  get: function get() {
+    return _backgroundColor.backgroundColorPalette;
+  }
+});
 Object.defineProperty(exports, "border", {
   enumerable: true,
   get: function get() {
@@ -195,4 +207,5 @@ var _unsupportedMark = require("./unsupported-mark");
 var _unsupportedNodeAttributes = require("./unsupported-node-attributes");
 var _dataConsumer = require("./data-consumer");
 var _fragment = require("./fragment");
-var _border = require("./border");
+var _border = require("./border");
+var _backgroundColor = require("./background-color");

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textColor = exports.setGlobalTheme = exports.colorPaletteExtended = exports.colorPalette = void 0;
+exports.textColor = exports.setGlobalTheme = exports.getGlobalTheme = exports.colorPaletteExtended = exports.colorPalette = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _editorPalette = require("../../utils/editor-palette");
@@ -79,7 +79,7 @@ var setGlobalTheme = exports.setGlobalTheme = function setGlobalTheme(theme) {
 // This is a minimal duplication of the method from @atlaskit/tokens
 // to minimise the number of dependencies required as these changes are expected
 // to be patched onto CR8.
-var getGlobalTheme = function getGlobalTheme() {
+var getGlobalTheme = exports.getGlobalTheme = function getGlobalTheme() {
   // This should only be hit during tests.
   //
   // At time of writing Jest mocks are not working in this repository.
@@ -161,7 +161,7 @@ var textColor = exports.textColor = {
      */
     var tokenColor = (0, _editorPalette.hexToEditorTextPaletteColor)(mark.attrs.color);
     if (tokenColor) {
-      paletteColorValue = (0, _editorPalette.hexToEditorTextPaletteColor)(mark.attrs.color) || mark.attrs.color;
+      paletteColorValue = tokenColor;
     } else {
       if (getGlobalTheme().colorMode === 'dark') {
         // if we have a custom color, we need to check if we are in dark mode

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

@@ -77,7 +77,7 @@ var mention = exports.mention = {
   }
 };
 var isOptional = function isOptional(key) {
-  return ['userType'].indexOf(key) > -1;
+  return ['userType', 'localId'].indexOf(key) > -1;
 };
 var toJSON = exports.toJSON = function toJSON(node) {
   return {

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

@@ -34,7 +34,7 @@ var paragraph = exports.paragraph = {
   selectable: false,
   content: 'inline*',
   group: 'block',
-  marks: 'strong code em link border strike subsup textColor typeAheadQuery underline confluenceInlineComment action annotation unsupportedMark unsupportedNodeAttribute dataConsumer fragment',
+  marks: 'strong code em link border strike subsup textColor typeAheadQuery underline confluenceInlineComment action annotation unsupportedMark unsupportedNodeAttribute dataConsumer fragment backgroundColor',
   parseDOM: [{
     tag: 'p'
   }],

package/dist/cjs/utils/colors.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Y75 = exports.Y500 = exports.Y50 = exports.Y400 = exports.Y200 = exports.T75 = exports.T500 = exports.T50 = exports.T300 = exports.T100 = exports.R75 = exports.R500 = exports.R50 = exports.R400 = exports.R300 = exports.R100 = exports.P75 = exports.P500 = exports.P50 = exports.P400 = exports.P300 = exports.P100 = exports.N90 = exports.N800 = exports.N80 = exports.N600 = exports.N60 = exports.N500 = exports.N50 = exports.N40 = exports.N300A = exports.N300 = exports.N30 = exports.N200 = exports.N20 = exports.N1000 = exports.N0 = exports.G75 = exports.G500 = exports.G50 = exports.G400 = exports.G300 = exports.G200 = exports.B75 = exports.B500 = exports.B50 = exports.B400 = exports.B100 = void 0;
+exports.Y75 = exports.Y500 = exports.Y50 = exports.Y400 = exports.Y200 = exports.T75 = exports.T500 = exports.T50 = exports.T300 = exports.T200 = exports.T100 = exports.R75 = exports.R500 = exports.R50 = exports.R400 = exports.R300 = exports.R100 = exports.P75 = exports.P500 = exports.P50 = exports.P400 = exports.P300 = exports.P200 = exports.P100 = exports.O200 = exports.Neutral300 = exports.N90 = exports.N800 = exports.N80 = exports.N600 = exports.N60 = exports.N500 = exports.N50 = exports.N40 = exports.N300A = exports.N300 = exports.N30 = exports.N200 = exports.N20 = exports.N1000 = exports.N0 = exports.M200 = exports.L200 = exports.G75 = exports.G500 = exports.G50 = exports.G400 = exports.G300 = exports.G200 = exports.B75 = exports.B500 = exports.B50 = exports.B400 = exports.B100 = void 0;
 exports.hexToRgb = hexToRgb;
 exports.hexToRgba = hexToRgba;
 exports.isHex = isHex;
@@ -45,6 +45,7 @@ var B75 = exports.B75 = '#B3D4FF';
 var B100 = exports.B100 = '#4C9AFF';
 var B400 = exports.B400 = '#0052CC';
 var B500 = exports.B500 = '#0747A6';
+var L200 = exports.L200 = '#D3F1A7';
 var N0 = exports.N0 = '#FFFFFF';
 var N20 = exports.N20 = '#F4F5F7';
 var N30 = exports.N30 = '#EBECF0';
@@ -55,20 +56,25 @@ var N80 = exports.N80 = '#97A0AF';
 var N90 = exports.N90 = '#8993A4';
 var N200 = exports.N200 = '#6B778C';
 var N300 = exports.N300 = '#5E6C84';
+var Neutral300 = exports.Neutral300 = '#DCDFE4';
 var N300A = exports.N300A = '#091E4224';
 var N500 = exports.N500 = '#42526E';
 var N600 = exports.N600 = '#758195';
 var N800 = exports.N800 = '#172B4D';
 var N1000 = exports.N1000 = '#172B4D';
+var M200 = exports.M200 = '#FDD0EC';
+var O200 = exports.O200 = '#FEDEC8';
 var P50 = exports.P50 = '#EAE6FF';
 var P75 = exports.P75 = '#C0B6F2';
 var P100 = exports.P100 = '#998DD9';
+var P200 = exports.P200 = '#DFD8FD';
 var P300 = exports.P300 = '#6554C0';
 var P400 = exports.P400 = '#5243AA';
 var P500 = exports.P500 = '#403294';
 var T50 = exports.T50 = '#E6FCFF';
 var T75 = exports.T75 = '#B3F5FF';
 var T100 = exports.T100 = '#79E2F2';
+var T200 = exports.T200 = '#C6EDFB';
 var T300 = exports.T300 = '#00B8D9';
 var T500 = exports.T500 = '#008DA6';
 

package/dist/cjs/utils/editor-palette.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.editorTextPalette = exports.editorBorderPalette = exports.editorBackgroundPalette = void 0;
 exports.hexToEditorBackgroundPaletteRawValue = hexToEditorBackgroundPaletteRawValue;
 exports.hexToEditorBorderPaletteColor = hexToEditorBorderPaletteColor;
+exports.hexToEditorTextBackgroundPaletteColor = hexToEditorTextBackgroundPaletteColor;
 exports.hexToEditorTextPaletteColor = hexToEditorTextPaletteColor;
+exports.textBackgroundColorPalette = void 0;
 /**
  * This takes an adf hex color and returns a matching border palette color.
  *
@@ -105,6 +107,42 @@ var editorTextPalette = exports.editorTextPalette = {
   '#172B4D': 'var(--ds-text, #172B4D)'
 };
 
+/**
+ * This takes an ADF hex color and returns a matching text background palette color.
+ *
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+ *
+ * Example usage
+ * ```tsx
+ * const cssValue = hexToEditorTextBackgroundPaletteColor('#0747A6');
+ * //     ^? const cssValue: string
+ * <span style={{backgroundColor: cssValue}} />
+ * ```
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
+ * The exact output of this function is an implementation detail and should only be used when rendering
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ */
+function hexToEditorTextBackgroundPaletteColor(hexColor) {
+  // Ts ignore was used to allow use of conditional return type
+  // (preferring better type on consumption over safety in implementation)
+  return textBackgroundColorPalette[hexColor.toUpperCase()];
+}
+var textBackgroundColorPalette = exports.textBackgroundColorPalette = {
+  /** Gray - light */
+  '#DCDFE4': 'var(--ds-background-accent-gray-subtler, #DCDFE4)',
+  /** Teal - light */
+  '#C6EDFB': 'var(--ds-background-accent-teal-subtler, #C6EDFB)',
+  /** Lime - light */
+  '#D3F1A7': 'var(--ds-background-accent-lime-subtler, #D3F1A7)',
+  /** Orange - light */
+  '#FEDEC8': 'var(--ds-background-accent-orange-subtler, #FEDEC8)',
+  /** Magenta - light */
+  '#FDD0EC': 'var(--ds-background-accent-magenta-subtler, #FDD0EC)',
+  /** Purple - light */
+  '#DFD8FD': 'var(--ds-background-accent-purple-subtler, #DFD8FD)'
+};
 /**
  * Takes an ADF hex color and returns the rendered hex code for the associated background palette design token using getTokenValue.
  * If the provided color does not exist in the Editor color palette, this function returns undefined.

package/dist/es2019/index.js

@@ -1,3 +1,3 @@
 export { PanelType, AnnotationTypes, alignment, alignmentPositionMap, annotation, blockCard, blockquote, blockquoteWithList, 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, listItemWithTask, media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaSingleWithWidthType, mediaSingleFull, mediaSingleSpec, mediaInline, mediaSingleToJSON, mediaToJSON, mention, mentionToJSON, nestedExpand, extendedNestedExpand, orderedList, orderedListSelector, orderedListWithOrder, panel, extendedPanel, paragraph, placeholder, rule, sanitizeNodes, getCellAttrs, getCellDomAttrs, status, strike, strong, subsup, table, tableStage0, 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';
+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, listItemWithTask, media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaSingleWithWidthType, mediaSingleFull, mediaSingleSpec, mediaInline, mediaSingleToJSON, mediaToJSON, mention, mentionToJSON, nestedExpand, extendedNestedExpand, orderedList, orderedListSelector, orderedListWithOrder, panel, extendedPanel, paragraph, placeholder, rule, sanitizeNodes, getCellAttrs, getCellDomAttrs, status, strike, strong, subsup, table, tableStage0, 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, backgroundColor, backgroundColorPalette } 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, getDarkModeLCHColor } from './utils';

package/dist/es2019/schema/create-schema.js

@@ -1,6 +1,6 @@
 import { Schema } from '@atlaskit/editor-prosemirror/model';
 import { COLOR, FONT_STYLE, SEARCH_QUERY, LINK } from './groups';
-import { link, em, strong, textColor, strike, subsup, underline, code, typeAheadQuery, confluenceInlineComment, breakout, alignment, indentation, annotation, unsupportedMark, unsupportedNodeAttribute, dataConsumer, fragment, border } from './marks';
+import { link, em, strong, textColor, strike, subsup, underline, code, typeAheadQuery, confluenceInlineComment, breakout, alignment, indentation, annotation, unsupportedMark, unsupportedNodeAttribute, dataConsumer, fragment, border, backgroundColor } from './marks';
 import { confluenceJiraIssue, confluenceUnsupportedBlock, confluenceUnsupportedInline, doc, paragraph, text, bulletList, orderedListWithOrder, listItemWithTask, heading, blockquoteWithList, codeBlock, extendedPanel, rule, image, mention, media, mediaInline, mediaSingleFull, mediaGroup, hardBreak, emoji, table, tableCell, tableHeader, tableRow, decisionList, decisionItem, taskList, taskItem, unknownBlock, extension, inlineExtension, bodiedExtension, multiBodiedExtension, extensionFrame, date, placeholder, layoutSection, layoutColumn, inlineCard, blockCard, unsupportedBlock, unsupportedInline, status, expand, extendedNestedExpand, embedCard, caption } from './nodes';
 function addItems(builtInItems, config, customSpecs = {}) {
   if (!config) {
@@ -248,6 +248,9 @@ const marksInOrder = [{
 }, {
   name: 'border',
   spec: border
+}, {
+  name: 'backgroundColor',
+  spec: backgroundColor
 }, {
   name: 'unsupportedMark',
   spec: unsupportedMark

package/dist/es2019/schema/index.js

@@ -1,6 +1,6 @@
 export { PanelType, blockCard, blockquote, blockquoteWithList, bodiedExtension, bulletList, bulletListSelector, caption, codeBlock, codeBlockToJSON, confluenceJiraIssue, confluenceUnsupportedBlock, confluenceUnsupportedInline, copyPrivateMediaAttributes, date, decisionItem, decisionList, decisionListSelector, doc, embedCard, emoji, expand, expandToJSON, extension, hardBreak, heading, image, inlineCard, inlineExtension, layoutColumn, layoutSection, layoutSectionWithSingleColumn, listItem, listItemWithTask, media, mediaGroup, mediaSingle, mediaSingleSpec, mediaInline, mediaSingleWithCaption, mediaSingleWithWidthType, mediaSingleFull, mediaSingleToJSON, mediaToJSON, mention, mentionToJSON, nestedExpand, extendedNestedExpand, orderedList, orderedListSelector, orderedListWithOrder, panel, extendedPanel, paragraph, placeholder, rule, getCellAttrs, getCellDomAttrs, status, table, tableStage0, tableWithCustomWidth, tableBackgroundBorderColor, tableBackgroundColorNames, tableBackgroundColorPalette, tableCell, tableCellContentDomSelector, tableCellContentWrapperSelector, tableCellSelector, tableHeader, tableHeaderSelector, tablePrefixSelector, tableRow, tableToJSON, taskItem, taskList, taskListSelector, text, toJSONTableCell, toJSONTableHeader, unknownBlock, unsupportedBlock, unsupportedInline, extensionFrame, multiBodiedExtension } from './nodes';
 export { AnnotationTypes, alignment, alignmentPositionMap, annotation, breakout, code, colorPalette, /** @deprecated [ED-15849] The extended palette is now rolled into the main one. Use `colorPalette` instead. */
-colorPaletteExtended, confluenceInlineComment, dataConsumer, dataConsumerToJSON, em, fragment, fragmentToJSON, indentation, link, linkToJSON, strike, strong, subsup, textColor, typeAheadQuery, underline, buildAnnotationMarkDataAttributes, AnnotationMarkStates, unsupportedMark, unsupportedNodeAttribute, border, borderColorPalette } from './marks';
+colorPaletteExtended, confluenceInlineComment, dataConsumer, dataConsumerToJSON, em, fragment, fragmentToJSON, indentation, link, linkToJSON, strike, strong, subsup, textColor, typeAheadQuery, underline, buildAnnotationMarkDataAttributes, AnnotationMarkStates, unsupportedMark, unsupportedNodeAttribute, border, borderColorPalette, backgroundColor, backgroundColorPalette } from './marks';
 export { unsupportedNodeTypesForMediaCards } from './unsupported';
 export { inlineNodes } from './inline-nodes';
 export { sanitizeNodes, createSchema } from './create-schema';

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

@@ -0,0 +1,105 @@
+import { hexToEditorTextBackgroundPaletteColor } from '../../utils/editor-palette';
+import { COLOR } from '../groups';
+import { rgbToHex, L200, T200, P200, M200, Neutral300, O200 } from '../../utils/colors';
+import { getGlobalTheme } from './text-color';
+import { getDarkModeLCHColor } from '../../utils/lch-color-inversion';
+
+/**
+ * @name backgroundColor_mark
+ */
+
+const colorArrayPalette = [[Neutral300, 'Gray'],
+// token: color.background.accent.gray.subtler
+[T200, 'Teal'],
+// token: color.background.accent.teal.subtler
+[L200, 'Lime'],
+// token: color.background.accent.lime.subtler
+[O200, 'Orange'],
+// token: color.background.accent.orange.subtler
+[M200, 'Magenta'],
+// token: color.background.accent.magenta.subtler
+[P200, 'Purple'] // token: color.background.accent.purple.subtler
+];
+
+// @see https://product-fabric.atlassian.net/wiki/spaces/E/pages/55979455/Colour+picker+decisions#Colourpickerdecisions-Visualdesigndecisions
+export const backgroundColorPalette = new Map();
+colorArrayPalette.forEach(([color, label]) => backgroundColorPalette.set(color.toLowerCase(), label));
+export const backgroundColor = {
+  attrs: {
+    color: {}
+  },
+  inclusive: true,
+  group: COLOR,
+  parseDOM: [{
+    style: 'background-color',
+    getAttrs: maybeValue => {
+      const value = maybeValue;
+      let hexColor;
+      if (value.match(/^rgb/i)) {
+        hexColor = rgbToHex(value);
+      } else if (value[0] === '#') {
+        hexColor = value.toLowerCase();
+      }
+      // else handle other colour formats
+      return hexColor && backgroundColorPalette.has(hexColor) ? {
+        color: hexColor
+      } : false;
+    }
+  },
+  // This rule ensures when loading from a renderer or editor where the
+  // presented text color does not match the stored hex color -- that the
+  // text color is preserved.
+  //
+  // This is used to support the work-around that converts the hex color to
+  // a design system token to enable light / dark mode (through a CSS variable --custom-palette-color)
+  {
+    tag: '.fabric-background-color-mark',
+    getAttrs: maybeElement => {
+      if (!(maybeElement instanceof HTMLElement)) {
+        return false;
+      }
+      const hexColor = maybeElement.dataset.backgroundCustomColor;
+      return hexColor && backgroundColorPalette.has(hexColor) ? {
+        color: hexColor
+      } : false;
+    }
+  }],
+  toDOM(mark) {
+    let paletteColorValue;
+    /**
+     * Documents can contain custom colors when content has been migrated from the old editor, or created via APIs.
+     *
+     * This behaviour predates the introduction of dark mode.
+     *
+     * Without the inversion logic below, text with custom colors, can be hard to read when the user loads the page in dark mode.
+     *
+     * This introduces inversion of the presentation of the custom text colors when the user is in dark mode.
+     *
+     * This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
+     * how we detect text colors copied from external editor sources. Where we load the background color from a
+     * separate attribute (data-text-custom-color), instead of the inline style.
+     *
+     * See the following document for more details on this behaviour
+     * https://hello.atlassian.net/wiki/spaces/CCECO/pages/2908658046/Unsupported+custom+text+colors+in+dark+theme+Editor+Job+Story
+     */
+    const tokenColor = hexToEditorTextBackgroundPaletteColor(mark.attrs.color);
+    if (tokenColor) {
+      paletteColorValue = tokenColor;
+    } else {
+      if (getGlobalTheme().colorMode === 'dark') {
+        // if we have a custom color, we need to check if we are in dark mode
+        paletteColorValue = getDarkModeLCHColor(mark.attrs.color);
+      } else {
+        // if we are in light mode, we can just set the color
+        paletteColorValue = mark.attrs.color;
+      }
+    }
+    return ['span', {
+      class: 'fabric-background-color-mark',
+      // Editor common has a common style which uses this css variable as the value for
+      // the color property using the `fabric-text-background-color-mark` selector applied above.
+      style: `--custom-palette-color: ${paletteColorValue}`,
+      ['data-background-custom-color']: mark.attrs.color
+    }];
+  }
+};

package/dist/es2019/schema/marks/index.js

@@ -16,4 +16,5 @@ export { unsupportedMark } from './unsupported-mark';
 export { unsupportedNodeAttribute } from './unsupported-node-attributes';
 export { dataConsumer, toJSON as dataConsumerToJSON } from './data-consumer';
 export { fragment, toJSON as fragmentToJSON } from './fragment';
-export { border, borderColorPalette } from './border';
+export { border, borderColorPalette } from './border';
+export { backgroundColor, backgroundColorPalette } from './background-color';

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

@@ -66,7 +66,7 @@ export const setGlobalTheme = theme => {
 // This is a minimal duplication of the method from @atlaskit/tokens
 // to minimise the number of dependencies required as these changes are expected
 // to be patched onto CR8.
-const getGlobalTheme = () => {
+export const getGlobalTheme = () => {
   // This should only be hit during tests.
   //
   // At time of writing Jest mocks are not working in this repository.
@@ -148,7 +148,7 @@ export const textColor = {
      */
     const tokenColor = hexToEditorTextPaletteColor(mark.attrs.color);
     if (tokenColor) {
-      paletteColorValue = hexToEditorTextPaletteColor(mark.attrs.color) || mark.attrs.color;
+      paletteColorValue = tokenColor;
     } else {
       if (getGlobalTheme().colorMode === 'dark') {
         // if we have a custom color, we need to check if we are in dark mode

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

@@ -70,7 +70,7 @@ export const mention = {
   }
 };
 const isOptional = key => {
-  return ['userType'].indexOf(key) > -1;
+  return ['userType', 'localId'].indexOf(key) > -1;
 };
 export const toJSON = node => ({
   attrs: Object.keys(node.attrs).reduce((obj, key) => {

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

@@ -28,7 +28,7 @@ export const paragraph = {
   selectable: false,
   content: 'inline*',
   group: 'block',
-  marks: 'strong code em link border strike subsup textColor typeAheadQuery underline confluenceInlineComment action annotation unsupportedMark unsupportedNodeAttribute dataConsumer fragment',
+  marks: 'strong code em link border strike subsup textColor typeAheadQuery underline confluenceInlineComment action annotation unsupportedMark unsupportedNodeAttribute dataConsumer fragment backgroundColor',
   parseDOM: [{
     tag: 'p'
   }],

package/dist/es2019/utils/colors.js

@@ -29,6 +29,7 @@ export const B75 = '#B3D4FF';
 export const B100 = '#4C9AFF';
 export const B400 = '#0052CC';
 export const B500 = '#0747A6';
+export const L200 = '#D3F1A7';
 export const N0 = '#FFFFFF';
 export const N20 = '#F4F5F7';
 export const N30 = '#EBECF0';
@@ -39,20 +40,25 @@ export const N80 = '#97A0AF';
 export const N90 = '#8993A4';
 export const N200 = '#6B778C';
 export const N300 = '#5E6C84';
+export const Neutral300 = '#DCDFE4';
 export const N300A = '#091E4224';
 export const N500 = '#42526E';
 export const N600 = '#758195';
 export const N800 = '#172B4D';
 export const N1000 = '#172B4D';
+export const M200 = '#FDD0EC';
+export const O200 = '#FEDEC8';
 export const P50 = '#EAE6FF';
 export const P75 = '#C0B6F2';
 export const P100 = '#998DD9';
+export const P200 = '#DFD8FD';
 export const P300 = '#6554C0';
 export const P400 = '#5243AA';
 export const P500 = '#403294';
 export const T50 = '#E6FCFF';
 export const T75 = '#B3F5FF';
 export const T100 = '#79E2F2';
+export const T200 = '#C6EDFB';
 export const T300 = '#00B8D9';
 export const T500 = '#008DA6';
 

package/dist/es2019/utils/editor-palette.js

@@ -96,6 +96,42 @@ export const editorTextPalette = {
   '#172B4D': 'var(--ds-text, #172B4D)'
 };
 
+/**
+ * This takes an ADF hex color and returns a matching text background palette color.
+ *
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+ *
+ * Example usage
+ * ```tsx
+ * const cssValue = hexToEditorTextBackgroundPaletteColor('#0747A6');
+ * //     ^? const cssValue: string
+ * <span style={{backgroundColor: cssValue}} />
+ * ```
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
+ * The exact output of this function is an implementation detail and should only be used when rendering
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ */
+export function hexToEditorTextBackgroundPaletteColor(hexColor) {
+  // Ts ignore was used to allow use of conditional return type
+  // (preferring better type on consumption over safety in implementation)
+  return textBackgroundColorPalette[hexColor.toUpperCase()];
+}
+export const textBackgroundColorPalette = {
+  /** Gray - light */
+  '#DCDFE4': 'var(--ds-background-accent-gray-subtler, #DCDFE4)',
+  /** Teal - light */
+  '#C6EDFB': 'var(--ds-background-accent-teal-subtler, #C6EDFB)',
+  /** Lime - light */
+  '#D3F1A7': 'var(--ds-background-accent-lime-subtler, #D3F1A7)',
+  /** Orange - light */
+  '#FEDEC8': 'var(--ds-background-accent-orange-subtler, #FEDEC8)',
+  /** Magenta - light */
+  '#FDD0EC': 'var(--ds-background-accent-magenta-subtler, #FDD0EC)',
+  /** Purple - light */
+  '#DFD8FD': 'var(--ds-background-accent-purple-subtler, #DFD8FD)'
+};
 /**
  * Takes an ADF hex color and returns the rendered hex code for the associated background palette design token using getTokenValue.
  * If the provided color does not exist in the Editor color palette, this function returns undefined.

package/dist/esm/index.js

@@ -1,3 +1,3 @@
 export { PanelType, AnnotationTypes, alignment, alignmentPositionMap, annotation, blockCard, blockquote, blockquoteWithList, 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, listItemWithTask, media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaSingleWithWidthType, mediaSingleFull, mediaSingleSpec, mediaInline, mediaSingleToJSON, mediaToJSON, mention, mentionToJSON, nestedExpand, extendedNestedExpand, orderedList, orderedListSelector, orderedListWithOrder, panel, extendedPanel, paragraph, placeholder, rule, sanitizeNodes, getCellAttrs, getCellDomAttrs, status, strike, strong, subsup, table, tableStage0, 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';
+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, listItemWithTask, media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaSingleWithWidthType, mediaSingleFull, mediaSingleSpec, mediaInline, mediaSingleToJSON, mediaToJSON, mention, mentionToJSON, nestedExpand, extendedNestedExpand, orderedList, orderedListSelector, orderedListWithOrder, panel, extendedPanel, paragraph, placeholder, rule, sanitizeNodes, getCellAttrs, getCellDomAttrs, status, strike, strong, subsup, table, tableStage0, 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, backgroundColor, backgroundColorPalette } 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, getDarkModeLCHColor } from './utils';