diff --git a/renderer/src/components/EditorPage/ObsEditor/ObsImage.jsx b/renderer/src/components/EditorPage/ObsEditor/ObsImage.jsx
index 5c682b8f4..87924ba70 100644
--- a/renderer/src/components/EditorPage/ObsEditor/ObsImage.jsx
+++ b/renderer/src/components/EditorPage/ObsEditor/ObsImage.jsx
@@ -4,32 +4,15 @@ import packageInfo from '../../../../../package.json';
 import { newPath } from '../../../../../supabase';
 
 function ObsImage({ story, online }) {
-	const path = require('path');
-	const newpath = localStorage.getItem('userPath');
-	const imageName = story.img.split('/');
-	const fileName = imageName[imageName.length - 1];
-	const obsImagePath = isElectron()
-		? path.join(
-				'file://',
-				newpath,
-				packageInfo.name,
-				'common',
-				environment.OBS_IMAGE_DIR,
-				fileName,
-		  )
-		: path.join(
-				newPath,
-				packageInfo.name,
-				'common',
-				environment.OBS_IMAGE_DIR,
-				fileName,
-		  );
+  const path = require('path');
+  const newpath = localStorage.getItem('userPath');
+  const imageName = story.img.split('/');
+  const fileName = imageName[imageName.length - 1];
+  const obsImagePath = isElectron() ? path.join('file://', newpath, packageInfo.name, 'common', environment.OBS_IMAGE_DIR, fileName)
+    : path.join(newPath, packageInfo.name, 'common', environment.OBS_IMAGE_DIR, fileName);
 
-	return online ? (
-		<img className='w-1/4 rounded-lg' src={story.img} alt='' />
-	) : (
-		<img className='w-1/4 rounded-lg' src={obsImagePath} alt='offline' />
-	);
+  return online ? (
+    <img className="w-1/4 rounded-lg" src={story.img} alt="" />) : (<img className="w-1/4 rounded-lg" src={obsImagePath} alt="offline" />);
 }
 
 export default ObsImage;
diff --git a/renderer/src/components/EditorPage/Scribex/RecursiveBlock.jsx b/renderer/src/components/EditorPage/Scribex/RecursiveBlock.jsx
index 5d0db3bd3..921136d7a 100644
--- a/renderer/src/components/EditorPage/Scribex/RecursiveBlock.jsx
+++ b/renderer/src/components/EditorPage/Scribex/RecursiveBlock.jsx
@@ -115,8 +115,8 @@ export default function RecursiveBlock({
         addSequenceId,
         htmlPerf,
         onHtmlPerf,
-				onInput: props?.onInput,
-				options,
+        onInput: props?.onInput,
+        options,
       };
       component = <HtmlPerfEditor {..._props} />;
     }
diff --git a/renderer/src/components/EditorPage/Scribex/ReferenceEditor.jsx b/renderer/src/components/EditorPage/Scribex/ReferenceEditor.jsx
index 7538278a9..ba07cf85b 100644
--- a/renderer/src/components/EditorPage/Scribex/ReferenceEditor.jsx
+++ b/renderer/src/components/EditorPage/Scribex/ReferenceEditor.jsx
@@ -91,14 +91,13 @@ export default function ReferenceEditor(props) {
       editable,
       preview,
     },
-		components: {
-			block: (__props) =>
-				ReferenceRecursiveBlock({
-					htmlPerf,
-					sequenceIds,
-					...__props,
-				}),
-		},
+    components: {
+      block: (__props) => ReferenceRecursiveBlock({
+          htmlPerf,
+          sequenceIds,
+          ...__props,
+        }),
+    },
     decorators: {},
     verbose,
     handlers,
