Import blog post flow

src/bus/AppBus.ts

@@ -0,0 +1,49 @@
+import { Listener, Message, Namespace } from '@/bus/Message';
+
+enum Actions {
+	ElementClicked = 1,
+}
+
+async function elementClicked( content: string ): Promise< void > {
+	return sendMessageToApp( {
+		action: Actions.ElementClicked,
+		payload: { content },
+	} );
+}
+
+export const AppBus = {
+	namespace: `${ Namespace }_APP`,
+	actions: Actions,
+	listen,
+	stopListening,
+	elementClicked,
+};
+
+let listener: Listener;
+
+function listen( list: Listener ) {
+	stopListening();
+	listener = ( message: Message ) => {
+		if ( message.namespace !== AppBus.namespace ) {
+			return;
+		}
+		list( message );
+	};
+	browser.runtime.onMessage.addListener( listener );
+}
+
+function stopListening() {
+	if ( listener ) {
+		browser.runtime.onMessage.removeListener( listener );
+	}
+}
+async function sendMessageToApp(
+	message: Omit< Message, 'namespace' >
+): Promise< void > {
+	const messageWithNamespace: Message = {
+		namespace: AppBus.namespace,
+		action: message.action,
+		payload: message.payload,
+	};
+	await browser.runtime.sendMessage( messageWithNamespace );
+}

src/bus/ContentBus.ts

@@ -0,0 +1,74 @@
+import { Listener, Message, Namespace } from '@/bus/Message';
+
+enum Actions {
+	EnableHighlighting = 1,
+	DisableHighlighting,
+}
+
+async function enableHighlighting(): Promise< void > {
+	return sendMessageToContent( {
+		action: Actions.EnableHighlighting,
+		payload: {},
+	} );
+}
+
+async function disableHighlighting(): Promise< void > {
+	return sendMessageToContent( {
+		action: Actions.DisableHighlighting,
+		payload: {},
+	} );
+}
+
+export const ContentBus = {
+	namespace: `${ Namespace }_CONTENT`,
+	actions: Actions,
+	listen,
+	stopListening,
+	enableHighlighting,
+	disableHighlighting,
+};
+
+let listener: Listener;
+
+function listen( list: Listener ) {
+	stopListening();
+	listener = ( message: Message ) => {
+		if ( message.namespace !== ContentBus.namespace ) {
+			return;
+		}
+		list( message );
+	};
+	browser.runtime.onMessage.addListener( listener );
+}
+
+function stopListening() {
+	if ( listener ) {
+		browser.runtime.onMessage.removeListener( listener );
+	}
+}
+
+async function sendMessageToContent(
+	message: Omit< Message, 'namespace' >
+): Promise< void > {
+	const currentTabId = await getCurrentTabId();
+	if ( ! currentTabId ) {
+		throw Error( 'current tab not found' );
+	}
+	const messageWithNamespace: Message = {
+		namespace: ContentBus.namespace,
+		action: message.action,
+		payload: message.payload,
+	};
+	await browser.tabs.sendMessage( currentTabId, messageWithNamespace );
+}
+
+async function getCurrentTabId(): Promise< number | undefined > {
+	const tabs = await browser.tabs.query( {
+		currentWindow: true,
+		active: true,
+	} );
+	if ( tabs.length !== 1 ) {
+		return;
+	}
+	return tabs[ 0 ]?.id;
+}

src/bus/Message.ts

@@ -0,0 +1,9 @@
+export const Namespace = 'TRY_WORDPRESS';
+
+export interface Message {
+	namespace: string;
+	action: number;
+	payload: object;
+}
+
+export type Listener = ( message: Message ) => void;

src/extension/content.ts

