@atlaskit/editor-plugin-code-block-advanced
Version:
CodeBlockAdvanced plugin for @atlaskit/editor-core
166 lines (165 loc) • 6.4 kB
JavaScript
import { EditorView as CodeMirror } from '@codemirror/view';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
const shouldUseCompactTypography = contentMode => contentMode === 'compact' || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp');
const getLineHeight = contentMode => shouldUseCompactTypography(contentMode) ? '1.5em' : '1.5rem';
const getFontSize = contentMode => shouldUseCompactTypography(contentMode) ? '0.875em' : '0.875rem';
export const cmTheme = options => 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': {
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 const 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 ${"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({
leftCoverWidth,
rightCoverWidth
}) {
const width = "var(--ds-space-100, 8px)";
const leftCoverWidthResolved = leftCoverWidth || width;
const rightCoverWidthResolved = rightCoverWidth || width;
return `
linear-gradient(
to right,
${"var(--ds-background-neutral, #0515240F)"} ${leftCoverWidthResolved},
transparent ${leftCoverWidthResolved}
),
linear-gradient(
to right,
${"var(--ds-surface-raised, #FFFFFF)"} ${leftCoverWidthResolved},
transparent ${leftCoverWidthResolved}
),
linear-gradient(
to left,
${"var(--ds-background-neutral, #0515240F)"} ${rightCoverWidthResolved},
transparent ${rightCoverWidthResolved}
),
linear-gradient(
to left,
${"var(--ds-surface-raised, #FFFFFF)"} ${rightCoverWidthResolved},
transparent ${rightCoverWidthResolved}
),
linear-gradient(
to left,
${"var(--ds-shadow-overflow-spread, #1E1F2129)"} 0,
${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
),
linear-gradient(
to left,
${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0,
${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
),
linear-gradient(
to right,
${"var(--ds-shadow-overflow-spread, #1E1F2129)"} 0,
${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
),
linear-gradient(
to right,
${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0,
${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
)
`;
}