const componentOwnerId = props.componentOwnerId || 'fran-cali.testnet'; const Container = styled.div` background-color: #0e0e10; color: #fff; width: 100%; height: 100vh; `; const Header = styled.div` padding-top: 12px; `; const InputConainer = styled.div` display: flex; flex-direction: column; justify-content: center; padding-top: 50px; padding-left: 200px; padding-right: 200px; `; const TextInputContainer = styled.div` padding-top: 16px; display: flex; flex-direction: column; `; const TitleArea = styled.textarea` width: 100%; border: none; background: transparent; outline: none; width: 100%; padding: 0; margin: 0; font-size: 24px; line-height: 120%; font-weight: 500; color: #fff; resize: none; overflow-y: hidden; height: auto; min-height: 50px; ::placeholder { color: #777583; } `; const TextArea = styled.textarea` width: 100%; background: #111; background: transparent; border: none; outline: none; width: 100%; padding: 0; margin: 0; font-size: 16px; line-height: 150%; font-weight: 400; color: #fff; resize: none; overflow-y: hidden; height: auto; min-height: 50px; ::placeholder { color: #777583; } `; const titleRef = useRef(null); const markdownTextRef = useRef(null); const [title, setTitle] = useState(''); const [markdownText, setMarkdownText] = useState(''); const InputText = ({ textRef, text, setText, isTitle }) => { const handleInputChange = (event) => { setText(event.target.value); if (textRef.current.textLength === 0) { textRef.current.style.height = '50px'; } if (textRef.current.scrollHeight > textRef.current.clientHeight) { const currentHeight = parseInt( textRef.current.style.height.replace('px', ''), 10, ); textRef.current.style.height = `${currentHeight + 50}px`; } }; return ( <> {isTitle ? ( <TitleArea placeholder="Untitled" value={text} ref={textRef} onChange={handleInputChange} style={{ height: '50px' }} /> ) : ( <TextArea placeholder="Write your document.." value={text} ref={textRef} onChange={handleInputChange} style={{ height: '50px' }} /> )} </> ); }; return ( <Container> <Header> <Widget src={`${componentOwnerId}/widget/Calimero.DocsChain.ArticleDialog.DocumentHeader`} /> </Header> <InputConainer> <div className="d-flex gap-2"> <Widget src={`${componentOwnerId}/widget/Calimero.DocsChain.Common.Button`} props={{ onClick: () => console.log('add'), text: 'Add Icon', icon: 'bi bi-plus-circle-fill', }} /> <Widget src={`${componentOwnerId}/widget/Calimero.DocsChain.Common.Button`} props={{ onClick: () => console.log('markdown'), text: 'Markdown help', icon: 'bi bi-question-circle-fill', }} /> </div> <TextInputContainer> <InputText textRef={titleRef} text={title} setText={setTitle} isTitle={true} /> <InputText textRef={markdownTextRef} text={markdownText} setText={setMarkdownText} isTitle={false} /> </TextInputContainer> </InputConainer> </Container> );