diff --git a/docs/extensions/code-block-extension.md b/docs/extensions/code-block-extension.md new file mode 100644 index 0000000000..5aa64caca5 --- /dev/null +++ b/docs/extensions/code-block-extension.md @@ -0,0 +1,38 @@ +--- +hide_title: true +title: 'CodeBlockExtension' +--- + +# `CodeBlockExtension` + +## Summary + +Adds code blocks to the editor. This differs to the `CodeExtension`, which provides code marks on inline text. + +## 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 { CodeBlockExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-code-block` package. There are two ways of pulling it into your project. + +### Examples + +See [storybook](https://remirror.vercel.app/?path=/story/extensions-codeblock--basic) for examples. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/collaboration-extension.md b/docs/extensions/collaboration-extension.md new file mode 100644 index 0000000000..df380f3767 --- /dev/null +++ b/docs/extensions/collaboration-extension.md @@ -0,0 +1,36 @@ +--- +hide_title: true +title: 'CollaborationExtension' +--- + +# `CollaborationExtension` + +## Summary + +The collaboration extension adds collaborative functionality to your editor. + +Once a central server is created the collaboration extension is good. + +## 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 { CollaborationExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-collaboration` package. There are two ways of pulling it into your project. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/columns-extension.md b/docs/extensions/columns-extension.md new file mode 100644 index 0000000000..0fbc5a415a --- /dev/null +++ b/docs/extensions/columns-extension.md @@ -0,0 +1,38 @@ +--- +hide_title: true +title: 'ColumnsExtension' +--- + +# `ColumnsExtension` + +## Summary + +Add column support to the nodes 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 { ColumnsExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-columns` package. There are two ways of pulling it into your project. + +### Examples + +See [storybook](https://remirror.vercel.app/?path=/story/extensions-columns--basic) for examples. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/drop-cursor-extension.md b/docs/extensions/drop-cursor-extension.md new file mode 100644 index 0000000000..8aee92509b --- /dev/null +++ b/docs/extensions/drop-cursor-extension.md @@ -0,0 +1,34 @@ +--- +hide_title: true +title: 'DropCursorExtension' +--- + +# `DropCursorExtension` + +## Summary + +Shows a line indicator for where the drop target will be + +## 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 { DropCursorExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-drop-cursor` package. There are two ways of pulling it into your project. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/emoji-extension.md b/docs/extensions/emoji-extension.md new file mode 100644 index 0000000000..b12da544b6 --- /dev/null +++ b/docs/extensions/emoji-extension.md @@ -0,0 +1,34 @@ +--- +hide_title: true +title: 'EmojiExtension' +--- + +# `EmojiExtension` + +## Summary + +Adds emoji support 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 { EmojiExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-emoji` package. There are two ways of pulling it into your project. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/epic-mode-extension.md b/docs/extensions/epic-mode-extension.md new file mode 100644 index 0000000000..d66639f8b6 --- /dev/null +++ b/docs/extensions/epic-mode-extension.md @@ -0,0 +1,38 @@ +--- +hide_title: true +title: 'EpicModeExtension' +--- + +# `EpicModeExtension` + +## Summary + +Shows the editor in epic mode. + +## 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 { EpicModeExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-epicmode` package. There are two ways of pulling it into your project. + +### Examples + +See [storybook](https://remirror.vercel.app/?path=/story/extensions-epicmode--basic) for examples. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/events-extension.md b/docs/extensions/events-extension.md new file mode 100644 index 0000000000..bf964da380 --- /dev/null +++ b/docs/extensions/events-extension.md @@ -0,0 +1,34 @@ +--- +hide_title: true +title: 'EventsExtension' +--- + +# `EventsExtension` + +## Summary + +The events extension which listens to events which occur within the remirror 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 { EventsExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-events` package. There are two ways of pulling it into your project. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/file-extension.md b/docs/extensions/file-extension.md new file mode 100644 index 0000000000..4e6227bd4e --- /dev/null +++ b/docs/extensions/file-extension.md @@ -0,0 +1,38 @@ +--- +hide_title: true +title: 'FileExtension' +--- + +# `FileExtension` + +## Summary + +Adds a file node 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 { FileExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-file` package. There are two ways of pulling it into your project. + +### Examples + +See [storybook](https://remirror.vercel.app/?path=/story/extensions-file--basic) for examples. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/gap-cursor-extension.md b/docs/extensions/gap-cursor-extension.md new file mode 100644 index 0000000000..7a439b7c95 --- /dev/null +++ b/docs/extensions/gap-cursor-extension.md @@ -0,0 +1,40 @@ +--- +hide_title: true +title: 'GapCursorExtension' +--- + +# `GapCursorExtension` + +## Summary + +this will capture clicks near and arrow-key-motion past places that don't have a normally selectable position nearby, and create a gap cursor selection for them. The cursor is drawn as an element with class `ProseMirror-gapcursor`. + +Make sure to import the styles: + +```ts +import '@remirror/styles/extension-gap-cursor.css'; +``` + +## 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 { GapCursorExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-gap-cursor` package. There are two ways of pulling it into your project. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/hard-break-extension.md b/docs/extensions/hard-break-extension.md new file mode 100644 index 0000000000..996cad6ec2 --- /dev/null +++ b/docs/extensions/hard-break-extension.md @@ -0,0 +1,40 @@ +--- +hide_title: true +title: 'HardBreakExtension' +--- + +# `HardBreakExtension` + +## Summary + +An extension which provides the functionality for inserting a `hardBreak` `
` tag into the editor. + +It will automatically exit when used inside a `codeClock`. To prevent problems occurring when the codeblock is the last node in the doc, you should add the `TrailingNodeExtension` which automatically appends a paragraph node to the last node. + +## 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 { HardBreakExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-hard-break` package. There are two ways of pulling it into your project. + +### Examples + +See [storybook](https://remirror.vercel.app/?path=/story/extensions-hard-break--basic) for examples. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/heading-extension.md b/docs/extensions/heading-extension.md new file mode 100644 index 0000000000..b164c4ec6b --- /dev/null +++ b/docs/extensions/heading-extension.md @@ -0,0 +1,38 @@ +--- +hide_title: true +title: 'HeadingExtension' +--- + +# `HeadingExtension` + +## Summary + +Adds headings 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 { HeadingExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-heading` package. There are two ways of pulling it into your project. + +### Examples + +See [storybook](https://remirror.vercel.app/?path=/story/extensions-heading--basic) for examples. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/history-extension.md b/docs/extensions/history-extension.md new file mode 100644 index 0000000000..832d769b40 --- /dev/null +++ b/docs/extensions/history-extension.md @@ -0,0 +1,34 @@ +--- +hide_title: true +title: 'HistoryExtension' +--- + +# `HistoryExtension` + +## Summary + +This extension provides undo and redo commands and inserts a plugin which handles history related actions. + +## 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 { HistoryExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-history` package. There are two ways of pulling it into your project. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/horizontal-rule-extension.md b/docs/extensions/horizontal-rule-extension.md new file mode 100644 index 0000000000..7ae2b2cd8c --- /dev/null +++ b/docs/extensions/horizontal-rule-extension.md @@ -0,0 +1,38 @@ +--- +hide_title: true +title: 'HorizontalRuleExtension' +--- + +# `HorizontalRuleExtension` + +## Summary + +Adds a horizontal line 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 { HorizontalRuleExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-horizontal-rule` package. There are two ways of pulling it into your project. + +### Examples + +See [storybook](https://remirror.vercel.app/?path=/story/extensions-horizontal-rule--basic) for examples. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/image-extension.md b/docs/extensions/image-extension.md new file mode 100644 index 0000000000..442fd8d6fe --- /dev/null +++ b/docs/extensions/image-extension.md @@ -0,0 +1,38 @@ +--- +hide_title: true +title: 'ImageExtension' +--- + +# `ImageExtension` + +## Summary + +The image extension for placing images into 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 { ImageExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-image` package. There are two ways of pulling it into your project. + +### Examples + +See [storybook](https://remirror.vercel.app/?path=/story/extensions-image--basic) for examples. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/list-extension.md b/docs/extensions/list-extension.md new file mode 100644 index 0000000000..5d1d57c0e3 --- /dev/null +++ b/docs/extensions/list-extension.md @@ -0,0 +1,38 @@ +--- +hide_title: true +title: 'ListExtension' +--- + +# `ListExtension` + +## Summary + +Adds ordered lists, unordered lists, and checklists 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 { ListExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-list` package. There are two ways of pulling it into your project. + +### Examples + +See [storybook](https://remirror.vercel.app/?path=/story/extensions-list--basic) for examples. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/mention-extension-atom.md b/docs/extensions/mention-extension-atom.md new file mode 100644 index 0000000000..bb6ab962f2 --- /dev/null +++ b/docs/extensions/mention-extension-atom.md @@ -0,0 +1,40 @@ +--- +hide_title: true +title: 'MentionAtomExtension' +--- + +# `MentionAtomExtension` + +## Summary + +This is the atom version of the `MentionExtension`. + +It provides mentions as atom nodes which don't support editing once being inserted into the document. + +## 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 { MentionAtomExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-mention-atom` package. There are two ways of pulling it into your project. + +### Examples + +See [storybook](https://remirror.vercel.app/?path=/story/react-hooks-usementionatom--basic) for examples. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/mention-extension.md b/docs/extensions/mention-extension.md new file mode 100644 index 0000000000..32f7626768 --- /dev/null +++ b/docs/extensions/mention-extension.md @@ -0,0 +1,48 @@ +--- +hide_title: true +title: 'MentionExtension' +--- + +# `MentionExtension` + +## Summary + +The mention extension wraps mentions as a prosemirror mark. It allows for fluid social experiences to be built. The implementation was inspired by the way twitter and similar social sites allows mentions to be edited after they've been created. + +## Features + +Mentions have the following features + +- An activation character or regex pattern which you define. +- A min number of characters before mentions are suggested +- Ability to exclude matching character. +- Ability to wrap content in a decoration which excludes mentions from being suggested. +- Decorations for in-progress mentions + +## 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 { MentionExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-mention` package. There are two ways of pulling it into your project. + +### Examples + +See [storybook](https://remirror.vercel.app/?path=/story/react-hooks-usemention--basic) for examples. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/positioner-extension.md b/docs/extensions/positioner-extension.md new file mode 100644 index 0000000000..1066a07f23 --- /dev/null +++ b/docs/extensions/positioner-extension.md @@ -0,0 +1,40 @@ +--- +hide_title: true +title: 'PositionerExtension' +--- + +# `PositionerExtension` + +## Summary + +This is the positioner extension which is used to track the positions of different parts of your editor. + +For example, you can track the cursor or all visible paragraph nodes. + +## 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 { PositionerExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-positioner` package. There are two ways of pulling it into your project. + +### Examples + +See [storybook](https://remirror.vercel.app/?path=/story/extensions-positioner--basic) for examples. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/search-extension.md b/docs/extensions/search-extension.md new file mode 100644 index 0000000000..9aacdb33ba --- /dev/null +++ b/docs/extensions/search-extension.md @@ -0,0 +1,34 @@ +--- +hide_title: true +title: 'SearchExtension' +--- + +# `SearchExtension` + +## Summary + +This extension add search functionality to 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 { SearchExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-search` package. There are two ways of pulling it into your project. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/sub-extension.md b/docs/extensions/sub-extension.md index bd27cccff5..00905ee533 100644 --- a/docs/extensions/sub-extension.md +++ b/docs/extensions/sub-extension.md @@ -7,7 +7,7 @@ title: 'SubExtension' ## Summary -Add a `sub` mark to the editor. This is used to mark inline text as a sub snippet. +Add a `sub` mark to the editor. This is used to mark inline text as a subscript snippet. ## Usage diff --git a/docs/extensions/sup-extension.md b/docs/extensions/sup-extension.md index 67c992eb50..4a487b070b 100644 --- a/docs/extensions/sup-extension.md +++ b/docs/extensions/sup-extension.md @@ -1,13 +1,13 @@ --- hide_title: true -title: 'CodeExtension' +title: 'SupExtension' --- -# `CodeExtension` +# `SupExtension` ## Summary -Add a `code` mark to the editor. This is used to mark inline text as a code snippet. +Add a `sup` mark to the editor. This is used to mark inline text as a superscript snippet. ## Usage @@ -18,16 +18,16 @@ 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'; +import { SupExtension } 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. +The extension is provided by the `@remirror/extension-sup` 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. +See [storybook](https://remirror.vercel.app/?path=/story/extensions-sup--basic) for examples. ## API diff --git a/docs/extensions/text-highlight-extension.md b/docs/extensions/text-highlight-extension.md new file mode 100644 index 0000000000..d0f7181ae9 --- /dev/null +++ b/docs/extensions/text-highlight-extension.md @@ -0,0 +1,38 @@ +--- +hide_title: true +title: 'TextHighlightExtension' +--- + +# `TextHighlightExtension` + +## Summary + +Add a highlight color 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 { TextHighlightExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-text-highlight` package. There are two ways of pulling it into your project. + +### Examples + +See [storybook](https://remirror.vercel.app/?path=/story/extensions-text-highlight--basic) for examples. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/trailing-node-extension.md b/docs/extensions/trailing-node-extension.md new file mode 100644 index 0000000000..ca21be43b8 --- /dev/null +++ b/docs/extensions/trailing-node-extension.md @@ -0,0 +1,36 @@ +--- +hide_title: true +title: 'TrailingNodeExtension' +--- + +# `TrailingNodeExtension` + +## Summary + +Ensure that there's always a trailing paragraph at the end of the document. + +Why? In some scenarios it is difficult to place a cursor after the last element. This ensures there's always space to select the position afterward. + +## 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 { TrailingNodeExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-trailing-node` package. There are two ways of pulling it into your project. + +## API + +### Options + +### Commands + +### Helpers diff --git a/docs/extensions/whitespace-extension.md b/docs/extensions/whitespace-extension.md new file mode 100644 index 0000000000..296693d236 --- /dev/null +++ b/docs/extensions/whitespace-extension.md @@ -0,0 +1,36 @@ +--- +hide_title: true +title: 'WhitespaceExtension' +--- + +# `WhitespaceExtension` + +## Summary + +Manage whitespace characters within your editor. + +This adds decorators to the editor to represent the whitespace characters and can be useful for increasing the accessibility of 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 { WhitespaceExtension } from 'remirror/extensions'; +``` + +To install it directly you can use + +The extension is provided by the `@remirror/extension-whitespace` package. There are two ways of pulling it into your project. + +## API + +### Options + +### Commands + +### Helpers diff --git a/packages/remirror__extension-columns/__stories__/columns.stories.tsx b/packages/remirror__extension-columns/__stories__/columns.stories.tsx new file mode 100644 index 0000000000..e4c40b0ee1 --- /dev/null +++ b/packages/remirror__extension-columns/__stories__/columns.stories.tsx @@ -0,0 +1,54 @@ +import 'remirror/styles/all.css'; + +import { ColumnAttributes, ColumnsExtension } 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 / Columns' }; + +const extensions = () => [new ColumnsExtension()]; + +const TWO_COLUMNS: ColumnAttributes = { + count: 2, + fill: 'balance', + ruleColor: 'darkred', + ruleStyle: 'dashed', + ruleWidth: 'thick', + gap: '5em', +}; +const THREE_COLUMNS: ColumnAttributes = { + count: 3, +}; + +const ColumnsButton = () => { + const commands = useCommands(); + return ( + <> + + + + ); +}; + +export const Basic = (): JSX.Element => { + const { manager, state, onChange } = useRemirror({ + extensions: extensions, + content: + '

