synapse-react-client 4.0.19 → 4.0.21

package/dist/components/Markdown/MarkdownEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.js","names":[],"sources":["../../../src/components/Markdown/MarkdownEditor.tsx"],"sourcesContent":["import {\n  Box,\n  IconButton,\n  Tab,\n  Tabs,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { useRef, useState, useEffect } from 'react'\nimport {\n  commandList,\n  CommandListType,\n  MARKDOWN_COMMANDS_DATA,\n} from '@sage-bionetworks/synapse-types'\nimport IconSvg from '../IconSvg/IconSvg'\nimport MarkdownSynapse from './MarkdownSynapse'\nimport { UserMentionModal } from './UserMentionModal'\nimport { startCase } from 'lodash-es'\n\nconst MarkdownEditorTabs = ['WRITE', 'PREVIEW'] as const\n\nexport type MarkdownEditorProps = {\n  placeholder?: string\n  text: string\n  setText: (text: string) => void\n}\n\nexport function MarkdownEditor({\n  placeholder,\n  text,\n  setText,\n}: MarkdownEditorProps) {\n  const [currentTab, setCurrentTab] = useState<number>(0)\n  const [selectionStart, setSelectionStart] = useState<number>(0)\n  const [isShowingTagModal, setIsShowingTagModal] = useState<boolean>(false)\n  const [tagModalWithKeyboard, setTagModalWithKeyboard] =\n    useState<boolean>(false)\n  const textAreaRef = useRef<HTMLTextAreaElement>(null)\n\n  /**\n   * Updates the position of the cursor. This must occur within `useEffect` because we need to ensure that the\n   * cursor position is updated after the state of `text` is updated.\n   */\n  useEffect(() => {\n    const input = textAreaRef.current\n    if (input) {\n      input.setSelectionRange(selectionStart, selectionStart)\n    }\n  }, [textAreaRef, selectionStart])\n\n  useEffect(() => {\n    textAreaRef.current?.focus()\n  }, [isShowingTagModal])\n\n  const handleUserTag = (user: string) => {\n    const newText: string[] = []\n    const textVal = textAreaRef.current\n    if (textVal) {\n      const start = textVal?.selectionStart\n      const textBeforeTag = text.substring(0, start)\n      const textAfterTag = text.substring(start, text.length)\n      setSelectionStart(start + user.length)\n      newText.push(\n        textBeforeTag,\n        `${tagModalWithKeyboard ? '' : '@'}${user.replace(/\\s/g, '')}`,\n        textAfterTag,\n      )\n    }\n    setText(newText.join(''))\n    setTagModalWithKeyboard(false)\n  }\n\n  const handleTagModal = (text: string) => {\n    const start = textAreaRef.current && textAreaRef.current.selectionStart\n    if (start && start > 0 && text.charAt(start - 1) === '@') {\n      setTagModalWithKeyboard(true)\n      setIsShowingTagModal(true)\n    }\n  }\n  const handleCommands = (command: CommandListType) => {\n    const textVal = textAreaRef.current\n    if (textVal) {\n      const start = textVal.selectionStart\n      const end = textVal.selectionEnd\n      const selected = text.substring(start, end)\n      const textBeforeSelection = text.substring(0, start)\n      const textAfterSelection = text.substring(end, text.length)\n\n      const openSyntax = MARKDOWN_COMMANDS_DATA[command].openSyntax\n      const closeSyntax = MARKDOWN_COMMANDS_DATA[command].closeSyntax\n\n      switch (command) {\n        case 'code': {\n          const newText: string[] = []\n          newText.push(\n            textBeforeSelection,\n            openSyntax,\n            selected,\n            closeSyntax,\n            textAfterSelection,\n          )\n\n          setText(newText.join('\\r\\n'))\n          textVal.focus()\n          // adds 2 due to new line\n          setSelectionStart(start + openSyntax.length + 2)\n          break\n        }\n        case 'title':\n        case 'bold':\n        case 'italic':\n        case 'strikethrough':\n        case 'latex':\n        case 'subscript':\n        case 'superscript':\n        case 'link':\n        case 'image': {\n          const newText = `${textBeforeSelection}${openSyntax}${selected}${closeSyntax}${textAfterSelection}`\n          textVal.focus()\n          setSelectionStart(start + openSyntax.length)\n          setText(newText)\n        }\n      }\n    }\n  }\n\n  return (\n    <div className=\"MarkdownEditor\">\n      <div className=\"MarkdownEditorControls\">\n        <Tabs\n          textColor=\"secondary\"\n          indicatorColor=\"secondary\"\n          value={currentTab}\n          onChange={(_e, newValue) => setCurrentTab(newValue)}\n        >\n          {MarkdownEditorTabs.map(tabName => {\n            return <Tab label={tabName} key={tabName} />\n          })}\n        </Tabs>\n        {MarkdownEditorTabs[currentTab] === 'WRITE' && (\n          <div className=\"MarkdownEditorControlsToolbar\">\n            {commandList.map(type => {\n              return (\n                <IconButton\n                  size={'small'}\n                  key={type}\n                  onClick={() => handleCommands(type)}\n                  sx={{ width: '32px', height: '32px' }}\n                >\n                  <IconSvg\n                    sx={{ fontSize: 'inherit' }}\n                    icon={type}\n                    label={startCase(type)}\n                  />\n                </IconButton>\n              )\n            })}\n            <IconButton\n              size={'small'}\n              onClick={() => setIsShowingTagModal(true)}\n              sx={{ width: '32px', height: '32px' }}\n            >\n              <IconSvg\n                sx={{ fontSize: 'inherit' }}\n                icon=\"tag\"\n                label=\"Mention\"\n              />\n            </IconButton>\n          </div>\n        )}\n      </div>\n      <div>\n        {MarkdownEditorTabs[currentTab] === 'WRITE' ? (\n          <TextField\n            inputProps={{\n              ['aria-label']: 'markdown',\n            }}\n            onChange={e => {\n              setText(e.target.value)\n              handleTagModal(e.target.value)\n            }}\n            style={{ width: '100%' }}\n            multiline\n            minRows={6}\n            value={text}\n            inputRef={textAreaRef}\n            placeholder={placeholder}\n            sx={{\n              textarea: {\n                resize: 'vertical',\n              },\n            }}\n          />\n        ) : (\n          <Box sx={{ mx: 1, my: 2 }}>\n            {text ? (\n              <MarkdownSynapse markdown={text} />\n            ) : (\n              <Typography>Nothing to preview</Typography>\n            )}\n          </Box>\n        )}\n      </div>\n\n      <UserMentionModal\n        show={isShowingTagModal}\n        onClose={() => setIsShowingTagModal(false)}\n        handleUserTag={handleUserTag}\n      />\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"MarkdownEditor.js","names":[],"sources":["../../../src/components/Markdown/MarkdownEditor.tsx"],"sourcesContent":["import {\n  Box,\n  IconButton,\n  Tab,\n  Tabs,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { useRef, useState, useEffect } from 'react'\nimport {\n  commandList,\n  CommandListType,\n  MARKDOWN_COMMANDS_DATA,\n} from '@sage-bionetworks/synapse-types'\nimport IconSvg from '../IconSvg/IconSvg'\nimport MarkdownSynapse from './MarkdownSynapse'\nimport { UserMentionModal } from './UserMentionModal'\nimport { startCase } from 'lodash-es'\n\nconst MarkdownEditorTabs = ['WRITE', 'PREVIEW'] as const\n\nexport type MarkdownEditorProps = {\n  placeholder?: string\n  text: string\n  setText: (text: string) => void\n}\n\nexport function MarkdownEditor({\n  placeholder,\n  text,\n  setText,\n}: MarkdownEditorProps) {\n  const [currentTab, setCurrentTab] = useState<number>(0)\n  const [selectionStart, setSelectionStart] = useState<number>(0)\n  const [isShowingTagModal, setIsShowingTagModal] = useState<boolean>(false)\n  const [tagModalWithKeyboard, setTagModalWithKeyboard] =\n    useState<boolean>(false)\n  const textAreaRef = useRef<HTMLTextAreaElement>(null)\n\n  /**\n   * Updates the position of the cursor. This must occur within `useEffect` because we need to ensure that the\n   * cursor position is updated after the state of `text` is updated.\n   */\n  useEffect(() => {\n    const input = textAreaRef.current\n    if (input) {\n      input.setSelectionRange(selectionStart, selectionStart)\n    }\n  }, [textAreaRef, selectionStart])\n\n  useEffect(() => {\n    textAreaRef.current?.focus()\n  }, [isShowingTagModal])\n\n  const handleUserTag = (user: string) => {\n    const newText: string[] = []\n    const textVal = textAreaRef.current\n    if (textVal) {\n      const start = textVal?.selectionStart\n      const textBeforeTag = text.substring(0, start)\n      const textAfterTag = text.substring(start, text.length)\n      setSelectionStart(start + user.length)\n      newText.push(\n        textBeforeTag,\n        `${tagModalWithKeyboard ? '' : '@'}${user.replace(/\\s/g, '')}`,\n        textAfterTag,\n      )\n    }\n    setText(newText.join(''))\n    setTagModalWithKeyboard(false)\n  }\n\n  const handleTagModal = (text: string) => {\n    const start = textAreaRef.current && textAreaRef.current.selectionStart\n    if (start && start > 0 && text.charAt(start - 1) === '@') {\n      setTagModalWithKeyboard(true)\n      setIsShowingTagModal(true)\n    }\n  }\n  const handleCommands = (command: CommandListType) => {\n    const textVal = textAreaRef.current\n    if (textVal) {\n      const start = textVal.selectionStart\n      const end = textVal.selectionEnd\n      const selected = text.substring(start, end)\n      const textBeforeSelection = text.substring(0, start)\n      const textAfterSelection = text.substring(end, text.length)\n\n      const openSyntax = MARKDOWN_COMMANDS_DATA[command].openSyntax\n      const closeSyntax = MARKDOWN_COMMANDS_DATA[command].closeSyntax\n\n      switch (command) {\n        case 'code': {\n          const newText: string[] = []\n          newText.push(\n            textBeforeSelection,\n            openSyntax,\n            selected,\n            closeSyntax,\n            textAfterSelection,\n          )\n\n          setText(newText.join('\\r\\n'))\n          textVal.focus()\n          // adds 2 due to new line\n          setSelectionStart(start + openSyntax.length + 2)\n          break\n        }\n        case 'title':\n        case 'bold':\n        case 'italic':\n        case 'strikethrough':\n        case 'latex':\n        case 'subscript':\n        case 'superscript':\n        case 'link':\n        case 'image': {\n          const newText = `${textBeforeSelection}${openSyntax}${selected}${closeSyntax}${textAfterSelection}`\n          textVal.focus()\n          setSelectionStart(start + openSyntax.length)\n          setText(newText)\n        }\n      }\n    }\n  }\n\n  return (\n    <div className=\"MarkdownEditor\">\n      <div className=\"MarkdownEditorControls\">\n        <Tabs\n          textColor=\"secondary\"\n          indicatorColor=\"secondary\"\n          value={currentTab}\n          onChange={(_e, newValue) => setCurrentTab(newValue)}\n        >\n          {MarkdownEditorTabs.map(tabName => {\n            return <Tab label={tabName} key={tabName} />\n          })}\n        </Tabs>\n        {MarkdownEditorTabs[currentTab] === 'WRITE' && (\n          <div className=\"MarkdownEditorControlsToolbar\">\n            {commandList.map(type => {\n              return (\n                <IconButton\n                  size={'small'}\n                  key={type}\n                  onClick={() => handleCommands(type)}\n                  sx={{ width: '32px', height: '32px' }}\n                >\n                  <IconSvg\n                    sx={{ fontSize: 'inherit' }}\n                    icon={type}\n                    label={startCase(type)}\n                  />\n                </IconButton>\n              )\n            })}\n            <IconButton\n              size={'small'}\n              onClick={() => setIsShowingTagModal(true)}\n              sx={{ width: '32px', height: '32px' }}\n            >\n              <IconSvg\n                sx={{ fontSize: 'inherit' }}\n                icon=\"tag\"\n                label=\"Mention\"\n              />\n            </IconButton>\n          </div>\n        )}\n      </div>\n      <div>\n        {MarkdownEditorTabs[currentTab] === 'WRITE' ? (\n          <TextField\n            inputProps={{\n              ['aria-label']: 'markdown',\n            }}\n            onChange={e => {\n              setText(e.target.value)\n              handleTagModal(e.target.value)\n            }}\n            style={{ width: '100%' }}\n            multiline\n            minRows={6}\n            value={text}\n            inputRef={textAreaRef}\n            placeholder={placeholder}\n            sx={{\n              textarea: {\n                resize: 'vertical',\n              },\n            }}\n          />\n        ) : (\n          <Box sx={{ mx: 1, my: 2 }}>\n            {text ? (\n              <MarkdownSynapse markdown={text} />\n            ) : (\n              <Typography>Nothing to preview</Typography>\n            )}\n          </Box>\n        )}\n      </div>\n\n      <UserMentionModal\n        show={isShowingTagModal}\n        onClose={() => setIsShowingTagModal(false)}\n        handleUserTag={handleUserTag}\n      />\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAmBA,IAAM,IAAqB,CAAC,SAAS,SAAS;AAQ9C,SAAgB,EAAe,EAC7B,gBACA,SACA,cACsB;CACtB,IAAM,CAAC,GAAY,KAAiB,EAAiB,CAAC,GAChD,CAAC,GAAgB,KAAqB,EAAiB,CAAC,GACxD,CAAC,GAAmB,KAAwB,EAAkB,EAAK,GACnE,CAAC,GAAsB,KAC3B,EAAkB,EAAK,GACnB,IAAc,EAA4B,IAAI;CAapD,AAPA,QAAgB;EACd,IAAM,IAAQ,EAAY;EAC1B,AAAI,KACF,EAAM,kBAAkB,GAAgB,CAAc;CAE1D,GAAG,CAAC,GAAa,CAAc,CAAC,GAEhC,QAAgB;EACd,EAAY,SAAS,MAAM;CAC7B,GAAG,CAAC,CAAiB,CAAC;CAEtB,IAAM,KAAiB,MAAiB;EACtC,IAAM,IAAoB,CAAC,GACrB,IAAU,EAAY;EAC5B,IAAI,GAAS;GACX,IAAM,IAAQ,GAAS,gBACjB,IAAgB,EAAK,UAAU,GAAG,CAAK,GACvC,IAAe,EAAK,UAAU,GAAO,EAAK,MAAM;GAEtD,AADA,EAAkB,IAAQ,EAAK,MAAM,GACrC,EAAQ,KACN,GACA,GAAG,IAAuB,KAAK,MAAM,EAAK,QAAQ,OAAO,EAAE,KAC3D,CACF;EACF;EAEA,AADA,EAAQ,EAAQ,KAAK,EAAE,CAAC,GACxB,EAAwB,EAAK;CAC/B,GAEM,KAAkB,MAAiB;EACvC,IAAM,IAAQ,EAAY,WAAW,EAAY,QAAQ;EACzD,AAAI,KAAS,IAAQ,KAAK,EAAK,OAAO,IAAQ,CAAC,MAAM,QACnD,EAAwB,EAAI,GAC5B,EAAqB,EAAI;CAE7B,GACM,KAAkB,MAA6B;EACnD,IAAM,IAAU,EAAY;EAC5B,IAAI,GAAS;GACX,IAAM,IAAQ,EAAQ,gBAChB,IAAM,EAAQ,cACd,IAAW,EAAK,UAAU,GAAO,CAAG,GACpC,IAAsB,EAAK,UAAU,GAAG,CAAK,GAC7C,IAAqB,EAAK,UAAU,GAAK,EAAK,MAAM,GAEpD,IAAa,EAAuB,GAAS,YAC7C,IAAc,EAAuB,GAAS;GAEpD,QAAQ,GAAR;IACE,KAAK,QAAQ;KACX,IAAM,IAAoB,CAAC;KAY3B,AAXA,EAAQ,KACN,GACA,GACA,GACA,GACA,CACF,GAEA,EAAQ,EAAQ,KAAK,MAAM,CAAC,GAC5B,EAAQ,MAAM,GAEd,EAAkB,IAAQ,EAAW,SAAS,CAAC;KAC/C;IACF;IACA,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK,SAAS;KACZ,IAAM,IAAU,GAAG,IAAsB,IAAa,IAAW,IAAc;KAG/E,AAFA,EAAQ,MAAM,GACd,EAAkB,IAAQ,EAAW,MAAM,GAC3C,EAAQ,CAAO;IACjB;GACF;EACF;CACF;CAEA,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KACE,WAAU;KACV,gBAAe;KACf,OAAO;KACP,WAAW,GAAI,MAAa,EAAc,CAAQ;eAEjD,EAAmB,KAAI,MACf,kBAAC,GAAD,EAAK,OAAO,EAAwB,GAAV,CAAU,CAC5C;IACG,CAAA,GACL,EAAmB,OAAgB,WAClC,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,EAAY,KAAI,MAEb,kBAAC,GAAD;MACE,MAAM;MAEN,eAAe,EAAe,CAAI;MAClC,IAAI;OAAE,OAAO;OAAQ,QAAQ;MAAO;gBAEpC,kBAAC,GAAD;OACE,IAAI,EAAE,UAAU,UAAU;OAC1B,MAAM;OACN,OAAO,EAAU,CAAI;MACtB,CAAA;KACS,GATL,CASK,CAEf,GACD,kBAAC,GAAD;MACE,MAAM;MACN,eAAe,EAAqB,EAAI;MACxC,IAAI;OAAE,OAAO;OAAQ,QAAQ;MAAO;gBAEpC,kBAAC,GAAD;OACE,IAAI,EAAE,UAAU,UAAU;OAC1B,MAAK;OACL,OAAM;MACP,CAAA;KACS,CAAA,CACT;MAEJ;;GACL,kBAAC,OAAD,EAAA,UACG,EAAmB,OAAgB,UAClC,kBAAC,GAAD;IACE,YAAY,EACT,cAAe,WAClB;IACA,WAAU,MAAK;KAEb,AADA,EAAQ,EAAE,OAAO,KAAK,GACtB,EAAe,EAAE,OAAO,KAAK;IAC/B;IACA,OAAO,EAAE,OAAO,OAAO;IACvB,WAAA;IACA,SAAS;IACT,OAAO;IACP,UAAU;IACG;IACb,IAAI,EACF,UAAU,EACR,QAAQ,WACV,EACF;GACD,CAAA,IAED,kBAAC,GAAD;IAAK,IAAI;KAAE,IAAI;KAAG,IAAI;IAAE;cACrB,IACC,kBAAC,GAAD,EAAiB,UAAU,EAAO,CAAA,IAElC,kBAAC,GAAD,EAAA,UAAY,qBAA8B,CAAA;GAEzC,CAAA,EAEJ,CAAA;GAEL,kBAAC,GAAD;IACE,MAAM;IACN,eAAe,EAAqB,EAAK;IAC1B;GAChB,CAAA;EACE;;AAET"}

package/dist/components/Markdown/MarkdownGithub.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownGithub.js","names":[],"sources":["../../../src/components/Markdown/MarkdownGithub.tsx"],"sourcesContent":["import { useFileContent } from '@/synapse-queries/file/useFiles'\nimport { useLatestTag } from '@/synapse-queries/github/useGithub'\nimport { Box, Button, Container } from '@mui/material'\nimport { SkeletonParagraph } from '../Skeleton'\nimport MarkdownSynapse from './MarkdownSynapse'\nimport { useMemo, useState } from 'react'\nimport { replaceFileExtension } from '@/utils/functions/StringUtils'\n\nexport type MarkdownGithubProps = {\n  repoOwner: string\n  repoName: string\n  filePath: string\n  showDownloadButton?: boolean\n}\n\n/**\n * Loads the latest tagged version of the (presumably MD) file from GitHub\n * @returns\n */\nexport function MarkdownGithubLatestTag(props: MarkdownGithubProps) {\n  const { repoOwner, repoName } = props\n  const { data: latestTag } = useLatestTag(repoOwner, repoName)\n  return <MarkdownGithub {...props} tagName={latestTag} />\n}\n\nconst handleDownload = (htmlContent: string, outputFileHtmlName: string) => {\n  if (!htmlContent) return\n\n  // Wrap in full HTML document structure\n  const fullHtml = `\n      <!DOCTYPE html>\n      <html>\n        <head>\n          <meta charset=\"UTF-8\">\n          <title>${outputFileHtmlName}</title>\n        </head>\n        <body style=\"margin: 0; padding: 20px; font-family: Arial, sans-serif; line-height: 24px;\">\n          ${htmlContent}\n        </body>\n      </html>\n    `\n\n  // Create a Blob and a download link\n  const blob = new Blob([fullHtml], { type: 'text/html' })\n  const url = URL.createObjectURL(blob)\n\n  const a = document.createElement('a')\n  a.href = url\n  a.download = outputFileHtmlName\n  a.click()\n\n  URL.revokeObjectURL(url)\n}\n\n/**\n * Load MD file content from GitHub (using the given tag)\n * @returns\n */\nfunction MarkdownGithub({\n  repoOwner,\n  repoName,\n  filePath,\n  tagName,\n  showDownloadButton = false,\n}: MarkdownGithubProps & {\n  tagName?: string\n}) {\n  const [htmlContent, setHtmlContent] = useState<string | null | undefined>(\n    null,\n  )\n\n  const outputFileHtmlName = useMemo(\n    () => replaceFileExtension(filePath, 'html'),\n    [filePath],\n  )\n\n  const { data: fileContent } = useFileContent(\n    `https://cdn.jsdelivr.net/gh/${repoOwner}/${repoName}@${tagName}/${filePath}`,\n    {\n      enabled: !!tagName,\n    },\n  )\n\n  const loadingUI = (\n    <Box sx={{ width: '100%' }}>\n      <SkeletonParagraph rowHeight=\"30px\" numRows={70} />\n    </Box>\n  )\n  return (\n    <Container\n      sx={{\n        '> .markdown': {\n          px: '10px', //without this, numbered lists in the md overflow left (and are cut off)\n        },\n      }}\n    >\n      {showDownloadButton && htmlContent && (\n        <Box\n          sx={{\n            display: 'flex',\n            float: 'right',\n            mt: '15px',\n          }}\n        >\n          <Button\n            variant={'outlined'}\n            color=\"primary\"\n            sx={{ mb: 1 }}\n            onClick={() => handleDownload(htmlContent, outputFileHtmlName)}\n          >\n            Download\n          </Button>\n        </Box>\n      )}\n      {fileContent ? (\n        <MarkdownSynapse\n          markdown={fileContent}\n          onMarkdownProcessingDone={setHtmlContent}\n        />\n      ) : (\n        loadingUI\n      )}\n    </Container>\n  )\n}\n\nexport default MarkdownGithub\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,EAAwB,GAA4B;CAClE,IAAM,EAAE,cAAW,gBAAa,GAC1B,EAAE,MAAM,MAAc,EAAa,GAAW,EAAS;AAC7D,QAAO,kBAAC,GAAD;EAAgB,GAAI;EAAO,SAAS;EAAa,CAAA;;AAG1D,IAAM,KAAkB,GAAqB,MAA+B;AAC1E,KAAI,CAAC,EAAa;CAGlB,IAAM,IAAW;;;;;mBAKA,EAAmB;;;YAG1B,EAAY;;;OAMhB,IAAO,IAAI,KAAK,CAAC,EAAS,EAAE,EAAE,MAAM,aAAa,CAAC,EAClD,IAAM,IAAI,gBAAgB,EAAK,EAE/B,IAAI,SAAS,cAAc,IAAI;AAKrC,CAJA,EAAE,OAAO,GACT,EAAE,WAAW,GACb,EAAE,OAAO,EAET,IAAI,gBAAgB,EAAI;;AAO1B,SAAS,EAAe,EACtB,cACA,aACA,aACA,YACA,wBAAqB,MAGpB;CACD,IAAM,CAAC,GAAa,KAAkB,EACpC,KACD,EAEK,IAAqB,QACnB,EAAqB,GAAU,OAAO,EAC5C,CAAC,EAAS,CACX,EAEK,EAAE,MAAM,MAAgB,EAC5B,+BAA+B,EAAU,GAAG,EAAS,GAAG,EAAQ,GAAG,KACnE,EACE,SAAS,CAAC,CAAC,GACZ,CACF;AAOD,QACE,kBAAC,GAAD;EACE,IAAI,EACF,eAAe,EACb,IAAI,QACL,EACF;YALH,CAOG,KAAsB,KACrB,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,OAAO;IACP,IAAI;IACL;aAED,kBAAC,GAAD;IACE,SAAS;IACT,OAAM;IACN,IAAI,EAAE,IAAI,GAAG;IACb,eAAe,EAAe,GAAa,EAAmB;cAC/D;IAEQ,CAAA;GACL,CAAA,EAEP,IACC,kBAAC,GAAD;GACE,UAAU;GACV,0BAA0B;GAC1B,CAAA,GAlCN,kBAAC,GAAD;GAAK,IAAI,EAAE,OAAO,QAAQ;aACxB,kBAAC,GAAD;IAAmB,WAAU;IAAO,SAAS;IAAM,CAAA;GAC/C,CAkCF,CAEQ"}
+{"version":3,"file":"MarkdownGithub.js","names":[],"sources":["../../../src/components/Markdown/MarkdownGithub.tsx"],"sourcesContent":["import { useFileContent } from '@/synapse-queries/file/useFiles'\nimport { useLatestTag } from '@/synapse-queries/github/useGithub'\nimport { Box, Button, Container } from '@mui/material'\nimport { SkeletonParagraph } from '../Skeleton'\nimport MarkdownSynapse from './MarkdownSynapse'\nimport { useMemo, useState } from 'react'\nimport { replaceFileExtension } from '@/utils/functions/StringUtils'\n\nexport type MarkdownGithubProps = {\n  repoOwner: string\n  repoName: string\n  filePath: string\n  showDownloadButton?: boolean\n}\n\n/**\n * Loads the latest tagged version of the (presumably MD) file from GitHub\n * @returns\n */\nexport function MarkdownGithubLatestTag(props: MarkdownGithubProps) {\n  const { repoOwner, repoName } = props\n  const { data: latestTag } = useLatestTag(repoOwner, repoName)\n  return <MarkdownGithub {...props} tagName={latestTag} />\n}\n\nconst handleDownload = (htmlContent: string, outputFileHtmlName: string) => {\n  if (!htmlContent) return\n\n  // Wrap in full HTML document structure\n  const fullHtml = `\n      <!DOCTYPE html>\n      <html>\n        <head>\n          <meta charset=\"UTF-8\">\n          <title>${outputFileHtmlName}</title>\n        </head>\n        <body style=\"margin: 0; padding: 20px; font-family: Arial, sans-serif; line-height: 24px;\">\n          ${htmlContent}\n        </body>\n      </html>\n    `\n\n  // Create a Blob and a download link\n  const blob = new Blob([fullHtml], { type: 'text/html' })\n  const url = URL.createObjectURL(blob)\n\n  const a = document.createElement('a')\n  a.href = url\n  a.download = outputFileHtmlName\n  a.click()\n\n  URL.revokeObjectURL(url)\n}\n\n/**\n * Load MD file content from GitHub (using the given tag)\n * @returns\n */\nfunction MarkdownGithub({\n  repoOwner,\n  repoName,\n  filePath,\n  tagName,\n  showDownloadButton = false,\n}: MarkdownGithubProps & {\n  tagName?: string\n}) {\n  const [htmlContent, setHtmlContent] = useState<string | null | undefined>(\n    null,\n  )\n\n  const outputFileHtmlName = useMemo(\n    () => replaceFileExtension(filePath, 'html'),\n    [filePath],\n  )\n\n  const { data: fileContent } = useFileContent(\n    `https://cdn.jsdelivr.net/gh/${repoOwner}/${repoName}@${tagName}/${filePath}`,\n    {\n      enabled: !!tagName,\n    },\n  )\n\n  const loadingUI = (\n    <Box sx={{ width: '100%' }}>\n      <SkeletonParagraph rowHeight=\"30px\" numRows={70} />\n    </Box>\n  )\n  return (\n    <Container\n      sx={{\n        '> .markdown': {\n          px: '10px', //without this, numbered lists in the md overflow left (and are cut off)\n        },\n      }}\n    >\n      {showDownloadButton && htmlContent && (\n        <Box\n          sx={{\n            display: 'flex',\n            float: 'right',\n            mt: '15px',\n          }}\n        >\n          <Button\n            variant={'outlined'}\n            color=\"primary\"\n            sx={{ mb: 1 }}\n            onClick={() => handleDownload(htmlContent, outputFileHtmlName)}\n          >\n            Download\n          </Button>\n        </Box>\n      )}\n      {fileContent ? (\n        <MarkdownSynapse\n          markdown={fileContent}\n          onMarkdownProcessingDone={setHtmlContent}\n        />\n      ) : (\n        loadingUI\n      )}\n    </Container>\n  )\n}\n\nexport default MarkdownGithub\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,EAAwB,GAA4B;CAClE,IAAM,EAAE,cAAW,gBAAa,GAC1B,EAAE,MAAM,MAAc,EAAa,GAAW,CAAQ;CAC5D,OAAO,kBAAC,GAAD;EAAgB,GAAI;EAAO,SAAS;CAAY,CAAA;AACzD;AAEA,IAAM,KAAkB,GAAqB,MAA+B;CAC1E,IAAI,CAAC,GAAa;CAGlB,IAAM,IAAW;;;;;mBAKA,EAAmB;;;YAG1B,EAAY;;;OAMhB,IAAO,IAAI,KAAK,CAAC,CAAQ,GAAG,EAAE,MAAM,YAAY,CAAC,GACjD,IAAM,IAAI,gBAAgB,CAAI,GAE9B,IAAI,SAAS,cAAc,GAAG;CAKpC,AAJA,EAAE,OAAO,GACT,EAAE,WAAW,GACb,EAAE,MAAM,GAER,IAAI,gBAAgB,CAAG;AACzB;AAMA,SAAS,EAAe,EACtB,cACA,aACA,aACA,YACA,wBAAqB,MAGpB;CACD,IAAM,CAAC,GAAa,KAAkB,EACpC,IACF,GAEM,IAAqB,QACnB,EAAqB,GAAU,MAAM,GAC3C,CAAC,CAAQ,CACX,GAEM,EAAE,MAAM,MAAgB,EAC5B,+BAA+B,EAAU,GAAG,EAAS,GAAG,EAAQ,GAAG,KACnE,EACE,SAAS,CAAC,CAAC,EACb,CACF;CAOA,OACE,kBAAC,GAAD;EACE,IAAI,EACF,eAAe,EACb,IAAI,OACN,EACF;YALF,CAOG,KAAsB,KACrB,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,OAAO;IACP,IAAI;GACN;aAEA,kBAAC,GAAD;IACE,SAAS;IACT,OAAM;IACN,IAAI,EAAE,IAAI,EAAE;IACZ,eAAe,EAAe,GAAa,CAAkB;cAC9D;GAEO,CAAA;EACL,CAAA,GAEN,IACC,kBAAC,GAAD;GACE,UAAU;GACV,0BAA0B;EAC3B,CAAA,IAlCL,kBAAC,GAAD;GAAK,IAAI,EAAE,OAAO,OAAO;aACvB,kBAAC,GAAD;IAAmB,WAAU;IAAO,SAAS;GAAK,CAAA;EAC/C,CAkCD,CAEO;;AAEf"}

package/dist/components/Markdown/MarkdownPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownPopover.js","names":[],"sources":["../../../src/components/Markdown/MarkdownPopover.tsx"],"sourcesContent":["import {\n  StyledPopover,\n  StyledPopoverProps,\n} from '@/components/styled/StyledPopover'\nimport { Typography } from '@mui/material'\nimport MarkdownSynapse, { MarkdownSynapseProps } from './MarkdownSynapse'\n\nexport type MarkdownPopoverProps = Omit<\n  StyledPopoverProps,\n  'popoverContent'\n> & {\n  contentProps: MarkdownSynapseProps\n}\n\nexport function MarkdownPopover(props: MarkdownPopoverProps) {\n  const { contentProps, ...rest } = props\n  return (\n    <StyledPopover\n      {...rest}\n      popoverContent={\n        <Typography variant=\"body1\" component={'div'}>\n          <MarkdownSynapse {...contentProps} />\n        </Typography>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;AAcA,SAAgB,EAAgB,GAA6B;CAC3D,IAAM,EAAE,iBAAc,GAAG,MAAS;AAClC,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,gBACE,kBAAC,GAAD;GAAY,SAAQ;GAAQ,WAAW;aACrC,kBAAC,GAAD,EAAiB,GAAI,GAAgB,CAAA;GAC1B,CAAA;EAEf,CAAA"}
+{"version":3,"file":"MarkdownPopover.js","names":[],"sources":["../../../src/components/Markdown/MarkdownPopover.tsx"],"sourcesContent":["import {\n  StyledPopover,\n  StyledPopoverProps,\n} from '@/components/styled/StyledPopover'\nimport { Typography } from '@mui/material'\nimport MarkdownSynapse, { MarkdownSynapseProps } from './MarkdownSynapse'\n\nexport type MarkdownPopoverProps = Omit<\n  StyledPopoverProps,\n  'popoverContent'\n> & {\n  contentProps: MarkdownSynapseProps\n}\n\nexport function MarkdownPopover(props: MarkdownPopoverProps) {\n  const { contentProps, ...rest } = props\n  return (\n    <StyledPopover\n      {...rest}\n      popoverContent={\n        <Typography variant=\"body1\" component={'div'}>\n          <MarkdownSynapse {...contentProps} />\n        </Typography>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;AAcA,SAAgB,EAAgB,GAA6B;CAC3D,IAAM,EAAE,iBAAc,GAAG,MAAS;CAClC,OACE,kBAAC,GAAD;EACE,GAAI;EACJ,gBACE,kBAAC,GAAD;GAAY,SAAQ;GAAQ,WAAW;aACrC,kBAAC,GAAD,EAAiB,GAAI,EAAe,CAAA;EAC1B,CAAA;CAEf,CAAA;AAEL"}

package/dist/components/Markdown/MarkdownSynapse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownSynapse.d.ts","sourceRoot":"","sources":["../../../src/components/Markdown/MarkdownSynapse.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAoB5D,eAAO,MAAM,eAAe,yBAAyB,CAAA;AAErD,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,wBAAwB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAC3E,8BAA8B,CAAC,EAAE,OAAO,CAAA;CACzC,CAAA;AAmTD;;;;;GAKG;AACH,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CA0HnD;AAED,OAAO,EAAE,eAAe,EAAE,eAAe,IAAI,QAAQ,EAAE,CAAA;AAEvD,eAAe,eAAe,CAAA"}
+{"version":3,"file":"MarkdownSynapse.d.ts","sourceRoot":"","sources":["../../../src/components/Markdown/MarkdownSynapse.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AA4B5D,eAAO,MAAM,eAAe,yBAAyB,CAAA;AAErD,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,wBAAwB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAC3E,8BAA8B,CAAC,EAAE,OAAO,CAAA;CACzC,CAAA;AA6QD;;;;;GAKG;AACH,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CA0HnD;AAED,OAAO,EAAE,eAAe,EAAE,eAAe,IAAI,QAAQ,EAAE,CAAA;AAEvD,eAAe,eAAe,CAAA"}

package/dist/components/Markdown/MarkdownSynapse.js

@@ -12,31 +12,32 @@ import { Link as _, Typography as v } from "@mui/material";
 import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 import { ObjectType as S } from "@sage-bionetworks/synapse-types";
 import C from "markdown-it";
-import w from "@sage-bionetworks/markdown-it-container";
-import T from "markdown-it-br";
-import E from "markdown-it-center-text";
-import D from "markdown-it-inline-comments";
-import O from "markdown-it-strikethrough-alt";
-import k from "markdown-it-sub-alt";
-import A from "markdown-it-sup-alt";
-import * as j from "markdown-it-synapse";
-import M from "markdown-it-synapse";
-import N from "markdown-it-synapse-heading";
-import P from "markdown-it-synapse-math";
-import F from "markdown-it-synapse-table";
+import { Element as w, attributesToProps as T, domToReact as E, htmlToDOM as D } from "html-react-parser";
+import O from "@sage-bionetworks/markdown-it-container";
+import k from "markdown-it-br";
+import A from "markdown-it-center-text";
+import j from "markdown-it-inline-comments";
+import M from "markdown-it-strikethrough-alt";
+import N from "markdown-it-sub-alt";
+import P from "markdown-it-sup-alt";
+import * as F from "markdown-it-synapse";
+import I from "markdown-it-synapse";
+import L from "markdown-it-synapse-heading";
+import R from "markdown-it-synapse-math";
+import z from "markdown-it-synapse-table";
 //#region src/components/Markdown/MarkdownSynapse.tsx
-var I = "There is no content.", L = C({ html: !0 });
-j.init_markdown_it(L, k, A, E, N, F, O, w, D, T);
-var R = "";
-L.use(M, R, "https://synapse.org").use(P, R);
-function z(e) {
-	let { markdown: t, renderInline: n } = e, r = h(() => (j.resetFootnotes(), B(n, t), B(n, j.footnotes()).__html), [t, n]);
+var B = "There is no content.", V = C({ html: !0 });
+F.init_markdown_it(V, N, P, A, L, z, M, O, j, k);
+var H = "";
+V.use(I, H, "https://synapse.org").use(R, H);
+function U(e) {
+	let { markdown: t, renderInline: n } = e, r = h(() => (F.resetFootnotes(), W(n, t), W(n, F.footnotes()).__html), [t, n]);
 	return r.length > 0 ? /* @__PURE__ */ b("div", { children: /* @__PURE__ */ b(p, { footnotes: r }) }) : null;
 }
-function B(t, n) {
-	return n ? { __html: e(t ? L.renderInline(n) : L.render(n)) } : { __html: "" };
+function W(t, n) {
+	return n ? { __html: e(t ? V.renderInline(n) : V.render(n)) } : { __html: "" };
 }
-function V(e) {
+function G(e) {
 	let { widgetParams: t, originalMarkup: n } = e, r = o(t), i = r.indexOf("?");
 	if (i === -1) return /* @__PURE__ */ b(d, {
 		widgetType: r,
@@ -53,104 +54,72 @@ function V(e) {
 		originalMarkup: n
 	}, JSON.stringify(r));
 }
-function H(e) {
-	let { renderInline: t, markdown: n, isLoading: r, showPlaceholderIfNoWikiContent: o } = e, c = h(() => {
-		let e = B(t, n).__html;
-		return e = i(e), e = a(e), e;
-	}, [n, t]), l = h(() => {
-		if (c.length > 0) {
-			let e = new DOMParser().parseFromString(c, "text/html");
-			return s(e.body), e.body;
-		}
-		return null;
-	}, [c]);
-	if (l) return /* @__PURE__ */ b(U, {
-		element: l,
-		markdown: c
-	});
-	if (!r && o && c === "") return /* @__PURE__ */ b(v, {
-		variant: "body1Italic",
-		sx: { mb: 1 },
-		children: I
-	});
-}
-function U(e) {
-	let { element: t, markdown: n } = e;
-	if (t.nodeType === Node.TEXT_NODE) return /* @__PURE__ */ b(y, { children: t.textContent });
-	if (t.nodeType === Node.ELEMENT_NODE && t instanceof HTMLElement) {
-		let e = t.tagName.toLowerCase(), r = t.getAttribute("data-widgetparams");
-		if (r) return /* @__PURE__ */ b(V, {
+function K(e) {
+	let t = { replace: (n) => {
+		if (!(n instanceof w)) return;
+		let r = n.attribs["data-widgetparams"];
+		if (r) return /* @__PURE__ */ b(G, {
 			widgetParams: r,
-			originalMarkup: n
+			originalMarkup: e
 		});
-		let i = t.attributes, a = {};
-		for (let e = 0; e < i.length; e++) {
-			let t = "", n = "", r = i.item(e);
-			r && (t = r.name, n = r.value), t && n && (a[t] = n);
-		}
-		let { style: o, class: s, ...c } = a;
-		if (c.className = s, o && (c.STYLE = o), t.childNodes.length === 0) return /* @__PURE__ */ b(e, { ...c });
-		let l = Array.from(t.childNodes).map((e, t) => /* @__PURE__ */ b(U, {
-			element: e,
-			markdown: n
-		}, t));
-		switch (e) {
-			case "p": return /* @__PURE__ */ b(v, {
-				variant: "body1",
-				...c,
-				component: e,
-				children: l
-			});
-			case "span": return /* @__PURE__ */ b(v, {
+		let i = n.name.toLowerCase(), a = T(n.attribs), o = E(n.children, t);
+		switch (i) {
+			case "p":
+			case "span":
+			case "ol":
+			case "ul": return /* @__PURE__ */ b(v, {
 				variant: "body1",
-				...c,
-				component: e,
-				children: l
+				...a,
+				component: i,
+				children: o
 			});
 			case "h1": return /* @__PURE__ */ b(v, {
 				variant: "headline1",
-				...c,
-				component: e,
-				children: l
+				...a,
+				component: i,
+				children: o
 			});
 			case "h2": return /* @__PURE__ */ b(v, {
 				variant: "headline2",
-				...c,
-				component: e,
-				children: l
+				...a,
+				component: i,
+				children: o
 			});
 			case "h3": return /* @__PURE__ */ b(v, {
 				variant: "headline3",
-				...c,
-				component: e,
-				children: l
-			});
-			case "ol": return /* @__PURE__ */ b(v, {
-				variant: "body1",
-				...c,
-				component: e,
-				children: l
-			});
-			case "ul": return /* @__PURE__ */ b(v, {
-				variant: "body1",
-				...c,
-				component: e,
-				children: l
+				...a,
+				component: i,
+				children: o
 			});
 			case "a": return /* @__PURE__ */ b(_, {
-				...c,
-				component: e,
-				children: l
-			});
-			default: return e === "body" ? l : /* @__PURE__ */ b(e, {
-				...c,
-				children: l
+				...a,
+				component: i,
+				children: o
 			});
+			default: return;
+		}
+	} };
+	return t;
+}
+function q(e) {
+	let { renderInline: t, markdown: n, isLoading: r, showPlaceholderIfNoWikiContent: o } = e, c = h(() => {
+		let e = W(t, n).__html;
+		return e = i(e), e = a(e), e;
+	}, [n, t]), l = h(() => {
+		if (c.length > 0) {
+			let e = D(c);
+			return e.forEach((e) => s(e)), E(e, K(c));
 		}
-	}
-	return null;
+		return null;
+	}, [c]);
+	if (l) return /* @__PURE__ */ b(y, { children: l });
+	if (!r && o && c === "") return /* @__PURE__ */ b(v, {
+		variant: "body1Italic",
+		sx: { mb: 1 },
+		children: B
+	});
 }
-function W(e) {
+function J(e) {
 	let { ownerId: i, wikiId: a, objectType: o = S.ENTITY, markdown: s, onMarkdownProcessingDone: d, renderInline: p = !1, loadingSkeletonRowCount: h, showPlaceholderIfNoWikiContent: _ = !1 } = e, v = g(null), { data: y, isLoading: C, error: w } = r({
 		ownerObjectId: i,
 		wikiPageId: a,
@@ -168,7 +137,7 @@ function W(e) {
 	}, []);
 	let A = s || y?.markdown || "";
 	m(() => {
-		A && d && d(B(p, A).__html);
+		A && d && d(W(p, A).__html);
 	}, [
 		y,
 		d,
@@ -190,13 +159,13 @@ function W(e) {
 		},
 		children: [
 			O && j,
-			(A || _) && /* @__PURE__ */ b(H, {
+			(A || _) && /* @__PURE__ */ b(q, {
 				markdown: A,
 				renderInline: p,
 				isLoading: O,
 				showPlaceholderIfNoWikiContent: _
 			}),
-			A && /* @__PURE__ */ b(z, {
+			A && /* @__PURE__ */ b(U, {
 				renderInline: p,
 				markdown: A
 			})
@@ -215,6 +184,6 @@ function W(e) {
 	});
 }
 //#endregion
-export { W as Markdown, W as MarkdownSynapse, W as default, I as NO_WIKI_CONTENT };
+export { J as Markdown, J as MarkdownSynapse, J as default, B as NO_WIKI_CONTENT };
 
 //# sourceMappingURL=MarkdownSynapse.js.map

package/dist/components/Markdown/MarkdownSynapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownSynapse.js","names":[],"sources":["../../../src/components/Markdown/MarkdownSynapse.tsx"],"sourcesContent":["import {\n  addIdsToReferenceWidgets,\n  addIdsToTocWidgets,\n  decodeXml,\n  handleLinkClicks,\n  processMath,\n  fixInvalidNesting,\n} from '@/components/Markdown/MarkdownUtils'\nimport {\n  useGetWikiPage,\n  useGetWikiAttachments,\n} from '@/synapse-queries/wiki/useWiki'\nimport { sanitize } from '@/utils/functions/SanitizeHtmlUtils'\nimport { Link, Typography } from '@mui/material'\nimport markdownitContainer from '@sage-bionetworks/markdown-it-container'\nimport { ObjectType } from '@sage-bionetworks/synapse-types'\nimport MarkdownIt from 'markdown-it'\nimport markdownitBr from 'markdown-it-br'\nimport markdownitCentertext from 'markdown-it-center-text'\nimport markdownitInlineComments from 'markdown-it-inline-comments'\nimport markdownitStrikethroughAlt from 'markdown-it-strikethrough-alt'\nimport markdownitSub from 'markdown-it-sub-alt'\nimport markdownitSup from 'markdown-it-sup-alt'\nimport * as markdownitSynapse from 'markdown-it-synapse'\nimport markdownitSynapsePlugin from 'markdown-it-synapse'\nimport markdownitSynapseHeading from 'markdown-it-synapse-heading'\nimport markdownitMath from 'markdown-it-synapse-math'\nimport markdownitSynapseTable from 'markdown-it-synapse-table'\nimport { JSX, useEffect, useMemo, useRef } from 'react'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport { SkeletonTable } from '../Skeleton'\nimport MarkdownWidget from './MarkdownWidget'\nimport { SynapseWikiContextProvider } from './SynapseWikiContext'\nimport Bookmarks from './widget/Bookmarks'\n\nexport const NO_WIKI_CONTENT = 'There is no content.'\n\nexport type MarkdownSynapseProps = {\n  ownerId?: string\n  wikiId?: string\n  markdown?: string\n  renderInline?: boolean\n  objectType?: ObjectType\n  loadingSkeletonRowCount?: number\n  onMarkdownProcessingDone?: (htmlContent: string | null | undefined) => void\n  showPlaceholderIfNoWikiContent?: boolean\n}\n\n// Configure markdown-it\nconst md = MarkdownIt({ html: true })\nmarkdownitSynapse.init_markdown_it(\n  md,\n  markdownitSub,\n  markdownitSup,\n  markdownitCentertext,\n  markdownitSynapseHeading,\n  markdownitSynapseTable,\n  markdownitStrikethroughAlt,\n  markdownitContainer,\n  markdownitInlineComments,\n  markdownitBr,\n)\nconst mathSuffix = ''\nmd.use(markdownitSynapsePlugin, mathSuffix, 'https://synapse.org').use(\n  markdownitMath,\n  mathSuffix,\n)\n\n/**\n * Process all the corresponding bookmark tags of the references made throughout the page and renders footnotes, if any exist.\n */\nfunction AddBookmarks(props: { renderInline: boolean; markdown: string }) {\n  const { markdown, renderInline } = props\n  const footnotesHtml = useMemo(() => {\n    markdownitSynapse.resetFootnotes()\n    createHTML(renderInline, markdown)\n    return createHTML(renderInline, markdownitSynapse.footnotes()).__html\n  }, [markdown, renderInline])\n\n  if (footnotesHtml.length > 0) {\n    return (\n      <div>\n        <Bookmarks footnotes={footnotesHtml} />\n      </div>\n    )\n  }\n  return null\n}\n\n/**\n * Given input text, generate markdown object to be passed onto inner html of some container.\n * @param {String} markdown The text being written in plain markdown\n * @returns {Object} Dictionary to be passed into dangerouslySetInnerHTML with markdown text\n */\nfunction createHTML(renderInline: boolean, markdown?: string) {\n  if (!markdown) {\n    return { __html: '' }\n  }\n  // Note - renderInline parses out any block level elements contained in the markdown\n  const initText = renderInline\n    ? md.renderInline(markdown)\n    : md.render(markdown)\n  const cleanText = sanitize(initText)\n  return { __html: cleanText }\n}\n\n/**\n * Given widgetMap renders it in a React component (or originalMarkup in special cases.)\n *\n * @param {string} widgetParams The params of the widget to render\n * @param {string} originalMarkup The original markup text, this is a special case for widgets that\n * are html specific.\n * @returns the rendered markdown widget\n */\nfunction MapParamsToMarkdownWidget(props: {\n  widgetParams: string\n  originalMarkup: string\n}) {\n  const { widgetParams, originalMarkup } = props\n  // General workflow -\n  //   1. Capture widget parameters\n  //   2. Transform any widget xml parameters to standard text\n  //   3. Split those parameters into a map\n  //   4. Render that widget based on its parameters\n\n  // steps 1,2\n  const decodedWidgetParams = decodeXml(widgetParams)\n\n  // decodedWidgetParams look like {<widget>?param1=xxx&param2=yyy}\n  const questionIndex = decodedWidgetParams.indexOf('?')\n  if (questionIndex === -1) {\n    // e.g. toc is passed, there are no params\n    return (\n      <MarkdownWidget\n        key={JSON.stringify(decodedWidgetParams)}\n        widgetType={decodedWidgetParams as any}\n        widgetParamsMapped={{}}\n        originalMarkup={originalMarkup}\n      />\n    )\n  }\n  const widgetType = decodedWidgetParams.substring(0, questionIndex)\n  const widgetParamsMapped: Record<string, string> = {}\n  // map out params and their values\n  decodedWidgetParams\n    .substring(questionIndex + 1)\n    .split('&')\n    .forEach(keyPair => {\n      let [key, value] = keyPair.split('=')\n      value = decodeURIComponent(value)\n      widgetParamsMapped[key] = value\n    })\n  return (\n    <MarkdownWidget\n      key={JSON.stringify(decodedWidgetParams)}\n      widgetType={widgetType as any}\n      widgetParamsMapped={widgetParamsMapped}\n      originalMarkup={originalMarkup}\n    />\n  )\n}\n\n/**\n * Component that process all the markdown and transforms it to the appropriate Synapse widgets.\n *\n * @returns JSX of the markdown into widgets\n */\nfunction RenderMarkdown(props: {\n  renderInline: boolean\n  markdown: string\n  isLoading: boolean\n  showPlaceholderIfNoWikiContent: boolean\n}) {\n  const { renderInline, markdown, isLoading, showPlaceholderIfNoWikiContent } =\n    props\n\n  const markup = useMemo(() => {\n    // create initial markup\n    let markup = createHTML(renderInline, markdown).__html\n    // process reference widgets\n    markup = addIdsToReferenceWidgets(markup)\n    // process table of contents widgets\n    markup = addIdsToTocWidgets(markup)\n\n    return markup\n  }, [markdown, renderInline])\n\n  const processedDocuments = useMemo(() => {\n    if (markup.length > 0) {\n      const domParser = new DOMParser()\n      const document = domParser.parseFromString(markup, 'text/html')\n\n      fixInvalidNesting(document.body)\n\n      return document.body\n    }\n    return null\n  }, [markup])\n\n  if (processedDocuments) {\n    return <RecursiveRender element={processedDocuments} markdown={markup} />\n  }\n\n  if (!isLoading && showPlaceholderIfNoWikiContent && markup === '') {\n    return (\n      <Typography variant=\"body1Italic\" sx={{ mb: 1 }}>\n        {NO_WIKI_CONTENT}\n      </Typography>\n    )\n  }\n\n  return\n}\n\n/**\n * recursiveRender will render react tree from HTML tree\n *\n * @param {Node} element This will be either a text Node or an HTMLElement\n * @param {string} markdown The original markdown, its kept as a special case for the table of contents widget\n * @returns {*}\n */\n\nfunction RecursiveRender(props: { element: Node; markdown: string }) {\n  const { element, markdown } = props\n  /*\n    Recursively render the html tree created from the markdown, there are a few cases:\n    1. element is Node and is text in which case it is simply rendered\n    2. element is an HTMLElement and is: a self closing tag, has no children (e.g. <br>), or its a synapse widget and is\n    rendered accordingly\n    3. element is an HTMLElement and has children so we loop through its childNodes, recurively render those, and then render its own tag\n    as the parent of those child nodes. Note - childNodes was specifically chosen over .children because text Nodes\n    would not come through .children\n  */\n  if (element.nodeType === Node.TEXT_NODE) {\n    // case 1.\n    return <>{element.textContent}</>\n  } else if (\n    element.nodeType === Node.ELEMENT_NODE &&\n    element instanceof HTMLElement\n  ) {\n    const Tag: keyof JSX.IntrinsicElements =\n      element.tagName.toLowerCase() as keyof JSX.IntrinsicElements\n    const widgetParams = element.getAttribute('data-widgetparams')\n\n    if (widgetParams) {\n      // case 2\n      // process widget\n      return (\n        <MapParamsToMarkdownWidget\n          widgetParams={widgetParams}\n          originalMarkup={markdown}\n        />\n      )\n    }\n    // manually add on props, depending on what comes through the markdown their could\n    // be unforseen issues with attributes being misnamed according to what react will respect\n    // e.g. class instead of className\n    const attributes = element.attributes\n    const rawProps: Record<string, string> = {}\n    for (let i = 0; i < attributes.length; i++) {\n      let name = ''\n      let value = ''\n      const attribute = attributes.item(i)\n      if (attribute) {\n        name = attribute.name\n        value = attribute.value\n      }\n      if (name && value) {\n        rawProps[name] = value\n      }\n    }\n\n    const { style: styleString, class: className, ...props } = rawProps\n    // Remap class to className\n    props.className = className\n    if (styleString) {\n      // React expects the `style` prop to be an object, not a string, so use\n      // the all-caps STYLE to pass the style string as a custom attribute\n      props.STYLE = styleString\n    }\n\n    if (element.childNodes.length === 0) {\n      // case 2\n      // e.g. self closing tag like <br/> or <img>\n      return <Tag {...props} />\n    }\n\n    // case 3\n    // recursively render children\n    const children = Array.from(element.childNodes).map((el, index) => {\n      return <RecursiveRender key={index} element={el} markdown={markdown} />\n    })\n    // Render tagName as parent element of the children below\n    switch (Tag) {\n      case 'p':\n        return (\n          <Typography variant={'body1'} {...props} component={Tag}>\n            {children}\n          </Typography>\n        )\n      case 'span':\n        return (\n          <Typography variant={'body1'} {...props} component={Tag}>\n            {children}\n          </Typography>\n        )\n      case 'h1':\n        return (\n          <Typography variant={'headline1'} {...props} component={Tag}>\n            {children}\n          </Typography>\n        )\n      case 'h2':\n        return (\n          <Typography variant={'headline2'} {...props} component={Tag}>\n            {children}\n          </Typography>\n        )\n      case 'h3':\n        return (\n          <Typography variant={'headline3'} {...props} component={Tag}>\n            {children}\n          </Typography>\n        )\n      case 'ol':\n        return (\n          <Typography variant={'body1'} {...props} component={Tag}>\n            {children}\n          </Typography>\n        )\n      case 'ul':\n        return (\n          <Typography variant={'body1'} {...props} component={Tag}>\n            {children}\n          </Typography>\n        )\n      case 'a':\n        return (\n          <Link {...props} component={Tag}>\n            {children}\n          </Link>\n        )\n      default:\n        if (Tag === 'body') {\n          // The component ultimately wraps this content, so if the tag is 'body', just render the children.\n          return children\n        }\n        return <Tag {...props}>{children}</Tag>\n    }\n  }\n  return null\n}\n\n/**\n * Basic Markdown functionality for Synapse, supporting Images/Plots/References/Bookmarks/buttonlinks\n *\n * @class Markdown\n * @extends {Component}\n */\nfunction MarkdownSynapse(props: MarkdownSynapseProps) {\n  const {\n    ownerId,\n    wikiId,\n    objectType = ObjectType.ENTITY,\n    markdown: markdownFromProps,\n    onMarkdownProcessingDone,\n    renderInline = false,\n    loadingSkeletonRowCount,\n    showPlaceholderIfNoWikiContent = false,\n  } = props\n\n  const markupRef = useRef<HTMLDivElement>(null)\n\n  const {\n    data: wikiPage,\n    isLoading: isLoadingWikiPage,\n    error: getWikiPageError,\n  } = useGetWikiPage(\n    {\n      ownerObjectId: ownerId!,\n      wikiPageId: wikiId!,\n      ownerObjectType: objectType,\n    },\n    { enabled: Boolean(ownerId) },\n  )\n\n  const {\n    data: wikiAttachments,\n    isLoading: isLoadingWikiAttachments,\n    error: getWikiAttachmentsError,\n  } = useGetWikiAttachments(\n    {\n      ownerObjectId: ownerId!,\n      wikiPageId: wikiId!,\n      ownerObjectType: objectType,\n    },\n    {\n      enabled: Boolean(ownerId),\n    },\n  )\n\n  const isLoading = isLoadingWikiPage || isLoadingWikiAttachments\n  const error = getWikiPageError || getWikiAttachmentsError\n\n  /* Add click handler to the markdown area to handle clicking refs, ToC, etc. */\n  useEffect(() => {\n    const currentMarkupNode = markupRef.current\n    if (currentMarkupNode) {\n      currentMarkupNode.addEventListener('click', handleLinkClicks)\n    }\n    return () => {\n      if (currentMarkupNode) {\n        currentMarkupNode.removeEventListener('click', handleLinkClicks)\n      }\n    }\n  }, [])\n\n  const markdown = markdownFromProps || wikiPage?.markdown || ''\n\n  /* When the markdown changes, call the `onMarkdownProcessingDone` callback */\n  useEffect(() => {\n    if (markdown && onMarkdownProcessingDone) {\n      onMarkdownProcessingDone(createHTML(renderInline, markdown).__html)\n    }\n  }, [wikiPage, onMarkdownProcessingDone, renderInline])\n\n  /* When the markdown changes, re-run the math processor */\n  useEffect(() => {\n    if (markdown) {\n      processMath(markupRef)\n    }\n  }, [markdown])\n\n  const loader = loadingSkeletonRowCount ? (\n    <SkeletonTable numCols={1} numRows={loadingSkeletonRowCount} />\n  ) : (\n    <span className=\"spinner\" />\n  )\n\n  if (error) {\n    return <ErrorBanner error={error} />\n  }\n  const content = (\n    <SynapseWikiContextProvider\n      wikiContext={{\n        ownerId: props.ownerId,\n        wikiId: props.wikiId,\n        wikiPage: wikiPage,\n        fileHandles: wikiAttachments,\n      }}\n    >\n      {isLoading && loader}\n      {(markdown || showPlaceholderIfNoWikiContent) && (\n        <RenderMarkdown\n          markdown={markdown}\n          renderInline={renderInline}\n          isLoading={isLoading}\n          showPlaceholderIfNoWikiContent={showPlaceholderIfNoWikiContent}\n        />\n      )}\n      {markdown && (\n        <AddBookmarks renderInline={renderInline} markdown={markdown} />\n      )}\n    </SynapseWikiContextProvider>\n  )\n  if (renderInline) {\n    return (\n      <span\n        data-testid=\"markdown\"\n        className=\"markdown markdown-inline\"\n        ref={markupRef}\n      >\n        {content}\n      </span>\n    )\n  }\n  return (\n    <div data-testid=\"markdown\" className=\"markdown\" ref={markupRef}>\n      {content}\n    </div>\n  )\n}\n\nexport { MarkdownSynapse, MarkdownSynapse as Markdown }\n\nexport default MarkdownSynapse\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAa,IAAkB,wBAczB,IAAK,EAAW,EAAE,MAAM,IAAM,CAAC;AACrC,EAAkB,iBAChB,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,EACD;AACD,IAAM,IAAa;AACnB,EAAG,IAAI,GAAyB,GAAY,sBAAsB,CAAC,IACjE,GACA,EACD;AAKD,SAAS,EAAa,GAAoD;CACxE,IAAM,EAAE,aAAU,oBAAiB,GAC7B,IAAgB,SACpB,EAAkB,gBAAgB,EAClC,EAAW,GAAc,EAAS,EAC3B,EAAW,GAAc,EAAkB,WAAW,CAAC,CAAC,SAC9D,CAAC,GAAU,EAAa,CAAC;AAS5B,QAPI,EAAc,SAAS,IAEvB,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD,EAAW,WAAW,GAAiB,CAAA,EACnC,CAAA,GAGH;;AAQT,SAAS,EAAW,GAAuB,GAAmB;AAS5D,QARK,IAQE,EAAE,QADS,EAHD,IACb,EAAG,aAAa,EAAS,GACzB,EAAG,OAAO,EAAS,CAEN,EAAW,GAPnB,EAAE,QAAQ,IAAI;;AAkBzB,SAAS,EAA0B,GAGhC;CACD,IAAM,EAAE,iBAAc,sBAAmB,GAQnC,IAAsB,EAAU,EAAa,EAG7C,IAAgB,EAAoB,QAAQ,IAAI;AACtD,KAAI,MAAkB,GAEpB,QACE,kBAAC,GAAD;EAEE,YAAY;EACZ,oBAAoB,EAAE;EACN;EAChB,EAJK,KAAK,UAAU,EAAoB,CAIxC;CAGN,IAAM,IAAa,EAAoB,UAAU,GAAG,EAAc,EAC5D,IAA6C,EAAE;AAUrD,QARA,EACG,UAAU,IAAgB,EAAE,CAC5B,MAAM,IAAI,CACV,SAAQ,MAAW;EAClB,IAAI,CAAC,GAAK,KAAS,EAAQ,MAAM,IAAI;AAErC,EADA,IAAQ,mBAAmB,EAAM,EACjC,EAAmB,KAAO;GAC1B,EAEF,kBAAC,GAAD;EAEc;EACQ;EACJ;EAChB,EAJK,KAAK,UAAU,EAAoB,CAIxC;;AASN,SAAS,EAAe,GAKrB;CACD,IAAM,EAAE,iBAAc,aAAU,cAAW,sCACzC,GAEI,IAAS,QAAc;EAE3B,IAAI,IAAS,EAAW,GAAc,EAAS,CAAC;AAMhD,SAJA,IAAS,EAAyB,EAAO,EAEzC,IAAS,EAAmB,EAAO,EAE5B;IACN,CAAC,GAAU,EAAa,CAAC,EAEtB,IAAqB,QAAc;AACvC,MAAI,EAAO,SAAS,GAAG;GAErB,IAAM,IAAW,IADK,WACL,CAAU,gBAAgB,GAAQ,YAAY;AAI/D,UAFA,EAAkB,EAAS,KAAK,EAEzB,EAAS;;AAElB,SAAO;IACN,CAAC,EAAO,CAAC;AAEZ,KAAI,EACF,QAAO,kBAAC,GAAD;EAAiB,SAAS;EAAoB,UAAU;EAAU,CAAA;AAG3E,KAAI,CAAC,KAAa,KAAkC,MAAW,GAC7D,QACE,kBAAC,GAAD;EAAY,SAAQ;EAAc,IAAI,EAAE,IAAI,GAAG;YAC5C;EACU,CAAA;;AAenB,SAAS,EAAgB,GAA4C;CACnE,IAAM,EAAE,YAAS,gBAAa;AAU9B,KAAI,EAAQ,aAAa,KAAK,UAE5B,QAAO,kBAAA,GAAA,EAAA,UAAG,EAAQ,aAAe,CAAA;KAEjC,EAAQ,aAAa,KAAK,gBAC1B,aAAmB,aACnB;EACA,IAAM,IACJ,EAAQ,QAAQ,aAAa,EACzB,IAAe,EAAQ,aAAa,oBAAoB;AAE9D,MAAI,EAGF,QACE,kBAAC,GAAD;GACgB;GACd,gBAAgB;GAChB,CAAA;EAMN,IAAM,IAAa,EAAQ,YACrB,IAAmC,EAAE;AAC3C,OAAK,IAAI,IAAI,GAAG,IAAI,EAAW,QAAQ,KAAK;GAC1C,IAAI,IAAO,IACP,IAAQ,IACN,IAAY,EAAW,KAAK,EAAE;AAKpC,GAJI,MACF,IAAO,EAAU,MACjB,IAAQ,EAAU,QAEhB,KAAQ,MACV,EAAS,KAAQ;;EAIrB,IAAM,EAAE,OAAO,GAAa,OAAO,GAAW,GAAG,MAAU;AAS3D,MAPA,EAAM,YAAY,GACd,MAGF,EAAM,QAAQ,IAGZ,EAAQ,WAAW,WAAW,EAGhC,QAAO,kBAAC,GAAD,EAAK,GAAI,GAAS,CAAA;EAK3B,IAAM,IAAW,MAAM,KAAK,EAAQ,WAAW,CAAC,KAAK,GAAI,MAChD,kBAAC,GAAD;GAA6B,SAAS;GAAc;GAAY,EAA1C,EAA0C,CACvE;AAEF,UAAQ,GAAR;GACE,KAAK,IACH,QACE,kBAAC,GAAD;IAAY,SAAS;IAAS,GAAI;IAAO,WAAW;IACjD;IACU,CAAA;GAEjB,KAAK,OACH,QACE,kBAAC,GAAD;IAAY,SAAS;IAAS,GAAI;IAAO,WAAW;IACjD;IACU,CAAA;GAEjB,KAAK,KACH,QACE,kBAAC,GAAD;IAAY,SAAS;IAAa,GAAI;IAAO,WAAW;IACrD;IACU,CAAA;GAEjB,KAAK,KACH,QACE,kBAAC,GAAD;IAAY,SAAS;IAAa,GAAI;IAAO,WAAW;IACrD;IACU,CAAA;GAEjB,KAAK,KACH,QACE,kBAAC,GAAD;IAAY,SAAS;IAAa,GAAI;IAAO,WAAW;IACrD;IACU,CAAA;GAEjB,KAAK,KACH,QACE,kBAAC,GAAD;IAAY,SAAS;IAAS,GAAI;IAAO,WAAW;IACjD;IACU,CAAA;GAEjB,KAAK,KACH,QACE,kBAAC,GAAD;IAAY,SAAS;IAAS,GAAI;IAAO,WAAW;IACjD;IACU,CAAA;GAEjB,KAAK,IACH,QACE,kBAAC,GAAD;IAAM,GAAI;IAAO,WAAW;IACzB;IACI,CAAA;GAEX,QAKE,QAJI,MAAQ,SAEH,IAEF,kBAAC,GAAD;IAAK,GAAI;IAAQ;IAAe,CAAA;;;AAG7C,QAAO;;AAST,SAAS,EAAgB,GAA6B;CACpD,IAAM,EACJ,YACA,WACA,gBAAa,EAAW,QACxB,UAAU,GACV,6BACA,kBAAe,IACf,4BACA,oCAAiC,OAC/B,GAEE,IAAY,EAAuB,KAAK,EAExC,EACJ,MAAM,GACN,WAAW,GACX,OAAO,MACL,EACF;EACE,eAAe;EACf,YAAY;EACZ,iBAAiB;EAClB,EACD,EAAE,SAAS,EAAQ,GAAU,CAC9B,EAEK,EACJ,MAAM,GACN,WAAW,GACX,OAAO,MACL,EACF;EACE,eAAe;EACf,YAAY;EACZ,iBAAiB;EAClB,EACD,EACE,SAAS,EAAQ,GAClB,CACF,EAEK,IAAY,KAAqB,GACjC,IAAQ,KAAoB;AAGlC,SAAgB;EACd,IAAM,IAAoB,EAAU;AAIpC,SAHI,KACF,EAAkB,iBAAiB,SAAS,EAAiB,QAElD;AACX,GAAI,KACF,EAAkB,oBAAoB,SAAS,EAAiB;;IAGnE,EAAE,CAAC;CAEN,IAAM,IAAW,KAAqB,GAAU,YAAY;AAU5D,CAPA,QAAgB;AACd,EAAI,KAAY,KACd,EAAyB,EAAW,GAAc,EAAS,CAAC,OAAO;IAEpE;EAAC;EAAU;EAA0B;EAAa,CAAC,EAGtD,QAAgB;AACd,EAAI,KACF,EAAY,EAAU;IAEvB,CAAC,EAAS,CAAC;CAEd,IAAM,IAAS,IACb,kBAAC,GAAD;EAAe,SAAS;EAAG,SAAS;EAA2B,CAAA,GAE/D,kBAAC,QAAD,EAAM,WAAU,WAAY,CAAA;AAG9B,KAAI,EACF,QAAO,kBAAC,GAAD,EAAoB,UAAS,CAAA;CAEtC,IAAM,IACJ,kBAAC,GAAD;EACE,aAAa;GACX,SAAS,EAAM;GACf,QAAQ,EAAM;GACJ;GACV,aAAa;GACd;YANH;GAQG,KAAa;IACZ,KAAY,MACZ,kBAAC,GAAD;IACY;IACI;IACH;IACqB;IAChC,CAAA;GAEH,KACC,kBAAC,GAAD;IAA4B;IAAwB;IAAY,CAAA;GAEvC;;AAa/B,QAXI,IAEA,kBAAC,QAAD;EACE,eAAY;EACZ,WAAU;EACV,KAAK;YAEJ;EACI,CAAA,GAIT,kBAAC,OAAD;EAAK,eAAY;EAAW,WAAU;EAAW,KAAK;YACnD;EACG,CAAA"}
+{"version":3,"file":"MarkdownSynapse.js","names":[],"sources":["../../../src/components/Markdown/MarkdownSynapse.tsx"],"sourcesContent":["import {\n  addIdsToReferenceWidgets,\n  addIdsToTocWidgets,\n  decodeXml,\n  handleLinkClicks,\n  processMath,\n  fixInvalidNesting,\n} from '@/components/Markdown/MarkdownUtils'\nimport {\n  useGetWikiPage,\n  useGetWikiAttachments,\n} from '@/synapse-queries/wiki/useWiki'\nimport { sanitize } from '@/utils/functions/SanitizeHtmlUtils'\nimport { Link, Typography } from '@mui/material'\nimport markdownitContainer from '@sage-bionetworks/markdown-it-container'\nimport { ObjectType } from '@sage-bionetworks/synapse-types'\nimport MarkdownIt from 'markdown-it'\nimport markdownitBr from 'markdown-it-br'\nimport markdownitCentertext from 'markdown-it-center-text'\nimport markdownitInlineComments from 'markdown-it-inline-comments'\nimport markdownitStrikethroughAlt from 'markdown-it-strikethrough-alt'\nimport markdownitSub from 'markdown-it-sub-alt'\nimport markdownitSup from 'markdown-it-sup-alt'\nimport * as markdownitSynapse from 'markdown-it-synapse'\nimport markdownitSynapsePlugin from 'markdown-it-synapse'\nimport markdownitSynapseHeading from 'markdown-it-synapse-heading'\nimport markdownitMath from 'markdown-it-synapse-math'\nimport markdownitSynapseTable from 'markdown-it-synapse-table'\nimport { ComponentProps, ElementType, useEffect, useMemo, useRef } from 'react'\nimport {\n  htmlToDOM,\n  domToReact,\n  attributesToProps,\n  Element as DomElement,\n  type DOMNode,\n  type HTMLReactParserOptions,\n} from 'html-react-parser'\nimport { ErrorBanner } from '../error/ErrorBanner'\nimport { SkeletonTable } from '../Skeleton'\nimport MarkdownWidget from './MarkdownWidget'\nimport { SynapseWikiContextProvider } from './SynapseWikiContext'\nimport Bookmarks from './widget/Bookmarks'\n\nexport const NO_WIKI_CONTENT = 'There is no content.'\n\nexport type MarkdownSynapseProps = {\n  ownerId?: string\n  wikiId?: string\n  markdown?: string\n  renderInline?: boolean\n  objectType?: ObjectType\n  loadingSkeletonRowCount?: number\n  onMarkdownProcessingDone?: (htmlContent: string | null | undefined) => void\n  showPlaceholderIfNoWikiContent?: boolean\n}\n\n// Configure markdown-it\nconst md = MarkdownIt({ html: true })\nmarkdownitSynapse.init_markdown_it(\n  md,\n  markdownitSub,\n  markdownitSup,\n  markdownitCentertext,\n  markdownitSynapseHeading,\n  markdownitSynapseTable,\n  markdownitStrikethroughAlt,\n  markdownitContainer,\n  markdownitInlineComments,\n  markdownitBr,\n)\nconst mathSuffix = ''\nmd.use(markdownitSynapsePlugin, mathSuffix, 'https://synapse.org').use(\n  markdownitMath,\n  mathSuffix,\n)\n\n/**\n * Process all the corresponding bookmark tags of the references made throughout the page and renders footnotes, if any exist.\n */\nfunction AddBookmarks(props: { renderInline: boolean; markdown: string }) {\n  const { markdown, renderInline } = props\n  const footnotesHtml = useMemo(() => {\n    markdownitSynapse.resetFootnotes()\n    createHTML(renderInline, markdown)\n    return createHTML(renderInline, markdownitSynapse.footnotes()).__html\n  }, [markdown, renderInline])\n\n  if (footnotesHtml.length > 0) {\n    return (\n      <div>\n        <Bookmarks footnotes={footnotesHtml} />\n      </div>\n    )\n  }\n  return null\n}\n\n/**\n * Given input text, generate markdown object to be passed onto inner html of some container.\n * @param {String} markdown The text being written in plain markdown\n * @returns {Object} Dictionary to be passed into dangerouslySetInnerHTML with markdown text\n */\nfunction createHTML(renderInline: boolean, markdown?: string) {\n  if (!markdown) {\n    return { __html: '' }\n  }\n  // Note - renderInline parses out any block level elements contained in the markdown\n  const initText = renderInline\n    ? md.renderInline(markdown)\n    : md.render(markdown)\n  const cleanText = sanitize(initText)\n  return { __html: cleanText }\n}\n\n/**\n * Given widgetMap renders it in a React component (or originalMarkup in special cases.)\n *\n * @param {string} widgetParams The params of the widget to render\n * @param {string} originalMarkup The original markup text, this is a special case for widgets that\n * are html specific.\n * @returns the rendered markdown widget\n */\nfunction MapParamsToMarkdownWidget(props: {\n  widgetParams: string\n  originalMarkup: string\n}) {\n  const { widgetParams, originalMarkup } = props\n  // General workflow -\n  //   1. Capture widget parameters\n  //   2. Transform any widget xml parameters to standard text\n  //   3. Split those parameters into a map\n  //   4. Render that widget based on its parameters\n\n  // steps 1,2\n  const decodedWidgetParams = decodeXml(widgetParams)\n\n  // decodedWidgetParams look like {<widget>?param1=xxx&param2=yyy}\n  const questionIndex = decodedWidgetParams.indexOf('?')\n  if (questionIndex === -1) {\n    // e.g. toc is passed, there are no params\n    return (\n      <MarkdownWidget\n        key={JSON.stringify(decodedWidgetParams)}\n        widgetType={decodedWidgetParams as any}\n        widgetParamsMapped={{}}\n        originalMarkup={originalMarkup}\n      />\n    )\n  }\n  const widgetType = decodedWidgetParams.substring(0, questionIndex)\n  const widgetParamsMapped: Record<string, string> = {}\n  // map out params and their values\n  decodedWidgetParams\n    .substring(questionIndex + 1)\n    .split('&')\n    .forEach(keyPair => {\n      let [key, value] = keyPair.split('=')\n      value = decodeURIComponent(value)\n      widgetParamsMapped[key] = value\n    })\n  return (\n    <MarkdownWidget\n      key={JSON.stringify(decodedWidgetParams)}\n      widgetType={widgetType as any}\n      widgetParamsMapped={widgetParamsMapped}\n      originalMarkup={originalMarkup}\n    />\n  )\n}\n\n/**\n * Builds the `html-react-parser` options used to convert the parsed markdown\n * HTML tree into React elements.\n *\n * The `replace` callback handles the Synapse-specific cases (widgets, and the\n * elements we render via MUI `Typography`/`Link`); every other element falls\n * through to html-react-parser's default conversion, which maps attributes\n * (e.g. `class` -> `className`, inline `style` string -> object), handles void\n * elements, and assigns React keys to sibling elements.\n *\n * @param markdown The original (post-processing) markup string, forwarded to\n * widgets that need the full markup (e.g. table of contents).\n */\nfunction getParserOptions(markdown: string): HTMLReactParserOptions {\n  const options: HTMLReactParserOptions = {\n    replace: domNode => {\n      if (!(domNode instanceof DomElement)) {\n        // Text/comment nodes use default handling.\n        return\n      }\n\n      const widgetParams = domNode.attribs['data-widgetparams']\n      if (widgetParams) {\n        // Synapse widget\n        return (\n          <MapParamsToMarkdownWidget\n            widgetParams={widgetParams}\n            originalMarkup={markdown}\n          />\n        )\n      }\n\n      const tag = domNode.name.toLowerCase()\n      // attributesToProps remaps `class` -> `className`, parses the inline\n      // `style` string into an object, etc.\n      const props = attributesToProps(domNode.attribs) as ComponentProps<\n        typeof Typography\n      >\n      const children = domToReact(domNode.children as DOMNode[], options)\n\n      switch (tag) {\n        case 'p':\n        case 'span':\n        case 'ol':\n        case 'ul':\n          return (\n            <Typography\n              variant={'body1'}\n              {...props}\n              component={tag as ElementType}\n            >\n              {children}\n            </Typography>\n          )\n        case 'h1':\n          return (\n            <Typography\n              variant={'headline1'}\n              {...props}\n              component={tag as ElementType}\n            >\n              {children}\n            </Typography>\n          )\n        case 'h2':\n          return (\n            <Typography\n              variant={'headline2'}\n              {...props}\n              component={tag as ElementType}\n            >\n              {children}\n            </Typography>\n          )\n        case 'h3':\n          return (\n            <Typography\n              variant={'headline3'}\n              {...props}\n              component={tag as ElementType}\n            >\n              {children}\n            </Typography>\n          )\n        case 'a':\n          return (\n            <Link {...props} component={tag as ElementType}>\n              {children}\n            </Link>\n          )\n        default:\n          // Let html-react-parser render the element with default handling.\n          return\n      }\n    },\n  }\n  return options\n}\n\n/**\n * Component that process all the markdown and transforms it to the appropriate Synapse widgets.\n *\n * @returns JSX of the markdown into widgets\n */\nfunction RenderMarkdown(props: {\n  renderInline: boolean\n  markdown: string\n  isLoading: boolean\n  showPlaceholderIfNoWikiContent: boolean\n}) {\n  const { renderInline, markdown, isLoading, showPlaceholderIfNoWikiContent } =\n    props\n\n  const markup = useMemo(() => {\n    // create initial markup\n    let markup = createHTML(renderInline, markdown).__html\n    // process reference widgets\n    markup = addIdsToReferenceWidgets(markup)\n    // process table of contents widgets\n    markup = addIdsToTocWidgets(markup)\n\n    return markup\n  }, [markdown, renderInline])\n\n  // Parse the markup into React elements. This uses html-react-parser, which\n  // is isomorphic and produces `domhandler` nodes in both environments,\n  // so there is no dependency on `DOMParser`/`Node`/`HTMLElement` browser globals.\n  const content = useMemo(() => {\n    if (markup.length > 0) {\n      const nodes = htmlToDOM(markup)\n      // Fix invalid HTML nesting (e.g. block elements inside <p>) before\n      // converting to React.\n      nodes.forEach(node => fixInvalidNesting(node))\n      return domToReact(nodes, getParserOptions(markup))\n    }\n    return null\n  }, [markup])\n\n  if (content) {\n    return <>{content}</>\n  }\n\n  if (!isLoading && showPlaceholderIfNoWikiContent && markup === '') {\n    return (\n      <Typography variant=\"body1Italic\" sx={{ mb: 1 }}>\n        {NO_WIKI_CONTENT}\n      </Typography>\n    )\n  }\n\n  return\n}\n\n/**\n * Basic Markdown functionality for Synapse, supporting Images/Plots/References/Bookmarks/buttonlinks\n *\n * @class Markdown\n * @extends {Component}\n */\nfunction MarkdownSynapse(props: MarkdownSynapseProps) {\n  const {\n    ownerId,\n    wikiId,\n    objectType = ObjectType.ENTITY,\n    markdown: markdownFromProps,\n    onMarkdownProcessingDone,\n    renderInline = false,\n    loadingSkeletonRowCount,\n    showPlaceholderIfNoWikiContent = false,\n  } = props\n\n  const markupRef = useRef<HTMLDivElement>(null)\n\n  const {\n    data: wikiPage,\n    isLoading: isLoadingWikiPage,\n    error: getWikiPageError,\n  } = useGetWikiPage(\n    {\n      ownerObjectId: ownerId!,\n      wikiPageId: wikiId!,\n      ownerObjectType: objectType,\n    },\n    { enabled: Boolean(ownerId) },\n  )\n\n  const {\n    data: wikiAttachments,\n    isLoading: isLoadingWikiAttachments,\n    error: getWikiAttachmentsError,\n  } = useGetWikiAttachments(\n    {\n      ownerObjectId: ownerId!,\n      wikiPageId: wikiId!,\n      ownerObjectType: objectType,\n    },\n    {\n      enabled: Boolean(ownerId),\n    },\n  )\n\n  const isLoading = isLoadingWikiPage || isLoadingWikiAttachments\n  const error = getWikiPageError || getWikiAttachmentsError\n\n  /* Add click handler to the markdown area to handle clicking refs, ToC, etc. */\n  useEffect(() => {\n    const currentMarkupNode = markupRef.current\n    if (currentMarkupNode) {\n      currentMarkupNode.addEventListener('click', handleLinkClicks)\n    }\n    return () => {\n      if (currentMarkupNode) {\n        currentMarkupNode.removeEventListener('click', handleLinkClicks)\n      }\n    }\n  }, [])\n\n  const markdown = markdownFromProps || wikiPage?.markdown || ''\n\n  /* When the markdown changes, call the `onMarkdownProcessingDone` callback */\n  useEffect(() => {\n    if (markdown && onMarkdownProcessingDone) {\n      onMarkdownProcessingDone(createHTML(renderInline, markdown).__html)\n    }\n  }, [wikiPage, onMarkdownProcessingDone, renderInline])\n\n  /* When the markdown changes, re-run the math processor */\n  useEffect(() => {\n    if (markdown) {\n      processMath(markupRef)\n    }\n  }, [markdown])\n\n  const loader = loadingSkeletonRowCount ? (\n    <SkeletonTable numCols={1} numRows={loadingSkeletonRowCount} />\n  ) : (\n    <span className=\"spinner\" />\n  )\n\n  if (error) {\n    return <ErrorBanner error={error} />\n  }\n  const content = (\n    <SynapseWikiContextProvider\n      wikiContext={{\n        ownerId: props.ownerId,\n        wikiId: props.wikiId,\n        wikiPage: wikiPage,\n        fileHandles: wikiAttachments,\n      }}\n    >\n      {isLoading && loader}\n      {(markdown || showPlaceholderIfNoWikiContent) && (\n        <RenderMarkdown\n          markdown={markdown}\n          renderInline={renderInline}\n          isLoading={isLoading}\n          showPlaceholderIfNoWikiContent={showPlaceholderIfNoWikiContent}\n        />\n      )}\n      {markdown && (\n        <AddBookmarks renderInline={renderInline} markdown={markdown} />\n      )}\n    </SynapseWikiContextProvider>\n  )\n  if (renderInline) {\n    return (\n      <span\n        data-testid=\"markdown\"\n        className=\"markdown markdown-inline\"\n        ref={markupRef}\n      >\n        {content}\n      </span>\n    )\n  }\n  return (\n    <div data-testid=\"markdown\" className=\"markdown\" ref={markupRef}>\n      {content}\n    </div>\n  )\n}\n\nexport { MarkdownSynapse, MarkdownSynapse as Markdown }\n\nexport default MarkdownSynapse\n"],"mappings":"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"}

package/dist/components/Markdown/MarkdownUtils.d.ts

@@ -1,5 +1,6 @@
 import { RefObject } from 'react';
 import { MarkdownSynapseProps } from './MarkdownSynapse';
+import { Element as DomElement, type DOMNode } from 'html-react-parser';
 /**
  * Find all math identified elements of the form [id^=\"mathjax-\"]
  * (e.g. <dom element id="mathjax-10"> text </dom element>)
@@ -18,15 +19,24 @@ export declare function decodeXml(xml: string): string;
 export declare function addIdsToReferenceWidgets(text: string): string;
 export declare function addIdsToTocWidgets(text: string): string;
 export declare function handleLinkClicks(event: MouseEvent): void;
+/**
+ * Extracts the plain text content from an HTML string. Implemented with an
+ * isomorphic HTML parser (rather than `document.createElement`) so it can run
+ * during server-side rendering / SSG prerender as well as in the browser.
+ */
 export declare function stripHTML(myHtmlString: string): string;
 export declare function transformStringIntoMarkdownProps(value: string, isRawMarkdown?: boolean): MarkdownSynapseProps;
 export declare const markdownToPlainText: (markdown: string, maxLength?: number) => string;
-export declare const isBlockLevelElement: (node: Node) => boolean;
+export declare const isBlockLevelElement: (node: DOMNode) => boolean;
 /**
  * Fixes invalid HTML nesting (e.g., <div> inside <p>) in a single O(n) pass.
  * It compares the current 'node' against a stack of its 'ancestors'.
- * @param node - The current DOM node being inspected.
- * @param ancestors - An array of the current node's parent elements
+ *
+ * Operates on the `domhandler` node tree produced by `html-react-parser`'s
+ * `htmlToDOM`, so it runs identically in the browser and during SSR/SSG
+ * prerender (no dependency on a live DOM, `DOMParser`, or `HTMLElement`).
+ * @param node - The current node being inspected.
+ * @param ancestors - An array of the current node's ancestor elements
  */
-export declare function fixInvalidNesting(node: Node, ancestors?: HTMLElement[]): void;
+export declare function fixInvalidNesting(node: DOMNode, ancestors?: DomElement[]): void;
 //# sourceMappingURL=MarkdownUtils.d.ts.map

package/dist/components/Markdown/MarkdownUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownUtils.d.ts","sourceRoot":"","sources":["../../../src/components/Markdown/MarkdownUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAIxD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,QAoBnE;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,UAapC;AAED,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,UAWpD;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,UAe9C;AAGD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,QAuCjD;AAED,wBAAgB,SAAS,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAItD;AAED,wBAAgB,gCAAgC,CAC9C,KAAK,EAAE,MAAM,EACb,aAAa,CAAC,EAAE,OAAO,wBAmBxB;AAID,eAAO,MAAM,mBAAmB,GAAI,UAAU,MAAM,EAAE,YAAY,MAAM,WAYvE,CAAA;AAyDD,eAAO,MAAM,mBAAmB,GAAI,MAAM,IAAI,KAAG,OAehD,CAAA;AAwBD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,IAAI,EACV,SAAS,GAAE,WAAW,EAAO,GAC5B,IAAI,CAyDN"}
+{"version":3,"file":"MarkdownUtils.d.ts","sourceRoot":"","sources":["../../../src/components/Markdown/MarkdownUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAGxD,OAAO,EAEL,OAAO,IAAI,UAAU,EAErB,KAAK,OAAO,EACb,MAAM,mBAAmB,CAAA;AAE1B;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,QAoBnE;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,UAapC;AAED,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,UAWpD;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,UAe9C;AAGD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,QAuCjD;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAkBtD;AAED,wBAAgB,gCAAgC,CAC9C,KAAK,EAAE,MAAM,EACb,aAAa,CAAC,EAAE,OAAO,wBAmBxB;AAID,eAAO,MAAM,mBAAmB,GAAI,UAAU,MAAM,EAAE,YAAY,MAAM,WAYvE,CAAA;AAwDD,eAAO,MAAM,mBAAmB,GAAI,MAAM,OAAO,KAAG,OAcnD,CAAA;AAwBD;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,OAAO,EACb,SAAS,GAAE,UAAU,EAAO,GAC3B,IAAI,CAiDN"}

package/dist/components/Markdown/MarkdownUtils.js

@@ -1,8 +1,9 @@
 import { truncateString as e } from "../../utils/functions/StringUtils.js";
 import t from "katex";
 import n from "markdown-it";
+import { Element as r, Text as i, htmlToDOM as a } from "html-react-parser";
 //#region src/components/Markdown/MarkdownUtils.ts
-function r(e) {
+function o(e) {
 	if (!e.current) return;
 	let n = e.current.querySelectorAll("[id^=\"mathjax-\"]"), r = /* @__PURE__ */ new RegExp(/\\[()[\]]/, "g");
 	n.forEach((e) => {
@@ -16,7 +17,7 @@ function r(e) {
 		}
 	});
 }
-function i(e) {
+function s(e) {
 	let t = {
 		"&": "&",
 		">": ">",
@@ -25,21 +26,21 @@ function i(e) {
 	};
 	return e.replace(/("|<|>|&)/g, (e, n) => t[n]);
 }
-function a(e) {
+function c(e) {
 	let t = /<span.*?id="wikiReference.*?<span.*? data-widgetparams.*?span>/g, n = 1;
 	return e.replace(t, () => {
 		let e = n;
 		return n += 1, `<a href="" id="ref${e}">[${e}]</a>`;
 	});
 }
-function o(e) {
+function l(e) {
 	let t = 1;
 	return e.replace(/<h[1-6] toc="true">.*<\/h[1-6]>/gm, (e) => {
 		let n = t;
 		return t += 1, `${e.substring(0, 3)} id="SRC-header-${n}"${e.substring(3)}`;
 	});
 }
-function s(e) {
+function u(e) {
 	let t = e.target, n = e.currentTarget;
 	if (t.tagName === "A" || t.tagName === "BUTTON") {
 		let t = e.target;
@@ -70,11 +71,12 @@ function s(e) {
 		}
 	}
 }
-function c(e) {
-	let t = document.createElement("div");
-	return t.innerHTML = e, t.textContent || t.innerText || "";
+function d(e) {
+	if (!e) return "";
+	let t = (e) => e.map((e) => e instanceof i ? e.data : e instanceof r ? t(e.children) : "").join("");
+	return t(a(e));
 }
-function l(e, t) {
+function f(e, t) {
 	let n = {};
 	if (t) n.markdown = e;
 	else if (e.includes("/wiki/")) {
@@ -83,11 +85,11 @@ function l(e, t) {
 	} else e && (n.ownerId = e);
 	return n;
 }
-var u = new n(), d = (t, n) => {
+var p = new n(), m = (t, n) => {
 	if (!t || t.length === 0) return "";
-	let r = c(u.render(t)).replace(/\|/g, "").replace(/#/g, "").replace(/<Synapse widget>/g, "");
+	let r = d(p.render(t)).replace(/\|/g, "").replace(/#/g, "").replace(/<Synapse widget>/g, "");
 	return n ? e(r, n) : r;
-}, f = /* @__PURE__ */ "address.article.aside.blockquote.canvas.dd.div.dl.dt.fieldset.figcaption.figure.footer.form.h1.h2.h3.h4.h5.h6.header.hr.li.main.nav.noscript.ol.p.pre.section.table.tfoot.ul.video".split("."), p = [
+}, h = /* @__PURE__ */ "address.article.aside.blockquote.canvas.dd.div.dl.dt.fieldset.figcaption.figure.footer.form.h1.h2.h3.h4.h5.h6.header.hr.li.main.nav.noscript.ol.p.pre.section.table.tfoot.ul.video".split("."), g = [
 	"span",
 	"a",
 	"em",
@@ -97,50 +99,49 @@ var u = new n(), d = (t, n) => {
 	"u",
 	"sub",
 	"sup"
-], m = [
+], _ = [
 	"table",
 	"thead",
 	"tbody",
 	"tr",
 	"tfoot"
-], h = [
+], v = [
 	"badge",
 	"image",
 	"imageLink",
 	"buttonlink"
-], g = (e) => {
-	if (e.nodeType !== Node.ELEMENT_NODE) return !1;
-	let t = e.tagName.toLowerCase();
-	return p.includes(t);
-}, _ = (e) => {
-	if (e.nodeType !== Node.ELEMENT_NODE) return !1;
-	let t = e, n = t.tagName.toLowerCase(), r = f.includes(n), i = t.getAttribute("data-widgetparams"), a = i !== null && !h.includes(i.split("?")[0]);
-	return r || a;
+], y = (e) => {
+	if (!(e instanceof r)) return !1;
+	let t = e.name.toLowerCase();
+	return g.includes(t);
+}, b = (e) => {
+	if (!(e instanceof r)) return !1;
+	let t = e.name.toLowerCase(), n = h.includes(t), i = e.attribs["data-widgetparams"] ?? null, a = i !== null && !v.includes(i.split("?")[0]);
+	return n || a;
 };
-function v(e, t) {
-	return !(_(e) && g(t) || t.tagName.toLowerCase() === "button" && e.tagName.toLowerCase() === "button" || t.tagName.toLowerCase() === "p" && _(e));
+function x(e, t) {
+	return !(b(e) && y(t) || t.name.toLowerCase() === "button" && e.name.toLowerCase() === "button" || t.name.toLowerCase() === "p" && b(e));
 }
-function y(e, t = []) {
-	if (e.nodeType === Node.TEXT_NODE) {
-		let t = e.parentNode?.tagName?.toLowerCase();
-		m.includes(t) && !e.textContent?.trim() && e.parentNode?.removeChild(e);
+function S(e, t = []) {
+	if (e instanceof i) {
+		let t = e.parent, n = t instanceof r ? t.name.toLowerCase() : void 0;
+		if (n && _.includes(n) && !e.data?.trim()) {
+			let n = t.children, r = n.indexOf(e);
+			r !== -1 && n.splice(r, 1);
+		}
 		return;
 	}
-	if (e.nodeType !== Node.ELEMENT_NODE) return;
+	if (!(e instanceof r)) return;
 	let n = e;
 	for (let e = t.length - 1; e >= 0; e--) {
 		let r = t[e];
-		if (!v(n, r)) {
-			let i = n.ownerDocument.createElement("div");
-			for (Array.from(r.attributes).forEach((e) => i.setAttribute(e.name, e.value)); r.firstChild;) i.appendChild(r.firstChild);
-			r.parentNode && r.parentNode.replaceChild(i, r), t[e] = i;
-		}
+		x(n, r) || (r.name = "div");
 	}
-	t.push(n), Array.from(n.childNodes).forEach((e) => {
-		y(e, t);
+	t.push(n), Array.from(n.children).forEach((e) => {
+		S(e, t);
 	}), t.pop();
 }
 //#endregion
-export { a as addIdsToReferenceWidgets, o as addIdsToTocWidgets, i as decodeXml, y as fixInvalidNesting, s as handleLinkClicks, _ as isBlockLevelElement, d as markdownToPlainText, r as processMath, c as stripHTML, l as transformStringIntoMarkdownProps };
+export { c as addIdsToReferenceWidgets, l as addIdsToTocWidgets, s as decodeXml, S as fixInvalidNesting, u as handleLinkClicks, b as isBlockLevelElement, m as markdownToPlainText, o as processMath, d as stripHTML, f as transformStringIntoMarkdownProps };
 
 //# sourceMappingURL=MarkdownUtils.js.map