docs: explain further extensions (remirror#1120)

docs/extensions/blockquote-extension.md

@@ -0,0 +1,38 @@
+---
+hide_title: true
+title: 'BlockquoteExtension'
+---
+
+# `BlockquoteExtension`
+
+## Summary
+
+Add the blockquote block to the editor.
+
+## 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 { BlockquoteExtension } from 'remirror/extensions';
+```
+
+To install it directly you can use
+
+The extension is provided by the `@remirror/extension-blockquote` package. There are two ways of pulling it into your project.
+
+### Examples
+
+See [storybook](https://remirror.vercel.app/?path=/story/extensions-blockquote--basic) for examples.
+
+## API
+
+### Options
+
+### Commands
+
+### Helpers

docs/extensions/bold-extension.md

@@ -18,7 +18,7 @@ This extension is installed for you when you install the main `remirror` package
 You can use the imports in the following way.
 
 ```ts
-import { boldExtension } from 'remirror/extensions';
+import { BoldExtension } from 'remirror/extensions';
 ```
 
 To install it directly you can use

docs/extensions/code-extension.md

@@ -0,0 +1,38 @@
+---
+hide_title: true
+title: 'CodeExtension'
+---
+
+# `CodeExtension`
+
+## Summary
+
+Add a `code` mark to the editor. This is used to mark inline text as a code snippet.
+
+## 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 { CodeExtension } from 'remirror/extensions';
+```
+
+To install it directly you can use
+
+The extension is provided by the `@remirror/extension-code` package. There are two ways of pulling it into your project.
+
+### Examples
+
+See [storybook](https://remirror.vercel.app/?path=/story/extensions-code--basic) for examples.
+
+## API
+
+### Options
+
+### Commands
+
+### Helpers

docs/extensions/italic-extension.md

@@ -18,7 +18,7 @@ This extension is installed for you when you install the main `remirror` package
 You can use the imports in the following way.
 
 ```ts
-import { italicExtension } from 'remirror/extensions';
+import { ItalicExtension } from 'remirror/extensions';
 ```
 
 To install it directly you can use

docs/extensions/placeholder-extension.md

@@ -24,7 +24,7 @@ This extension is installed for you when you install the main `remirror` package
 You can use the imports in the following way.
 
 ```ts
-import { placeholderExtension } from 'remirror/extensions';
+import { PlaceholderExtension } from 'remirror/extensions';
 ```
 
 To install it directly you can use

docs/extensions/strike-extension.md

@@ -18,7 +18,7 @@ This extension is installed for you when you install the main `remirror` package
 You can use the imports in the following way.
 
 ```ts
-import { strikeExtension } from 'remirror/extensions';
+import { StrikeExtension } from 'remirror/extensions';
 ```
 
 To install it directly you can use

docs/extensions/text-color-extension.md

@@ -0,0 +1,38 @@
+---
+hide_title: true
+title: 'TextColorExtension'
+---
+
+# `TextColorExtension`
+
+## Summary
+
+Wraps text with a styled span using the color css property.
+
+## 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 { TextColorExtension } from 'remirror/extensions';
+```
+
+To install it directly you can use
+
+The extension is provided by the `@remirror/extension-textcolor` package. There are two ways of pulling it into your project.
+
+### Examples
+
+See [storybook](https://remirror.vercel.app/?path=/story/extensions-textcolor--basic) for examples.
+
+## API
+
+### Options
+
+### Commands
+
+### Helpers

docs/extensions/underline-extension.md

@@ -18,7 +18,7 @@ This extension is installed for you when you install the main `remirror` package
 You can use the imports in the following way.
 
 ```ts
-import { underlineExtension } from 'remirror/extensions';
+import { UnderlineExtension } from 'remirror/extensions';
 ```
 
 To install it directly you can use

packages/remirror__extension-blockquote/__stories__/blockquote.stories.tsx

@@ -0,0 +1,41 @@
+import 'remirror/styles/all.css';
+import './styles.css';
+
+import { BlockquoteExtension } from 'remirror/extensions';
+import { cx, htmlToProsemirrorNode } from '@remirror/core';
+import { ProsemirrorDevTools } from '@remirror/dev';
+import { Remirror, ThemeProvider, useActive, useCommands, useRemirror } from '@remirror/react';
+
+export default { title: 'Extensions / Blockquote' };
+
+const extensions = () => [new BlockquoteExtension()];
+
+const BlockquoteButton = () => {
+  const commands = useCommands();
+  const active = useActive(true);
+  return (
+    <button
+      onClick={() => commands.toggleBlockquote()}
+      className={cx(active.blockquote() && 'active')}
+    >
+      Blockquote
+    </button>
+  );
+};
+
+export const Basic = (): JSX.Element => {
+  const { manager, state, onChange } = useRemirror({
+    extensions: extensions,
+    content: `<blockquote><p>I'm a blockquote</p></blockquote>`,
+    stringHandler: htmlToProsemirrorNode,
+  });
+
+  return (
+    <ThemeProvider>
+      <Remirror manager={manager} autoFocus onChange={onChange} state={state} autoRender='end'>
+        <BlockquoteButton />
+        <ProsemirrorDevTools />
+      </Remirror>
+    </ThemeProvider>
+  );
+};

