Fix documentation

docs/content/drafts/MarkdownEditor.mdx

@@ -3,10 +3,13 @@ componentId: markdown_editor
 title: MarkdownEditor
 status: Draft
 description: Full-featured Markdown input.
-source: https://github.com/primer/react/tree/main/src/MarkdownEditor
 storybook: '/react/storybook?path=/story/forms-markdowneditor--default'
 ---
 
+```js
+import {MarkdownEditor} from '@primer/react/drafts'
+```
+
 `MarkdownEditor` is a full-featured editor for GitHub Flavored Markdown, with support for:
 
 - Formatting (keyboard shortcuts & toolbar buttons)
@@ -23,8 +26,8 @@ storybook: '/react/storybook?path=/story/forms-markdowneditor--default'
 
 A `Label` is always required for accessibility:
 
-```javascript live noinline
-const renderMarkdown = async (markdown: string) => {
+```javascript live noinline drafts
+const renderMarkdown = async (markdown) => {
   // In production code, this would make a query to some external API endpoint to render
   return "Rendered Markdown."
 }
@@ -48,15 +51,15 @@ render(MinimalExample)
 
 ### Suggestions, File Uploads, and Saved Replies
 
-```javascript live noinline
-const renderMarkdown = async (markdown: string) => "Rendered Markdown."
+```javascript live noinline drafts
+const renderMarkdown = async (markdown) => "Rendered Markdown."
 
-const uploadFile = async (file: File): FileUploadResult => ({
+const uploadFile = async (file) => ({
   url: `https://example.com/${encodeURIComponent(file.name)}`,
   file
 })
 
-const emojis: Emoji[] = [
+const emojis = [
   {name: '+1', character: '👍'},
   {name: '-1', character: '👎'},
   {name: 'heart', character: '❤️'},
@@ -74,7 +77,7 @@ const emojis: Emoji[] = [
   {name: 'thumbsdown', character: '👎'}
 ]
 
-const references: Reference[] = [
+const references = [
   {id: '1', titleText: 'Add logging functionality', titleHtml: 'Add logging functionality'},
   {
     id: '2',
@@ -84,13 +87,13 @@ const references: Reference[] = [
   {id: '3', titleText: 'Add error-handling functionality', titleHtml: 'Add error-handling functionality'}
 ]
 
-const mentionables: Mentionable[] = [
+const mentionables = [
   {identifier: 'monalisa', description: 'Monalisa Octocat'},
   {identifier: 'github', description: 'GitHub'},
   {identifier: 'primer', description: 'Primer'}
 ]
 
-const savedReplies: SavedReply[] = [
+const savedReplies = [
   {name: 'Duplicate', content: 'Duplicate of #'},
   {name: 'Welcome', content: 'Welcome to the project!\n\nPlease be sure to read the contributor guidelines.'},
   {name: 'Thanks', content: 'Thanks for your contribution!'}
@@ -123,8 +126,8 @@ render(MinimalExample)
 
 ### Custom Buttons
 
-```javascript live noinline
-const renderMarkdown = async (markdown: string) => "Rendered Markdown."
+```javascript live noinline drafts
+const renderMarkdown = async (markdown) => "Rendered Markdown."
 
 const MinimalExample = () => {
   const [value, setValue] = React.useState('')

docs/content/drafts/MarkdownViewer.mdx

@@ -3,20 +3,23 @@ componentId: markdown_viewer
 title: MarkdownViewer
 status: Draft
 description: Displays rendered Markdown and facilitates interaction.
-source: https://github.com/primer/react/tree/main/src/MarkdownViewer
 ---
 
+```js
+import {MarkdownViewer} from '@primer/react/drafts'
+```
+
 The `MarkdownViewer` displays rendered Markdown with appropriate styling and handles interaction (link clicking and checkbox checking/unchecking) with that content.
 
 ## Examples
 
 ### Simple Example
 
-```javascript live noinline
+```javascript live noinline drafts
 const MarkdownViewerExample = () => {
   return (
     // eslint-disable-next-line github/unescaped-html-literal
-    <MarkdownViewer dangerousRenderedHtml={{__html: "<strong>Lorem ipsum</strong> dolor sit amet."}} />
+    <MarkdownViewer dangerousRenderedHtml={{__html: '<strong>Lorem ipsum</strong> dolor sit amet.'}} />
   )
 }
 
@@ -25,13 +28,13 @@ render(MarkdownViewerExample)
 
 ### Link-Handling Example
 
-```javascript live noinline
+```javascript live noinline drafts
 const MarkdownViewerExample = () => {
   return (
     <MarkdownViewer
       // eslint-disable-next-line github/unescaped-html-literal
       dangerousRenderedHtml={{__html: "<a href='https://example.com'>Example link</a>"}}
-      onLinkClick={(ev) => console.log(ev)}
+      onLinkClick={ev => console.log(ev)}
     />
   )
 }
@@ -41,8 +44,7 @@ render(MarkdownViewerExample)
 
 ### Checkbox Interaction Example
 
-```javascript live noinline
-
+```javascript live noinline drafts
 const markdownSource = `
 text before list
 
@@ -64,7 +66,7 @@ const MarkdownViewerExample = () => {
     <MarkdownViewer
       dangerousRenderedHtml={{__html: renderedHtml}}
       markdownValue={markdownSource}
-      onChange={(value) => console.log(value) /* save the value to the server */}
+      onChange={value => console.log(value) /* save the value to the server */}
       disabled={false}
     />
   )

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -153,6 +153,10 @@
       url: /drafts/Dialog
     - title: InlineAutocomplete
       url: /drafts/InlineAutocomplete
+    - title: MarkdownEditor
+      url: /drafts/MarkdownEditor
+    - title: MarkdownViewer
+      url: /drafts/MarkdownViewer
 - title: Deprecated
   children:
     - title: ActionList (legacy)

src/drafts/MarkdownEditor/Toolbar.tsx

@@ -14,7 +14,6 @@ import {
 } from '@primer/octicons-react'
 import React, {forwardRef, memo, useContext, useRef} from 'react'
 
-import '@github/markdown-toolbar-element'
 import {isMacOS} from '@primer/behaviors/utils'
 import Box from '../../Box'
 import {IconButton, IconButtonProps} from '../../Button'

src/drafts/MarkdownEditor/_FormattingTools.tsx

@@ -1,5 +1,9 @@
 import React, {forwardRef, useImperativeHandle, useRef} from 'react'
 
+const isBrowser = typeof window !== 'undefined'
+
+if (isBrowser) import('@github/markdown-toolbar-element')
+
 export interface FormattingTools {
   header: () => void
   bold: () => void