From dfabef44f279c19737cd175f1692421365d535b8 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Tue, 23 Jan 2024 02:28:20 +0500
Subject: [PATCH 01/11] Cleanup after post

---
 apps/builddao/widget/Compose.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
index 4c388232..acd27118 100644
--- a/apps/builddao/widget/Compose.jsx
+++ b/apps/builddao/widget/Compose.jsx
@@ -158,6 +158,8 @@ const postToCustomFeed = ({ feed, text, labels }) => {
     force: true,
     onCommit: () => {
       // console.log(`Commited ${feed}: #${postId}`);
+      setPostContent("");
+      Storage.privateSet(draftKey, draft || props.template);
     },
     onCancel: () => {
       // console.log(`Cancelled ${feed}: #${postId}`);
@@ -463,6 +465,7 @@ return (
         )}
       </Button>
       <Button
+        disabled={postContent === "" || postContent === props.template}
         variant="primary"
         style={{ fontSize: 14 }}
         onClick={() =>

From 4a6e71b79c9563fedf998bfd87e2b6f2efef7079 Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Mon, 22 Jan 2024 22:57:33 -0500
Subject: [PATCH 02/11] adds test type

---
 apps/builddao/widget/Compose.jsx | 3 +--
 apps/builddao/widget/Feed.jsx    | 8 ++++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
index acd27118..daa7aaa4 100644
--- a/apps/builddao/widget/Compose.jsx
+++ b/apps/builddao/widget/Compose.jsx
@@ -157,9 +157,8 @@ const postToCustomFeed = ({ feed, text, labels }) => {
   return Social.set(data, {
     force: true,
     onCommit: () => {
-      // console.log(`Commited ${feed}: #${postId}`);
       setPostContent("");
-      Storage.privateSet(draftKey, draft || props.template);
+      Storage.privateSet(draftKey, props.template || "");
     },
     onCancel: () => {
       // console.log(`Cancelled ${feed}: #${postId}`);
diff --git a/apps/builddao/widget/Feed.jsx b/apps/builddao/widget/Feed.jsx
index 0fb4ac77..f1c47b1a 100644
--- a/apps/builddao/widget/Feed.jsx
+++ b/apps/builddao/widget/Feed.jsx
@@ -138,6 +138,7 @@ const feeds = {
     label: "Task",
     icon: "bi-check-lg",
     name: "task",
+    hashtag: "task",
     template: `## TASK TITLE
 (posted via [Build DAO Gateway](https://nearbuilders.org/feed?hashtag=task))
 
@@ -148,6 +149,13 @@ const feeds = {
 - [Provide any context or details]
 `,
   },
+  test: {
+    label: "Test",
+    icon: "bi-tools",
+    name: "test",
+    hashtag: "test",
+    template: ``,
+  },
   bookmarks: {
     label: "Bookmarks",
     icon: "bi-bookmark",

From bf85cb319ef8fbf526c532b67715282f9522c1a1 Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <meghadev1901@gmail.com>
Date: Mon, 22 Jan 2024 18:38:46 +0530
Subject: [PATCH 03/11] added autocomplete and images support

---
 apps/builddao/widget/Compose.jsx              | 287 ++++++++++--------
 .../widget/components/AccountAutocomplete.jsx | 147 +++++++++
 .../widget/components/MarkdownEditor.jsx      | 246 +++++++++++++++
 3 files changed, 546 insertions(+), 134 deletions(-)
 create mode 100644 apps/builddao/widget/components/AccountAutocomplete.jsx
 create mode 100644 apps/builddao/widget/components/MarkdownEditor.jsx

diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
index daa7aaa4..839566d9 100644
--- a/apps/builddao/widget/Compose.jsx
+++ b/apps/builddao/widget/Compose.jsx
@@ -5,6 +5,8 @@ Button = Button || (() => <></>);
 
 const draftKey = props.feed.name || "draft";
 const draft = Storage.privateGet(draftKey);
+const profile = Social.getr(`${context.accountId}/profile`);
+const autocompleteEnabled = true;
 
 if (draft === null) {
   return "";
@@ -14,6 +16,11 @@ const [view, setView] = useState("editor");
 const [postContent, setPostContent] = useState("");
 const [hideAdvanced, setHideAdvanced] = useState(true);
 const [labels, setLabels] = useState([]);
+const [uploadedImage, setImage] = useState({});
+const [showAccountAutocomplete, setShowAccountAutocomplete] = useState(false);
+const [mentionsArray, setMentionsArray] = useState([]);
+const [mentionInput, setMentionInput] = useState(null);
+const [handler, setHandler] = useState("update");
 
 setPostContent(draft || props.template);
 
@@ -23,17 +30,7 @@ function generateUID() {
   return randomNumber.toString(16).padStart(8, "0");
 }
 
-function tagsFromLabels(labels) {
-  return labels.reduce(
-    (newLabels, label) => ({
-      ...newLabels,
-      [label]: "",
-    }),
-    {}
-  );
-}
-
-const extractMentions = (text) => {
+function extractMentions(text) {
   const mentionRegex =
     /@((?:(?:[a-z\d]+[-_])*[a-z\d]+\.)*(?:[a-z\d]+[-_])*[a-z\d]+)/gi;
   mentionRegex.lastIndex = 0;
@@ -49,7 +46,7 @@ const extractMentions = (text) => {
     }
   }
   return [...accountIds];
-};
+}
 
 const extractHashtags = (text) => {
   const hashtagRegex = /#(\w+)/gi;
@@ -73,8 +70,8 @@ const extractMentionNotifications = (text, item) =>
       key: accountId,
       value: {
         type: "mention",
-        item,
-      },
+        item
+      }
     }));
 
 function checkAndAppendHashtag(input, target) {
@@ -102,6 +99,12 @@ const postToCustomFeed = ({ feed, text, labels }) => {
     text = checkAndAppendHashtag(text, hashtag);
   });
 
+  const content = {
+    type: "md",
+    image: uploadedImage.cid ? { ipfs_cid: uploadedImage.cid } : undefined,
+    text: text
+  };
+
   const data = {
     // [feed.name]: {
     //   [postId]: {
@@ -118,21 +121,20 @@ const postToCustomFeed = ({ feed, text, labels }) => {
     // },
     post: {
       main: JSON.stringify({
-        type: "md",
-        text,
+        content
         // tags: tagsFromLabels(labels),
         // postType: feed.name,
-      }),
+      })
     },
     index: {
-      post: JSON.stringify({ key: "main", value: { type: "md" } }),
+      post: JSON.stringify({ key: "main", value: { type: "md" } })
       // every: JSON.stringify({ key: feed.name, value: { type: "md" } }),
-    },
+    }
   };
 
   const item = {
     type: "social",
-    path: `${context.accountId}/post/main`,
+    path: `${context.accountId}/post/main`
   };
 
   const notifications = extractMentionNotifications(text, item);
@@ -149,7 +151,7 @@ const postToCustomFeed = ({ feed, text, labels }) => {
     data.index.hashtag = JSON.stringify(
       hashtags.map((hashtag) => ({
         key: hashtag,
-        value: item,
+        value: item
       }))
     );
   }
@@ -162,10 +164,47 @@ const postToCustomFeed = ({ feed, text, labels }) => {
     },
     onCancel: () => {
       // console.log(`Cancelled ${feed}: #${postId}`);
-    },
+    }
   });
 };
 
