import { Canvas, Controls, Meta } from '@storybook/blocks'
import { ResourceLinks, KAIOInstallation } from '~storybook/components'
import * as EditableRichTextContentStories from './EditableRichTextContent.stories'

<Meta of={EditableRichTextContentStories} />

# EditableRichTextContent

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/RichTextEditor/EditableRichTextContent"

/>

<KAIOInstallation exportNames="EditableRichTextContent" />

## Overview

To render the contents of your [RichTextEditor](/docs/components-richtexteditor-richtexteditor--docs) using the same structure for both components.

<Canvas of={EditableRichTextContentStories.Playground} />
<Controls of={EditableRichTextContentStories.Playground} />

## Usage

The `EditableRichTextContent` indicates interactivity similar to a `text` or `textarea` input and should be used in combination with the [RichTextEditor](/docs/components-richtexteditor-richtexteditor--docs) to toggle between inactive and editable states.

This differs from the [RichTextContent](/docs/components-richtexteditor-richtextcontent--docs) component, which is used to render `RichTextEditor` content as read-only text.

```tsx
const [editMode, setEditMode] = useState<boolean>(false)
const [rteData, setRTEData] = useState<EditorContentArray>([])

const handleOnChange: RichTextEditorProps['onChange'] = (editorState) =>
  setRTEData(editorState.toJSON().doc.content)

if (editMode) {
  return (
    <>
      <RichTextEditor defaultValue={rteData} onChange={handleOnChange} />
      <Button label="Save" primary onClick={() => setEditMode(false)} />
    </>
  )
}

return <EditableRichTextContent content={rteData} onClick={() => setEditMode(true)} />
```

<Canvas of={EditableRichTextContentStories.UsageExample} />