@atlaskit/editor-plugin-code-block-advanced
Version:
CodeBlockAdvanced plugin for @atlaskit/editor-core
141 lines (139 loc) • 8.06 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.codeFoldingTheme = exports.cmTheme = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _view = require("@codemirror/view");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
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 shouldUseCompactTypography = function shouldUseCompactTypography(contentMode) {
return contentMode === 'compact' || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.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';
};
var cmTheme = exports.cmTheme = function cmTheme(options) {
return _view.EditorView.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)"
}, (0, _expValEquals.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)
}
});
};
var codeFoldingTheme = exports.codeFoldingTheme = _view.EditorView.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");
}