@atlaskit/editor-plugin-extension
Version:
editor-plugin-extension plugin for @atlaskit/editor-core
64 lines (62 loc) • 3.67 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.bodiedExtensionSpecWithFixedToDOM = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _adfSchema = require("@atlaskit/adf-schema");
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
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; }
var capitalizeFirstLetter = function capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
};
// @nodeSpecException:toDOM patch
var bodiedExtensionSpecWithFixedToDOM = exports.bodiedExtensionSpecWithFixedToDOM = function bodiedExtensionSpecWithFixedToDOM() {
return _objectSpread(_objectSpread({}, _adfSchema.bodiedExtension), {}, {
toDOM: function toDOM(node) {
var attrs = {
'data-node-type': 'bodied-extension',
'data-extension-type': node.attrs.extensionType,
'data-extension-key': node.attrs.extensionKey,
'data-text': node.attrs.text,
'data-parameters': JSON.stringify(node.attrs.parameters),
'data-layout': node.attrs.layout,
'data-local-id:': node.attrs.localId,
style: (0, _lazyNodeView.convertToInlineCss)({
position: 'relative',
marginTop: "var(--ds-space-300, 24px)"
})
};
var title = node.attrs && node.attrs.extensionTitle || node.attrs && node.attrs.macroMetadata && node.attrs.macroMetadata.title || node.attrs.extensionKey;
return ['div', attrs, ['span', {
// Styles based on `packages/editor/editor-common/src/extensibility/Extension/Lozenge/ExtensionLabel.tsx`
style: (0, _lazyNodeView.convertToInlineCss)({
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)"),
fontSize: '14px',
padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"),
color: "var(--ds-text-subtle, #505258)",
borderTopLeftRadius: "var(--ds-radius-small, 4px)",
borderTopRightRadius: "var(--ds-radius-small, 4px)",
lineHeight: 1,
position: 'absolute',
top: '-19px'
}),
// If we put this below inside the span then we serialise the label (which causes the label to be
// be copied to the clipboard causing copy-paste issues).
// So instead we use a pseudo-element to add the title to this class
'data-bodied-extension-label': capitalizeFirstLetter(title),
class: 'bodied-extension-to-dom-label'
}], ['div', {
style: (0, _lazyNodeView.convertToInlineCss)({
padding: "var(--ds-space-200, 16px)",
marginLeft: "var(--ds-space-negative-150, -12px)",
marginRight: "var(--ds-space-negative-150, -12px)",
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)"),
borderRadius: "var(--ds-radius-small, 4px)"
})
}, 0]];
}
});
};