@atlaskit/adf-schema
Version:
Shared package that contains the ADF-schema (json) and ProseMirror node/mark specs
53 lines (50 loc) • 2.37 kB
JavaScript
;
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 _markTypes = require("../../next-schema/generated/markTypes");
var _editorPalette = require("../../utils/editor-palette");
var _colors = require("../../utils/colors");
/**
* @name border_mark
* @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 = exports.borderColorPalette = new Map();
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 = exports.border = (0, _markTypes.border)({
parseDOM: [{
tag: '[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
};
}
}],
toDOM: function toDOM(mark, isInline) {
var wrapperStyle = isInline ? 'span' : 'div';
// 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 [wrapperStyle, {
'data-mark-type': 'border',
'data-color': mark.attrs.color,
'data-size': mark.attrs.size,
style: "--custom-palette-color: ".concat(paletteColorValue)
}];
}
});