Feature/sc 27385/publish settings2

static/css/s2.css

@@ -8115,7 +8115,14 @@ a .button:hover {
   width: -moz-fit-content;
   width: fit-content;
 }
-
+.button.small.publish {
+  color: #666666;
+  background-color: white;
+  font-weight: 500;
+  min-height: 31px;
+  height: 31px;
+  padding: 0 10px;
+}
 .headerWithAdminButtonsContainer{
   display: flex;
   justify-content: space-between;
@@ -8549,6 +8556,7 @@ a.sheetAuthorName:hover {
   flex: 1 0 95%;
   text-align: initial;
 }
+
 .sheetMetaDataBox .title:empty:before {
   content: "Untitled";
   color: #999;
@@ -8568,14 +8576,25 @@ a.sheetAuthorName:hover {
 }
 .publishBox {
   text-align: start;
-  background-color: #EDEDEC;
   border-radius: 6px;
   padding: 10px 20px;
   max-width: 540px;
+  width: 500px;
   margin: 20px -20px;
   font-size: 16px;
   color: #666;
 }
+.publishBox .publishLabel {
+  --english-font: var(--english-sans-serif-font-family);
+  --hebrew-font: var(--hebrew-sans-serif-font-family);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  color: var(--dark-grey);
+  margin-bottom: 10px;
+}
 
 div.transparentBackground.publishBox {
   background-color: inherit;
@@ -8597,6 +8616,38 @@ div.transparentBackground.publishBox {
 .publishBox textarea.error {
   border: 1px solid red;
 }
+.sheetMetaDataBox .publishBox .react-tags__selected {
+  display: inline;
+}
+.sheetMetaDataBox .publishBox .react-tags__selected-tag {
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0 6px 6px 0;
+  padding: 6px 8px;
+  border: none;
+  border-radius: 6px;
+  background: #FFFFFF;
+  color: #000;
+  /* match the font styles */
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+.sheetMetaDataBox .publishBox textarea, .sheetMetaDataBox .publishBox input, .sheetMetaDataBox .publishBox .react-tags {
+  border-radius: 6px;
+  border: none;
+  width: 98%;
+  padding: 7px;
+  background: #EDEDEC;
+  --english-font: var(--english-sans-serif-font-family);
+  --hebrew-font: var(--hebrew-sans-serif-font-family);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 18.75px;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  margin-bottom: 10px;
+}
 .publishBox p strong {
   color: black;
   font-weight: 400;
@@ -8620,26 +8671,6 @@ div.transparentBackground.publishBox {
 .publishBox .smallText {
   color: #666666
 }
-.publishBox textarea {
-  width: 100%;
-  height: 100px;
-  resize: none;
-  box-sizing: border-box;
-  font-size: 16px;
-  color: #000;
-  border: none;
-  border-radius: 6px;
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
-  font-style: normal;
-  padding: 10px 10px 4px 10px;
-  margin-bottom: 0px;
-}
-.publishBox textarea::placeholder {
-  font-size: 16px;
-  color: #666;
-  font-style: normal;
-  font-family: var(--english-sans-serif-font-family);
-}
 .publishBox .react-tags {
   position: relative;
   padding: 10px 10px 4px 10px;
@@ -10526,6 +10557,8 @@ span.purim-emoji img{
 }
 .sheetContent .spacer:only-of-type.empty {
   line-height: inherit;
+  --english-font: var(--english-sans-serif-font-family);
+  --hebrew-font: var(--hebrew-sans-serif-font-family);
 }
 .sheetItem:only-of-type.empty .SheetOutsideText:before,
 .sheetContent .spacer:only-of-type.empty:before {
@@ -14101,8 +14134,8 @@ span.ref-link-color-3 {color: blue}
 }
 .sheetsInPanel .headerDropdownMenu {
   min-width: 50%;
-  margin-top: 10px;
-  color: #666;
+  margin-top: 7px;
+  color: var(--dark-grey);
   cursor: pointer;
   position: relative;
   -webkit-margin-start: 20px;

static/js/Editor.jsx

@@ -10,9 +10,7 @@ import * as sheetsUtils from './sefaria/sheetsUtils'
 
 import {
     SheetMetaDataBox,
-    SheetAuthorStatement,
     SheetTitle,
-    CollectionStatement,
     InterfaceText,
     Autocompleter,
 } from './Misc';
@@ -21,6 +19,7 @@ import {ProfilePic} from "./ProfilePic";
 import classNames from 'classnames';
 import $ from "./sefaria/sefariaJquery";
 import ReactDOM from "react-dom";
+import {SheetOptions} from "./sheets/SheetOptions";
 
 // Mapping from Sheet doc format source types to Slate block element types
 const sheet_item_els = {
@@ -597,7 +596,7 @@ function transformSheetJsonToSlate(sheet) {
     let initValue = [
         {
             type: 'Sheet',
-            status: sheet.status,
+            status: status,
             views: sheet.views,
             tags: sheet.tags || [],
             includedRefs: sheet.includedRefs,
@@ -2546,24 +2545,20 @@ const BlockButton = ({format, icon}) => {
 }
 
 const SefariaEditor = (props) => {
-    const editorContainer = useRef();
+    const editorContainer = useRef(null);
     const [sheet, setSheet] = useState(props.data);
+    const [status, setStatus] = useState(sheet?.status || "unlisted");
     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 [canUseDOM, setCanUseDOM] = useState(false);
     const [lastSelection, setLastSelection] = useState(null)
     const [readyForNormalize, setReadyForNormalize] = useState(false);
     const [summary, setSummary] = useState(sheet.summary || "");
     const [title, setTitle] = useState(sheet.title || "");
 
-    useEffect(() => {
-        saveDocument(currentDocument);
-    }, [title, summary]);
-
     useEffect(
         () => {
             if (!canUseDOM) {
@@ -2572,7 +2567,7 @@ const SefariaEditor = (props) => {
 
             setUnsavedChanges(true);
             // Update debounced value after delay
-            const handler = setTimeout(() => {
+            const handler = setTimeout( () => {
                 saveDocument(currentDocument);
             }, 500);
 
@@ -2583,7 +2578,7 @@ const SefariaEditor = (props) => {
                 clearTimeout(handler);
             };
         },
-        [currentDocument[0].children[0]] // Only re-call effect if value or delay changes
+        [currentDocument[0].children[0], title, summary] // Only re-call effect if value or delay changes
     );
 
     useEffect(
@@ -2599,6 +2594,7 @@ const SefariaEditor = (props) => {
 
             //TODO: Check that we still need/want this temporary analytics tracking code
             try {hj('event', 'using_new_editor');} catch {console.error('hj failed')}
+
         }, []
     )
 
@@ -2633,7 +2629,7 @@ const SefariaEditor = (props) => {
                 if (node.text && props.divineNameReplacement) {
                     const newStr = replaceDivineNames(node.text, props.divineNameReplacement)
                     if (newStr != node.text) {
-                        Transforms.insertText(editor, newStr, { at: path })
+                        Transforms.insertText(editor, newStr, {at: path})
                     }
                 }
             }
@@ -2644,8 +2640,8 @@ const SefariaEditor = (props) => {
             const temp_select = editor.selection
 
             Transforms.select(editor, {
-              anchor: {path: [0, 0], offset: 0},
-              focus: {path: [0, 0], offset: 0},
+                anchor: {path: [0, 0], offset: 0},
+                focus: {path: [0, 0], offset: 0},
             });
 
             Transforms.select(editor, temp_select)
@@ -2768,7 +2764,7 @@ const SefariaEditor = (props) => {
 
         });
         let sheet = {
-            status: doc.status,
+            status: status,
             id: doc.id,
             promptedToPublish: doc.promptedToPublish,
             lastModified: lastModified,
@@ -2780,28 +2776,33 @@ const SefariaEditor = (props) => {
             sources: sources.filter(x => !!x),
             nextNode: doc.nextNode,
         };
-
-        return JSON.stringify(sheet);
-
+        return sheet;
     }
 
-
-    function saveDocument(doc) {
+    function getLastModified() {
+      return Sefaria.sheets._loadSheetByID[props.data.id]?.dateModified || props.data.dateModified;
+    }
+    async function saveDocument(doc) {
+        const lastModified = getLastModified();
         const json = saveSheetContent(doc[0], lastModified);
         if (!json) {
             return
         }
         // console.log('saving...');
+        try {
+            await postSheet(json);
+        } catch(error) {
+            console.log(`Error: ${error.message}`)
+        }
+    }
 
-        $.post("/api/sheets/", {"json": json}, res => {
-            setlastModified(res.dateModified);
-            // console.log("saved at: "+ res.dateModified);
-            setUnsavedChanges(false);
-            setTitle(res.title);
-            setSummary(res.summary);
-            const updatedSheet = {...Sefaria.sheets._loadSheetByID[doc[0].id], ...res};
-            Sefaria.sheets._loadSheetByID[doc[0].id] = updatedSheet
-        });
+    const postSheet = async (sheet) => {
+        const data = await Sefaria.apiRequestWithBody("/api/sheets/", null, sheet, "POST");
+        setStatus(data.status);
+        setTitle(data.title);
+        setSummary(data.summary);
+        const updatedSheet = {...Sefaria.sheets._loadSheetByID[props.data.id], ...data};
+        Sefaria.sheets._loadSheetByID[props.data.id] = updatedSheet;
     }
 
     function onChange(value) {
@@ -2950,18 +2951,26 @@ const SefariaEditor = (props) => {
         () => withTables(withSefariaSheet(withLinks(withHistory(withReact(createEditor()))))),
         []
     );
-
+    const sheetOptions = <SheetOptions toggleSignUpModal={props.toggleSignUpModal}
+                                       sheetID={sheet.id}
+                                       postSheet={postSheet}
+                                       historyObject={props.historyObject}
+                                       editable={true}
+                                       authorUrl={sheet.ownerProfileUrl}
+                                       status={status}
+                                       handleCollectionsChange={props.handleCollectionsChange}
+                                       />;
     return (
           <div ref={editorContainer} onClick={props.handleClick} className="text">
-              <SheetMetaDataBox authorStatement={props.authorStatement}
-                            authorUrl={props.authorUrl}
-                            authorImage={props.authorImage}
-                            title={props.title}
-                            summary={props.summary}
+              <SheetMetaDataBox authorStatement={sheet.ownerName}
+                            authorUrl={sheet.ownerProfileUrl}
+                            authorImage={sheet.ownerImageUrl}
+                            title={title}
+                            summary={summary}
                             editable={true}
                             titleCallback={(newTitle) => setTitle(newTitle)}
                             summaryCallback={(newSummary) => setSummary(newSummary)}
-                            sheetOptions={props.sheetOptions}/>
+                            sheetOptions={sheetOptions}/>
           {
           /* debugger */
 

static/js/NavSidebar.jsx

@@ -720,7 +720,6 @@ const GetStartedButton = () => {
     return <Button className="getStartedSheets" onClick={() => window.location.href=href}>Get Started</Button>;
 }
 const CreateSheetsButton = () => {
-  // #sheetsButton
   return <Button icon={"/static/icons/new-sheet-black.svg"} className="small" onClick={() => window.location.href="/sheets/new"}>Create</Button>
 }
 const CreateASheet = () => (

static/js/UserProfile.jsx

@@ -574,7 +574,7 @@ const UserBackground = ({profile: p, showBio}) => {
       </span>
         );
     }
-    const aboutMe = <div className="title sub-title" dangerouslySetInnerHTML={{ __html: p.bio }}/>;
+    const aboutMe = <div className="title sub-title" dangerouslySetInnerHTML={{ __html: p.bio }}/>;  // Bio/"About Me" is the only field in profile with HTML
     const subTitle = <div className="title sub-title">
         <span>{p.position}</span>
         {p.position && p.organization ? <span>{Sefaria._(" at ")}</span> : null}