docs: initial improvements after v1 (remirror#1010)

.changeset/config.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
   "changelog": ["@changesets/changelog-github", { "repo": "remirror/remirror" }],
-  "ignore": ["storybook-react", "support", "testing", "website", "with-next", "with-react-native"],
+  "ignore": ["storybook-react", "support", "testing", "website"],
   "updateInternalDependencies": "patch",
   "commit": false,
   "linked": [],

.changeset/fair-flowers-turn.md

@@ -0,0 +1,5 @@
+---
+'@remirror/core-utils': patch
+---
+
+`isDomNode` returns false when `document` is not defined.

.changeset/nasty-mayflies-poke.md

@@ -0,0 +1,19 @@
+---
+'create-context-state': patch
+'@remirror/dev': patch
+'@remirror/extension-react-component': patch
+'@remirror/extension-react-native-bridge': patch
+'@remirror/extension-react-ssr': patch
+'@remirror/extension-react-tables': patch
+'@remirror/react-components': patch
+'@remirror/react-core': patch
+'@remirror/react-editors': patch
+'@remirror/react-hooks': patch
+'@remirror/react-native': patch
+'@remirror/react-renderer': patch
+'@remirror/react-ssr': patch
+'@remirror/react-utils': patch
+'@remirror/styles': patch
+---
+
+Add support for `react@18` in peer dependencies.

.changeset/quick-ligers-cover.md

@@ -0,0 +1,13 @@
+---
+'jest-prosemirror': patch
+'jest-remirror': patch
+'multishift': patch
+'prosemirror-paste-rules': patch
+'prosemirror-resizable-view': patch
+'prosemirror-suggest': patch
+'prosemirror-trailing-node': patch
+'remirror': patch
+'@remirror/cli': patch
+---
+
+Upgrade dependencies.

.github/workflows/ci.yml

@@ -142,7 +142,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [14.x, 16.x]
       fail-fast: false
 
     steps:

.vscode/settings.json

@@ -28,13 +28,9 @@
   // Prettier
   "prettier.ignorePath": ".eslintignore",
 
-  // Deno
-  "deno.enable": false,
-
   // Use PNPM
   "npm.packageManager": "pnpm",
   "eslint.packageManager": "pnpm",
-  "prettier.packageManager": "pnpm",
 
   // Improve editor performance. The project is large enough to cause issues
   // when symlinks are followed.

docs/api.md

@@ -0,0 +1,8 @@
+---
+hide_title: true
+title: API
+---
+
+# API
+
+Explore the `remirror` API.

docs/commands/blur.md

@@ -0,0 +1,8 @@
+---
+hide_title: true
+title: 'blur'
+---
+
+# `blur`
+
+Blur focus from the editor and also update the selection at the same time.

docs/commands/focus.md

@@ -0,0 +1,24 @@
+---
+hide_title: true
+title: 'focus'
+---
+
+# `focus`
+
+Set the focus for the editor.
+
+If using this with chaining this should only be placed at the end of the chain. It can cause hard to debug issues when used in the middle of a chain.
+
+```tsx
+import { useCallback } from 'react';
+import { useRemirrorContext } from '@remirror/react';
+
+const MenuButton = () => {
+  const { chain } = useRemirrorContext();
+  const onClick = useCallback(() => {
+    chain.toggleBold().focus('end').run();
+  }, [chain]);
+
+  return <button onClick={onClick}>Bold</button>;
+};
+```

docs/concepts/error-handling.md

@@ -19,7 +19,7 @@ Perhaps you've removed a `NodeExtension` or `MarkExtension` from the manager sin
 
 - A node type that is unsupported by the editor (ProseMirror will throw an error).
 - A mark type that is unsupported by the editor (ProseMirror will throw an error).
-- Attributes that aren't supported (these are automatically discarded or added by ProseMirror) but can change the expected behaviour of the editor. This is the case if `schema.nodeFromJSON(json)` has attrs that don't exist on the `json.attrs`.
+- Attributes that aren't supported (these are automatically discarded or added by ProseMirror) but can change the expected behavior of the editor. This is the case if `schema.nodeFromJSON(json)` has attributes that don't exist on the `json.attrs`.
 
 ### Handling errors
 
@@ -50,4 +50,4 @@ The above editor will call the `onError` handler if there is any content that do
 
 ### Migration support
 
-Work is currently being done on the ability to automatically migrate versions of the schema when the content is first loaded.
+An [issue](https://github.com/remirror/remirror/issues/462) is being tracked to automatically migrate versions of the schema when the content is first loaded.

docs/concepts/extension.md

@@ -21,7 +21,7 @@ There are three types of `Extension`.
 
 ## Lifecycle Methods
 
-Extensions are able to completely customise the behaviour of the editor via these lifecycle methods. Even core functionality like the creation of `Schema` is built via `Extension`s. This section outlines what you're working with in extensions.
+Extensions can customise the editor via these **LifeCycle Methods**. Even core functionality like the creation of `Schema` is added to `remirror` via and `Extension`. The following is an outline of the lifecycle methods you can use while working with `remirror`.
 
 ### `onCreate`
 
@@ -42,7 +42,7 @@ This lifecycle method is called when the `EditorView` is first added by the UI l
 ### `onStateUpdate`
 
 ```ts
-function onStateUpdate(parameter: import('remirror').StateUpdateLifecycleParameter): void;
+function onStateUpdate(parameter: StateUpdateLifecycleParameter): void;
 ```
 
 This is called whenever a transaction successfully updates the `EditorState`. For controlled component this is called whenever the state value is updated.
@@ -88,7 +88,7 @@ interface ExampleOptions {
   keyBindings: CustomHandler<Record<string, () => boolean>>;
 }
 
-@extensionDecorator<ExampleOptions>({
+@extension<ExampleOptions>({
   defaultOptions: { color: 'red', backgroundColor: 'green' },
   defaultPriority: ExtensionPriority.High,
 
@@ -110,12 +110,12 @@ class ExampleExtension extends PlainExtension<ExampleOptions> {
 
 These annotations can be used to provide better intellisense support for the end user.
 
-### `extensionDecorator`
+### `extension`
 
 The extension decorator updates the static properties of the extension. If you prefer not to use decorators it can also be called as a function. The `Extension` constructor is mutated by the function call.
 
 ```ts
-extensionDecorator({ defaultSettings: { color: 'red' } })(ExampleExtension);
+extension({ defaultSettings: { color: 'red' } })(ExampleExtension);
 ```
 
 If you really don't like this pattern then you can also set the same options as static properties.
@@ -186,7 +186,7 @@ To get them to work we would change the above example extension implentation to
 import { hasTransactionChanged, StateUpdateLifecycleParameter } from 'remirror';
 import { hasStateChanged } from 'remirror/extension-positioner';
 
-@extensionDecorator<ExampleOptions>({
+@extension<ExampleOptions>({
   defaultOptions: { color: 'red', backgroundColor: 'green' },
   defaultPriority: ExtensionPriority.High,
   staticKeys: ['type'],

docs/concepts/extra-attributes.md

@@ -57,7 +57,7 @@ This example accomplishes the same things as the previous example and remirror i
 
 ### Render as data attributes
 
-You can return an array of a key value pair, to determine how your extra attribute is rendered in the DOM.
+You can return an array of a key value pair, to determine how your extra attribute is rendered in the DOM. The first value in the
 
 ```ts
 import { ParagraphExtension } from 'remirror/extension/paragraph';

docs/contributing.md

@@ -57,6 +57,36 @@ cd website
 pnpm add <package>
 ```
 
+### Adding Documentation
+
+The following command will help create a markdown file with the documentation already scaffold.
+
+```bash
+pnpm generate:docs
+```
+
+This will present you with a list of potential documentation targets.
+
+At the time of writing you will be able to select from:
+
+- `packages`
+- `extensions`
+- `commands`
+
+### Some Tips
+
+When writing new documentation consider these three questions.
+
+- **What** is this?
+  - A concise introduction.
+- **Why** does it exist?
+  - The problem that is solved.
+  - The features it enables (with examples).
+- **How** can / do I use it?
+  - Installation
+  - Examples
+  - Detailed walk through guide
+
 <br />
 
 ## Testing

docs/extensions/markdown-extension.md

@@ -0,0 +1,103 @@
+---
+hide_title: true
+title: MarkdownExtension
+---
+
+import { Example } from '@components';
+
+# `MarkdownExtension`
+
+## Summary
+
+This extension transforms the **ProseMirror** content of your editor to markdown syntax. It also transforms markdown syntax into a **ProseMirror** document.
+
+## Features
+
+### Reduced Storage
+
+Markdown can be used to reduce the storage needed for your documents. It takes less space than a JSON object describing the same editor content.
+
+The following example shows a hook which can be used to automatically persist content as markdown.
+
+<Example name="" />
+
+```ts
+import delay from 'delay';
+import { useCallback, useState } from 'react';
+import { useHelpers, useKeymap } from '@remirror/react';
+
+async function saveContent(content: string) {
+  // Fake API call
+  await delay(1000);
+}
+
+interface UseSaveHook {
+  saving: boolean;
+  error: Error | undefined;
+}
+
+// Create a hook which saves the content as markdown whenever `Ctrl-s` on Mac `Cmd-s` is pressed.
+function useSaveHook() {
+  const helpers = useHelpers();
+  const [state, setState] = useState<UseSaveHook>({ saving: false, error: undefined });
+
+  useKeymap(
+    'Mod-s',
+    useCallback(() => {
+      // Convert the editor content to markdown.
+      const markdown = helpers.getMarkdown();
+
+      setState({ saving: true, error: undefined });
+
+      saveContent(markdown)
+        .then(() => {
+          setState({ saving: false, error: undefined });
+        })
+        .catch((error) => {
+          setState({ saving: true, error });
+        });
+
+      return true;
+    }, [helpers]),
+  );
+
+  return state;
+}
+```
+
+### Transform existing Markdown
+
+If you already have a lot of markdown content this can be used to transform the markdown content into a ProseMirror `doc` node for your editor.
+
+- The entire document can be set with a markdown string.
+- Insert any markdown content into the document at any insertion point.
+
+## Usage
+
+### Installation
+
+This extension is installed for you when you install the main `remirror` package.
+
+You can use the imports in the following way.
+
+```ts
+import { MarkdownExtension, MarkdownOptions } from 'remirror/extensions';
+```
+
+To install it directly you can use
+
+The extension is provided by the `@remirror/extension-markdown` package. There are two ways of pulling it into your project.
+
+### Examples
+
+#### A pure markdown editor
+
+#### A dual editor with markdown
+
+## API
+
+### Options
+
+### Commands
+
+### Helpers

docs/hooks/use-commands.md

@@ -0,0 +1,22 @@
+---
+hide_title: true
+title: 'useCommands'
+---
+
+# `useCommands`
+
+A core hook which provides the commands for usage in your editor.
+
+```tsx
+import { useCommands } from '@remirror/react';
+
+const EditorButton = () => {
+  const commands = useCommands();
+
+  return (
+    <>
+      <button onClick={() => commands.toggleBold()}>Click me!</button>
+    </>
+  );
+};
+```

docs/installation.md

@@ -7,7 +7,7 @@ title: Installation
 
 Use the installation instruction outlined below, depending on the package manager used in your project.
 
-```bash
+```bash type=installation
 yarn add remirror @remirror/pm
 ```
 

docs/packages/remirror__extension-markdown.md

@@ -0,0 +1,14 @@
+---
+hide_title: true
+title: '@remirror/extension-markdown'
+---
+
+# `remirror__extension-markdown`
+
+## Summary
+
+<!-- Provide a concise summary of what the documentation is about. -->
+
+## Features
+
+<!-- Each feature should be placed under a sub-heading. Begin with problems this extension solves. -->