From 770f4d84b4909abb5a5afc0be56ffee6186b1b47 Mon Sep 17 00:00:00 2001
From: Ronny Roeller <ronnyroeller@users.noreply.github.com>
Date: Mon, 23 Aug 2021 16:17:37 +0200
Subject: [PATCH] Docs/extension docs (#1140)

---
 docs/extensions/font-family-extension.md      | 38 +++++++++++++
 docs/extensions/font-size-extension.md        | 38 +++++++++++++
 docs/extensions/sub-extension.md              | 38 +++++++++++++
 docs/extensions/sup-extension.md              | 38 +++++++++++++
 docs/extensions/text-case-extension.md        | 38 +++++++++++++
 .../__stories__/code-block.stories.tsx        |  2 +-
 .../__stories__/font-family.stories.tsx       | 38 +++++++++++++
 .../__stories__/tsconfig.json                 | 53 +++++++++++++++++++
 .../src/font-family-extension.ts              |  2 +-
 .../__stories__/font-size.stories.tsx         | 37 +++++++++++++
 .../__stories__/tsconfig.json                 | 53 +++++++++++++++++++
 .../__stories__/node-formatting.stories.tsx   |  2 +-
 .../react-tables-extension.stories.tsx        |  2 +-
 .../__stories__/sub.stories.tsx               | 32 +++++++++++
 .../__stories__/tsconfig.json                 | 53 +++++++++++++++++++
 .../__stories__/sup.stories.tsx               | 32 +++++++++++
 .../__stories__/tsconfig.json                 | 53 +++++++++++++++++++
 .../__stories__/text-case.stories.tsx         | 40 ++++++++++++++
 .../__stories__/tsconfig.json                 | 53 +++++++++++++++++++
 support/root/tsconfig.json                    | 15 ++++++
 20 files changed, 653 insertions(+), 4 deletions(-)
 create mode 100644 docs/extensions/font-family-extension.md
 create mode 100644 docs/extensions/font-size-extension.md
 create mode 100644 docs/extensions/sub-extension.md
 create mode 100644 docs/extensions/sup-extension.md
 create mode 100644 docs/extensions/text-case-extension.md
 create mode 100644 packages/remirror__extension-font-family/__stories__/font-family.stories.tsx
 create mode 100644 packages/remirror__extension-font-family/__stories__/tsconfig.json
 create mode 100644 packages/remirror__extension-font-size/__stories__/font-size.stories.tsx
 create mode 100644 packages/remirror__extension-font-size/__stories__/tsconfig.json
 create mode 100644 packages/remirror__extension-sub/__stories__/sub.stories.tsx
 create mode 100644 packages/remirror__extension-sub/__stories__/tsconfig.json
 create mode 100644 packages/remirror__extension-sup/__stories__/sup.stories.tsx
 create mode 100644 packages/remirror__extension-sup/__stories__/tsconfig.json
 create mode 100644 packages/remirror__extension-text-case/__stories__/text-case.stories.tsx
 create mode 100644 packages/remirror__extension-text-case/__stories__/tsconfig.json

diff --git a/docs/extensions/font-family-extension.md b/docs/extensions/font-family-extension.md
new file mode 100644
index 0000000000..9e42e0be95
--- /dev/null
+++ b/docs/extensions/font-family-extension.md
@@ -0,0 +1,38 @@
+---
+hide_title: true
+title: 'FontFamilyExtension'
+---
+
+# `FontFamilyExtension`
+
+## Summary
+
+Add a font family to the selected text (or text within a specified range).
+
+## 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 { FontFamilyExtension } from 'remirror/extensions';
+```
+
+To install it directly you can use
+
+The extension is provided by the `@remirror/extension-font-family` package. There are two ways of pulling it into your project.
+
+### Examples
+
+See [storybook](https://remirror.vercel.app/?path=/story/extensions-font-family--basic) for examples.
+
+## API
+
+### Options
+
+### Commands
+
+### Helpers
diff --git a/docs/extensions/font-size-extension.md b/docs/extensions/font-size-extension.md
new file mode 100644
index 0000000000..abf87b43c8
--- /dev/null
+++ b/docs/extensions/font-size-extension.md
@@ -0,0 +1,38 @@
+---
+hide_title: true
+title: 'FontSizeExtension'
+---
+
+# `FontSizeExtension`
+
+## Summary
+
+Add a font size to the selected text (or text within a specified range).
+
+## 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 { FontSizeExtension } from 'remirror/extensions';
+```
+
+To install it directly you can use
+
+The extension is provided by the `@remirror/extension-font-size` package. There are two ways of pulling it into your project.
+
+### Examples
+
+See [storybook](https://remirror.vercel.app/?path=/story/extensions-font-size--basic) for examples.
+
+## API
+
+### Options
+
+### Commands
+
+### Helpers
diff --git a/docs/extensions/sub-extension.md b/docs/extensions/sub-extension.md
new file mode 100644
index 0000000000..bd27cccff5
--- /dev/null
+++ b/docs/extensions/sub-extension.md
@@ -0,0 +1,38 @@
+---
+hide_title: true
+title: 'SubExtension'
+---
+
+# `SubExtension`
+
+## Summary
+
+Add a `sub` mark to the editor. This is used to mark inline text as a sub 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 { SubExtension } from 'remirror/extensions';
+```
+
+To install it directly you can use
+
+The extension is provided by the `@remirror/extension-sub` package. There are two ways of pulling it into your project.
+
+### Examples
+
+See [storybook](https://remirror.vercel.app/?path=/story/extensions-sub--basic) for examples.
+
+## API
+
+### Options
+
+### Commands
+
+### Helpers
diff --git a/docs/extensions/sup-extension.md b/docs/extensions/sup-extension.md
new file mode 100644
index 0000000000..67c992eb50
--- /dev/null
+++ b/docs/extensions/sup-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
diff --git a/docs/extensions/text-case-extension.md b/docs/extensions/text-case-extension.md
new file mode 100644
index 0000000000..99eff55586
--- /dev/null
+++ b/docs/extensions/text-case-extension.md
@@ -0,0 +1,38 @@
+---
+hide_title: true
+title: 'TextCaseExtension'
+---
+
+# `TextCaseExtension`
+
+## Summary
+
+Formatting for text casing in your 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 { TextCaseExtension } from 'remirror/extensions';
+```
+
+To install it directly you can use
+
+The extension is provided by the `@remirror/extension-textcase` package. There are two ways of pulling it into your project.
+
+### Examples
+
+See [storybook](https://remirror.vercel.app/?path=/story/extensions-textcase--basic) for examples.
+
+## API
+
+### Options
+
+### Commands
+
+### Helpers
diff --git a/packages/remirror__extension-code-block/__stories__/code-block.stories.tsx b/packages/remirror__extension-code-block/__stories__/code-block.stories.tsx
index de81882001..084ad96d3c 100644
--- a/packages/remirror__extension-code-block/__stories__/code-block.stories.tsx
+++ b/packages/remirror__extension-code-block/__stories__/code-block.stories.tsx
@@ -4,7 +4,7 @@ import { CodeBlockExtension } from 'remirror/extensions';
 import { ProsemirrorDevTools } from '@remirror/dev';
 import { Remirror, ThemeProvider, useEditorState, useRemirror } from '@remirror/react';
 
-export default { title: 'Extensions / Code Block' };
+export default { title: 'Extensions / CodeBlock' };
 
 const Dev = () => {
   const updatedState = useEditorState();
diff --git a/packages/remirror__extension-font-family/__stories__/font-family.stories.tsx b/packages/remirror__extension-font-family/__stories__/font-family.stories.tsx
new file mode 100644
index 0000000000..209ead44f4
--- /dev/null
+++ b/packages/remirror__extension-font-family/__stories__/font-family.stories.tsx
@@ -0,0 +1,38 @@
+import 'remirror/styles/all.css';
+
+import { FontFamilyExtension } from 'remirror/extensions';
+import { htmlToProsemirrorNode } from '@remirror/core';
+import { ProsemirrorDevTools } from '@remirror/dev';
+import { Remirror, ThemeProvider, useCommands, useRemirror } from '@remirror/react';
+
+export default { title: 'Extensions / FontFamily' };
+
+const extensions = () => [new FontFamilyExtension()];
+
+const FontFamilyButtons = () => {
+  const commands = useCommands();
+  return (
+    <>
+      <button onClick={() => commands.setFontFamily('serif')}>Serif</button>
+      <button onClick={() => commands.setFontFamily('sans-serif')}>Sans serif</button>
+    </>
+  );
+};
+
+export const Basic = (): JSX.Element => {
+  const { manager, state, onChange } = useRemirror({
+    extensions: extensions,
+    content:
+      '<p>Some text in <span style=" font-family:serif" data-font-family="serif">serif</span></p>',
+    stringHandler: htmlToProsemirrorNode,
+  });
+
+  return (
+    <ThemeProvider>
+      <Remirror manager={manager} autoFocus onChange={onChange} state={state} autoRender='end'>
+        <FontFamilyButtons />
+        <ProsemirrorDevTools />
+      </Remirror>
+    </ThemeProvider>
+  );
+};
diff --git a/packages/remirror__extension-font-family/__stories__/tsconfig.json b/packages/remirror__extension-font-family/__stories__/tsconfig.json
new file mode 100644
index 0000000000..5019628dca
--- /dev/null
+++ b/packages/remirror__extension-font-family/__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/@types+react@17.0.14/node_modules/@types/react/index.d.ts"
+      ],
+      "react/jsx-dev-runtime": [
+        "../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/jsx-dev-runtime.d.ts"
+      ],
+      "react/jsx-runtime": [
+        "../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/jsx-runtime.d.ts"
+      ],
+      "react-dom": [
+        "../../../node_modules/.pnpm/@types+react-dom@17.0.9/node_modules/@types/react-dom/index.d.ts"
+      ],
+      "reakit": [
+        "../../../node_modules/.pnpm/reakit@1.3.8_react-dom@17.0.2+react@17.0.2/node_modules/reakit/ts/index.d.ts"
+      ],
+      "@remirror/react": ["../../remirror__react/src/index.ts"],
+      "@storybook/react": [
+        "../../../node_modules/.pnpm/@storybook+react@6.3.4_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"
+    }
+  ]
+}
diff --git a/packages/remirror__extension-font-family/src/font-family-extension.ts b/packages/remirror__extension-font-family/src/font-family-extension.ts
index 1be084143d..0d5dd7ffad 100644
--- a/packages/remirror__extension-font-family/src/font-family-extension.ts
+++ b/packages/remirror__extension-font-family/src/font-family-extension.ts
@@ -22,7 +22,7 @@ export type FontFamilyAttributes = ProsemirrorAttributes<{
 }>;
 
 /**
- * Formatting for text casing in your editor.
+ * Add a font family to the selected text (or text within a specified range).
  */
 @extension({})
 export class FontFamilyExtension extends MarkExtension {
diff --git a/packages/remirror__extension-font-size/__stories__/font-size.stories.tsx b/packages/remirror__extension-font-size/__stories__/font-size.stories.tsx
new file mode 100644
index 0000000000..c9108f9de2
--- /dev/null
+++ b/packages/remirror__extension-font-size/__stories__/font-size.stories.tsx
@@ -0,0 +1,37 @@
+import 'remirror/styles/all.css';
+
+import { FontSizeExtension } from 'remirror/extensions';
+import { htmlToProsemirrorNode } from '@remirror/core';
+import { ProsemirrorDevTools } from '@remirror/dev';
+import { Remirror, ThemeProvider, useCommands, useRemirror } from '@remirror/react';
+
+export default { title: 'Extensions / FontSize' };
+
+const extensions = () => [new FontSizeExtension()];
+
+const FontSizeButtons = () => {
+  const commands = useCommands();
+  return (
+    <>
+      <button onClick={() => commands.setFontSize(8)}>Small</button>
+      <button onClick={() => commands.setFontSize(24)}>Large</button>
+    </>
+  );
+};
+
+export const Basic = (): JSX.Element => {
+  const { manager, state, onChange } = useRemirror({
+    extensions: extensions,
+    content: '<p>Some text to resize</p>',
+    stringHandler: htmlToProsemirrorNode,
+  });
+
+  return (
+    <ThemeProvider>
+      <Remirror manager={manager} autoFocus onChange={onChange} state={state} autoRender='end'>
+        <FontSizeButtons />
+        <ProsemirrorDevTools />
+      </Remirror>
+    </ThemeProvider>
+  );
+};
diff --git a/packages/remirror__extension-font-size/__stories__/tsconfig.json b/packages/remirror__extension-font-size/__stories__/tsconfig.json
new file mode 100644
index 0000000000..5019628dca
--- /dev/null
+++ b/packages/remirror__extension-font-size/__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/@types+react@17.0.14/node_modules/@types/react/index.d.ts"
+      ],
+      "react/jsx-dev-runtime": [
+        "../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/jsx-dev-runtime.d.ts"
+      ],
+      "react/jsx-runtime": [
+        "../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/jsx-runtime.d.ts"
+      ],
+      "react-dom": [
+        "../../../node_modules/.pnpm/@types+react-dom@17.0.9/node_modules/@types/react-dom/index.d.ts"
+      ],
+      "reakit": [
+        "../../../node_modules/.pnpm/reakit@1.3.8_react-dom@17.0.2+react@17.0.2/node_modules/reakit/ts/index.d.ts"
+      ],
+      "@remirror/react": ["../../remirror__react/src/index.ts"],
+      "@storybook/react": [
+        "../../../node_modules/.pnpm/@storybook+react@6.3.4_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"
+    }
+  ]
+}
diff --git a/packages/remirror__extension-node-formatting/__stories__/node-formatting.stories.tsx b/packages/remirror__extension-node-formatting/__stories__/node-formatting.stories.tsx
index 253923294e..a000abbb00 100644
--- a/packages/remirror__extension-node-formatting/__stories__/node-formatting.stories.tsx
+++ b/packages/remirror__extension-node-formatting/__stories__/node-formatting.stories.tsx
@@ -5,7 +5,7 @@ import { NodeFormattingExtension } from 'remirror/extensions';
 import { htmlToProsemirrorNode } from '@remirror/core';
 import { Remirror, ThemeProvider, useCommands, useRemirror } from '@remirror/react';
 
