last changes as suggested

shared/naturalcrit/splitPane/splitPane.jsx

@@ -1,11 +1,11 @@
 require('./splitPane.less');
 const React = require('react');
-const { useState, useEffect, useRef } = React;
-const cx = require('classnames');
+const { useState, useEffect } = React;
+
+const storageKey = 'naturalcrit-pane-split';
 
 const SplitPane = (props)=>{
 	const {
-		storageKey = 'naturalcrit-pane-split',
 		onDragFinish = ()=>{},
 		showDividerButtons = true
 	} = props;
@@ -17,26 +17,25 @@ const SplitPane = (props)=>{
 	const [showMoveArrows, setShowMoveArrows] = useState(true);
 	const [liveScroll, setLiveScroll] = useState(false);
 
-	const dividerRef = useRef(null);
-
 	// Set initial divider position and liveScroll only after mounting
 	useEffect(()=>{
 		const savedPos = window.localStorage.getItem(storageKey);
 		setDividerPos(savedPos ? parseInt(savedPos, 10) : window.innerWidth / 2);
 		setLiveScroll(window.localStorage.getItem('liveScroll') === 'true');
 
-		const handleResize = ()=>{
-			setDividerPos((pos)=>limitPosition(pos,0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13))
-			);
-		};
 		window.addEventListener('resize', handleResize);
 		return ()=>window.removeEventListener('resize', handleResize);
-	}, [storageKey]);
+	}, []);
 
 	const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>{
 		return Math.round(Math.min(max, Math.max(min, x)));
 	};
 
+	const handleResize = ()=>{
+		setDividerPos((pos)=>limitPosition(pos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13))
+		);
+	};
+
 	const handleUp =(e)=>{
 		e.preventDefault();
 		if(isDragging) {
@@ -63,30 +62,26 @@ const SplitPane = (props)=>{
 		setLiveScroll(!liveScroll);
 	};
 
-	const moveArrows = showMoveArrows && (
+	const  renderMoveArrows = (showMoveArrows &&
 		<>
-			{['left', 'right'].map((direction, index) => (
-				<div
-					key={direction}
-					className={`arrow ${direction}`}
-					onClick={index === 0 ? () => setMoveSource(!moveSource) : () => setMoveBrew(!moveBrew)}
-				>
-					<i className={`fas fa-arrow-${direction}`} />
-				</div>
-			))}
-			<div
-				id='scrollToggleDiv'
-				className={`arrow ${liveScroll ? 'lock' : 'unlock'}`}
-				onClick={liveScrollToggle}
-			>
-				<i id='scrollToggle' className={`fas fa-${liveScroll ? 'lock' : 'unlock'}`} />
+			<div className='arrow left'
+				onClick={()=>setMoveSource(!moveSource)} >
+				<i className='fas fa-arrow-left' />
+			</div>
+			<div className='arrow right'
+				onClick={()=>setMoveBrew(!moveBrew)} >
+				<i className='fas fa-arrow-right' />
+			</div>
+			<div id='scrollToggleDiv' className={liveScroll ? 'arrow lock' : 'arrow unlock'}
+				onClick={liveScrollToggle} >
+				<i id='scrollToggle' className={liveScroll ? 'fas fa-lock' : 'fas fa-unlock'} />
 			</div>
 		</>
 	);
 
-	const renderDivider = ()=>(
-		<div className='divider' onPointerDown={handleDown} ref={dividerRef}>
-			{showDividerButtons && moveArrows}
+	const renderDivider = (
+		<div className='divider' onPointerDown={handleDown}>
+			{showDividerButtons && renderMoveArrows}
 			<div className='dots'>
 				<i className='fas fa-circle' />
 				<i className='fas fa-circle' />
@@ -100,19 +95,19 @@ const SplitPane = (props)=>{
 			<Pane width={dividerPos} moveBrew={moveBrew} moveSource={moveSource} liveScroll={liveScroll} setMoveArrows={setShowMoveArrows}>
 				{props.children[0]}
 			</Pane>
-			{renderDivider()}
+			{renderDivider}
 			<Pane isDragging={isDragging}>{props.children[1]}</Pane>
 		</div>
 	);
 };
 
-const Pane = ({ width, children, isDragging, className, moveBrew, moveSource, liveScroll, setMoveArrows })=>{
+const Pane = ({ width, children, isDragging, moveBrew, moveSource, liveScroll, setMoveArrows })=>{
 	const styles = width
 		? { flex: 'none', width: `${width}px` }
-		: { pointerEvents: isDragging ? 'none' : 'auto' };
+		: { pointerEvents: isDragging ? 'none' : 'auto' }; //Disable mouse capture in the right pane; else dragging into the iframe drops the divider
 
 	return (
-		<div className={cx('pane', className)} style={styles}>
+		<div className='pane' style={styles}>
 			{React.cloneElement(children, { moveBrew, moveSource, liveScroll, setMoveArrows })}
 		</div>
 	);