From f8853e666f4fb7ef56e904910f8f3a3b7e20a9a7 Mon Sep 17 00:00:00 2001
From: sijumoncy <72241997+sijumoncy@users.noreply.github.com>
Date: Wed, 29 May 2024 09:19:52 +0530
Subject: [PATCH 1/6] font state change for reference - test

---
 .../components/ReferenceSelector.js            | 13 +++++++++++--
 .../EditorPage/ObsEditor/ReferenceObs.js       |  5 +++--
 .../EditorPage/ObsEditor/WebReferenceObs.js    |  2 +-
 .../EditorPage/Reference/ReferenceCard.js      |  8 +++++++-
 .../EditorPage/Reference/TranslationHelps.js   | 13 ++++++++++++-
 .../Reference/TranslationHelpsCard.js          |  2 ++
 .../src/components/context/ReferenceContext.js | 18 +++++++++++++++---
 7 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/renderer/src/components/AudioRecorder/components/ReferenceSelector.js b/renderer/src/components/AudioRecorder/components/ReferenceSelector.js
index be9e05d6b..2268d8382 100644
--- a/renderer/src/components/AudioRecorder/components/ReferenceSelector.js
+++ b/renderer/src/components/AudioRecorder/components/ReferenceSelector.js
@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 
 const AudioWaveform = dynamic(() => import('./WaveForm'), { ssr: false });
 
