@atlaskit/adf-schema/dist/esm/schema/marks/text-color.js

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { hexToEditorTextPaletteColor } from '@atlaskit/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 } from '../../utils/colors';

/**
 * @name textColor_mark
 */

// used for extended palette in text color picker
var colorArrayPalette = [
// default row - first color is added programatically
// [N800, 'Squid ink'], // default dark gray
[B500, 'Dark blue'],
// Chore coat
[T500, 'Dark teal'],
// Shabby chic
[G500, 'Dark green'],
// Keen green
[Y400, 'Orange'],
// Cheezy blasters
[R500, 'Dark red'],
// Dragon's blood
[P500, 'Dark purple'],
// Prince
// row 2
[N80, 'Light gray'],
// Spooky ghost
[B100, 'Blue'],
// Arvo breeze
[T300, 'Teal'],
// Tamarama
[G300, 'Green'],
// Fine pine
[Y200, 'Yellow'],
// Pub mix
[R300, 'Red'],
// Poppy surprise
[P300, 'Purple'],
// Da' juice
// row 3
[N0, 'White'], [B75, 'Light blue'],
// Schwag
[T75, 'Light teal'],
// Arctic chill
[G75, 'Light green'],
// Mintie
[Y75, 'Light yellow'],
// Dandelion whisper
[R75, 'Light red'],
// Bondi sunburn
[P50, 'Light purple'] // Lavender secret
];

// @see https://product-fabric.atlassian.net/wiki/spaces/E/pages/55979455/Colour+picker+decisions#Colourpickerdecisions-Visualdesigndecisions
export var colorPalette = new Map();
/** @deprecated [ED-15849] The extended palette is now rolled into the main one. Use `colorPalette` instead. */
export var colorPaletteExtended = colorPalette;
colorArrayPalette.forEach(function (_ref) {
  var _ref2 = _slicedToArray(_ref, 2),
    color = _ref2[0],
    label = _ref2[1];
  return colorPalette.set(color.toLowerCase(), label);
});
export var textColor = {
  attrs: {
    color: {}
  },
  inclusive: true,
  group: COLOR,
  parseDOM: [{
    style: 'color',
    getAttrs: function getAttrs(maybeValue) {
      var value = maybeValue;
      var hexColor;
      if (value.match(/^rgb/i)) {
        hexColor = rgbToHex(value);
      } else if (value[0] === '#') {
        hexColor = value.toLowerCase();
      }
      // else handle other colour formats
      return hexColor && colorPalette.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 was initially introduced to ensure text-color marks were not lost
  // when text-color was used inside a link, and is now also used to support
  // where the hex color stored in ADF is used as an ID for a design system
  // token (and based on theme mode -- the presented color will change).
  {
    tag: '.fabric-text-color-mark',
    getAttrs: function getAttrs(maybeElement) {
      if (!(maybeElement instanceof HTMLElement)) {
        return false;
      }
      var hexColor = maybeElement.dataset.textCustomColor;
      return hexColor && colorPalette.has(hexColor) ? {
        color: hexColor
      } : false;
    }
  }],
  toDOM: function toDOM(mark) {
    // Note -- while there is no way to create custom colors using default tooling
    // the editor does supported ad hoc color values -- and there may be content
    // which has been migrated or created via apis which use such values.
    var paletteColorValue = hexToEditorTextPaletteColor(mark.attrs.color) || mark.attrs.color;
    return ['span', _defineProperty({
      class: 'fabric-text-color-mark',
      style: "--custom-palette-color: ".concat(paletteColorValue)
    }, 'data-text-custom-color', mark.attrs.color)];
  }
};