- {BLOCK_TYPES.map((type) =>
+ {BLOCK_TYPES.map(type => (
{
onToggle={props.onToggle}
style={type.style}
/>
- )}
+ ))}
);
};
-var INLINE_STYLES = [
+const INLINE_STYLES = [
{label: 'Bold', style: 'BOLD'},
{label: 'Italic', style: 'ITALIC'},
{label: 'Underline', style: 'UNDERLINE'},
{label: 'Monospace', style: 'CODE'},
];
-const InlineStyleControls = (props) => {
- var currentStyle = props.editorState.getCurrentInlineStyle();
+const InlineStyleControls = props => {
+ const currentStyle = props.editorState.getCurrentInlineStyle();
return (
- {INLINE_STYLES.map(type =>
+ {INLINE_STYLES.map(type => (
{
onToggle={props.onToggle}
style={type.style}
/>
- )}
+ ))}
);
};
-ReactDOM.render(
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
-
-module.exports = Index;
+export default RichEditorExample;
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
new file mode 100644
index 0000000000..2f2bd393c9
--- /dev/null
+++ b/website/src/css/custom.css
@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+
+:root {
+ --ifm-color-primary: #843131;
+ --ifm-color-primary-dark: rgb(119, 44, 44);
+ --ifm-color-primary-darker: rgb(112, 42, 42);
+ --ifm-color-primary-darkest: rgb(92, 34, 34);
+ --ifm-color-primary-light: rgb(150, 80, 80);
+ --ifm-color-primary-lighter: rgb(169, 111, 111);
+ --ifm-color-primary-lightest: rgb(194, 152, 152);
+
+ --ifm-code-font-size: 95%;
+}
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
new file mode 100755
index 0000000000..288b666d1f
--- /dev/null
+++ b/website/src/pages/index.js
@@ -0,0 +1,112 @@
+/**
+ * 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';
+
+function Home() {
+ const context = useDocusaurusContext();
+ const {siteConfig = {}} = context;
+
+ return (
+
-
-
-
-
- Draft.js
-
- Rich Text Editor Framework for React
-
- - Draft.js is a framework for building rich text editors in React, - powered by an immutable model and abstracting over cross-browser - differences. -
- -- Draft.js makes it easy to build any type of rich text input, - whether you're just looking to support a few inline text styles - or building a complex text editor for composing long-form - articles. -
- -- In Draft.js, everything is customizable – we provide the - building blocks so that you have full control over the user - interface. Here's a simple example of a rich text editor built in - Draft.js: -
- - -
+
+
+
+
+
+
+
+ {siteConfig.title}
+{siteConfig.tagline}
+
+
+ Get Started
+
+
+
+ })
+
+
+
+
+
+
+
+
+
+
+ Extensible and Customizable
++ 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. +
+
+
+ Declarative Rich Text
++ Draft.js fits seamlessly into React applications, abstracting + away the details of rendering, selection, and input behavior + with a familiar declarative API. +
+
+
+ Immutable Editor State
++ The Draft.js model is built with{' '} + + immutable-js + , offering an API with functional state updates and + aggressively leveraging data persistence for scalable memory + usage. +
+
+
+
+
+ Try it out!
++ Here's a simple example of a rich text editor built in Draft.js. +
+
+
+
+
+ Learn more about Draft.js
+
+
+