cal.pub0.org/packages/ui/components/editor/editor.stories.mdx

69 lines
2.0 KiB
Plaintext
Raw Normal View History

import { Canvas, Meta, Story } from "@storybook/addon-docs";
import {
Examples,
Example,
Title,
VariantsTable,
CustomArgsTable,
VariantRow,
} from "@calcom/storybook/components";
import { Editor } from "./Editor";
<Meta title="UI/Editor" component={Editor} />
<Title title="Editor" suffix="Brief" subtitle="Version 1.0 — Last Update: 16 Aug 2023" />
## Definition
The `Editor` component is a versatile rich text editor that provides a customizable environment for creating and editing content with various formatting options and plugins.
## Structure
The `Editor` component offers a flexible rich text editing interface, complete with a configurable toolbar
<CustomArgsTable of={Editor} />
<Examples title="States">
<Example title="Default">
<Editor setText={() => {}} getText={() => "Text"} />
</Example>
<Example title="With placeholder">
<Editor setText={() => {}} getText={() => ""} placeholder="placeholder" />
</Example>
<Example title="With variables">
<Editor setText={() => {}} getText={() => "Text"} variables={["variable1", "variable2", "variable3"]} />
</Example>
</Examples>
<Title offset title="Editor" suffix="Variants" />
<Canvas>
<Story
name="Editor"
args={{
setText: () => {},
getText: () => "Text",
editable: true,
}}
argTypes={{
excludedToolbarItems: { control: { type: "check", options: ["blockType", "bold", "italic", "link"] } },
variables: { control: { type: "check", options: ["variable1", "variable2", "variable3"] } },
height: { control: { type: "text" } },
placeholder: { control: { type: "text" } },
disableLists: { control: { type: "boolean" } },
updateTemplate: { control: { type: "boolean" } },
firstRender: { control: { type: "boolean" } },
editable: { control: { type: "boolean" } },
}}>
{(props) => (
<VariantsTable titles={["Default"]} columnMinWidth={150}>
<VariantRow>
<Editor {...props} />
</VariantRow>
</VariantsTable>
)}
</Story>
</Canvas>