Add block editor UI to highlight lines

src/code-block/edit.js

@@ -1,15 +1,15 @@
 
 import { PlainText } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
+import { HighlightLines } from './highlight';
 import settings from './settings';
 import { Fragment } from '@wordpress/element';
 
-export default function editSyntaxHighlighterBlock( { attributes, setAttributes, className } ) {
-	const {
-		content,
-	} = attributes;
+export default function editSyntaxHighlighterBlock( props ) {
+	const { attributes: { content }, setAttributes, className } = props;
 
 	const editView = <div className={ className + ' wp-block-code' }>
+		<HighlightLines { ... props } />
 		<PlainText
 			value={ content }
 			onChange={ ( nextContent ) => setAttributes( { content: nextContent } ) }
@@ -19,7 +19,7 @@ export default function editSyntaxHighlighterBlock( { attributes, setAttributes,
 	</div>;
 
 	return <Fragment>
-		{ settings( { attributes, setAttributes } ) }
+		{ settings( props ) }
 		{ editView }
 	</Fragment>
 	;

src/code-block/editor.scss

@@ -5,4 +5,52 @@
 			font-weight: bold;
 		}
 	}
+
+	.editor-styles-wrapper &-code {
+		position: relative;
+		padding: 14px;
+		border-width: 1px;
+		border-radius: 0;
+	}
+
+	&__lines {
+		position: absolute;
+		left: -32px;
+		top: -1px;
+		bottom: -1px;
+		width: 28px;
+		border-right: 2px solid var(--wp-admin-theme-color);
+		overflow: visible;
+		cursor: pointer;
+		text-align: right;
+		color: rgba(#000, 0.3);
+		line-height: 24px;
+		padding: 15px 2px;
+		div {
+			pointer-events: none;
+			height: 24px;
+			user-select: none;
+		}
+	}
+
+	&__line {
+		height: 24px;
+		background: var(--wp-admin-theme-color);
+		pointer-events: none;
+		opacity: 0.2;
+		position: absolute;
+		right: 0;
+		left: 0;
+		.wp-block[data-type='syntaxhighlighter/code'].is-selected {
+			left: -32px;
+		}
+		&.is-selection, &.is-removing {
+			opacity: 0.1;
+		}
+	}
+
+	&__textarea {
+		line-height: 24px !important;
+		padding: 0;
+	}
 }

src/code-block/highlight.attributes.js

@@ -0,0 +1,39 @@
+
+const parseHighlightLinesAttribute = value => {
+	if ( ! value ) {
+		return [];
+	}
+	return value.replace( /\s/, '' ).split( ',' ).map( lines => {
+		const [ start, end ] = lines.split( '-' );
+		if ( ! start.length ) {
+			return;
+		}
+
+		return { start: +start, size: ( +end || +start ) - start + 1 };
+	} ).filter( l => !! l );
+};
+
+const serializeLine = ( { start, size } ) => {
+	if ( size < 0 ) {
+		start += size;
+		size = -size + 1;
+	}
+	return size > 1 ? `${ start }-${ start + size - 1 }` : start;
+};
+
+const serializeLines = lines => lines.map( serializeLine ).join( ',' );
+
+export const useHighlightLinesAttribute = ( { attributes, setAttributes } ) => {
+	const lines = parseHighlightLinesAttribute( attributes.highlightLines );
+	return {
+		lines: [ ...lines ],
+		add( line ) {
+			const highlightLines = serializeLines( [ ...lines, line ] );
+			setAttributes( { highlightLines } );
+		},
+		remove( start ) {
+			const next = lines.filter( line => line.start !== start );
+			setAttributes( { highlightLines: serializeLines( next ) } );
+		},
+	};
+};

src/code-block/highlight.js

@@ -0,0 +1,97 @@
+import { useState, useRef, useEffect } from '@wordpress/element';
+import { useHighlightLinesAttribute } from './highlight.attributes';
+
+export const HighlightLines = ( { attributes, setAttributes, isSelected } ) => {
+	const lineHeight = 24;
+	const topOffset = 14;
+
+	const [ selecting, setSelecting ] = useState( false );
+	const [ selection, setSelection ] = useState( null );
+	const [ lineCount, setLineCount ] = useState( 0 );
+
+	const linesRef = useRef();
+
+	useEffect( ()=> {
+		setLineCount( Math.floor( linesRef.current ? ( linesRef.current.offsetHeight - ( topOffset * 2 ) ) / lineHeight : 0 ) );
+	}, [ linesRef.current && linesRef.current.offsetHeight, isSelected ] );
+
+	const lineNumbers = [];
+	for ( let line = 1; line <= lineCount; line++ ) {
+		lineNumbers.push( <div key={ line }> { line }</div> );
+	}
+
+	const { lines, add, remove } = useHighlightLinesAttribute( { attributes, setAttributes } );
+
+	function selectLines( e ) {
+		const rect = e.target.getBoundingClientRect();
+		const pos = e.clientY - rect.top;
+
+		const line = Math.floor( ( pos - topOffset ) / lineHeight ) + 1;
+
+		const start = selecting && selection.start ? selection.start : +line;
+		const diff = +line - start;
+		const size = selecting ? ( diff + ( diff > 0 ? 1 : 0 ) ) : 1;
+
+		if ( ! line ) {
+			return clearSelection();
+		}
+
+		setSelection( { start, size, isSelection: true } );
+	}
+
+	function clearSelection() {
+		setSelecting( false );
+		setSelection( null );
+	}
+
+	function startSelecting() {
+		setSelecting( true );
+	}
+
+	function finishSelecting() {
+		if ( getHighlightForLine( selection.start ) ) {
+			remove( getHighlightForLine( selection.start ).start );
+		} else {
+			add( selection );
+		}
+		setSelecting( false );
+	}
+
+	function getHighlightForLine( line ) {
+		return lines.find( ( { start, size, isSelection } ) => ! isSelection && start <= line && start + size - 1 >= line );
+	}
+
+	if ( selection && ! getHighlightForLine( selection.start ) ) {
+		lines.push( selection );
+	}
+
+	const Line = ( line ) => {
+		let { start, size, isSelection } = line;
+		const isRemoving = selection && ! isSelection && line === getHighlightForLine( selection.start );
+
+		if ( size < 0 ) {
+			start += size;
+			size = -size + 1;
+		}
+
+		return (
+			<div
+				className={ [ 'wp-block-syntaxhighlighter__line ', isSelection ? 'is-selection' : '', isRemoving ? 'is-removing' : '' ].join( ' ' ) }
+				style={ {
+					top: ( ( start - 1 ) * lineHeight ) + topOffset,
+					height: size * lineHeight,
+				} } /> );
+	};
+
+	return <div>
+		{ isSelected && <div role="button" className="wp-block-syntaxhighlighter__lines"
+			onMouseDown={ () => startSelecting() }
+			onMouseUp={ () => finishSelecting() }
+			onMouseMove={ selectLines }
+			onMouseLeave={ clearSelection }
+			ref={ linesRef }>
+			{ lineNumbers }
+		</div> }
+		{ lines.map( line => <Line key={ line.start } { ...line } /> ) }
+	</div>;
+};