docs: explain how to use basic extensions (remirror#1101)

Docs for bold, italic, strike, and underline extension
sandzone · Aug 19, 2021 · 453a2d1 · 453a2d1
1 parent 8076ae5
commit 453a2d1
Show file tree

Hide file tree

Showing 17 changed files with 543 additions and 0 deletions.
diff --git a/docs/extensions/bold-extension.md b/docs/extensions/bold-extension.md
@@ -0,0 +1,38 @@
+---
+hide_title: true
+title: 'BoldExtension'
+---
+
+# `BoldExtension`
+
+## Summary
+
+When added to your editor it will provide the `toggleBold` command which makes the text under the cursor / or at the provided position range bold.
+
+## 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 { boldExtension } from 'remirror/extensions';
+```
+
+To install it directly you can use
+
+The extension is provided by the `@remirror/extension-bold` package. There are two ways of pulling it into your project.
+
+### Examples
+
+See [storybook](https://remirror.vercel.app/?path=/story/extensions-bold--basic) for examples.
+
+## API
+
+### Options
+
+### Commands
+
+### Helpers
diff --git a/docs/extensions/italic-extension.md b/docs/extensions/italic-extension.md
@@ -0,0 +1,38 @@
+---
+hide_title: true
+title: 'ItalicExtension'
+---
+
+# `ItalicExtension`
+
+## Summary
+
+The extension for adding italic marks 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 { italicExtension } from 'remirror/extensions';
+```
+
+To install it directly you can use
+
+The extension is provided by the `@remirror/extension-italic` package. There are two ways of pulling it into your project.
+
+### Examples
+
+See [storybook](https://remirror.vercel.app/?path=/story/extensions-italic--basic) for examples.
+
+## API
+
+### Options
+
+### Commands
+
+### Helpers
diff --git a/docs/extensions/strike-extension.md b/docs/extensions/strike-extension.md
@@ -0,0 +1,38 @@
+---
+hide_title: true
+title: 'StrikeExtension'
+---
+
+# `StrikeExtension`
+
+## Summary
+
+The extension for adding strike-through marks 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 { strikeExtension } from 'remirror/extensions';
+```
+
+To install it directly you can use
+
+The extension is provided by the `@remirror/extension-strike` package. There are two ways of pulling it into your project.
+
+### Examples
+
+See [storybook](https://remirror.vercel.app/?path=/story/extensions-strike--basic) for examples.
+
+## API
+
+### Options
+
+### Commands
+
+### Helpers
diff --git a/docs/extensions/underline-extension.md b/docs/extensions/underline-extension.md
@@ -0,0 +1,38 @@
+---
+hide_title: true
+title: 'UnderlineExtension'
+---
+
+# `UnderlineExtension`
+
+## Summary
+
+The extension for adding underline marks 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 { underlineExtension } from 'remirror/extensions';
+```
+
+To install it directly you can use
+
+The extension is provided by the `@remirror/extension-underline` package. There are two ways of pulling it into your project.
+
+### Examples
+
+See [storybook](https://remirror.vercel.app/?path=/story/extensions-underline--basic) for examples.
+
+## API
+
+### Options
+
+### Commands
+
+### Helpers
diff --git a/packages/remirror__extension-bold/__stories__/bold.stories.tsx b/packages/remirror__extension-bold/__stories__/bold.stories.tsx
@@ -0,0 +1,38 @@
+import 'remirror/styles/all.css';
+import './styles.css';
+
+import { BoldExtension } 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 / Bold' };
+
+const extensions = () => [new BoldExtension()];
+
+const BoldButton = () => {
+  const commands = useCommands();
+  const active = useActive(true);
+  return (
+    <button onClick={() => commands.toggleBold()} className={cx(active.bold() && 'active')}>
+      Bold
+    </button>
+  );
+};
+
+export const Basic = (): JSX.Element => {
+  const { manager, state, onChange } = useRemirror({
+    extensions: extensions,
+    content: '<p>Text in <b>bold</b></p>',
+    stringHandler: htmlToProsemirrorNode,
+  });
+
+  return (
+    <ThemeProvider>
+      <Remirror manager={manager} autoFocus onChange={onChange} state={state} autoRender='end'>
+        <BoldButton />
+        <ProsemirrorDevTools />
+      </Remirror>
+    </ThemeProvider>
+  );
+};
diff --git a/packages/remirror__extension-bold/__stories__/styles.css b/packages/remirror__extension-bold/__stories__/styles.css
@@ -0,0 +1,3 @@
+.active {
+  font-weight: bold;
+}
diff --git a/packages/remirror__extension-bold/__stories__/tsconfig.json b/packages/remirror__extension-bold/__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"
+    }
+  ]
+}
diff --git a/packages/remirror__extension-italic/__stories__/italic.stories.tsx b/packages/remirror__extension-italic/__stories__/italic.stories.tsx
@@ -0,0 +1,38 @@
+import 'remirror/styles/all.css';
+import './styles.css';
+
+import { ItalicExtension } 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 / Italic' };
+
+const extensions = () => [new ItalicExtension()];
+
+const ItalicButton = () => {
+  const commands = useCommands();
+  const active = useActive(true);
+  return (
+    <button onClick={() => commands.toggleItalic()} className={cx(active.italic() && 'active')}>
+      Italic
+    </button>
+  );
+};
+
+export const Basic = (): JSX.Element => {
+  const { manager, state, onChange } = useRemirror({
+    extensions: extensions,
+    content: '<p>Text in <i>italic</i></p>',
+    stringHandler: htmlToProsemirrorNode,
+  });
+
+  return (
+    <ThemeProvider>
+      <Remirror manager={manager} autoFocus onChange={onChange} state={state} autoRender='end'>
+        <ItalicButton />
+        <ProsemirrorDevTools />
+      </Remirror>
+    </ThemeProvider>
+  );
+};
diff --git a/packages/remirror__extension-italic/__stories__/styles.css b/packages/remirror__extension-italic/__stories__/styles.css
@@ -0,0 +1,3 @@
+.active {
+  font-weight: bold;
+}
diff --git a/packages/remirror__extension-italic/__stories__/tsconfig.json b/packages/remirror__extension-italic/__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"
+    }
+  ]
+}
diff --git a/packages/remirror__extension-strike/__stories__/strike.stories.tsx b/packages/remirror__extension-strike/__stories__/strike.stories.tsx
@@ -0,0 +1,38 @@
+import 'remirror/styles/all.css';
+import './styles.css';
+
+import { StrikeExtension } 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 / Strike' };
+
+const extensions = () => [new StrikeExtension()];
+
+const StrikeButton = () => {
+  const commands = useCommands();
+  const active = useActive(true);
+  return (
+    <button onClick={() => commands.toggleStrike()} className={cx(active.strike() && 'active')}>
+      Strike
+    </button>
+  );
+};
+
+export const Basic = (): JSX.Element => {
+  const { manager, state, onChange } = useRemirror({
+    extensions: extensions,
+    content: '<p>Text in <strike>strike</strike></p>',
+    stringHandler: htmlToProsemirrorNode,
+  });
+
+  return (
+    <ThemeProvider>
+      <Remirror manager={manager} autoFocus onChange={onChange} state={state} autoRender='end'>
+        <StrikeButton />
+        <ProsemirrorDevTools />
+      </Remirror>
+    </ThemeProvider>
+  );
+};
diff --git a/packages/remirror__extension-strike/__stories__/styles.css b/packages/remirror__extension-strike/__stories__/styles.css
@@ -0,0 +1,3 @@
+.active {
+  font-weight: bold;
+}