69 lines
2.0 KiB
Plaintext
69 lines
2.0 KiB
Plaintext
|
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>
|