@atlaskit/adf-schema/dist/cjs/schema/marks/background-color.js

Shared package that contains the ADF-schema (json) and ProseMirror node/mark specs

"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 _markTypes = require("../../next-schema/generated/markTypes");
var _editorPalette = require("../../utils/editor-palette");
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 = (0, _markTypes.backgroundColor)({
  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)];
  }
});