-export default function ReferenceSelector({ data, versepath, verse }) {
+export default function ReferenceSelector({
+ data, versepath, verse, font, fontSize,
+}) {
   const path = require('path');
   return (
     <div className="bg-white col-span-3 m-3 rounded-md shadow overflow-hidden">
@@ -21,7 +23,14 @@ export default function ReferenceSelector({ data, versepath, verse }) {
                   {story.verseNumber}
                 </div>
               </div>
-              <p className="text-sm text-gray-600 leading-relaxed">
+              <p
+                className="text-sm text-gray-600 leading-relaxed"
+                style={{
+                fontFamily: font || 'sans-serif',
+                fontSize: `${fontSize}rem`,
+                lineHeight: (fontSize > 1.3) ? 1.5 : '',
+              }}
+              >
                 {story.verseText}
               </p>
             </div>
diff --git a/renderer/src/components/EditorPage/ObsEditor/ReferenceObs.js b/renderer/src/components/EditorPage/ObsEditor/ReferenceObs.js
index ab236fddc..376ddb769 100644
--- a/renderer/src/components/EditorPage/ObsEditor/ReferenceObs.js
+++ b/renderer/src/components/EditorPage/ObsEditor/ReferenceObs.js
@@ -18,14 +18,15 @@ const style = {
     fontStyle: 'italic',
   },
 };
-const ReferenceObs = ({ stories, font, title }) => {
+const ReferenceObs = ({
+ stories, font, title, fontSize,
+}) => {
   const [isLoading, setIsLoading] = useState(true);
   const [direction, setDirection] = useState('ltr');
   const [networkState, setNetworkState] = useState({ online: true });
   const {
  state: {
     selectedStory,
-    fontSize,
   },
   actions: {
     setSelectedStory,
diff --git a/renderer/src/components/EditorPage/ObsEditor/WebReferenceObs.js b/renderer/src/components/EditorPage/ObsEditor/WebReferenceObs.js
index 9135e95c4..88700360a 100644
--- a/renderer/src/components/EditorPage/ObsEditor/WebReferenceObs.js
+++ b/renderer/src/components/EditorPage/ObsEditor/WebReferenceObs.js
@@ -26,7 +26,7 @@ const ReferenceObs = ({ stories }) => {
  state: {
     selectedStory,
     selectedFont,
-    fontSize,
+    fontSize1: fontSize,
   },
   actions: {
     setSelectedStory,
diff --git a/renderer/src/components/EditorPage/Reference/ReferenceCard.js b/renderer/src/components/EditorPage/Reference/ReferenceCard.js
index c3de35bb1..e3b93af7e 100644
--- a/renderer/src/components/EditorPage/Reference/ReferenceCard.js
+++ b/renderer/src/components/EditorPage/Reference/ReferenceCard.js
@@ -15,6 +15,7 @@ const ReferenceCard = ({
   font,
   setResetTrigger,
   resetTrigger,
+  fontSize,
 }) => {
   const {
     state: {
@@ -43,7 +44,12 @@ const ReferenceCard = ({
         setItemIndex={setItemIndex}
       />
     )}
-      <div style={{ fontFamily: font || 'sans-serif' }}>
+      <div style={{
+          fontFamily: font || 'sans-serif',
+          fontSize: `${fontSize}rem`,
+          lineHeight: (fontSize > 1.3) ? 1.5 : '',
+        }}
+      >
         <CardContent
           item={item}
           items={items}
diff --git a/renderer/src/components/EditorPage/Reference/TranslationHelps.js b/renderer/src/components/EditorPage/Reference/TranslationHelps.js
index fcbac2c0f..08c15df1e 100644
--- a/renderer/src/components/EditorPage/Reference/TranslationHelps.js
+++ b/renderer/src/components/EditorPage/Reference/TranslationHelps.js
@@ -7,7 +7,7 @@ import ObsTnCard from './OBS/ObsTn';
 import ObsTwlCard from './OBS/ObsTwlCard';
 
 const TranslationHelps = ({
- selectedResource, languageId, refName, bookId, chapter, verse, owner, story, offlineResource, font,
+ selectedResource, languageId, refName, bookId, chapter, verse, owner, story, offlineResource, font, fontSize,
 }) => {
   const {
     state: {
@@ -40,6 +40,7 @@ const TranslationHelps = ({
               server="https://git.door43.org"
               offlineResource={offlineResource}
               font={font}
+              fontSize={fontSize}
             />
           );
         case 'twl':
@@ -56,6 +57,7 @@ const TranslationHelps = ({
               owner="test_org"
               server="https://git.door43.org"
               font={font}
+              fontSize={fontSize}
             />
           );
         case 'twlm':
@@ -72,6 +74,7 @@ const TranslationHelps = ({
               owner={owner}
               server="https://git.door43.org"
               font={font}
+              fontSize={fontSize}
             />
             );
         case 'tq':
@@ -90,6 +93,7 @@ const TranslationHelps = ({
               server="https://git.door43.org"
               offlineResource={offlineResource}
               font={font}
+              fontSize={fontSize}
             />
           );
         case 'tw':
@@ -106,6 +110,7 @@ const TranslationHelps = ({
               server="https://git.door43.org"
               offlineResource={offlineResource}
               font={font}
+              fontSize={fontSize}
             />
             );
         case 'ta':
@@ -123,6 +128,7 @@ const TranslationHelps = ({
               server="https://git.door43.org"
               offlineResource={offlineResource}
               font={font}
+              fontSize={fontSize}
             />
             );
         case 'bible':
@@ -135,6 +141,7 @@ const TranslationHelps = ({
               chapter={chapter}
               verse={verse}
               font={font}
+              fontSize={fontSize}
             />
           );
         case 'obs':
@@ -147,6 +154,7 @@ const TranslationHelps = ({
               chapter={chapter}
               verse={verse}
               font={font}
+              fontSize={fontSize}
             />
           );
         case 'obs-tn':
@@ -163,6 +171,7 @@ const TranslationHelps = ({
               server="https://git.door43.org"
               offlineResource={offlineResource}
               font={font}
+              fontSize={fontSize}
             />
           );
         case 'obs-tq':
@@ -179,6 +188,7 @@ const TranslationHelps = ({
               server="https://git.door43.org"
               offlineResource={offlineResource}
               font={font}
+              fontSize={fontSize}
             />
           );
           case 'obs-twlm':
@@ -195,6 +205,7 @@ const TranslationHelps = ({
               server="https://git.door43.org"
               offlineResource={offlineResource}
               font={font}
+              fontSize={fontSize}
             />
           );
         default:
diff --git a/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js b/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js
index 1b15f9323..425db8547 100644
--- a/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js
+++ b/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js
@@ -32,6 +32,7 @@ export default function TranslationHelpsCard({
   viewMode,
   offlineResource,
   font,
+  fontSize,
 }) {
   const [offlineItems, setOfflineItems] = useState([]);
   const [offlineItemsDisable, setOfflineItemsDisable] = useState(false);
@@ -271,6 +272,7 @@ export default function TranslationHelpsCard({
           selectedQuote={selectedQuote}
           setQuote={setQuote}
           font={font}
+          fontSize={fontSize}
           setResetTrigger={setResetTrigger}
           resetTrigger={resetTrigger}
         />
diff --git a/renderer/src/components/context/ReferenceContext.js b/renderer/src/components/context/ReferenceContext.js
index 22a1183aa..a55cc39f5 100644
--- a/renderer/src/components/context/ReferenceContext.js
+++ b/renderer/src/components/context/ReferenceContext.js
@@ -37,7 +37,11 @@ export default function ReferenceContextProvider({ children }) {
   const [font2, setFont2] = useState('sans-serif');
   const [font3, setFont3] = useState('sans-serif');
   const [font4, setFont4] = useState('sans-serif');
-  const [fontSize, setFontsize] = React.useState(1);
+  const [editorFontSize, setEditorFontSize] = React.useState(1);
+  const [fontSize1, setFontsize1] = React.useState(1);
+  const [fontSize2, setFontsize2] = React.useState(1);
+  const [fontSize3, setFontsize3] = React.useState(1);
+  const [fontSize4, setFontsize4] = React.useState(1);
   const [layout, setLayout] = useState(0);
   const [row, setRow] = useState(0);
   const [refernceLoading, setRefernceLoading] = useState({
@@ -196,7 +200,11 @@ export default function ReferenceContextProvider({ children }) {
       font2,
       font3,
       font4,
-      fontSize,
+      fontSize1,
+      fontSize2,
+      fontSize3,
+      fontSize4,
+      editorFontSize,
       layout,
       row,
       refernceLoading,
@@ -244,7 +252,11 @@ export default function ReferenceContextProvider({ children }) {
       setFont2,
       setFont3,
       setFont4,
-      setFontsize,
+      setEditorFontSize,
+      setFontsize1,
+      setFontsize2,
+      setFontsize3,
+      setFontsize4,
       setLayout,
       setRow,
       setRefernceLoading,

From c51fe26cccf452d18a464ca4e4568cbcb564fab8 Mon Sep 17 00:00:00 2001
From: sijumoncy <72241997+sijumoncy@users.noreply.github.com>
Date: Wed, 29 May 2024 09:20:31 +0530
Subject: [PATCH 2/6] all panes changed with icons

---
 .../EditorPage/AudioEditor/AudioEditor.js     |  5 +-
 .../EditorPage/ObsEditor/EditorPanel.js       | 13 ++--
 .../Reference/Audio/ReferenceAudio.js         |  4 ++
 .../Reference/OBS/ObsResourceCard.js          |  8 ++-
 .../EditorPage/Reference/OBS/ObsTn.js         |  2 +
 .../EditorPage/Reference/OBS/ObsTwlCard.js    |  2 +
 .../ReferenceBible/ReferenceBibleX.js         |  2 +
 .../components/MenuDropdown/MenuDropdown.js   | 16 +++--
 renderer/src/layouts/editor/EditorSection.js  | 59 +++++++++++++++++--
 .../src/layouts/editor/SectionPlaceholder1.js | 26 +++++++-
 .../src/layouts/editor/SectionPlaceholder2.js | 28 ++++++++-
 renderer/src/layouts/editor/WebMenuBar.js     |  2 +-
 12 files changed, 140 insertions(+), 27 deletions(-)

diff --git a/renderer/src/components/EditorPage/AudioEditor/AudioEditor.js b/renderer/src/components/EditorPage/AudioEditor/AudioEditor.js
index 274f4f5be..427c30bb9 100644
--- a/renderer/src/components/EditorPage/AudioEditor/AudioEditor.js
+++ b/renderer/src/components/EditorPage/AudioEditor/AudioEditor.js
@@ -31,7 +31,7 @@ const AudioEditor = ({ editor }) => {
       audioContent,
       audioPath,
       selectedFont,
-      fontSize,
+      editorFontSize,
       // eslint-disable-next-line no-unused-vars
       updateWave, // updateWave is used to update the waveform in the Editor after recording audio
     }, actions: {
@@ -40,6 +40,7 @@ const AudioEditor = ({ editor }) => {
       setAudioContent,
       setAudioCurrentChapter,
       setAudioPath,
+      setEditorFontSize,
     },
   } = useContext(ReferenceContext);
 
@@ -219,7 +220,7 @@ const AudioEditor = ({ editor }) => {
         verse={verse}
         location={audioPath}
         updateWave={updateWave}
-        fontSize={fontSize}
+        fontSize={editorFontSize}
         selectedFont={selectedFont}
       />
 )}
diff --git a/renderer/src/components/EditorPage/ObsEditor/EditorPanel.js b/renderer/src/components/EditorPage/ObsEditor/EditorPanel.js
index 3dee90440..61bda0a19 100644
--- a/renderer/src/components/EditorPage/ObsEditor/EditorPanel.js
+++ b/renderer/src/components/EditorPage/ObsEditor/EditorPanel.js
@@ -8,12 +8,13 @@ const EditorPanel = ({ obsStory, storyUpdate }) => {
   const {
     state: {
       selectedFont,
-      fontSize,
+      editorFontSize,
     },
     actions: {
       setSelectedStory,
     },
 } = useContext(ReferenceContext);
+
   const { states: { scrollLock } } = useContext(ProjectContext);
   const { t } = useTranslation();
   const handleChange = (e) => {
@@ -90,7 +91,7 @@ const EditorPanel = ({ obsStory, storyUpdate }) => {
               className="flex-grow text-justify ml-2 p-2 text-xl"
               style={{
                 fontFamily: selectedFont || 'sans-serif',
-                fontSize: `${fontSize}rem`,
+                fontSize: `${editorFontSize}rem`,
               }}
             />
           </div>
@@ -118,8 +119,8 @@ const EditorPanel = ({ obsStory, storyUpdate }) => {
               onInput={(e) => handleAutoHeight(e)}
               style={{
                 fontFamily: selectedFont || 'sans-serif',
-                fontSize: `${fontSize}rem`,
-                lineHeight: (fontSize > 1.3) ? 1.5 : '',
+                fontSize: `${editorFontSize}rem`,
+                lineHeight: (editorFontSize > 1.3) ? 1.5 : '',
               }}
             />
           </div>
@@ -140,8 +141,8 @@ const EditorPanel = ({ obsStory, storyUpdate }) => {
               className="flex-grow text-justify ml-2 p-2 text-sm"
               style={{
                 fontFamily: selectedFont || 'sans-serif',
-                fontSize: `${fontSize}rem`,
-                lineHeight: (fontSize > 1.3) ? 1.5 : '',
+                fontSize: `${editorFontSize}rem`,
+                lineHeight: (editorFontSize > 1.3) ? 1.5 : '',
               }}
             />
           </div>
diff --git a/renderer/src/components/EditorPage/Reference/Audio/ReferenceAudio.js b/renderer/src/components/EditorPage/Reference/Audio/ReferenceAudio.js
index cda21beb9..e9be9002b 100644
--- a/renderer/src/components/EditorPage/Reference/Audio/ReferenceAudio.js
+++ b/renderer/src/components/EditorPage/Reference/Audio/ReferenceAudio.js
@@ -25,6 +25,8 @@ const ReferenceAudio = ({
   chapter,
   verse,
   bookId,
+  font,
+  fontSize,
 }) => {
   const {
     actions: {
@@ -227,6 +229,8 @@ const ReferenceAudio = ({
               data={bookData}
               versepath={mp3Path}
               verse={verse}
+              font={font}
+              fontSize={fontSize}
             //   goToVerse={{
             //     chapter: parseInt(chapter, 10),
             //     verse: parseInt(verse, 10),
diff --git a/renderer/src/components/EditorPage/Reference/OBS/ObsResourceCard.js b/renderer/src/components/EditorPage/Reference/OBS/ObsResourceCard.js
index 5890d1168..6d97e2069 100644
--- a/renderer/src/components/EditorPage/Reference/OBS/ObsResourceCard.js
+++ b/renderer/src/components/EditorPage/Reference/OBS/ObsResourceCard.js
@@ -17,6 +17,7 @@ function ObsResourceCard({
   isLoading,
   setIndex,
   font,
+  fontSize,
 }) {
   const {
     state: { filters, markdownView },
@@ -36,7 +37,12 @@ function ObsResourceCard({
         itemIndex={index}
         setItemIndex={setIndex}
       />
-      <div style={{ fontFamily: font || 'sans-serif' }}>
+      <div style={{
+          fontFamily: font || 'sans-serif',
+          fontSize: `${fontSize}rem`,
+          lineHeight: (fontSize > 1.3) ? 1.5 : '',
+        }}
+      >
         <CardContent
           item={[]}
           items={items}
diff --git a/renderer/src/components/EditorPage/Reference/OBS/ObsTn.js b/renderer/src/components/EditorPage/Reference/OBS/ObsTn.js
index 2899e2f7a..55e0e99fa 100644
--- a/renderer/src/components/EditorPage/Reference/OBS/ObsTn.js
+++ b/renderer/src/components/EditorPage/Reference/OBS/ObsTn.js
@@ -27,6 +27,7 @@ function ObsTnCard({
   resourceId,
   offlineResource,
   font,
+  fontSize,
   ...props
 }) {
   const [index, setIndex] = useState(0);
@@ -143,6 +144,7 @@ function ObsTnCard({
         index={index}
         setIndex={(v) => setIndex(v)}
         font={font}
+        fontSize={fontSize}
       />
     ) : <LoadingScreen />
   );
diff --git a/renderer/src/components/EditorPage/Reference/OBS/ObsTwlCard.js b/renderer/src/components/EditorPage/Reference/OBS/ObsTwlCard.js
index 8c226d1f5..63654c297 100644
--- a/renderer/src/components/EditorPage/Reference/OBS/ObsTwlCard.js
+++ b/renderer/src/components/EditorPage/Reference/OBS/ObsTwlCard.js
@@ -23,6 +23,7 @@ function ObsTwlCard({
   resourceId,
   offlineResource,
   font,
+  fontSize,
   ...props
 }) {
   const [index, setIndex] = useState(1);
@@ -104,6 +105,7 @@ function ObsTwlCard({
         index={index}
         setIndex={(v) => setIndex(v)}
         font={font}
+        fontSize={fontSize}
       />
     ) : (
       <LoadingScreen />
diff --git a/renderer/src/components/EditorPage/Reference/ReferenceBible/ReferenceBibleX.js b/renderer/src/components/EditorPage/Reference/ReferenceBible/ReferenceBibleX.js
index 472e791c1..5ff7a6c7c 100644
--- a/renderer/src/components/EditorPage/Reference/ReferenceBible/ReferenceBibleX.js
+++ b/renderer/src/components/EditorPage/Reference/ReferenceBible/ReferenceBibleX.js
@@ -13,6 +13,7 @@ const ReferenceBibleX = ({
   refName,
   bookId,
   font,
+  fontSize,
 }) => {
   const {
     states: {
@@ -47,6 +48,7 @@ const ReferenceBibleX = ({
     refName,
     scrollLock,
     font,
+    fontSize,
   };
   return (
     <>
diff --git a/renderer/src/components/MenuDropdown/MenuDropdown.js b/renderer/src/components/MenuDropdown/MenuDropdown.js
index b46e21be0..bbcf91959 100644
--- a/renderer/src/components/MenuDropdown/MenuDropdown.js
+++ b/renderer/src/components/MenuDropdown/MenuDropdown.js
@@ -14,7 +14,7 @@ import {
 } from 'font-detect-rhl';
 
 export default function MenuDropdown({
- selectedFont, setSelectedFont, buttonStyle,
+ selectedFont, setSelectedFont, buttonStyle, showIcon = true,
 }) {
   const detectedFonts = useDetectFonts({ fonts: fontsArray });
   const [query, setQuery] = useState('');
@@ -37,12 +37,16 @@ export default function MenuDropdown({
       <button
         type="button"
         onClick={() => setIsOpen(true)}
-        className={buttonStyle || 'cursor-pointer py-2 px-2 text-left sm:text-sm'}
+        className={buttonStyle || 'cursor-pointer py-2 px-2 text-left sm:text-sm flex '}
       >
-        <TextAa
-          className="w-5 h-5 text-grey-800"
-          aria-hidden="true"
-        />
+        {showIcon ? (
+          <TextAa
+            className="w-5 h-5 text-grey-800"
+            aria-hidden="true"
+          />
+        ) : (
+          <span className="self-center justify-self-center">Font</span>
+        )}
       </button>
       <Transition appear show={isOpen} as={Fragment}>
         <Dialog
diff --git a/renderer/src/layouts/editor/EditorSection.js b/renderer/src/layouts/editor/EditorSection.js
index 0632a539d..d75ecf4fb 100644
--- a/renderer/src/layouts/editor/EditorSection.js
+++ b/renderer/src/layouts/editor/EditorSection.js
@@ -40,6 +40,8 @@ export default function EditorSection({
   setAddingSection,
   font,
   setFont,
+  fontSize,
+  setFontsize,
 }) {
   const [openResourcePopUp, setOpenResourcePopUp] = useState(false);
   const [openModal, setOpenModal] = useState(false);
@@ -47,7 +49,6 @@ export default function EditorSection({
   const { t } = useTranslation();
   const {
     state: {
-      fontSize,
       layout,
       openResource1,
       openResource2,
@@ -131,6 +132,15 @@ export default function EditorSection({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [openResourcePopUp, title]);
 
+  const handleFontSize = (status) => {
+    if (status === 'dec' && fontSize > 0.70) {
+      setFontsize(fontSize - 0.2);
+    }
+    if (status === 'inc' && fontSize < 2) {
+      setFontsize(fontSize + 0.2);
+    }
+  };
+
   const addRow = () => {
     if (sectionNum >= 0 && sectionNum < 2) {
       setSectionNum(sectionNum + 1);
@@ -224,7 +234,10 @@ export default function EditorSection({
                     />
                   )}
 
-                    <div className="relative lg:left-72 sm:left-48 sm:ml-2.5 top-4 text-xxs uppercase tracking-wider font-bold leading-3 truncate">
+                    <div
+                      className="relative lg:left-72 sm:left-48 sm:ml-2.5 top-4 text-xxs uppercase tracking-wider font-bold leading-3 truncate"
+                      title={title}
+                    >
                       {title}
                     </div>
                   </div>
@@ -233,14 +246,20 @@ export default function EditorSection({
                   {scrollLock && title ? (
                     <>
                       {CustomNavigation}
-                      <div className="ml-4 flex justify-center items-center text-xxs uppercase tracking-wider font-bold leading-3 truncate">
+                      <div
+                        title={title}
+                        className="ml-4 flex justify-center items-center text-xxs uppercase tracking-wider font-bold leading-3 truncate"
+                      >
                         {title}
                       </div>
                     </>
                   ) : (
                     <div className="flex">
                       <div className="py-2 uppercase tracking-wider text-xs font-semibold">
-                        <div className="ml-4 h-4 flex justify-center items-center text-xxs uppercase tracking-wider font-bold leading-3 truncate">
+                        <div
+                          title={title}
+                          className="ml-4 h-4 flex justify-center items-center text-xxs uppercase tracking-wider font-bold leading-3 truncate"
+                        >
                           {title}
                         </div>
                       </div>
@@ -248,10 +267,40 @@ export default function EditorSection({
                   )}
                 </>
               )}
-              <div className="flex bg-gray-300 absolute h-full -right-0 rounded-tr  group-hover:visible ">
+              <div className="flex bg-gray-300 absolute h-full -right-0 rounded-tr  group-hover:visible  pl-2 ite">
+
+                <button
+                  type="button"
+                  className="inline-flex items-center justify-center border rounded-md shadow-sm
+                  text-xs h-fit py-1
+                  focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-gray-300 focus:ring-gray-300"
+                >
+                  <div
+                    aria-label="decrease-font"
+                    onClick={() => { handleFontSize('dec'); }}
+                    role="button"
+                    tabIndex="0"
+                    title={t('tooltip-editor-font-dec')}
+                    className="h-5 w-5 hover:text-black font-bold border-r border-gray-200 text-center flex items-center pl-1.5 "
+                  >
+                    {t('label-editor-font-char')}
+                  </div>
+                  <div
+                    aria-label="increase-font"
+                    className="h-5 w-5 hover:text-black font-bold text-lg text-center flex items-center pl-1"
+                    onClick={() => { handleFontSize('inc'); }}
+                    role="button"
+                    title={t('tooltip-editor-font-inc')}
+                    tabIndex="0"
+                  >
+                    {t('label-editor-font-char')}
+                  </div>
+                </button>
+
                 <MenuDropdown
                   selectedFont={font || 'sans-serif'}
                   setSelectedFont={setFont}
+                  showIcon={false}
                 />
                 <button
                   aria-label="resources-selector"
diff --git a/renderer/src/layouts/editor/SectionPlaceholder1.js b/renderer/src/layouts/editor/SectionPlaceholder1.js
index 650ffda9a..98f5c3d9c 100644
--- a/renderer/src/layouts/editor/SectionPlaceholder1.js
+++ b/renderer/src/layouts/editor/SectionPlaceholder1.js
@@ -41,6 +41,7 @@ const SectionPlaceholder1 = ({ editor }) => {
     owner: '',
     offlineResource: { offline: false },
     font: '',
+    fontSize: 1,
   });
   const [referenceColumnOneData2, setReferenceColumnOneData2] = useState({
     languageId: '',
@@ -50,6 +51,7 @@ const SectionPlaceholder1 = ({ editor }) => {
     owner: '',
     offlineResource: { offline: false },
     font: '',
+    fontSize: 1,
   });
   const [loadResource1, setLoadResource1] = useState(false);
   const [loadResource2, setLoadResource2] = useState(false);
@@ -65,6 +67,8 @@ const SectionPlaceholder1 = ({ editor }) => {
       resetResourceOnDeleteOffline,
       font1,
       font2,
+      fontSize1,
+      fontSize2,
     },
     actions: {
       setRow,
@@ -73,6 +77,8 @@ const SectionPlaceholder1 = ({ editor }) => {
       setOpenResource2,
       setFont1,
       setFont2,
+      setFontsize1,
+      setFontsize2,
       // applyBooksFilter,
       setResetResourceOnDeleteOffline,
     },
@@ -135,6 +141,7 @@ const SectionPlaceholder1 = ({ editor }) => {
         owner: '',
         offlineResource: { offline: false },
         font: '',
+        fontSize: 1,
       }
       ));
       setResetResourceOnDeleteOffline((prev) => ({
@@ -156,6 +163,7 @@ const SectionPlaceholder1 = ({ editor }) => {
         owner: '',
         offlineResource: { offline: false },
         font: '',
+        fontSize: 1,
       }
       ));
       setResetResourceOnDeleteOffline((prev) => ({
@@ -295,9 +303,9 @@ const SectionPlaceholder1 = ({ editor }) => {
   }, [_obsNavigation1, _obsNavigation2, referenceColumnOneData1, referenceColumnOneData2]);
 
   useEffect(() => {
-    setReferenceColumnOneData1((prev) => ({ ...prev, font: font1 }));
-    setReferenceColumnOneData2((prev) => ({ ...prev, font: font2 }));
-  }, [font1, font2]);
+    setReferenceColumnOneData1((prev) => ({ ...prev, font: font1, fontSize: fontSize1 }));
+    setReferenceColumnOneData2((prev) => ({ ...prev, font: font2, fontSize: fontSize2 }));
+  }, [font1, font2, fontSize1, fontSize2]);
 
   return (
     <>
@@ -327,6 +335,8 @@ const SectionPlaceholder1 = ({ editor }) => {
                   setAddingSection={setAddingSection}
                   font={font1}
                   setFont={setFont1}
+                  fontSize={fontSize1}
+                  setFontsize={setFontsize1}
                 >
                   {
                     (loadResource1 === true)
@@ -342,6 +352,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                                 chapter={_chapter1}
                                 verse={_verse1}
                                 font={font1}
+                                fontSize={fontSize1}
                               />
                             </ScribexContextProvider>
                           )}
@@ -353,6 +364,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                             <ReferenceObs
                               stories={stories1}
                               font={font1}
+                              fontSize={fontSize1}
                               title={referenceColumnOneData1.refName}
                             />
                           )}
@@ -365,6 +377,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                         chapter={_chapter1}
                         verse={_verse1}
                         font={font1}
+                        fontSize={fontSize1}
                       />
                     )) || (
                     <TranslationHelps
@@ -377,6 +390,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                       story={_obsNavigation1}
                       offlineResource={referenceColumnOneData1.offlineResource}
                       font={font1}
+                      fontSize={fontSize1}
                     />
                       )
                     )
@@ -405,6 +419,8 @@ const SectionPlaceholder1 = ({ editor }) => {
                   setAddingSection={setAddingSection}
                   font={font2}
                   setFont={setFont2}
+                  fontSize={fontSize2}
+                  setFontsize={setFontsize2}
                 >
                   {
                     (loadResource2 === true)
@@ -420,6 +436,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                                 chapter={_chapter2}
                                 verse={_verse2}
                                 font={font2}
+                                fontSize={fontSize2}
                               />
                             </ScribexContextProvider>
                           )}
@@ -431,6 +448,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                             <ReferenceObs
                               stories={stories2}
                               font={font2}
+                              fontSize={fontSize2}
                               title={referenceColumnOneData2.refName}
                             />
                           )}
@@ -443,6 +461,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                         chapter={_chapter1}
                         verse={_verse1}
                         font={font2}
+                        fontSize={fontSize2}
                       />
                     )) || (
                     <TranslationHelps
@@ -455,6 +474,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                       story={_obsNavigation2}
                       offlineResource={referenceColumnOneData2.offlineResource}
                       font={font2}
+                      fontSize={fontSize2}
                     />
                       )
                     )
diff --git a/renderer/src/layouts/editor/SectionPlaceholder2.js b/renderer/src/layouts/editor/SectionPlaceholder2.js
index 2ac40d674..f415f7f00 100644
--- a/renderer/src/layouts/editor/SectionPlaceholder2.js
+++ b/renderer/src/layouts/editor/SectionPlaceholder2.js
@@ -38,6 +38,8 @@ const SectionPlaceholder2 = ({ editor }) => {
     header: '',
     owner: '',
     offlineResource: { offline: false },
+    font: '',
+    fontSize: 1,
   });
   const [referenceColumnTwoData2, setReferenceColumnTwoData2] = useState({
     languageId: '',
@@ -46,6 +48,8 @@ const SectionPlaceholder2 = ({ editor }) => {
     header: '',
     owner: '',
     offlineResource: { offline: false },
+    font: '',
+    fontSize: 1,
   });
   const [loadResource3, setLoadResource3] = useState(false);
   const [loadResource4, setLoadResource4] = useState(false);
@@ -65,6 +69,8 @@ const SectionPlaceholder2 = ({ editor }) => {
       resetResourceOnDeleteOffline,
       font3,
       font4,
+      fontSize3,
+      fontSize4,
     },
     actions: {
       setRow,
@@ -75,6 +81,8 @@ const SectionPlaceholder2 = ({ editor }) => {
       setResetResourceOnDeleteOffline,
       setFont3,
       setFont4,
+      setFontsize3,
+      setFontsize4,
     },
   } = useContext(ReferenceContext);
   const {
@@ -128,6 +136,7 @@ const SectionPlaceholder2 = ({ editor }) => {
         owner: '',
         offlineResource: { offline: false },
         font: '',
+        fontSize: 1,
       }
       ));
       setResetResourceOnDeleteOffline((prev) => ({
@@ -147,6 +156,7 @@ const SectionPlaceholder2 = ({ editor }) => {
         owner: '',
         offlineResource: { offline: false },
         font: '',
+        fontSize: 1,
       }
       ));
       setResetResourceOnDeleteOffline((prev) => ({
@@ -293,9 +303,9 @@ const SectionPlaceholder2 = ({ editor }) => {
   }, [_obsNavigation1, _obsNavigation2, referenceColumnTwoData1, referenceColumnTwoData2]);
 
   useEffect(() => {
-    setReferenceColumnTwoData1((prev) => ({ ...prev, font: font3 }));
-    setReferenceColumnTwoData2((prev) => ({ ...prev, font: font4 }));
-  }, [font3, font4]);
+    setReferenceColumnTwoData1((prev) => ({ ...prev, font: font3, fontSize: fontSize3 }));
+    setReferenceColumnTwoData2((prev) => ({ ...prev, font: font4, fontSize: fontSize4 }));
+  }, [font3, font4, fontSize3, fontSize4]);
 
   return (
     <>
@@ -326,6 +336,8 @@ const SectionPlaceholder2 = ({ editor }) => {
                     setAddingSection={setAddingSection}
                     font={font3}
                     setFont={setFont3}
+                    fontSize={fontSize3}
+                    setFontsize={setFontsize3}
                   >
                     {
                       (loadResource3 === true)
@@ -341,6 +353,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                                   chapter={_chapter1}
                                   verse={_verse1}
                                   font={font3}
+                                  fontSize={fontSize3}
                                 />
                               </ScribexContextProvider>
                             )}
@@ -352,6 +365,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                               <ReferenceObs
                                 stories={stories1}
                                 font={font3}
+                                fontSize={fontSize3}
                                 title={referenceColumnTwoData1.refName}
                               />
                             )}
@@ -364,6 +378,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                           chapter={_chapter1}
                           verse={_verse1}
                           font={font3}
+                          fontSize={fontSize3}
                         />
                       )) || (
                       <TranslationHelps
@@ -376,6 +391,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                         story={_obsNavigation1}
                         offlineResource={referenceColumnTwoData1.offlineResource}
                         font={font3}
+                        fontSize={fontSize3}
                       />
                         )
                       )
@@ -404,6 +420,8 @@ const SectionPlaceholder2 = ({ editor }) => {
                     setAddingSection={setAddingSection}
                     font={font4}
                     setFont={setFont4}
+                    fontSize={fontSize4}
+                    setFontsize={setFontsize4}
                   >
                     {
                       (loadResource4 === true)
@@ -419,6 +437,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                                   chapter={_chapter2}
                                   verse={_verse2}
                                   font={font4}
+                                  fontSize={fontSize4}
                                 />
                               </ScribexContextProvider>
                             )}
@@ -430,6 +449,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                               <ReferenceObs
                                 stories={stories2}
                                 font={font4}
+                                fontSize={fontSize4}
                                 title={referenceColumnTwoData2.refName}
                               />
                             )}
@@ -442,6 +462,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                           chapter={_chapter1}
                           verse={_verse1}
                           font={font4}
+                          fontSize={fontSize4}
                         />
                       )) || (
                       <TranslationHelps
@@ -454,6 +475,7 @@ const SectionPlaceholder2 = ({ editor }) => {
                         story={_obsNavigation2}
                         offlineResource={referenceColumnTwoData2.offlineResource}
                         font={font4}
+                        fontSize={fontSize4}
                       />
                         )
                       )
diff --git a/renderer/src/layouts/editor/WebMenuBar.js b/renderer/src/layouts/editor/WebMenuBar.js
index aba4fa9b3..460c13e9c 100644
--- a/renderer/src/layouts/editor/WebMenuBar.js
+++ b/renderer/src/layouts/editor/WebMenuBar.js
@@ -32,7 +32,7 @@ export default function TopMenuBar() {
 
   const {
     state: {
-      fontSize,
+      editorFontSize: fontSize,
     },
     actions: {
       setFontsize,

From 5818a5983a1b33445da59f2c7a4644a1bc61f68d Mon Sep 17 00:00:00 2001
From: sijumoncy <72241997+sijumoncy@users.noreply.github.com>
Date: Wed, 29 May 2024 09:20:54 +0530
Subject: [PATCH 3/6] general font change for all resource and editor seperate
 change option

---
 .../EditorPage/TextEditor/Editor.jsx          |  6 +--
 .../EditorPage/TextEditor/EditorMenuBar.jsx   | 45 ++++++++++++++++++-
 .../TextEditor/ReferenceScribex.jsx           | 12 ++---
 .../EditorPage/TextEditor/index.jsx           | 10 +++--
 renderer/src/layouts/editor/SubMenuBar.js     | 33 +++++++++-----
 renderer/src/modules/editor/Editor.js         | 45 +++++++++++++++++--
 6 files changed, 122 insertions(+), 29 deletions(-)

diff --git a/renderer/src/components/EditorPage/TextEditor/Editor.jsx b/renderer/src/components/EditorPage/TextEditor/Editor.jsx
index 9423e062c..aed580380 100644
--- a/renderer/src/components/EditorPage/TextEditor/Editor.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/Editor.jsx
@@ -39,7 +39,7 @@ export default function Editor(props) {
 
   const {
     state: {
-      chapter, selectedFont, fontSize, projectScriptureDir,
+      chapter, selectedFont, editorFontSize, projectScriptureDir,
     },
   } = useContext(ReferenceContext);
 
@@ -166,8 +166,8 @@ export default function Editor(props) {
       id="fulleditor"
       style={{
         fontFamily: selectedFont || 'sans-serif',
-        fontSize: `${fontSize}rem`,
-        lineHeight: (fontSize > 1.3) ? 1.5 : '',
+        fontSize: `${editorFontSize}rem`,
+        lineHeight: (editorFontSize > 1.3) ? 1.5 : '',
         direction: `${projectScriptureDir === 'RTL' ? 'rtl' : 'auto'}`,
       }}
       className="border-l-2 border-r-2 border-secondary pb-16 overflow-auto h-full scrollbars-width leading-8"
diff --git a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
index 6cbaf96b7..49391c0fe 100644
--- a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
@@ -4,6 +4,7 @@ import { ProjectContext } from '@/components/context/ProjectContext';
 import MenuDropdown from '@/components/MenuDropdown/MenuDropdown';
 import { LockClosedIcon, BookmarkIcon, LockOpenIcon } from '@heroicons/react/24/outline';
 // import BibleNavigationX from '@/components/EditorPage/TextEditor/BibleNavigationX';
+import { useTranslation } from 'react-i18next';
 import BibleNavigationX from './BibleNavigationX';
 import Buttons from './Buttons';
 import InsertMenu from './InsertMenu';
@@ -17,16 +18,29 @@ export default function EditorMenuBar(props) {
     setVerseNumber,
     handleSelectedFont,
     setTriggerVerseInsert,
+    setEditorFontSize,
+    editorFontSize,
   } = props;
 
+  const { t } = useTranslation();
+
   const {
     states: { scrollLock },
     actions: { setScrollLock },
   } = useContext(ProjectContext);
 
+  const handleFontSize = (status) => {
+    if (status === 'dec' && editorFontSize > 0.70) {
+      setEditorFontSize(editorFontSize - 0.2);
+    }
+    if (status === 'inc' && editorFontSize < 2) {
+      setEditorFontSize(editorFontSize + 0.2);
+    }
+  };
+
   return (
     <div className="relative min-h-[66px] flex flex-col bg-secondary rounded-t-md overflow-hidden">
-      <div className="flex min-h-[33px] items-center justify-between ">
+      <div className="flex min-h-[33px] items-center justify-between gap-2">
         <BibleNavigationX
           chapterNumber={chapterNumber}
           setChapterNumber={setChapterNumber}
@@ -39,6 +53,35 @@ export default function EditorMenuBar(props) {
         >
           Editor
         </div>
+
+        <button
+          type="button"
+          className="inline-flex items-center justify-center border rounded-md shadow-sm
+                  text-xs h-fit py-1
+                  focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-gray-300 focus:ring-gray-300"
+        >
+          <div
+            aria-label="decrease-font"
+            onClick={() => { handleFontSize('dec'); }}
+            role="button"
+            tabIndex="0"
+            title={t('tooltip-editor-font-dec')}
+            className="h-5 w-5 text-gray-300 hover:text-white font-bold border-r border-gray-200 text-center flex items-center pl-1.5 "
+          >
+            {t('label-editor-font-char')}
+          </div>
+          <div
+            aria-label="increase-font"
+            className="h-5 w-5  hover:text-white font-bold text-lg text-center flex items-center pl-1 text-gray-300"
+            onClick={() => { handleFontSize('inc'); }}
+            role="button"
+            title={t('tooltip-editor-font-inc')}
+            tabIndex="0"
+          >
+            {t('label-editor-font-char')}
+          </div>
+        </button>
+
         <div
           title="navigation lock/unlock"
           className="flex items-center mr-auto"
diff --git a/renderer/src/components/EditorPage/TextEditor/ReferenceScribex.jsx b/renderer/src/components/EditorPage/TextEditor/ReferenceScribex.jsx
index 43816f27d..4f35c73ad 100644
--- a/renderer/src/components/EditorPage/TextEditor/ReferenceScribex.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/ReferenceScribex.jsx
@@ -11,7 +11,7 @@ export default function ReferenceScribex(props) {
   const { state, actions } = useContext(ScribexContext);
   const { verbose } = state;
   const {
-    usfmData, bookAvailable, refName, bookId, scrollLock, font,
+    usfmData, bookAvailable, refName, bookId, scrollLock, font, fontSize,
   } = props;
   const [selectedBook, setSelectedBook] = useState();
   const [bookChange, setBookChange] = useState(false);
@@ -24,11 +24,11 @@ export default function ReferenceScribex(props) {
     newStateId,
     documents: usfmData,
   });
-  const {
-    state: {
-      fontSize,
-    },
-  } = useContext(ReferenceContext);
+  // const {
+  //   state: {
+
+  //   },
+  // } = useContext(ReferenceContext);
 
   useEffect(() => {
     setSelectedBook(bookId.toUpperCase());
diff --git a/renderer/src/components/EditorPage/TextEditor/index.jsx b/renderer/src/components/EditorPage/TextEditor/index.jsx
index c2e35b7b0..e11bdc78e 100644
--- a/renderer/src/components/EditorPage/TextEditor/index.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/index.jsx
@@ -28,8 +28,10 @@ export default function TextEditor() {
   const { usfmData, bookAvailable } = useReadUsfmFile();
 
   const {
-    state: { bookId, selectedFont },
-    actions: { handleSelectedFont, onChangeChapter, onChangeVerse },
+    state: { bookId, selectedFont, editorFontSize },
+    actions: {
+      handleSelectedFont, onChangeChapter, onChangeVerse, setEditorFontSize,
+    },
   } = useContext(ReferenceContext);
 
   const {
@@ -59,7 +61,7 @@ export default function TextEditor() {
   useEffect(() => {
     onChangeChapter(chapterNumber, 1);
     onChangeVerse(verseNumber, 1);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chapterNumber, verseNumber]);
 
   const { catalog } = useCatalog({ proskomma, stateId, verbose });
@@ -94,6 +96,7 @@ export default function TextEditor() {
     ...perfState,
     ...actions,
     ...perfActions,
+    editorFontSize,
     selectedFont,
     chapterNumber,
     verseNumber,
@@ -101,6 +104,7 @@ export default function TextEditor() {
     bookName,
     bookChange,
     bookAvailable,
+    setEditorFontSize,
     setBookChange,
     setChapterNumber,
     setVerseNumber,
diff --git a/renderer/src/layouts/editor/SubMenuBar.js b/renderer/src/layouts/editor/SubMenuBar.js
index 205ff41d2..44b7b2709 100644
--- a/renderer/src/layouts/editor/SubMenuBar.js
+++ b/renderer/src/layouts/editor/SubMenuBar.js
@@ -36,6 +36,10 @@ export default function SubMenuBar() {
       row,
       // openResource1,
       // openResource3,
+      fontSize1,
+      fontSize2,
+      fontSize3,
+      fontSize4,
 
     },
     actions: {
@@ -43,8 +47,13 @@ export default function SubMenuBar() {
       setOpenResource3,
       setLayout,
       setRow,
+      setFontsize1,
+      setFontsize2,
+      setFontsize3,
+      setFontsize4,
     },
   } = useContext(ReferenceContext);
+
   const {
     states: {
       editorSave,
@@ -128,20 +137,20 @@ export default function SubMenuBar() {
       supabaseResourceType();
     }
   });
-  const {
-    state: {
-      fontSize,
-    },
-    actions: {
-      setFontsize,
-    },
-  } = useContext(ReferenceContext);
+
+  // All Panel together
   const handleFontSize = (status) => {
-    if (status === 'dec' && fontSize > 0.70) {
-      setFontsize(fontSize - 0.2);
+    if (status === 'dec') {
+      fontSize1 > 0.70 && setFontsize1(fontSize1 - 0.2);
+      fontSize2 > 0.70 && setFontsize2(fontSize2 - 0.2);
+      fontSize3 > 0.70 && setFontsize3(fontSize3 - 0.2);
+      fontSize4 > 0.70 && setFontsize4(fontSize4 - 0.2);
     }
-    if (status === 'inc' && fontSize < 2) {
-      setFontsize(fontSize + 0.2);
+    if (status === 'inc') {
+      fontSize1 < 2 && setFontsize1(fontSize1 + 0.2);
+      fontSize2 < 2 && setFontsize2(fontSize2 + 0.2);
+      fontSize3 < 2 && setFontsize3(fontSize3 + 0.2);
+      fontSize4 < 2 && setFontsize4(fontSize4 + 0.2);
     }
   };
   return (
diff --git a/renderer/src/modules/editor/Editor.js b/renderer/src/modules/editor/Editor.js
index f02159a84..a169b05bd 100644
--- a/renderer/src/modules/editor/Editor.js
+++ b/renderer/src/modules/editor/Editor.js
@@ -32,7 +32,7 @@ export default function Editor({
   const {
     state: {
       selectedFont,
-      fontSize,
+      editorFontSize,
       bookmarksVerses,
       bookName,
       chapter,
@@ -43,6 +43,7 @@ export default function Editor({
       setBookmarksVerses,
       setObsNavigation,
       handleSelectedFont,
+      setEditorFontSize,
     },
   } = useContext(ReferenceContext);
   const [bookMarked, setBookMarks] = useState(false);
@@ -52,6 +53,15 @@ export default function Editor({
     setScrollLock(!scrollLock);
   };
 
+  const handleFontSize = (status) => {
+    if (status === 'dec' && editorFontSize > 0.70) {
+      setEditorFontSize(editorFontSize - 0.2);
+    }
+    if (status === 'inc' && editorFontSize < 2) {
+      setEditorFontSize(editorFontSize + 0.2);
+    }
+  };
+
   useEffect(() => {
       if (((bookmarksVerses?.find((x) => x.bookname === bookName && x.chapter === chapter)
             !== undefined))) {
@@ -148,7 +158,34 @@ export default function Editor({
         <div aria-label="editor-pane" className="h-4 flex flex-1 justify-center text-white text-xxs uppercase tracking-wider font-bold leading-3 truncate">
           {t('label-editor-pane')}
         </div>
-        <div className="flex ml-auto">
+        <div className="flex ml-auto items-center gap-4">
+          <button
+            type="button"
+            className="inline-flex items-center justify-center border rounded-md shadow-sm
+                  text-xs h-fit py-1
+                  focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-gray-300 focus:ring-gray-300"
+          >
+            <div
+              aria-label="decrease-font"
+              onClick={() => { handleFontSize('dec'); }}
+              role="button"
+              tabIndex="0"
+              title={t('tooltip-editor-font-dec')}
+              className="h-5 w-5 text-gray-300 hover:text-white font-bold border-r border-gray-200 text-center flex items-center pl-1.5 "
+            >
+              {t('label-editor-font-char')}
+            </div>
+            <div
+              aria-label="increase-font"
+              className="h-5 w-5  hover:text-white font-bold text-lg text-center flex items-center pl-1 text-gray-300"
+              onClick={() => { handleFontSize('inc'); }}
+              role="button"
+              title={t('tooltip-editor-font-inc')}
+              tabIndex="0"
+            >
+              {t('label-editor-font-char')}
+            </div>
+          </button>
           <MenuDropdown selectedFont={selectedFont || 'sans-serif'} setSelectedFont={handleSelectedFont} buttonStyle="h-6 mr-2 w-6 text-white cursor-pointer" />
           {/* <InsertMenu handleClick={handleClick} selectedText={selectedText} /> */}
         </div>
@@ -183,8 +220,8 @@ export default function Editor({
       <div
         style={{
           fontFamily: selectedFont || 'sans-serif',
-          fontSize: `${fontSize}rem`,
-          lineHeight: (fontSize > 1.3) ? 1.5 : '',
+          fontSize: `${editorFontSize}rem`,
+          lineHeight: (editorFontSize > 1.3) ? 1.5 : '',
           direction: `${projectScriptureDir === 'RTL' ? 'rtl' : 'auto'}`,
         }}
         aria-label="editor"

From 03f611b3732731c900e569c1222a99a71ae64216 Mon Sep 17 00:00:00 2001
From: sijumoncy <72241997+sijumoncy@users.noreply.github.com>
Date: Wed, 29 May 2024 09:25:53 +0530
Subject: [PATCH 4/6] fixed lint issue

---
 renderer/src/components/EditorPage/AudioEditor/AudioEditor.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/renderer/src/components/EditorPage/AudioEditor/AudioEditor.js b/renderer/src/components/EditorPage/AudioEditor/AudioEditor.js
index 427c30bb9..793151c69 100644
--- a/renderer/src/components/EditorPage/AudioEditor/AudioEditor.js
+++ b/renderer/src/components/EditorPage/AudioEditor/AudioEditor.js
@@ -40,7 +40,6 @@ const AudioEditor = ({ editor }) => {
       setAudioContent,
       setAudioCurrentChapter,
       setAudioPath,
-      setEditorFontSize,
     },
   } = useContext(ReferenceContext);
 

From 5fb4cb64ee310c9b4977c924a4355428b4b86a1e Mon Sep 17 00:00:00 2001
From: sijumoncy <72241997+sijumoncy@users.noreply.github.com>
Date: Wed, 29 May 2024 11:15:20 +0530
Subject: [PATCH 5/6] fixed alignment of font size icon in tw and ta

---
 renderer/src/layouts/editor/EditorSection.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/renderer/src/layouts/editor/EditorSection.js b/renderer/src/layouts/editor/EditorSection.js
index d75ecf4fb..5e8c30690 100644
--- a/renderer/src/layouts/editor/EditorSection.js
+++ b/renderer/src/layouts/editor/EditorSection.js
@@ -267,7 +267,7 @@ export default function EditorSection({
                   )}
                 </>
               )}
-              <div className="flex bg-gray-300 absolute h-full -right-0 rounded-tr  group-hover:visible  pl-2 ite">
+              <div className="flex bg-gray-300 absolute h-full -right-0 rounded-tr  group-hover:visible  pl-2 items-center">
 
                 <button
                   type="button"

From 7628e08d3d187f10199113dd89930d16329f5a32 Mon Sep 17 00:00:00 2001
From: sijumoncy <72241997+sijumoncy@users.noreply.github.com>
Date: Wed, 29 May 2024 13:32:12 +0530
Subject: [PATCH 6/6] save font size and reload. Editor font size is resetting
 some times.

---
 .../components/EditorPage/ObsEditor/ObsEditor.js |  7 ++++++-
 .../EditorPage/TextEditor/EditorMenuBar.jsx      |  6 +++---
 .../components/EditorPage/TextEditor/index.jsx   |  4 ++--
 .../components/Sync/Gitea/SyncFromGiteaUtils.js  |  5 +++++
 .../src/components/context/ReferenceContext.js   | 13 +++++++++++++
 renderer/src/core/burrito/importBurrito.js       |  5 +++++
 .../core/editor/fetchSettingsResourceHistory.js  |  4 ++++
 .../core/editor/saveSettingsResourceHistory.js   |  9 ++++++++-
 renderer/src/core/projects/updateAgSettings.js   | 16 +++++++++++++---
 .../src/layouts/editor/SectionPlaceholder1.js    | 10 +++++++++-
 .../src/layouts/editor/SectionPlaceholder2.js    |  7 +++++++
 renderer/src/modules/editor/Editor.js            |  6 +++---
 renderer/src/util/createAudioVersification.js    |  1 +
 renderer/src/util/createObsContent.js            |  2 ++
 renderer/src/util/createVersificationUSFM.js     |  2 ++
 15 files changed, 83 insertions(+), 14 deletions(-)

diff --git a/renderer/src/components/EditorPage/ObsEditor/ObsEditor.js b/renderer/src/components/EditorPage/ObsEditor/ObsEditor.js
index 26e903744..9e3c0526b 100644
--- a/renderer/src/components/EditorPage/ObsEditor/ObsEditor.js
+++ b/renderer/src/components/EditorPage/ObsEditor/ObsEditor.js
@@ -19,7 +19,11 @@ import { getDetails } from './utils/getDetails';
 const ObsEditor = () => {
   const [mdData, setMdData] = useState();
   const [directoryName, setDirectoryName] = useState();
-  const { state: { obsNavigation, loadData }, actions: { setLoadData } } = useContext(ReferenceContext);
+  const {
+ state: {
+ obsNavigation, loadData,
+}, actions: { setLoadData },
+} = useContext(ReferenceContext);
 
   const updateStory = (story) => {
     logger.debug('ObsEditor.js', 'In updateStory for upadting the story to the backend md file');
@@ -89,6 +93,7 @@ const ObsEditor = () => {
                         );
                         localforage.setItem('projectmeta', value);
                         // This func will update the scribe-setting.json file
+                        // saveReferenceResource(selectedFont, editorFontSize);
                         saveReferenceResource();
                       });
                     });
diff --git a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
index 49391c0fe..a4900eb6f 100644
--- a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
@@ -18,7 +18,7 @@ export default function EditorMenuBar(props) {
     setVerseNumber,
     handleSelectedFont,
     setTriggerVerseInsert,
-    setEditorFontSize,
+    handleEditorFontSize,
     editorFontSize,
   } = props;
 
@@ -31,10 +31,10 @@ export default function EditorMenuBar(props) {
 
   const handleFontSize = (status) => {
     if (status === 'dec' && editorFontSize > 0.70) {
-      setEditorFontSize(editorFontSize - 0.2);
+      handleEditorFontSize(editorFontSize - 0.2);
     }
     if (status === 'inc' && editorFontSize < 2) {
-      setEditorFontSize(editorFontSize + 0.2);
+      handleEditorFontSize(editorFontSize + 0.2);
     }
   };
 
diff --git a/renderer/src/components/EditorPage/TextEditor/index.jsx b/renderer/src/components/EditorPage/TextEditor/index.jsx
index e11bdc78e..21d261959 100644
--- a/renderer/src/components/EditorPage/TextEditor/index.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/index.jsx
@@ -30,7 +30,7 @@ export default function TextEditor() {
   const {
     state: { bookId, selectedFont, editorFontSize },
     actions: {
-      handleSelectedFont, onChangeChapter, onChangeVerse, setEditorFontSize,
+      handleSelectedFont, onChangeChapter, onChangeVerse, handleEditorFontSize,
     },
   } = useContext(ReferenceContext);
 
@@ -104,7 +104,7 @@ export default function TextEditor() {
     bookName,
     bookChange,
     bookAvailable,
-    setEditorFontSize,
+    handleEditorFontSize,
     setBookChange,
     setChapterNumber,
     setVerseNumber,
diff --git a/renderer/src/components/Sync/Gitea/SyncFromGiteaUtils.js b/renderer/src/components/Sync/Gitea/SyncFromGiteaUtils.js
index 3b1bd1109..f49dfe486 100644
--- a/renderer/src/components/Sync/Gitea/SyncFromGiteaUtils.js
+++ b/renderer/src/components/Sync/Gitea/SyncFromGiteaUtils.js
@@ -96,6 +96,11 @@ async function createOrUpdateAgSettings(sbDataObject, currentUser, projectName,
       } else {
         setting.project[sbDataObject.type.flavorType.flavor.name].font = (setting.project[sbDataObject.type.flavorType.flavor.name].font) ? (setting.project[sbDataObject.type.flavorType.flavor.name].font) : '';
       }
+      if (!setting.fontSize) {
+        setting.project[sbDataObject.type.flavorType.flavor.name].fontSize = 1;
+      } else {
+        setting.project[sbDataObject.type.flavorType.flavor.name].fontSize = (setting.project[sbDataObject.type.flavorType.flavor.name].fontSize) ? (setting.project[sbDataObject.type.flavorType.flavor.name].fontSize) : 1;
+      }
       settings = setting;
     }
     settings.project[sbDataObject.type.flavorType.flavor.name].lastSeen = moment().format();
diff --git a/renderer/src/components/context/ReferenceContext.js b/renderer/src/components/context/ReferenceContext.js
index a55cc39f5..5ddeb84ca 100644
--- a/renderer/src/components/context/ReferenceContext.js
+++ b/renderer/src/components/context/ReferenceContext.js
@@ -95,6 +95,15 @@ export default function ReferenceContextProvider({ children }) {
     }
   };
 
+  // define functon to change editor font size and call saveReference
+  const handleEditorFontSize = async (currentFontSize) => {
+    if (isElectron()) {
+      setEditorFontSize(currentFontSize);
+      // INFO : implement a debounce for this call if needed
+      saveReferenceResource(selectedFont, currentFontSize);
+    }
+  };
+
   useEffect(() => {
     localforage.getItem('currentProject').then(async (projectName) => {
       if (projectName) {
@@ -112,17 +121,20 @@ export default function ReferenceContextProvider({ children }) {
                         setBookmarksVerses(resources.project?.textTranslation.bookMarks);
                         setProjectScriptureDir(resources.project?.textTranslation?.scriptDirection?.toUpperCase());
                         setSelectedFont(resources.project?.textTranslation?.font);
+                        setEditorFontSize(resources.project?.textTranslation?.fontSize || 1);
                         break;
                       case 'textStories':
                         setBookmarksVerses(resources.project?.textStories.bookMarks);
                         setProjectScriptureDir(resources.project?.textStories?.scriptDirection?.toUpperCase());
                         setObsNavigation(resources.project?.textStories.navigation ? resources.project?.textStories.navigation : '1');
                         setSelectedFont(resources.project?.textStories?.font);
+                        setEditorFontSize(resources.project?.textStories?.fontSize);
                         break;
                       case 'audioTranslation':
                         setBookmarksVerses(resources.project?.audioTranslation.bookMarks);
                         setProjectScriptureDir(resources.project?.audioTranslation?.scriptDirection?.toUpperCase());
                         setSelectedFont(resources.project?.audioTranslation?.font);
+                        setEditorFontSize(resources.project?.audioTranslation?.fontSize || 1);
                         break;
                       default:
                         break;
@@ -237,6 +249,7 @@ export default function ReferenceContextProvider({ children }) {
       onChangeChapter,
       onChangeVerse,
       applyBooksFilter,
+      handleEditorFontSize,
       setAnchorEl,
       handleClick,
       setRefName,
diff --git a/renderer/src/core/burrito/importBurrito.js b/renderer/src/core/burrito/importBurrito.js
index c85f14110..334a53436 100644
--- a/renderer/src/core/burrito/importBurrito.js
+++ b/renderer/src/core/burrito/importBurrito.js
@@ -394,6 +394,11 @@ const importBurrito = async (filePath, currentUser, updateBurritoVersion, concat
           } else {
             setting.font = (setting.project[metadata.type.flavorType.flavor.name].font) ? (setting.project[metadata.type.flavorType.flavor.name].font) : '';
           }
+          if (!setting.project[metadata.type.flavorType.flavor.name]?.fontSize) {
+            setting.project[metadata.type.flavorType.flavor.name].fontSize = 1;
+          } else {
+            setting.fontSize = (setting.project[metadata.type.flavorType.flavor.name]?.fontSize) ? (setting.project[metadata.type.flavorType.flavor.name].fontSize) : 1;
+          }
           settings = setting;
         }
         settings.project[metadata.type.flavorType.flavor.name].lastSeen = moment().format();
diff --git a/renderer/src/core/editor/fetchSettingsResourceHistory.js b/renderer/src/core/editor/fetchSettingsResourceHistory.js
index d6bc8d23e..0b052cf37 100644
--- a/renderer/src/core/editor/fetchSettingsResourceHistory.js
+++ b/renderer/src/core/editor/fetchSettingsResourceHistory.js
@@ -116,6 +116,7 @@ export async function fetchSettingsResourceHistory(
                                   owner: '',
                                   offlineResource: { offline: false },
                                   font: '',
+                                  fontSize: 1,
                                 }
                                 ));
                               } else if (_columnnum === historyColumn && _rownum === '2') {
@@ -134,6 +135,7 @@ export async function fetchSettingsResourceHistory(
                                   owner: '',
                                   offlineResource: { offline: false },
                                   font: '',
+                                  fontSize: 1,
                                 }
                                 ));
                               }
@@ -158,6 +160,7 @@ export async function fetchSettingsResourceHistory(
                             owner: _value?.owner,
                             offlineResource: _value?.offline,
                             font: _value?.font,
+                            fontSize: _value?.fontSize || 1,
                           });
                       }
                       if (_rownum === '2') {
@@ -170,6 +173,7 @@ export async function fetchSettingsResourceHistory(
                             owner: _value?.owner,
                             offlineResource: _value?.offline,
                             font: _value?.font,
+                            fontSize: _value?.fontSize || 1,
                           });
                       }
                   },
diff --git a/renderer/src/core/editor/saveSettingsResourceHistory.js b/renderer/src/core/editor/saveSettingsResourceHistory.js
index f8d690a6c..7add2b54b 100644
--- a/renderer/src/core/editor/saveSettingsResourceHistory.js
+++ b/renderer/src/core/editor/saveSettingsResourceHistory.js
@@ -19,6 +19,8 @@ export async function saveSettingsResourceHistory(
     setReferenceColumnData2,
     setOpenResourceR1,
     setOpenResourceR2,
+    selectedFont,
+    editorFontSize,
 ) {
     logger.debug('SaveSettingsResourceHistory.js', 'In save reference hsotory func');
     // removingSection : "1" and openResourceR2 :false and sectionPlaceholderNum: "1" -> reference 2 to reference 1
@@ -70,6 +72,7 @@ export async function saveSettingsResourceHistory(
                       owner: referenceColumnData2?.owner,
                       offlineResource: referenceColumnData2.offlineResource,
                       font: referenceColumnData2?.font,
+                      fontSize: referenceColumnData2?.fontSize || 1,
                     }
                     ));
                     setReferenceColumnData2((prev) => ({
@@ -81,6 +84,7 @@ export async function saveSettingsResourceHistory(
                       owner: '',
                       offlineResource: { offline: false },
                       font: '',
+                      fontSize: 1,
                     }
                     ));
                     setOpenResourceR1(false);
@@ -95,6 +99,7 @@ export async function saveSettingsResourceHistory(
                         navigation: { book: '1TI', chapter: '1' },
                         offline: referenceToUse.offlineResource,
                         font: referenceToUse?.font,
+                        fontSize: referenceToUse?.fontSize || 1,
                       },
                     };
                 }
@@ -111,6 +116,7 @@ export async function saveSettingsResourceHistory(
                       navigation: { book: '1TI', chapter: '1' },
                       offline: referenceColumnData1.offlineResource,
                       font: referenceColumnData1?.font,
+                      fontSize: referenceColumnData1?.fontSize || 1,
                     },
                     2: {
                       resouceId: referenceColumnData2?.selectedResource,
@@ -120,6 +126,7 @@ export async function saveSettingsResourceHistory(
                       navigation: { book: '1TI', chapter: '1' },
                       offline: referenceColumnData2.offlineResource,
                       font: referenceColumnData2?.font,
+                      fontSize: referenceColumnData2?.fontSize || 1,
                     },
                   };
                 }
@@ -139,7 +146,7 @@ export async function saveSettingsResourceHistory(
         setRemovingSection();
         setAddingSection();
         localforage.setItem('projectmeta', value).then(() => {
-          saveReferenceResource();
+          saveReferenceResource(selectedFont, editorFontSize);
             resolve();
         });
       }
diff --git a/renderer/src/core/projects/updateAgSettings.js b/renderer/src/core/projects/updateAgSettings.js
index 0c27d716f..3b9b20104 100644
--- a/renderer/src/core/projects/updateAgSettings.js
+++ b/renderer/src/core/projects/updateAgSettings.js
@@ -12,7 +12,7 @@ import {
 //   const newPath = require('../../../../supabase').newPath
 // }
 
-export const updateAgSettings = async (username, projectName, data, font) => {
+export const updateAgSettings = async (username, projectName, data, font, fontSize = 1) => {
   logger.debug('updateAgSettings.js', 'In updateAgSettings');
   const newpath = localStorage.getItem('userPath');
   const fs = window.require('fs');
@@ -31,10 +31,15 @@ export const updateAgSettings = async (username, projectName, data, font) => {
     if (!setting.project[data.type.flavorType.flavor.name].font) {
       setting.project[data.type.flavorType.flavor.name].font = font || '';
     }
+    if (!setting.project[data.type.flavorType.flavor.name].fontSize) {
+      setting.project[data.type.flavorType.flavor.name].fontSize = fontSize || 1;
+    }
   }
   const savedFont = JSON.stringify(setting.project[data.type.flavorType.flavor.name].font);
+  const savedFontSize = JSON.stringify(setting.project[data.type.flavorType.flavor.name].fontSize);
   setting.project[data.type.flavorType.flavor.name] = data.project[data.type.flavorType.flavor.name];
   setting.project[data.type.flavorType.flavor.name].font = font || JSON.parse(savedFont);
+  setting.project[data.type.flavorType.flavor.name].fontSize = fontSize || JSON.parse(savedFontSize);
   logger.debug('updateAgSettings.js', `Updating the ${environment.PROJECT_SETTING_FILE}`);
   await fs.writeFileSync(folder, JSON.stringify(setting));
 };
@@ -57,6 +62,11 @@ export const updateWebAgSettings = async (username, projectName, data) => {
     } else {
       setting.project[data.type.flavorType.flavor.name].font = (setting.project[data.type.flavorType.flavor.name].font) ? (setting.project[data.type.flavorType.flavor.name].font) : '';
     }
+    if (!setting.project[data.type.flavorType.flavor.name].fontSize) {
+      setting.project[data.type.flavorType.flavor.name].fontSize = 1;
+    } else {
+      setting.project[data.type.flavorType.flavor.name].fontSize = (setting.project[data.type.flavorType.flavor.name].fontSize) ? (setting.project[data.type.flavorType.flavor.name].fontSize) : 1;
+    }
   }
   await sbStorageUpload(folder, JSON.stringify(setting), {
     // cacheControl: '3600',
@@ -64,7 +74,7 @@ export const updateWebAgSettings = async (username, projectName, data) => {
   });
 };
 
-export const saveReferenceResource = (font = '') => {
+export const saveReferenceResource = (font = '', fontSize = 1) => {
   logger.debug('updateAgSettings.js', 'In saveReferenceResource for saving the reference data');
   localforage.getItem('currentProject').then(async (projectName) => {
     const _projectname = await splitStringByLastOccurance(projectName, '_');
@@ -78,7 +88,7 @@ export const saveReferenceResource = (font = '') => {
               if (id[0] === _projectname[1]) {
                 localforage.getItem('userProfile').then(async (value) => {
                   if (isElectron()) {
-                    await updateAgSettings(value?.username, projectName, resources, font);
+                    await updateAgSettings(value?.username, projectName, resources, font, fontSize);
                   } else {
                     await updateWebAgSettings(value?.user?.email, projectName, resources);
                   }
diff --git a/renderer/src/layouts/editor/SectionPlaceholder1.js b/renderer/src/layouts/editor/SectionPlaceholder1.js
index 98f5c3d9c..70122155c 100644
--- a/renderer/src/layouts/editor/SectionPlaceholder1.js
+++ b/renderer/src/layouts/editor/SectionPlaceholder1.js
@@ -69,6 +69,8 @@ const SectionPlaceholder1 = ({ editor }) => {
       font2,
       fontSize1,
       fontSize2,
+      editorFontSize,
+      selectedFont,
     },
     actions: {
       setRow,
@@ -229,6 +231,8 @@ const SectionPlaceholder1 = ({ editor }) => {
         setReferenceColumnOneData2,
         setOpenResource1,
         setOpenResource2,
+        selectedFont,
+        editorFontSize,
       );
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -238,7 +242,9 @@ const SectionPlaceholder1 = ({ editor }) => {
     referenceColumnOneData2?.owner, removingSection, addingSection, referenceColumnOneData2?.offlineResource,
     referenceColumnOneData1?.offlineResource, referenceColumnOneData2?.font,
     referenceColumnOneData1?.font, resetResourceOnDeleteOffline?.referenceColumnOneData1Reset,
-    resetResourceOnDeleteOffline?.referenceColumnOneData2Reset, referenceColumnOneData2, referenceColumnOneData1]);
+    resetResourceOnDeleteOffline?.referenceColumnOneData2Reset, referenceColumnOneData2, referenceColumnOneData1,
+    referenceColumnOneData1?.fontSize, referenceColumnOneData2?.fontSize,
+  ]);
 
   // referenceColumnOneData2 referenceColumnOneData1
   const CustomNavigation1 = (
@@ -299,6 +305,8 @@ const SectionPlaceholder1 = ({ editor }) => {
     if (referenceColumnOneData2.font) {
       setFont2(referenceColumnOneData2?.font);
     }
+    setFontsize1(referenceColumnOneData1?.fontSize);
+    setFontsize2(referenceColumnOneData2?.fontSize);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [_obsNavigation1, _obsNavigation2, referenceColumnOneData1, referenceColumnOneData2]);
 
diff --git a/renderer/src/layouts/editor/SectionPlaceholder2.js b/renderer/src/layouts/editor/SectionPlaceholder2.js
index f415f7f00..504853986 100644
--- a/renderer/src/layouts/editor/SectionPlaceholder2.js
+++ b/renderer/src/layouts/editor/SectionPlaceholder2.js
@@ -71,6 +71,8 @@ const SectionPlaceholder2 = ({ editor }) => {
       font4,
       fontSize3,
       fontSize4,
+      selectedFont,
+      editorFontSize,
     },
     actions: {
       setRow,
@@ -234,6 +236,8 @@ const SectionPlaceholder2 = ({ editor }) => {
         setReferenceColumnTwoData2,
         setOpenResource3,
         setOpenResource4,
+        selectedFont,
+        editorFontSize,
       );
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -244,6 +248,7 @@ const SectionPlaceholder2 = ({ editor }) => {
     referenceColumnTwoData1.offlineResource, referenceColumnTwoData2.offlineResource,
     referenceColumnTwoData1.font, referenceColumnTwoData2.font,
     resetResourceOnDeleteOffline?.referenceColumnTwoData1Reset, resetResourceOnDeleteOffline?.referenceColumnTwoData2Reset,
+    referenceColumnTwoData1.fontSize, referenceColumnTwoData2.fontSize,
   ]);
 
   // referenceColumnTwoData1, referenceColumnTwoData2 openResource1, openResource2,
@@ -299,6 +304,8 @@ const SectionPlaceholder2 = ({ editor }) => {
     if (referenceColumnTwoData2.font) {
       setFont4(referenceColumnTwoData2?.font);
     }
+    setFontsize3(referenceColumnTwoData1?.fontSize || 1);
+    setFontsize4(referenceColumnTwoData2?.fontSize || 1);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [_obsNavigation1, _obsNavigation2, referenceColumnTwoData1, referenceColumnTwoData2]);
 
diff --git a/renderer/src/modules/editor/Editor.js b/renderer/src/modules/editor/Editor.js
index a169b05bd..36fca1b44 100644
--- a/renderer/src/modules/editor/Editor.js
+++ b/renderer/src/modules/editor/Editor.js
@@ -43,7 +43,7 @@ export default function Editor({
       setBookmarksVerses,
       setObsNavigation,
       handleSelectedFont,
-      setEditorFontSize,
+      handleEditorFontSize,
     },
   } = useContext(ReferenceContext);
   const [bookMarked, setBookMarks] = useState(false);
@@ -55,10 +55,10 @@ export default function Editor({
 
   const handleFontSize = (status) => {
     if (status === 'dec' && editorFontSize > 0.70) {
-      setEditorFontSize(editorFontSize - 0.2);
+      handleEditorFontSize(editorFontSize - 0.2);
     }
     if (status === 'inc' && editorFontSize < 2) {
-      setEditorFontSize(editorFontSize + 0.2);
+      handleEditorFontSize(editorFontSize + 0.2);
     }
   };
 
diff --git a/renderer/src/util/createAudioVersification.js b/renderer/src/util/createAudioVersification.js
index 5c59234b8..aec228e76 100644
--- a/renderer/src/util/createAudioVersification.js
+++ b/renderer/src/util/createAudioVersification.js
@@ -77,6 +77,7 @@ export const createAudioVersification = (
               refResources: call === 'edit' ? currentBurrito.project.audioTranslation.refResources : [],
               bookMarks: call === 'edit' ? currentBurrito.project.audioTranslation.bookMarks : [],
               font: '',
+              fontSize: 1,
             },
           },
           sync: { services: { door43: [] } },
diff --git a/renderer/src/util/createObsContent.js b/renderer/src/util/createObsContent.js
index b0a140d51..680d32b1a 100644
--- a/renderer/src/util/createObsContent.js
+++ b/renderer/src/util/createObsContent.js
@@ -192,6 +192,7 @@ export const createObsContent = (
           refResources: call === 'edit' ? currentBurrito.project.textStories.refResources : [],
           bookMarks: call === 'edit' ? currentBurrito.project.textStories.bookMarks : [],
           font: '',
+          fontSize: 1,
         },
       },
       sync: { services: { door43: [] } },
@@ -372,6 +373,7 @@ export const createObsContent = (
         },
         sync: { services: { door43: [] } },
         font: '',
+        fontSize: 1,
       };
       const stat = await uploadFileToSupabase(`${supabasePath}/${environment.PROJECT_SETTING_FILE}`, JSON.stringify(settings));
       ingredients[path.join('ingredients', environment.PROJECT_SETTING_FILE)] = {
diff --git a/renderer/src/util/createVersificationUSFM.js b/renderer/src/util/createVersificationUSFM.js
index 5280d62c4..42fa89978 100644
--- a/renderer/src/util/createVersificationUSFM.js
+++ b/renderer/src/util/createVersificationUSFM.js
@@ -162,6 +162,7 @@ export const createVersificationUSFM = (
               refResources: call === 'edit' ? currentBurrito.project?.textTranslation.refResources : [],
               bookMarks: call === 'edit' ? currentBurrito.project?.textTranslation.bookMarks : [],
               font: '',
+              fontSize: 1,
             },
           },
           sync: { services: { door43: [] } },
@@ -347,6 +348,7 @@ export const createWebVersificationUSFM = async (
           },
           sync: { services: { door43: [] } },
           font: '',
+          fontSize: 1,
         };
         if (call === 'edit') {
           settings.sync = currentBurrito?.sync;