-export default { title: 'Extensions / Node Formatting' };
+export default { title: 'Extensions / NodeFormatting' };
 
 export const Basic: React.FC = () => {
   const { manager, state, onChange } = useRemirror({
diff --git a/packages/remirror__extension-react-tables/__stories__/react-tables-extension.stories.tsx b/packages/remirror__extension-react-tables/__stories__/react-tables-extension.stories.tsx
index 6e0f4f6b4a..74c3343b0d 100644
--- a/packages/remirror__extension-react-tables/__stories__/react-tables-extension.stories.tsx
+++ b/packages/remirror__extension-react-tables/__stories__/react-tables-extension.stories.tsx
@@ -16,7 +16,7 @@ import {
   useRemirrorContext,
 } from '@remirror/react';
 
-export default { title: 'Extensions / React Tables (complex)' };
+export default { title: 'Extensions / ReactTables (complex)' };
 
 const CommandMenu: React.FC = () => {
   const { commands } = useRemirrorContext();
diff --git a/packages/remirror__extension-sub/__stories__/sub.stories.tsx b/packages/remirror__extension-sub/__stories__/sub.stories.tsx
new file mode 100644
index 0000000000..8f9e4e77a3
--- /dev/null
+++ b/packages/remirror__extension-sub/__stories__/sub.stories.tsx
@@ -0,0 +1,32 @@
+import 'remirror/styles/all.css';
+
+import { SubExtension } from 'remirror/extensions';
+import { htmlToProsemirrorNode } from '@remirror/core';
+import { ProsemirrorDevTools } from '@remirror/dev';
+import { Remirror, ThemeProvider, useCommands, useRemirror } from '@remirror/react';
+
+export default { title: 'Extensions / Subscript' };
+
+const extensions = () => [new SubExtension()];
+
+const SubButton = () => {
+  const commands = useCommands();
+  return <button onClick={() => commands.toggleSubscript()}>Toggle Subscript</button>;
+};
+
+export const Basic = (): JSX.Element => {
+  const { manager, state, onChange } = useRemirror({
+    extensions: extensions,
+    content: '<p>Text in <sub>subscript</sub></p>',
+    stringHandler: htmlToProsemirrorNode,
+  });
+
+  return (
+    <ThemeProvider>
+      <Remirror manager={manager} autoFocus onChange={onChange} state={state} autoRender='end'>
+        <SubButton />
+        <ProsemirrorDevTools />
+      </Remirror>
+    </ThemeProvider>
+  );
+};
diff --git a/packages/remirror__extension-sub/__stories__/tsconfig.json b/packages/remirror__extension-sub/__stories__/tsconfig.json
new file mode 100644
index 0000000000..5019628dca
--- /dev/null
+++ b/packages/remirror__extension-sub/__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/@types+react@17.0.14/node_modules/@types/react/index.d.ts"
+      ],
+      "react/jsx-dev-runtime": [
+        "../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/jsx-dev-runtime.d.ts"
+      ],
+      "react/jsx-runtime": [
+        "../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/jsx-runtime.d.ts"
+      ],
+      "react-dom": [
+        "../../../node_modules/.pnpm/@types+react-dom@17.0.9/node_modules/@types/react-dom/index.d.ts"
+      ],
+      "reakit": [
+        "../../../node_modules/.pnpm/reakit@1.3.8_react-dom@17.0.2+react@17.0.2/node_modules/reakit/ts/index.d.ts"
+      ],
+      "@remirror/react": ["../../remirror__react/src/index.ts"],
+      "@storybook/react": [
+        "../../../node_modules/.pnpm/@storybook+react@6.3.4_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"
+    }
+  ]
+}
diff --git a/packages/remirror__extension-sup/__stories__/sup.stories.tsx b/packages/remirror__extension-sup/__stories__/sup.stories.tsx
new file mode 100644
index 0000000000..db6bb33dba
--- /dev/null
+++ b/packages/remirror__extension-sup/__stories__/sup.stories.tsx
@@ -0,0 +1,32 @@
+import 'remirror/styles/all.css';
+
+import { SupExtension } from 'remirror/extensions';
+import { htmlToProsemirrorNode } from '@remirror/core';
+import { ProsemirrorDevTools } from '@remirror/dev';
+import { Remirror, ThemeProvider, useCommands, useRemirror } from '@remirror/react';
+
+export default { title: 'Extensions / Superscript' };
+
+const extensions = () => [new SupExtension()];
+
+const SupButton = () => {
+  const commands = useCommands();
+  return <button onClick={() => commands.toggleSuperscript()}>Toggle Superscript</button>;
+};
+
+export const Basic = (): JSX.Element => {
+  const { manager, state, onChange } = useRemirror({
+    extensions: extensions,
+    content: '<p>Text in <sup>superscript</sup></p>',
+    stringHandler: htmlToProsemirrorNode,
+  });
+
+  return (
+    <ThemeProvider>
+      <Remirror manager={manager} autoFocus onChange={onChange} state={state} autoRender='end'>
+        <SupButton />
+        <ProsemirrorDevTools />
+      </Remirror>
+    </ThemeProvider>
+  );
+};
diff --git a/packages/remirror__extension-sup/__stories__/tsconfig.json b/packages/remirror__extension-sup/__stories__/tsconfig.json
new file mode 100644
index 0000000000..5019628dca
--- /dev/null
+++ b/packages/remirror__extension-sup/__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/@types+react@17.0.14/node_modules/@types/react/index.d.ts"
+      ],
+      "react/jsx-dev-runtime": [
+        "../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/jsx-dev-runtime.d.ts"
+      ],
+      "react/jsx-runtime": [
+        "../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/jsx-runtime.d.ts"
+      ],
+      "react-dom": [
+        "../../../node_modules/.pnpm/@types+react-dom@17.0.9/node_modules/@types/react-dom/index.d.ts"
+      ],
+      "reakit": [
+        "../../../node_modules/.pnpm/reakit@1.3.8_react-dom@17.0.2+react@17.0.2/node_modules/reakit/ts/index.d.ts"
+      ],
+      "@remirror/react": ["../../remirror__react/src/index.ts"],
+      "@storybook/react": [
+        "../../../node_modules/.pnpm/@storybook+react@6.3.4_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"
+    }
+  ]
+}
diff --git a/packages/remirror__extension-text-case/__stories__/text-case.stories.tsx b/packages/remirror__extension-text-case/__stories__/text-case.stories.tsx
new file mode 100644
index 0000000000..27474537d5
--- /dev/null
+++ b/packages/remirror__extension-text-case/__stories__/text-case.stories.tsx
@@ -0,0 +1,40 @@
+import 'remirror/styles/all.css';
+
+import { TextCaseExtension } from 'remirror/extensions';
+import { htmlToProsemirrorNode } from '@remirror/core';
+import { ProsemirrorDevTools } from '@remirror/dev';
+import { Remirror, ThemeProvider, useCommands, useRemirror } from '@remirror/react';
+
+export default { title: 'Extensions / TextCase' };
+
+const extensions = () => [new TextCaseExtension()];
+
+const TextCaseButton = () => {
+  const commands = useCommands();
+  return (
+    <>
+      <button onClick={() => commands.setTextCase({ casing: 'none' })}>None</button>
+      <button onClick={() => commands.setTextCase({ casing: 'uppercase' })}>Upper</button>
+      <button onClick={() => commands.setTextCase({ casing: 'lowercase' })}>Lower</button>
+      <button onClick={() => commands.setTextCase({ casing: 'capitalize' })}>Capitalize</button>
+      <button onClick={() => commands.setTextCase({ casing: 'small-caps' })}>Small caps</button>
+    </>
+  );
+};
+
+export const Basic = (): JSX.Element => {
+  const { manager, state, onChange } = useRemirror({
+    extensions: extensions,
+    content: `<p>Some text</p>`,
+    stringHandler: htmlToProsemirrorNode,
+  });
+
+  return (
+    <ThemeProvider>
+      <Remirror manager={manager} autoFocus onChange={onChange} state={state} autoRender='end'>
+        <TextCaseButton />
+        <ProsemirrorDevTools />
+      </Remirror>
+    </ThemeProvider>
+  );
+};
diff --git a/packages/remirror__extension-text-case/__stories__/tsconfig.json b/packages/remirror__extension-text-case/__stories__/tsconfig.json
new file mode 100644
index 0000000000..5019628dca
--- /dev/null
+++ b/packages/remirror__extension-text-case/__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/@types+react@17.0.14/node_modules/@types/react/index.d.ts"
+      ],
+      "react/jsx-dev-runtime": [
+        "../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/jsx-dev-runtime.d.ts"
+      ],
+      "react/jsx-runtime": [
+        "../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/jsx-runtime.d.ts"
+      ],
+      "react-dom": [
+        "../../../node_modules/.pnpm/@types+react-dom@17.0.9/node_modules/@types/react-dom/index.d.ts"
+      ],
+      "reakit": [
+        "../../../node_modules/.pnpm/reakit@1.3.8_react-dom@17.0.2+react@17.0.2/node_modules/reakit/ts/index.d.ts"
+      ],
+      "@remirror/react": ["../../remirror__react/src/index.ts"],
+      "@storybook/react": [
+        "../../../node_modules/.pnpm/@storybook+react@6.3.4_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"
+    }
+  ]
+}
diff --git a/support/root/tsconfig.json b/support/root/tsconfig.json
index 2585f79f17..c26bb8e94f 100644
--- a/support/root/tsconfig.json
+++ b/support/root/tsconfig.json
@@ -239,12 +239,18 @@
     {
       "path": "packages/remirror__extension-file/src"
     },
+    {
+      "path": "packages/remirror__extension-font-family/__stories__"
+    },
     {
       "path": "packages/remirror__extension-font-family/__tests__"
     },
     {
       "path": "packages/remirror__extension-font-family/src"
     },
+    {
+      "path": "packages/remirror__extension-font-size/__stories__"
+    },
     {
       "path": "packages/remirror__extension-font-size/__tests__"
     },
@@ -416,12 +422,18 @@
     {
       "path": "packages/remirror__extension-strike/src"
     },
+    {
+      "path": "packages/remirror__extension-sub/__stories__"
+    },
     {
       "path": "packages/remirror__extension-sub/__tests__"
     },
     {
       "path": "packages/remirror__extension-sub/src"
     },
+    {
+      "path": "packages/remirror__extension-sup/__stories__"
+    },
     {
       "path": "packages/remirror__extension-sup/__tests__"
     },
@@ -437,6 +449,9 @@
     {
       "path": "packages/remirror__extension-tables/src"
     },
+    {
+      "path": "packages/remirror__extension-text-case/__stories__"
+    },
     {
       "path": "packages/remirror__extension-text-case/__tests__"
     },