This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
import { useState } from 'react';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import {
|
||||
headingsPlugin,
|
||||
listsPlugin,
|
||||
markdownShortcutPlugin,
|
||||
quotePlugin,
|
||||
headingsPlugin,
|
||||
listsPlugin,
|
||||
markdownShortcutPlugin,
|
||||
quotePlugin,
|
||||
} from '@mdxeditor/editor';
|
||||
import { MDXEditorField } from './MDXEditorField';
|
||||
|
||||
@@ -19,138 +19,145 @@ This is a paragraph with **bold** and _italic_ text.
|
||||
`;
|
||||
|
||||
const meta = {
|
||||
title: 'Components/MDXEditorField',
|
||||
component: MDXEditorField,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'MDX editor wrapper with label, editable/read-only/disabled modes, theme class support, and error rendering.',
|
||||
},
|
||||
title: 'Components/MDXEditorField',
|
||||
component: MDXEditorField,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'MDX editor wrapper with label, editable/read-only/disabled modes, theme class support, and error rendering.',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
label: {
|
||||
description: 'Field label shown above the editor.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
argTypes: {
|
||||
label: {
|
||||
description: 'Field label shown above the editor.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
markdown: {
|
||||
description: 'Controlled markdown content value.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
readOnly: {
|
||||
description: 'Enables read-only mode.',
|
||||
control: 'boolean',
|
||||
table: { type: { summary: 'boolean' } },
|
||||
},
|
||||
disabled: {
|
||||
description: 'Disables editing and applies disabled visuals.',
|
||||
control: 'boolean',
|
||||
table: { type: { summary: 'boolean' } },
|
||||
},
|
||||
themeClassName: {
|
||||
description:
|
||||
'Theme class applied to MDXEditor (for example `light-theme` or `dark-theme`).',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
plugins: {
|
||||
description: 'MDXEditor plugins array.',
|
||||
control: false,
|
||||
table: { type: { summary: 'MDXEditorProps["plugins"]' } },
|
||||
},
|
||||
contentEditableClassName: {
|
||||
description: 'CSS class used on the content editable area.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
className: {
|
||||
description: 'Extra CSS classes for the outer wrapper.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
editorWrapperClassName: {
|
||||
description: 'Extra CSS classes for the editor shell element.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
editorWrapperStyle: {
|
||||
description: 'Inline style object for the editor shell.',
|
||||
control: 'object',
|
||||
table: { type: { summary: 'CSSProperties' } },
|
||||
},
|
||||
editorClassName: {
|
||||
description: 'Extra CSS classes for the MDXEditor instance.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
error: {
|
||||
description: 'Error message shown below the editor.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
onChange: {
|
||||
description: 'Callback fired when markdown changes in editable mode.',
|
||||
action: 'changed',
|
||||
table: { type: { summary: '(markdown: string) => void' } },
|
||||
},
|
||||
editorRef: {
|
||||
description: 'Ref to MDXEditor methods.',
|
||||
control: false,
|
||||
table: { type: { summary: 'Ref<MDXEditorMethods | null>' } },
|
||||
},
|
||||
},
|
||||
markdown: {
|
||||
description: 'Controlled markdown content value.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
args: {
|
||||
label: 'Content',
|
||||
markdown: sampleMarkdown,
|
||||
plugins: basePlugins,
|
||||
themeClassName: '',
|
||||
},
|
||||
readOnly: {
|
||||
description: 'Enables read-only mode.',
|
||||
control: 'boolean',
|
||||
table: { type: { summary: 'boolean' } },
|
||||
},
|
||||
disabled: {
|
||||
description: 'Disables editing and applies disabled visuals.',
|
||||
control: 'boolean',
|
||||
table: { type: { summary: 'boolean' } },
|
||||
},
|
||||
themeClassName: {
|
||||
description: 'Theme class applied to MDXEditor (for example `light-theme` or `dark-theme`).',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
plugins: {
|
||||
description: 'MDXEditor plugins array.',
|
||||
control: false,
|
||||
table: { type: { summary: 'MDXEditorProps["plugins"]' } },
|
||||
},
|
||||
contentEditableClassName: {
|
||||
description: 'CSS class used on the content editable area.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
className: {
|
||||
description: 'Extra CSS classes for the outer wrapper.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
editorWrapperClassName: {
|
||||
description: 'Extra CSS classes for the editor shell element.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
editorWrapperStyle: {
|
||||
description: 'Inline style object for the editor shell.',
|
||||
control: 'object',
|
||||
table: { type: { summary: 'CSSProperties' } },
|
||||
},
|
||||
editorClassName: {
|
||||
description: 'Extra CSS classes for the MDXEditor instance.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
error: {
|
||||
description: 'Error message shown below the editor.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
onChange: {
|
||||
description: 'Callback fired when markdown changes in editable mode.',
|
||||
action: 'changed',
|
||||
table: { type: { summary: '(markdown: string) => void' } },
|
||||
},
|
||||
editorRef: {
|
||||
description: 'Ref to MDXEditor methods.',
|
||||
control: false,
|
||||
table: { type: { summary: 'Ref<MDXEditorMethods | null>' } },
|
||||
},
|
||||
},
|
||||
args: {
|
||||
label: 'Content',
|
||||
markdown: sampleMarkdown,
|
||||
plugins: basePlugins,
|
||||
themeClassName: '',
|
||||
},
|
||||
} satisfies Meta<typeof MDXEditorField>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Editable: Story = {
|
||||
render: (args) => {
|
||||
const [markdown, setMarkdown] = useState(args.markdown);
|
||||
return (
|
||||
<div className="w-full max-w-2xl">
|
||||
<MDXEditorField
|
||||
{...args}
|
||||
markdown={markdown}
|
||||
onChange={(next) => {
|
||||
setMarkdown(next);
|
||||
args.onChange?.(next);
|
||||
}}
|
||||
editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
render: (args) => {
|
||||
const [markdown, setMarkdown] = useState(args.markdown);
|
||||
return (
|
||||
<div className="w-full max-w-2xl">
|
||||
<MDXEditorField
|
||||
{...args}
|
||||
markdown={markdown}
|
||||
onChange={(next) => {
|
||||
setMarkdown(next);
|
||||
args.onChange?.(next);
|
||||
}}
|
||||
editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const ReadOnly: Story = {
|
||||
args: {
|
||||
readOnly: true,
|
||||
},
|
||||
render: (args) => (
|
||||
<div className="w-full max-w-2xl">
|
||||
<MDXEditorField {...args} editorWrapperClassName="mt-2 overflow-hidden rounded-xl border" />
|
||||
</div>
|
||||
),
|
||||
args: {
|
||||
readOnly: true,
|
||||
},
|
||||
render: (args) => (
|
||||
<div className="w-full max-w-2xl">
|
||||
<MDXEditorField
|
||||
{...args}
|
||||
editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const DisabledWithError: Story = {
|
||||
args: {
|
||||
disabled: true,
|
||||
error: 'Editor is currently disabled',
|
||||
},
|
||||
render: (args) => (
|
||||
<div className="w-full max-w-2xl">
|
||||
<MDXEditorField {...args} editorWrapperClassName="mt-2 overflow-hidden rounded-xl border" />
|
||||
</div>
|
||||
),
|
||||
args: {
|
||||
disabled: true,
|
||||
error: 'Editor is currently disabled',
|
||||
},
|
||||
render: (args) => (
|
||||
<div className="w-full max-w-2xl">
|
||||
<MDXEditorField
|
||||
{...args}
|
||||
editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user