{"version":3,"file":"RichTextEditor.stories.jsx","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Button, Flex, type MenuItemProps } from '@pega/cosmos-react-core';\nimport { RichTextEditor } from '@pega/cosmos-react-rte';\nimport type { RichTextEditorProps, RichTextEditorState } from '@pega/cosmos-react-rte';\nimport { MentionButton } from '@pega/cosmos-react-social';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n  title: 'RTE/RichTextEditor',\n  component: RichTextEditor\n  // excludeStories: ['RichTextEditorImperativeHandleDemo']\n} as Meta;\n\nexport const RichTextEditorMDDemo: StoryFn<RichTextEditorProps> = (args: RichTextEditorProps) => {\n  const [users, setUsers] = useState<MenuItemProps[]>(demoUsers);\n\n  const searchUsers = (event: { search: string; trigger: string }) => {\n    if (event.trigger === '@') {\n      setUsers(\n        demoUsers.filter(user => {\n          return user.primary.toLowerCase().includes(event.search.toLowerCase());\n        })\n      );\n    }\n  };\n\n  return (\n    <RichTextEditor\n      searchTriggers={[{ trigger: '@', regex: '[a-zA-Z]*(?: [a-zA-Z]*)?' }]}\n      onSearch={searchUsers}\n      getSearchItemReplacement={(id: string) => {\n        const item = demoUsers.find(({ id: itemId }) => itemId === id);\n\n        if (!item) return undefined;\n\n        return {\n          markdown: `@${item.id}:${item.primary}:user:`,\n          text: item.primary,\n          component: MentionButton,\n          props: {\n            id: item.id,\n            text: item.primary,\n            type: 'user'\n          }\n        };\n      }}\n      menu={users.length ? { items: users } : undefined}\n      markdownOnly\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      autoFocus\n    />\n  );\n};\n\nRichTextEditorMDDemo.args = {\n  label: 'Rich text editor',\n  labelHidden: false,\n  info: 'The markdown editor offers dynamic rendering of markdown syntax',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nRichTextEditorMDDemo.argTypes = {\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text', label: 'Helper text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\nexport const RichTextEditorImperativeHandleDemo: StoryFn = () => {\n  const rteRef = useRef<RichTextEditorState>(null);\n\n  const [textContent, setTextContent] = useState('');\n\n  return (\n    <>\n      <RichTextEditor\n        ref={rteRef}\n        type='html'\n        toolbar={['headers', 'inline-styling', 'indentation', 'lists']}\n        defaultValue='Hello, World! '\n      />\n      <Flex container={{ gap: 1, pad: 1 }}>\n        <Button\n          data-testid='focusHandle'\n          onClick={() => {\n            rteRef.current?.focus();\n          }}\n        >\n          Focus\n        </Button>\n        <Button\n          data-testid='plainTextHandle'\n          onClick={() => {\n            setTextContent(rteRef.current?.getPlainText() || '');\n          }}\n        >\n          Get plain text\n        </Button>\n        <Button\n          data-testid='richTextHandle'\n          onClick={() => {\n            setTextContent(rteRef.current?.getRichText() || '');\n          }}\n        >\n          Get rich text\n        </Button>\n        <Button\n          data-testid='htmlHandle'\n          onClick={() => {\n            setTextContent(rteRef.current?.getHtml() || '');\n          }}\n        >\n          Get HTML\n        </Button>\n        <Button\n          data-testid='clearHandle'\n          onClick={() => {\n            rteRef.current?.clear();\n          }}\n        >\n          Clear\n        </Button>\n        <Button\n          data-testid='insertTextHandle'\n          onClick={() => {\n            rteRef.current?.insertText('Some text');\n          }}\n        >\n          Insert text\n        </Button>\n        <Button\n          data-testid='insertHTMLHandle'\n          onClick={() => {\n            rteRef.current?.insertHtml('Some text', true);\n          }}\n        >\n          Insert HTML\n        </Button>\n        <Button\n          data-testid='appendHTMLHandle'\n          onClick={() => {\n            rteRef.current?.insertHtml('Some text', false);\n          }}\n        >\n          Append HTML\n        </Button>\n        <Button\n          data-testid='insertEmptyHTMLHandle'\n          onClick={() => {\n            rteRef.current?.insertHtml('', true);\n          }}\n        >\n          Insert empty HTML\n        </Button>\n      </Flex>\n      <div data-testid='textRegion'>{textContent}</div>\n    </>\n  );\n};\n"]}