From d403a71a2757d250eb1f30dca0930807e792bc96 Mon Sep 17 00:00:00 2001
From: samueljd <samuelj.ernest@gmail.com>
Date: Tue, 12 Sep 2023 18:24:59 +0530
Subject: [PATCH] fixed title and headings editable in reference bible

---
 .../EditorPage/Scribex/RecursiveBlock.jsx     |  2 +
 .../EditorPage/Scribex/ReferenceEditor.jsx    |  9 +++
 .../Scribex/ReferenceRecursiveBlock.jsx       | 80 +++++++++++++++++++
 styles/globals.css                            |  8 +-
 4 files changed, 95 insertions(+), 4 deletions(-)
 create mode 100644 renderer/src/components/EditorPage/Scribex/ReferenceRecursiveBlock.jsx

diff --git a/renderer/src/components/EditorPage/Scribex/RecursiveBlock.jsx b/renderer/src/components/EditorPage/Scribex/RecursiveBlock.jsx
index f0998d5c6..5d0db3bd3 100644
--- a/renderer/src/components/EditorPage/Scribex/RecursiveBlock.jsx
+++ b/renderer/src/components/EditorPage/Scribex/RecursiveBlock.jsx
@@ -115,6 +115,8 @@ export default function RecursiveBlock({
         addSequenceId,
         htmlPerf,
         onHtmlPerf,
+				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 9c144b7f8..7538278a9 100644
--- a/renderer/src/components/EditorPage/Scribex/ReferenceEditor.jsx
+++ b/renderer/src/components/EditorPage/Scribex/ReferenceEditor.jsx
@@ -7,6 +7,7 @@ import SaveIndicator from '@/components/Loading/SaveIndicator';
 import { ReferenceContext } from '@/components/context/ReferenceContext';
 import { ProjectContext } from '@/components/context/ProjectContext';
 import EmptyScreen from '@/components/Loading/EmptySrceen';
+import ReferenceRecursiveBlock from './ReferenceRecursiveBlock';
 
 export default function ReferenceEditor(props) {
   const {
@@ -90,6 +91,14 @@ export default function ReferenceEditor(props) {
       editable,
       preview,
     },
+		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
new file mode 100644
index 000000000..566539ab6
--- /dev/null
+++ b/renderer/src/components/EditorPage/Scribex/ReferenceRecursiveBlock.jsx
@@ -0,0 +1,80 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-unused-vars */
+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 { target } = div.firstChild?.dataset || {};
+
+	return target;
+};
+
+export default function ReferenceRecursiveBlock({
+	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;
+			}
+		}
+	};
+
+	let component;
+
+	let editable = !!content.match(/data-type="paragraph"/);
+
+	if (editable) {
+		component = (
+			<div
+				contentEditable={contentEditable}
+				onKeyUp={checkReturnKeyPress}
+				{...props}
+			/>
+		);
+	}
+
+	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}</>;
+}
diff --git a/styles/globals.css b/styles/globals.css
index 50539d751..83d9cdb90 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -57,13 +57,13 @@
 .heading .ms {
 	@apply uppercase text-lg tracking-wider text-primary;
 }
-.title .mt {
+/* .title .mt {
 	@apply hidden;
-}
+} */
 
-.sectionBody .s {
+/* .sectionBody .ms {
 	@apply hidden;
-}
+} */
 .editor *[contenteditable='true']:focus {
 	@apply bg-primary-50 outline-none rounded-sm;
 }