Reload editor content from db when source is added to sheet from sidebar

Sefaria · May 1, 2022 · 0c6edce · 0c6edce
1 parent c9186ba
commit 0c6edce
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 28 deletions.
diff --git a/static/js/AddToSourceSheet.jsx b/static/js/AddToSourceSheet.jsx
@@ -142,6 +142,8 @@ class AddToSourceSheetBox extends Component {
     }
     Sefaria.sheets.updateUserSheets(this.state.selectedSheet, Sefaria._uid, true);
     this.setState({showConfirm: true});
+    const channel = new BroadcastChannel('refresh-editor');
+    channel.postMessage("refresh");
   }
   makeTitleRef(){
     const refTitles = (this.props.srefs.length > 0 && (!this.props.srefs[0].startsWith("Sheet"))) ? {

diff --git a/static/js/Editor.jsx b/static/js/Editor.jsx
@@ -1559,7 +1559,6 @@ const withSefariaSheet = editor => {
     editor.convertEmptyParagraphToSpacer = (node, path) => {
         if (node.type === "paragraph") {
             if (Node.string(node) === "" && node.children.length <= 1) {
-                console.log('spacer?')
                 Transforms.setNodes(editor, {type: "spacer"}, {at: path});
             }
         }
@@ -2444,15 +2443,15 @@ const BlockButton = ({format, icon}) => {
 
 const SefariaEditor = (props) => {
     const editorContainer = useRef();
-    const sheet = props.data;
+    const [sheet, setSheet] = useState(props.data);
     const initValue = [{type: "sheet", children: [{text: ""}]}];
     const renderElement = useCallback(props => <Element {...props} />, []);
     const [value, setValue] = useState(initValue);
     const [currentDocument, setCurrentDocument] = useState(initValue);
     const [unsavedChanges, setUnsavedChanges] = useState(false);
     const [lastModified, setlastModified] = useState(props.data.dateModified);
-    const [dropZone, setDropZone] = useState(null)
     const [canUseDOM, setCanUseDOM] = useState(false);
+    const [lastSelection, setLastSelection] = useState(null)
     const [readyForNormalize, setReadyForNormalize] = useState(false);
 
     useEffect(
@@ -2479,43 +2478,40 @@ const SefariaEditor = (props) => {
 
     useEffect(
         () => {
-            const removeStyles = editorContainer.current.querySelectorAll(".draggedOver");
-            for (let nodeToCheck of removeStyles) {
-                nodeToCheck.classList.remove("draggedOver", "draggedOverAfter", "draggedOverBefore")
-            }
+            /* normalize on load */
+            setCanUseDOM(true)
 
-            if (dropZone) {
-                dropZone["node"].classList.add("draggedOver");
-                dropZone["node"].classList.add(dropZone["dropBefore"] ? "draggedOverAfter" : "draggedOverBefore");
-            }
 
-        }, [dropZone]
-    )
+            const channel = new BroadcastChannel('refresh-editor');
+            channel.addEventListener('message', event => {
+                reloadFromDb()
+            });
 
+            //TODO: Check that we still need/want this temporary analytics tracking code
+            try {hj('event', 'using_new_editor');} catch {console.error('hj failed')}
+        }, []
+    )
 
     useEffect(
         () => {
-            /* normalize on load */
-            setCanUseDOM(true)
+            setLastSelection(editor.selection)
             setValue(transformSheetJsonToSlate(sheet))
+            editor.children = transformSheetJsonToSlate(sheet)
+            editor.onChange()
             setReadyForNormalize(true)
-
-            //TODO: Check that we still need/want this temporary analytics tracking code
-            try {hj('event', 'using_new_editor');} catch {console.error('hj failed')}
-        }, []
+        }, [sheet]
     )
 
     useEffect(
         () => {
             if (readyForNormalize) {
                 Editor.normalize(editor, {force: true});
-
-                //set cursor to top of doc
-                Transforms.select(editor, {
-                  anchor: {path: [0, 0], offset: 0},
-                  focus: {path: [0, 0], offset: 0},
-                });
-
+                setReadyForNormalize(false)
+            }
+            else {
+                //set cursor to previous location or top of doc
+                const newSelect = !!lastSelection ? lastSelection : {anchor: {path: [0, 0], offset: 0},focus: {path: [0, 0], offset: 0}}
+                Transforms.select(editor, newSelect);
             }
         }, [readyForNormalize]
     )
@@ -2872,6 +2868,13 @@ const SefariaEditor = (props) => {
 
     };
 
+    const reloadFromDb = () => {
+        console.log("Refreshing sheet from Db")
+        Sefaria.sheets.loadSheetByID(sheet.id, (data)=>{
+            setSheet(data)
+        }, true)
+    }
+
     const updateSidebar = (sheetNode, sheetRef) => {
       let source = {
           'node': sheetNode,
@@ -2915,7 +2918,6 @@ const SefariaEditor = (props) => {
         }
 
             <button className="editorSidebarToggle" onClick={(e)=>onEditorSidebarToggleClick(e) } aria-label="Click to open the sidebar" />
-
         <SheetMetaDataBox>
             <SheetTitle tabIndex={0} title={sheet.title} editable={true} blurCallback={() => saveDocument(currentDocument)}/>
             <SheetAuthorStatement

diff --git a/static/js/Misc.jsx b/static/js/Misc.jsx
@@ -1926,7 +1926,7 @@ const NBox = ({ content, n, stretch, gap=0  }) => {
   return (
     <div className="gridBox">
       {rows.map((row, i) => (
-      <div className="gridBoxRow" key={i} style={{"gap": gap, "margin-top": gap}}>
+      <div className="gridBoxRow" key={i} style={{"gap": gap, "marginTop": gap}}>
         {row.pad(stretch ? row.length : n, "").map((item, j) => (
           <div className={classNames({gridBoxItem: 1, placeholder: !item})} key={`gridItem|${j}`}>{item}</div>
         ))}