@atlaskit/editor-plugin-code-block-advanced 10.0.20 → 10.1.1

package/src/nodeviews/codeBlockNodeWithToDOMFixed.ts

@@ -3,6 +3,7 @@ import {
 	codeBlockWithExtendedAttributes,
 	codeBlockWithLocalId,
 } from '@atlaskit/adf-schema';
+import { areCodeBlockLineNumbersHidden } from '@atlaskit/editor-common/code-block';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import type { NodeSpec, DOMOutputSpec, Node } from '@atlaskit/editor-prosemirror/model';
@@ -31,6 +32,75 @@ const getFontSize = () =>
 		? '0.875em'
 		: '0.875rem';
 
+const getGutterBaseStyle = () => ({
+	backgroundColor: token('color.background.neutral'),
+	position: 'relative',
+	flexShrink: 0,
+	// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+	fontSize: getFontSize(),
+	boxSizing: 'content-box',
+});
+
+const getGutterPadding = (allowCodeFolding: boolean) =>
+	allowCodeFolding
+		? `${token('space.100')} ${token('space.250')} ${token('space.100')} ${token('space.075')}`
+		: token('space.100');
+
+const getGuttersWithLineNumbers = (content: string, config: Config): DOMOutputSpec => [
+	'div',
+	{
+		// Based on packages/editor/editor-common/src/styles/shared/code-block.ts
+		// But we can't reuse that class as it adds a ::before that intefers with this approach
+		style: convertToInlineCss({
+			...getGutterBaseStyle(),
+			width: 'var(--lineNumberGutterWidth, 2rem)',
+			/* top and bottom | left and right */
+			padding: getGutterPadding(config.allowCodeFolding),
+		}),
+		contenteditable: 'false',
+	},
+	[
+		'div',
+		{
+			class: 'code-block-gutter-pseudo-element',
+			style: convertToInlineCss({
+				textAlign: 'right',
+				color: token('color.text.subtlest'),
+				fontFamily: token('font.family.code'),
+				whiteSpace: 'pre-wrap',
+			}),
+			'data-label': content,
+		},
+	],
+];
+
+const getFoldOnlyGutter = (): DOMOutputSpec => [
+	'div',
+	{
+		style: convertToInlineCss({
+			...getGutterBaseStyle(),
+			padding: `${token('space.100')} ${token('space.150')} ${token('space.100')} ${token('space.100')}`,
+		}),
+		contenteditable: 'false',
+	},
+];
+
+const getGutters = (
+	content: string,
+	config: Config,
+	hideLineNumbers: boolean,
+): DOMOutputSpec[] => {
+	if (!hideLineNumbers) {
+		return [getGuttersWithLineNumbers(content, config)];
+	}
+
+	if (config.allowCodeFolding) {
+		return [getFoldOnlyGutter()];
+	}
+
+	return [];
+};
+
 // Based on: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
 const toDOM = (node: Node, formattedAriaLabel: string, config: Config): DOMOutputSpec => {
 	let totalLineCount = 1;
@@ -42,12 +112,14 @@ const toDOM = (node: Node, formattedAriaLabel: string, config: Config): DOMOutpu
 		}
 	});
 
+	const hideLineNumbers = areCodeBlockLineNumbersHidden(node);
 	const maxDigits = totalLineCount.toString().length;
 
 	const content = node.textContent
 		.split('\n')
 		.map((_, i) => i + 1)
 		.join('\n');
+	const gutters = getGutters(content, config, hideLineNumbers);
 
 	return [
 		'pre',
@@ -57,6 +129,7 @@ const toDOM = (node: Node, formattedAriaLabel: string, config: Config): DOMOutpu
 			'data-language': node.attrs.language || '',
 			...(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && {
 				'data-wrap': node.attrs.wrap ? 'true' : 'false',
+				...(hideLineNumbers && { 'data-hide-line-numbers': 'true' }),
 			}),
 		},
 		['div', { class: codeBlockClassNames.start, contenteditable: 'false' }],
@@ -65,39 +138,7 @@ const toDOM = (node: Node, formattedAriaLabel: string, config: Config): DOMOutpu
 			{
 				class: codeBlockClassNames.contentWrapper,
 			},
-			[
-				'div',
-				{
-					// Based on packages/editor/editor-common/src/styles/shared/code-block.ts
-					// But we can't reuse that class as it adds a ::before that intefers with this approach
-					style: convertToInlineCss({
-						backgroundColor: token('color.background.neutral'),
-						position: 'relative',
-						width: 'var(--lineNumberGutterWidth, 2rem)',
-						/* top and bottom | left and right */
-						padding: config.allowCodeFolding
-							? `${token('space.100')} ${token('space.250')} ${token('space.100')} ${token('space.075')}`
-							: token('space.100'),
-						flexShrink: 0,
-						fontSize: getFontSize(),
-						boxSizing: 'content-box',
-					}),
-					contenteditable: 'false',
-				},
-				[
-					'div',
-					{
-						class: 'code-block-gutter-pseudo-element',
-						style: convertToInlineCss({
-							textAlign: 'right',
-							color: token('color.text.subtlest'),
-							fontFamily: token('font.family.code'),
-							whiteSpace: 'pre-wrap',
-						}),
-						'data-label': content,
-					},
-				],
-			],
+			...gutters,
 			[
 				'div',
 				{

package/src/ui/theme.ts

@@ -75,6 +75,13 @@ export const cmTheme = (options?: ThemeOptions): Extension =>
 			border: 'none',
 			padding: token('space.0'),
 			color: token('color.text.subtlest'),
+			...(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: token('space.0'),