T360286: Sections

src/link/inline.js

@@ -6,7 +6,7 @@
 import { getTextContent, slice } from '@wordpress/rich-text';
 import { useState, useEffect, createRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { getSiteLanguage } from './utils';
+import { getSiteLanguage, titleWithoutSection } from './utils';
 import { prefixSearch, fulltextSearch, abortAllRequest } from './api';
 import { LanguageSelector } from './language-selector';
 
@@ -28,7 +28,7 @@
 	useEffect( () => {
 		setTitle( activeAttributes.title || getTextContent( slice( value ) ) );
 		setLang( activeAttributes.lang || getSiteLanguage() );
 	}, [ activeAttributes ] );
 
 	useEffect( () => {
 		if ( title ) {
@@ -76,7 +76,7 @@
 								langCodeAdjustment ? 'lang-code-adjustment' : ''
 							}` }
 							ref={ inputRef }
-							value={ title }
+							value={ titleWithoutSection( title ) }
 							onChange={ setTitle }
 							onFocus={ () => setFocused( true ) }
 							onBlur={ () => setFocused( false ) }

src/link/popover.js

@@ -35,7 +35,7 @@
 		if ( e.target.className === 'components-popover__content' ) {
 			stopViewingPreview();
 		}
 	}, [] );
 
 	const setPlacement = () => {
 		if ( isTextNearTheEdge( anchor ) ) {
@@ -69,10 +69,12 @@
 			) }
 			{ viewingPreview && (
 				<PreviewEditUI
-					onEdit={ goToEdit }
+					onEditTopic={ goToEdit }
 					onRemove={ removeAttributes }
 					onForceClose={ stopViewingPreview }
 					activeAttributes={ activeAttributes }
+					updateAttributes={ updateAttributes }
+					value={ value }
 				/>
 			) }
 		</Popover>

src/link/preview.js

@@ -5,20 +5,59 @@
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import wikipediaPreview from 'wikipedia-preview';
+import { Sections } from './sections';
 
 export const PreviewEditUI = ( {
-	activeAttributes,
-	onForceClose,
-	onEdit,
+	onEditTopic,
 	onRemove,
+	onForceClose,
+	activeAttributes,
+	updateAttributes,
+	value,
 } ) => {
 	const [ previewHtml, setPreviewHtml ] = useState( null );
+	const [ selectingSection, setSelectingSection ] = useState( false );
 	const [ showControllersMenu, setShowControllersMenu ] = useState( true );
 	const toggleControllersMenu = () => {
 		/* eslint-disable-next-line no-shadow */
 		setShowControllersMenu( ( showControllersMenu ) => ! showControllersMenu );
 	};
 
+	const showSections = () => {
+		setSelectingSection( true );
+	};
+
+	const insertControllersMenu = () => {
+		const preview = document.querySelector( '.wikipediapreview' );
+		const previewHeader = document.querySelector(
+			'.wikipediapreview-header'
+		);
+		const previewHeaderCloseBtn = document.querySelector(
+			'.wikipediapreview-header-closebtn'
+		);
+		const controllersMenu = document.createElement( 'div' );
+		controllersMenu.setAttribute(
+			'class',
+			'wikipediapreview-edit-preview-controllers-menu'
+		);
+		controllersMenu.addEventListener( 'click', toggleControllersMenu );
+		setShowControllersMenu( false );
+
+		if ( previewHeader ) {
+			previewHeader.insertBefore(
+				controllersMenu,
+				previewHeaderCloseBtn
+			);
+		}
+
+		// special handle to set the container direction
+		if ( preview ) {
+			document
+				.querySelector( '.wikipediapreview-edit-preview-container' )
+				.setAttribute( 'dir', preview.getAttribute( 'dir' ) );
+		}
+	};
+
 	useEffect( () => {
 		const { title, lang } = activeAttributes;
 		if ( title && lang ) {
@@ -30,34 +69,9 @@
 
 	useEffect( () => {
 		if ( isPopoverExpanded() ) {
-			const preview = document.querySelector( '.wikipediapreview' );
-			const previewHeader = document.querySelector(
-				'.wikipediapreview-header'
-			);
-			const previewHeaderCloseBtn = document.querySelector(
-				'.wikipediapreview-header-closebtn'
-			);
-			const controllersMenu = document.createElement( 'div' );
-			controllersMenu.setAttribute(
-				'class',
-				'wikipediapreview-edit-preview-controllers-menu'
-			);
-			controllersMenu.addEventListener( 'click', toggleControllersMenu );
-			setShowControllersMenu( false );
-
-			if ( previewHeader ) {
-				previewHeader.insertBefore(
-					controllersMenu,
-					previewHeaderCloseBtn
-				);
-			}
-
-			// special handle to set the container direction
-			if ( preview ) {
-				document
-					.querySelector( '.wikipediapreview-edit-preview-container' )
-					.setAttribute( 'dir', preview.getAttribute( 'dir' ) );
-			}
+			// The parent header div (where the menu needs to be inserted)
+			// comes from previewHtml so we need to construct the menu on the fly
+			insertControllersMenu();
 
 			return () => {
 				document
@@ -67,7 +81,7 @@
 					?.removeEventListener( 'click', toggleControllersMenu );
 			};
 		}
-	}, [ previewHtml ] );
+	}, [ previewHtml, selectingSection ] );
 
 	useLayoutEffect( () => {
 		document
@@ -78,18 +92,30 @@
 				.querySelector( '.wikipediapreview-header-closebtn' )
 				?.removeEventListener( 'click', onForceClose );
 		};
-	}, [ previewHtml ] );
+	}, [ previewHtml, selectingSection ] );
 
 	return (
-		<div className="wikipediapreview-edit-preview-container">
-			<div
-				className="wikipediapreview-edit-preview"
-				dangerouslySetInnerHTML={ { __html: previewHtml } }
-			></div>
-			{ previewHtml && showControllersMenu && (
-				<ControllerEditUI onEdit={ onEdit } onRemove={ onRemove } />
+		<>
+			{ ! selectingSection ? (
+				<div className="wikipediapreview-edit-preview-container">
+					<div
+						className="wikipediapreview-edit-preview"
+						dangerouslySetInnerHTML={ { __html: previewHtml } }
+					></div>
+					{ previewHtml && showControllersMenu && (
+						<ControllerEditUI onEditTopic={ onEditTopic } onEditSection={ showSections } onRemove={ onRemove } />
+					) }
+				</div>
+			) : (
+				<Sections
+					value={ value }
+					updateAttributes={ updateAttributes }
+					activeAttributes={ activeAttributes }
+					setPreviewHtml={ setPreviewHtml }
+					setSelectingSection={ setSelectingSection }
+				/>
 			) }
-		</div>
+		</>
 	);
 };
 
@@ -101,22 +127,38 @@
 	return hasPreviewPopup && hasExpandedClass;
 };
 
-const ControllerEditUI = ( { onEdit, onRemove } ) => {
+const ControllerEditUI = ( { onEditTopic, onEditSection, onRemove } ) => {
 	return (
 		<div className="wikipediapreview-edit-preview-controllers">
 			<div
-				className="wikipediapreview-edit-preview-controllers-change"
-				onClick={ onEdit }
+				className="wikipediapreview-edit-preview-controllers-option"
+				onClick={ onEditTopic }
+				role="presentation"
+			>
+				<div className="wikipediapreview-edit-preview-controllers-option-icon-change"></div>
+				<div className="wikipediapreview-edit-preview-controllers-option-message">
+					{ __( 'Topic', 'wikipedia-preview' ) }
+				</div>
+			</div>
+			<div
+				className="wikipediapreview-edit-preview-controllers-option"
+				onClick={ onEditSection }
 				role="presentation"
 			>
-				{ __( 'Change', 'wikipedia-preview' ) }
+				<div className="wikipediapreview-edit-preview-controllers-option-icon-sections"></div>
+				<div className="wikipediapreview-edit-preview-controllers-option-message">
+					{ __( 'Sections', 'wikipedia-preview' ) }
+				</div>
 			</div>
 			<div
-				className="wikipediapreview-edit-preview-controllers-remove"
+				className="wikipediapreview-edit-preview-controllers-option"
 				onClick={ onRemove }
 				role="presentation"
 			>
-				{ __( 'Remove', 'wikipedia-preview' ) }
+				<div className="wikipediapreview-edit-preview-controllers-option-icon-remove"></div>
+				<div className="wikipediapreview-edit-preview-controllers-option-message">
+					{ __( 'Remove', 'wikipedia-preview' ) }
+				</div>
 			</div>
 		</div>
 	);