docs: embed more examples (remirror#1221)

docs/extensions/annotation-extension.md → docs/extensions/annotation-extension.mdx

@@ -3,6 +3,8 @@ hide_title: true
 title: AnnotationExtension
 ---
 
+import Basic from '../../website/extension-examples/extension-annotation/basic';
+
 # `AnnotationExtension`
 
 ## Summary
@@ -65,7 +67,7 @@ The extension is provided by the `@remirror/extension-annotation` package. There
 
 ### Examples
 
-See [storybook](https://remirror.vercel.app/?path=/story/extensions-annotation--basic) for example usage.
+<Basic />
 
 ## API
 

docs/extensions/blockquote-extension.md → docs/extensions/blockquote-extension.mdx

@@ -3,6 +3,8 @@ hide_title: true
 title: 'BlockquoteExtension'
 ---
 
+import Basic from '../../website/extension-examples/extension-blockquote/basic';
+
 # `BlockquoteExtension`
 
 ## Summary
@@ -27,7 +29,7 @@ The extension is provided by the `@remirror/extension-blockquote` package. There
 
 ### Examples
 
-See [storybook](https://remirror.vercel.app/?path=/story/extensions-blockquote--basic) for examples.
+<Basic />
 
 ## API
 

docs/extensions/bold-extension.md → docs/extensions/bold-extension.mdx

@@ -3,6 +3,8 @@ hide_title: true
 title: 'BoldExtension'
 ---
 
+import Basic from '../../website/extension-examples/extension-bold/basic';
+
 # `BoldExtension`
 
 ## Summary
@@ -27,7 +29,7 @@ The extension is provided by the `@remirror/extension-bold` package. There are t
 
 ### Examples
 
-See [storybook](https://remirror.vercel.app/?path=/story/extensions-bold--basic) for examples.
+<Basic />
 
 ## API
 

docs/extensions/callout-extension.md → docs/extensions/callout-extension.mdx

@@ -3,6 +3,10 @@ hide_title: true
 title: 'CalloutExtension'
 ---
 
+import Basic from '../../website/extension-examples/extension-callout/basic';
+import WithEmojiPicker from '../../website/extension-examples/extension-callout/with-emoji-picker';
+import WithRandomEmoji from '../../website/extension-examples/extension-callout/with-random-emoji';
+
 # `CalloutExtension`
 
 ## Summary
@@ -64,7 +68,11 @@ The extension is provided by the `@remirror/extension-callout` package. There ar
 
 ### Examples
 
-See [storybook](https://remirror.vercel.app/?path=/story/extensions-callout--basic) for examples.
+<Basic />
+
+<WithEmojiPicker />
+
+<WithRandomEmoji />
 
 ## API
 

docs/extensions/columns-extension.md → docs/extensions/columns-extension.mdx

@@ -3,6 +3,8 @@ hide_title: true
 title: 'ColumnsExtension'
 ---
 
+import Basic from '../../website/extension-examples/extension-columns/basic';
+
 # `ColumnsExtension`
 
 ## Summary
@@ -27,7 +29,7 @@ The extension is provided by the `@remirror/extension-columns` package. There ar
 
 ### Examples
 
-See [storybook](https://remirror.vercel.app/?path=/story/extensions-columns--basic) for examples.
+<Basic />
 
 ## API
 

docs/extensions/embed-extension.md → docs/extensions/embed-extension.mdx

@@ -3,6 +3,8 @@ hide_title: true
 title: 'EmbedExtension'
 ---
 
+import Basic from '../../website/extension-examples/extension-embed/basic';
+
 # `EmbedExtension`
 
 ## Summary
@@ -70,7 +72,7 @@ The extension is provided by the `@remirror/extension-embed` package. There are
 
 ### Examples
 
-See [storybook](https://remirror.vercel.app/?path=/story/extensions-embed--basic) for examples.
+<Basic />
 
 ## API
 

docs/extensions/epic-mode-extension.md → docs/extensions/epic-mode-extension.mdx

@@ -3,6 +3,8 @@ hide_title: true
 title: 'EpicModeExtension'
 ---
 
+import Basic from '../../website/extension-examples/extension-epic-mode/basic';
+
 # `EpicModeExtension`
 
 ## Summary
@@ -27,7 +29,7 @@ The extension is provided by the `@remirror/extension-epicmode` package. There a
 
 ### Examples
 
-See [storybook](https://remirror.vercel.app/?path=/story/extensions-epicmode--basic) for examples.
+<Basic />
 
 ## API
 

docs/extensions/file-extension.md → docs/extensions/file-extension.mdx

@@ -5,6 +5,12 @@ title: 'FileExtension (Beta)'
 
 # `FileExtension` <span class="beta" />
 
+import Basic from '../../website/extension-examples/extension-file/basic';
+import WithObjectUrl from '../../website/extension-examples/extension-file/with-object-url';
+import WithBashupload from '../../website/extension-examples/extension-file/with-bashupload';
+import WithUploadProgress from '../../website/extension-examples/extension-file/with-upload-progress';
+import WithUploadFileButton from '../../website/extension-examples/extension-file/with-upload-file-button';
+
 ## Summary
 
 Adds a file node to the editor
@@ -29,7 +35,15 @@ The extension is provided by the `@remirror/extension-file` package.
 
 ### Examples
 
-See [storybook](https://remirror.vercel.app/?path=/story/extensions-file--basic) for examples.
+<Basic />
+
+<WithObjectUrl />
+
+<WithBashupload />
+
+<WithUploadProgress />
+
+<WithUploadFileButton />
 
 ## API
 

docs/extensions/font-family-extension.md → docs/extensions/font-family-extension.mdx

@@ -3,6 +3,8 @@ hide_title: true
 title: 'FontFamilyExtension'
 ---
 
+import Basic from '../../website/extension-examples/extension-font-family/basic';
+
 # `FontFamilyExtension`
 
 ## Summary
@@ -27,7 +29,7 @@ The extension is provided by the `@remirror/extension-font-family` package. Ther
 
 ### Examples
 
-See [storybook](https://remirror.vercel.app/?path=/story/extensions-font-family--basic) for examples.
+<Basic />
 
 ## API
 

docs/extensions/font-size-extension.md → docs/extensions/font-size-extension.mdx

@@ -3,6 +3,8 @@ hide_title: true
 title: 'FontSizeExtension'
 ---
 
+import Basic from '../../website/extension-examples/extension-font-size/basic';
+
 # `FontSizeExtension`
 
 ## Summary
@@ -27,7 +29,7 @@ The extension is provided by the `@remirror/extension-font-size` package. There
 
 ### Examples
 
-See [storybook](https://remirror.vercel.app/?path=/story/extensions-font-size--basic) for examples.
+<Basic />
 
 ## API
 

docs/extensions/hard-break-extension.md → docs/extensions/hard-break-extension.mdx

@@ -3,6 +3,8 @@ hide_title: true
 title: 'HardBreakExtension'
 ---
 
+import Basic from '../../website/extension-examples/extension-hard-break/basic';
+
 # `HardBreakExtension`
 
 ## Summary
@@ -29,7 +31,7 @@ The extension is provided by the `@remirror/extension-hard-break` package. There
 
 ### Examples
 
-See [storybook](https://remirror.vercel.app/?path=/story/extensions-hard-break--basic) for examples.
+<Basic />
 
 ## API
 

docs/extensions/heading-extension.md → docs/extensions/heading-extension.mdx

@@ -3,6 +3,8 @@ hide_title: true
 title: 'HeadingExtension'
 ---
 
+import Basic from '../../website/extension-examples/extension-heading/basic';
+
 # `HeadingExtension`
 
 ## Summary
@@ -27,7 +29,7 @@ The extension is provided by the `@remirror/extension-heading` package. There ar
 
 ### Examples
 
-See [storybook](https://remirror.vercel.app/?path=/story/extensions-heading--basic) for examples.
+<Basic />
 
 ## API
 

docs/extensions/horizontal-rule-extension.md → docs/extensions/horizontal-rule-extension.mdx

@@ -3,6 +3,8 @@ hide_title: true
 title: 'HorizontalRuleExtension'
 ---
 
+import Basic from '../../website/extension-examples/extension-horizontal-rule/basic';
+
 # `HorizontalRuleExtension`
 
 ## Summary
@@ -27,7 +29,7 @@ The extension is provided by the `@remirror/extension-horizontal-rule` package.
 
 ### Examples
 
-See [storybook](https://remirror.vercel.app/?path=/story/extensions-horizontal-rule--basic) for examples.
+<Basic />
 
 ## API
 

docs/extensions/image-extension.md → docs/extensions/image-extension.mdx

@@ -3,6 +3,8 @@ hide_title: true
 title: 'ImageExtension'
 ---
 
+import Basic from '../../website/extension-examples/extension-image/basic';
+
 # `ImageExtension`
 
 ## Summary
@@ -27,7 +29,7 @@ The extension is provided by the `@remirror/extension-image` package. There are
 
 ### Examples
 
-See [storybook](https://remirror.vercel.app/?path=/story/extensions-image--basic) for examples.
+<Basic />
 
 ## API
 

docs/extensions/index.md

@@ -5,76 +5,76 @@ title: Overview
 
 # All extensions
 
-**[AnnotationExtension](./annotation-extension.md)**<br /> Allows the annotation (or highlighting) of the content in your editor
+**[AnnotationExtension](./annotation-extension.mdx)**<br /> Allows the annotation (or highlighting) of the content in your editor
 
-**[BlockquoteExtension](./blockquote-extension.md)**<br /> Makes regions of text appear as an indented quote to ensure it stands out
+**[BlockquoteExtension](./blockquote-extension.mdx)**<br /> Makes regions of text appear as an indented quote to ensure it stands out
 
-**[BoldExtension](./bold-extension.md)**<br /> Makes the text under the cursor / or at the provided position range **bold**
+**[BoldExtension](./bold-extension.mdx)**<br /> Makes the text under the cursor / or at the provided position range **bold**
 
-**[CalloutExtension](./callout-extension.md)**<br /> Makes regions of text stand out on a colour background with optional emoji prefix
+**[CalloutExtension](./callout-extension.mdx)**<br /> Makes regions of text stand out on a colour background with optional emoji prefix
 
 **[CodeBlockExtension](./code-block-extension.mdx)**<br /> Adds code blocks to the editor. This differs to the `CodeExtension`, which provides code marks on inline text.
 
 **[CodeExtension](./code-extension.mdx)**<br /> Makes the text under the cursor / or at the provided position range `code`
 
-**[CollaborationExtension](./collaboration-extension.md)**<br /> Adds collaborative functionality
+**[CollaborationExtension](./collaboration-extension.mdx)**<br /> Adds collaborative functionality
 
-**[ColumnsExtension](./columns-extension.md)**<br /> Add column support to the nodes
+**[ColumnsExtension](./columns-extension.mdx)**<br /> Add column support to the nodes
 
-**[DropCursorExtension](./drop-cursor-extension.md)**<br /> Shows a line indicator for where the drop target will be
+**[DropCursorExtension](./drop-cursor-extension.mdx)**<br /> Shows a line indicator for where the drop target will be
 
-**[EmbedExtension](./embed-extension.md)**<br /> Adds iframe-based embeds to your text editor.
+**[EmbedExtension](./embed-extension.mdx)**<br /> Adds iframe-based embeds to your text editor.
 
-**[EmojiExtension](./emoji-extension.md)**<br /> Adds emoji support
+**[EmojiExtension](./emoji-extension.mdx)**<br /> Adds emoji support
 
-**[EventsExtension](./events-extension.md)**<br /> Listens to events which occur within the editor
+**[EventsExtension](./events-extension.mdx)**<br /> Listens to events which occur within the editor
 
-**[FileExtension](./file-extension.md)** <span class="beta" /><br /> Adds a file node
+**[FileExtension](./file-extension.mdx)** <span class="beta" /><br /> Adds a file node
 
-**[FontFamilyExtension](./font-family-extension.md)**<br /> Add a font family to the selected text
+**[FontFamilyExtension](./font-family-extension.mdx)**<br /> Add a font family to the selected text
 
-**[FontSizeExtension](./font-size-extension.md)**<br /> Add a font size to the selected text
+**[FontSizeExtension](./font-size-extension.mdx)**<br /> Add a font size to the selected text
 
-**[GapCursorExtension](./gap-cursor-extension.md)**<br /> 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.
+**[GapCursorExtension](./gap-cursor-extension.mdx)**<br /> 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.
 
-**[HardBreakExtension](./hard-break-extension.md)**<br /> Inserts a `hardBreak` `<br />` tag into the editor
+**[HardBreakExtension](./hard-break-extension.mdx)**<br /> Inserts a `hardBreak` `<br />` tag into the editor
 
-**[HistoryExtension](./history-extension.md)**<br /> Provides undo and redo commands
+**[HistoryExtension](./history-extension.mdx)**<br /> Provides undo and redo commands
 
-**[HorizontalRuleExtension](./horizontal-rule-extension.md)**<br /> Adds a horizontal line `<hr />` tag to the editor
+**[HorizontalRuleExtension](./horizontal-rule-extension.mdx)**<br /> Adds a horizontal line `<hr />` tag to the editor
 
-**[ImageExtension](./image-extension.md)**<br /> Places images into the editor
+**[ImageExtension](./image-extension.mdx)**<br /> Places images into the editor
 
-**[ItalicExtension](./italic-extension.md)**<br /> Makes the text under the cursor / or at the provided position range _italic_
+**[ItalicExtension](./italic-extension.mdx)**<br /> Makes the text under the cursor / or at the provided position range _italic_
 
-**[LinkExtension](./link-extension.md)**<br /> Makes the text under the cursor / or at the provided position range link to another resource
+**[LinkExtension](./link-extension.mdx)**<br /> Makes the text under the cursor / or at the provided position range link to another resource
 
-**[ListExtension](./list-extension.md)**<br /> Adds ordered lists, unordered lists, and checklists to the editor
+**[ListExtension](./list-extension.mdx)**<br /> Adds ordered lists, unordered lists, and checklists to the editor
 
-**[MarkdownExtension](./markdown-extension.md)**<br /> Transforms the **ProseMirror** content of your editor to markdown syntax
+**[MarkdownExtension](./markdown-extension.mdx)**<br /> Transforms the **ProseMirror** content of your editor to markdown syntax
 
-**[MentionAtomExtension](./mention-atom-extension.md)**<br /> Provides mentions as atom nodes which don't support editing once being inserted into the document
+**[MentionAtomExtension](./mention-atom-extension.mdx)**<br /> Provides mentions as atom nodes which don't support editing once being inserted into the document
 
-**[MentionExtension](./mention-extension.md)**<br /> Provides mentions as nodes which support editing once being inserted into the document
+**[MentionExtension](./mention-extension.mdx)**<br /> Provides mentions as nodes which support editing once being inserted into the document
 
-**[NodeFormattingExtension](./node-formatting-extension.md)**<br /> Enables you to align, index and set the line-height of content in your editor
+**[NodeFormattingExtension](./node-formatting-extension.mdx)**<br /> Enables you to align, index and set the line-height of content in your editor
 
-**[PlaceholderExtension](./placeholder-extension.md)**<br /> Shows a configurable placeholder when the **ProseMirror** content of your editor is empty
+**[PlaceholderExtension](./placeholder-extension.mdx)**<br /> Shows a configurable placeholder when the **ProseMirror** content of your editor is empty
 
-**[SearchExtension](./search-extension.md)**<br /> This extension add search functionality to your editor
+**[SearchExtension](./search-extension.mdx)**<br /> This extension add search functionality to your editor
 
-**[StrikeExtension](./strike-extension.md)**<br /> Makes the text under the cursor / or at the provided position range ~~strike~~
+**[StrikeExtension](./strike-extension.mdx)**<br /> Makes the text under the cursor / or at the provided position range ~~strike~~
 
-**[SubExtension](./sub-extension.md)**<br /> Adds a `sub` mark to the editor. This is used to mark inline text as a <sub>subscript</sub> snippet
+**[SubExtension](./sub-extension.mdx)**<br /> Adds a `sub` mark to the editor. This is used to mark inline text as a <sub>subscript</sub> snippet
 
-**[SupExtension](./sup-extension.md)**<br /> Adds a `sup` mark to the editor. This is used to mark inline text as a <sup>superscript</sup> snippet
+**[SupExtension](./sup-extension.mdx)**<br /> Adds a `sup` mark to the editor. This is used to mark inline text as a <sup>superscript</sup> snippet
 
-**[TextCaseExtension](./text-case-extension.md)**<br /> Formatting for text casing in the editor
+**[TextCaseExtension](./text-case-extension.mdx)**<br /> Formatting for text casing in the editor
 
-**[TextColorExtension](./text-color-extension.md)**<br /> Makes the text under the cursor / or at the provided position range have the specified color
+**[TextColorExtension](./text-color-extension.mdx)**<br /> Makes the text under the cursor / or at the provided position range have the specified color
 
-**[TrailingNodeExtension](./trailing-node-extension.md)**<br /> Ensure that there's always a trailing paragraph at the end of the document
+**[TrailingNodeExtension](./trailing-node-extension.mdx)**<br /> Ensure that there's always a trailing paragraph at the end of the document
 
-**[UnderlineExtension](./underline-extension.md)**<br /> Makes the text under the cursor / or at the provided position range <u>underline</u>
+**[UnderlineExtension](./underline-extension.mdx)**<br /> Makes the text under the cursor / or at the provided position range <u>underline</u>
 
-**[WhitespaceExtension](./whitespace-extension.md)**<br /> Manage whitespace characters within the editor
+**[WhitespaceExtension](./whitespace-extension.mdx)**<br /> Manage whitespace characters within the editor

docs/extensions/italic-extension.md → docs/extensions/italic-extension.mdx

@@ -3,6 +3,8 @@ hide_title: true
 title: 'ItalicExtension'
 ---
 
+import Basic from '../../website/extension-examples/extension-italic/basic';
+
 # `ItalicExtension`
 
 ## Summary
@@ -27,7 +29,7 @@ The extension is provided by the `@remirror/extension-italic` package. There are
 
 ### Examples
 
-See [storybook](https://remirror.vercel.app/?path=/story/extensions-italic--basic) for examples.
+<Basic />
 
 ## API