+function textareaInputHandler(value) {
+  const words = value.split(/\s+/);
+  const allMentiones = words
+    .filter((word) => word.startsWith("@"))
+    .map((mention) => mention.slice(1));
+  const newMentiones = allMentiones.filter(
+    (item) => !mentionsArray.includes(item)
+  );
+  setMentionInput(newMentiones?.[0] ?? "");
+  setMentionsArray(allMentiones);
+  setShowAccountAutocomplete(newMentiones?.length > 0);
+  setPostContent(value);
+  setHandler("update");
+  Storage.privateSet(draftKey, value || "");
+}
+
+function autoCompleteAccountId(id) {
+  let currentIndex = 0;
+  const updatedDescription = postContent.replace(
+    /(?:^|\s)(@[^\s]*)/g,
+    (match) => {
+      if (currentIndex === mentionsArray.indexOf(mentionInput)) {
+        currentIndex++;
+        return ` @${id}`;
+      } else {
+        currentIndex++;
+        return match;
+      }
+    }
+  );
+  setPostContent(updatedDescription);
+  setShowAccountAutocomplete(false);
+  setMentionInput(null);
+  setHandler("autocompleteSelected");
+  Storage.privateSet(draftKey, value || "");
+}
+
 const PostCreator = styled.div`
   display: flex;
   flex-direction: column;
@@ -176,133 +215,77 @@ const PostCreator = styled.div`
   border-radius: 12px;
 
   margin-bottom: 1rem;
-`;
-
-const TextareaWrapper = styled.div`
-  display: grid;
-  vertical-align: top;
-  align-items: center;
-  position: relative;
-  align-items: stretch;
 
