@atlaskit/adf-schema/dist/cjs/schema/marks/text-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.textColor = 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("@atlaskit/editor-palette");
var _groups = require("../groups");
var _colors = require("../../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
[_colors.B500, 'Dark blue'],
// Chore coat
[_colors.T500, 'Dark teal'],
// Shabby chic
[_colors.G500, 'Dark green'],
// Keen green
[_colors.Y400, 'Orange'],
// Cheezy blasters
[_colors.R500, 'Dark red'],
// Dragon's blood
[_colors.P500, 'Dark purple'],
// Prince
// row 2
[_colors.N80, 'Light gray'],
// Spooky ghost
[_colors.B100, 'Blue'],
// Arvo breeze
[_colors.T300, 'Teal'],
// Tamarama
[_colors.G300, 'Green'],
// Fine pine
[_colors.Y200, 'Yellow'],
// Pub mix
[_colors.R300, 'Red'],
// Poppy surprise
[_colors.P300, 'Purple'],
// Da' juice
// row 3
[_colors.N0, 'White'], [_colors.B75, 'Light blue'],
// Schwag
[_colors.T75, 'Light teal'],
// Arctic chill
[_colors.G75, 'Light green'],
// Mintie
[_colors.Y75, 'Light yellow'],
// Dandelion whisper
[_colors.R75, 'Light red'],
// Bondi sunburn
[_colors.P50, 'Light purple'] // Lavender secret
];

// @see https://product-fabric.atlassian.net/wiki/spaces/E/pages/55979455/Colour+picker+decisions#Colourpickerdecisions-Visualdesigndecisions
var colorPalette = new Map();
/** @deprecated [ED-15849] The extended palette is now rolled into the main one. Use `colorPalette` instead. */
exports.colorPalette = colorPalette;
var colorPaletteExtended = colorPalette;
exports.colorPaletteExtended = colorPaletteExtended;
colorArrayPalette.forEach(function (_ref) {
  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
    color = _ref2[0],
    label = _ref2[1];
  return colorPalette.set(color.toLowerCase(), label);
});
var textColor = {
  attrs: {
    color: {}
  },
  inclusive: true,
  group: _groups.COLOR,
  parseDOM: [{
    style: '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 && 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 = (0, _editorPalette.hexToEditorTextPaletteColor)(mark.attrs.color) || mark.attrs.color;
    return ['span', (0, _defineProperty2.default)({
      class: 'fabric-text-color-mark',
      style: "--custom-palette-color: ".concat(paletteColorValue)
    }, 'data-text-custom-color', mark.attrs.color)];
  }
};
exports.textColor = textColor;