[0],\n props: React.JSX.IntrinsicAttributes,\n ...children: React.ReactNode[]\n ) => React.ReactNode\n\n /**\n * The library automatically generates an anchor tag for bare URLs included in the markdown\n * document, but this behavior can be disabled if desired.\n */\n disableAutoLink: boolean\n\n /**\n * Disable the compiler's best-effort transcription of provided raw HTML\n * into JSX-equivalent. This is the functionality that prevents the need to\n * use `dangerouslySetInnerHTML` in React.\n */\n disableParsingRawHTML: boolean\n\n /**\n * Forces the compiler to have space between hash sign and the header text which\n * is explicitly stated in the most of the markdown specs.\n * https://github.github.com/gfm/#atx-heading\n * `The opening sequence of # characters must be followed by a space or by the end of line.`\n */\n enforceAtxHeadings: boolean\n\n /**\n * Forces the compiler to always output content with a block-level wrapper\n * (`` or any block-level syntax your markdown already contains.)\n */\n forceBlock: boolean\n\n /**\n * Forces the compiler to always output content with an inline wrapper (``)\n */\n forceInline: boolean\n\n /**\n * Forces the compiler to wrap results, even if there is only a single\n * child or no children.\n */\n forceWrapper: boolean\n\n /**\n * Supply additional HTML entity: unicode replacement mappings.\n *\n * Pass only the inner part of the entity as the key,\n * e.g. `≤` -> `{ \"le\": \"\\u2264\" }`\n *\n * By default\n * the following entities are replaced with their unicode equivalents:\n *\n * ```\n * &\n * '\n * >\n * <\n * \n * "\n * ```\n */\n namedCodesToUnicode: {\n [key: string]: string\n }\n\n /**\n * Selectively control the output of particular HTML tags as they would be\n * emitted by the compiler.\n */\n overrides: Overrides\n\n /**\n * Allows for full control over rendering of particular rules.\n * For example, to implement a LaTeX renderer such as `react-katex`:\n *\n * ```\n * renderRule(next, node, renderChildren, state) {\n * if (node.type === RuleType.codeBlock && node.lang === 'latex') {\n * return (\n * \n * {String.raw`${node.text}`}\n * \n * )\n * }\n *\n * return next();\n * }\n * ```\n *\n * Thar be dragons obviously, but you can do a lot with this\n * (have fun!) To see how things work internally, check the `render`\n * method in source for a particular rule.\n */\n renderRule: (\n /** Resume normal processing, call this function as a fallback if you are not returning custom JSX. */\n next: () => React.ReactNode,\n /** the current AST node, use `RuleType` against `node.type` for identification */\n node: ParserResult,\n /** use as `renderChildren(node.children)` for block nodes */\n renderChildren: RuleOutput,\n /** contains `key` which should be supplied to the topmost JSX element */\n state: State\n ) => React.ReactNode\n\n /**\n * Override the built-in sanitizer function for URLs, etc if desired. The built-in version is available as a library export called `sanitizer`.\n */\n sanitizer: (\n value: string,\n tag: HTMLTags,\n attribute: string\n ) => string | null\n\n /**\n * Override normalization of non-URI-safe characters for use in generating\n * HTML IDs for anchor linking purposes.\n */\n slugify: (input: string, defaultFn: (input: string) => string) => string\n\n /**\n * Declare the type of the wrapper to be used when there are multiple\n * children to render. Set to `null` to get an array of children back\n * without any wrapper, or use `React.Fragment` to get a React element\n * that won't show up in the DOM.\n */\n wrapper: React.ElementType | null\n }>\n}\n\nexport default Markdown\n","// @ts-nocheck\n/*\n * Content Renderer with defaults\n * Adapted from tiptap-react-render: https://github.com/troop-dev/tiptap-react-render\n */\nimport { LocalizedContent } from \"@venuecms/sdk\";\nimport { VenueImage } from \"../VenueImage\";\nimport Markdown from \"markdown-to-jsx\";\nimport React, { JSX, ReactNode } from \"react\";\n\ntype ElementClasses = {\n text?: string;\n p?: string;\n ul?: string;\n ol?: string;\n li?: string;\n code?: string;\n heading?: string;\n hardBreak?: string;\n img?: string;\n image?: string;\n iframe?: string;\n h1?: string;\n h2?: string;\n h3?: string;\n a?: string;\n};\n\nconst marks = {\n bold: \"font-bold\",\n italic: \"italic\",\n underline: \"underline\",\n strike: \"line-through\",\n link: \"underline underline-offset-[3px] cursor-pointer\",\n} as const;\n\nconst elMarks = {\n link: (props: any): ReactNode => ,\n} as const;\n\nconst getDefaultHandlers = (classes: ElementClasses = {}) => {\n const defaultHandlers: NodeHandlers = {\n text: (props) => {\n if (props.node.marks) {\n const className = props.node.marks\n .reduce((accum, mark) => {\n if (elMarks[mark.type as keyof typeof elMarks]) {\n // elMarks are handled separately\n return accum;\n }\n return `${marks[mark.type as keyof typeof marks] ?? \"\"} ${accum}`;\n }, \"\")\n .trim();\n\n let hasWrappers = false;\n const elWrappers = props.node.marks.reduce((accum, mark) => {\n if (mark.type in elMarks) {\n hasWrappers = true;\n const el = elMarks[mark.type as keyof typeof elMarks];\n\n return el({ ...mark.attrs, className, children: accum });\n }\n\n return accum;\n }, props.node.text);\n\n if (hasWrappers) {\n return elWrappers;\n }\n\n return {props.node.text};\n }\n\n if (classes.text) {\n {props.node.text};\n }\n\n return <>{props.node.text};\n },\n paragraph: (props) => {props.children}
,\n bulletList: (props) => ,\n orderedList: (props) => {props.children}
,\n listItem: (props) => {props.children},\n codeBlock: (props) => (\n \n {props.children}\n
\n ),\n heading: (props) => {\n switch (props.node.attrs?.level) {\n case 1:\n return {props.children}
;\n case 2:\n return {props.children}
;\n case 3:\n return {props.children}
;\n default:\n return <>{props.children};\n }\n },\n hardBreak: () =>
,\n image: (props) => {\n const { src, alt } = props.node.attrs ?? {};\n\n const image = {\n url: src.split(/^\\/media\\//).join(\"\"),\n metadata: {\n altText: alt,\n },\n };\n\n return ;\n },\n img: (props) => {\n const { src, alt } = props.node;\n const image = {\n url: src.split(/^\\/media\\//).join(\"\"),\n metadata: {\n altText: alt,\n },\n };\n return ;\n },\n youtube: (props) => {\n //@ts-ignore\n const { src, start } = props.node.attrs;\n const key = src.split(\"v=\")[1];\n\n return (\n \n );\n },\n iframe: (props) => {\n const {\n // @ts-ignore\n src,\n // @ts-ignore\n style,\n // @ts-ignore\n frameborder,\n // @ts-ignore\n allowfullscreen,\n // @ts-ignore\n referrerpolicy,\n ...rest\n } = props.node?.attrs ?? props; // TODO: why do we need to do this? we are getting different shapes at times and not sure why\n\n const styles =\n typeof style === \"string\"\n ? style\n ?.split(\";\")\n .reduce((accum: Record, style: string) => {\n const [key, value] = style.split(\":\");\n if (value !== undefined) {\n return { ...accum, [key]: value.trim() };\n }\n return accum;\n }, {})\n : style;\n\n // TODO: We need iframely. A hack for now to check and iron out some common quirks\n const isVideo = (() => {\n return !!(src.match(/youtube.com/) || src.match(/vimeo.com/));\n })();\n\n const isBandcamp = (() => {\n return !!src.match(/bandcamp.com/);\n })();\n\n const isVimeo = (() => {\n return !!src.match(/vimeo.com/);\n })();\n\n return (\n \n );\n },\n } as const;\n return defaultHandlers;\n};\n\nconst getMarkdownHandlers = (classes: ElementClasses = {}) => {\n const handlers = getDefaultHandlers(classes);\n // the markdown renderer uses a more standard format for overriding styles, so we map it here\n return {\n ...handlers,\n p: handlers.paragraph,\n ul: handlers.bulletList,\n ol: handlers.orderedList,\n li: handlers.listItem,\n code: handlers.codeBlock,\n h1: (props: any) =>\n handlers.heading({ ...props, node: { attrs: { level: 1 } } }),\n h2: (props: any) =>\n handlers.heading({ ...props, node: { attrs: { level: 2 } } }),\n h3: (props: any) =>\n handlers.heading({ ...props, node: { attrs: { level: 3 } } }),\n img: (props: any) =>\n handlers.image({\n ...props,\n node: { attrs: { src: props.src, alt: props.alt } },\n }),\n hr: (props: any) =>
,\n a: (props: any) => (\n \n {props.children}\n \n ),\n span: ({ children }: { children: ReactNode }) => {children}, // strip out custom colors and all that (since they are usually pasted in accidentally)\n };\n};\n\nexport type ContentStyles = Partial<\n Record, string>\n>;\n\nconst ContentRender = (props: {\n node: RenderNode;\n handlers?: NodeHandlers;\n classes?: ContentStyles;\n}): JSX.Element => {\n const { node, handlers: handlerOverrides = {} } = props;\n const handlers = {\n ...getDefaultHandlers(props.classes),\n ...handlerOverrides,\n };\n\n // recursively render child content\n const children: JSX.Element[] = [];\n node.content &&\n node.content.forEach((child, ix) => {\n children.push(\n ,\n );\n });\n\n // return empty if we are missing a handler for this type\n if (!(node.type in handlers)) {\n console.warn(`missing type`, node);\n return <>;\n }\n // render the handler for this type\n const Handler = handlers[node.type];\n return {children};\n};\n\n\n\ninterface Attrs {\n readonly [attr: string]: any;\n}\n\nexport interface RenderNode {\n type: string;\n attrs?: Attrs;\n marks?: Attrs[];\n content?: RenderNode[];\n readonly [attr: string]: any;\n}\n\nexport interface NodeProps {\n children?: React.ReactNode;\n node: RenderNode;\n}\n\nexport type NodeHandler = (props: NodeProps) => JSX.Element;\n\nexport interface NodeHandlers {\n readonly [attr: string]: NodeHandler;\n}\n\nexport const VenueContent = ({\n content,\n contentStyles,\n className,\n}: {\n content: LocalizedContent;\n contentStyles?: ContentStyles;\n className?: string;\n}) => {\n const { contentJSON } = content;\n\n if (contentJSON) {\n return (\n \n {(contentJSON.content as Array).map((node, i) => (\n \n ))}\n
\n );\n }\n\n if (content.content) {\n return (\n \n {\n /* There are issues with
tags in the parsing so we fix that with a regex */\n // @ts-ignore\n content.content.replaceAll(\n /(?:\\n|\\r\\n)\\*\\*\\*(?:\\n|\\r\\n)/g,\n \"\\n\\n***\\n\\n\",\n )\n }\n