-  textarea {
+  .upload-image-button {
     display: flex;
     align-items: center;
-    transition: all 0.3s ease;
-  }
-
-  textarea::placeholder {
-    padding-top: 4px;
-    font-size: 20px;
-  }
-
-  textarea:focus::placeholder {
-    font-size: inherit;
-    padding-top: 0px;
-  }
-
-  &::after,
-  textarea,
-  iframe {
-    width: 100%;
-    min-width: 1em;
-    height: unset;
-    min-height: 3em;
-    font: inherit;
-    margin: 0;
-    resize: none;
-    background: none;
-    appearance: none;
-    border: 0px solid #eee;
-    grid-area: 1 / 1;
-    overflow: hidden;
-    outline: none;
-  }
+    justify-content: center;
+    background: #f1f3f5;
+    color: #11181c;
+    border-radius: 40px;
+    height: 40px;
+    min-width: 40px;
+    font-size: 0;
+    border: none;
+    cursor: pointer;
+    transition: background 200ms, opacity 200ms;
+
+    &::before {
+      font-size: 16px;
+    }
 
-  iframe {
-    padding: 0;
-  }
+    &:hover,
+    &:focus {
+      background: #d7dbde;
+      outline: none;
+    }
 
-  textarea:focus,
-  textarea:not(:empty) {
-    border-bottom: 1px solid #eee;
-    min-height: 5em;
-  }
+    &:disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
 
-  &::after {
-    content: attr(data-value) " ";
-    visibility: hidden;
-    white-space: pre-wrap;
-  }
-  &.markdown-editor::after {
-    padding-top: 66px;
-    font-family: monospace;
-    font-size: 14px;
+    span {
+      margin-left: 12px;
+    }
   }
 `;
 
 const MarkdownEditor = `
-  html {
-    background: #23242b;
-  }
-
   * {
     border: none !important;
   }
 
-  .rc-md-editor {
-    background: #4f5055;
-    border-top: 1px solid #4f5055 !important;
+  body  {
+    background: #23242b !important;
+    color: #fff !important;
+    font-family: sans-serif !important;
+    font-size: 1rem;
+    border: 1px solid #4f5055 !important;
     border-radius: 8px;
   }
 
-  .editor-container {
-    background: #4f5055;
-  }
-  
-  .drop-wrap {
-    top: -110px !important;
-    border-radius: 0.5rem !important;
-  }
-
-  .header-list {
-    display: flex;
-    align-items: center;
+  .CodeMirror-scroll{
+    background: #23242b !important;
+    color: #fff !important;
   }
 
-  textarea {
+  .CodeMirror{
     background: #23242b !important;
     color: #fff !important;
-
-    font-family: sans-serif !important;
-    font-size: 1rem;
-
-    border: 1px solid #4f5055 !important;
-    border-top: 0 !important;
-    border-radius: 0 0 8px 8px;
+    border-top: 1px solid #4f5055 !important;
   }
 
-  .rc-md-navigation {
-    background: #23242b !important;
-    border: 1px solid #4f5055 !important;
-    border-top: 0 !important;
-    border-bottom: 0 !important;
-    border-radius: 8px 8px 0 0;
-  
-    i {
-      color: #cdd0d5;
-    }
+  .editor-toolbar a {
+    color:inherit !important;
   }
 
-  .editor-container {
-    border-radius: 0 0 8px 8px;
+  .editor-toolbar a.active, a:hover {
+    color:#2c3e50!important;
   }
 
-  .rc-md-editor .editor-container .sec-md .input {
-    overflow-y: auto;
-    padding: 8px !important;
-    line-height: normal;
-    border-radius: 0 0 8px 8px;
+  .CodeMirror-cursor {
+    border-left:1px solid white !important;
   }
 `;
 
@@ -420,34 +403,70 @@ return (
     {avatarComponent}
     <div style={{ border: "none" }}>
       {view === "editor" ? (
-        <TextareaWrapper
-          className="markdown-editor"
-          data-value={postContent || ""}
-          key={props.feed.name}
-        >
+        <div>
           <Widget
-            src="mob.near/widget/MarkdownEditorIframe"
+            src={"buildhub.near/widget/components.MarkdownEditor"}
             props={{
-              initialText: postContent,
-              embedCss: MarkdownEditor,
-              onChange: (v) => {
-                setPostContent(v);
-                Storage.privateSet(draftKey, v || "");
+              data: { handler: handler, content: postContent },
+              onChange: (content) => {
+                textareaInputHandler(content);
               },
+              embedCss: MarkdownEditor,
+              alignToolItems: "left",
+              className: "w-100 bg-black",
+              toolbar: [
+                "heading",
+                "bold",
+                "italic",
+                "quote",
+                "code",
+                "link",
+                "unordered-list",
+                "ordered-list",
+                "checklist",
+                "mention"
+              ],
+              spellChecker: false
             }}
           />
-        </TextareaWrapper>
+          {autocompleteEnabled && showAccountAutocomplete && (
+            <Widget
+              src="buildhub.near/widget/components.AccountAutocomplete"
+              props={{
+                term: mentionInput,
+                onSelect: autoCompleteAccountId,
+                onClose: () => setShowAccountAutocomplete(false)
+              }}
+            />
+          )}
+        </div>
       ) : (
         <MarkdownPreview>
           <Widget
             src="devhub.near/widget/devhub.components.molecule.MarkdownViewer"
             props={{ text: postContent }}
           />
+          {uploadedImage.cid && (
+            <Widget
+              src="mob.near/widget/Image"
+              props={{
+                image: uploadedImage.cid
+                  ? { ipfs_cid: uploadedImage.cid }
+                  : undefined
+              }}
+            />
+          )}
         </MarkdownPreview>
       )}
     </div>
 
     <div className="d-flex gap-3 align-self-end">
+      {view === "editor" && (
+        <IpfsImageUpload
+          // image={uploadedImage}
+          className="upload-image-button bi bi-image"
+        />
+      )}
       <Button
         variant="outline"
         onClick={() => setView(view === "editor" ? "preview" : "editor")}
diff --git a/apps/builddao/widget/components/AccountAutocomplete.jsx b/apps/builddao/widget/components/AccountAutocomplete.jsx
new file mode 100644
index 00000000..5823f397
--- /dev/null
+++ b/apps/builddao/widget/components/AccountAutocomplete.jsx
@@ -0,0 +1,147 @@
+if (!context.accountId || !props.term) return <></>;
+
+let results = [];
+const filterAccounts = props.filterAccounts ?? []; //  hide certain accounts from the list
+const profilesData = Social.get("*/profile/name", "final") || {};
+const followingData = Social.get(
+  `${context.accountId}/graph/follow/**`,
+  "final"
+);
+if (!profilesData) return <></>;
+const profiles = Object.entries(profilesData);
+const term = (props.term || "").replace(/\W/g, "").toLowerCase();
+const limit = 5;
+
+for (let i = 0; i < profiles.length; i++) {
+  let score = 0;
+  const accountId = profiles[i][0];
+  const accountIdSearch = profiles[i][0].replace(/\W/g, "").toLowerCase();
+  const nameSearch = (profiles[i][1]?.profile?.name || "")
+    .replace(/\W/g, "")
+    .toLowerCase();
+  const accountIdSearchIndex = accountIdSearch.indexOf(term);
+  const nameSearchIndex = nameSearch.indexOf(term);
+
+  if (accountIdSearchIndex > -1 || nameSearchIndex > -1) {
+    score += 10;
+
+    if (accountIdSearchIndex === 0) {
+      score += 10;
+    }
+    if (nameSearchIndex === 0) {
+      score += 10;
+    }
+    if (followingData[accountId] === "") {
+      score += 30;
+    }
+
+    results.push({
+      accountId,
+      score
+    });
+  }
+}
+
+results.sort((a, b) => b.score - a.score);
+results = results.slice(0, limit);
+if (filterAccounts?.length > 0) {
+  results = results.filter((item) => !filterAccounts?.includes(item.accountId));
+}
+
+function onResultClick(id) {
+  props.onSelect && props.onSelect(id);
+}
+
+const Wrapper = styled.div`
+  position: relative;
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    right: 0;
+    width: 6px;
+    height: 100%;
+    z-index: 10;
+  }
+`;
+
+const Scroller = styled.div`
+  position: relative;
+  display: flex;
+  padding: 6px;
+  gap: 6px;
+  overflow: auto;
+  scroll-behavior: smooth;
+  align-items: center;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  > * {
+    max-width: 175px;
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    button {
+      border: 1px solid #eceef0;
+      background: #fff !important;
+      border-radius: 6px;
+      padding: 3px 6px;
+      transition: all 200ms;
+
+      &:focus,
+      &:hover {
+        border-color: #687076;
+      }
+    }
+  }
+`;
+
+const CloseButton = styled.button`
+    background: none;
+    border: none;
+    display: block;
+    padding: 12px;
+    color white;
+    transition: all 200ms;
+
+    &:hover {
+       transform:scale(1.2);
+    }
+`;
+
+const ProfileCardWrapper = styled.div`
+  opacity: 0.8;
+`;
+
+if (results.length === 0) return <></>;
+
+return (
+  <Wrapper>
+    <Scroller>
+      <CloseButton tabIndex={-1} type="button" onClick={props.onClose}>
+        <i className="bi bi-x-circle" />
+      </CloseButton>
+
+      {results.map((result) => {
+        return (
+          <ProfileCardWrapper>
+            <Widget
+              key={result.accountId}
+              src="near/widget/AccountProfile"
+              props={{
+                avatarSize: "34px",
+                accountId: result.accountId,
+                onClick: onResultClick,
+                overlayPlacement: "bottom"
+              }}
+            />
+          </ProfileCardWrapper>
+        );
+      })}
+    </Scroller>
+  </Wrapper>
+);
diff --git a/apps/builddao/widget/components/MarkdownEditor.jsx b/apps/builddao/widget/components/MarkdownEditor.jsx
new file mode 100644
index 00000000..8966c0fd
--- /dev/null
+++ b/apps/builddao/widget/components/MarkdownEditor.jsx
@@ -0,0 +1,246 @@
+/**
+ * iframe embedding a SimpleMDE component
+ * https://github.com/sparksuite/simplemde-markdown-editor
+ */
+
+function defaultOnChange(content) {
+  console.log(content);
+}
+
+const data = props.data;
+const onChange = props.onChange ?? defaultOnChange;
+const height = props.height ?? "405";
+const className = props.className ?? "w-100";
+const embedCss = props.embedCss || "";
+
+State.init({
+  iframeHeight: height,
+  message: { handler: "init", content: props.data }
+});
+
+// SIMPLEMDE CONFIG //
+const fontFamily = props.fontFamily ?? "sans-serif";
+const alignToolItems = props.alignToolItems ?? "right";
+const autoFocus = props.autoFocus ?? true;
+const renderingConfig = JSON.stringify(
+  props.renderingConfig ?? {
+    singleLineBreaks: false,
+    codeSyntaxHighlighting: true
+  }
+);
+const placeholder = props.placeholder ?? "";
+const statusConfig = JSON.stringify(
+  props.statusConfig ?? ["lines", "words", "cursor"]
+);
+const spellChecker = props.spellChecker ?? true;
+const tabSize = props.tabSize ?? 4;
+
+// Add or remove toolbar items
+// For adding unique items, configure the switch-case within the iframe
+const toolbarConfig = JSON.stringify(
+  props.toolbar ?? [
+    "heading",
+    "bold",
+    "italic",
+    "|", // adding | creates a divider in the toolbar
+    "quote",
+    "code",
+    "link",
+    "image",
+    "mention",
+    "reference",
+    "unordered-list",
+    "ordered-list",
+    "checklist",
+    "table",
+    "horizontal-rule",
+    "guide",
+    "preview"
+  ]
+);
+
+const code = `
+    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
+    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
+    <style>
+    body {  
+        margin: auto;
+        font-family: ${fontFamily};
+        overflow: visible;
+    }
+    
+    .editor-toolbar {
+        text-align: ${alignToolItems};
+    }
+    ${embedCss}
+    </style>
+    <div id="react-root"></div>
+    
+    <script>
+    let codeMirrorInstance;
+    let isEditorInitialized = false;
+    
+    function MarkdownEditor(props) {
+        const [value, setValue] = React.useState(props.initialText || "");
+    
+        React.useEffect(() => {
+            const generateToolbarItems = () => {
+                return ${toolbarConfig}.map((item) => {
+                    switch(item) {
+                        // CONFIGURE CUSTOM IMPLEMENTATIONS HERE
+                        case "checklist": {
+                            function handleChecklist(editor) {
+                                const cursorPos = editor.codemirror.getCursor();
+                                const lineText = editor.codemirror.getLine(cursorPos.line);
+                                if (lineText.trim() === "") {
+                                    editor.codemirror.replaceRange(" - [ ] ", cursorPos);
+                                } else {
+                                    editor.codemirror.replaceRange("\\n - [ ] ", cursorPos);
+                                }
+                            }
+                            return {
+                                name: "checklist",
+                                action: handleChecklist,
+                                className: "fa fa-check-square",
+                                title: "Insert Checklist"
+                            }
+                        }
+                        case "mention": {
+                            function handleMention(editor) {
+                                const cursorPos = editor.codemirror.getCursor();
+                                editor.codemirror.replaceRange("@", cursorPos);
+                            }
+                            return {
+                                name: "mention",
+                                action: handleMention,
+                                className: "fa fa-at",
+                                title: "Insert Mention"
+                            }
+                        }
+                        case "reference": {
+                            function handleReference(editor) {
+                                const cursorPos = editor.codemirror.getCursor();
+                                editor.codemirror.replaceRange("bos://", cursorPos);
+                            }
+                            return {
+                                name: "reference",
+                                action: handleReference,
+                                className: "fa fa-external-link-square",
+                                title: "Reference Thing"
+                            }
+                        }
+                        case "image": {
+                            // TODO: convert to upload to IPFS
+                            return {
+                                name: "image",
+                                action: SimpleMDE.drawImage,
+                                className: "fa fa-picture-o",
+                                title: "Insert Image"
+                            }
+                        }
+                        default: {
+                            return item;
+                        }
+                    }
+                });
+            };
+    
+            function renderPreview(plainText, preview) {
+                // TODO: can we place custom preview element? Perhaps install VM into this iframe?
+                setTimeout(function(){
+                        preview.innerHTML = "<p>hello</p>";
+                    }, 250);
+                return "loading";
+            }
+            
+            // Initializes SimpleMDE element and attaches to text-area
+            const simplemde = new SimpleMDE({
+                element: document.getElementById("markdown-input"),
+                forceSync: true,
+                autofocus: ${autoFocus},
+                renderingConfig: ${renderingConfig},
+                placeholder: "${placeholder}",
+                status: ${statusConfig},
+                spellChecker: ${spellChecker},
+                tabSize: ${tabSize},
+                toolbar: generateToolbarItems(),
+                initialValue: value,
+                previewRender: renderPreview,
+                insertTexts: {
+                  image: ["![](https://", ")"],
+                  link: ["[", "](https://)"],
+                },
+            });
+    
+            codeMirrorInstance = simplemde.codemirror;
+    
+            /**
+             * Sends message to Widget to update content
+             */
+            const updateContent = () => {
+                const content = simplemde.value();
+                window.parent.postMessage({ handler: "update", content }, "*");
+            };
+    
+            /**
+             * Sends message to Widget to update iframe height
+             */
+            const updateIframeHeight = () => {
+                const iframeHeight = document.body.scrollHeight;
+                window.parent.postMessage({ handler: "resize", height: iframeHeight }, "*");
+            };
+    
+            // On Change
+            simplemde.codemirror.on('change', () => {
+                updateContent();
+                updateIframeHeight();
+            });
+        }, []);
+    
+        return React.createElement('textarea', { id: 'markdown-input', value: value, onChange: setValue });
+    }
+    
+    const domContainer = document.querySelector('#react-root');
+    const root = ReactDOM.createRoot(domContainer);
+    
+    window.addEventListener("message", (event) => {
+      if (!isEditorInitialized && event.data !== "") {
+        root.render(React.createElement(MarkdownEditor, {
+            initialText: event.data.content }));
+            isEditorInitialized = true;
+      } else {
+        if (event.data.handler === 'autocompleteSelected') {
+            codeMirrorInstance.getDoc().setValue(event.data.content);
+          }
+      }
+    });
+    </script>
+    `;
+return (
+  <iframe
+    className={className}
+    style={{
+      height: `${state.iframeHeight}px`
+    }}
+    srcDoc={code}
+    message={data ?? { content: "" }}
+    onMessage={(e) => {
+      switch (e.handler) {
+        case "update": {
+          onChange(e.content);
+        }
+        case "resize": {
+          const offset = 0;
+          if (statusConfig.length) {
+            offset = 10;
+          }
+          State.update({ iframeHeight: e.height + offset });
+        }
+      }
+    }}
+  />
+);

From d655da6c0658390e0f59f40f09147dd39a9f3c8b Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <meghadev1901@gmail.com>
Date: Mon, 22 Jan 2024 19:07:38 +0530
Subject: [PATCH 04/11] fix upload

---
 apps/builddao/widget/Compose.jsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
index 839566d9..6c00c928 100644
--- a/apps/builddao/widget/Compose.jsx
+++ b/apps/builddao/widget/Compose.jsx
@@ -12,11 +12,14 @@ if (draft === null) {
   return "";
 }
 
+State.init({
+  image: {}
+});
+
 const [view, setView] = useState("editor");
 const [postContent, setPostContent] = useState("");
 const [hideAdvanced, setHideAdvanced] = useState(true);
 const [labels, setLabels] = useState([]);
-const [uploadedImage, setImage] = useState({});
 const [showAccountAutocomplete, setShowAccountAutocomplete] = useState(false);
 const [mentionsArray, setMentionsArray] = useState([]);
 const [mentionInput, setMentionInput] = useState(null);
@@ -101,7 +104,7 @@ const postToCustomFeed = ({ feed, text, labels }) => {
 
   const content = {
     type: "md",
-    image: uploadedImage.cid ? { ipfs_cid: uploadedImage.cid } : undefined,
+    image: state.image.cid ? { ipfs_cid: state.image.cid } : undefined,
     text: text
   };
 
@@ -249,6 +252,17 @@ const PostCreator = styled.div`
       margin-left: 12px;
     }
   }
+
+  .d-inline-block {
+    display: flex !important;
+    gap: 12px;
+    margin: 0 !important;
+
+    .overflow-hidden {
+      width: 40px !important;
+      height: 40px !important;
+    }
+  }
 `;
 
 const MarkdownEditor = `
@@ -446,12 +460,12 @@ return (
             src="devhub.near/widget/devhub.components.molecule.MarkdownViewer"
             props={{ text: postContent }}
           />
-          {uploadedImage.cid && (
+          {state.image.cid && (
             <Widget
               src="mob.near/widget/Image"
               props={{
-                image: uploadedImage.cid
-                  ? { ipfs_cid: uploadedImage.cid }
+                image: state.image.cid
+                  ? { ipfs_cid: state.image.cid }
                   : undefined
               }}
             />
@@ -463,7 +477,7 @@ return (
     <div className="d-flex gap-3 align-self-end">
       {view === "editor" && (
         <IpfsImageUpload
-          // image={uploadedImage}
+          image={state.image}
           className="upload-image-button bi bi-image"
         />
       )}

From a6186fad19ceb7022968b01fdcd94e72f19f0ed9 Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <meghadev1901@gmail.com>
Date: Tue, 23 Jan 2024 23:09:13 +0530
Subject: [PATCH 05/11] revert back to old editor

---
 apps/builddao/widget/Compose.jsx              | 153 +++++++---
 .../widget/components/MarkdownEditor.jsx      | 286 ++++--------------
 2 files changed, 169 insertions(+), 270 deletions(-)

diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
index 6c00c928..54c6b2e4 100644
--- a/apps/builddao/widget/Compose.jsx
+++ b/apps/builddao/widget/Compose.jsx
@@ -25,7 +25,9 @@ const [mentionsArray, setMentionsArray] = useState([]);
 const [mentionInput, setMentionInput] = useState(null);
 const [handler, setHandler] = useState("update");
 
-setPostContent(draft || props.template);
+useEffect(() => {
+  setPostContent(draft || props.template);
+}, []);
 
 function generateUID() {
   const maxHex = 0xffffffff;
@@ -265,41 +267,131 @@ const PostCreator = styled.div`
   }
 `;
 
+const TextareaWrapper = styled.div`
+  display: grid;
+  vertical-align: top;
+  align-items: center;
+  position: relative;
+  align-items: stretch;
+
+  textarea {
+    display: flex;
+    align-items: center;
+    transition: all 0.3s ease;
+  }
+
+  textarea::placeholder {
+    padding-top: 4px;
+    font-size: 20px;
+  }
+
+  textarea:focus::placeholder {
+    font-size: inherit;
+    padding-top: 0px;
+  }
+
+  &::after,
+  textarea,
+  iframe {
+    width: 100%;
+    min-width: 1em;
+    height: unset;
+    min-height: 3em;
+    font: inherit;
+    margin: 0;
+    resize: none;
+    background: none;
+    appearance: none;
+    border: 0px solid #eee;
+    grid-area: 1 / 1;
+    overflow: hidden;
+    outline: none;
+  }
+
+  iframe {
+    padding: 0;
+  }
+
+  textarea:focus,
+  textarea:not(:empty) {
+    border-bottom: 1px solid #eee;
+    min-height: 5em;
+  }
+
+  &::after {
+    content: attr(data-value) " ";
+    visibility: hidden;
+    white-space: pre-wrap;
+  }
+  &.markdown-editor::after {
+    padding-top: 66px;
+    font-family: monospace;
+    font-size: 14px;
+  }
+`;
+
 const MarkdownEditor = `
+  html {
+    background: #23242b;
+  }
+
   * {
     border: none !important;
   }
 
-  body  {
-    background: #23242b !important;
-    color: #fff !important;
-    font-family: sans-serif !important;
-    font-size: 1rem;
-    border: 1px solid #4f5055 !important;
+  .rc-md-editor {
+    background: #4f5055;
+    border-top: 1px solid #4f5055 !important;
     border-radius: 8px;
   }
 
-  .CodeMirror-scroll{
-    background: #23242b !important;
-    color: #fff !important;
+  .editor-container {
+    background: #4f5055;
+  }
+  
+  .drop-wrap {
+    top: -110px !important;
+    border-radius: 0.5rem !important;
   }
 
-  .CodeMirror{
+  .header-list {
+    display: flex;
+    align-items: center;
+  }
+
+  textarea {
     background: #23242b !important;
     color: #fff !important;
-    border-top: 1px solid #4f5055 !important;
+
+    font-family: sans-serif !important;
+    font-size: 1rem;
+
+    border: 1px solid #4f5055 !important;
+    border-top: 0 !important;
+    border-radius: 0 0 8px 8px;
   }
 
-  .editor-toolbar a {
-    color:inherit !important;
+  .rc-md-navigation {
+    background: #23242b !important;
+    border: 1px solid #4f5055 !important;
+    border-top: 0 !important;
+    border-bottom: 0 !important;
+    border-radius: 8px 8px 0 0;
+  
+    i {
+      color: #cdd0d5;
+    }
   }
 
-  .editor-toolbar a.active, a:hover {
-    color:#2c3e50!important;
+  .editor-container {
+    border-radius: 0 0 8px 8px;
   }
 
-  .CodeMirror-cursor {
-    border-left:1px solid white !important;
+  .rc-md-editor .editor-container .sec-md .input {
+    overflow-y: auto;
+    padding: 8px !important;
+    line-height: normal;
+    border-radius: 0 0 8px 8px;
   }
 `;
 
@@ -417,7 +509,11 @@ return (
     {avatarComponent}
     <div style={{ border: "none" }}>
       {view === "editor" ? (
-        <div>
+        <TextareaWrapper
+          className="markdown-editor"
+          data-value={postContent || ""}
+          key={props.feed.name}
+        >
           <Widget
             src={"buildhub.near/widget/components.MarkdownEditor"}
             props={{
@@ -425,22 +521,7 @@ return (
               onChange: (content) => {
                 textareaInputHandler(content);
               },
-              embedCss: MarkdownEditor,
-              alignToolItems: "left",
-              className: "w-100 bg-black",
-              toolbar: [
-                "heading",
-                "bold",
-                "italic",
-                "quote",
-                "code",
-                "link",
-                "unordered-list",
-                "ordered-list",
-                "checklist",
-                "mention"
-              ],
-              spellChecker: false
+              embedCss: MarkdownEditor
             }}
           />
           {autocompleteEnabled && showAccountAutocomplete && (
@@ -453,7 +534,7 @@ return (
               }}
             />
           )}
-        </div>
+        </TextareaWrapper>
       ) : (
         <MarkdownPreview>
           <Widget
diff --git a/apps/builddao/widget/components/MarkdownEditor.jsx b/apps/builddao/widget/components/MarkdownEditor.jsx
index 8966c0fd..ffb2e26b 100644
--- a/apps/builddao/widget/components/MarkdownEditor.jsx
+++ b/apps/builddao/widget/components/MarkdownEditor.jsx
@@ -1,246 +1,64 @@
-/**
- * iframe embedding a SimpleMDE component
- * https://github.com/sparksuite/simplemde-markdown-editor
- */
+const data = props.data ?? "# Hello World\n\n";
+const embedCss = props.embedCss || "";
 
-function defaultOnChange(content) {
-  console.log(content);
-}
+const code = `
+<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
+<script src="https://unpkg.com/react-markdown-editor-lite@1.3.4/lib/index.js" crossorigin></script>
+<link rel="stylesheet" href="https://unpkg.com/react-markdown-editor-lite@1.3.4/lib/index.css" />
 
-const data = props.data;
-const onChange = props.onChange ?? defaultOnChange;
-const height = props.height ?? "405";
-const className = props.className ?? "w-100";
-const embedCss = props.embedCss || "";
+<style>
+${embedCss}
+</style>
 
-State.init({
-  iframeHeight: height,
-  message: { handler: "init", content: props.data }
-});
+<div id="react-root"></div>
 
-// SIMPLEMDE CONFIG //
-const fontFamily = props.fontFamily ?? "sans-serif";
-const alignToolItems = props.alignToolItems ?? "right";
-const autoFocus = props.autoFocus ?? true;
-const renderingConfig = JSON.stringify(
-  props.renderingConfig ?? {
-    singleLineBreaks: false,
-    codeSyntaxHighlighting: true
-  }
-);
-const placeholder = props.placeholder ?? "";
-const statusConfig = JSON.stringify(
-  props.statusConfig ?? ["lines", "words", "cursor"]
-);
-const spellChecker = props.spellChecker ?? true;
-const tabSize = props.tabSize ?? 4;
+<script>
+let isEditorInitialized = false;
+let editorInstance = null;
+function MarkdownEditor(props) {
+  const [value, setValue] = React.useState(props.initialText || "");
+  const updateEditorState = (text) => {
+    setValue(text);
+    window.top.postMessage(text, "*");
+  };
+  editorInstance = { updateEditorState };
+  return React.createElement(ReactMarkdownEditorLite.default, {
+      value,
+      view: { menu: true, md: true, html: false },
+      canView: { menu: true, md: false, html: false, fullScreen: false, hideMenu: true },
+      onChange: ({ text }) => {
+        updateEditorState(text)
+      },
+      renderHTML: () => {},
+      className: "full",
+    }); 
+}
 
-// Add or remove toolbar items
-// For adding unique items, configure the switch-case within the iframe
-const toolbarConfig = JSON.stringify(
-  props.toolbar ?? [
-    "heading",
-    "bold",
-    "italic",
-    "|", // adding | creates a divider in the toolbar
-    "quote",
-    "code",
-    "link",
-    "image",
-    "mention",
-    "reference",
-    "unordered-list",
-    "ordered-list",
-    "checklist",
-    "table",
-    "horizontal-rule",
-    "guide",
-    "preview"
-  ]
-);
+const domContainer = document.querySelector('#react-root');
+const root = ReactDOM.createRoot(domContainer);
 
-const code = `
-    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
-    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
-    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
-    <style>
-    body {  
-        margin: auto;
-        font-family: ${fontFamily};
-        overflow: visible;
-    }
-    
-    .editor-toolbar {
-        text-align: ${alignToolItems};
-    }
-    ${embedCss}
-    </style>
-    <div id="react-root"></div>
-    
-    <script>
-    let codeMirrorInstance;
-    let isEditorInitialized = false;
-    
-    function MarkdownEditor(props) {
-        const [value, setValue] = React.useState(props.initialText || "");
-    
-        React.useEffect(() => {
-            const generateToolbarItems = () => {
-                return ${toolbarConfig}.map((item) => {
-                    switch(item) {
-                        // CONFIGURE CUSTOM IMPLEMENTATIONS HERE
-                        case "checklist": {
-                            function handleChecklist(editor) {
-                                const cursorPos = editor.codemirror.getCursor();
-                                const lineText = editor.codemirror.getLine(cursorPos.line);
-                                if (lineText.trim() === "") {
-                                    editor.codemirror.replaceRange(" - [ ] ", cursorPos);
-                                } else {
-                                    editor.codemirror.replaceRange("\\n - [ ] ", cursorPos);
-                                }
-                            }
-                            return {
-                                name: "checklist",
-                                action: handleChecklist,
-                                className: "fa fa-check-square",
-                                title: "Insert Checklist"
-                            }
-                        }
-                        case "mention": {
-                            function handleMention(editor) {
-                                const cursorPos = editor.codemirror.getCursor();
-                                editor.codemirror.replaceRange("@", cursorPos);
-                            }
-                            return {
-                                name: "mention",
-                                action: handleMention,
-                                className: "fa fa-at",
-                                title: "Insert Mention"
-                            }
-                        }
-                        case "reference": {
-                            function handleReference(editor) {
-                                const cursorPos = editor.codemirror.getCursor();
-                                editor.codemirror.replaceRange("bos://", cursorPos);
-                            }
-                            return {
-                                name: "reference",
-                                action: handleReference,
-                                className: "fa fa-external-link-square",
-                                title: "Reference Thing"
-                            }
-                        }
-                        case "image": {
-                            // TODO: convert to upload to IPFS
-                            return {
-                                name: "image",
-                                action: SimpleMDE.drawImage,
-                                className: "fa fa-picture-o",
-                                title: "Insert Image"
-                            }
-                        }
-                        default: {
-                            return item;
-                        }
-                    }
-                });
-            };
-    
-            function renderPreview(plainText, preview) {
-                // TODO: can we place custom preview element? Perhaps install VM into this iframe?
-                setTimeout(function(){
-                        preview.innerHTML = "<p>hello</p>";
-                    }, 250);
-                return "loading";
-            }
-            
-            // Initializes SimpleMDE element and attaches to text-area
-            const simplemde = new SimpleMDE({
-                element: document.getElementById("markdown-input"),
-                forceSync: true,
-                autofocus: ${autoFocus},
-                renderingConfig: ${renderingConfig},
-                placeholder: "${placeholder}",
-                status: ${statusConfig},
-                spellChecker: ${spellChecker},
-                tabSize: ${tabSize},
-                toolbar: generateToolbarItems(),
-                initialValue: value,
-                previewRender: renderPreview,
-                insertTexts: {
-                  image: ["![](https://", ")"],
-                  link: ["[", "](https://)"],
-                },
-            });
-    
-            codeMirrorInstance = simplemde.codemirror;
-    
-            /**
-             * Sends message to Widget to update content
-             */
-            const updateContent = () => {
-                const content = simplemde.value();
-                window.parent.postMessage({ handler: "update", content }, "*");
-            };
-    
-            /**
-             * Sends message to Widget to update iframe height
-             */
-            const updateIframeHeight = () => {
-                const iframeHeight = document.body.scrollHeight;
-                window.parent.postMessage({ handler: "resize", height: iframeHeight }, "*");
-            };
-    
-            // On Change
-            simplemde.codemirror.on('change', () => {
-                updateContent();
-                updateIframeHeight();
-            });
-        }, []);
-    
-        return React.createElement('textarea', { id: 'markdown-input', value: value, onChange: setValue });
-    }
-    
-    const domContainer = document.querySelector('#react-root');
-    const root = ReactDOM.createRoot(domContainer);
-    
-    window.addEventListener("message", (event) => {
-      if (!isEditorInitialized && event.data !== "") {
-        root.render(React.createElement(MarkdownEditor, {
-            initialText: event.data.content }));
-            isEditorInitialized = true;
-      } else {
-        if (event.data.handler === 'autocompleteSelected') {
-            codeMirrorInstance.getDoc().setValue(event.data.content);
-          }
+window.addEventListener("message", (event) => {
+  if (!isEditorInitialized) {
+    root.render(React.createElement(MarkdownEditor, {
+        initialText: event.data.content }));
+        isEditorInitialized = true;
+  } else {
+    if (event.data.handler === 'autocompleteSelected') {
+      if (editorInstance) {
+        editorInstance.updateEditorState(event.data.content);
+      }
       }
-    });
-    </script>
-    `;
+  }
+});
+
+</script>
+`;
 return (
   <iframe
-    className={className}
-    style={{
-      height: `${state.iframeHeight}px`
-    }}
+    className="w-100 h-100"
     srcDoc={code}
-    message={data ?? { content: "" }}
-    onMessage={(e) => {
-      switch (e.handler) {
-        case "update": {
-          onChange(e.content);
-        }
-        case "resize": {
-          const offset = 0;
-          if (statusConfig.length) {
-            offset = 10;
-          }
-          State.update({ iframeHeight: e.height + offset });
-        }
-      }
-    }}
+    message={data}
+    onMessage={props.onChange}
   />
 );

From 3ca27e474850bcf06cacaa29ca2a459b1b2266aa Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <meghadev1901@gmail.com>
Date: Tue, 23 Jan 2024 23:11:11 +0530
Subject: [PATCH 06/11] rename components

---
 apps/builddao/widget/Compose.jsx                            | 6 +++---
 .../{MarkdownEditor.jsx => MarkdownEditorIframe.jsx}        | 0
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename apps/builddao/widget/components/{MarkdownEditor.jsx => MarkdownEditorIframe.jsx} (100%)

diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
index 54c6b2e4..d6f0537f 100644
--- a/apps/builddao/widget/Compose.jsx
+++ b/apps/builddao/widget/Compose.jsx
@@ -35,7 +35,7 @@ function generateUID() {
   return randomNumber.toString(16).padStart(8, "0");
 }
 
-function extractMentions(text) {
+const extractMentions = (text) => {
   const mentionRegex =
     /@((?:(?:[a-z\d]+[-_])*[a-z\d]+\.)*(?:[a-z\d]+[-_])*[a-z\d]+)/gi;
   mentionRegex.lastIndex = 0;
@@ -51,7 +51,7 @@ function extractMentions(text) {
     }
   }
   return [...accountIds];
-}
+};
 
 const extractHashtags = (text) => {
   const hashtagRegex = /#(\w+)/gi;
@@ -515,7 +515,7 @@ return (
           key={props.feed.name}
         >
           <Widget
-            src={"buildhub.near/widget/components.MarkdownEditor"}
+            src={"buildhub.near/widget/components.MarkdownEditorIframe"}
             props={{
               data: { handler: handler, content: postContent },
               onChange: (content) => {
diff --git a/apps/builddao/widget/components/MarkdownEditor.jsx b/apps/builddao/widget/components/MarkdownEditorIframe.jsx
similarity index 100%
rename from apps/builddao/widget/components/MarkdownEditor.jsx
rename to apps/builddao/widget/components/MarkdownEditorIframe.jsx

From a8b9c1afdc7d04c1f8d81a95a10228e16ed89e66 Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <meghadev1901@gmail.com>
Date: Wed, 24 Jan 2024 00:03:30 +0530
Subject: [PATCH 07/11] fix draft state

---
 apps/builddao/widget/Compose.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
index d6f0537f..748f7a80 100644
--- a/apps/builddao/widget/Compose.jsx
+++ b/apps/builddao/widget/Compose.jsx
@@ -207,7 +207,7 @@ function autoCompleteAccountId(id) {
   setShowAccountAutocomplete(false);
   setMentionInput(null);
   setHandler("autocompleteSelected");
-  Storage.privateSet(draftKey, value || "");
+  Storage.privateSet(draftKey, updatedDescription || "");
 }
 
 const PostCreator = styled.div`

From f1932913d9009d3eb49ab955a08264d6625dd475 Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Tue, 23 Jan 2024 15:35:43 -0500
Subject: [PATCH 08/11] perf fixes and drafts

---
 apps/builddao/widget/Compose.jsx    | 43 ++++++++++++++---------------
 apps/builddao/widget/components.jsx |  6 +++-
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
index 748f7a80..e3f1029d 100644
--- a/apps/builddao/widget/Compose.jsx
+++ b/apps/builddao/widget/Compose.jsx
@@ -1,11 +1,11 @@
-const { Avatar, Button } = VM.require("buildhub.near/widget/components");
-
-Avatar = Avatar || (() => <></>);
-Button = Button || (() => <></>);
+const { Avatar, Button } = VM.require("buildhub.near/widget/components") || {
+  Avatar: () => <></>,
+  Button: () => <></>,
+};
 
 const draftKey = props.feed.name || "draft";
 const draft = Storage.privateGet(draftKey);
-const profile = Social.getr(`${context.accountId}/profile`);
+
 const autocompleteEnabled = true;
 
 if (draft === null) {
@@ -13,7 +13,7 @@ if (draft === null) {
 }
 
 State.init({
-  image: {}
+  image: {},
 });
 
 const [view, setView] = useState("editor");
@@ -25,9 +25,7 @@ const [mentionsArray, setMentionsArray] = useState([]);
 const [mentionInput, setMentionInput] = useState(null);
 const [handler, setHandler] = useState("update");
 
-useEffect(() => {
-  setPostContent(draft || props.template);
-}, []);
+setPostContent(draft || props.template);
 
 function generateUID() {
   const maxHex = 0xffffffff;
@@ -75,8 +73,8 @@ const extractMentionNotifications = (text, item) =>
       key: accountId,
       value: {
         type: "mention",
-        item
-      }
+        item,
+      },
     }));
 
 function checkAndAppendHashtag(input, target) {
@@ -107,7 +105,7 @@ const postToCustomFeed = ({ feed, text, labels }) => {
   const content = {
     type: "md",
     image: state.image.cid ? { ipfs_cid: state.image.cid } : undefined,
-    text: text
+    text: text,
   };
 
   const data = {
@@ -126,20 +124,20 @@ const postToCustomFeed = ({ feed, text, labels }) => {
     // },
     post: {
       main: JSON.stringify({
-        content
+        content,
         // tags: tagsFromLabels(labels),
         // postType: feed.name,
-      })
+      }),
     },
     index: {
-      post: JSON.stringify({ key: "main", value: { type: "md" } })
+      post: JSON.stringify({ key: "main", value: { type: "md" } }),
       // every: JSON.stringify({ key: feed.name, value: { type: "md" } }),
-    }
+    },
   };
 
   const item = {
     type: "social",
-    path: `${context.accountId}/post/main`
+    path: `${context.accountId}/post/main`,
   };
 
   const notifications = extractMentionNotifications(text, item);
@@ -156,7 +154,7 @@ const postToCustomFeed = ({ feed, text, labels }) => {
     data.index.hashtag = JSON.stringify(
       hashtags.map((hashtag) => ({
         key: hashtag,
-        value: item
+        value: item,
       }))
     );
   }
@@ -169,7 +167,7 @@ const postToCustomFeed = ({ feed, text, labels }) => {
     },
     onCancel: () => {
       // console.log(`Cancelled ${feed}: #${postId}`);
-    }
+    },
   });
 };
 
@@ -517,11 +515,12 @@ return (
           <Widget
             src={"buildhub.near/widget/components.MarkdownEditorIframe"}
             props={{
+              initialText: postContent,
               data: { handler: handler, content: postContent },
               onChange: (content) => {
                 textareaInputHandler(content);
               },
-              embedCss: MarkdownEditor
+              embedCss: MarkdownEditor,
             }}
           />
           {autocompleteEnabled && showAccountAutocomplete && (
@@ -530,7 +529,7 @@ return (
               props={{
                 term: mentionInput,
                 onSelect: autoCompleteAccountId,
-                onClose: () => setShowAccountAutocomplete(false)
+                onClose: () => setShowAccountAutocomplete(false),
               }}
             />
           )}
@@ -547,7 +546,7 @@ return (
               props={{
                 image: state.image.cid
                   ? { ipfs_cid: state.image.cid }
-                  : undefined
+                  : undefined,
               }}
             />
           )}
diff --git a/apps/builddao/widget/components.jsx b/apps/builddao/widget/components.jsx
index 38499bad..b73c4264 100644
--- a/apps/builddao/widget/components.jsx
+++ b/apps/builddao/widget/components.jsx
@@ -33,7 +33,11 @@ function Pagination({
 
 function Post(props) {
   return (
-    <Widget src={"buildhub.near/widget/components.Post"} props={{ ...props }} />
+    <Widget
+      src={"buildhub.near/widget/components.Post"}
+      loading={<div className="w-100" style={{ height: "200px" }} />}
+      props={{ ...props }}
+    />
   );
 }
 

From ccc181d71574569fc07d35d211f6af9545e8abb9 Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Tue, 23 Jan 2024 16:01:43 -0500
Subject: [PATCH 09/11] fix posting

---
 apps/builddao/widget/Compose.jsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
index e3f1029d..cf0d5da4 100644
--- a/apps/builddao/widget/Compose.jsx
+++ b/apps/builddao/widget/Compose.jsx
@@ -123,11 +123,7 @@ const postToCustomFeed = ({ feed, text, labels }) => {
     //   },
     // },
     post: {
-      main: JSON.stringify({
-        content,
-        // tags: tagsFromLabels(labels),
-        // postType: feed.name,
-      }),
+      main: JSON.stringify(content),
     },
     index: {
       post: JSON.stringify({ key: "main", value: { type: "md" } }),

From 57e11232beb399eb14b29dca6299740d56a90d0c Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <meghadev1901@gmail.com>
Date: Wed, 24 Jan 2024 15:44:02 +0530
Subject: [PATCH 10/11] fix join now

---
 .../widget/components/buttons/JoinNow.jsx     | 46 ++++---------------
 apps/builddao/widget/core/lib/common.js       | 37 +++++++++++++++
 apps/builddao/widget/section/cta.jsx          | 10 +++-
 apps/builddao/widget/section/join.jsx         | 10 +++-
 4 files changed, 65 insertions(+), 38 deletions(-)
 create mode 100644 apps/builddao/widget/core/lib/common.js

diff --git a/apps/builddao/widget/components/buttons/JoinNow.jsx b/apps/builddao/widget/components/buttons/JoinNow.jsx
index 27ba3914..12a4cb79 100644
--- a/apps/builddao/widget/components/buttons/JoinNow.jsx
+++ b/apps/builddao/widget/components/buttons/JoinNow.jsx
@@ -1,40 +1,10 @@
-const daoId = "build.sputnik-dao.near";
-const accountId = context.accountId;
-const alreadyJoinedRolesNames = ["community", "council"];
-const searchRange = 100;
-
-const policy = Near.view(daoId, "get_policy");
-
-const lastProposalId = Near.view(daoId, "get_last_proposal_id") - 1;
-
-const lastProposals = Near.view(daoId, "get_proposals", {
-  from_index: lastProposalId - searchRange,
-  limit: searchRange,
-}) || [];
-
-const alreadyMadeAProposal =
-  lastProposals.filter((proposal) => {
-    return proposal.proposer === accountId;
-  }).length > 0;
-
-if (policy === null) {
-  return "";
-}
-
-const deposit = policy.proposal_bond;
-
-const group = policy.roles
-  .filter((role) => alreadyJoinedRolesNames.includes(role.name))
-  .map((role) => {
-    return role.kind.Group;
-  });
-
-const accounts = new Set(group[0].concat(group[1]));
+const { checkIsMemberOrPending } = VM.require(
+  "buildhub.near/widget/core.lib.common"
+);
 
-const isCommunityOrCouncilMember = accounts.has(accountId);
+checkIsMemberOrPending || (checkIsMemberOrPending = () => {});
 
-const canJoin =
-  (accountId && !isCommunityOrCouncilMember )|| (accountId && !alreadyMadeAProposal);
+const isMemberOrPending = checkIsMemberOrPending(context.accountId);
 
 const Button = styled.a`
   width: max-content;
@@ -83,6 +53,10 @@ const Container = styled.div`
 
 return (
   <Container>
-    {canJoin ? <Button href={"/join"}>Join Now</Button> : props.children}
+    {!isMemberOrPending ? (
+      <Button href={"/join"}>Join Now</Button>
+    ) : (
+      props.children
+    )}
   </Container>
 );
diff --git a/apps/builddao/widget/core/lib/common.js b/apps/builddao/widget/core/lib/common.js
new file mode 100644
index 00000000..96bb4082
--- /dev/null
+++ b/apps/builddao/widget/core/lib/common.js
@@ -0,0 +1,37 @@
+// checks if the user is already dao's community/council member or has an active proposal
+const checkIsMemberOrPending = (accountId) => {
+  const daoId = "build.sputnik-dao.near";
+  if (!accountId) {
+    return false;
+  }
+  const alreadyJoinedRolesNames = ["community", "council"];
+  const searchRange = 100;
+
+  const lastProposalId = Near.view(daoId, "get_last_proposal_id");
+
+  const policy = Near.view(daoId, "get_policy");
+  const isDaoMember = false;
+  const lastProposals =
+    Near.view(daoId, "get_proposals", {
+      from_index: lastProposalId - searchRange,
+      limit: searchRange
+    }) || [];
+
+  const alreadyMadeAProposal =
+    lastProposals.filter((proposal) => {
+      return (
+        proposal.proposer === accountId && proposal.status === "InProgress"
+      );
+    }).length > 0;
+
+  policy.roles
+    .filter((role) => alreadyJoinedRolesNames.includes(role.name))
+    .map((role) => {
+      if (Array.isArray(role.kind.Group) && !isDaoMember) {
+        isDaoMember = role.kind.Group.includes(accountId);
+      }
+    });
+  return isDaoMember || alreadyMadeAProposal;
+};
+
+return { checkIsMemberOrPending };
diff --git a/apps/builddao/widget/section/cta.jsx b/apps/builddao/widget/section/cta.jsx
index 63c03111..4665c7c6 100644
--- a/apps/builddao/widget/section/cta.jsx
+++ b/apps/builddao/widget/section/cta.jsx
@@ -1,3 +1,11 @@
+const { checkIsMemberOrPending } = VM.require(
+  "buildhub.near/widget/core.lib.common"
+);
+
+checkIsMemberOrPending || (checkIsMemberOrPending = () => {});
+
+const isMemberOrPending = checkIsMemberOrPending(context.accountId);
+
 const logoLink =
   "https://ipfs.near.social/ipfs/bafkreihbwho3qfvnu4yss3eh5jrx6uxhrlzdgtdjyzyjrpa6odro6wdxya";
 const gridLink =
@@ -133,7 +141,7 @@ return (
     <Card>
       <Logo src={logoLink} />
       <h1>Together, we can build a better future.</h1>
-      <a href="/join">Join Now</a>
+      {!isMemberOrPending && <a href="/join">Join Now</a>}
     </Card>
     <Grid src={gridLink} />
     <LeftBlur src={leftBlur} />
diff --git a/apps/builddao/widget/section/join.jsx b/apps/builddao/widget/section/join.jsx
index 6e3d8b54..dbf97c64 100644
--- a/apps/builddao/widget/section/join.jsx
+++ b/apps/builddao/widget/section/join.jsx
@@ -1,3 +1,11 @@
+const { checkIsMemberOrPending } = VM.require(
+  "buildhub.near/widget/core.lib.common"
+);
+
+checkIsMemberOrPending || (checkIsMemberOrPending = () => {});
+
+const isMemberOrPending = checkIsMemberOrPending(context.accountId);
+
 const SectionPill = ({ title, icon }) => {
   const Pill = styled.div`
     display: flex;
@@ -356,7 +364,7 @@ return (
           <br />
           3. Fulfill contribution requirements
         </p>
-        <a href="/join">Join Now</a>
+        {!isMemberOrPending && <a href="/join">Join Now</a>}
       </CTAContent>
     </CTAContainer>
   </JoinContainer>

From 917edb2c57f75b7ddf932a4f36c6e664fc54afb4 Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Wed, 24 Jan 2024 11:50:06 -0500
Subject: [PATCH 11/11] force reset

---
 apps/builddao/widget/Compose.jsx                         | 1 +
 apps/builddao/widget/components/MarkdownEditorIframe.jsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
index cf0d5da4..306fa0e4 100644
--- a/apps/builddao/widget/Compose.jsx
+++ b/apps/builddao/widget/Compose.jsx
@@ -160,6 +160,7 @@ const postToCustomFeed = ({ feed, text, labels }) => {
     onCommit: () => {
       setPostContent("");
       Storage.privateSet(draftKey, props.template || "");
+      setHandler("autocompleteSelected"); // this is a hack to force the iframe to update
     },
     onCancel: () => {
       // console.log(`Cancelled ${feed}: #${postId}`);
diff --git a/apps/builddao/widget/components/MarkdownEditorIframe.jsx b/apps/builddao/widget/components/MarkdownEditorIframe.jsx
index ffb2e26b..38901c46 100644
--- a/apps/builddao/widget/components/MarkdownEditorIframe.jsx
+++ b/apps/builddao/widget/components/MarkdownEditorIframe.jsx
@@ -48,7 +48,7 @@ window.addEventListener("message", (event) => {
       if (editorInstance) {
         editorInstance.updateEditorState(event.data.content);
       }
-      }
+    }
   }
 });