From 453a2d1115768dd8ed74d75effa454c071e8928f Mon Sep 17 00:00:00 2001 From: Ronny Roeller Date: Thu, 19 Aug 2021 17:37:46 +0200 Subject: [PATCH] docs: explain how to use basic extensions (#1101) Docs for bold, italic, strike, and underline extension --- docs/extensions/bold-extension.md | 38 +++++++++++++ docs/extensions/italic-extension.md | 38 +++++++++++++ docs/extensions/strike-extension.md | 38 +++++++++++++ docs/extensions/underline-extension.md | 38 +++++++++++++ .../__stories__/bold.stories.tsx | 38 +++++++++++++ .../__stories__/styles.css | 3 ++ .../__stories__/tsconfig.json | 53 +++++++++++++++++++ .../__stories__/italic.stories.tsx | 38 +++++++++++++ .../__stories__/styles.css | 3 ++ .../__stories__/tsconfig.json | 53 +++++++++++++++++++ .../__stories__/strike.stories.tsx | 38 +++++++++++++ .../__stories__/styles.css | 3 ++ .../__stories__/tsconfig.json | 53 +++++++++++++++++++ .../__stories__/styles.css | 3 ++ .../__stories__/tsconfig.json | 53 +++++++++++++++++++ .../__stories__/underline.stories.tsx | 41 ++++++++++++++ support/root/tsconfig.json | 12 +++++ 17 files changed, 543 insertions(+) create mode 100644 docs/extensions/bold-extension.md create mode 100644 docs/extensions/italic-extension.md create mode 100644 docs/extensions/strike-extension.md create mode 100644 docs/extensions/underline-extension.md create mode 100644 packages/remirror__extension-bold/__stories__/bold.stories.tsx create mode 100644 packages/remirror__extension-bold/__stories__/styles.css create mode 100644 packages/remirror__extension-bold/__stories__/tsconfig.json create mode 100644 packages/remirror__extension-italic/__stories__/italic.stories.tsx create mode 100644 packages/remirror__extension-italic/__stories__/styles.css create mode 100644 packages/remirror__extension-italic/__stories__/tsconfig.json create mode 100644 packages/remirror__extension-strike/__stories__/strike.stories.tsx create mode 100644 packages/remirror__extension-strike/__stories__/styles.css create mode 100644 packages/remirror__extension-strike/__stories__/tsconfig.json create mode 100644 packages/remirror__extension-underline/__stories__/styles.css create mode 100644 packages/remirror__extension-underline/__stories__/tsconfig.json create mode 100644 packages/remirror__extension-underline/__stories__/underline.stories.tsx diff --git a/docs/extensions/bold-extension.md b/docs/extensions/bold-extension.md new file mode 100644 index 0000000000..cc96554627 --- /dev/null +++ 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 new file mode 100644 index 0000000000..789aea6e6b --- /dev/null +++ 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 new file mode 100644 index 0000000000..c375cc32cb --- /dev/null +++ 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 new file mode 100644 index 0000000000..c45ff31b58 --- /dev/null +++ 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 new file mode 100644 index 0000000000..4291266e41 --- /dev/null +++ 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 ( + + ); +}; + +export const Basic = (): JSX.Element => { + const { manager, state, onChange } = useRemirror({ + extensions: extensions, + content: '

Text in bold

', + stringHandler: htmlToProsemirrorNode, + }); + + return ( + + + + + + + ); +}; diff --git a/packages/remirror__extension-bold/__stories__/styles.css b/packages/remirror__extension-bold/__stories__/styles.css new file mode 100644 index 0000000000..e45df6ea3c --- /dev/null +++ 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 new file mode 100644 index 0000000000..5019628dca --- /dev/null +++ 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/@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-italic/__stories__/italic.stories.tsx b/packages/remirror__extension-italic/__stories__/italic.stories.tsx new file mode 100644 index 0000000000..55c8ea0ae2 --- /dev/null +++ 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 ( + + ); +}; + +export const Basic = (): JSX.Element => { + const { manager, state, onChange } = useRemirror({ + extensions: extensions, + content: '

Text in italic

', + stringHandler: htmlToProsemirrorNode, + }); + + return ( + + + + + + + ); +}; diff --git a/packages/remirror__extension-italic/__stories__/styles.css b/packages/remirror__extension-italic/__stories__/styles.css new file mode 100644 index 0000000000..e45df6ea3c --- /dev/null +++ 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 new file mode 100644 index 0000000000..5019628dca --- /dev/null +++ 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/@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-strike/__stories__/strike.stories.tsx b/packages/remirror__extension-strike/__stories__/strike.stories.tsx new file mode 100644 index 0000000000..d74fbbd342 --- /dev/null +++ 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 ( + + ); +}; + +export const Basic = (): JSX.Element => { + const { manager, state, onChange } = useRemirror({ + extensions: extensions, + content: '

Text in strike

', + stringHandler: htmlToProsemirrorNode, + }); + + return ( + + + + + + + ); +}; diff --git a/packages/remirror__extension-strike/__stories__/styles.css b/packages/remirror__extension-strike/__stories__/styles.css new file mode 100644 index 0000000000..e45df6ea3c --- /dev/null +++ b/packages/remirror__extension-strike/__stories__/styles.css @@ -0,0 +1,3 @@ +.active { + font-weight: bold; +} diff --git a/packages/remirror__extension-strike/__stories__/tsconfig.json b/packages/remirror__extension-strike/__stories__/tsconfig.json new file mode 100644 index 0000000000..5019628dca --- /dev/null +++ b/packages/remirror__extension-strike/__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-underline/__stories__/styles.css b/packages/remirror__extension-underline/__stories__/styles.css new file mode 100644 index 0000000000..e45df6ea3c --- /dev/null +++ b/packages/remirror__extension-underline/__stories__/styles.css @@ -0,0 +1,3 @@ +.active { + font-weight: bold; +} diff --git a/packages/remirror__extension-underline/__stories__/tsconfig.json b/packages/remirror__extension-underline/__stories__/tsconfig.json new file mode 100644 index 0000000000..5019628dca --- /dev/null +++ b/packages/remirror__extension-underline/__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-underline/__stories__/underline.stories.tsx b/packages/remirror__extension-underline/__stories__/underline.stories.tsx new file mode 100644 index 0000000000..cf51d2ec70 --- /dev/null +++ b/packages/remirror__extension-underline/__stories__/underline.stories.tsx @@ -0,0 +1,41 @@ +import 'remirror/styles/all.css'; +import './styles.css'; + +import { UnderlineExtension } 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 / Underline' }; + +const extensions = () => [new UnderlineExtension()]; + +const UnderlineButton = () => { + const commands = useCommands(); + const active = useActive(true); + return ( + + ); +}; + +export const Basic = (): JSX.Element => { + const { manager, state, onChange } = useRemirror({ + extensions: extensions, + content: '

Text in underline

', + stringHandler: htmlToProsemirrorNode, + }); + + return ( + + + + + + + ); +}; diff --git a/support/root/tsconfig.json b/support/root/tsconfig.json index 58ba571d4c..48e31bc83f 100644 --- a/support/root/tsconfig.json +++ b/support/root/tsconfig.json @@ -125,6 +125,9 @@ { "path": "packages/remirror__extension-blockquote/src" }, + { + "path": "packages/remirror__extension-bold/__stories__" + }, { "path": "packages/remirror__extension-bold/__tests__" }, @@ -281,6 +284,9 @@ { "path": "packages/remirror__extension-image/src" }, + { + "path": "packages/remirror__extension-italic/__stories__" + }, { "path": "packages/remirror__extension-italic/__tests__" }, @@ -395,6 +401,9 @@ { "path": "packages/remirror__extension-search/src" }, + { + "path": "packages/remirror__extension-strike/__stories__" + }, { "path": "packages/remirror__extension-strike/__tests__" }, @@ -452,6 +461,9 @@ { "path": "packages/remirror__extension-trailing-node/src" }, + { + "path": "packages/remirror__extension-underline/__stories__" + }, { "path": "packages/remirror__extension-underline/__tests__" },