File size: 2,816 Bytes
0ad74ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import Markdown from "./Index.svelte";
</script>
<Meta
title="Components/Markdown"
component={Markdown}
argTypes={{
rtl: {
options: [true, false],
description: "Whether to render right-to-left",
control: { type: "boolean" },
defaultValue: false
},
height: {
description: "Maximum height of the Markdown component",
control: { type: "text" },
defaultValue: "200px"
}
}}
/>
<Template let:args>
<Markdown
value="Here's some **bold** text. And some *italics* and some `code`"
latex_delimiters={[]}
{...args}
height={args.height}
/>
</Template>
<Story name="Simple inline Markdown" />
<Story
name="Multiline Markdown"
args={{
value: `
This should
all be in one line.
---
This should be
in two separate lines.`
}}
/>
<Story
name="Markdown with Wide Content (Horizontal Scrolling)"
args={{
value: `| ids | ids | ids |
| ---------------------------------- | ---------------------------------- | ---------------------------------- |
| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz |
| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz |
| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz |
`
}}
/>
<Story name="Right aligned Markdown" args={{ rtl: true }} />
<Story
name="Markdown with LaTeX"
args={{
value: "What is the solution of $y=x^2$?",
latex_delimiters: [{ left: "$", right: "$", display: false }]
}}
/>
<Story
name="Markdown with header links"
args={{
value: "# Visit [Gradio](https://gradio.app) for more information",
header_links: true
}}
/>
<Story
name="Markdown with Long Content (Vertical Scrolling)"
args={{
value: `# Heading\n${"This is some text.\n".repeat(100)}`,
height: "200px"
}}
/>
<Story
name="Markdown with Copy Button and Container"
args={{
value:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.",
show_copy_button: true,
container: true
}}
/>
|