forked from remirror/remirror
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: embed examples (remirror#1220)
- Loading branch information
Showing
24 changed files
with
469 additions
and
292 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
packages/storybook-react/stories/extension-code-block/basic.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import javascript from 'refractor/lang/javascript'; | ||
| import typescript from 'refractor/lang/typescript'; | ||
| import { CodeBlockExtension } from 'remirror/extensions'; | ||
| import { Remirror, ThemeProvider, useRemirror } from '@remirror/react'; | ||
|
|
||
| const extensions = () => [ | ||
| new CodeBlockExtension({ | ||
| supportedLanguages: [javascript, typescript], | ||
| }), | ||
| ]; | ||
|
|
||
| const content = `<pre><code data-code-block-language="typescript">function sayHello { | ||
| console.log('hello world!') | ||
| }</code></pre> | ||
| `; | ||
|
|
||
| const Basic = (): JSX.Element => { | ||
| const { manager, state } = useRemirror({ extensions, content, stringHandler: 'html' }); | ||
|
|
||
| return ( | ||
| <ThemeProvider> | ||
| <Remirror manager={manager} initialContent={state} autoRender /> | ||
| </ThemeProvider> | ||
| ); | ||
| }; | ||
|
|
||
| export default Basic; |
66 changes: 4 additions & 62 deletions
66
packages/storybook-react/stories/extension-code-block/code-block.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,11 @@ | ||
| import javascript from 'refractor/lang/javascript'; | ||
| import typescript from 'refractor/lang/typescript'; | ||
| import { CodeBlockExtension } from 'remirror/extensions'; | ||
| import { ProsemirrorDevTools } from '@remirror/dev'; | ||
| import { Remirror, ThemeProvider, useEditorState, useRemirror } from '@remirror/react'; | ||
| import Basic from './basic'; | ||
| import WithIncorrectLanguage from './with-incorrect-language'; | ||
|
|
||
| export default { title: 'Extensions / CodeBlock' }; | ||
|
|
||
| const Dev = () => { | ||
| const updatedState = useEditorState(); | ||
| console.log(JSON.stringify(updatedState.doc.toJSON())); | ||
| return null; | ||
| }; | ||
| export const Basic = (): JSX.Element => { | ||
| const { manager, state } = useRemirror({ extensions, content, stringHandler: 'html' }); | ||
|
|
||
| return ( | ||
| <ThemeProvider> | ||
| <Remirror manager={manager} initialContent={state} autoRender> | ||
| <Dev /> | ||
| <ProsemirrorDevTools /> | ||
| </Remirror> | ||
| </ThemeProvider> | ||
| ); | ||
| }; | ||
|
|
||
| Basic.args = { | ||
| (Basic as any).args = { | ||
| autoLink: true, | ||
| openLinkOnClick: true, | ||
| }; | ||
|
|
||
| const extensions = () => [ | ||
| new CodeBlockExtension({ | ||
| supportedLanguages: [javascript, typescript], | ||
| }), | ||
| ]; | ||
|
|
||
| const html = String.raw; | ||
| const content = html` | ||
| <pre><code data-code-block-language="typescript"> | ||
| function sayHello{ | ||
| console.log('hello world!') | ||
| } | ||
| </code></pre> | ||
| `; | ||
|
|
||
| export const WithIncorrectLanguage = (): JSX.Element => { | ||
| const { manager, state } = useRemirror({ | ||
| extensions, | ||
| content: { | ||
| type: 'doc', | ||
| content: [ | ||
| { | ||
| type: 'codeBlock', | ||
| attrs: { language: 'THIS_LANGUAGE_DOES_NOT_EXIST', wrap: false }, | ||
| content: [{ type: 'text', text: 'hello world' }], | ||
| }, | ||
| ], | ||
| }, | ||
| }); | ||
|
|
||
| return ( | ||
| <ThemeProvider> | ||
| <Remirror manager={manager} initialContent={state} autoRender> | ||
| <ProsemirrorDevTools /> | ||
| </Remirror> | ||
| </ThemeProvider> | ||
| ); | ||
| }; | ||
| export { Basic, WithIncorrectLanguage }; |
34 changes: 34 additions & 0 deletions
34
packages/storybook-react/stories/extension-code-block/with-incorrect-language.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import javascript from 'refractor/lang/javascript'; | ||
| import typescript from 'refractor/lang/typescript'; | ||
| import { CodeBlockExtension } from 'remirror/extensions'; | ||
| import { Remirror, ThemeProvider, useRemirror } from '@remirror/react'; | ||
|
|
||
| const extensions = () => [ | ||
| new CodeBlockExtension({ | ||
| supportedLanguages: [javascript, typescript], | ||
| }), | ||
| ]; | ||
|
|
||
| const WithIncorrectLanguage = (): JSX.Element => { | ||
| const { manager, state } = useRemirror({ | ||
| extensions, | ||
| content: { | ||
| type: 'doc', | ||
| content: [ | ||
| { | ||
| type: 'codeBlock', | ||
| attrs: { language: 'THIS_LANGUAGE_DOES_NOT_EXIST', wrap: false }, | ||
| content: [{ type: 'text', text: 'hello world' }], | ||
| }, | ||
| ], | ||
| }, | ||
| }); | ||
|
|
||
| return ( | ||
| <ThemeProvider> | ||
| <Remirror manager={manager} initialContent={state} autoRender /> | ||
| </ThemeProvider> | ||
| ); | ||
| }; | ||
|
|
||
| export default WithIncorrectLanguage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import 'remirror/styles/all.css'; | ||
| import './styles.css'; | ||
|
|
||
| import { cx, htmlToProsemirrorNode } from 'remirror'; | ||
| import { CodeExtension } from 'remirror/extensions'; | ||
| import { ProsemirrorDevTools } from '@remirror/dev'; | ||
| import { Remirror, ThemeProvider, useActive, useCommands, useRemirror } from '@remirror/react'; | ||
|
|
||
| const extensions = () => [new CodeExtension()]; | ||
|
|
||
| const CodeButton = () => { | ||
| const commands = useCommands(); | ||
| const active = useActive(true); | ||
| return ( | ||
| <button onClick={() => commands.toggleCode()} className={cx(active.code() && 'active')}> | ||
| Code | ||
| </button> | ||
| ); | ||
| }; | ||
|
|
||
| const Basic = (): JSX.Element => { | ||
| const { manager, state, onChange } = useRemirror({ | ||
| extensions: extensions, | ||
| content: '<p>Text as <code>code</code></p>', | ||
| stringHandler: htmlToProsemirrorNode, | ||
| }); | ||
|
|
||
| return ( | ||
| <ThemeProvider> | ||
| <Remirror | ||
| manager={manager} | ||
| autoFocus | ||
| onChange={onChange} | ||
| initialContent={state} | ||
| autoRender='end' | ||
| > | ||
| <CodeButton /> | ||
| <ProsemirrorDevTools /> | ||
| </Remirror> | ||
| </ThemeProvider> | ||
| ); | ||
| }; | ||
|
|
||
| export default Basic; |
43 changes: 2 additions & 41 deletions
43
packages/storybook-react/stories/extension-code/code.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,5 @@ | ||
| import 'remirror/styles/all.css'; | ||
| import './styles.css'; | ||
|
|
||
| import { cx, htmlToProsemirrorNode } from 'remirror'; | ||
| import { CodeExtension } from 'remirror/extensions'; | ||
| import { ProsemirrorDevTools } from '@remirror/dev'; | ||
| import { Remirror, ThemeProvider, useActive, useCommands, useRemirror } from '@remirror/react'; | ||
| import Basic from './basic'; | ||
|
|
||
| export default { title: 'Extensions / Code' }; | ||
|
|
||
| const extensions = () => [new CodeExtension()]; | ||
|
|
||
| const CodeButton = () => { | ||
| const commands = useCommands(); | ||
| const active = useActive(true); | ||
| return ( | ||
| <button onClick={() => commands.toggleCode()} className={cx(active.code() && 'active')}> | ||
| Code | ||
| </button> | ||
| ); | ||
| }; | ||
|
|
||
| export const Basic = (): JSX.Element => { | ||
| const { manager, state, onChange } = useRemirror({ | ||
| extensions: extensions, | ||
| content: '<p>Text as <code>code</code></p>', | ||
| stringHandler: htmlToProsemirrorNode, | ||
| }); | ||
|
|
||
| return ( | ||
| <ThemeProvider> | ||
| <Remirror | ||
| manager={manager} | ||
| autoFocus | ||
| onChange={onChange} | ||
| initialContent={state} | ||
| autoRender='end' | ||
| > | ||
| <CodeButton /> | ||
| <ProsemirrorDevTools /> | ||
| </Remirror> | ||
| </ThemeProvider> | ||
| ); | ||
| }; | ||
| export { Basic }; |
Oops, something went wrong.