From 30754398949c640f3157fb5083daa3be2a3d8691 Mon Sep 17 00:00:00 2001
From: Yijun Lin <yijunl4@illinois.edu>
Date: Sat, 24 Jun 2023 13:36:17 -0500
Subject: [PATCH 01/39] style change for popup and asl video

---
 src/screens/Asl/components/AslTable/index.js  | 15 +++--
 .../Asl/components/AslTable/index.scss        | 16 ++++-
 .../Watch/Components/CTPopup/CTPopup.jsx      | 63 +++++++------------
 .../Watch/Components/CTPopup/CTPopup.scss     | 10 +--
 4 files changed, 50 insertions(+), 54 deletions(-)

diff --git a/src/screens/Asl/components/AslTable/index.js b/src/screens/Asl/components/AslTable/index.js
index a85b82727..debb14ecc 100644
--- a/src/screens/Asl/components/AslTable/index.js
+++ b/src/screens/Asl/components/AslTable/index.js
@@ -55,6 +55,7 @@ const AslTable = props => {
     const [onePage, setOnePage] = useState([]);
     const [showVideo, setShowVideo] = useState(false);
     const [videoUrl, setVideoUrl] = useState('');
+    const [selectedTerm, setSelectedTerm] = useState(null);
     const [style, setStyle] = useState({
         left: 100,
         top: 100,
@@ -71,7 +72,7 @@ const AslTable = props => {
     })
     const [isDown, setIsDown] = useState(false);
     const [direction, setDirection] = useState('');
-
+    
     useEffect(() => {
       const index = (pageNumber-1) * ONE_PAGE_NUM;
       setOnePage(items.filter(item => item.term.toLowerCase().includes(search.toLowerCase())).slice(index, index + ONE_PAGE_NUM));
@@ -117,7 +118,10 @@ const AslTable = props => {
       return 'Example'
     }
 
-    const handleVideo = (source, uniqueASLIdentifier) => {
+    const handleVideo = (term) => {
+      setSelectedTerm(term);
+      const source = term.source;
+      const uniqueASLIdentifier = term.uniqueASLIdentifier;
       const hostName = window.location.hostname;
       if (hostName !== '') {
         if (source === 'ASLCORE') {
@@ -227,9 +231,10 @@ const AslTable = props => {
               onClick={() => setShowVideo(false)}
             >X
             </button>
-
+            <span>{`${selectedTerm.term} (Source:${selectedTerm.source})`}</span>
             <video 
-              className="video-js vjs-default-skin video-player" 
+              className="video-js vjs-default-skin video-player"
+              id="ASL-Glossary-video-player" 
               controls
               preload="auto"
               data-setup="{}"
@@ -319,7 +324,7 @@ const AslTable = props => {
                   <td>
                     <button 
                       type='button' 
-                      onClick={() => handleVideo(term.source, term.uniqueASLIdentifier)}
+                      onClick={() => handleVideo(term)}
                     >
                       Watch
                     </button>
diff --git a/src/screens/Asl/components/AslTable/index.scss b/src/screens/Asl/components/AslTable/index.scss
index 983e27712..c6b6eb081 100644
--- a/src/screens/Asl/components/AslTable/index.scss
+++ b/src/screens/Asl/components/AslTable/index.scss
@@ -96,9 +96,10 @@ tbody tr:hover {
     position: absolute;
 }
 
-.video-player {
+#ASL-Glossary-video-player{
+    margin-top: 33px;
     width: 100%;
-    height: 100%;
+    height: 84%;
 }
 
 .drawing-wrap{
@@ -110,13 +111,22 @@ tbody tr:hover {
     // cursor: move;
     width: 100px;
     height: 100px;
-    background-color: #ccc;
+    background-color: rgb(2, 50, 64);
     position: absolute;
     top: 100px;
     left: 100px;
     box-sizing: border-box;
 
 }
+
+.drawing-item span{
+    color: white;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: larger;
+    margin-top: 5px;
+}
 .control-point {
   position: absolute;
   box-sizing: border-box;
diff --git a/src/screens/Watch/Components/CTPopup/CTPopup.jsx b/src/screens/Watch/Components/CTPopup/CTPopup.jsx
index 0f8a1e18b..2fce1d988 100644
--- a/src/screens/Watch/Components/CTPopup/CTPopup.jsx
+++ b/src/screens/Watch/Components/CTPopup/CTPopup.jsx
@@ -10,6 +10,24 @@ import './CTPopup.scss'
 import GlossaryPanel from './GlossaryPanel';
 
 
+
+const ASLVideoPlayer = (word, videoURL, source) => {
+  return (
+    <TabPanel>
+      <strong>{`${word} (Source: ${source})`}</strong><br></br><br></br>
+      {videoURL==='' ? (<span>video not found</span>) 
+      : 
+      (<video 
+        className="video-js vjs-default-skin video-player" 
+        controls
+        preload="auto"
+        data-setup="{}"
+      >
+        <source src={videoURL} type='video/mp4' />
+      </video>)}
+    </TabPanel>)
+}
+
 const CTPopup = ({ time = 0, duration = 0, liveMode = false }) => {
     const [opvalue, setOpvalue] = useState(0.75); // variable for transparency
     const OPSTEP = 0.125; //the amount of changed opvalue for each operation
@@ -191,48 +209,9 @@ const CTPopup = ({ time = 0, duration = 0, liveMode = false }) => {
                         {definitionURL !== '' && (<Tab>Definition</Tab>)}
                         {exampleURL !== '' && (<Tab>Example</Tab>)}
                       </TabList>
-                      {signURL !== '' && (
-                        <TabPanel>
-                          <strong>{term.word}</strong><br></br><br></br>
-                          {signURL==='' ? (<span>sign video for this term is not found</span>) 
-                          : 
-                          (<video 
-                            className="video-js vjs-default-skin video-player" 
-                            controls
-                            preload="auto"
-                            data-setup="{}"
-                          >
-                            <source src={signURL} type='video/mp4' />
-                          </video>)}
-                        </TabPanel>)}
-                      {definitionURL !== '' && (
-                        <TabPanel>
-                          <strong>{term.word}</strong><br></br><br></br>
-                          {definitionURL==='' ? (<span>definition video for this term is not found</span>) 
-                          : 
-                          (<video 
-                            className="video-js vjs-default-skin video-player" 
-                            controls
-                            preload="auto"
-                            data-setup="{}"
-                          >
-                            <source src={definitionURL} type='video/mp4' />
-                          </video>)}
-                        </TabPanel>)}
-                      {exampleURL !== '' && (
-                        <TabPanel>
-                          <strong>{term.word}</strong><br></br><br></br>
-                          {exampleURL==='' ? (<span>example video for this term is not found</span>) 
-                          : 
-                          (<video 
-                            className="video-js vjs-default-skin video-player" 
-                            controls
-                            preload="auto"
-                            data-setup="{}"
-                          >
-                            <source src={exampleURL} type='video/mp4' />
-                          </video>)}
-                        </TabPanel>)}
+                      {signURL !== '' && ASLVideoPlayer(term.word, signURL, term.source)}
+                      {definitionURL !== '' && ASLVideoPlayer(term.word, definitionURL, term.source)}
+                      {exampleURL !== '' && ASLVideoPlayer(term.word, exampleURL, term.source)}
                     </Tabs>
                   </TabPanel>
                   <TabPanel className='divPanel'>
diff --git a/src/screens/Watch/Components/CTPopup/CTPopup.scss b/src/screens/Watch/Components/CTPopup/CTPopup.scss
index 1e7175e71..2da97d9fa 100644
--- a/src/screens/Watch/Components/CTPopup/CTPopup.scss
+++ b/src/screens/Watch/Components/CTPopup/CTPopup.scss
@@ -65,7 +65,7 @@
 
 .glossary-entry {
   list-style: none;
-  color:white;
+  color:rgb(169, 169, 169);
   padding-bottom: 3px;
   overflow-x: hidden;
 }
@@ -77,19 +77,21 @@
 
 .glossary-entry button:focus {
   outline-style: none;
-  text-decoration: underline;
+  font-size: larger;
 }
 
 .glossary-entry-highlighted {
-  color:red;
+  font-weight: bold;
+  color:rgb(255, 255, 255);
 }
 
 .glossary-entry-highlighted button {
   background-color: rgb(2, 50, 64);
 }
 
-.nowrap {
+.divPanel span {
   word-wrap: break-word;
+  width: 280px;
 }
 
 

From 56d391f513ae5d1ea6800754a4503bd4ea356435 Mon Sep 17 00:00:00 2001
From: Jiaxi Li <ljx@MacBook-Pro-672.local>
Date: Sun, 25 Jun 2023 16:23:39 -0400
Subject: [PATCH 02/39] bugfix: fix asl term source

---
 src/screens/Watch/Components/CTPopup/CTPopup.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/screens/Watch/Components/CTPopup/CTPopup.jsx b/src/screens/Watch/Components/CTPopup/CTPopup.jsx
index 2fce1d988..3237efb59 100644
--- a/src/screens/Watch/Components/CTPopup/CTPopup.jsx
+++ b/src/screens/Watch/Components/CTPopup/CTPopup.jsx
@@ -131,7 +131,7 @@ const CTPopup = ({ time = 0, duration = 0, liveMode = false }) => {
           if (ret.status === 200) {
             // request success
             ret.data.forEach(element => {
-              const URL = `https://${hostName}/data/aslvideos/aslcore/original/${element.uniqueASLIdentifier.replace(' ', '_')}.mp4`
+              const URL = `https://${hostName}/data/aslvideos/${element.source.toLowerCase()}/original/${element.uniqueASLIdentifier}.mp4`
               console.log(`${element.kind} ${URL}`);
               if (element.kind === 1) {
                 setSignURL(URL);

From f7c388d4a75414be955311dce0aac4d7def6cd43 Mon Sep 17 00:00:00 2001
From: Yijun Lin <yijunl4@illinois.edu>
Date: Sun, 25 Jun 2023 15:59:50 -0500
Subject: [PATCH 03/39] fix video url, fix overflow video

---
 .../Watch/Components/CTPopup/CTPopup.jsx      | 22 ++++++++++---------
 .../Watch/Components/CTPopup/CTPopup.scss     |  9 ++++++--
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/screens/Watch/Components/CTPopup/CTPopup.jsx b/src/screens/Watch/Components/CTPopup/CTPopup.jsx
index 3237efb59..dc6ac8fe3 100644
--- a/src/screens/Watch/Components/CTPopup/CTPopup.jsx
+++ b/src/screens/Watch/Components/CTPopup/CTPopup.jsx
@@ -34,11 +34,10 @@ const CTPopup = ({ time = 0, duration = 0, liveMode = false }) => {
     // const hostName = window.location.hostname;
     const hostName = "ct-dev.ncsa.illinois.edu"; // for local test
     //below are variables for videos and explanations for chosen glossary
-    const [term, setTerm] = useState({
-      word: '',
-      explain: '',
-      url: ''
-    }); // set default to empty string
+    const [term, setTerm] = useState({}); // set default to empty string
+    const [signSource, setSignSource] = useState('');
+    const [definitionSource, setDefinitionSource] = useState('');
+    const [exampleSource, setExampleSource] = useState('');
     const [signURL, setSignURL] = useState(''); //url should be set to '' when it does not exist
     const [definitionURL, setDefinitionURL] = useState('');
     const [exampleURL, setExampleURL] = useState('');
@@ -125,20 +124,23 @@ const CTPopup = ({ time = 0, duration = 0, liveMode = false }) => {
         setSignURL('');
         setDefinitionURL('');
         setExampleURL('');
-        if (word.length > 0) {
+        if (word && word.length > 0) {
           // current term is not empty
           const ret = await cthttp.get(`ASLVideo/GetASLVideosByTerm?term=${term.word}`);
           if (ret.status === 200) {
             // request success
             ret.data.forEach(element => {
               const URL = `https://${hostName}/data/aslvideos/${element.source.toLowerCase()}/original/${element.uniqueASLIdentifier}.mp4`
-              console.log(`${element.kind} ${URL}`);
+              // console.log(`${element.kind} ${URL}`);
               if (element.kind === 1) {
                 setSignURL(URL);
+                setSignSource(element.source);
               } else if (element.kind === 2) {
                 setDefinitionURL(URL);
+                setDefinitionSource(element.source);
               } else if (element.kind === 3) {
                 setExampleURL(URL);
+                setExampleSource(element.source);
               }
             })
           }
@@ -209,9 +211,9 @@ const CTPopup = ({ time = 0, duration = 0, liveMode = false }) => {
                         {definitionURL !== '' && (<Tab>Definition</Tab>)}
                         {exampleURL !== '' && (<Tab>Example</Tab>)}
                       </TabList>
-                      {signURL !== '' && ASLVideoPlayer(term.word, signURL, term.source)}
-                      {definitionURL !== '' && ASLVideoPlayer(term.word, definitionURL, term.source)}
-                      {exampleURL !== '' && ASLVideoPlayer(term.word, exampleURL, term.source)}
+                      {signURL !== '' && ASLVideoPlayer(term.word, signURL, signSource)}
+                      {definitionURL !== '' && ASLVideoPlayer(term.word, definitionURL, definitionSource)}
+                      {exampleURL !== '' && ASLVideoPlayer(term.word, exampleURL, exampleSource)}
                     </Tabs>
                   </TabPanel>
                   <TabPanel className='divPanel'>
diff --git a/src/screens/Watch/Components/CTPopup/CTPopup.scss b/src/screens/Watch/Components/CTPopup/CTPopup.scss
index 2da97d9fa..52fb6d7cb 100644
--- a/src/screens/Watch/Components/CTPopup/CTPopup.scss
+++ b/src/screens/Watch/Components/CTPopup/CTPopup.scss
@@ -108,10 +108,15 @@
 }
 
 .video-player {
-  width: 90%;
-  height: 90%;
+  width: 300px;
+  height: 170px;
 }
 
+// .popup-video-player {
+//   height: 80%;
+//   z-index: 100;
+// }
+
 .search-bar {
   // z-index: 100;
   // position: absolute;

From 318eeb3110bff693f293866fe3f275b69a35ea1d Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Mon, 10 Jul 2023 12:09:32 -0500
Subject: [PATCH 04/39] make changes to edit structure ui

---
 .../ChapterList/EPubChapterItem.js            |   2 +-
 .../ChapterList/EPubListItem.js               | 166 ++++++++++++++----
 2 files changed, 136 insertions(+), 32 deletions(-)

diff --git a/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubChapterItem.js b/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubChapterItem.js
index 6bfba586f..dc6960796 100644
--- a/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubChapterItem.js
+++ b/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubChapterItem.js
@@ -58,7 +58,6 @@ function EPubChapterItem({
   // }
   const itemsToDisplay = canDisplayFull ? chapter.items : chapter.items.slice(0, 3);
 
-
   // Automatically update the untitled chapter names to correlate with the chapter index
   useEffect(() => {
     const reg = /^Untitled Chapter \(\d\)$/;
@@ -122,6 +121,7 @@ function EPubChapterItem({
                 {itemsToDisplay.map((item, itemIndex) => (
                   <EPubListItem
                     key={item.id}
+                    chapter={chapter}
                     item={item}
                     itemIndex={itemIndex}
                     chapterIndex={chapterIndex}
diff --git a/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubListItem.js b/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubListItem.js
index 9d1c75ac9..5bc04b39c 100644
--- a/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubListItem.js
+++ b/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubListItem.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import cx from 'classnames';
 import { Button } from 'pico-ui';
 import { connect } from 'dva'
@@ -7,8 +7,12 @@ import timestr from 'utils/use-time';
 import { uurl } from 'utils/use-url';
 import Image from 'components/Image';
 import { epub } from '../../../controllers';
+import { ChapterEditButton, MDEditorModal } from '../../../components';
+import ChapterInfo from '../../EditEPubChapter/ChapterEditor/ChapterInfo';
+import { ChapterImage, ChapterText } from '../../../components';
 
 function EPubListItem({
+  chapter,
   item,
   itemIndex,
   chapterIndex,
@@ -17,13 +21,79 @@ function EPubListItem({
   canSplit = false,
   canSplitSubChapter = false,
   canSubdivide = false,
+  canAddImage = true,
+  canAddText = true,
   setEPubItem,
   dispatch
 }) {
+    const chapterText = chapter.contents[1]
     const imgSrc = uurl.getMediaUrl(item.image);
     const SubCParams = { chapterIdx: chapterIndex, subChapterIdx: subChapterIndex, itemIdx: itemIndex };
     const CParams = { chapterIdx: chapterIndex, itemIdx: itemIndex };
 
+    const [insertType, setInsertType] = useState(null);
+  const openMDEditor = insertType === 'md';
+
+  const onInsert = (val) => {
+    dispatch({
+      type: 'epub/updateEpubData', payload: {
+        action: 'insertChapterContent', payload: { contentIdx: CParams.chapterIdx, value: val }
+      }
+    })
+  };
+
+  const handleClose = () => setInsertType(null);
+
+  const handleSave = (val) => {
+    console.log(val, CParams.chapterIdx)
+    if (typeof onInsert === 'function' && val) {
+      onInsert(val);
+    }
+    handleClose();
+  };
+
+
+
+  const handleOpenMDEditor = () => setInsertType('md');
+
+
+ const handleSaveImage = (val) => {
+    //handleSave(new EPubImageData(val).toObject());
+  };
+
+ const handleOpenImgPicker = () => {
+    const imgData = {
+      screenshots: imgSrc,
+      onSave: handleSaveImage,
+      //chapterScreenshots: epub.chapters[subChapterIndex].allImagesWithIn
+    };
+    dispatch({ type: 'epub/setImgPickerData', payload: imgData });
+  }
+
+  // const onTextChange = (subChapterindex) => (val) => {
+  //   dispatch({
+  //     type: 'epub/updateEpubData', payload: {
+  //       action: val ? 'setChapterContent' : 'removeChapterContent', payload: { contentIdx: subChapterindex, value: val }
+  //     }
+  //   })
+  // };
+
+  const onImageChange = (val) => {
+    dispatch({
+      type: 'epub/updateEpubData', payload: {
+        action: 'setChapterContent', payload: { contentIdx: CParams.itemIdx, value: val, type: 'image' }
+      }
+    })
+  };
+
+  const onRemove = () => {
+    dispatch({
+      type: 'epub/updateEpubData', payload: {
+        action: 'removeChapterContent', payload: { contentIdx: CParams.itemIdx, type: 'image' }
+      }
+    })
+  };
+
     const splitChapterFromSubChaptersItems = () => dispatch({
       type: 'epub/updateEpubData', payload: {
         action: 'splitChapterFromSubChaptersItems', payload: SubCParams
@@ -76,6 +146,20 @@ function EPubListItem({
       onClick: handleSplitChapter
     });
 
+    const addImgElement = altEl(Button, canAddImage, {
+      ...btnProps,
+      text: 'Add Image',
+      icon: 'image',
+      onClick: handleOpenImgPicker
+    });
+
+    const addTextElement = altEl(Button, canAddText, {
+      ...btnProps,
+      text: 'Add Text',
+      icon: 'add',
+      onClick: handleOpenMDEditor
+    });
+
     const splitSChBtnElement = altEl(Button, canSplitSubChapter, {
       ...btnProps,
       text: 'New Sub-Chapter',
@@ -95,39 +179,59 @@ function EPubListItem({
           {splitBtnElement}
           {splitSChBtnElement}
           {subdivideBtnElement}
+          {addImgElement}
+          {addTextElement}
         </div>
 
-        <div
-          id={item.id}
-          role="button"
-          tabIndex="0"
-          className="ct-epb ct-d-r item-info"
-          onClick={openItemDetails}
-          aria-haspopup="true"
-          aria-controls={epub.id.epbItemViewId(item.id)}
-        >
-          <div className="item-time-con">
-            <div className="item-time">
-              {timestr.toPrettierTimeString(item.start)}
-            </div>
-            <div className="item-time">
-              {timestr.toPrettierTimeString(item.end)}
+        <MDEditorModal
+          show={openMDEditor}
+          onClose={handleClose}
+          onSave={handleSave}
+          title="Insert New Text"
+        />
+
+        {
+          itemIndex == 0 ? (
+            <div
+              id={item.id}
+              role="button"
+              tabIndex="0"
+              className="ct-epb ct-d-r item-info"
+              onClick={openItemDetails}
+              aria-haspopup="true"
+              aria-controls={epub.id.epbItemViewId(item.id)}
+            >
+              <div className="item-time-con">
+                <div className="item-time">
+                  {timestr.toPrettierTimeString(item.start)}
+                </div>
+                <div className="item-time">
+                  {timestr.toPrettierTimeString(item.end)}
+                </div>
+              </div>
+
+              <div className="item-img-con">
+                {/* <Image src={imgSrc} alt="screenshot" /> */}
+                {<ChapterImage
+                  id={item.id}
+                  image={{src: item.image}}
+                  enableChapterScreenshots
+                  onChooseImage={onImageChange}
+                  onRemoveImage={onRemove}
+                />}
+
+                {/* text below must be modified to make sure text length is greater than a certain amount */}
+                <CTText line={4} className="item-text">
+                  {
+                    chapterText
+                    ||
+                    <span className="text-muted"><i>No Transcriptions</i></span>
+                  }
+                </CTText>
+              </div>
             </div>
-          </div>
-
-          <div className="item-img-con">
-            <Image src={imgSrc} alt="screenshot" />
-
-            {/* text below must be modified to make sure text length is greater than a certain amount */}
-            <CTText line={4} className="item-text">
-              {
-                item.text
-                ||
-                <span className="text-muted"><i>No Transcriptions</i></span>
-              }
-            </CTText>
-          </div>
-        </div>
+          ) : (<></>)
+        }
       </div>
     );
 }

From e5bac71173ca938625d91b4e49032111a898331a Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Mon, 17 Jul 2023 14:20:09 -0500
Subject: [PATCH 05/39] create new view, add to dropdown, and display all
 i-note contents

---
 .../components/EPubHeader/ViewDropdown.js     |  5 +
 .../controllers/constants/EPubConstants.js    |  7 +-
 src/screens/EPub/index.js                     |  4 +-
 src/screens/EPub/model.js                     |  2 +
 .../EditINote/INoteEditor/INoteChapter.js     | 97 +++++++++++++++++++
 .../EPub/views/EditINote/INoteEditor/index.js | 25 +++++
 .../views/EditINote/INoteEditor/index.scss    | 49 ++++++++++
 src/screens/EPub/views/EditINote/index.js     | 32 ++++++
 src/screens/EPub/views/index.js               |  3 +-
 9 files changed, 220 insertions(+), 4 deletions(-)
 create mode 100644 src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
 create mode 100644 src/screens/EPub/views/EditINote/INoteEditor/index.js
 create mode 100644 src/screens/EPub/views/EditINote/INoteEditor/index.scss
 create mode 100644 src/screens/EPub/views/EditINote/index.js

diff --git a/src/screens/EPub/components/EPubHeader/ViewDropdown.js b/src/screens/EPub/components/EPubHeader/ViewDropdown.js
index b390d2ed4..347d1b461 100644
--- a/src/screens/EPub/components/EPubHeader/ViewDropdown.js
+++ b/src/screens/EPub/components/EPubHeader/ViewDropdown.js
@@ -27,6 +27,11 @@ function ViewDropdown({ view, dispatch }) {
       value: epub.const.EpbEditChapter,
       text: 'Edit Chapters',
       icon: 'dashboard'
+    },
+    {
+      value: epub.const.EditINote,
+      text: 'Edit INote',
+      icon: 'edit'
     }
   ];
 
diff --git a/src/screens/EPub/controllers/constants/EPubConstants.js b/src/screens/EPub/controllers/constants/EPubConstants.js
index 1be36e760..de37caf0e 100644
--- a/src/screens/EPub/controllers/constants/EPubConstants.js
+++ b/src/screens/EPub/controllers/constants/EPubConstants.js
@@ -10,11 +10,14 @@ export default class EPubConstants {
   static EpbReadOnly = 'v-read-only';
   static EpbEditStructure = 'v-structure';
   static EpbEditChapter = 'v-edit';
-  static EpbDefaultView = EPubConstants.EpbReadOnly;
+  static EditINote = 'v-edit-inote'
+
+  static EpbDefaultView = EPubConstants.EditINote;
   static EPubViews = [
     EPubConstants.EpbReadOnly,
     EPubConstants.EpbEditStructure,
-    EPubConstants.EpbEditChapter
+    EPubConstants.EpbEditChapter,
+    EPubConstants.EditINote
   ];
 
   // saving status
diff --git a/src/screens/EPub/index.js b/src/screens/EPub/index.js
index 1b5f76379..81ae2f7d2 100644
--- a/src/screens/EPub/index.js
+++ b/src/screens/EPub/index.js
@@ -13,7 +13,7 @@ import {
   EPubFileInfoModal,
   ImagePickerModal
 } from './components';
-import { EditEPubStructure, EditEPubChapter, ViewAndDownload } from './views';
+import { EditEPubStructure, EditEPubChapter, ViewAndDownload, EditINote } from './views';
 import './index.scss';
 
 function shouldDisable() {
@@ -30,6 +30,7 @@ function EPubWithRedux({ view, chapters, epub, dispatch }) {
   const editStructView = altEl(EditEPubStructure, view === epubController.const.EpbEditStructure);
   const editChapterView = altEl(EditEPubChapter, view === epubController.const.EpbEditChapter);
   const readOnlyView = altEl(ViewAndDownload, view === epubController.const.EpbReadOnly);
+  const editINoteView = altEl(EditINote, view === epubController.const.EditINote);
 
   const previewModal = makeEl(PreviewModal);
   const shortcutModal = makeEl(ShortcutModal);
@@ -104,6 +105,7 @@ function EPubWithRedux({ view, chapters, epub, dispatch }) {
         {editStructView}
         {editChapterView}
         {readOnlyView}
+        {editINoteView}
       </CTFragment>
 
       <ImagePickerModal />
diff --git a/src/screens/EPub/model.js b/src/screens/EPub/model.js
index 2d9078cae..ef3b0c206 100644
--- a/src/screens/EPub/model.js
+++ b/src/screens/EPub/model.js
@@ -146,6 +146,8 @@ const EPubModel = {
                 const media = yield call(getMediaById, _epub.sourceId);
                 yield put({ type: 'setMedia', payload: media });
             }
+            // split chapter by screenshots on create (default of 25 min word count)
+            // yield put({type: 'epub/splitChaptersByScreenshots', payload:{wc: 25}});
         },
         *openPlayer({ payload: { title, start, end } }, { call, put, select, take }) {
             const { epub } = yield select();
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
new file mode 100644
index 000000000..e1b6be84e
--- /dev/null
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -0,0 +1,97 @@
+import { CTFragment, CTText, altEl} from 'layout'
+import React from 'react' 
+import { ChapterImage, ChapterText, Text } from '../../../components';
+import { Button } from 'pico-ui';
+
+function INoteChapter ({
+    chapter, 
+    chIdx,
+    canSplit = true,
+    canSplitSubChapter = true,
+    canSubdivide = true,
+    dispatch 
+}) {
+
+    // Buttons and onClick Functions 
+    const btnProps = {
+        round: true,
+        uppercase: true,
+        classNames: 'item-action-btn',
+        color: 'teal transparent'
+    };
+
+    // Split Button 
+    const splitBtnElement = altEl(Button, canSplit, {
+        ...btnProps,
+        text: 'Split Chapter',
+        icon: 'unfold_more',
+        // onClick: handleSplitChapter
+    });
+
+    // Add Image Button
+    const addImgElement = altEl(Button, true, {
+        ...btnProps,
+        text: 'Add Image',
+        icon: 'image',
+        // onClick: handleOpenImgPicker
+    });
+
+    // Add Text Button 
+    const addTextElement = altEl(Button, true, {
+        ...btnProps,
+        text: 'Add Text',
+        icon: 'add',
+        // onClick: handleOpenMDEditor
+    });
+
+    // New Subchapter Button 
+    const splitSChBtnElement = altEl(Button, canSplitSubChapter, {
+        ...btnProps,
+        text: 'New Sub-Chapter',
+        icon: 'subdirectory_arrow_right',
+        // onClick: splitSubChapter
+    });
+
+    // Subdivide Button 
+    const subdivideBtnElement = altEl(Button, canSubdivide, {
+        ...btnProps,
+        text: 'subdivide',
+        icon: 'subdirectory_arrow_right',
+        // onClick: subdivideChapter
+    });
+
+    return (
+        <div className='ct-inote-chapter'>
+            <div className='title'>
+                <CTText size='huge' bold>
+                    {chapter.title}
+                </CTText>
+            </div>
+
+            <div className="item-actions">
+                {splitBtnElement}
+                {splitSChBtnElement}
+                {subdivideBtnElement}
+                {addImgElement}
+                {addTextElement}
+            </div>
+
+            {chapter.contents.map((content, idx) => (
+                typeof content === "object" ? // image
+                    <div className='img-con'>   
+                        {<ChapterImage 
+                            image={content} //TODO ITEM id and ocr and alttext maybe map between item and content 
+                        />}
+                    </div>
+                : // text 
+                    <div className='item-text'>   
+                        <ChapterText  
+                            text={content}
+                        />
+                    </div>
+            ))} 
+        </div>
+    )
+}
+
+export default INoteChapter
\ No newline at end of file
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/index.js b/src/screens/EPub/views/EditINote/INoteEditor/index.js
new file mode 100644
index 000000000..f00a34074
--- /dev/null
+++ b/src/screens/EPub/views/EditINote/INoteEditor/index.js
@@ -0,0 +1,25 @@
+
+import React, { useEffect, useState } from 'react';
+import { connect } from 'dva'
+import './index.scss';
+
+
+import INoteChapter from './INoteChapter';
+
+function INoteEditor({ chapters = [], foldedIds = [], currChIndex, setINoteItem, dispatch }) {
+    return (
+        <ul className='ct-inote-editor'> 
+            {chapters.map((chapter, chIdx) => (
+                <INoteChapter 
+                    chapter={chapter} 
+                    chIdx={chIdx}
+                    dispatch={dispatch}
+                />
+            ))}
+        </ul>
+    )
+}
+
+export default connect(({ epub: { currChIndex, epub: { chapters, images}, foldedIds }, loading }) => ({
+    currChIndex, chapters, images, foldedIds
+  }))(INoteEditor); 
\ No newline at end of file
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/index.scss b/src/screens/EPub/views/EditINote/INoteEditor/index.scss
new file mode 100644
index 000000000..af125b738
--- /dev/null
+++ b/src/screens/EPub/views/EditINote/INoteEditor/index.scss
@@ -0,0 +1,49 @@
+
+// INoteChapter 
+.ct-epb.ch-img-con {
+    position: relative;
+    width: 100%;
+    flex: 0 0 auto;
+    padding-bottom: 20px;
+    border-top: solid 1px rgb(236, 236, 236);
+    .ch-img-wrapper{
+        position: relative;
+        min-width: 150px;
+        height: max-content;
+
+        .ct-epb.ch-img {
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+            position: relative;
+            padding-left: 10px;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            width: 220px;
+            object-fit: contain;
+            cursor: zoom-in;
+        }
+    }
+}
+
+.item-text {
+    position: relative;
+    white-space: pre-wrap;
+    padding-left: 10px;
+    padding-top: 10px;
+    font-size: 14px;
+    line-height: 23px;
+    // height: 92px;
+    overflow: hidden;
+}
+// .ct-inote-chapter {
+//     .item-actions {
+//         width: 100%;
+//         transition: opacity .2s ease-in;
+//         opacity: 0;
+//         pointer-events: none;
+//         border-radius: 0 20px 20px 0;
+//         padding-left: 20px;
+//         // background-color: rgb(245, 245, 245);
+//     }
+// }
\ No newline at end of file
diff --git a/src/screens/EPub/views/EditINote/index.js b/src/screens/EPub/views/EditINote/index.js
new file mode 100644
index 000000000..65d96a8de
--- /dev/null
+++ b/src/screens/EPub/views/EditINote/index.js
@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react';
+import _ from 'lodash'
+import { CTFragment, CTHeading, CTText } from 'layout';
+import { connect } from 'dva'
+import { EPubNavigationProvider } from '../../components';
+import { epub } from '../../controllers';
+import INoteEditor from './INoteEditor';
+
+// import './index.scss';
+
+function EditINote ({ epub: epubData, dispatch}) {
+    const dispatchScroll = _.debounce((e) => dispatch({ type: 'epub/onScroll', payload: e }), 300);
+    const onScroll = (e) => dispatchScroll(e.target);
+    
+    const [iNoteItem, setINoteItem] = useState(null);
+    console.log(epubData)
+    return (
+        <EPubNavigationProvider>
+            <CTFragment dFlex h100 scrollY id={epub.id.EPubChapterListID} onScroll={onScroll}>
+                <CTFragment width="75%">
+                    <CTHeading>{epubData.title}</CTHeading>
+                    <INoteEditor> setINoteItem={setINoteItem} dispatch={dispatch} </INoteEditor>
+                </CTFragment>
+            </CTFragment>
+        </EPubNavigationProvider>
+    )
+
+}
+
+export default connect(({ epub: { epub }, loading }) => ({
+    epub
+  }))(EditINote);
\ No newline at end of file
diff --git a/src/screens/EPub/views/index.js b/src/screens/EPub/views/index.js
index 655b026bd..970b22b59 100644
--- a/src/screens/EPub/views/index.js
+++ b/src/screens/EPub/views/index.js
@@ -1,3 +1,4 @@
 export { default as EditEPubStructure } from './EditEPubStructure';
 export { default as EditEPubChapter } from './EditEPubChapter';
-export { default as ViewAndDownload } from './ViewAndDownload';
\ No newline at end of file
+export { default as ViewAndDownload } from './ViewAndDownload';
+export {default as EditINote } from './EditINote';
\ No newline at end of file

From 35bff309ae3e4ba807e5473181cf5bd969245c22 Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Mon, 17 Jul 2023 14:44:09 -0500
Subject: [PATCH 06/39] revert other views

---
 .../ChapterList/EPubChapterItem.js            |   2 +-
 .../ChapterList/EPubListItem.js               | 166 ++++--------------
 2 files changed, 32 insertions(+), 136 deletions(-)

diff --git a/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubChapterItem.js b/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubChapterItem.js
index dc6960796..6bfba586f 100644
--- a/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubChapterItem.js
+++ b/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubChapterItem.js
@@ -58,6 +58,7 @@ function EPubChapterItem({
   // }
   const itemsToDisplay = canDisplayFull ? chapter.items : chapter.items.slice(0, 3);
 
+
   // Automatically update the untitled chapter names to correlate with the chapter index
   useEffect(() => {
     const reg = /^Untitled Chapter \(\d\)$/;
@@ -121,7 +122,6 @@ function EPubChapterItem({
                 {itemsToDisplay.map((item, itemIndex) => (
                   <EPubListItem
                     key={item.id}
-                    chapter={chapter}
                     item={item}
                     itemIndex={itemIndex}
                     chapterIndex={chapterIndex}
diff --git a/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubListItem.js b/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubListItem.js
index 5bc04b39c..9d1c75ac9 100644
--- a/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubListItem.js
+++ b/src/screens/EPub/views/EditEPubStructure/ChapterList/EPubListItem.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { Button } from 'pico-ui';
 import { connect } from 'dva'
@@ -7,12 +7,8 @@ import timestr from 'utils/use-time';
 import { uurl } from 'utils/use-url';
 import Image from 'components/Image';
 import { epub } from '../../../controllers';
-import { ChapterEditButton, MDEditorModal } from '../../../components';
-import ChapterInfo from '../../EditEPubChapter/ChapterEditor/ChapterInfo';
-import { ChapterImage, ChapterText } from '../../../components';
 
 function EPubListItem({
-  chapter,
   item,
   itemIndex,
   chapterIndex,
@@ -21,79 +17,13 @@ function EPubListItem({
   canSplit = false,
   canSplitSubChapter = false,
   canSubdivide = false,
-  canAddImage = true,
-  canAddText = true,
   setEPubItem,
   dispatch
 }) {
-    const chapterText = chapter.contents[1]
     const imgSrc = uurl.getMediaUrl(item.image);
     const SubCParams = { chapterIdx: chapterIndex, subChapterIdx: subChapterIndex, itemIdx: itemIndex };
     const CParams = { chapterIdx: chapterIndex, itemIdx: itemIndex };
 
-    const [insertType, setInsertType] = useState(null);
-  const openMDEditor = insertType === 'md';
-
-  const onInsert = (val) => {
-    dispatch({
-      type: 'epub/updateEpubData', payload: {
-        action: 'insertChapterContent', payload: { contentIdx: CParams.chapterIdx, value: val }
-      }
-    })
-  };
-
-  const handleClose = () => setInsertType(null);
-
-  const handleSave = (val) => {
-    console.log(val, CParams.chapterIdx)
-    if (typeof onInsert === 'function' && val) {
-      onInsert(val);
-    }
-    handleClose();
-  };
-
-
-
-  const handleOpenMDEditor = () => setInsertType('md');
-
-
- const handleSaveImage = (val) => {
-    //handleSave(new EPubImageData(val).toObject());
-  };
-
- const handleOpenImgPicker = () => {
-    const imgData = {
-      screenshots: imgSrc,
-      onSave: handleSaveImage,
-      //chapterScreenshots: epub.chapters[subChapterIndex].allImagesWithIn
-    };
-    dispatch({ type: 'epub/setImgPickerData', payload: imgData });
-  }
-
-  // const onTextChange = (subChapterindex) => (val) => {
-  //   dispatch({
-  //     type: 'epub/updateEpubData', payload: {
-  //       action: val ? 'setChapterContent' : 'removeChapterContent', payload: { contentIdx: subChapterindex, value: val }
-  //     }
-  //   })
-  // };
-
-  const onImageChange = (val) => {
-    dispatch({
-      type: 'epub/updateEpubData', payload: {
-        action: 'setChapterContent', payload: { contentIdx: CParams.itemIdx, value: val, type: 'image' }
-      }
-    })
-  };
-
-  const onRemove = () => {
-    dispatch({
-      type: 'epub/updateEpubData', payload: {
-        action: 'removeChapterContent', payload: { contentIdx: CParams.itemIdx, type: 'image' }
-      }
-    })
-  };
-
     const splitChapterFromSubChaptersItems = () => dispatch({
       type: 'epub/updateEpubData', payload: {
         action: 'splitChapterFromSubChaptersItems', payload: SubCParams
@@ -146,20 +76,6 @@ function EPubListItem({
       onClick: handleSplitChapter
     });
 
-    const addImgElement = altEl(Button, canAddImage, {
-      ...btnProps,
-      text: 'Add Image',
-      icon: 'image',
-      onClick: handleOpenImgPicker
-    });
-
-    const addTextElement = altEl(Button, canAddText, {
-      ...btnProps,
-      text: 'Add Text',
-      icon: 'add',
-      onClick: handleOpenMDEditor
-    });
-
     const splitSChBtnElement = altEl(Button, canSplitSubChapter, {
       ...btnProps,
       text: 'New Sub-Chapter',
@@ -179,59 +95,39 @@ function EPubListItem({
           {splitBtnElement}
           {splitSChBtnElement}
           {subdivideBtnElement}
-          {addImgElement}
-          {addTextElement}
         </div>
 
-        <MDEditorModal
-          show={openMDEditor}
-          onClose={handleClose}
-          onSave={handleSave}
-          title="Insert New Text"
-        />
-
-        {
-          itemIndex == 0 ? (
-            <div
-              id={item.id}
-              role="button"
-              tabIndex="0"
-              className="ct-epb ct-d-r item-info"
-              onClick={openItemDetails}
-              aria-haspopup="true"
-              aria-controls={epub.id.epbItemViewId(item.id)}
-            >
-              <div className="item-time-con">
-                <div className="item-time">
-                  {timestr.toPrettierTimeString(item.start)}
-                </div>
-                <div className="item-time">
-                  {timestr.toPrettierTimeString(item.end)}
-                </div>
-              </div>
-
-              <div className="item-img-con">
-                {/* <Image src={imgSrc} alt="screenshot" /> */}
-                {<ChapterImage
-                  id={item.id}
-                  image={{src: item.image}}
-                  enableChapterScreenshots
-                  onChooseImage={onImageChange}
-                  onRemoveImage={onRemove}
-                />}
-
-                {/* text below must be modified to make sure text length is greater than a certain amount */}
-                <CTText line={4} className="item-text">
-                  {
-                    chapterText
-                    ||
-                    <span className="text-muted"><i>No Transcriptions</i></span>
-                  }
-                </CTText>
-              </div>
+        <div
+          id={item.id}
+          role="button"
+          tabIndex="0"
+          className="ct-epb ct-d-r item-info"
+          onClick={openItemDetails}
+          aria-haspopup="true"
+          aria-controls={epub.id.epbItemViewId(item.id)}
+        >
+          <div className="item-time-con">
+            <div className="item-time">
+              {timestr.toPrettierTimeString(item.start)}
+            </div>
+            <div className="item-time">
+              {timestr.toPrettierTimeString(item.end)}
             </div>
-          ) : (<></>)
-        }
+          </div>
+
+          <div className="item-img-con">
+            <Image src={imgSrc} alt="screenshot" />
+
+            {/* text below must be modified to make sure text length is greater than a certain amount */}
+            <CTText line={4} className="item-text">
+              {
+                item.text
+                ||
+                <span className="text-muted"><i>No Transcriptions</i></span>
+              }
+            </CTText>
+          </div>
+        </div>
       </div>
     );
 }

From 8d09798c65fc6efd5e94d079030905c71b8235b1 Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Mon, 17 Jul 2023 14:59:41 -0500
Subject: [PATCH 07/39] fix lint errors

---
 .../EPub/views/EditEPubChapter/index.js       |  2 +-
 .../EditINote/INoteEditor/INoteChapter.js     | 23 +++++++++----------
 .../EPub/views/EditINote/INoteEditor/index.js |  6 ++---
 src/screens/EPub/views/EditINote/index.js     |  6 +----
 4 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/screens/EPub/views/EditEPubChapter/index.js b/src/screens/EPub/views/EditEPubChapter/index.js
index 0c26fcf17..0e0b16e65 100644
--- a/src/screens/EPub/views/EditEPubChapter/index.js
+++ b/src/screens/EPub/views/EditEPubChapter/index.js
@@ -13,7 +13,7 @@ function EditEPubChapter({ dispatch }) {
   const dispatchScroll = _.debounce((e) => dispatch({ type: 'epub/onScroll', payload: e }), 300)
   const onScroll = (e) => dispatchScroll(e.target)
 
-  return (
+  return ( 
     <EPubNavigationProvider>
       <CTFragment dFlex h100 scrollY id={epub.id.EPubChapterListID} onScroll={onScroll}>
         <CTFragment width="67%">
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index e1b6be84e..06359274a 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -1,7 +1,7 @@
 import { CTFragment, CTText, altEl} from 'layout'
 import React from 'react' 
-import { ChapterImage, ChapterText, Text } from '../../../components';
 import { Button } from 'pico-ui';
+import { ChapterImage, ChapterText } from '../../../components';
 
 function INoteChapter ({
     chapter, 
@@ -11,7 +11,6 @@ function INoteChapter ({
     canSubdivide = true,
     dispatch 
 }) {
-
     // Buttons and onClick Functions 
     const btnProps = {
         round: true,
@@ -64,29 +63,29 @@ function INoteChapter ({
         <div className='ct-inote-chapter'>
             <div className='title'>
                 <CTText size='huge' bold>
-                    {chapter.title}
+                  {chapter.title}
                 </CTText>
             </div>
 
             <div className="item-actions">
-                {splitBtnElement}
-                {splitSChBtnElement}
-                {subdivideBtnElement}
-                {addImgElement}
-                {addTextElement}
+              {splitBtnElement}
+              {splitSChBtnElement}
+              {subdivideBtnElement}
+              {addImgElement}
+              {addTextElement}
             </div>
 
             {chapter.contents.map((content, idx) => (
                 typeof content === "object" ? // image
                     <div className='img-con'>   
-                        {<ChapterImage 
-                            image={content} //TODO ITEM id and ocr and alttext maybe map between item and content 
-                        />}
+                        <ChapterImage 
+                          image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
+                        />
                     </div>
                 : // text 
                     <div className='item-text'>   
                         <ChapterText  
-                            text={content}
+                          text={content}
                         />
                     </div>
             ))} 
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/index.js b/src/screens/EPub/views/EditINote/INoteEditor/index.js
index f00a34074..75e102622 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/index.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/index.js
@@ -11,9 +11,9 @@ function INoteEditor({ chapters = [], foldedIds = [], currChIndex, setINoteItem,
         <ul className='ct-inote-editor'> 
             {chapters.map((chapter, chIdx) => (
                 <INoteChapter 
-                    chapter={chapter} 
-                    chIdx={chIdx}
-                    dispatch={dispatch}
+                  chapter={chapter} 
+                  chIdx={chIdx}
+                  dispatch={dispatch}
                 />
             ))}
         </ul>
diff --git a/src/screens/EPub/views/EditINote/index.js b/src/screens/EPub/views/EditINote/index.js
index 65d96a8de..26beafbf7 100644
--- a/src/screens/EPub/views/EditINote/index.js
+++ b/src/screens/EPub/views/EditINote/index.js
@@ -13,7 +13,6 @@ function EditINote ({ epub: epubData, dispatch}) {
     const onScroll = (e) => dispatchScroll(e.target);
     
     const [iNoteItem, setINoteItem] = useState(null);
-    console.log(epubData)
     return (
         <EPubNavigationProvider>
             <CTFragment dFlex h100 scrollY id={epub.id.EPubChapterListID} onScroll={onScroll}>
@@ -24,9 +23,6 @@ function EditINote ({ epub: epubData, dispatch}) {
             </CTFragment>
         </EPubNavigationProvider>
     )
-
 }
-
-export default connect(({ epub: { epub }, loading }) => ({
-    epub
+export default connect(({ loading }) => ({
   }))(EditINote);
\ No newline at end of file

From 7345c36316182adc764edeada04ac7e4724cb022 Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Tue, 18 Jul 2023 12:19:29 -0500
Subject: [PATCH 08/39] make titles editable and quick navigate from side menu

---
 .../EditINote/INoteEditor/INoteChapter.js     | 31 +++++++++++++++----
 .../EPub/views/EditINote/INoteEditor/index.js |  1 +
 src/screens/EPub/views/EditINote/index.js     |  9 +++---
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 06359274a..982d38019 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -1,7 +1,8 @@
 import { CTFragment, CTText, altEl} from 'layout'
 import React from 'react' 
 import { Button } from 'pico-ui';
-import { ChapterImage, ChapterText } from '../../../components';
+import { ChapterImage, ChapterText, ChapterTitle } from '../../../components';
+import {epub as epubTools} from '../../../controllers'
 
 function INoteChapter ({
     chapter, 
@@ -59,12 +60,30 @@ function INoteChapter ({
         // onClick: subdivideChapter
     });
 
+    // Save Chapter Title Handler 
+    const saveChapterTitle = value =>
+    dispatch({
+      type: 'epub/updateEpubData', payload: {
+        action: 'saveChapterTitle', payload: { chapterIdx: chIdx, value }
+      }
+    })
+
     return (
-        <div className='ct-inote-chapter'>
-            <div className='title'>
-                <CTText size='huge' bold>
-                  {chapter.title}
-                </CTText>
+        <div 
+          className='ct-inote-chapter' 
+          id={epubTools.id.chID(chapter.id)}
+        >
+            <div className='chapter-title'>
+                <CTText muted className="pt-2 pl-2">Chapter {chIdx + 1}: {chapter.title}</CTText>
+                <div className="ch-item-title-con ct-d-r-center-v">
+                    <ChapterTitle
+                      id={epubTools.id.chTitleID(chapter.id)}
+                      value={chapter.title}
+                      onSave={saveChapterTitle}
+                      headingType="h2"
+                      className="ch-item-title"
+                    />
+                </div>
             </div>
 
             <div className="item-actions">
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/index.js b/src/screens/EPub/views/EditINote/INoteEditor/index.js
index 75e102622..4ace18f98 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/index.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/index.js
@@ -11,6 +11,7 @@ function INoteEditor({ chapters = [], foldedIds = [], currChIndex, setINoteItem,
         <ul className='ct-inote-editor'> 
             {chapters.map((chapter, chIdx) => (
                 <INoteChapter 
+                  key={chapter.id}
                   chapter={chapter} 
                   chIdx={chIdx}
                   dispatch={dispatch}
diff --git a/src/screens/EPub/views/EditINote/index.js b/src/screens/EPub/views/EditINote/index.js
index 26beafbf7..d116d6dcd 100644
--- a/src/screens/EPub/views/EditINote/index.js
+++ b/src/screens/EPub/views/EditINote/index.js
@@ -3,19 +3,19 @@ import _ from 'lodash'
 import { CTFragment, CTHeading, CTText } from 'layout';
 import { connect } from 'dva'
 import { EPubNavigationProvider } from '../../components';
-import { epub } from '../../controllers';
+import { epub as epubTools} from '../../controllers';
 import INoteEditor from './INoteEditor';
 
 // import './index.scss';
 
-function EditINote ({ epub: epubData, dispatch}) {
+function EditINote ({epub: epubData, dispatch}) {
     const dispatchScroll = _.debounce((e) => dispatch({ type: 'epub/onScroll', payload: e }), 300);
     const onScroll = (e) => dispatchScroll(e.target);
     
     const [iNoteItem, setINoteItem] = useState(null);
     return (
         <EPubNavigationProvider>
-            <CTFragment dFlex h100 scrollY id={epub.id.EPubChapterListID} onScroll={onScroll}>
+            <CTFragment dFlex h100 scrollY id={epubTools.id.EPubChapterListID} onScroll={onScroll}>
                 <CTFragment width="75%">
                     <CTHeading>{epubData.title}</CTHeading>
                     <INoteEditor> setINoteItem={setINoteItem} dispatch={dispatch} </INoteEditor>
@@ -24,5 +24,6 @@ function EditINote ({ epub: epubData, dispatch}) {
         </EPubNavigationProvider>
     )
 }
-export default connect(({ loading }) => ({
+export default connect(({epub: {epub}, loading }) => ({
+    epub
   }))(EditINote);
\ No newline at end of file

From 1a271af19905e4d434e85730c831fa561865663a Mon Sep 17 00:00:00 2001
From: alntao <alantt2@illinois.edu>
Date: Mon, 24 Jul 2023 10:23:52 -0700
Subject: [PATCH 09/39] testingaddimagetext

---
 .../EditINote/INoteEditor/INoteChapter.js     | 62 +++++++++++++++++--
 1 file changed, 58 insertions(+), 4 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 982d38019..f4de967bc 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -1,8 +1,9 @@
 import { CTFragment, CTText, altEl} from 'layout'
-import React from 'react' 
+import React, {useState} from 'react' 
 import { Button } from 'pico-ui';
-import { ChapterImage, ChapterText, ChapterTitle } from '../../../components';
+import { ChapterImage, ChapterText, ChapterTitle, MDEditorModal } from '../../../components';
 import {epub as epubTools} from '../../../controllers'
+import { EPubImageData } from 'entities/EPubs';
 
 function INoteChapter ({
     chapter, 
@@ -10,8 +11,54 @@ function INoteChapter ({
     canSplit = true,
     canSplitSubChapter = true,
     canSubdivide = true,
+    canAddImage = true,
+    canAddText = true,
     dispatch 
 }) {
+    
+    const CParams = { chapterIdx: chIdx};
+
+    const [insertType, setInsertType] = useState(null);
+    const openMDEditor = insertType === 'md';
+
+    const onInsert = (val) => {
+        console.log(CParams.chapterIdx)
+    dispatch({
+      type: 'epub/updateEpubData', payload: {
+        action: 'insertChapterContent', payload: { contentIdx: CParams.chapterIdx, value: val }
+      }
+    })
+  };
+
+    const handleOpenMDEditor = () => setInsertType('md');
+
+    const handleClose = () => setInsertType(null);
+
+    const handleSave = (val) => {
+        console.log(val, CParams.chapterIdx)
+        if (typeof onInsert === 'function' && val) {
+            onInsert(val);
+        }
+        handleClose();
+    };
+
+    const handleSaveImage = (val) => {
+        handleSave(new EPubImageData(val).toObject());
+    };
+
+    const handleOpenImgPicker = () => {
+        const imgData = {
+        //screenshots: imgSrc,
+        onSave: handleSaveImage,
+        //chapterScreenshots: epub.chapters[subChapterIndex].allImagesWithIn
+        };
+        dispatch({ type: 'epub/setImgPickerData', payload: imgData });
+    }
+
+
+
+
+
     // Buttons and onClick Functions 
     const btnProps = {
         round: true,
@@ -33,7 +80,7 @@ function INoteChapter ({
         ...btnProps,
         text: 'Add Image',
         icon: 'image',
-        // onClick: handleOpenImgPicker
+        onClick: handleOpenImgPicker
     });
 
     // Add Text Button 
@@ -41,7 +88,7 @@ function INoteChapter ({
         ...btnProps,
         text: 'Add Text',
         icon: 'add',
-        // onClick: handleOpenMDEditor
+        onClick: handleOpenMDEditor
     });
 
     // New Subchapter Button 
@@ -94,6 +141,13 @@ function INoteChapter ({
               {addTextElement}
             </div>
 
+            <MDEditorModal
+              show={openMDEditor}
+              onClose={handleClose}
+              onSave={handleSave}
+              title="Insert New Text"
+            />
+
             {chapter.contents.map((content, idx) => (
                 typeof content === "object" ? // image
                     <div className='img-con'>   

From e782e85c1d74683b0d30f7705752023847a368f7 Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Wed, 26 Jul 2023 11:07:57 -0500
Subject: [PATCH 10/39] add action items for each piece of content and pass in
 itemIdx to onclick functions

---
 .../EditINote/INoteEditor/INoteChapter.js     | 110 ++++++++++--------
 1 file changed, 59 insertions(+), 51 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 982d38019..3b2de3858 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -21,44 +21,49 @@ function INoteChapter ({
     };
 
     // Split Button 
-    const splitBtnElement = altEl(Button, canSplit, {
-        ...btnProps,
-        text: 'Split Chapter',
-        icon: 'unfold_more',
-        // onClick: handleSplitChapter
-    });
+    const splitBtnElement = (itemIdx) => {
+        return altEl(Button, canSplit, {
+            ...btnProps,
+            text: 'Split Chapter',
+            icon: 'unfold_more',
+            // onClick: handleSplitChapter(i1)
+    })};
 
     // Add Image Button
-    const addImgElement = altEl(Button, true, {
-        ...btnProps,
-        text: 'Add Image',
-        icon: 'image',
-        // onClick: handleOpenImgPicker
-    });
+    const addImgElement = (itemIdx) => {
+        return altEl(Button, true, {
+            ...btnProps,
+            text: 'Add Image',
+            icon: 'image',
+            // onClick: handleOpenImgPicker
+    })};
 
     // Add Text Button 
-    const addTextElement = altEl(Button, true, {
-        ...btnProps,
-        text: 'Add Text',
-        icon: 'add',
-        // onClick: handleOpenMDEditor
-    });
+    const addTextElement = (itemIdx) => {
+        return altEl(Button, true, {
+            ...btnProps,
+            text: 'Add Text',
+            icon: 'add',
+            // onClick: handleOpenMDEditor
+    })};
 
     // New Subchapter Button 
-    const splitSChBtnElement = altEl(Button, canSplitSubChapter, {
-        ...btnProps,
-        text: 'New Sub-Chapter',
-        icon: 'subdirectory_arrow_right',
-        // onClick: splitSubChapter
-    });
+    const splitSChBtnElement = (itemIdx) => {
+        return altEl(Button, canSplitSubChapter, {
+            ...btnProps,
+            text: 'New Sub-Chapter',
+            icon: 'subdirectory_arrow_right',
+            // onClick: splitSubChapter
+    })};
 
     // Subdivide Button 
-    const subdivideBtnElement = altEl(Button, canSubdivide, {
-        ...btnProps,
-        text: 'subdivide',
-        icon: 'subdirectory_arrow_right',
-        // onClick: subdivideChapter
-    });
+    const subdivideBtnElement = (itemIdx) => {
+        return altEl(Button, canSubdivide, {
+            ...btnProps,
+            text: 'subdivide',
+            icon: 'subdirectory_arrow_right',
+            // onClick: subdivideChapter
+    })};
 
     // Save Chapter Title Handler 
     const saveChapterTitle = value =>
@@ -86,28 +91,31 @@ function INoteChapter ({
                 </div>
             </div>
 
-            <div className="item-actions">
-              {splitBtnElement}
-              {splitSChBtnElement}
-              {subdivideBtnElement}
-              {addImgElement}
-              {addTextElement}
-            </div>
-
-            {chapter.contents.map((content, idx) => (
-                typeof content === "object" ? // image
-                    <div className='img-con'>   
-                        <ChapterImage 
-                          image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
-                        />
-                    </div>
-                : // text 
-                    <div className='item-text'>   
-                        <ChapterText  
-                          text={content}
-                        />
+            {chapter.contents.map((content, itemIdx) => ( // TODO pass on itemidx to itemactions
+                <div key={itemIdx}>
+                    <div className="item-actions">
+                      {splitBtnElement(itemIdx)}
+                      {splitSChBtnElement(itemIdx)}
+                      {subdivideBtnElement(itemIdx)}
+                      {addImgElement(itemIdx)}
+                      {addTextElement(itemIdx)}
                     </div>
-            ))} 
+
+                    {typeof content === "object" ? ( // image
+                        <div className='img-con'>   
+                            <ChapterImage 
+                              image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
+                            />
+                        </div>
+                        ) : ( // text 
+                        <div className='item-text'>   
+                            <ChapterText  
+                              text={content}
+                            />
+                        </div>  
+                    )}
+                </div>
+            ))}
         </div>
     )
 }

From 1cd2e187ff9bcb3e5e897c6b5a1aae239827ac1f Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Wed, 26 Jul 2023 14:11:55 -0500
Subject: [PATCH 11/39] remove change embedded link, can delete image, can
 change image, can add img desc

---
 .../components/ChapterImage/ImageWrapper.js   |  4 +--
 .../EditINote/INoteEditor/INoteChapter.js     | 26 +++++++++++++++++--
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/screens/EPub/components/ChapterImage/ImageWrapper.js b/src/screens/EPub/components/ChapterImage/ImageWrapper.js
index ade5e0682..fa521be1b 100644
--- a/src/screens/EPub/components/ChapterImage/ImageWrapper.js
+++ b/src/screens/EPub/components/ChapterImage/ImageWrapper.js
@@ -68,7 +68,7 @@ function ImageWrapper({
           >
             Choose Image
           </Button>
-          <Button 
+          {/* <Button 
             uppercase 
             color="white" 
             icon="image"
@@ -76,7 +76,7 @@ function ImageWrapper({
             onClick={() => setShowLink(true)}
           >
             Change Embedded Link
-          </Button>
+          </Button> */}
           {
             showLink && 
             <div>
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 3b2de3858..0f34a9614 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -73,6 +73,24 @@ function INoteChapter ({
       }
     })
 
+    // Chapter Image Functions
+    const onImageChange = (index) => (val) => {
+        console.log(val)
+        dispatch({
+          type: 'epub/updateEpubData', payload: {
+            action: 'setChapterContent', payload: { contentIdx: index, value: val, type: 'image' }
+          }
+        })
+    };
+
+    const onRemove = (index) => () => {
+        dispatch({
+          type: 'epub/updateEpubData', payload: {
+            action: 'removeChapterContent', payload: { contentIdx: index, type: 'image' }
+          }
+        })
+      };
+
     return (
         <div 
           className='ct-inote-chapter' 
@@ -91,7 +109,7 @@ function INoteChapter ({
                 </div>
             </div>
 
-            {chapter.contents.map((content, itemIdx) => ( // TODO pass on itemidx to itemactions
+            {chapter.contents.map((content, itemIdx) => (
                 <div key={itemIdx}>
                     <div className="item-actions">
                       {splitBtnElement(itemIdx)}
@@ -104,9 +122,13 @@ function INoteChapter ({
                     {typeof content === "object" ? ( // image
                         <div className='img-con'>   
                             <ChapterImage 
+                            //   id={`ch-content-${id}-${itemIdx}`}
                               image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
+                              enableChapterScreenshots
+                              onChooseImage = {onImageChange(itemIdx)}
+                              onRemoveImage = {onRemove(itemIdx)}
                             />
-                        </div>
+                        </div> 
                         ) : ( // text 
                         <div className='item-text'>   
                             <ChapterText  

From cc5e30e4794a2c797b707b12c689a0e75e95d7b8 Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Thu, 27 Jul 2023 10:16:35 -0500
Subject: [PATCH 12/39] add image id

---
 src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 0f34a9614..61cf5a805 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -44,7 +44,7 @@ function INoteChapter ({
             ...btnProps,
             text: 'Add Text',
             icon: 'add',
-            // onClick: handleOpenMDEditor
+            // onClick: handleOpenMDEditor(itemIdx)
     })};
 
     // New Subchapter Button 
@@ -122,7 +122,7 @@ function INoteChapter ({
                     {typeof content === "object" ? ( // image
                         <div className='img-con'>   
                             <ChapterImage 
-                            //   id={`ch-content-${id}-${itemIdx}`}
+                              id={`ch-content-${chapter.id}-${itemIdx}`}
                               image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
                               enableChapterScreenshots
                               onChooseImage = {onImageChange(itemIdx)}

From 7fdf263ffac5ae8681ea1e7f3cce585cceb127dc Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Thu, 27 Jul 2023 10:21:29 -0500
Subject: [PATCH 13/39] fix lint errors

---
 src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 61cf5a805..42747aa8b 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -75,7 +75,6 @@ function INoteChapter ({
 
     // Chapter Image Functions
     const onImageChange = (index) => (val) => {
-        console.log(val)
         dispatch({
           type: 'epub/updateEpubData', payload: {
             action: 'setChapterContent', payload: { contentIdx: index, value: val, type: 'image' }
@@ -125,8 +124,8 @@ function INoteChapter ({
                               id={`ch-content-${chapter.id}-${itemIdx}`}
                               image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
                               enableChapterScreenshots
-                              onChooseImage = {onImageChange(itemIdx)}
-                              onRemoveImage = {onRemove(itemIdx)}
+                              onChooseImage={onImageChange(itemIdx)}
+                              onRemoveImage={onRemove(itemIdx)}
                             />
                         </div> 
                         ) : ( // text 

From 744b7a0ff6866459afe9aaebcf86da8c6b215d45 Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Thu, 27 Jul 2023 10:47:06 -0500
Subject: [PATCH 14/39] make text boxes editable and deleteable

---
 .../EditINote/INoteEditor/INoteChapter.js     | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 42747aa8b..b31e52776 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -12,7 +12,7 @@ function INoteChapter ({
     canSubdivide = true,
     dispatch 
 }) {
-    // Buttons and onClick Functions 
+    // BUTTONS AND ONCLICK FUNCTIONS
     const btnProps = {
         round: true,
         uppercase: true,
@@ -65,12 +65,13 @@ function INoteChapter ({
             // onClick: subdivideChapter
     })};
 
+    // DISPATCH FUNCTIONS 
     // Save Chapter Title Handler 
     const saveChapterTitle = value =>
-    dispatch({
-      type: 'epub/updateEpubData', payload: {
-        action: 'saveChapterTitle', payload: { chapterIdx: chIdx, value }
-      }
+        dispatch({
+          type: 'epub/updateEpubData', payload: {
+            action: 'saveChapterTitle', payload: { chapterIdx: chIdx, value }
+        }
     })
 
     // Chapter Image Functions
@@ -89,6 +90,15 @@ function INoteChapter ({
           }
         })
       };
+    
+    // Change Text Functions
+    const onTextChange = (index) => (val) => {
+        dispatch({
+          type: 'epub/updateEpubData', payload: {
+            action: val ? 'setChapterContent' : 'removeChapterContent', payload: { contentIdx: index, value: val }
+          }
+        })
+      };
 
     return (
         <div 
@@ -131,7 +141,9 @@ function INoteChapter ({
                         ) : ( // text 
                         <div className='item-text'>   
                             <ChapterText  
+                              id={`ch-content-${chapter.id}-${itemIdx}`}
                               text={content}
+                              onSaveText={onTextChange(itemIdx)}
                             />
                         </div>  
                     )}

From 8d1a318471ead906682c1e752f4b0dde5a811950 Mon Sep 17 00:00:00 2001
From: alan3tao <alan3tao@gmail.com>
Date: Thu, 27 Jul 2023 11:17:04 -0700
Subject: [PATCH 15/39] trying to add text to right position in chapter

---
 .../EditINote/INoteEditor/INoteChapter.js     | 174 +++++++++++-------
 1 file changed, 108 insertions(+), 66 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index f4de967bc..bc1635bf2 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -3,7 +3,11 @@ import React, {useState} from 'react'
 import { Button } from 'pico-ui';
 import { ChapterImage, ChapterText, ChapterTitle, MDEditorModal } from '../../../components';
 import {epub as epubTools} from '../../../controllers'
+import { indexOf } from 'lodash';
 import { EPubImageData } from 'entities/EPubs';
+import ChapterNewContent from '../../EditEPubChapter/ChapterEditor/ChapterNewContent';
+import ChapterContent from '../../EditEPubChapter/ChapterEditor/ChapterContent';
+
 
 function INoteChapter ({
     chapter, 
@@ -11,21 +15,19 @@ function INoteChapter ({
     canSplit = true,
     canSplitSubChapter = true,
     canSubdivide = true,
-    canAddImage = true,
-    canAddText = true,
     dispatch 
 }) {
-    
+
     const CParams = { chapterIdx: chIdx};
 
     const [insertType, setInsertType] = useState(null);
     const openMDEditor = insertType === 'md';
 
-    const onInsert = (val) => {
-        console.log(CParams.chapterIdx)
+    const onInsert = (index) => (val) => {
+        console.log(val, index);
     dispatch({
       type: 'epub/updateEpubData', payload: {
-        action: 'insertChapterContent', payload: { contentIdx: CParams.chapterIdx, value: val }
+        action: 'insertChapterContent', payload: { contentIdx: index, value: val }
       }
     })
   };
@@ -34,10 +36,10 @@ function INoteChapter ({
 
     const handleClose = () => setInsertType(null);
 
-    const handleSave = (val) => {
-        console.log(val, CParams.chapterIdx)
+    const handleSave = (index) => (val) => {
+        console.log(val, index)
         if (typeof onInsert === 'function' && val) {
-            onInsert(val);
+            onInsert(index, val);
         }
         handleClose();
     };
@@ -59,6 +61,11 @@ function INoteChapter ({
 
 
 
+
+
+
+
+
     // Buttons and onClick Functions 
     const btnProps = {
         round: true,
@@ -68,44 +75,49 @@ function INoteChapter ({
     };
 
     // Split Button 
-    const splitBtnElement = altEl(Button, canSplit, {
-        ...btnProps,
-        text: 'Split Chapter',
-        icon: 'unfold_more',
-        // onClick: handleSplitChapter
-    });
+    const splitBtnElement = (itemIdx) => {
+        return altEl(Button, canSplit, {
+            ...btnProps,
+            text: 'Split Chapter',
+            icon: 'unfold_more',
+            // onClick: handleSplitChapter(i1)
+    })};
 
     // Add Image Button
-    const addImgElement = altEl(Button, true, {
-        ...btnProps,
-        text: 'Add Image',
-        icon: 'image',
-        onClick: handleOpenImgPicker
-    });
+    const addImgElement = (itemIdx) => {
+        return altEl(Button, true, {
+            ...btnProps,
+            text: 'Add Image',
+            icon: 'image',
+            // onClick: handleOpenImgPicker
+    })};
 
     // Add Text Button 
-    const addTextElement = altEl(Button, true, {
-        ...btnProps,
-        text: 'Add Text',
-        icon: 'add',
-        onClick: handleOpenMDEditor
-    });
+    const addTextElement = (itemIdx) => {
+        return altEl(Button, true, {
+            ...btnProps,
+            text: 'Add Text',
+            icon: 'add',
+            onClick: handleOpenMDEditor
+    })};
 
     // New Subchapter Button 
-    const splitSChBtnElement = altEl(Button, canSplitSubChapter, {
-        ...btnProps,
-        text: 'New Sub-Chapter',
-        icon: 'subdirectory_arrow_right',
-        // onClick: splitSubChapter
-    });
+    const splitSChBtnElement = (itemIdx) => {
+        return altEl(Button, canSplitSubChapter, {
+            ...btnProps,
+            text: 'New Sub-Chapter',
+            icon: 'subdirectory_arrow_right',
+            // onClick: splitSubChapter
+    })};
 
     // Subdivide Button 
-    const subdivideBtnElement = altEl(Button, canSubdivide, {
-        ...btnProps,
-        text: 'subdivide',
-        icon: 'subdirectory_arrow_right',
-        // onClick: subdivideChapter
-    });
+    const subdivideBtnElement = (itemIdx) => {
+        return altEl(Button, canSubdivide, {
+            ...btnProps,
+            text: 'subdivide',
+            icon: 'subdirectory_arrow_right',
+            // onClick: subdivideChapter
+    })};
 
     // Save Chapter Title Handler 
     const saveChapterTitle = value =>
@@ -115,6 +127,23 @@ function INoteChapter ({
       }
     })
 
+    // Chapter Image Functions
+    const onImageChange = (index) => (val) => {
+        dispatch({
+          type: 'epub/updateEpubData', payload: {
+            action: 'setChapterContent', payload: { contentIdx: index, value: val, type: 'image' }
+          }
+        })
+    };
+
+    const onRemove = (index) => () => {
+        dispatch({
+          type: 'epub/updateEpubData', payload: {
+            action: 'removeChapterContent', payload: { contentIdx: index, type: 'image' }
+          }
+        })
+      };
+
     return (
         <div 
           className='ct-inote-chapter' 
@@ -133,36 +162,49 @@ function INoteChapter ({
                 </div>
             </div>
 
-            <div className="item-actions">
-              {splitBtnElement}
-              {splitSChBtnElement}
-              {subdivideBtnElement}
-              {addImgElement}
-              {addTextElement}
-            </div>
 
-            <MDEditorModal
-              show={openMDEditor}
-              onClose={handleClose}
-              onSave={handleSave}
-              title="Insert New Text"
-            />
-
-            {chapter.contents.map((content, idx) => (
-                typeof content === "object" ? // image
-                    <div className='img-con'>   
-                        <ChapterImage 
-                          image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
-                        />
-                    </div>
-                : // text 
-                    <div className='item-text'>   
-                        <ChapterText  
-                          text={content}
-                        />
+         
+
+            {chapter.contents.map((content, itemIdx) => (
+                <div key={itemIdx}>
+                    <div className="item-actions">
+                        
+                      {splitBtnElement(itemIdx)}
+                      {splitSChBtnElement(itemIdx)}
+                      {subdivideBtnElement(itemIdx)}
+                      {addImgElement(itemIdx)}
+                      {addTextElement(itemIdx)}
+                      <MDEditorModal
+                        show={openMDEditor}
+                        onClose={handleClose}
+                        onSave={handleSave(itemIdx)}
+                        title="Insert New Text"
+                    />
+                    
                     </div>
-            ))} 
+
+                    {typeof content === "object" ? ( // image
+                        <div className='img-con'>   
+                            <ChapterImage 
+                              id={`ch-content-${chapter.id}-${itemIdx}`}
+                              image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
+                              enableChapterScreenshots
+                              onChooseImage={onImageChange(itemIdx)}
+                              onRemoveImage={onRemove(itemIdx)}
+                            />
+                        </div> 
+                        ) : ( // text 
+                        <div className='item-text'>   
+                            <ChapterText  
+                              text={content}
+                            />
+                        </div>  
+                    )}
+                </div>
+            ))}
+           
         </div>
+        
     )
 }
 

From 7004fd9ab6a0bbfe33a333b0a5768a481bf36dd5 Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Tue, 1 Aug 2023 11:40:56 -0500
Subject: [PATCH 16/39] change oninsert curried function call

---
 .../EditINote/INoteEditor/INoteChapter.js     | 23 ++++++-------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index bc1635bf2..30d78cece 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -25,12 +25,12 @@ function INoteChapter ({
 
     const onInsert = (index) => (val) => {
         console.log(val, index);
-    dispatch({
-      type: 'epub/updateEpubData', payload: {
-        action: 'insertChapterContent', payload: { contentIdx: index, value: val }
-      }
-    })
-  };
+        dispatch({
+            type: 'epub/updateEpubData', payload: {
+                action: 'insertChapterContent', payload: { contentIdx: index, value: val }
+            }
+        })
+    };
 
     const handleOpenMDEditor = () => setInsertType('md');
 
@@ -39,7 +39,7 @@ function INoteChapter ({
     const handleSave = (index) => (val) => {
         console.log(val, index)
         if (typeof onInsert === 'function' && val) {
-            onInsert(index, val);
+            onInsert(index)(val);
         }
         handleClose();
     };
@@ -57,15 +57,6 @@ function INoteChapter ({
         dispatch({ type: 'epub/setImgPickerData', payload: imgData });
     }
 
-
-
-
-
-
-
-
-
-
     // Buttons and onClick Functions 
     const btnProps = {
         round: true,

From 42f1070283de35698603f85f97b386a4ef1cd4da Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Tue, 1 Aug 2023 14:02:42 -0500
Subject: [PATCH 17/39] text boxes now addable

---
 .../EditINote/INoteEditor/INoteChapter.js     | 65 ++++++++++---------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 30d78cece..d2399551a 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -18,11 +18,30 @@ function INoteChapter ({
     dispatch 
 }) {
 
-    const CParams = { chapterIdx: chIdx};
 
     const [insertType, setInsertType] = useState(null);
     const openMDEditor = insertType === 'md';
 
+    const [openModalIndex, setOpenModalIndex] = useState(null);
+
+    const handleOpenMDEditor = (itemIdx) => {
+        setInsertType('md');
+        setOpenModalIndex(itemIdx)
+    };
+      
+    const handleClose = () => {
+        setInsertType(null);
+        setOpenModalIndex(openModalIndex);
+    }
+
+    const handleSave = (val) => {
+        console.log(val, openModalIndex)
+        if (typeof onInsert === 'function' && val) {
+            onInsert(openModalIndex)(val);
+        }
+        handleClose();
+    };
+    
     const onInsert = (index) => (val) => {
         console.log(val, index);
         dispatch({
@@ -32,18 +51,6 @@ function INoteChapter ({
         })
     };
 
-    const handleOpenMDEditor = () => setInsertType('md');
-
-    const handleClose = () => setInsertType(null);
-
-    const handleSave = (index) => (val) => {
-        console.log(val, index)
-        if (typeof onInsert === 'function' && val) {
-            onInsert(index)(val);
-        }
-        handleClose();
-    };
-
     const handleSaveImage = (val) => {
         handleSave(new EPubImageData(val).toObject());
     };
@@ -71,7 +78,7 @@ function INoteChapter ({
             ...btnProps,
             text: 'Split Chapter',
             icon: 'unfold_more',
-            // onClick: handleSplitChapter(i1)
+            // onClick: handleSplitChapter(itemIdx)
     })};
 
     // Add Image Button
@@ -84,12 +91,14 @@ function INoteChapter ({
     })};
 
     // Add Text Button 
-    const addTextElement = (itemIdx) => {
+    function addTextElement(itemIdx) {
+        // setOpenModalIndex(itemIdx);
         return altEl(Button, true, {
             ...btnProps,
             text: 'Add Text',
             icon: 'add',
-            onClick: handleOpenMDEditor
+            onClick: () => handleOpenMDEditor(itemIdx)
+            // onClick: handleOpenMDEditor
     })};
 
     // New Subchapter Button 
@@ -141,7 +150,7 @@ function INoteChapter ({
           id={epubTools.id.chID(chapter.id)}
         >
             <div className='chapter-title'>
-                <CTText muted className="pt-2 pl-2">Chapter {chIdx + 1}: {chapter.title}</CTText>
+                <CTText muted className="pt-2 pl-2">Chapter {  + 1}: {chapter.title}</CTText>
                 <div className="ch-item-title-con ct-d-r-center-v">
                     <ChapterTitle
                       id={epubTools.id.chTitleID(chapter.id)}
@@ -153,25 +162,14 @@ function INoteChapter ({
                 </div>
             </div>
 
-
-         
-
             {chapter.contents.map((content, itemIdx) => (
-                <div key={itemIdx}>
+                <div className={itemIdx}>
                     <div className="item-actions">
-                        
                       {splitBtnElement(itemIdx)}
                       {splitSChBtnElement(itemIdx)}
                       {subdivideBtnElement(itemIdx)}
                       {addImgElement(itemIdx)}
                       {addTextElement(itemIdx)}
-                      <MDEditorModal
-                        show={openMDEditor}
-                        onClose={handleClose}
-                        onSave={handleSave(itemIdx)}
-                        title="Insert New Text"
-                    />
-                    
                     </div>
 
                     {typeof content === "object" ? ( // image
@@ -190,7 +188,16 @@ function INoteChapter ({
                               text={content}
                             />
                         </div>  
+                        
                     )}
+                    {insertType !== null && (
+                        <MDEditorModal
+                            show={openMDEditor}
+                            onClose={handleClose}
+                            onSave={handleSave}
+                            title="Insert New Text"
+                        />
+                    )}       
                 </div>
             ))}
            

From bb44a17806cbfd894509fda558afa90751be4b2d Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Thu, 3 Aug 2023 14:18:34 -0500
Subject: [PATCH 18/39] make state.currChIdx update according to what chapter
 is being looked at

---
 src/screens/EPub/models/navigator_effects.js  |   3 +
 .../EditINote/INoteEditor/INoteChapter.js     | 114 +++++++++---------
 .../EPub/views/EditINote/INoteEditor/index.js |   8 ++
 src/screens/EPub/views/EditINote/index.js     |   8 +-
 4 files changed, 73 insertions(+), 60 deletions(-)

diff --git a/src/screens/EPub/models/navigator_effects.js b/src/screens/EPub/models/navigator_effects.js
index d93611045..07485401b 100644
--- a/src/screens/EPub/models/navigator_effects.js
+++ b/src/screens/EPub/models/navigator_effects.js
@@ -119,6 +119,9 @@ export default {
                 case Constants.EpbReadOnly:
                     yield call(updateNavIdForEpbEditStructure, e, epub, put);
                     break;
+                case Constants.EditINote:
+                    yield call(updateNavIdForEpbEditStructure, e, epub, put);
+                    break;
                 default:
                     break;
             }
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index d2399551a..60bca6bc2 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -1,6 +1,7 @@
 import { CTFragment, CTText, altEl} from 'layout'
 import React, {useState} from 'react' 
 import { Button } from 'pico-ui';
+import { connect } from 'dva'
 import { ChapterImage, ChapterText, ChapterTitle, MDEditorModal } from '../../../components';
 import {epub as epubTools} from '../../../controllers'
 import { indexOf } from 'lodash';
@@ -17,8 +18,6 @@ function INoteChapter ({
     canSubdivide = true,
     dispatch 
 }) {
-
-
     const [insertType, setInsertType] = useState(null);
     const openMDEditor = insertType === 'md';
 
@@ -145,65 +144,68 @@ function INoteChapter ({
       };
 
     return (
-        <div 
-          className='ct-inote-chapter' 
-          id={epubTools.id.chID(chapter.id)}
-        >
-            <div className='chapter-title'>
-                <CTText muted className="pt-2 pl-2">Chapter {  + 1}: {chapter.title}</CTText>
-                <div className="ch-item-title-con ct-d-r-center-v">
-                    <ChapterTitle
-                      id={epubTools.id.chTitleID(chapter.id)}
-                      value={chapter.title}
-                      onSave={saveChapterTitle}
-                      headingType="h2"
-                      className="ch-item-title"
-                    />
-                </div>
-            </div>
-
-            {chapter.contents.map((content, itemIdx) => (
-                <div className={itemIdx}>
-                    <div className="item-actions">
-                      {splitBtnElement(itemIdx)}
-                      {splitSChBtnElement(itemIdx)}
-                      {subdivideBtnElement(itemIdx)}
-                      {addImgElement(itemIdx)}
-                      {addTextElement(itemIdx)}
+        <div>
+            <div 
+            id={epubTools.id.chID(chapter.id)}
+            className='ct-inote-chapter' 
+            >
+                <div className='chapter-title'>
+                    <CTText muted className="pt-2 pl-2">Chapter {chIdx + 1}: {chapter.title}</CTText>
+                    <div className="ch-item-title-con ct-d-r-center-v">
+                        <ChapterTitle
+                        id={epubTools.id.chTitleID(chapter.id)}
+                        value={chapter.title}
+                        onSave={saveChapterTitle}
+                        headingType="h2"
+                        className="ch-item-title"
+                        />
                     </div>
+                </div>
 
-                    {typeof content === "object" ? ( // image
-                        <div className='img-con'>   
-                            <ChapterImage 
-                              id={`ch-content-${chapter.id}-${itemIdx}`}
-                              image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
-                              enableChapterScreenshots
-                              onChooseImage={onImageChange(itemIdx)}
-                              onRemoveImage={onRemove(itemIdx)}
-                            />
-                        </div> 
-                        ) : ( // text 
-                        <div className='item-text'>   
-                            <ChapterText  
-                              text={content}
-                            />
-                        </div>  
+                {chapter.contents.map((content, itemIdx) => (
+                    <div className={itemIdx}>
+                        <div className="item-actions">
+                        {splitBtnElement(itemIdx)}
+                        {splitSChBtnElement(itemIdx)}
+                        {subdivideBtnElement(itemIdx)}
+                        {addImgElement(itemIdx)}
+                        {addTextElement(itemIdx)}
+                        </div>
+
+                        {typeof content === "object" ? ( // image
+                            <div className='img-con'>   
+                                <ChapterImage 
+                                id={`ch-content-${chapter.id}-${itemIdx}`}
+                                image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
+                                enableChapterScreenshots
+                                onChooseImage={onImageChange(itemIdx)}
+                                onRemoveImage={onRemove(itemIdx)}
+                                />
+                            </div> 
+                            ) : ( // text 
+                            <div className='item-text'>   
+                                <ChapterText  
+                                text={content}
+                                />
+                            </div>  
+                            
+                        )}
                         
-                    )}
-                    {insertType !== null && (
-                        <MDEditorModal
-                            show={openMDEditor}
-                            onClose={handleClose}
-                            onSave={handleSave}
-                            title="Insert New Text"
-                        />
-                    )}       
-                </div>
-            ))}
-           
+                    </div>
+                ))}
+            
+            </div>
+            {insertType !== null && (
+                <MDEditorModal
+                  show={openMDEditor}
+                  onClose={handleClose}
+                  onSave={handleSave}
+                  title="Insert New Text"
+                />
+            )}     
         </div>
         
     )
 }
 
-export default INoteChapter
\ No newline at end of file
+export default connect() (INoteChapter)
\ No newline at end of file
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/index.js b/src/screens/EPub/views/EditINote/INoteEditor/index.js
index 4ace18f98..1b3095af2 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/index.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/index.js
@@ -7,6 +7,14 @@ import './index.scss';
 import INoteChapter from './INoteChapter';
 
 function INoteEditor({ chapters = [], foldedIds = [], currChIndex, setINoteItem, dispatch }) {
+    useEffect(() => {
+        if (currChIndex > 0) {
+          setTimeout(() => {
+            dispatch({ type: 'epub/navigateChapter', payload: chapters[currChIndex].id });
+          }, 500);
+        }
+      }, []);
+
     return (
         <ul className='ct-inote-editor'> 
             {chapters.map((chapter, chIdx) => (
diff --git a/src/screens/EPub/views/EditINote/index.js b/src/screens/EPub/views/EditINote/index.js
index d116d6dcd..1ac185dad 100644
--- a/src/screens/EPub/views/EditINote/index.js
+++ b/src/screens/EPub/views/EditINote/index.js
@@ -3,19 +3,19 @@ import _ from 'lodash'
 import { CTFragment, CTHeading, CTText } from 'layout';
 import { connect } from 'dva'
 import { EPubNavigationProvider } from '../../components';
-import { epub as epubTools} from '../../controllers';
+import { epub as epubController} from '../../controllers';
 import INoteEditor from './INoteEditor';
 
 // import './index.scss';
 
 function EditINote ({epub: epubData, dispatch}) {
-    const dispatchScroll = _.debounce((e) => dispatch({ type: 'epub/onScroll', payload: e }), 300);
-    const onScroll = (e) => dispatchScroll(e.target);
+    const dispatchScroll = _.debounce((e) => dispatch({ type: 'epub/onScroll', payload: e }), 300)
+    const onScroll = (e) => dispatchScroll(e.target)
     
     const [iNoteItem, setINoteItem] = useState(null);
     return (
         <EPubNavigationProvider>
-            <CTFragment dFlex h100 scrollY id={epubTools.id.EPubChapterListID} onScroll={onScroll}>
+            <CTFragment dFlex h100 scrollY id={epubController.id.EPubChapterListID} onScroll={onScroll}>
                 <CTFragment width="75%">
                     <CTHeading>{epubData.title}</CTHeading>
                     <INoteEditor> setINoteItem={setINoteItem} dispatch={dispatch} </INoteEditor>

From bd2892611a0e6b643a1c88e96ce544f32ae7e40b Mon Sep 17 00:00:00 2001
From: alan3tao <alan3tao@gmail.com>
Date: Mon, 7 Aug 2023 08:07:42 -0700
Subject: [PATCH 19/39] updating chapterindex

---
 .vscode/launch.json                           | 15 ++++
 .../EditINote/INoteEditor/INoteChapter.js     | 78 +++++++++----------
 2 files changed, 53 insertions(+), 40 deletions(-)
 create mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 000000000..f6b35a0b6
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index bc1635bf2..d2399551a 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -18,31 +18,38 @@ function INoteChapter ({
     dispatch 
 }) {
 
-    const CParams = { chapterIdx: chIdx};
 
     const [insertType, setInsertType] = useState(null);
     const openMDEditor = insertType === 'md';
 
-    const onInsert = (index) => (val) => {
-        console.log(val, index);
-    dispatch({
-      type: 'epub/updateEpubData', payload: {
-        action: 'insertChapterContent', payload: { contentIdx: index, value: val }
-      }
-    })
-  };
-
-    const handleOpenMDEditor = () => setInsertType('md');
+    const [openModalIndex, setOpenModalIndex] = useState(null);
 
-    const handleClose = () => setInsertType(null);
+    const handleOpenMDEditor = (itemIdx) => {
+        setInsertType('md');
+        setOpenModalIndex(itemIdx)
+    };
+      
+    const handleClose = () => {
+        setInsertType(null);
+        setOpenModalIndex(openModalIndex);
+    }
 
-    const handleSave = (index) => (val) => {
-        console.log(val, index)
+    const handleSave = (val) => {
+        console.log(val, openModalIndex)
         if (typeof onInsert === 'function' && val) {
-            onInsert(index, val);
+            onInsert(openModalIndex)(val);
         }
         handleClose();
     };
+    
+    const onInsert = (index) => (val) => {
+        console.log(val, index);
+        dispatch({
+            type: 'epub/updateEpubData', payload: {
+                action: 'insertChapterContent', payload: { contentIdx: index, value: val }
+            }
+        })
+    };
 
     const handleSaveImage = (val) => {
         handleSave(new EPubImageData(val).toObject());
@@ -57,15 +64,6 @@ function INoteChapter ({
         dispatch({ type: 'epub/setImgPickerData', payload: imgData });
     }
 
-
-
-
-
-
-
-
-
-
     // Buttons and onClick Functions 
     const btnProps = {
         round: true,
@@ -80,7 +78,7 @@ function INoteChapter ({
             ...btnProps,
             text: 'Split Chapter',
             icon: 'unfold_more',
-            // onClick: handleSplitChapter(i1)
+            // onClick: handleSplitChapter(itemIdx)
     })};
 
     // Add Image Button
@@ -93,12 +91,14 @@ function INoteChapter ({
     })};
 
     // Add Text Button 
-    const addTextElement = (itemIdx) => {
+    function addTextElement(itemIdx) {
+        // setOpenModalIndex(itemIdx);
         return altEl(Button, true, {
             ...btnProps,
             text: 'Add Text',
             icon: 'add',
-            onClick: handleOpenMDEditor
+            onClick: () => handleOpenMDEditor(itemIdx)
+            // onClick: handleOpenMDEditor
     })};
 
     // New Subchapter Button 
@@ -150,7 +150,7 @@ function INoteChapter ({
           id={epubTools.id.chID(chapter.id)}
         >
             <div className='chapter-title'>
-                <CTText muted className="pt-2 pl-2">Chapter {chIdx + 1}: {chapter.title}</CTText>
+                <CTText muted className="pt-2 pl-2">Chapter {  + 1}: {chapter.title}</CTText>
                 <div className="ch-item-title-con ct-d-r-center-v">
                     <ChapterTitle
                       id={epubTools.id.chTitleID(chapter.id)}
@@ -162,25 +162,14 @@ function INoteChapter ({
                 </div>
             </div>
 
-
-         
-
             {chapter.contents.map((content, itemIdx) => (
-                <div key={itemIdx}>
+                <div className={itemIdx}>
                     <div className="item-actions">
-                        
                       {splitBtnElement(itemIdx)}
                       {splitSChBtnElement(itemIdx)}
                       {subdivideBtnElement(itemIdx)}
                       {addImgElement(itemIdx)}
                       {addTextElement(itemIdx)}
-                      <MDEditorModal
-                        show={openMDEditor}
-                        onClose={handleClose}
-                        onSave={handleSave(itemIdx)}
-                        title="Insert New Text"
-                    />
-                    
                     </div>
 
                     {typeof content === "object" ? ( // image
@@ -199,7 +188,16 @@ function INoteChapter ({
                               text={content}
                             />
                         </div>  
+                        
                     )}
+                    {insertType !== null && (
+                        <MDEditorModal
+                            show={openMDEditor}
+                            onClose={handleClose}
+                            onSave={handleSave}
+                            title="Insert New Text"
+                        />
+                    )}       
                 </div>
             ))}
            

From 206645029e462981dd234cc88ce66b750a5ac12c Mon Sep 17 00:00:00 2001
From: alan3tao <alan3tao@gmail.com>
Date: Mon, 14 Aug 2023 10:51:38 -0700
Subject: [PATCH 20/39] Adding text in right place with chapteridx

---
 .vscode/launch.json                           | 15 -------
 src/screens/EPub/models/data_reducer.js       | 40 ++++++++++++++++++-
 .../EditINote/INoteEditor/INoteChapter.js     |  7 ++--
 3 files changed, 43 insertions(+), 19 deletions(-)
 delete mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
deleted file mode 100644
index f6b35a0b6..000000000
--- a/.vscode/launch.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:3000",
-            "webRoot": "${workspaceFolder}"
-        }
-    ]
-}
\ No newline at end of file
diff --git a/src/screens/EPub/models/data_reducer.js b/src/screens/EPub/models/data_reducer.js
index e37ba1c61..fe762d96a 100644
--- a/src/screens/EPub/models/data_reducer.js
+++ b/src/screens/EPub/models/data_reducer.js
@@ -358,7 +358,7 @@ export default {
         const defaultChapters = EPubData.__buildEPubDataFromArray(state.items);
         return { ...state, epub: { ...state.epub, ...nextStateOfChapters(defaultChapters) }, currChIndex: 0 };
     },
-    insertChapterContent(state, { payload: { type = 'text', contentIdx, subChapterIdx, value } }) {
+     insertChapterContent(state, { payload: { type = 'text', contentIdx, subChapterIdx, value } }) {
         if (type === 'image') {
             value = new EPubImageData(value).toObject();
         }
@@ -373,6 +373,21 @@ export default {
         return { ...state, epub: { ...state.epub, ...nextStateOfChapters([...chapters]) } };
         // this.updateAll('Insert chapter content');
     },
+    insertChapterContentAtChapterIdx(state, { payload: { type = 'text', contentIdx, chapterIdx, subChapterIdx, value } }) {
+        if (type === 'image') {
+            value = new EPubImageData(value).toObject();
+        }
+        const chapters = state.epub.chapters;
+        if (subChapterIdx === undefined) {
+            console.log(`Inserting chapter ${state.currChIndex} content: `, value);
+            insertContentChapter(chapters[chapterIdx], contentIdx, value);
+        } else {
+            console.log(`Inserting chapter ${state.currChIndex} subchapter ${subChapterIdx} content: `, value);
+            insertContentChapter(chapters?.[chapterIdx]?.subChapters?.[subChapterIdx], contentIdx, value);
+        }
+        return { ...state, epub: { ...state.epub, ...nextStateOfChapters([...chapters]) } };
+        // this.updateAll('Insert chapter content');
+    },
     setChapterContent(state, { payload: { type = 'text', contentIdx, subChapterIdx, value } }) {
         if (type === 'image') {
             value = new EPubImageData(value).toObject();
@@ -395,6 +410,29 @@ export default {
         // this.__feed();
         return { ...state, epub: { ...state.epub, ...nextStateOfChapters([...chapters]) } };
     },
+
+    setChapterContentAtChapterIdx(state, { payload: { type = 'text', contentIdx, chapterIdx, subChapterIdx, value } }) {
+        if (type === 'image') {
+            value = new EPubImageData(value).toObject();
+        }
+        const chapters = state.epub.chapters;
+        if (subChapterIdx === undefined) {
+            const chapter = chapters[chapterIdx];
+            if (type === 'condition') {
+                chapter.condition = value;
+                console.log(`Setting chapter ${state.currChIndex} condition: `, value);
+            } else{
+                chapter.contents[contentIdx] = value;
+                console.log(`Setting chapter ${state.currChIndex} content: `, value);
+            }
+        } else if (chapters?.[chapterIdx]?.subChapters?.[subChapterIdx]) {
+            chapters[chapterIdx].subChapters[subChapterIdx] = value
+            console.log(`Setting chapter ${state.currChIndex} subchapter ${subChapterIdx} content: `, value);
+        }
+        // this.updateAll('Update the chapter content');
+        // this.__feed();
+        return { ...state, epub: { ...state.epub, ...nextStateOfChapters([...chapters]) } };
+    },
     removeChapterContent(state, { payload: { type = 'text', contentIdx, subChapterIdx } }) {
         const chapters = state.epub.chapters;
         if (subChapterIdx === undefined) {
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index c8e0a0ec5..86b26f717 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -48,7 +48,7 @@ function INoteChapter ({
         console.log(val, index);
         dispatch({
             type: 'epub/updateEpubData', payload: {
-                action: 'insertChapterContent', payload: { contentIdx: index, value: val }
+                action: 'insertChapterContentAtChapterIdx', payload: { contentIdx: index, chapterIdx: chIdx, value: val }
             }
         })
     };
@@ -57,7 +57,8 @@ function INoteChapter ({
         handleSave(new EPubImageData(val).toObject());
     };
 
-    const handleOpenImgPicker = () => {
+    const handleOpenImgPicker = (itemIdx) => {
+        setOpenModalIndex(itemIdx)
         const imgData = {
         //screenshots: imgSrc,
         onSave: handleSaveImage,
@@ -89,7 +90,7 @@ function INoteChapter ({
             ...btnProps,
             text: 'Add Image',
             icon: 'image',
-            // onClick: handleOpenImgPicker
+            onClick: () => handleOpenImgPicker(itemIdx)
     })};
 
     // Add Text Button 

From 8a77cc75721bb71e7a97e641f359dcbf6de4accd Mon Sep 17 00:00:00 2001
From: alan3tao <alan3tao@gmail.com>
Date: Mon, 14 Aug 2023 11:46:29 -0700
Subject: [PATCH 21/39] Fixed loading issue

---
 .../EditINote/INoteEditor/INoteChapter.js     | 111 +++++++++---------
 1 file changed, 56 insertions(+), 55 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 86b26f717..bdd53a045 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -147,65 +147,66 @@ function INoteChapter ({
         })
       };
 
-    return (
-        <div 
-          className='ct-inote-chapter' 
-          id={epubTools.id.chID(chapter.id)}
-        >
-            <div className='chapter-title'>
-                <CTText muted className="pt-2 pl-2">Chapter {chIdx + 1}: {chapter.title}</CTText>
-                <div className="ch-item-title-con ct-d-r-center-v">
-                    <ChapterTitle
-                      id={epubTools.id.chTitleID(chapter.id)}
-                      value={chapter.title}
-                      onSave={saveChapterTitle}
-                      headingType="h2"
-                      className="ch-item-title"
-                    />
+     return (
+        <div>
+            <div 
+            id={epubTools.id.chID(chapter.id)}
+            className='ct-inote-chapter' 
+            >
+                <div className='chapter-title'>
+                    <CTText muted className="pt-2 pl-2">Chapter {chIdx + 1}: {chapter.title}</CTText>
+                    <div className="ch-item-title-con ct-d-r-center-v">
+                        <ChapterTitle
+                        id={epubTools.id.chTitleID(chapter.id)}
+                        value={chapter.title}
+                        onSave={saveChapterTitle}
+                        headingType="h2"
+                        className="ch-item-title"
+                        />
+                    </div>
                 </div>
-            </div>
-
-
-         
 
-            {chapter.contents.map((content, itemIdx) => (
-                <div key={itemIdx}>
-                    <div className="item-actions">
+                {chapter.contents.map((content, itemIdx) => (
+                    <div className={itemIdx}>
+                        <div className="item-actions">
+                        {splitBtnElement(itemIdx)}
+                        {splitSChBtnElement(itemIdx)}
+                        {subdivideBtnElement(itemIdx)}
+                        {addImgElement(itemIdx)}
+                        {addTextElement(itemIdx)}
+                        </div>
+
+                        {typeof content === "object" ? ( // image
+                            <div className='img-con'>   
+                                <ChapterImage 
+                                id={`ch-content-${chapter.id}-${itemIdx}`}
+                                image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
+                                enableChapterScreenshots
+                                onChooseImage={onImageChange(itemIdx)}
+                                onRemoveImage={onRemove(itemIdx)}
+                                />
+                            </div> 
+                            ) : ( // text 
+                            <div className='item-text'>   
+                                <ChapterText  
+                                text={content}
+                                />
+                            </div>  
+                            
+                        )}
                         
-                      {splitBtnElement(itemIdx)}
-                      {splitSChBtnElement(itemIdx)}
-                      {subdivideBtnElement(itemIdx)}
-                      {addImgElement(itemIdx)}
-                      {addTextElement(itemIdx)}
-                      <MDEditorModal
-                        show={openMDEditor}
-                        onClose={handleClose}
-                        onSave={handleSave(itemIdx)}
-                        title="Insert New Text"
-                    />
-                    
                     </div>
-
-                    {typeof content === "object" ? ( // image
-                        <div className='img-con'>   
-                            <ChapterImage 
-                              id={`ch-content-${chapter.id}-${itemIdx}`}
-                              image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
-                              enableChapterScreenshots
-                              onChooseImage={onImageChange(itemIdx)}
-                              onRemoveImage={onRemove(itemIdx)}
-                            />
-                        </div> 
-                        ) : ( // text 
-                        <div className='item-text'>   
-                            <ChapterText  
-                              text={content}
-                            />
-                        </div>  
-                    )}
-                </div>
-            ))}
-           
+                ))}
+            
+            </div>
+            {insertType !== null && (
+                <MDEditorModal
+                  show={openMDEditor}
+                  onClose={handleClose}
+                  onSave={handleSave}
+                  title="Insert New Text"
+                />
+            )}     
         </div>
         
     )

From 801988b48076c21fab114eaf7b302c0a779e37fe Mon Sep 17 00:00:00 2001
From: alan3tao <alan3tao@gmail.com>
Date: Mon, 14 Aug 2023 12:01:39 -0700
Subject: [PATCH 22/39] Fixed loading issue

---
 .../views/EditINote/INoteEditor/INoteChapter.js    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index fccec814b..c2ccb8106 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -146,13 +146,13 @@ function INoteChapter ({
           }
         })
     };
-    const onTextChange = (index) => (val) => {
-        dispatch({
-          type: 'epub/updateEpubData', payload: {
-            action: val ? 'setChapterContent' : 'removeChapterContent', payload: { contentIdx: index, value: val }
-          }
-        })
-      };
+    // const onTextChange = (index) => (val) => {
+    //     dispatch({
+    //       type: 'epub/updateEpubData', payload: {
+    //         action: val ? 'setChapterContent' : 'removeChapterContent', payload: { contentIdx: index, value: val }
+    //       }
+    //     })
+    //   };
 
     const onRemove = (index) => () => {
         dispatch({

From 61230e9d8e0ef496e717b157ba622d49f679ade4 Mon Sep 17 00:00:00 2001
From: alan3tao <alan3tao@gmail.com>
Date: Mon, 21 Aug 2023 12:44:58 -0500
Subject: [PATCH 23/39] fix linting issues

---
 .../EditINote/INoteEditor/INoteChapter.js     | 114 +++++++++---------
 .../EPub/views/EditINote/INoteEditor/index.js |  18 +--
 src/screens/EPub/views/EditINote/index.js     |  16 +--
 3 files changed, 73 insertions(+), 75 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index c2ccb8106..0253d2025 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -2,10 +2,10 @@ import { CTFragment, CTText, altEl} from 'layout'
 import React, {useState} from 'react' 
 import { Button } from 'pico-ui';
 import { connect } from 'dva'
-import { ChapterImage, ChapterText, ChapterTitle, MDEditorModal } from '../../../components';
-import {epub as epubTools} from '../../../controllers'
 import { indexOf } from 'lodash';
 import { EPubImageData } from 'entities/EPubs';
+import { ChapterImage, ChapterText, ChapterTitle, MDEditorModal } from '../../../components';
+import {epub as epubTools} from '../../../controllers'
 import ChapterNewContent from '../../EditEPubChapter/ChapterEditor/ChapterNewContent';
 import ChapterContent from '../../EditEPubChapter/ChapterEditor/ChapterContent';
 
@@ -18,8 +18,6 @@ function INoteChapter ({
     canSubdivide = true,
     dispatch 
 }) {
-
-
     const CParams = { chapterIdx: chIdx};
 
     const [insertType, setInsertType] = useState(null);
@@ -61,9 +59,9 @@ function INoteChapter ({
     const handleOpenImgPicker = (itemIdx) => {
         setOpenModalIndex(itemIdx)
         const imgData = {
-        //screenshots: imgSrc,
+        // screenshots: imgSrc,
         onSave: handleSaveImage,
-        //chapterScreenshots: epub.chapters[subChapterIndex].allImagesWithIn
+        // chapterScreenshots: epub.chapters[subChapterIndex].allImagesWithIn
         };
         dispatch({ type: 'epub/setImgPickerData', payload: imgData });
     }
@@ -163,69 +161,69 @@ function INoteChapter ({
       };
 
      return (
-        <div>
-            <div 
-            id={epubTools.id.chID(chapter.id)}
-            className='ct-inote-chapter' 
-            >
-                <div className='chapter-title'>
-                    <CTText muted className="pt-2 pl-2">Chapter {chIdx + 1}: {chapter.title}</CTText>
-                    <div className="ch-item-title-con ct-d-r-center-v">
-                        <ChapterTitle
-                        id={epubTools.id.chTitleID(chapter.id)}
-                        value={chapter.title}
-                        onSave={saveChapterTitle}
-                        headingType="h2"
-                        className="ch-item-title"
-                        />
-                    </div>
-                </div>
-
-
-                {chapter.contents.map((content, itemIdx) => (
-                    <div className={itemIdx}>
-                        <div className="item-actions">
-                        {splitBtnElement(itemIdx)}
-                        {splitSChBtnElement(itemIdx)}
-                        {subdivideBtnElement(itemIdx)}
-                        {addImgElement(itemIdx)}
-                        {addTextElement(itemIdx)}
-                        </div>
-
-                        {typeof content === "object" ? ( // image
-                            <div className='img-con'>   
-                                <ChapterImage 
-                                id={`ch-content-${chapter.id}-${itemIdx}`}
-                                image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
-                                enableChapterScreenshots
-                                onChooseImage={onImageChange(itemIdx)}
-                                onRemoveImage={onRemove(itemIdx)}
-                                />
-                            </div> 
+       <div>
+         <div 
+           id={epubTools.id.chID(chapter.id)}
+           className='ct-inote-chapter'
+         >
+           <div className='chapter-title'>
+             <CTText muted className="pt-2 pl-2">Chapter {chIdx + 1}: {chapter.title}</CTText>
+             <div className="ch-item-title-con ct-d-r-center-v">
+               <ChapterTitle
+                 id={epubTools.id.chTitleID(chapter.id)}
+                 value={chapter.title}
+                 onSave={saveChapterTitle}
+                 headingType="h2"
+                 className="ch-item-title"
+               />
+             </div>
+           </div>
+
+
+           {chapter.contents.map((content, itemIdx) => (
+             <div className={itemIdx}>
+               <div className="item-actions">
+                 {splitBtnElement(itemIdx)}
+                 {splitSChBtnElement(itemIdx)}
+                 {subdivideBtnElement(itemIdx)}
+                 {addImgElement(itemIdx)}
+                 {addTextElement(itemIdx)}
+               </div>
+
+               {typeof content === "object" ? ( // image
+                 <div className='img-con'>   
+                   <ChapterImage 
+                     id={`ch-content-${chapter.id}-${itemIdx}`}
+                     image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
+                     enableChapterScreenshots
+                     onChooseImage={onImageChange(itemIdx)}
+                     onRemoveImage={onRemove(itemIdx)}
+                   />
+                 </div> 
                             ) : ( // text 
-                            <div className='item-text'>   
+                              <div className='item-text'>   
                                 <ChapterText  
-                                text={content}
+                                  text={content}
                                 />
-                            </div>  
+                              </div>  
                             
                         )}
                         
 
-                    </div>
+             </div>
                 ))}
             
-            </div>
-            {insertType !== null && (
-                <MDEditorModal
-                  show={openMDEditor}
-                  onClose={handleClose}
-                  onSave={handleSave}
-                  title="Insert New Text"
-                />
+         </div>
+         {insertType !== null && (
+         <MDEditorModal
+           show={openMDEditor}
+           onClose={handleClose}
+           onSave={handleSave}
+           title="Insert New Text"
+         />
             )}     
 
-        </div>
+       </div>
         
     )
 }
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/index.js b/src/screens/EPub/views/EditINote/INoteEditor/index.js
index 1b3095af2..fa83497bb 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/index.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/index.js
@@ -16,16 +16,16 @@ function INoteEditor({ chapters = [], foldedIds = [], currChIndex, setINoteItem,
       }, []);
 
     return (
-        <ul className='ct-inote-editor'> 
-            {chapters.map((chapter, chIdx) => (
-                <INoteChapter 
-                  key={chapter.id}
-                  chapter={chapter} 
-                  chIdx={chIdx}
-                  dispatch={dispatch}
-                />
+      <ul className='ct-inote-editor'> 
+        {chapters.map((chapter, chIdx) => (
+          <INoteChapter 
+            key={chapter.id}
+            chapter={chapter} 
+            chIdx={chIdx}
+            dispatch={dispatch}
+          />
             ))}
-        </ul>
+      </ul>
     )
 }
 
diff --git a/src/screens/EPub/views/EditINote/index.js b/src/screens/EPub/views/EditINote/index.js
index 1ac185dad..b82e7f802 100644
--- a/src/screens/EPub/views/EditINote/index.js
+++ b/src/screens/EPub/views/EditINote/index.js
@@ -14,14 +14,14 @@ function EditINote ({epub: epubData, dispatch}) {
     
     const [iNoteItem, setINoteItem] = useState(null);
     return (
-        <EPubNavigationProvider>
-            <CTFragment dFlex h100 scrollY id={epubController.id.EPubChapterListID} onScroll={onScroll}>
-                <CTFragment width="75%">
-                    <CTHeading>{epubData.title}</CTHeading>
-                    <INoteEditor> setINoteItem={setINoteItem} dispatch={dispatch} </INoteEditor>
-                </CTFragment>
-            </CTFragment>
-        </EPubNavigationProvider>
+      <EPubNavigationProvider>
+        <CTFragment dFlex h100 scrollY id={epubController.id.EPubChapterListID} onScroll={onScroll}>
+          <CTFragment width="75%">
+            <CTHeading>{epubData.title}</CTHeading>
+            <INoteEditor> setINoteItem={setINoteItem} dispatch={dispatch} </INoteEditor>
+          </CTFragment>
+        </CTFragment>
+      </EPubNavigationProvider>
     )
 }
 export default connect(({epub: {epub}, loading }) => ({

From be268320ae66b265b3a205b4b568ec8d182dd41f Mon Sep 17 00:00:00 2001
From: alan3tao <alan3tao@gmail.com>
Date: Mon, 21 Aug 2023 16:07:01 -0500
Subject: [PATCH 24/39] fixed linter issues

---
 .../EditINote/INoteEditor/INoteChapter.js     | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 0253d2025..aa3d1d9a7 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -35,16 +35,8 @@ function INoteChapter ({
         setOpenModalIndex(openModalIndex);
     }
 
-    const handleSave = (val) => {
-        console.log(val, openModalIndex)
-        if (typeof onInsert === 'function' && val) {
-            onInsert(openModalIndex)(val);
-        }
-        handleClose();
-    };
-    
-    const onInsert = (index) => (val) => {
-        console.log(val, index);
+     const onInsert = (index) => (val) => {
+        //console.log(val, index);
         dispatch({
             type: 'epub/updateEpubData', payload: {
                 action: 'insertChapterContentAtChapterIdx', payload: { contentIdx: index, chapterIdx: chIdx, value: val }
@@ -52,6 +44,16 @@ function INoteChapter ({
         })
     };
 
+
+    const handleSave = (val) => {
+        //console.log(val, openModalIndex)
+        if (typeof onInsert === 'function' && val) {
+            onInsert(openModalIndex)(val);
+        }
+        handleClose();
+    };
+    
+   
     const handleSaveImage = (val) => {
         handleSave(new EPubImageData(val).toObject());
     };

From a6b4a53772aa0f4f8cfde6bc42d5309c303333e5 Mon Sep 17 00:00:00 2001
From: alan3tao <alan3tao@gmail.com>
Date: Mon, 21 Aug 2023 16:11:24 -0500
Subject: [PATCH 25/39] fixed linter commenting  issues

---
 src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index aa3d1d9a7..2aa721893 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -36,7 +36,7 @@ function INoteChapter ({
     }
 
      const onInsert = (index) => (val) => {
-        //console.log(val, index);
+        
         dispatch({
             type: 'epub/updateEpubData', payload: {
                 action: 'insertChapterContentAtChapterIdx', payload: { contentIdx: index, chapterIdx: chIdx, value: val }
@@ -46,7 +46,6 @@ function INoteChapter ({
 
 
     const handleSave = (val) => {
-        //console.log(val, openModalIndex)
         if (typeof onInsert === 'function' && val) {
             onInsert(openModalIndex)(val);
         }

From 63690c7373261b96d6d6d5bf2257dc2b7802581b Mon Sep 17 00:00:00 2001
From: alan3tao <alan3tao@gmail.com>
Date: Mon, 21 Aug 2023 16:14:36 -0500
Subject: [PATCH 26/39] fixed linter commenting  issues

---
 src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 2aa721893..d80addb47 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -36,7 +36,6 @@ function INoteChapter ({
     }
 
      const onInsert = (index) => (val) => {
-        
         dispatch({
             type: 'epub/updateEpubData', payload: {
                 action: 'insertChapterContentAtChapterIdx', payload: { contentIdx: index, chapterIdx: chIdx, value: val }

From 8f526612833fe60a766f9853f306b3e9fadd4ec0 Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Sun, 27 Aug 2023 14:52:50 -0500
Subject: [PATCH 27/39] fix editing/deletion of preexisting images and text

---
 src/screens/EPub/models/data_reducer.js       |  14 +
 .../EditINote/INoteEditor/INoteChapter.js     | 397 +++++++++---------
 2 files changed, 204 insertions(+), 207 deletions(-)

diff --git a/src/screens/EPub/models/data_reducer.js b/src/screens/EPub/models/data_reducer.js
index fe762d96a..9187b27be 100644
--- a/src/screens/EPub/models/data_reducer.js
+++ b/src/screens/EPub/models/data_reducer.js
@@ -447,6 +447,20 @@ export default {
         // this.__feed('Removed.');
         return { ...state, epub: { ...state.epub, ...nextStateOfChapters([...chapters]) } };
     },
+    removeChapterContentAtChapterIdx(state, { payload: { type = 'text', contentIdx, chapterIdx, subChapterIdx } }) {
+        const chapters = state.epub.chapters;
+        if (subChapterIdx === undefined) {
+            const chapter = chapters[chapterIdx];
+            console.log(`Removing chapter ${chapterIdx} content`);
+            removeContent(chapter, contentIdx);
+        } else if (chapters?.[chapterIdx]?.subChapters?.[subChapterIdx]) {
+            console.log(`Removing chapter ${chapterIdx} subchapter ${subChapterIdx} content`);
+            removeContent(chapters?.[chapterIdx]?.subChapters?.[subChapterIdx], contentIdx)
+        }
+        // this.updateAll('Remove the chapter content');
+        // this.__feed('Removed.');
+        return { ...state, epub: { ...state.epub, ...nextStateOfChapters([...chapters]) } };
+    },
 }
 /*
 __feed(mesg = 'Saved.') {
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index d80addb47..50631a24d 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -2,230 +2,213 @@ import { CTFragment, CTText, altEl} from 'layout'
 import React, {useState} from 'react' 
 import { Button } from 'pico-ui';
 import { connect } from 'dva'
-import { indexOf } from 'lodash';
 import { EPubImageData } from 'entities/EPubs';
 import { ChapterImage, ChapterText, ChapterTitle, MDEditorModal } from '../../../components';
 import {epub as epubTools} from '../../../controllers'
-import ChapterNewContent from '../../EditEPubChapter/ChapterEditor/ChapterNewContent';
-import ChapterContent from '../../EditEPubChapter/ChapterEditor/ChapterContent';
 
 
 function INoteChapter ({
-    chapter, 
-    chIdx,
-    canSplit = true,
-    canSplitSubChapter = true,
-    canSubdivide = true,
-    dispatch 
+  chapter, 
+  chIdx,
+  canSplit = true,
+  canSplitSubChapter = true,
+  canSubdivide = true,
+  dispatch 
 }) {
-    const CParams = { chapterIdx: chIdx};
-
-    const [insertType, setInsertType] = useState(null);
-    const openMDEditor = insertType === 'md';
-
-    const [openModalIndex, setOpenModalIndex] = useState(null);
-
-    const handleOpenMDEditor = (itemIdx) => {
-        setInsertType('md');
-        setOpenModalIndex(itemIdx)
-    };
+  const [insertType, setInsertType] = useState(null);
+  const openMDEditor = insertType === 'md';
+  const [openModalIndex, setOpenModalIndex] = useState(null);
+
+  const handleOpenMDEditor = (itemIdx) => {
+    setInsertType('md');
+    setOpenModalIndex(itemIdx)
+  };
       
-    const handleClose = () => {
-        setInsertType(null);
-        setOpenModalIndex(openModalIndex);
-    }
-
-     const onInsert = (index) => (val) => {
-        dispatch({
-            type: 'epub/updateEpubData', payload: {
-                action: 'insertChapterContentAtChapterIdx', payload: { contentIdx: index, chapterIdx: chIdx, value: val }
-            }
-        })
-    };
+  const handleClose = () => {
+    setInsertType(null);
+    setOpenModalIndex(openModalIndex);
+  }
+
+  const onInsert = (index) => (val) => {
+    dispatch({
+      type: 'epub/updateEpubData', payload: {
+          action: 'insertChapterContentAtChapterIdx', payload: { contentIdx: index, chapterIdx: chIdx, value: val }
+      }
+    })
+  };
 
 
-    const handleSave = (val) => {
-        if (typeof onInsert === 'function' && val) {
-            onInsert(openModalIndex)(val);
-        }
-        handleClose();
-    };
+  const handleSave = (val) => {
+    if (typeof onInsert === 'function' && val) {
+      onInsert(openModalIndex)(val);
+    }
+    handleClose();
+  };
     
    
-    const handleSaveImage = (val) => {
-        handleSave(new EPubImageData(val).toObject());
+  const handleSaveImage = (val) => {
+    handleSave(new EPubImageData(val).toObject());
+  };
+
+  const handleOpenImgPicker = (itemIdx) => {
+    setOpenModalIndex(itemIdx)
+    const imgData = {
+    // screenshots: imgSrc,
+    onSave: handleSaveImage,
+    // chapterScreenshots: epub.chapters[subChapterIndex].allImagesWithIn
     };
-
-    const handleOpenImgPicker = (itemIdx) => {
-        setOpenModalIndex(itemIdx)
-        const imgData = {
-        // screenshots: imgSrc,
-        onSave: handleSaveImage,
-        // chapterScreenshots: epub.chapters[subChapterIndex].allImagesWithIn
-        };
-        dispatch({ type: 'epub/setImgPickerData', payload: imgData });
+    dispatch({ type: 'epub/setImgPickerData', payload: imgData });
+  }
+
+  // Buttons and onClick Functions 
+  const btnProps = {
+      round: true,
+      uppercase: true,
+      classNames: 'item-action-btn',
+      color: 'teal transparent'
+  };
+
+  // Split Button 
+  const splitBtnElement = (itemIdx) => {
+    return altEl(Button, canSplit, {
+      ...btnProps,
+      text: 'Split Chapter',
+      icon: 'unfold_more',
+      // onClick: handleSplitChapter(itemIdx)
+  })};
+
+  // Add Image Button
+  const addImgElement = (itemIdx) => {
+    return altEl(Button, true, {
+      ...btnProps,
+      text: 'Add Image',
+      icon: 'image',
+      onClick: () => handleOpenImgPicker(itemIdx)
+  })};
+
+  // Add Text Button 
+  function addTextElement(itemIdx) {
+    return altEl(Button, true, {
+      ...btnProps,
+      text: 'Add Text',
+      icon: 'add',
+      onClick: () => handleOpenMDEditor(itemIdx)
+  })};
+
+  // New Subchapter Button 
+  const splitSChBtnElement = (itemIdx) => {
+    return altEl(Button, canSplitSubChapter, {
+      ...btnProps,
+      text: 'New Sub-Chapter',
+      icon: 'subdirectory_arrow_right',
+      // onClick: splitSubChapter
+  })};
+
+  // Subdivide Button 
+  const subdivideBtnElement = (itemIdx) => {
+    return altEl(Button, canSubdivide, {
+        ...btnProps,
+        text: 'subdivide',
+        icon: 'subdirectory_arrow_right',
+        // onClick: subdivideChapter
+  })};
+
+  // DISPATCH FUNCTIONS 
+  // Save Chapter Title Handler 
+  const saveChapterTitle = (value) =>
+    dispatch({
+      type: 'epub/updateEpubData', payload: {
+        action: 'saveChapterTitle', payload: { chapterIdx: chIdx, value }
     }
+  })
+
+  // Chapter Image Functions
+  const onImageChange = (index) => (val) => {
+    dispatch({
+      type: 'epub/updateEpubData', payload: {
+        action: 'setChapterContentAtChapterIdx', payload: { chapterIdx: chIdx, contentIdx: index, value: val, type: 'image' }
+      }
+    })
+  };
 
-    // Buttons and onClick Functions 
-
-    const btnProps = {
-        round: true,
-        uppercase: true,
-        classNames: 'item-action-btn',
-        color: 'teal transparent'
-    };
-
-    // Split Button 
-    const splitBtnElement = (itemIdx) => {
-        return altEl(Button, canSplit, {
-            ...btnProps,
-            text: 'Split Chapter',
-            icon: 'unfold_more',
-            // onClick: handleSplitChapter(itemIdx)
-
-    })};
-
-    // Add Image Button
-    const addImgElement = (itemIdx) => {
-        return altEl(Button, true, {
-            ...btnProps,
-            text: 'Add Image',
-            icon: 'image',
-
-            onClick: () => handleOpenImgPicker(itemIdx)
-    })};
-
-    // Add Text Button 
-    function addTextElement(itemIdx) {
-        // setOpenModalIndex(itemIdx);
-
-
-        return altEl(Button, true, {
-            ...btnProps,
-            text: 'Add Text',
-            icon: 'add',
-            onClick: () => handleOpenMDEditor(itemIdx)
-            // onClick: handleOpenMDEditor
-
-    })};
-
-    // New Subchapter Button 
-    const splitSChBtnElement = (itemIdx) => {
-        return altEl(Button, canSplitSubChapter, {
-            ...btnProps,
-            text: 'New Sub-Chapter',
-            icon: 'subdirectory_arrow_right',
-            // onClick: splitSubChapter
-    })};
-
-    // Subdivide Button 
-    const subdivideBtnElement = (itemIdx) => {
-        return altEl(Button, canSubdivide, {
-            ...btnProps,
-            text: 'subdivide',
-            icon: 'subdirectory_arrow_right',
-            // onClick: subdivideChapter
-    })};
-
-    // DISPATCH FUNCTIONS 
-    // Save Chapter Title Handler 
-    const saveChapterTitle = value =>
-        dispatch({
-          type: 'epub/updateEpubData', payload: {
-            action: 'saveChapterTitle', payload: { chapterIdx: chIdx, value }
-        }
+  const onTextChange = (index) => (val) => {  
+    dispatch({
+      type: 'epub/updateEpubData', payload: {
+        action: val ? 'setChapterContentAtChapterIdx' : 'removeChapterContentAtChapterIdx', payload: { chapterIdx: chIdx, contentIdx: index, value: val }
+      }
     })
+  };
 
-    // Chapter Image Functions
-    const onImageChange = (index) => (val) => {
-        dispatch({
-          type: 'epub/updateEpubData', payload: {
-            action: 'setChapterContent', payload: { contentIdx: index, value: val, type: 'image' }
-          }
-        })
-    };
-    // const onTextChange = (index) => (val) => {
-    //     dispatch({
-    //       type: 'epub/updateEpubData', payload: {
-    //         action: val ? 'setChapterContent' : 'removeChapterContent', payload: { contentIdx: index, value: val }
-    //       }
-    //     })
-    //   };
-
-    const onRemove = (index) => () => {
-        dispatch({
-          type: 'epub/updateEpubData', payload: {
-            action: 'removeChapterContent', payload: { contentIdx: index, type: 'image' }
-          }
-        })
-      };
-
-     return (
-       <div>
-         <div 
-           id={epubTools.id.chID(chapter.id)}
-           className='ct-inote-chapter'
-         >
-           <div className='chapter-title'>
-             <CTText muted className="pt-2 pl-2">Chapter {chIdx + 1}: {chapter.title}</CTText>
-             <div className="ch-item-title-con ct-d-r-center-v">
-               <ChapterTitle
-                 id={epubTools.id.chTitleID(chapter.id)}
-                 value={chapter.title}
-                 onSave={saveChapterTitle}
-                 headingType="h2"
-                 className="ch-item-title"
-               />
-             </div>
-           </div>
-
-
-           {chapter.contents.map((content, itemIdx) => (
-             <div className={itemIdx}>
-               <div className="item-actions">
-                 {splitBtnElement(itemIdx)}
-                 {splitSChBtnElement(itemIdx)}
-                 {subdivideBtnElement(itemIdx)}
-                 {addImgElement(itemIdx)}
-                 {addTextElement(itemIdx)}
-               </div>
-
-               {typeof content === "object" ? ( // image
-                 <div className='img-con'>   
-                   <ChapterImage 
-                     id={`ch-content-${chapter.id}-${itemIdx}`}
-                     image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
-                     enableChapterScreenshots
-                     onChooseImage={onImageChange(itemIdx)}
-                     onRemoveImage={onRemove(itemIdx)}
-                   />
-                 </div> 
-                            ) : ( // text 
-                              <div className='item-text'>   
-                                <ChapterText  
-                                  text={content}
-                                />
-                              </div>  
-                            
-                        )}
-                        
-
-             </div>
-                ))}
-            
-         </div>
-         {insertType !== null && (
-         <MDEditorModal
-           show={openMDEditor}
-           onClose={handleClose}
-           onSave={handleSave}
-           title="Insert New Text"
-         />
-            )}     
-
-       </div>
-        
-    )
+  const onRemove = (index) => () => {
+    dispatch({
+      type: 'epub/updateEpubData', payload: {
+        action: 'removeChapterContent', payload: { contentIdx: index, type: 'image' }
+      }
+    })
+  };
+
+  return (
+    <CTFragment dFlexCol>
+      <CTFragment 
+        id={epubTools.id.chID(chapter.id)}
+        className='ct-inote-chapter'
+      >
+        <CTFragment className='chapter-title'>
+          <CTText muted className="pt-2 pl-2">Chapter {chIdx + 1}: {chapter.title}</CTText>
+          <CTFragment className="ch-item-title-con ct-d-r-center-v">
+            <ChapterTitle
+              id={epubTools.id.chTitleID(chapter.id)}
+              value={chapter.title}
+              onSave={saveChapterTitle}
+              headingType="h2"
+              className="ch-item-title"
+            />
+          </CTFragment>
+        </CTFragment>
+
+        {chapter.contents.map((content, itemIdx) => (
+          <CTFragment className={itemIdx}>
+            <CTFragment className="item-actions">
+              {splitBtnElement(itemIdx)}
+              {splitSChBtnElement(itemIdx)}
+              {subdivideBtnElement(itemIdx)}
+              {addImgElement(itemIdx)}
+              {addTextElement(itemIdx)}
+            </CTFragment>
+
+          {typeof content === "object" ? ( // image
+            <CTFragment className='img-con'>   
+              <ChapterImage 
+                id={`ch-content-${chapter.id}-${itemIdx}`}
+                image={content} // TODO ITEM id and ocr and alttext maybe map between item and content 
+                enableChapterScreenshots
+                onChooseImage={onImageChange(itemIdx)}
+                onRemoveImage={onRemove(itemIdx)}
+              />
+            </CTFragment> 
+            ) : ( // text 
+            <CTFragment className='item-text'>   
+              <ChapterText  
+                id={`ch-content-${chapter.id}-${itemIdx}`}
+                text={content}
+                onSaveText={onTextChange(itemIdx)}
+              />
+            </CTFragment>  
+          )}  
+          </CTFragment>
+        ))}
+      </CTFragment>
+
+      {insertType !== null && (
+        <MDEditorModal
+          show={openMDEditor}
+          onClose={handleClose}
+          onSave={handleSave}
+          title="Insert New Text"
+        />
+      )}     
+    </CTFragment>
+  )
 }
 
 export default connect() (INoteChapter)
\ No newline at end of file

From c3ef3ea8b5cc7ada115cec8bb79ea4ae979f9cbb Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Sun, 27 Aug 2023 15:18:38 -0500
Subject: [PATCH 28/39] fix UI not updating changes in real time

---
 src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js | 4 ++--
 src/screens/EPub/views/EditINote/INoteEditor/index.js        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 50631a24d..732e910a0 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -167,7 +167,7 @@ function INoteChapter ({
         </CTFragment>
 
         {chapter.contents.map((content, itemIdx) => (
-          <CTFragment className={itemIdx}>
+          <CTFragment key={itemIdx}>
             <CTFragment className="item-actions">
               {splitBtnElement(itemIdx)}
               {splitSChBtnElement(itemIdx)}
@@ -211,4 +211,4 @@ function INoteChapter ({
   )
 }
 
-export default connect() (INoteChapter)
\ No newline at end of file
+export default INoteChapter
\ No newline at end of file
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/index.js b/src/screens/EPub/views/EditINote/INoteEditor/index.js
index fa83497bb..0bff02fc2 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/index.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/index.js
@@ -24,7 +24,7 @@ function INoteEditor({ chapters = [], foldedIds = [], currChIndex, setINoteItem,
             chIdx={chIdx}
             dispatch={dispatch}
           />
-            ))}
+        ))}
       </ul>
     )
 }

From 47de5ba39381758bdf37d218b68b6322d756229c Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Sun, 27 Aug 2023 15:21:05 -0500
Subject: [PATCH 29/39] make everything 2 space

---
 .../EditINote/INoteEditor/INoteChapter.js     | 18 ++++-----
 .../EPub/views/EditINote/INoteEditor/index.js | 38 +++++++++----------
 src/screens/EPub/views/EditINote/index.js     | 26 ++++++-------
 3 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 732e910a0..ec4850d15 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -32,7 +32,7 @@ function INoteChapter ({
   const onInsert = (index) => (val) => {
     dispatch({
       type: 'epub/updateEpubData', payload: {
-          action: 'insertChapterContentAtChapterIdx', payload: { contentIdx: index, chapterIdx: chIdx, value: val }
+        action: 'insertChapterContentAtChapterIdx', payload: { contentIdx: index, chapterIdx: chIdx, value: val }
       }
     })
   };
@@ -62,10 +62,10 @@ function INoteChapter ({
 
   // Buttons and onClick Functions 
   const btnProps = {
-      round: true,
-      uppercase: true,
-      classNames: 'item-action-btn',
-      color: 'teal transparent'
+    round: true,
+    uppercase: true,
+    classNames: 'item-action-btn',
+    color: 'teal transparent'
   };
 
   // Split Button 
@@ -107,10 +107,10 @@ function INoteChapter ({
   // Subdivide Button 
   const subdivideBtnElement = (itemIdx) => {
     return altEl(Button, canSubdivide, {
-        ...btnProps,
-        text: 'subdivide',
-        icon: 'subdirectory_arrow_right',
-        // onClick: subdivideChapter
+      ...btnProps,
+      text: 'subdivide',
+      icon: 'subdirectory_arrow_right',
+      // onClick: subdivideChapter
   })};
 
   // DISPATCH FUNCTIONS 
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/index.js b/src/screens/EPub/views/EditINote/INoteEditor/index.js
index 0bff02fc2..6e9d05f53 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/index.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/index.js
@@ -7,26 +7,26 @@ import './index.scss';
 import INoteChapter from './INoteChapter';
 
 function INoteEditor({ chapters = [], foldedIds = [], currChIndex, setINoteItem, dispatch }) {
-    useEffect(() => {
-        if (currChIndex > 0) {
-          setTimeout(() => {
-            dispatch({ type: 'epub/navigateChapter', payload: chapters[currChIndex].id });
-          }, 500);
-        }
-      }, []);
+  useEffect(() => {
+    if (currChIndex > 0) {
+      setTimeout(() => {
+        dispatch({ type: 'epub/navigateChapter', payload: chapters[currChIndex].id });
+      }, 500);
+    }
+  }, []);
 
-    return (
-      <ul className='ct-inote-editor'> 
-        {chapters.map((chapter, chIdx) => (
-          <INoteChapter 
-            key={chapter.id}
-            chapter={chapter} 
-            chIdx={chIdx}
-            dispatch={dispatch}
-          />
-        ))}
-      </ul>
-    )
+  return (
+    <ul className='ct-inote-editor'> 
+      {chapters.map((chapter, chIdx) => (
+        <INoteChapter 
+          key={chapter.id}
+          chapter={chapter} 
+          chIdx={chIdx}
+          dispatch={dispatch}
+        />
+      ))}
+    </ul>
+  )
 }
 
 export default connect(({ epub: { currChIndex, epub: { chapters, images}, foldedIds }, loading }) => ({
diff --git a/src/screens/EPub/views/EditINote/index.js b/src/screens/EPub/views/EditINote/index.js
index b82e7f802..eea9d38b4 100644
--- a/src/screens/EPub/views/EditINote/index.js
+++ b/src/screens/EPub/views/EditINote/index.js
@@ -9,20 +9,20 @@ import INoteEditor from './INoteEditor';
 // import './index.scss';
 
 function EditINote ({epub: epubData, dispatch}) {
-    const dispatchScroll = _.debounce((e) => dispatch({ type: 'epub/onScroll', payload: e }), 300)
-    const onScroll = (e) => dispatchScroll(e.target)
-    
-    const [iNoteItem, setINoteItem] = useState(null);
-    return (
-      <EPubNavigationProvider>
-        <CTFragment dFlex h100 scrollY id={epubController.id.EPubChapterListID} onScroll={onScroll}>
-          <CTFragment width="75%">
-            <CTHeading>{epubData.title}</CTHeading>
-            <INoteEditor> setINoteItem={setINoteItem} dispatch={dispatch} </INoteEditor>
-          </CTFragment>
+  const dispatchScroll = _.debounce((e) => dispatch({ type: 'epub/onScroll', payload: e }), 300)
+  const onScroll = (e) => dispatchScroll(e.target)
+  
+  const [iNoteItem, setINoteItem] = useState(null);
+  return (
+    <EPubNavigationProvider>
+      <CTFragment dFlex h100 scrollY id={epubController.id.EPubChapterListID} onScroll={onScroll}>
+        <CTFragment width="75%">
+          <CTHeading>{epubData.title}</CTHeading>
+          <INoteEditor> setINoteItem={setINoteItem} dispatch={dispatch} </INoteEditor>
         </CTFragment>
-      </EPubNavigationProvider>
-    )
+      </CTFragment>
+    </EPubNavigationProvider>
+  )
 }
 export default connect(({epub: {epub}, loading }) => ({
     epub

From 41aa74a87461beaf2ad164824b3334e49d3a844a Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Mon, 28 Aug 2023 09:43:46 -0500
Subject: [PATCH 30/39] split

---
 src/entities/EPubs/structs/EPubChapterData.js |  2 +-
 src/screens/EPub/models/data_reducer.js       | 29 +++++++++++++---
 .../EditINote/INoteEditor/INoteChapter.js     | 33 ++++++++++++++++---
 .../EPub/views/EditINote/INoteEditor/index.js |  1 +
 4 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/src/entities/EPubs/structs/EPubChapterData.js b/src/entities/EPubs/structs/EPubChapterData.js
index df6305dc2..c991ef1b2 100644
--- a/src/entities/EPubs/structs/EPubChapterData.js
+++ b/src/entities/EPubs/structs/EPubChapterData.js
@@ -10,7 +10,7 @@ function _createChapterTitle() {
 }
 
 class EPubChapterData extends EPubChapterLikeData {
-  constructor(chapterLike, resetText = true) {
+  constructor(chapterLike, resetText) {
     super(chapterLike, resetText, _createChapterTitle);
 
     const { subChapters = [] } = chapterLike;
diff --git a/src/screens/EPub/models/data_reducer.js b/src/screens/EPub/models/data_reducer.js
index 9187b27be..47ed486a3 100644
--- a/src/screens/EPub/models/data_reducer.js
+++ b/src/screens/EPub/models/data_reducer.js
@@ -28,8 +28,8 @@ function removeSubChapter(chapter, subChapterIndex) {
     ];
     return subChapter;
 }
-function insertChapter(chapters, index, chapterLike) {
-    let newChapter = new EPubChapterData(chapterLike);
+function insertChapter(chapters, index, chapterLike, resetText = true) {
+    let newChapter = new EPubChapterData(chapterLike, resetText);
     newChapter = newChapter.__data__ ? newChapter.__data__ : newChapter.toObject();
 
     console.log(`Inserting chapter at ${index}: `, chapterLike);
@@ -266,7 +266,6 @@ export default {
         const chapters = state.epub.chapters;
         const currChp = chapters[chapterIdx];
         const prevChp = chapters[chapterIdx - 1];
-
         console.log(`Undoing split-chapter at ${chapterIdx}`);
         // if the prev chapter has sub-chapters
         // append curr chapter and its sub-chapters to prev's sub-chapters
@@ -279,11 +278,33 @@ export default {
             prevChp.subChapters = currChp?.subChapters;
             // remove combined chapter
             newChapters = removeChapter(chapters, chapterIdx);
-        }
+        } 
         rebuildChapter(chapters, chapterIdx - 1);
         // this.updateAll('Undo split chapters', chapterIdx - 1);
         return { ...state, epub: { ...state.epub, ...nextStateOfChapters(newChapters) } };
     },
+    sliceChapter(state, { payload: { chapterIdx, itemIdx}}) {
+        console.log(`Splitting Chapter ${chapterIdx} at ItemIdx ${itemIdx}`);
+        const chapters = state.epub.chapters;
+        const chapter = chapters[chapterIdx]
+        // remove contents from current chapter and add to new chapter
+        let contents = _.slice(chapter.contents, itemIdx, chapter.contents.length);
+        chapter.contents = _.slice(chapter.contents, 0, itemIdx);
+        // insert the new chapter
+        const newChapters = insertChapter(chapters, chapterIdx + 1, { contents }, false);
+        return { ...state, epub: { ...state.epub, ...nextStateOfChapters(newChapters) } };
+    },
+    mergeChapter(state, { payload: { chapterIdx } }) {
+        console.log(`Merging Contents of Chapters ${chapterIdx - 1} and ${chapterIdx}`);
+        const chapters = state.epub.chapters;
+        const currChp = chapters[chapterIdx];
+        const prevChp = chapters[chapterIdx - 1];
+        
+        // TODO account for sub chapters
+        prevChp.contents = _.concat(prevChp?.contents, currChp?.contents);
+        let newChapters = removeChapter(chapters, chapterIdx);
+        return { ...state, epub: { ...state.epub, ...nextStateOfChapters(newChapters) } };
+    },
     appendChapterAsSubChapter(state, { payload: { chapterIdx } }) {
         console.log(`Appending chapter ${chapterIdx} as subchapter`);
         const chapters = state.epub.chapters;
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index ec4850d15..2a6c13887 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -1,7 +1,6 @@
 import { CTFragment, CTText, altEl} from 'layout'
 import React, {useState} from 'react' 
 import { Button } from 'pico-ui';
-import { connect } from 'dva'
 import { EPubImageData } from 'entities/EPubs';
 import { ChapterImage, ChapterText, ChapterTitle, MDEditorModal } from '../../../components';
 import {epub as epubTools} from '../../../controllers'
@@ -10,9 +9,10 @@ import {epub as epubTools} from '../../../controllers'
 function INoteChapter ({
   chapter, 
   chIdx,
-  canSplit = true,
   canSplitSubChapter = true,
   canSubdivide = true,
+  isSubChapter,
+  subChIdx,
   dispatch 
 }) {
   const [insertType, setInsertType] = useState(null);
@@ -37,7 +37,6 @@ function INoteChapter ({
     })
   };
 
-
   const handleSave = (val) => {
     if (typeof onInsert === 'function' && val) {
       onInsert(openModalIndex)(val);
@@ -68,15 +67,38 @@ function INoteChapter ({
     color: 'teal transparent'
   };
 
-  // Split Button 
+  // Split and Merge Chapter Button and Functions
   const splitBtnElement = (itemIdx) => {
+    let canSplit = itemIdx > 0
     return altEl(Button, canSplit, {
       ...btnProps,
       text: 'Split Chapter',
       icon: 'unfold_more',
-      // onClick: handleSplitChapter(itemIdx)
+      onClick: () => sliceChapter(itemIdx)
   })};
 
+  const mergeChapterBtnElement = (itemIdx) => {
+    let canMerge = chIdx > 0 && itemIdx == 0;
+    return altEl(Button, canMerge, {
+      ...btnProps,
+      text: 'Merge Chapter With Above',
+      icon: 'unfold_less',
+      onClick: mergeChapter
+  })};
+
+  const sliceChapter = (itemIdx) => dispatch({
+    type: 'epub/updateEpubData', payload: {
+      action: 'sliceChapter', payload: { chapterIdx: chIdx, itemIdx: itemIdx }
+    }
+  });
+
+  // Undo Chapter Split 
+  const mergeChapter = () => dispatch({
+    type: 'epub/updateEpubData', payload: {
+      action: 'mergeChapter', payload: { chapterIdx: chIdx }
+    }
+  })
+
   // Add Image Button
   const addImgElement = (itemIdx) => {
     return altEl(Button, true, {
@@ -169,6 +191,7 @@ function INoteChapter ({
         {chapter.contents.map((content, itemIdx) => (
           <CTFragment key={itemIdx}>
             <CTFragment className="item-actions">
+              {mergeChapterBtnElement(itemIdx)}
               {splitBtnElement(itemIdx)}
               {splitSChBtnElement(itemIdx)}
               {subdivideBtnElement(itemIdx)}
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/index.js b/src/screens/EPub/views/EditINote/INoteEditor/index.js
index 6e9d05f53..095c23689 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/index.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/index.js
@@ -22,6 +22,7 @@ function INoteEditor({ chapters = [], foldedIds = [], currChIndex, setINoteItem,
           key={chapter.id}
           chapter={chapter} 
           chIdx={chIdx}
+          isSubChapter={false}
           dispatch={dispatch}
         />
       ))}

From 009d615d1a894fb5f05b0abd5863a07b896f0dd1 Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Mon, 28 Aug 2023 10:05:35 -0500
Subject: [PATCH 31/39] replace edit-structure with edit-intoe

---
 .vscode/launch.json                               | 15 +++++++++++++++
 .../controllers/EPubListController.js             |  2 +-
 .../EPub/controllers/file-builders/EPubParser.js  |  7 +++----
 src/screens/EPub/index.js                         |  2 +-
 src/screens/EPub/model.js                         |  2 +-
 5 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 000000000..2ba986f6f
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/components/CTEPubListScreen/controllers/EPubListController.js b/src/components/CTEPubListScreen/controllers/EPubListController.js
index a8ca6a8e2..ee1894a84 100644
--- a/src/components/CTEPubListScreen/controllers/EPubListController.js
+++ b/src/components/CTEPubListScreen/controllers/EPubListController.js
@@ -43,7 +43,7 @@ class EPubListController {
     }
 
     uurl.openNewTab(
-      links.epub(newEPubData.id, Constants.EpbEditStructure, Constants.HFromNew)
+      links.epub(newEPubData.id, Constants.EditINote, Constants.HFromNew)
     );
 
     return newEPubData;
diff --git a/src/screens/EPub/controllers/file-builders/EPubParser.js b/src/screens/EPub/controllers/file-builders/EPubParser.js
index e139761af..51bbf6bc2 100644
--- a/src/screens/EPub/controllers/file-builders/EPubParser.js
+++ b/src/screens/EPub/controllers/file-builders/EPubParser.js
@@ -2,8 +2,9 @@ import _ from 'lodash';
 import Prism from 'prismjs';
 import { uurl, api, CTError } from 'utils';
 import { EPubData, EPubDataValidationError, EPubChapterData } from 'entities/EPubs';
-
-const buildHTMLFromChapter = EPubChapterData.__buildHTMLFromChapter;
+import { buildHTMLFromChapter } from '../../../../entities/EPubs/html-converters';
+import jquery from 'jquery';
+import { buildMDfromImage } from 'entities/EPubs/html-converters';
 
 /**
  * The error which occurred while loading the images for an ePub
@@ -142,7 +143,6 @@ class EPubParser {
   extractBodyTextFromDom(dom) {
     // Serialize xhtml
     const xhtml = new XMLSerializer().serializeToString(dom);
-
     // Only keep codes inside the <body>..</body>
     return xhtml
       .replace('<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>', '')
@@ -159,7 +159,6 @@ class EPubParser {
       const chapterId = `chapter-${chIdx + 1}`;
 
       const subChapters = this.parseSubChapters(chapter.subChapters, chapterId);
-
       const dom = await this.createChapterDOM({ ...chapter, id: chapterId, subChapters });
       Prism.highlightAllUnder(dom);
       const chapterText = this.extractBodyTextFromDom(dom);
diff --git a/src/screens/EPub/index.js b/src/screens/EPub/index.js
index 81ae2f7d2..8350307be 100644
--- a/src/screens/EPub/index.js
+++ b/src/screens/EPub/index.js
@@ -102,10 +102,10 @@ function EPubWithRedux({ view, chapters, epub, dispatch }) {
       {headerElement}
 
       <CTFragment id="ct-epb-view-con">
+        {editINoteView}
         {editStructView}
         {editChapterView}
         {readOnlyView}
-        {editINoteView}
       </CTFragment>
 
       <ImagePickerModal />
diff --git a/src/screens/EPub/model.js b/src/screens/EPub/model.js
index ef3b0c206..d0f91ccae 100644
--- a/src/screens/EPub/model.js
+++ b/src/screens/EPub/model.js
@@ -186,7 +186,7 @@ const EPubModel = {
                 return;
             }
 
-            uurl.openNewTab(links.epub(newEPubData.id, Constants.EpbEditStructure));
+            uurl.openNewTab(links.epub(newEPubData.id, Constants.EditINote));
         },
         *deleteEPub({ payload: ePubId }, { call, put, select, take }) {
             try {

From 8aa7f838e2388f178e44e5b42a31159478a45d2a Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Mon, 28 Aug 2023 10:10:03 -0500
Subject: [PATCH 32/39] fix lint errors

---
 .../EditINote/INoteEditor/INoteChapter.js     | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 2a6c13887..c8107628e 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -68,6 +68,19 @@ function INoteChapter ({
   };
 
   // Split and Merge Chapter Button and Functions
+  const sliceChapter = (itemIdx) => dispatch({
+    type: 'epub/updateEpubData', payload: {
+      action: 'sliceChapter', payload: { chapterIdx: chIdx, itemIdx }
+    }
+  });
+
+  // Undo Chapter Split 
+  const mergeChapter = () => dispatch({
+    type: 'epub/updateEpubData', payload: {
+      action: 'mergeChapter', payload: { chapterIdx: chIdx }
+    }
+  })
+
   const splitBtnElement = (itemIdx) => {
     let canSplit = itemIdx > 0
     return altEl(Button, canSplit, {
@@ -78,7 +91,7 @@ function INoteChapter ({
   })};
 
   const mergeChapterBtnElement = (itemIdx) => {
-    let canMerge = chIdx > 0 && itemIdx == 0;
+    let canMerge = chIdx > 0 && itemIdx === 0;
     return altEl(Button, canMerge, {
       ...btnProps,
       text: 'Merge Chapter With Above',
@@ -86,19 +99,6 @@ function INoteChapter ({
       onClick: mergeChapter
   })};
 
-  const sliceChapter = (itemIdx) => dispatch({
-    type: 'epub/updateEpubData', payload: {
-      action: 'sliceChapter', payload: { chapterIdx: chIdx, itemIdx: itemIdx }
-    }
-  });
-
-  // Undo Chapter Split 
-  const mergeChapter = () => dispatch({
-    type: 'epub/updateEpubData', payload: {
-      action: 'mergeChapter', payload: { chapterIdx: chIdx }
-    }
-  })
-
   // Add Image Button
   const addImgElement = (itemIdx) => {
     return altEl(Button, true, {

From 3d200a9836e6b722277b170f53487441b66e551a Mon Sep 17 00:00:00 2001
From: alan3tao <alan3tao@gmail.com>
Date: Mon, 28 Aug 2023 17:25:47 -0500
Subject: [PATCH 33/39] debugging image adding

---
 .../views/EditINote/INoteEditor/INoteChapter.js     | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index d80addb47..4aca19349 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -27,7 +27,8 @@ function INoteChapter ({
 
     const handleOpenMDEditor = (itemIdx) => {
         setInsertType('md');
-        setOpenModalIndex(itemIdx)
+        setOpenModalIndex(itemIdx);
+        //console.log(itemIdx,openModalIndex);
     };
       
     const handleClose = () => {
@@ -45,19 +46,25 @@ function INoteChapter ({
 
 
     const handleSave = (val) => {
+      
+      
         if (typeof onInsert === 'function' && val) {
+          console.log(openModalIndex);
             onInsert(openModalIndex)(val);
         }
         handleClose();
+        
     };
     
    
     const handleSaveImage = (val) => {
+       
         handleSave(new EPubImageData(val).toObject());
     };
 
     const handleOpenImgPicker = (itemIdx) => {
-        setOpenModalIndex(itemIdx)
+        setOpenModalIndex(itemIdx);
+        console.log(itemIdx,openModalIndex);
         const imgData = {
         // screenshots: imgSrc,
         onSave: handleSaveImage,
@@ -95,6 +102,8 @@ function INoteChapter ({
             onClick: () => handleOpenImgPicker(itemIdx)
     })};
 
+  
+
     // Add Text Button 
     function addTextElement(itemIdx) {
         // setOpenModalIndex(itemIdx);

From aea976c1e1b0a54478e4f831659406006e5244a7 Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Tue, 29 Aug 2023 11:52:52 -0500
Subject: [PATCH 34/39] remove accidentally pushed files

---
 .vscode/launch.json                               | 15 ---------------
 .../EPub/controllers/file-builders/EPubParser.js  |  7 ++++---
 2 files changed, 4 insertions(+), 18 deletions(-)
 delete mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
deleted file mode 100644
index 2ba986f6f..000000000
--- a/.vscode/launch.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:8080",
-            "webRoot": "${workspaceFolder}"
-        }
-    ]
-}
\ No newline at end of file
diff --git a/src/screens/EPub/controllers/file-builders/EPubParser.js b/src/screens/EPub/controllers/file-builders/EPubParser.js
index 51bbf6bc2..e139761af 100644
--- a/src/screens/EPub/controllers/file-builders/EPubParser.js
+++ b/src/screens/EPub/controllers/file-builders/EPubParser.js
@@ -2,9 +2,8 @@ import _ from 'lodash';
 import Prism from 'prismjs';
 import { uurl, api, CTError } from 'utils';
 import { EPubData, EPubDataValidationError, EPubChapterData } from 'entities/EPubs';
-import { buildHTMLFromChapter } from '../../../../entities/EPubs/html-converters';
-import jquery from 'jquery';
-import { buildMDfromImage } from 'entities/EPubs/html-converters';
+
+const buildHTMLFromChapter = EPubChapterData.__buildHTMLFromChapter;
 
 /**
  * The error which occurred while loading the images for an ePub
@@ -143,6 +142,7 @@ class EPubParser {
   extractBodyTextFromDom(dom) {
     // Serialize xhtml
     const xhtml = new XMLSerializer().serializeToString(dom);
+
     // Only keep codes inside the <body>..</body>
     return xhtml
       .replace('<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>', '')
@@ -159,6 +159,7 @@ class EPubParser {
       const chapterId = `chapter-${chIdx + 1}`;
 
       const subChapters = this.parseSubChapters(chapter.subChapters, chapterId);
+
       const dom = await this.createChapterDOM({ ...chapter, id: chapterId, subChapters });
       Prism.highlightAllUnder(dom);
       const chapterText = this.extractBodyTextFromDom(dom);

From eca3176f3cba8a78763ed5e34e293bc5116ad3ec Mon Sep 17 00:00:00 2001
From: alan3tao <alan3tao@gmail.com>
Date: Wed, 6 Sep 2023 17:29:09 -0500
Subject: [PATCH 35/39] image is now added at right location

---
 .../EditINote/INoteEditor/INoteChapter.js     | 135 ++----------------
 1 file changed, 12 insertions(+), 123 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 69822d839..3cf819e54 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -15,20 +15,6 @@ function INoteChapter ({
   canSubdivide = true,
   dispatch 
 }) {
-<<<<<<< HEAD
-    const CParams = { chapterIdx: chIdx};
-
-    const [insertType, setInsertType] = useState(null);
-    const openMDEditor = insertType === 'md';
-
-    const [openModalIndex, setOpenModalIndex] = useState(null);
-
-    const handleOpenMDEditor = (itemIdx) => {
-        setInsertType('md');
-        setOpenModalIndex(itemIdx);
-        //console.log(itemIdx,openModalIndex);
-    };
-=======
   const [insertType, setInsertType] = useState(null);
   const openMDEditor = insertType === 'md';
   const [openModalIndex, setOpenModalIndex] = useState(null);
@@ -37,7 +23,6 @@ function INoteChapter ({
     setInsertType('md');
     setOpenModalIndex(itemIdx)
   };
->>>>>>> 796c44bf3c053d30ecb27cc68f4f29f9410e1f87
       
   const handleClose = () => {
     setInsertType(null);
@@ -53,35 +38,8 @@ function INoteChapter ({
   };
 
 
-<<<<<<< HEAD
-    const handleSave = (val) => {
-      
-      
-        if (typeof onInsert === 'function' && val) {
-          console.log(openModalIndex);
-            onInsert(openModalIndex)(val);
-        }
-        handleClose();
-        
-    };
-    
-   
-    const handleSaveImage = (val) => {
-       
-        handleSave(new EPubImageData(val).toObject());
-    };
-
-    const handleOpenImgPicker = (itemIdx) => {
-        setOpenModalIndex(itemIdx);
-        console.log(itemIdx,openModalIndex);
-        const imgData = {
-        // screenshots: imgSrc,
-        onSave: handleSaveImage,
-        // chapterScreenshots: epub.chapters[subChapterIndex].allImagesWithIn
-        };
-        dispatch({ type: 'epub/setImgPickerData', payload: imgData });
-=======
   const handleSave = (val) => {
+    console.log(openModalIndex);
     if (typeof onInsert === 'function' && val) {
       onInsert(openModalIndex)(val);
     }
@@ -89,16 +47,21 @@ function INoteChapter ({
   };
     
    
-  const handleSaveImage = (val) => {
-    handleSave(new EPubImageData(val).toObject());
+  const handleSaveImage = (itemIdx) => (val) => {
+    console.log(itemIdx);
+    let imageval = new EPubImageData(val).toObject();
+    if (typeof onInsert === 'function' && imageval) {
+      onInsert(itemIdx)(imageval);
+    }
   };
 
   const handleOpenImgPicker = (itemIdx) => {
-    setOpenModalIndex(itemIdx)
+    console.log(itemIdx);
+    setOpenModalIndex(itemIdx);
     const imgData = {
-    // screenshots: imgSrc,
-    onSave: handleSaveImage,
-    // chapterScreenshots: epub.chapters[subChapterIndex].allImagesWithIn
+    
+    onSave: handleSaveImage(itemIdx),
+    
     };
     dispatch({ type: 'epub/setImgPickerData', payload: imgData });
   }
@@ -162,7 +125,6 @@ function INoteChapter ({
     dispatch({
       type: 'epub/updateEpubData', payload: {
         action: 'saveChapterTitle', payload: { chapterIdx: chIdx, value }
->>>>>>> 796c44bf3c053d30ecb27cc68f4f29f9410e1f87
     }
   })
 
@@ -175,84 +137,11 @@ function INoteChapter ({
     })
   };
 
-<<<<<<< HEAD
-    // Buttons and onClick Functions 
-
-    const btnProps = {
-        round: true,
-        uppercase: true,
-        classNames: 'item-action-btn',
-        color: 'teal transparent'
-    };
-
-    // Split Button 
-    const splitBtnElement = (itemIdx) => {
-        return altEl(Button, canSplit, {
-            ...btnProps,
-            text: 'Split Chapter',
-            icon: 'unfold_more',
-            // onClick: handleSplitChapter(itemIdx)
-
-    })};
-
-    // Add Image Button
-    const addImgElement = (itemIdx) => {
-        return altEl(Button, true, {
-            ...btnProps,
-            text: 'Add Image',
-            icon: 'image',
-
-            onClick: () => handleOpenImgPicker(itemIdx)
-    })};
-
-  
-
-    // Add Text Button 
-    function addTextElement(itemIdx) {
-        // setOpenModalIndex(itemIdx);
-
-
-        return altEl(Button, true, {
-            ...btnProps,
-            text: 'Add Text',
-            icon: 'add',
-            onClick: () => handleOpenMDEditor(itemIdx)
-            // onClick: handleOpenMDEditor
-
-    })};
-
-    // New Subchapter Button 
-    const splitSChBtnElement = (itemIdx) => {
-        return altEl(Button, canSplitSubChapter, {
-            ...btnProps,
-            text: 'New Sub-Chapter',
-            icon: 'subdirectory_arrow_right',
-            // onClick: splitSubChapter
-    })};
-
-    // Subdivide Button 
-    const subdivideBtnElement = (itemIdx) => {
-        return altEl(Button, canSubdivide, {
-            ...btnProps,
-            text: 'subdivide',
-            icon: 'subdirectory_arrow_right',
-            // onClick: subdivideChapter
-    })};
-
-    // DISPATCH FUNCTIONS 
-    // Save Chapter Title Handler 
-    const saveChapterTitle = value =>
-        dispatch({
-          type: 'epub/updateEpubData', payload: {
-            action: 'saveChapterTitle', payload: { chapterIdx: chIdx, value }
-        }
-=======
   const onTextChange = (index) => (val) => {  
     dispatch({
       type: 'epub/updateEpubData', payload: {
         action: val ? 'setChapterContentAtChapterIdx' : 'removeChapterContentAtChapterIdx', payload: { chapterIdx: chIdx, contentIdx: index, value: val }
       }
->>>>>>> 796c44bf3c053d30ecb27cc68f4f29f9410e1f87
     })
   };
 

From bb8cfb21d2487794e13cc72a5c24975546d567b5 Mon Sep 17 00:00:00 2001
From: alan3tao <alan3tao@gmail.com>
Date: Wed, 6 Sep 2023 17:35:47 -0500
Subject: [PATCH 36/39] fix linter issues

---
 src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 3cf819e54..8cae7a220 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -39,7 +39,6 @@ function INoteChapter ({
 
 
   const handleSave = (val) => {
-    console.log(openModalIndex);
     if (typeof onInsert === 'function' && val) {
       onInsert(openModalIndex)(val);
     }
@@ -48,7 +47,6 @@ function INoteChapter ({
     
    
   const handleSaveImage = (itemIdx) => (val) => {
-    console.log(itemIdx);
     let imageval = new EPubImageData(val).toObject();
     if (typeof onInsert === 'function' && imageval) {
       onInsert(itemIdx)(imageval);
@@ -56,7 +54,6 @@ function INoteChapter ({
   };
 
   const handleOpenImgPicker = (itemIdx) => {
-    console.log(itemIdx);
     setOpenModalIndex(itemIdx);
     const imgData = {
     

From 40504b758e9936a2e950cce0de94fc2052806e90 Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Thu, 7 Sep 2023 16:28:53 -0500
Subject: [PATCH 37/39] fix minor nitpicks

---
 src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index 8cae7a220..5a6ee4b0e 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -54,11 +54,8 @@ function INoteChapter ({
   };
 
   const handleOpenImgPicker = (itemIdx) => {
-    setOpenModalIndex(itemIdx);
     const imgData = {
-    
-    onSave: handleSaveImage(itemIdx),
-    
+      onSave: handleSaveImage(itemIdx),
     };
     dispatch({ type: 'epub/setImgPickerData', payload: imgData });
   }

From 76c7df6719948329e76151802ab6ce67875e066d Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Thu, 7 Sep 2023 19:55:48 -0500
Subject: [PATCH 38/39] add beta text to viewdropdown and remove unimplmented
 buttons

---
 src/screens/EPub/components/EPubHeader/ViewDropdown.js       | 2 +-
 src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/screens/EPub/components/EPubHeader/ViewDropdown.js b/src/screens/EPub/components/EPubHeader/ViewDropdown.js
index 347d1b461..4beadb0ac 100644
--- a/src/screens/EPub/components/EPubHeader/ViewDropdown.js
+++ b/src/screens/EPub/components/EPubHeader/ViewDropdown.js
@@ -30,7 +30,7 @@ function ViewDropdown({ view, dispatch }) {
     },
     {
       value: epub.const.EditINote,
-      text: 'Edit INote',
+      text: 'Edit INote (beta)',
       icon: 'edit'
     }
   ];
diff --git a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
index afdc428e2..fd6a6ae4d 100644
--- a/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
+++ b/src/screens/EPub/views/EditINote/INoteEditor/INoteChapter.js
@@ -193,8 +193,8 @@ function INoteChapter ({
             <CTFragment className="item-actions">
               {mergeChapterBtnElement(itemIdx)}
               {splitBtnElement(itemIdx)}
-              {splitSChBtnElement(itemIdx)}
-              {subdivideBtnElement(itemIdx)}
+              {/* {splitSChBtnElement(itemIdx)} */}
+              {/* {subdivideBtnElement(itemIdx)} */}
               {addImgElement(itemIdx)}
               {addTextElement(itemIdx)}
             </CTFragment>

From 138c102f9287bb81d3127db4d212b3911458addc Mon Sep 17 00:00:00 2001
From: sujitv19196 <sujit5817@gmail.com>
Date: Fri, 8 Sep 2023 14:56:34 -0500
Subject: [PATCH 39/39] fix compile error

---
 src/screens/Watch/Components/CTPopup/CTPopup.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/screens/Watch/Components/CTPopup/CTPopup.jsx b/src/screens/Watch/Components/CTPopup/CTPopup.jsx
index 495334b42..1508c585e 100644
--- a/src/screens/Watch/Components/CTPopup/CTPopup.jsx
+++ b/src/screens/Watch/Components/CTPopup/CTPopup.jsx
@@ -14,7 +14,7 @@ import GlossaryPanel from './GlossaryPanel';
 const ASLVideoPlayer = (word, videoURL, source) => {
   return (
     <TabPanel>
-      <strong>{`${word} (Source: ${source})`}</strong><br></br><br></br>
+      <strong>{`${word} (Source: ${source})`}</strong><br /><br />
       {videoURL==='' ? (<span>video not found</span>) 
       : 
       (<video