packages/remirror__extension-blockquote/__stories__/styles.css

@@ -0,0 +1,3 @@
+.active {
+  font-weight: bold;
+}

packages/remirror__extension-blockquote/__stories__/tsconfig.json

@@ -0,0 +1,56 @@
+{
+  "__AUTO_GENERATED__": [
+    "To update the configuration edit the following field.",
+    "`package.json > @remirror > tsconfigs > '__stories__'`",
+    "",
+    "Then run: `pnpm -w generate:ts`"
+  ],
+  "extends": "../../../support/tsconfig.base.json",
+  "compilerOptions": {
+    "types": [],
+    "declaration": false,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "importsNotUsedAsValues": "remove",
+    "paths": {
+      "react": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts"
+      ],
+      "react/jsx-dev-runtime": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react/jsx-dev-runtime.d.ts"
+      ],
+      "react/jsx-runtime": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react/jsx-runtime.d.ts"
+      ],
+      "react-dom": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react-dom/index.d.ts"
+      ],
+      "reakit": [
+        "../../../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/reakit/ts/index.d.ts"
+      ],
+      "@remirror/react": ["../../remirror__react/src/index.ts"],
+      "@storybook/react": [
+        "../../../node_modules/.pnpm/@[email protected]_dfad392d5450b8683a621f3ec486af19/node_modules/@storybook/react/types-6-0.d.ts"
+      ],
+      "@remirror/dev": ["../../remirror__dev/src/index.ts"]
+    }
+  },
+  "include": ["./"],
+  "references": [
+    {
+      "path": "../../testing/src"
+    },
+    {
+      "path": "../../remirror/src"
+    },
+    {
+      "path": "../../remirror__core/src"
+    },
+    {
+      "path": "../../remirror__messages/src"
+    },
+    {
+      "path": "../../remirror__theme/src"
+    }
+  ]
+}

packages/remirror__extension-code/__stories__/code.stories.tsx

@@ -0,0 +1,38 @@
+import 'remirror/styles/all.css';
+import './styles.css';
+
+import { CodeExtension } from 'remirror/extensions';
+import { cx, htmlToProsemirrorNode } from '@remirror/core';
+import { ProsemirrorDevTools } from '@remirror/dev';
+import { Remirror, ThemeProvider, useActive, useCommands, useRemirror } from '@remirror/react';
+
+export default { title: 'Extensions / Code' };
+
+const extensions = () => [new CodeExtension()];
+
+const CodeButton = () => {
+  const commands = useCommands();
+  const active = useActive(true);
+  return (
+    <button onClick={() => commands.toggleCode()} className={cx(active.code() && 'active')}>
+      Code
+    </button>
+  );
+};
+
+export const Basic = (): JSX.Element => {
+  const { manager, state, onChange } = useRemirror({
+    extensions: extensions,
+    content: '<p>Text as <code>code</code></p>',
+    stringHandler: htmlToProsemirrorNode,
+  });
+
+  return (
+    <ThemeProvider>
+      <Remirror manager={manager} autoFocus onChange={onChange} state={state} autoRender='end'>
+        <CodeButton />
+        <ProsemirrorDevTools />
+      </Remirror>
+    </ThemeProvider>
+  );
+};

packages/remirror__extension-code/__stories__/styles.css

@@ -0,0 +1,3 @@
+.active {
+  font-weight: bold;
+}

packages/remirror__extension-code/__stories__/tsconfig.json

@@ -0,0 +1,53 @@
+{
+  "__AUTO_GENERATED__": [
+    "To update the configuration edit the following field.",
+    "`package.json > @remirror > tsconfigs > '__stories__'`",
+    "",
+    "Then run: `pnpm -w generate:ts`"
+  ],
+  "extends": "../../../support/tsconfig.base.json",
+  "compilerOptions": {
+    "types": [],
+    "declaration": false,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "importsNotUsedAsValues": "remove",
+    "paths": {
+      "react": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts"
+      ],
+      "react/jsx-dev-runtime": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react/jsx-dev-runtime.d.ts"
+      ],
+      "react/jsx-runtime": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react/jsx-runtime.d.ts"
+      ],
+      "react-dom": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react-dom/index.d.ts"
+      ],
+      "reakit": [
+        "../../../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/reakit/ts/index.d.ts"
+      ],
+      "@remirror/react": ["../../remirror__react/src/index.ts"],
+      "@storybook/react": [
+        "../../../node_modules/.pnpm/@[email protected]_dfad392d5450b8683a621f3ec486af19/node_modules/@storybook/react/types-6-0.d.ts"
+      ],
+      "@remirror/dev": ["../../remirror__dev/src/index.ts"]
+    }
+  },
+  "include": ["./"],
+  "references": [
+    {
+      "path": "../../testing/src"
+    },
+    {
+      "path": "../../remirror/src"
+    },
+    {
+      "path": "../../remirror__core/src"
+    },
+    {
+      "path": "../../remirror__messages/src"
+    }
+  ]
+}