website/src/pages/index.js (125 lines of code) (raw):

/** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ import React from 'react'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useBaseUrl from '@docusaurus/useBaseUrl'; import Layout from '@theme/Layout'; import classnames from 'classnames'; import DraftEditorExample from '../components/DraftEditorExample'; import styles from './styles.module.css'; /** Won't render children on server */ function ClientOnly({children, fallback}) { if (typeof window === 'undefined') { return fallback || null; } return children; } function VideoContainer() { return ( <div className="container text--center margin-bottom--xl margin-top--lg"> <div className="row"> <div className="col"> <h2>Check it out in the intro video</h2> <iframe width="560" height="315" src="https://www.youtube.com/embed/YEK7SXFrJL4" title="Explain Like I'm 5: DraftJS" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen /> </div> </div> </div> ); } function Home() { const context = useDocusaurusContext(); const {siteConfig = {}} = context; return ( <Layout permalink="/" description={siteConfig.tagline}> <div className="hero hero--primary shadow--lw"> <div className="container"> <div className="row"> <div className="col"> <h1 className="hero__title">{siteConfig.title}</h1> <p className="hero__subtitle">{siteConfig.tagline}</p> <div> <Link className="button button--secondary button--lg" to={useBaseUrl('docs/getting-started')}> Get Started </Link> </div> </div> <div className="col text--center"> <img className={styles.demoGif} src={useBaseUrl('/img/demo.gif')} /> </div> </div> </div> </div> <VideoContainer /> <div className="container"> <div className="margin-vert--xl"> <div className="row"> <div className="col"> <h3>Extensible and Customizable</h3> <p> We provide the building blocks to enable the creation of a broad variety of rich text composition experiences, from basic text styles to embedded media. </p> </div> <div className="col"> <h3>Declarative Rich Text</h3> <p> Draft.js fits seamlessly into React applications, abstracting away the details of rendering, selection, and input behavior with a familiar declarative API. </p> </div> <div className="col"> <h3>Immutable Editor State</h3> <p> The Draft.js model is built with{' '} <a href="https://immutable-js.github.io/immutable-js/" target="_blank" rel="noreferrer noopener"> immutable-js </a> , offering an API with functional state updates and aggressively leveraging data persistence for scalable memory usage. </p> </div> </div> </div> <div className={classnames( 'row', 'margin-vert--xl', styles.hideOnTabletAndSmaller, )}> <ClientOnly fallback={null}> <div className="col col--6 col--offset-3"> <h2>Try it out!</h2> <p> Here's a simple example of a rich text editor built in Draft.js. </p> <div id="rich-example"> <DraftEditorExample /> </div> </div> </ClientOnly> </div> <div className="margin-vert--xl text--center"> <Link className="button button--primary button--lg" to={useBaseUrl('docs/getting-started')}> Learn more about Draft.js </Link> </div> </div> </Layout> ); } export default Home;