diff --git a/renderer/src/components/EditorPage/Scribex/ReferenceRecursiveBlock.jsx b/renderer/src/components/EditorPage/Scribex/ReferenceRecursiveBlock.jsx
index 566539ab6..20225b684 100644
--- a/renderer/src/components/EditorPage/Scribex/ReferenceRecursiveBlock.jsx
+++ b/renderer/src/components/EditorPage/Scribex/ReferenceRecursiveBlock.jsx
@@ -4,77 +4,71 @@ import React, { useEffect, useState } from 'react';
 import { HtmlPerfEditor } from '@xelah/type-perf-html';
 
 const getTarget = ({ content }) => {
-	const div = document.createElement('div');
-	div.innerHTML = content;
+  const div = document.createElement('div');
+  div.innerHTML = content;
 
-	const { target } = div.firstChild?.dataset || {};
+  const { target } = div.firstChild?.dataset || {};
 
-	return target;
+  return target;
 };
 
 export default function ReferenceRecursiveBlock({
-	htmlPerf,
-	onHtmlPerf,
-	sequenceIds,
-	addSequenceId,
-	options,
-	content,
-	style,
-	contentEditable,
-	index,
-	verbose,
-	setFootNote,
-	...props
+  htmlPerf,
+  onHtmlPerf,
+  sequenceIds,
+  addSequenceId,
+  options,
+  content,
+  style,
+  contentEditable,
+  index,
+  verbose,
+  setFootNote,
+  ...props
 }) {
-	useEffect(() => {
-		if (verbose) console.log('Block: Mount/First Render', index);
-		return () => {
-			if (verbose) console.log('Block: UnMount/Destroyed', index);
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-	console.log({ contentEditable });
-	const checkReturnKeyPress = (event) => {
-		if (event.key === 'Enter') {
-			let activeTextArea = document.activeElement;
-			if (activeTextArea.children.length > 1) {
-				const lineBreak = activeTextArea.children[1]?.outerHTML;
-				const newLine = lineBreak.replace(/<br\s*\/?>/gi, '&nbsp');
-				activeTextArea.children[1].outerHTML = newLine;
-			}
-		}
-	};
+  const checkReturnKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      const activeTextArea = document.activeElement;
+      if (activeTextArea.children.length > 1) {
+        const lineBreak = activeTextArea.children[1]?.outerHTML;
+        const newLine = lineBreak.replace(/<br\s*\/?>/gi, '&nbsp');
+        activeTextArea.children[1].outerHTML = newLine;
+      }
+    }
+  };
 
-	let component;
+  let component;
 
-	let editable = !!content.match(/data-type="paragraph"/);
+  const editable = !!content.match(/data-type="paragraph"/);
 
-	if (editable) {
-		component = (
-			<div
-				contentEditable={contentEditable}
-				onKeyUp={checkReturnKeyPress}
-				{...props}
-			/>
-		);
-	}
+  if (editable) {
+    component = (
+      <div
+        role="textbox"
+        contentEditable={contentEditable}
+        onKeyUp={checkReturnKeyPress}
+        {...props}
+        tabIndex={0}
+      />
+    );
+  }
 
-	if (!editable) {
-		const sequenceId = getTarget({ content });
+  if (!editable) {
+    const sequenceId = getTarget({ content });
 
-		if (sequenceId && !options.preview) {
-			const _props = {
-				sequenceIds: [...sequenceIds, sequenceId],
-				addSequenceId,
-				htmlPerf,
-				onHtmlPerf,
-				onInput: props?.onInput,
-				options,
-			};
-			component = <HtmlPerfEditor {..._props} />;
-		}
-		component ||= <div {...props} contentEditable={false} />;
-	}
-
-	return <>{component}</>;
+    if (sequenceId && !options.preview) {
+      const _props = {
+        sequenceIds: [...sequenceIds, sequenceId],
+        addSequenceId,
+        htmlPerf,
+        onHtmlPerf,
+        onInput: props?.onInput,
+        options,
+      };
+      component = <HtmlPerfEditor {..._props} />;
+    }
+    component ||= <div {...props} contentEditable={false} />;
+  }
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{component}</>;
 }