const contract = props.contract || 'docschain.ws-protocol-63'; const componentOwnerId = props.componentOwnerId ?? 'calimero.testnet'; const redirectConfig = !componentOwnerId || componentOwnerId === 'calimero.near' ? {} : { redirect: (url) => url.replace('calimero.near', componentOwnerId) }; const transformUrl = (url) => !componentOwnerId || componentOwnerId === 'calimero.near' ? 'calimero.near' : url.replace('calimero.near', componentOwnerId); 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'} config={redirectConfig} /> <div className="d-flex"> <Widget src={'calimero.near/widget/Calimero.DocsChain.Sidebar.DocsSidebar'} config={redirectConfig} 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 className="d-flex flex-column pt-3"> <label htmlFor="inputArticleId"> Input article id (case-sensitive, without spaces): </label> <label htmlFor="inputArticleId" className="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 className="d-flex flex-column pt-3"> <label htmlFor="textareaArticleBody"> Input article body (in markdown format): </label> <label htmlFor="textareaArticleBody" className="small text-danger"> {state.errorBody} </label> <div className="d-flex gap-2" style={{ minHeight: '300px' }}> <div className="w-50"> <Widget src="calimero.near/widget/Calimero.DocsChain.MarkdownEditorIframe" config={redirectConfig} props={{ initialText: initialBody, onChange: (articleBody) => State.update({ articleBody }), }} /> </div> <div className="w-50"> <Widget src="calimero.near/widget/Calimero.DocsChain.SocialMarkdown" config={redirectConfig} props={{ text: state.articleBody }} /> </div> </div> </div> </div> </div> </div> </PageContainer> );