@atlaskit/editor-plugin-extension
Version:
editor-plugin-extension plugin for @atlaskit/editor-core
60 lines (59 loc) • 2.66 kB
JavaScript
import { bodiedExtension } from '@atlaskit/adf-schema';
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
import { N30 } from '@atlaskit/theme/colors';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
const capitalizeFirstLetter = str => {
return str.charAt(0).toUpperCase() + str.slice(1);
};
// @nodeSpecException:toDOM patch
export const bodiedExtensionSpecWithFixedToDOM = () => {
if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
return bodiedExtension;
}
return {
...bodiedExtension,
toDOM: node => {
const 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: convertToInlineCss({
position: 'relative',
marginTop: "var(--ds-space-300, 24px)"
})
};
const 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: convertToInlineCss({
boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`,
fontSize: '14px',
padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`,
color: "var(--ds-text-subtle, #44546F)",
borderTopLeftRadius: "var(--ds-border-radius, 4px)",
borderTopRightRadius: "var(--ds-border-radius, 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: 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 ${`var(--ds-border, ${N30})`}`,
borderRadius: "var(--ds-border-radius, 4px)"
})
}, 0]];
}
};
};