Update react documentation

docs/concepts/react-controlled-editor.md

@@ -20,13 +20,20 @@ Get started in the usual way.
 
 ```tsx
 import React from 'react';
-import { RemirrorProvider, useRemirror, createReactManager } from 'remirror/react';
+import { RemirrorProvider, useRemirror, useManager } from 'remirror/react';
 import { BoldExtension } from 'remirror/extension/bold';
 
-const manager = createReactManager([new BoldExtension()]);
+// This is a function that returns the list of extensions and presets we want to
+// use. It's helpful to set up this way since the template can be reused
+// multiple times in your app.
+const extensionTemplate = () => [new BoldExtension()];
 
+// Adds the `RemirrorProvider` which is responsible for wrapping the editor with
+// the context and state of the rendered editor.
 const EditorWrapper = () => {
-  // This will be changed
+  // A convenient hooks for creating the manager in a react editor.
+  const manager = useManager(extensionTemplate);
+
   return (
     <RemirrorProvider manager={manager}>
       <Editor />
@@ -50,22 +57,26 @@ the `RemirrorProvider`.
 ```tsx
 // Add the `useState` hook to keep track of the state.
 import React, { useState } from 'react';
-import { RemirrorProvider, useRemirror, createReactManager } from 'remirror/react';
+import { RemirrorProvider, useRemirror, useManager } from 'remirror/react';
 import { BoldExtension } from 'remirror/extension/bold';
 
-// Add the `fromHtml` string handler import so that the initial state can be a html string.
+// Add the `fromHtml` string handler import so that the initial state can be a
+// html string.
 import { fromHtml } from 'remirror/core';
 
-const manager = createReactManager([new BoldExtension()]);
+const extensionTemplate = () => [new BoldExtension()];
 
 const EditorWrapper = () => {
-  // Create the initial value for the manager.
-  const initialValue = manager.createState({
-    content: '<p>This is the initial value</p>',
-    stringHandler: fromHtml,
-  });
-
-  const [value, setValue] = useState(initialValue);
+  const manager = useManager(extensionTemplate);
+
+  // Store the editor value in a state variable.
+  const [value, setValue] = useState(() =>
+    // Use the `remirror` manager to create the state.
+    manager.createState({
+      content: '<p>This is the initial value</p>',
+      stringHandler: fromHtml,
+    }),
+  );
 
   // Add the value and change handler to the editor.
   return (
@@ -98,12 +109,14 @@ into the editor whenever the user types any content.
 
 ```tsx
 const EditorWrapper = () => {
-  const initialValue = manager.createState({
-    content: '<p>This is the initial value</p>',
-    stringHandler: fromHtml,
-  });
+  const manager = useManager(extensionTemplate);
 
-  const [value, setValue] = useState(initialValue);
+  const [value, setValue] = useState(() =>
+    manager.createState({
+      content: '<p>This is the initial value</p>',
+      stringHandler: fromHtml,
+    }),
+  );
 
   return (
     <RemirrorProvider

docs/concepts/react-refs.md

@@ -0,0 +1,27 @@
+---
+title: React Refs
+---
+
+## Extract context as a `ref`
+
+In order to access the context properties of your editor from externally the following snippet
+should work.
+
+It makes use of the less well known `useImperativeHandle` to attach the context from the editor to
+the `ref` within a forward ref component.
+
+```tsx
+import { forwardRef, useImperativeHandle, FC } from 'react';
+import { useRemirror } from 'remirror/react';
+
+let EditorWithRef = (props: {}, ref: RemirrorContext) => {
+  const context = useRemirror();
+  const { getRootProps } = context;
+
+  useImperativeHandle(ref, () => context);
+
+  return <div {...getRootProps} />;
+};
+
+EditorWithRef = forwardRef(EditorWithRef);
+```

docs/faq.md

@@ -0,0 +1,20 @@
+---
+title: 'Frequently asked questions'
+---
+
+Some of the answers outlined here may be helpful to you if you're stuck somewhere. They're questions
+that are asked quite frequently on GitHub and in our [discord](https://remirror.io/chat) channel.
+
+### Is there any way to get the value of the editor already parsed to HTML?
+
+There's are methods available in `remirror/core`. `toHtml` which converts the provided node to a
+HTML string, and `fromHtml` which takes the html string you've provided and converts it into a value
+that can be used within remirror.
+
+To get the html string from the editor the following should work well for you.
+
+```tsx
+import { toHtml } from 'remirror/core';
+
+const htmlString = toHtml({ node: state.doc, schema: state.schema });
+```

support/website/sidebars.js

@@ -4,7 +4,7 @@ const sidebarConfig = {
     {
       type: 'category',
       label: 'Remirror',
-      items: ['introduction', 'contributing', 'tooling', 'errors', 'projects'],
+      items: ['introduction', 'contributing', 'tooling', 'errors', 'projects', 'faq'],
     },
     {
       type: 'category',
@@ -20,6 +20,7 @@ const sidebarConfig = {
         'concepts/presets',
         'concepts/remirror-manager',
         'concepts/react-controlled-editor',
+        'concepts/react-refs',
         'concepts/priority',
         'concepts/keymap',
       ],