@atlaskit/editor-plugin-code-block-advanced
Version:
CodeBlockAdvanced plugin for @atlaskit/editor-core
134 lines (133 loc) • 7.69 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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; }
import { EditorView as CodeMirror } from '@codemirror/view';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
var shouldUseCompactTypography = function shouldUseCompactTypography(contentMode) {
return contentMode === 'compact' || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp');
};
var getLineHeight = function getLineHeight(contentMode) {
return shouldUseCompactTypography(contentMode) ? '1.5em' : '1.5rem';
};
var getFontSize = function getFontSize(contentMode) {
return shouldUseCompactTypography(contentMode) ? '0.875em' : '0.875rem';
};
export var cmTheme = function cmTheme(options) {
return CodeMirror.theme({
'&': {
backgroundColor: "var(--ds-background-neutral, #0515240F)",
padding: '0',
marginTop: "var(--ds-space-100, 8px)",
marginBottom: "var(--ds-space-100, 8px)",
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: getFontSize(options === null || options === void 0 ? void 0 : options.contentMode),
// Custom syntax styling to match existing styling
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: getLineHeight(options === null || options === void 0 ? void 0 : options.contentMode)
},
'&.cm-focused': {
outline: 'none'
},
'.cm-line': {
padding: '0'
},
'&.cm-editor.code-block.danger': {
backgroundColor: "var(--ds-background-danger, #FFECEB)"
},
'.cm-content[aria-readonly="true"]': {
caretColor: 'transparent'
},
'.cm-content': {
cursor: 'text',
caretColor: "var(--ds-text, #292A2E)",
margin: "var(--ds-space-100, 8px)",
padding: "var(--ds-space-0, 0px)"
},
'.cm-scroller': {
backgroundColor: "var(--ds-background-neutral, #0515240F)",
// Custom syntax styling to match existing styling
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 'unset',
fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
borderRadius: "var(--ds-radius-small, 4px)",
backgroundImage: overflowShadow({
leftCoverWidth: "var(--ds-space-300, 24px)"
}),
backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll'
},
'&.cm-focused .cm-cursor': {
borderLeftColor: "var(--ds-text, #292A2E)"
},
'.cm-gutter': {
padding: "var(--ds-space-100, 8px)"
},
'.cm-gutters': _objectSpread({
backgroundColor: "var(--ds-background-neutral, #0515240F)",
border: 'none',
padding: "var(--ds-space-0, 0px)",
color: "var(--ds-text-subtlest, #6B6E76)"
}, expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && {
// CodeMirror defaults this to height: 100%, which can resolve against an indefinite
// parent height in content-height editor and prevent flex stretching when gutter
// content is sparse, such as fold-only gutters.
height: 'unset',
alignSelf: 'stretch'
}),
'.cm-lineNumbers .cm-gutterElement': {
paddingLeft: "var(--ds-space-0, 0px)",
paddingRight: "var(--ds-space-0, 0px)",
minWidth: 'unset'
},
// Set the gutter element min height to prevent flicker of styling while
// codemirror is calculating (which happens after an animation frame).
// Example problem: https://github.com/codemirror/dev/issues/1076
// Ignore the first gutter element as it is a special hidden element.
'.cm-gutterElement:not(:first-child)': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
minHeight: getLineHeight(options === null || options === void 0 ? void 0 : options.contentMode)
}
});
};
export var codeFoldingTheme = CodeMirror.theme({
'.cm-gutter': {
paddingLeft: "var(--ds-space-075, 6px)",
paddingTop: "var(--ds-space-100, 8px)",
paddingBottom: "var(--ds-space-100, 8px)",
paddingRight: "var(--ds-space-0, 0px)"
},
'.cm-foldGutter': {
paddingLeft: "var(--ds-space-050, 4px)"
},
'.cm-gutterElement:has([data-marker-dom-element="true"])': {
color: "var(--ds-icon-subtle, #505258)"
},
'.cm-gutterElement:has([data-marker-dom-element="true"]):hover': {
color: "var(--ds-text-accent-gray-bolder, #1E1F21)"
},
'.cm-foldPlaceholder': {
// To give spacing between lines
height: '20px',
backgroundColor: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
border: 'none',
color: "var(--ds-text, #292A2E)",
outline: "1px solid ".concat("var(--ds-border-accent-gray, #7D818A)"),
paddingLeft: "var(--ds-space-025, 2px)",
paddingRight: "var(--ds-space-025, 2px)"
},
'.cm-foldPlaceholder:hover': {
backgroundColor: "var(--ds-background-accent-gray-subtlest-hovered, #DDDEE1)"
}
});
/**
* Copied directly from `packages/editor/editor-shared-styles/src/overflow-shadow/overflow-shadow.ts`
* `CodeMirror` does not support emotion styling so this has been re-created.
*/
function overflowShadow(_ref) {
var leftCoverWidth = _ref.leftCoverWidth,
rightCoverWidth = _ref.rightCoverWidth;
var width = "var(--ds-space-100, 8px)";
var leftCoverWidthResolved = leftCoverWidth || width;
var rightCoverWidthResolved = rightCoverWidth || width;
return "\n linear-gradient(\n to right,\n ".concat("var(--ds-background-neutral, #0515240F)", " ", leftCoverWidthResolved, ",\n transparent ").concat(leftCoverWidthResolved, "\n ),\n linear-gradient(\n to right,\n ", "var(--ds-surface-raised, #FFFFFF)", " ").concat(leftCoverWidthResolved, ",\n transparent ").concat(leftCoverWidthResolved, "\n ),\n linear-gradient(\n to left,\n ", "var(--ds-background-neutral, #0515240F)", " ").concat(rightCoverWidthResolved, ",\n transparent ").concat(rightCoverWidthResolved, "\n ),\n linear-gradient(\n to left,\n ", "var(--ds-surface-raised, #FFFFFF)", " ").concat(rightCoverWidthResolved, ",\n transparent ").concat(rightCoverWidthResolved, "\n ),\n linear-gradient(\n to left,\n ", "var(--ds-shadow-overflow-spread, #1E1F2129)", " 0,\n ", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n ),\n linear-gradient(\n to left,\n ", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", " 0,\n ", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n ),\n linear-gradient(\n to right,\n ", "var(--ds-shadow-overflow-spread, #1E1F2129)", " 0,\n ", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n ),\n linear-gradient(\n to right,\n ", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", " 0,\n ", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n )\n");
}