@atlaskit/adf-schema
Version:
Shared package that contains the ADF-schema (json) and ProseMirror node/mark specs
161 lines (157 loc) • 6.8 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.toJSON = exports.mediaWithLocalId = exports.media = exports.defaultAttrs = exports.createMediaSpec = exports.copyPrivateAttributes = exports.camelCaseToKebabCase = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _colors = require("../../utils/colors");
var _nodeTypes = require("../../next-schema/generated/nodeTypes");
var _uuid = require("../../utils/uuid");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
* @name media_node
*/
var defaultAttrs = exports.defaultAttrs = (0, _nodeTypes.media)({}).attrs;
var createMediaSpec = exports.createMediaSpec = function createMediaSpec(attributes) {
var inline = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var generateLocalId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var domNodeType = inline ? 'span' : 'div';
var nodeName = inline ? 'mediaInline' : 'media';
var parseDOM = [{
tag: "".concat(domNodeType, "[data-node-type=\"").concat(nodeName, "\"]"),
getAttrs: function getAttrs(dom) {
var attrs = {};
if (attributes) {
Object.keys(attributes).forEach(function (k) {
var key = camelCaseToKebabCase(k).replace(/^__/, '');
var value = dom.getAttribute("data-".concat(key)) || '';
if (value) {
attrs[k] = value;
}
});
}
// Need to do validation & type conversion manually
if (attrs.__fileSize) {
attrs.__fileSize = +attrs.__fileSize;
}
var width = Number(attrs.width);
if (typeof width !== 'undefined' && !isNaN(width)) {
attrs.width = width;
}
var height = Number(attrs.height);
if (typeof height !== 'undefined' && !isNaN(height)) {
attrs.height = height;
}
if (generateLocalId) {
attrs.localId = _uuid.uuid.generate();
}
return attrs;
}
},
// Don't match data URI
{
tag: 'img[src^="data:image"]',
ignore: true
}];
var toDOM = function toDOM(node) {
var attrs = {
'data-id': node.attrs.id,
'data-node-type': "".concat(nodeName),
'data-type': node.attrs.type,
'data-collection': node.attrs.collection,
'data-occurrence-key': node.attrs.occurrenceKey,
'data-width': node.attrs.width,
'data-height': node.attrs.height,
'data-url': node.attrs.url,
'data-alt': node.attrs.alt,
'data-local-id': node.attrs.localId || undefined,
// toDOM is used for static rendering as well as editor rendering. This comes into play for
// emails, copy/paste, etc, so the title and styling here *is* useful (despite a React-based
// node view being used for editing).
title: 'Attachment',
// Manually kept in sync with the style of media cards. The goal is to render a plain gray
// rectangle that provides an affordance for media.
style: "display: inline-block; border-radius: 3px; background: ".concat(_colors.N30, "; box-shadow: 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24);")
};
copyPrivateAttributes(node.attrs, attrs, function (key) {
return "data-".concat(camelCaseToKebabCase(key.slice(2)));
});
return ["".concat(domNodeType), attrs];
};
if (inline) {
return (0, _nodeTypes.mediaInline)({
parseDOM: parseDOM,
toDOM: toDOM
});
}
return (0, _nodeTypes.media)({
parseDOM: [].concat(parseDOM, [{
// media-inline.ts uses this same function to generate the nodespec
// this ensures that we don't make a media inline out of a copied image
// https://product-fabric.atlassian.net/browse/EDM-2996
tag: 'img:not(.smart-link-icon)',
getAttrs: function getAttrs(dom) {
var attrs = {
type: 'external',
url: dom.getAttribute('src') || '',
alt: dom.getAttribute('alt') || ''
};
if (generateLocalId) {
attrs.localId = _uuid.uuid.generate();
}
return attrs;
}
}]),
toDOM: toDOM
});
};
var media = exports.media = createMediaSpec(defaultAttrs, false, false);
var mediaWithLocalId = exports.mediaWithLocalId = createMediaSpec(_objectSpread(_objectSpread({}, defaultAttrs), {}, {
localId: {
default: _uuid.uuid.generate()
}
}), false, true);
var camelCaseToKebabCase = exports.camelCaseToKebabCase = function camelCaseToKebabCase(str) {
return str.replace(/([^A-Z]+)([A-Z])/g, function (_, x, y) {
return "".concat(x, "-").concat(y.toLowerCase());
});
};
var copyPrivateAttributes = exports.copyPrivateAttributes = function copyPrivateAttributes(from, to, map) {
if (media.attrs) {
Object.keys(media.attrs).forEach(function (key) {
if (key[0] === '_' && key[1] === '_' && from[key]) {
to[map ? map(key) : key] = from[key];
}
});
}
};
/**
* There's no concept of optional property in ProseMirror. It sets value as `null`
* when there's no use of any property. We are filtering out all private & optional attrs here.
*/
var optionalAttributes = ['occurrenceKey', 'width', 'height', 'url', 'alt', 'localId'];
var externalOnlyAttributes = ['type', 'url', 'width', 'height', 'alt', 'localId'];
var toJSON = exports.toJSON = function toJSON(node) {
return {
attrs: Object.keys(node.attrs)
// Strip private attributes e.g. __fileName, __fileSize, __fileMimeType, etc.
.filter(function (key) {
return !(key[0] === '_' && key[1] === '_');
}).reduce(function (obj, key) {
if (node.attrs.type === 'external' && externalOnlyAttributes.indexOf(key) === -1) {
return obj;
}
if (optionalAttributes.indexOf(key) > -1 && (node.attrs[key] === null || node.attrs[key] === '')) {
return obj;
}
if (['width', 'height'].indexOf(key) !== -1) {
obj[key] = Number(node.attrs[key]);
return obj;
}
obj[key] = node.attrs[key];
return obj;
}, {})
};
};