diff --git a/docs/extensions/blockquote-extension.md b/docs/extensions/blockquote-extension.md new file mode 100644 index 0000000000..246e3f54d9 --- /dev/null +++ b/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 diff --git a/docs/extensions/bold-extension.md b/docs/extensions/bold-extension.md index cc96554627..5cacd4a865 100644 --- a/docs/extensions/bold-extension.md +++ b/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 diff --git a/docs/extensions/code-extension.md b/docs/extensions/code-extension.md new file mode 100644 index 0000000000..67c992eb50 --- /dev/null +++ b/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 diff --git a/docs/extensions/italic-extension.md b/docs/extensions/italic-extension.md index 789aea6e6b..ef9bb31d80 100644 --- a/docs/extensions/italic-extension.md +++ b/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 diff --git a/docs/extensions/placeholder-extension.md b/docs/extensions/placeholder-extension.md index c7ed7fe054..a81afb8c09 100644 --- a/docs/extensions/placeholder-extension.md +++ b/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 diff --git a/docs/extensions/strike-extension.md b/docs/extensions/strike-extension.md index c375cc32cb..4d405536a2 100644 --- a/docs/extensions/strike-extension.md +++ b/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 diff --git a/docs/extensions/text-color-extension.md b/docs/extensions/text-color-extension.md new file mode 100644 index 0000000000..5422654c0b --- /dev/null +++ b/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 diff --git a/docs/extensions/underline-extension.md b/docs/extensions/underline-extension.md index c45ff31b58..dbf93bd9bc 100644 --- a/docs/extensions/underline-extension.md +++ b/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 diff --git a/packages/remirror__extension-blockquote/__stories__/blockquote.stories.tsx b/packages/remirror__extension-blockquote/__stories__/blockquote.stories.tsx new file mode 100644 index 0000000000..d83721fb78 --- /dev/null +++ b/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 ( + + ); +}; + +export const Basic = (): JSX.Element => { + const { manager, state, onChange } = useRemirror({ + extensions: extensions, + content: `

I'm a blockquote

`, + stringHandler: htmlToProsemirrorNode, + }); + + return ( + + + + + + + ); +}; diff --git a/packages/remirror__extension-blockquote/__stories__/styles.css b/packages/remirror__extension-blockquote/__stories__/styles.css new file mode 100644 index 0000000000..e45df6ea3c --- /dev/null +++ b/packages/remirror__extension-blockquote/__stories__/styles.css @@ -0,0 +1,3 @@ +.active { + font-weight: bold; +} diff --git a/packages/remirror__extension-blockquote/__stories__/tsconfig.json b/packages/remirror__extension-blockquote/__stories__/tsconfig.json new file mode 100644 index 0000000000..da86eb7b29 --- /dev/null +++ b/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/@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" + }, + { + "path": "../../remirror__theme/src" + } + ] +} diff --git a/packages/remirror__extension-code/__stories__/code.stories.tsx b/packages/remirror__extension-code/__stories__/code.stories.tsx new file mode 100644 index 0000000000..3a5d5018c5 --- /dev/null +++ b/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 ( + + ); +}; + +export const Basic = (): JSX.Element => { + const { manager, state, onChange } = useRemirror({ + extensions: extensions, + content: '

Text as code

', + stringHandler: htmlToProsemirrorNode, + }); + + return ( + + + + + + + ); +}; diff --git a/packages/remirror__extension-code/__stories__/styles.css b/packages/remirror__extension-code/__stories__/styles.css new file mode 100644 index 0000000000..e45df6ea3c --- /dev/null +++ b/packages/remirror__extension-code/__stories__/styles.css @@ -0,0 +1,3 @@ +.active { + font-weight: bold; +} diff --git a/packages/remirror__extension-code/__stories__/tsconfig.json b/packages/remirror__extension-code/__stories__/tsconfig.json new file mode 100644 index 0000000000..5019628dca --- /dev/null +++ b/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/@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-color/__stories__/text-color.stories.tsx b/packages/remirror__extension-text-color/__stories__/text-color.stories.tsx new file mode 100644 index 0000000000..be597b1f4e --- /dev/null +++ b/packages/remirror__extension-text-color/__stories__/text-color.stories.tsx @@ -0,0 +1,38 @@ +import 'remirror/styles/all.css'; + +import { TextColorExtension } 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 / TextColor' }; + +const extensions = () => [new TextColorExtension()]; + +const TextColorButton = () => { + const commands = useCommands(); + return ( + <> + + + + + ); +}; + +export const Basic = (): JSX.Element => { + const { manager, state, onChange } = useRemirror({ + extensions: extensions, + content: `

Text in red

`, + stringHandler: htmlToProsemirrorNode, + }); + + return ( + + + + + + + ); +}; diff --git a/packages/remirror__extension-text-color/__stories__/tsconfig.json b/packages/remirror__extension-text-color/__stories__/tsconfig.json new file mode 100644 index 0000000000..1ffb611666 --- /dev/null +++ b/packages/remirror__extension-text-color/__stories__/tsconfig.json @@ -0,0 +1,59 @@ +{ + "__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__i18n/src" + }, + { + "path": "../../remirror__messages/src" + }, + { + "path": "../../remirror__theme/src" + } + ] +} diff --git a/support/root/tsconfig.json b/support/root/tsconfig.json index 48e31bc83f..2585f79f17 100644 --- a/support/root/tsconfig.json +++ b/support/root/tsconfig.json @@ -119,6 +119,9 @@ { "path": "packages/remirror__extension-bidi/src" }, + { + "path": "packages/remirror__extension-blockquote/__stories__" + }, { "path": "packages/remirror__extension-blockquote/__tests__" }, @@ -152,6 +155,9 @@ { "path": "packages/remirror__extension-code-block/src" }, + { + "path": "packages/remirror__extension-code/__stories__" + }, { "path": "packages/remirror__extension-code/__tests__" }, @@ -437,6 +443,9 @@ { "path": "packages/remirror__extension-text-case/src" }, + { + "path": "packages/remirror__extension-text-color/__stories__" + }, { "path": "packages/remirror__extension-text-color/__tests__" },