UNPKG

@atlaskit/adf-schema

Version:

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

58 lines (56 loc) 2.32 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.borderColorPalette = exports.border = void 0; var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); var _editorPalette = require("@atlaskit/editor-palette"); var _colors = require("../../utils/colors"); /** * @name border_mark * @stage 0 * @description This mark adds decoration to an element, and any element decorated with it will also have a border style. */ var borderColorArrayPalette = [[_colors.N300A, 'Subtle gray'], [_colors.N600, 'Gray'], [_colors.N1000, 'Bold gray']]; var borderColorPalette = new Map(); exports.borderColorPalette = borderColorPalette; borderColorArrayPalette.forEach(function (_ref) { var _ref2 = (0, _slicedToArray2.default)(_ref, 2), color = _ref2[0], label = _ref2[1]; return borderColorPalette.set(color.toLowerCase(), label); }); var border = { inclusive: false, parseDOM: [{ tag: 'div[data-mark-type="border"]', getAttrs: function getAttrs(domNode) { var _dom$getAttribute, _dom$getAttribute2; var dom = domNode; var color = ((_dom$getAttribute = dom.getAttribute('data-color')) !== null && _dom$getAttribute !== void 0 ? _dom$getAttribute : '').toLowerCase(); var size = +((_dom$getAttribute2 = dom.getAttribute('data-size')) !== null && _dom$getAttribute2 !== void 0 ? _dom$getAttribute2 : '0'); return { size: size > 3 ? 3 : size < 1 ? false : size, color: borderColorPalette.has(color) ? color : false }; } }], attrs: { color: {}, size: {} }, 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.hexToEditorBorderPaletteColor)(mark.attrs.color) || mark.attrs.color; return ['div', { 'data-mark-type': 'border', 'data-color': mark.attrs.color, 'data-size': mark.attrs.size, style: "--custom-palette-color: ".concat(paletteColorValue) }]; } }; exports.border = border;