const contract = props.contract || "docs.testnet"; const initialBody = "# Hello world"; const PageContainer = styled.div` width: 100%; height: 100vh; padding-left: 60px; padding-right: 60px; background-color: #0e0e10; color: #ffffff; `; const initialCreateArticleState = { articleId: "", articleBody: initialBody, createPage: { open: false, private: false }, onOpenCreatePage: (isPrivate) => State.update({ openCreatePage: { open: true, private: isPrivate } }), }; State.init(initialCreateArticleState); const saveArticle = () => { if (!state.articleBody) { return; } const params = { article_id: state.articleId, body: state.articleBody, }; Near.fakCalimeroCall(contract, "post_article", params); }; return ( <PageContainer> <Widget src={"calimero.near/widget/Calimero.DocsChain.Navbar.HorizontalNavbar"} /> <div className="d-flex"> <Widget src={"calimero.near/widget/Calimero.DocsChain.Sidebar.DocsSidebar"} props={{ onOpenCreatePage: state.onOpenCreatePage, createPageOpen: state.createPage.open, }} /> <div> <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="calimero.near/Calimero.DocsChain.MarkdownEditorIframe" props={{ initialText: initialBody, onChange: (articleBody) => State.update({ articleBody }), }} /> </div> <div className="w-50"> <Widget src="calimero.near/widget/Calimero.DocsChain.SocialMarkdown" props={{ text: state.articleBody }} /> </div> </div> </div> </div> </div> </div> </PageContainer> );