Remirror is a wrapper library for ProseMirror, it is an abstraction layer that makes ProseMirror easier to work with, and provides React and ProseMirror integration. ProseMirror is a toolkit for building rich text editors, it is not an out-the-box solution like Draft.JS for instance. This means ProseMirror has a steep learning curve - there are many concepts and terms to learn, and it can be difficult to structure you codebase in a logic manner. Remirror provides extensions, that abstract over various ProseMirror concepts such as schemas, commands and plugins, making it much simpler to group related logic together. Think of Remirror like Lego, you can follow the instructions to construct an out-of-the-box style editor, or as the basis of something much more bespoke, via its commands, helpers and hooks. This means we can provide both "out-of-the-box" and "bespoke" experiences, maintaining the power and flexibility that ProseMirror is known for.

', + stringHandler: htmlToProsemirrorNode, + }); + + return ( + +
+ To try out the other column config: Click again the same button to remove the current column + config. +
+ + + + + + ); +}; diff --git a/packages/remirror__extension-columns/__stories__/tsconfig.json b/packages/remirror__extension-columns/__stories__/tsconfig.json new file mode 100644 index 0000000000..5019628dca --- /dev/null +++ b/packages/remirror__extension-columns/__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-epic-mode/__stories__/epic-mode.stories.tsx b/packages/remirror__extension-epic-mode/__stories__/epic-mode.stories.tsx new file mode 100644 index 0000000000..44f0313f56 --- /dev/null +++ b/packages/remirror__extension-epic-mode/__stories__/epic-mode.stories.tsx @@ -0,0 +1,26 @@ +import 'remirror/styles/all.css'; + +import { EpicModeExtension } from 'remirror/extensions'; +import { htmlToProsemirrorNode } from '@remirror/core'; +import { ProsemirrorDevTools } from '@remirror/dev'; +import { Remirror, ThemeProvider, useRemirror } from '@remirror/react'; + +export default { title: 'Extensions / EpicMode' }; + +const extensions = () => [new EpicModeExtension()]; + +export const Basic = (): JSX.Element => { + const { manager, state, onChange } = useRemirror({ + extensions: extensions, + content: '

Some text

', + stringHandler: htmlToProsemirrorNode, + }); + + return ( + + + + + + ); +}; diff --git a/packages/remirror__extension-epic-mode/__stories__/tsconfig.json b/packages/remirror__extension-epic-mode/__stories__/tsconfig.json new file mode 100644 index 0000000000..5019628dca --- /dev/null +++ b/packages/remirror__extension-epic-mode/__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-file/src/file-extension.tsx b/packages/remirror__extension-file/src/file-extension.tsx index eb8ff5fcba..14b5259860 100644 --- a/packages/remirror__extension-file/src/file-extension.tsx +++ b/packages/remirror__extension-file/src/file-extension.tsx @@ -43,6 +43,9 @@ export interface FileOptions { onDeleteFile?: Handler<(props: { tr: Transaction; pos: number; node: ProsemirrorNode }) => void>; } +/** + * Adds a file node to the editor + */ @extension({ defaultOptions: { uploadFileHandler: createDataUrlFileUploader, diff --git a/packages/remirror__extension-hard-break/__stories__/hard-break.stories.tsx b/packages/remirror__extension-hard-break/__stories__/hard-break.stories.tsx new file mode 100644 index 0000000000..2ebcff2afc --- /dev/null +++ b/packages/remirror__extension-hard-break/__stories__/hard-break.stories.tsx @@ -0,0 +1,32 @@ +import 'remirror/styles/all.css'; + +import { HardBreakExtension } 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 / HardBreak' }; + +const extensions = () => [new HardBreakExtension()]; + +const HardBreakButton = () => { + const commands = useCommands(); + return ; +}; + +export const Basic = (): JSX.Element => { + const { manager, state, onChange } = useRemirror({ + extensions: extensions, + content: '

Text with
hard break

', + stringHandler: htmlToProsemirrorNode, + }); + + return ( + + + + + + + ); +}; diff --git a/packages/remirror__extension-hard-break/__stories__/tsconfig.json b/packages/remirror__extension-hard-break/__stories__/tsconfig.json new file mode 100644 index 0000000000..5019628dca --- /dev/null +++ b/packages/remirror__extension-hard-break/__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-hard-break/src/hard-break-extension.ts b/packages/remirror__extension-hard-break/src/hard-break-extension.ts index d86559e3e7..3258dd4a2e 100644 --- a/packages/remirror__extension-hard-break/src/hard-break-extension.ts +++ b/packages/remirror__extension-hard-break/src/hard-break-extension.ts @@ -30,7 +30,7 @@ export interface HardBreakOptions { * It will automatically exit when used inside a `codeClock`. To * prevent problems occurring when the codeblock is the last node in the * doc, you should add the `TrailingNodeExtension` which automatically appends a - * paragraph node to the last node.. + * paragraph node to the last node. */ @extension({ defaultPriority: ExtensionPriority.Low, diff --git a/packages/remirror__extension-heading/__stories__/heading.stories.tsx b/packages/remirror__extension-heading/__stories__/heading.stories.tsx new file mode 100644 index 0000000000..9b5baeebb6 --- /dev/null +++ b/packages/remirror__extension-heading/__stories__/heading.stories.tsx @@ -0,0 +1,41 @@ +import 'remirror/styles/all.css'; + +import { HeadingExtension } 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 / Heading' }; + +const extensions = () => [new HeadingExtension()]; + +const HeadingButtons = () => { + const commands = useCommands(); + return ( + <> + + + + + + + + ); +}; + +export const Basic = (): JSX.Element => { + const { manager, state, onChange } = useRemirror({ + extensions: extensions, + content: `

Heading 1

Heading 2

Heading 3

`, + stringHandler: htmlToProsemirrorNode, + }); + + return ( + + + + + + + ); +}; diff --git a/packages/remirror__extension-heading/__stories__/tsconfig.json b/packages/remirror__extension-heading/__stories__/tsconfig.json new file mode 100644 index 0000000000..5019628dca --- /dev/null +++ b/packages/remirror__extension-heading/__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-horizontal-rule/__stories__/horizontal-rule.stories.tsx b/packages/remirror__extension-horizontal-rule/__stories__/horizontal-rule.stories.tsx new file mode 100644 index 0000000000..6c1f5615c3 --- /dev/null +++ b/packages/remirror__extension-horizontal-rule/__stories__/horizontal-rule.stories.tsx @@ -0,0 +1,32 @@ +import 'remirror/styles/all.css'; + +import { HorizontalRuleExtension } 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 / HorizontalRule' }; + +const extensions = () => [new HorizontalRuleExtension()]; + +const HorizontalRuleButton = () => { + const commands = useCommands(); + return ; +}; + +export const Basic = (): JSX.Element => { + const { manager, state, onChange } = useRemirror({ + extensions: extensions, + content: '

Text in

with horizontal rule

', + stringHandler: htmlToProsemirrorNode, + }); + + return ( + + + + + + + ); +}; diff --git a/packages/remirror__extension-horizontal-rule/__stories__/tsconfig.json b/packages/remirror__extension-horizontal-rule/__stories__/tsconfig.json new file mode 100644 index 0000000000..5019628dca --- /dev/null +++ b/packages/remirror__extension-horizontal-rule/__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-positioner/__stories__/positioner-extension.stories.tsx b/packages/remirror__extension-positioner/__stories__/positioner-extension.stories.tsx index f4cc9e1074..9bd3c4c1a3 100644 --- a/packages/remirror__extension-positioner/__stories__/positioner-extension.stories.tsx +++ b/packages/remirror__extension-positioner/__stories__/positioner-extension.stories.tsx @@ -56,7 +56,7 @@ const FloatingButtons = () => { ); }; -export const CursorPositioner: FC = () => { +export const Basic: FC = () => { const { manager, state, onChange } = useRemirror({ extensions }); return ( diff --git a/packages/remirror__extension-text-highlight/__stories__/text-highlight.stories.tsx b/packages/remirror__extension-text-highlight/__stories__/text-highlight.stories.tsx new file mode 100644 index 0000000000..cff8ad079c --- /dev/null +++ b/packages/remirror__extension-text-highlight/__stories__/text-highlight.stories.tsx @@ -0,0 +1,38 @@ +import 'remirror/styles/all.css'; + +import { TextHighlightExtension } 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 / TextHighlight' }; + +const extensions = () => [new TextHighlightExtension()]; + +const HighlightButtons = () => { + const commands = useCommands(); + return ( + <> + + + + + ); +}; + +export const Basic = (): JSX.Element => { + const { manager, state, onChange } = useRemirror({ + extensions: extensions, + content: `

Some text

`, + stringHandler: htmlToProsemirrorNode, + }); + + return ( + + + + + + + ); +}; diff --git a/packages/remirror__extension-text-highlight/__stories__/tsconfig.json b/packages/remirror__extension-text-highlight/__stories__/tsconfig.json new file mode 100644 index 0000000000..4d440a8851 --- /dev/null +++ b/packages/remirror__extension-text-highlight/__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__extension-text-color/src" + }, + { + "path": "../../remirror__messages/src" + } + ] +} diff --git a/support/root/tsconfig.json b/support/root/tsconfig.json index c26bb8e94f..6cc9bb05c2 100644 --- a/support/root/tsconfig.json +++ b/support/root/tsconfig.json @@ -179,6 +179,9 @@ { "path": "packages/remirror__extension-collaboration/src" }, + { + "path": "packages/remirror__extension-columns/__stories__" + }, { "path": "packages/remirror__extension-columns/__tests__" }, @@ -218,6 +221,9 @@ { "path": "packages/remirror__extension-emoji/src" }, + { + "path": "packages/remirror__extension-epic-mode/__stories__" + }, { "path": "packages/remirror__extension-epic-mode/__tests__" }, @@ -263,12 +269,18 @@ { "path": "packages/remirror__extension-gap-cursor/src" }, + { + "path": "packages/remirror__extension-hard-break/__stories__" + }, { "path": "packages/remirror__extension-hard-break/__tests__" }, { "path": "packages/remirror__extension-hard-break/src" }, + { + "path": "packages/remirror__extension-heading/__stories__" + }, { "path": "packages/remirror__extension-heading/__tests__" }, @@ -281,6 +293,9 @@ { "path": "packages/remirror__extension-history/src" }, + { + "path": "packages/remirror__extension-horizontal-rule/__stories__" + }, { "path": "packages/remirror__extension-horizontal-rule/__tests__" }, @@ -467,6 +482,9 @@ { "path": "packages/remirror__extension-text-color/src" }, + { + "path": "packages/remirror__extension-text-highlight/__stories__" + }, { "path": "packages/remirror__extension-text-highlight/__tests__" },