{"version":3,"file":"RichTextViewer.stories.jsx","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Flex, Link } from '@pega/cosmos-react-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\nimport { HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';\nimport { RichTextViewer, RichTextEditor, getXMLAttributes } from '@pega/cosmos-react-rte';\nimport type { RichTextEditorState, RichTextViewerProps, TokenMap } from '@pega/cosmos-react-rte';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n  title: 'RTE/RichTextViewer',\n  component: RichTextViewer,\n  args: {\n    content: undefined\n  },\n  argTypes: {\n    content: { control: { type: 'text' }, table: { disable: true } }\n  }\n} as Meta;\n\ninterface RichTextViewerDemoProps {\n  content?: RichTextViewerProps['content'];\n  interactionRenderers?: boolean;\n}\n\nexport const RichTextViewerDemo: StoryFn<RichTextViewerDemoProps> = (\n  args: RichTextViewerDemoProps\n) => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('[]');\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onChange={() => setContent(editorRef.current?.getRichText() || '')}\n      />\n\n      <RichTextViewer content={args.content || content} type='richtext' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerHTMLDemo: StoryFn<RichTextViewerDemoProps> = (\n  args: RichTextViewerDemoProps\n) => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onChange={() => setContent(editorRef.current?.getHtml() || '')}\n      />\n\n      <RichTextViewer\n        content={args.content || content}\n        type='html'\n        interactionRenderers={\n          args.interactionRenderers\n            ? [\n                {\n                  regexPattern: /A custom pattern/g,\n                  type: 'custom'\n                }\n              ]\n            : undefined\n        }\n      />\n    </Flex>\n  );\n};\n\nRichTextViewerHTMLDemo.args = {\n  interactionRenderers: false\n};\n\nRichTextViewerHTMLDemo.argTypes = {\n  interactionRenderers: { control: { type: 'boolean' } }\n};\n\nexport const RichTextViewerHTMLOverflowDemo: StoryFn = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState(\n    () => \"<p style='background-color: green; width: 110%; height: 100px;'>hi</p>\"\n  );\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        defaultValue={content}\n        onChange={() => setContent(editorRef.current?.getHtml() || '')}\n      />\n\n      <RichTextViewer content={content} type='html' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerMDDemo: StoryFn<RichTextViewerDemoProps> = (\n  args: RichTextViewerDemoProps\n) => {\n  const LinkComponent = ({ token }: { token: TokenMap['link'] }) => {\n    return (\n      <Link href={token.href} previewable>\n        {token.text}\n      </Link>\n    );\n  };\n\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\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  const getSearchAttributes = (xmlElement: string, searchResult: string) => {\n    if (xmlElement === 'pega-mention') {\n      const attributes = getXMLAttributes(searchResult);\n\n      if (!attributes) return;\n      return {\n        markdown: searchResult,\n        component: MentionButtonConfig.component,\n        props: attributes,\n        text: attributes.text\n      };\n    }\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        markdownOnly\n        ref={editorRef}\n        searchTriggers={[\n          { trigger: '@', regex: String.raw`(?:\\S+(?:[^\\n\\S][^@#\\s]\\S*)*[^\\n\\S]?|)` },\n          { trigger: '#', regex: String.raw`[^\\s,]*` }\n        ]}\n        getSearchItemReplacement={(id: string) => {\n          const item = users.find(({ id: itemId }) => itemId === id);\n\n          if (!item) return undefined;\n\n          return {\n            markdown: MentionButtonConfig.inject({\n              id: item.id,\n              type: 'user',\n              text: item.primary\n            }),\n            component: MentionButtonConfig.component,\n            props: {\n              id: item.id,\n              text: item.primary,\n              type: 'user',\n              tabIndex: -1\n            },\n            text: item.primary\n          };\n        }}\n        searchRenderers={[\n          {\n            type: MentionButtonConfig.type,\n            xmlElement: MentionButtonConfig.xmlElement,\n            regexPattern: MentionButtonConfig.regexPattern,\n            getSearchAttributes\n          },\n          {\n            type: HashtagButtonConfig.type,\n            xmlElement: HashtagButtonConfig.xmlElement,\n            regexPattern: HashtagButtonConfig.regexPattern,\n            getSearchAttributes\n          }\n        ]}\n        onSearch={searchUsers}\n        menu={users.length ? { items: users } : undefined}\n        defaultValue={\n          \"# Try writing some of your own markdown and see how it renders!\\n\\nYou can interact with mentions such as <pega-mention id='deans' text='Seth DeAngelo' type='user'/>\\n\\nThere is built in support for <pega-tag tag='tags'/> as well!\\n\\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)\"\n        }\n        onChange={() => setContent(editorRef.current?.getPlainText() || '')}\n      />\n\n      <RichTextViewer\n        content={args.content || content}\n        type='markdown'\n        interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n        markdownMap={{\n          link: (linkToken: TokenMap['link']) => {\n            if (linkToken.href?.includes('www.pega.com')) return LinkComponent;\n          }\n        }}\n      />\n    </Flex>\n  );\n};\n"]}