Merge pull request #165 from sevenxhq/fix/title-heading-editable

Fixed title and headings editable in reference bible

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} />;
     }

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,

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}</>;
+}

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;
 }