@@ -0,0 +1,85 @@
+import { Message } from '@/bus/Message';
+import { ContentBus } from '@/bus/ContentBus';
+import { AppBus } from '@/bus/AppBus';
+
+let currentElement: HTMLElement | null = null;
+
+ContentBus.listen( ( message: Message ) => {
+	switch ( message.action ) {
+		case ContentBus.actions.EnableHighlighting:
+			document.body.addEventListener( 'mouseover', onMouseOver );
+			document.body.addEventListener( 'mouseout', onMouseOut );
+			document.body.addEventListener( 'click', onClick );
+			enableHighlightingCursor();
+			break;
+		case ContentBus.actions.DisableHighlighting:
+			document.body.removeEventListener( 'mouseover', onMouseOver );
+			document.body.removeEventListener( 'mouseout', onMouseOut );
+			document.body.removeEventListener( 'click', onClick );
+			disableHighlightingCursor();
+			removeStyle();
+			break;
+		default:
+			console.error( `Unknown action: ${ message.action }` );
+			break;
+	}
+} );
+
+function onClick( event: MouseEvent ) {
+	event.preventDefault();
+	const element = event.target as HTMLElement;
+	if ( ! element ) {
+		return;
+	}
+	const clone = element.cloneNode( true ) as HTMLElement;
+	clone.style.outline = '';
+	let content = clone.outerHTML.trim();
+	content = content.replaceAll( ' style=""', '' );
+	void AppBus.elementClicked( content );
+}
+
+function onMouseOver( event: MouseEvent ) {
+	const element = event.target as HTMLElement | null;
+	if ( ! element ) {
+		return;
+	}
+	currentElement = element;
+	currentElement.style.outline = '1px solid blue';
+}
+
+function onMouseOut( event: MouseEvent ) {
+	const element = event.target as HTMLElement | null;
+	if ( ! element ) {
+		return;
+	}
+	removeStyle();
+	currentElement = null;
+}
+
+function removeStyle() {
+	if ( ! currentElement ) {
+		return;
+	}
+	currentElement.style.outline = '';
+}
+
+const cursorStyleId = 'hover-highlighter-style';
+
+function enableHighlightingCursor() {
+	let style = document.getElementById( cursorStyleId );
+	if ( style ) {
+		// The highlighting cursor is already enabled.
+		return;
+	}
+	style = document.createElement( 'style' );
+	style.id = cursorStyleId;
+	style.textContent = '* { cursor: crosshair !important; }';
+	document.head.append( style );
+}
+
+function disableHighlightingCursor() {
+	const style = document.getElementById( cursorStyleId );
+	if ( style ) {
+		style.remove();
+	}
+}

src/ui/App.tsx

@@ -20,11 +20,14 @@ import { getSession, listSessions, Session } from '@/storage/session';
 import { PlaceholderPreview } from '@/ui/preview/PlaceholderPreview';
 import { SessionContext, SessionProvider } from '@/ui/session/SessionProvider';
 import { ApiClient } from '@/api/ApiClient';
+import { BlogPostFlow } from '@/ui/flows/blog-post/BlogPostFlow';
 
 export const Screens = {
 	home: () => '/start/home',
 	newSession: () => '/start/new-session',
-	viewSession: ( id: string ) => `/session/${ id }`,
+	viewSession: ( sessionId: string ) => `/session/${ sessionId }`,
+	flowBlogPost: ( sessionId: string ) =>
+		`/session/${ sessionId }/flow/blog-post`,
 };
 
 const homeLoader: LoaderFunction = async () => {
@@ -63,6 +66,9 @@ function Routes( props: { initialScreen: string } ) {
 				loader={ sessionLoader }
 			>
 				<Route path="" element={ <ViewSession /> } />
+				<Route path="flow">
+					<Route path="blog-post" element={ <BlogPostFlow /> } />
+				</Route>
 			</Route>
 		</Route>
 	);

src/ui/flows/blog-post/BlogPostFlow.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import { Start } from '@/ui/flows/blog-post/Start';
+import { SelectContent } from '@/ui/flows/blog-post/SelectContent';
+import { Finish } from '@/ui/flows/blog-post/Finish';
+
+enum Steps {
+	start = 1,
+	selectContent,
+	finish,
+}
+
+export function BlogPostFlow() {
+	const [ currentStep, setCurrentStep ] = useState( Steps.start );
+
+	return (
+		<>
+			{ currentStep !== Steps.start ? null : (
+				<Start onExit={ () => setCurrentStep( Steps.selectContent ) } />
+			) }
+			{ currentStep !== Steps.selectContent ? null : (
+				<SelectContent
+					onExit={ () => setCurrentStep( Steps.finish ) }
+				/>
+			) }
+			{ currentStep !== Steps.finish ? null : <Finish /> }
+		</>
+	);
+}

src/ui/flows/blog-post/Finish.tsx

@@ -0,0 +1,7 @@
+export function Finish() {
+	return (
+		<>
+			<span>The post has been imported</span>
+		</>
+	);
+}