Docs/extension docs (remirror#1140)

sandzone · Aug 23, 2021 · 770f4d8 · 770f4d8
1 parent 08ac06c
commit 770f4d8
Show file tree

Hide file tree

Showing 20 changed files with 653 additions and 4 deletions.
diff --git a/docs/extensions/font-family-extension.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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-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
@@ -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
@@ -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"
+    }
+  ]
+}