Feature/999 simple markdown editor

instances/devhub.near/widget/devhub/components/molecule/Compose.jsx

@@ -95,6 +95,7 @@ const Compose = ({
                   "${REPL_DEVHUB}/widget/devhub.components.molecule.SimpleMDE"
                 }
                 props={{
+                  instance: props.instance,
                   data: { handler: state.handler, content: state.data },
                   onChange: (content) => {
                     State.update({ data: content, handler: "update" });
@@ -163,6 +164,7 @@ const Compose = ({
                   "${REPL_DEVHUB}/widget/devhub.components.molecule.SimpleMDE"
                 }
                 props={{
+                  instance: props.instance,
                   data: { handler: state.handler, content: state.data },
                   onChange: (content) => {
                     State.update({ data: content, handler: "update" });

instances/devhub.near/widget/devhub/components/molecule/SimpleMDE.jsx

@@ -5,6 +5,10 @@
 const { getLinkUsingCurrentGateway } = VM.require(
   "${REPL_DEVHUB}/widget/core.lib.url"
 ) || { getLinkUsingCurrentGateway: () => {} };
+
+const instance = props.instance ?? "";
+const { cacheUrl, contract } = VM.require(`${instance}/widget/config.data`);
+
 const data = props.data;
 const onChange = props.onChange ?? (() => {});
 const onChangeKeyup = props.onChangeKeyup ?? (() => {}); // in case where we want immediate action
@@ -30,21 +34,8 @@ const showAccountAutoComplete = props.showAutoComplete ?? false;
 const showProposalIdAutoComplete = props.showProposalIdAutoComplete ?? false;
 const autoFocus = props.autoFocus ?? false;
 
-const queryName = "${REPL_PROPOSAL_FEED_INDEXER_QUERY_NAME}";
-const query = `query GetLatestSnapshot($offset: Int = 0, $limit: Int = 10, $where: ${queryName}_bool_exp = {}) {
-${queryName}(
-  offset: $offset
-  limit: $limit
-  order_by: {proposal_id: desc}
-  where: $where
-) {
-  name
-  proposal_id
-}
-}`;
-
 const proposalLink = getLinkUsingCurrentGateway(
-  `${REPL_DEVHUB}/widget/app?page=proposal&id=`
+  `${contract}/widget/app?page=proposal&id=`
 );
 
 const code = `
@@ -88,11 +79,11 @@ const code = `
   }
 
   .CodeMirror {
-    min-height:200px !important; // for autocomplete to be visble 
+    min-height:200px !important; // for autocomplete to be visible 
   }
 
   .CodeMirror-scroll {
-    min-height:200px !important; // for autocomplete to be visble 
+    min-height:200px !important; // for autocomplete to be visible 
   }
 
   ${embeddCSS}
@@ -129,7 +120,6 @@ let isEditorInitialized = false;
 let followingData = {};
 let profilesData = {};
 let proposalLink = '';
-let query = '';
 let showAccountAutoComplete = ${showAccountAutoComplete};
 let showProposalIdAutoComplete = ${showProposalIdAutoComplete};
 
@@ -183,12 +173,11 @@ function getSuggestedAccounts(term) {
   return results;
 }
 
-async function asyncFetch(endpoint, { method, headers, body }) {
+async function asyncFetch(endpoint, { method, headers }) {
   try {
     const response = await fetch(endpoint, {
       method: method,
       headers: headers,
-      body: body
     });
 
     if (!response.ok) {
@@ -212,46 +201,28 @@ function extractNumbers(str) {
   return numbers;
 };
 
+function searchCacheApi(searchProposalId) {
+  let searchInput = encodeURI(searchProposalId);
+
+  let searchUrl = "${cacheUrl}/proposals/search/" + searchInput;
+
+  return asyncFetch(searchUrl, {
+    method: "GET",
+    headers: {
+      accept: "application/json",
+    },
+  }).catch((error) => {
+    console.log("Error searching cache api", error);
+  });
+}
+
 async function getSuggestedProposals(id) {
   let results = [];
-  const variables = {
-    limit: 5,
-    offset: 0,
-    where: {},
-  };
+
   if (id) {
-    const proposalId = extractNumbers(id);
-    if (proposalId) {
-      variables["where"] = { proposal_id: { _eq: id } };
-    } else {
-      variables["where"] = {
-        _or: [
-          { name: { _iregex: id } },
-          { summary: { _iregex: id } },
-          { description: { _iregex: id } },
-        ],
-      };
-    }
+    const searchResults = await searchCacheApi(id);
+    results = searchResults?.records || [];
   }
-  await asyncFetch("https://near-queryapi.api.pagoda.co/v1/graphql", {
-    method: "POST",
-    headers: { "x-hasura-role": "${REPL_INDEXER_HASURA_ROLE}" },
-    body: JSON.stringify({
-      query: query,
-      variables: variables,
-      operationName: "GetLatestSnapshot",
-    }),
-  })
-    .then((res) => {
-      const proposals =
-        res?.data?.[
-          "${REPL_PROPOSAL_FEED_INDEXER_QUERY_NAME}"
-        ];
-      results = proposals;
-    })
-    .catch((error) => {
-      console.error(error);
-    });
   return results;
 };
 
@@ -402,7 +373,7 @@ if (showAccountAutoComplete) {
         });
       });
     }
-    // show dropwdown only when @ is at first place or when there is a space before @
+    // show dropdown only when @ is at first place or when there is a space before @
       if (!mentionToken && (token.string === "@" && cursor.ch === 1 || token.string === "@" && cm.getTokenAt({line:cursor.line, ch: cursor.ch - 1}).string == ' ')) {
         mentionToken = token;
         mentionCursorStart = cursor;
@@ -439,6 +410,7 @@ if (showProposalIdAutoComplete) {
   let proposalId;
   let referenceCursorStart;
   const dropdown = document.getElementById("referencedropdown");
+  // Create loader element once and store it
   const loader = document.createElement('div');
   loader.className = 'loader';
   loader.textContent = 'Loading...';
@@ -460,8 +432,10 @@ if (showProposalIdAutoComplete) {
         const proposalIdInput = cm.getRange(referenceCursorStart, cursor);
         dropdown.innerHTML = ''; // Clear previous content
         dropdown.appendChild(loader); // Show loader
-
+       
         const suggestedProposals = await getSuggestedProposals(proposalIdInput);
+
+        // Clear dropdown including loader
         dropdown.innerHTML = suggestedProposals
         .map(
           (item) =>
@@ -496,7 +470,7 @@ if (showProposalIdAutoComplete) {
       }
     }
 
-    // show dropwdown only when there is space before # or it's first char
+    // show dropdown only when there is space before # or it's first char
       if (!proposalId && (token.string === "#" && cursor.ch === 1 || token.string === "#" && cm.getTokenAt({line:cursor.line, ch: cursor.ch - 1}).string == ' ')) {
         proposalId = token;
         referenceCursorStart = cursor;
@@ -545,9 +519,6 @@ window.addEventListener("message", (event) => {
   if (event.data.profilesData) {
     profilesData = JSON.parse(event.data.profilesData);
   }
-  if (event.data.query) {
-    query = event.data.query;
-  }
   if (event.data.proposalLink) {
     proposalLink = event.data.proposalLink;
   }
@@ -570,7 +541,6 @@ return (
       content: props.data?.content ?? "",
       followingData,
       profilesData: JSON.stringify(profilesData),
-      query: query,
       handler: props.data.handler,
       proposalLink: proposalLink,
     }}

instances/devhub.near/widget/devhub/entity/addon/blogv2/editor/form.jsx

@@ -172,6 +172,7 @@ const ContentEditor = useMemo(() => {
     <Widget
       src="${REPL_DEVHUB}/widget/devhub.components.molecule.Compose"
       props={{
+        instance: "${REPL_DEVHUB}",
         data: content,
         onChange: setContent,
         height: "250",

instances/devhub.near/widget/devhub/entity/proposal/ComposeComment.jsx

@@ -199,6 +199,7 @@ const Compose = useMemo(() => {
     <Widget
       src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Compose"}
       props={{
+        instance: "${REPL_DEVHUB}",
         data: comment,
         onChangeKeyup: setComment,
         autocompleteEnabled: true,

instances/devhub.near/widget/devhub/entity/proposal/Editor.jsx

@@ -884,6 +884,7 @@ const DescriptionComponent = useMemo(() => {
     <Widget
       src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Compose"}
       props={{
+        instance: "${REPL_DEVHUB}",
         data: description,
         onChange: setDescription,
         autocompleteEnabled: true,

instances/events-committee.near/widget/devhub/components/molecule/Compose.jsx

@@ -85,8 +85,9 @@ const Compose = ({
         {state.selectedTab === "editor" ? (
           <>
             <Widget
-              src={"${REPL_EVENTS}/widget/devhub.components.molecule.SimpleMDE"}
+              src={"${REPL_DEVHUB}/widget/devhub.components.molecule.SimpleMDE"}
               props={{
+                instance: props.instance,
                 data: { handler: state.handler, content: state.data },
                 onChange: (content) => {
                   State.update({ data: content, handler: "update" });