const contract = "dev-1692884041174-88609968624907" const authorForWidget = "igi.testnet"; const initialBody = "# Hello world" const initialCreateArticleState = { articleId: "", articleBody: initialBody, }; State.init(initialCreateArticleState); const saveArticle = () => { if (!state.articleBody) { return; } const params = { "article_id": state.articleId, "body": state.articleBody } Near.call(contract, "post_article", params); }; return ( <> <Widget src={`${authorForWidget}/widget/Calimero.DocsChain.MainNavigation`} props={{ currentNavPill: "create" }} /> <div> <h1 className="mb-3"> Create Article</h1> <div> <div> <button type="submit" className="btn btn-success" onClick={saveArticle} > Save Article </button> </div> <div class="d-flex flex-column pt-3"> <label for="inputArticleId"> Input article id (case-sensitive, without spaces): </label> <label for="inputArticleId" class="small text-danger"> {state.errorId} </label> <input className="form-control mt-2" id="inputArticleId" value={state.articleId} placeholder="Input article id" onChange={(e) => { State.update({ ...state, articleId: e.target.value.replace(/\s+/g, ""), }); }} /> </div> <div class="d-flex flex-column pt-3"> <label for="textareaArticleBody"> Input article body (in markdown format): </label> <label for="textareaArticleBody" class="small text-danger"> {state.errorBody} </label> <div className="d-flex gap-2" style={{ minHeight: "300px" }}> <div className="w-50"> <Widget src="igi.testnet/widget/Calimero.DocsChain.MarkdownEditorIframe" props={{ initialText: initialBody, onChange: (articleBody) => State.update({ articleBody }), }} /> </div> <div className="w-50"> <Widget src="igi.testnet/widget/Calimero.DocsChain.SocialMarkdown" props={{ text: state.articleBody }} /> </div> </div> </div> </div> </div> </> );