Adding line numbers to the code

WordPress · Jan 2, 2025 · faa01e2 · faa01e2
1 parent 93f8928
commit faa01e2
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 33 deletions.
diff --git a/packages/block-library/src/code/edit.js b/packages/block-library/src/code/edit.js
@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { useState, useEffect } from '@wordpress/element';
 
 export default function CodeEdit( {
 	attributes,
@@ -13,23 +13,50 @@ export default function CodeEdit( {
 	mergeBlocks,
 } ) {
 	const blockProps = useBlockProps();
+	const [ lineNumbers, setLineNumbers ] = useState( [] );
+
+	// Function to calculate line numbers dynamically
+	const calculateLineNumbers = ( content ) => {
+		return content.split( '\n' ).map( ( _, index ) => index + 1 );
+	};
+
+	// Update line numbers whenever the content changes
+	useEffect( () => {
+		const content =
+			typeof attributes.content === 'string'
+				? attributes.content
+				: attributes.content.toHTMLString( {
+						preserveWhiteSpace: true,
+				  } );
+		setLineNumbers( calculateLineNumbers( content ) );
+	}, [ attributes.content ] );
+
 	return (
-		<pre { ...blockProps }>
-			<RichText
-				tagName="code"
-				identifier="content"
-				value={ attributes.content }
-				onChange={ ( content ) => setAttributes( { content } ) }
-				onRemove={ onRemove }
-				onMerge={ mergeBlocks }
-				placeholder={ __( 'Write code…' ) }
-				aria-label={ __( 'Code' ) }
-				preserveWhiteSpace
-				__unstablePastePlainText
-				__unstableOnSplitAtDoubleLineEnd={ () =>
-					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
-				}
-			/>
-		</pre>
+		<div { ...blockProps } className="wp-block-code-with-line-numbers">
+			<div className="line-numbers">
+				{ lineNumbers.map( ( num ) => (
+					<div key={ num }>{ num }</div>
+				) ) }
+			</div>
+			<pre className="code-content">
+				<RichText
+					tagName="code"
+					identifier="content"
+					value={ attributes.content }
+					onChange={ ( content ) => setAttributes( { content } ) }
+					onRemove={ onRemove }
+					onMerge={ mergeBlocks }
+					placeholder="Write code…"
+					aria-label="Code"
+					preserveWhiteSpace
+					__unstablePastePlainText
+					__unstableOnSplitAtDoubleLineEnd={ () =>
+						insertBlocksAfter(
+							createBlock( getDefaultBlockName() )
+						)
+					}
+				/>
+			</pre>
+		</div>
 	);
 }
diff --git a/packages/block-library/src/code/save.js b/packages/block-library/src/code/save.js
@@ -9,21 +9,39 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { escape } from './utils';
 
 export default function save( { attributes } ) {
+	// Calculate the number of lines dynamically
+	const calculateLineNumbers = ( content ) => {
+		return content.split( '\n' ).map( ( _, index ) => index + 1 );
+	};
+
+	const content =
+		typeof attributes.content === 'string'
+			? attributes.content
+			: attributes.content.toHTMLString( {
+					preserveWhiteSpace: true,
+			  } );
+
+	const lineNumbers = calculateLineNumbers( content );
+
 	return (
-		<pre { ...useBlockProps.save() }>
-			<RichText.Content
-				tagName="code"
-				// To do: `escape` encodes characters in shortcodes and URLs to
-				// prevent embedding in PHP. Ideally checks for the code block,
-				// or pre/code tags, should be made on the PHP side?
-				value={ escape(
-					typeof attributes.content === 'string'
-						? attributes.content
-						: attributes.content.toHTMLString( {
-								preserveWhiteSpace: true,
-						  } )
-				) }
-			/>
-		</pre>
+		<div
+			{ ...useBlockProps.save() }
+			className="wp-block-code-with-line-numbers"
+		>
+			<div className="line-numbers">
+				{ lineNumbers.map( ( num ) => (
+					<div key={ num }>{ num }</div>
+				) ) }
+			</div>
+			<pre className="code-content">
+				<RichText.Content
+					tagName="code"
+					// To do: `escape` encodes characters in shortcodes and URLs to
+					// prevent embedding in PHP. Ideally checks for the code block,
+					// or pre/code tags, should be made on the PHP side?
+					value={ escape( content ) }
+				/>
+			</pre>
+		</div>
 	);
 }
diff --git a/packages/block-library/src/code/style.scss b/packages/block-library/src/code/style.scss
@@ -16,3 +16,21 @@
 		/*!rtl:end:ignore*/
 	}
 }
+.wp-block-code-with-line-numbers {
+	display: flex;
+}
+
+.line-numbers {
+	padding-right: 8px;
+	text-align: right;
+	border-right: 1px solid #ddd;
+	color: #6a737d;
+	user-select: none;
+	margin: 1em 0;
+}
+
+.code-content {
+	flex-grow: 1;
+	padding-left: 8px;
+	overflow: auto;
+}