For ChatGPT evaluation

AnyTextProcessor

/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-shadow */
import React, { createElement, Fragment, useEffect, useState } from 'react'
import ReactMarkdown from 'react-markdown'
import addClasses from 'rehype-add-classes'
import rehypeParse from 'rehype-parse'
import rehypeReact from 'rehype-react'
import remarkBreaks from 'remark-breaks'
import remarkGfm from 'remark-gfm'
import sass from 'sass'
import { unified } from 'unified'
import { useCssHandles } from 'vtex.css-handles'
import { Loading, NoSSR } from 'vtex.render-runtime'



export type Props = {
  codeToProcess: string,
  codeType: string,
  useSeparateStyling: boolean,
  codeStyling: string,
  codeStylingType: string,
  useCustomTailwindConfig: boolean,
  tailwindConfig: string,
  useCustomJavascript: boolean,
  customJavascript: string,
  children?: any
}

export const CSS_HANDLES = [
  'AnyTextProcessorWrapper',
  'AnyTextProcessorAbbreviation',
  'AnyTextProcessorAddress',
  'AnyTextProcessorAnchor',
  'AnyTextProcessorArea',
  'AnyTextProcessorArticle',
  'AnyTextProcessorAside',
  'AnyTextProcessorAudio',
  'AnyTextProcessorBase',
  'AnyTextProcessorBidiIsolator',
  'AnyTextProcessorBidiOverride',
  'AnyTextProcessorBig',
  'AnyTextProcessorBlockquote',
  'AnyTextProcessorBody',
  'AnyTextProcessorBold',
  'AnyTextProcessorBreak',
  'AnyTextProcessorButton',
  'AnyTextProcessorButtonWrapper',
  'AnyTextProcessorCanvas',
  'AnyTextProcessorCaption',
  'AnyTextProcessorCenter',
  'AnyTextProcessorCite',
  'AnyTextProcessorCode',
  'AnyTextProcessorCodeInline',
  'AnyTextProcessorCol',
  'AnyTextProcessorColgroup',
  'AnyTextProcessorData',
  'AnyTextProcessorData',
  'AnyTextProcessorDatalist',
  'AnyTextProcessorDefinition',
  'AnyTextProcessorDel',
  'AnyTextProcessorDelete',
  'AnyTextProcessorDeleted',
  'AnyTextProcessorDescriptionList',
  'AnyTextProcessorDescriptionListTerm',
  'AnyTextProcessorDescrriptionListDescription',
  'AnyTextProcessorDetails',
  'AnyTextProcessorDialog',
  'AnyTextProcessorDiv',
  'AnyTextProcessorDoctype',
  'AnyTextProcessorEmbed',
  'AnyTextProcessorEmphasis',
  'AnyTextProcessorErrorMessage',
  'AnyTextProcessorFieldset',
  'AnyTextProcessorFigure',
  'AnyTextProcessorFigureCaption',
  'AnyTextProcessorFont',
  'AnyTextProcessorFooter',
  'AnyTextProcessorForm',
  'AnyTextProcessorHead',
  'AnyTextProcessorHeader',
  'AnyTextProcessorHeading',
  'AnyTextProcessorHeading1',
  'AnyTextProcessorHeading2',
  'AnyTextProcessorHeading3',
  'AnyTextProcessorHeading4',
  'AnyTextProcessorHeading5',
  'AnyTextProcessorHeading6',
  'AnyTextProcessorHeadingGroup',
  'AnyTextProcessorHr',
  'AnyTextProcessorHtml',
  'AnyTextProcessorIframe',
  'AnyTextProcessorImage',
  'AnyTextProcessorImageButton',
  'AnyTextProcessorImageButtonWrapper',
  'AnyTextProcessorImageReference',
  'AnyTextProcessorImg',
  'AnyTextProcessorInfo',
  'AnyTextProcessorInlineCode',
  'AnyTextProcessorInnerHTML',
  'AnyTextProcessorInput',
  'AnyTextProcessorInsertion',
  'AnyTextProcessorItalic',
  'AnyTextProcessorKeyboard',
  'AnyTextProcessorKeygen',
  'AnyTextProcessorLabel',
  'AnyTextProcessorLayout',
  'AnyTextProcessorLegend',
  'AnyTextProcessorLink',
  'AnyTextProcessorLinkReference',
  'AnyTextProcessorLinkUrl',
  'AnyTextProcessorList',
  'AnyTextProcessorListItem',
  'AnyTextProcessorLoading',
  'AnyTextProcessorMain',
  'AnyTextProcessorMap',
  'AnyTextProcessorMark',
  'AnyTextProcessorMarquee',
  'AnyTextProcessorMenu',
  'AnyTextProcessorMenuitem',
  'AnyTextProcessorMeta',
  'AnyTextProcessorMeter',
  'AnyTextProcessorNav',
  'AnyTextProcessorNoscript',
  'AnyTextProcessorObject',
  'AnyTextProcessorOptgroup',
  'AnyTextProcessorOption',
  'AnyTextProcessorOrderedList',
  'AnyTextProcessorOutput',
  'AnyTextProcessorParagraph',
  'AnyTextProcessorParam',
  'AnyTextProcessorPre',
  'AnyTextProcessorProgress',
  'AnyTextProcessorQuote',
  'AnyTextProcessorRow',
  'AnyTextProcessorRuby',
  'AnyTextProcessorRubyAnnotation',
  'AnyTextProcessorRubyAnnotationText',
  'AnyTextProcessorRubyTextContainer',
  'AnyTextProcessorS',
  'AnyTextProcessorSampleOutput',
  'AnyTextProcessorScript',
  'AnyTextProcessorSection',
  'AnyTextProcessorSelect',
  'AnyTextProcessorSmall',
  'AnyTextProcessorSource',
  'AnyTextProcessorSpan',
  'AnyTextProcessorSpinner',
  'AnyTextProcessorStrike',
  'AnyTextProcessorStrong',
  'AnyTextProcessorStyle',
  'AnyTextProcessorSubscript',
  'AnyTextProcessorSummary',
  'AnyTextProcessorSuperscript',
  'AnyTextProcessorTable',
  'AnyTextProcessorTableBody',
  'AnyTextProcessorTableCell',
  'AnyTextProcessorTableData',
  'AnyTextProcessorTableFooter',
  'AnyTextProcessorTableHead',
  'AnyTextProcessorTableHeadCell',
  'AnyTextProcessorTableHeader',
  'AnyTextProcessorTableRow',
  'AnyTextProcessorTeletype',
  'AnyTextProcessorTemplate',
  'AnyTextProcessorTextarea',
  'AnyTextProcessorThematicBreak',
  'AnyTextProcessorTime',
  'AnyTextProcessorTitle',
  'AnyTextProcessorTrack',
  'AnyTextProcessorUnderline',
  'AnyTextProcessorUnorderedList',
  'AnyTextProcessorUnsupportedRubyAnnotation',
  'AnyTextProcessorVariable',
  'AnyTextProcessorVideo',
  'AnyTextProcessorWordBreak',
] as const

const AnyTextProcessor = ({
  codeToProcess,
  codeType,
  useSeparateStyling,
  codeStyling,
  codeStylingType,
  useCustomTailwindConfig,
  tailwindConfig,
  useCustomJavascript,
  customJavascript,
  children,
}: Props) => {
  const { handles } = useCssHandles(CSS_HANDLES)
  const [content, setContent] = useState(<></>)
  const [processedStyling, setProcessedStyling] = useState(<></>)
  const [processedJavascript, setProcessedJavascript] = useState(<></>)

  console.log('processedStyling', processedStyling)
  console.log('setProcessedStyling', setProcessedStyling)
  console.log('processedJavascript', processedJavascript)
  console.log('setProcessedJavascript', setProcessedJavascript)



  useEffect(() => {
    if (typeof window === 'undefined') {
      return
    }

    console.log('variables sent', useSeparateStyling,
      codeStyling,
      codeStylingType,
      useCustomTailwindConfig,
      tailwindConfig,
      useCustomJavascript,
      customJavascript)

  }, [])

  useEffect(() => {
    if (typeof window === 'undefined') {
      return
    }

    if (codeType === 'MARKDOWN') {
      setContent(
        <ReactMarkdown
          className={handles.AnyTextProcessorData}
          remarkPlugins={[remarkGfm, remarkBreaks]}
          rehypePlugins={[
            [
              addClasses,
              {
                pre: handles.AnyTextProcessorPre,
                h1: handles.AnyTextProcessorHeading1,
                h2: handles.AnyTextProcessorHeading2,
                h3: handles.AnyTextProcessorHeading3,
                h4: handles.AnyTextProcessorHeading4,
                h5: handles.AnyTextProcessorHeading5,
                h6: handles.AnyTextProcessorHeading6,
                hr: handles.AnyTextProcessorHr,
                p: handles.AnyTextProcessorParagraph,
                a: handles.AnyTextProcessorLink,
                ul: handles.AnyTextProcessorList,
                ol: handles.AnyTextProcessorList,
                li: handles.AnyTextProcessorListItem,
                img: handles.AnyTextProcessorImage,
                del: handles.AnyTextProcessorDeleted,
                strong: handles.AnyTextProcessorStrong,
                em: handles.AnyTextProcessorEmphasis,
                table: handles.AnyTextProcessorTable,
                tr: handles.AnyTextProcessorTableRow,
                th: handles.AnyTextProcessorTableHeader,
                td: handles.AnyTextProcessorTableCell,
                thead: handles.AnyTextProcessorTableHead,
                tbody: handles.AnyTextProcessorTableBody,
                tfoot: handles.AnyTextProcessorTableFooter,
                blockquote: handles.AnyTextProcessorBlockquote,
                code: handles.AnyTextProcessorCode,
                inlineCode: handles.AnyTextProcessorInlineCode,
              },
            ],
          ]}
        >
          {codeToProcess}
        </ReactMarkdown>
      )
    }


    if (codeType === 'HTML') {
    unified()
      .use(rehypeParse, { fragment: true })
      .use(rehypeReact, { createElement, Fragment })
      .use(addClasses, {
        a: handles.AnyTextProcessorAnchor,
        abbr: handles.AnyTextProcessorAbbreviation,
        address: handles.AnyTextProcessorAddress,
        area: handles.AnyTextProcessorArea,
        article: handles.AnyTextProcessorArticle,
        aside: handles.AnyTextProcessorAside,
        audio: handles.AnyTextProcessorAudio,
        b: handles.AnyTextProcessorBold,
        base: handles.AnyTextProcessorBase,
        bdi: handles.AnyTextProcessorBidiIsolator,
        bdo: handles.AnyTextProcessorBidiOverride,
        big: handles.AnyTextProcessorBig,
        blockquote: handles.AnyTextProcessorBlockquote,
        body: handles.AnyTextProcessorBody,
        br: handles.AnyTextProcessorBreak,
        button: handles.AnyTextProcessorButton,
        canvas: handles.AnyTextProcessorCanvas,
        caption: handles.AnyTextProcessorCaption,
        center: handles.AnyTextProcessorCenter,
        cite: handles.AnyTextProcessorCite,
        code: handles.AnyTextProcessorCode,
        col: handles.AnyTextProcessorCol,
        colgroup: handles.AnyTextProcessorColgroup,
        data: handles.AnyTextProcessorData,
        datalist: handles.AnyTextProcessorDatalist,
        dd: handles.AnyTextProcessorDescrriptionListDescription,
        del: handles.AnyTextProcessorDel,
        details: handles.AnyTextProcessorDetails,
        dfn: handles.AnyTextProcessorDefinition,
        dialog: handles.AnyTextProcessorDialog,
        div: handles.AnyTextProcessorDiv,
        dl: handles.AnyTextProcessorDescriptionList,
        dt: handles.AnyTextProcessorDescriptionListTerm,
        em: handles.AnyTextProcessorEmphasis,
        embed: handles.AnyTextProcessorEmbed,
        fieldset: handles.AnyTextProcessorFieldset,
        figure: handles.AnyTextProcessorFigure,
        figcaption: handles.AnyTextProcessorFigureCaption,
        font: handles.AnyTextProcessorFont,
        footer: handles.AnyTextProcessorFooter,
        form: handles.AnyTextProcessorForm,
        h1: handles.AnyTextProcessorHeading1,
        h2: handles.AnyTextProcessorHeading2,
        h3: handles.AnyTextProcessorHeading3,
        h4: handles.AnyTextProcessorHeading4,
        h5: handles.AnyTextProcessorHeading5,
        h6: handles.AnyTextProcessorHeading6,
        head: handles.AnyTextProcessorHead,
        header: handles.AnyTextProcessorHeader,
        hgroup: handles.AnyTextProcessorHeadingGroup,
        hr: handles.AnyTextProcessorHr,
        html: handles.AnyTextProcessorHtml,
        i: handles.AnyTextProcessorItalic,
        iframe: handles.AnyTextProcessorIframe,
        img: handles.AnyTextProcessorImage,
        input: handles.AnyTextProcessorInput,
        ins: handles.AnyTextProcessorInsertion,
        kbd: handles.AnyTextProcessorKeyboard,
        keygen: handles.AnyTextProcessorKeygen,
        label: handles.AnyTextProcessorLabel,
        legend: handles.AnyTextProcessorLegend,
        li: handles.AnyTextProcessorListItem,
        link: handles.AnyTextProcessorLink,
        main: handles.AnyTextProcessorMain,
        map: handles.AnyTextProcessorMap,
        mark: handles.AnyTextProcessorMark,
        marquee: handles.AnyTextProcessorMarquee,
        menu: handles.AnyTextProcessorMenu,
        menuitem: handles.AnyTextProcessorMenuitem,
        meta: handles.AnyTextProcessorMeta,
        meter: handles.AnyTextProcessorMeter,
        nav: handles.AnyTextProcessorNav,
        noscript: handles.AnyTextProcessorNoscript,
        object: handles.AnyTextProcessorObject,
        ol: handles.AnyTextProcessorOrderedList,
        optgroup: handles.AnyTextProcessorOptgroup,
        option: handles.AnyTextProcessorOption,
        output: handles.AnyTextProcessorOutput,
        p: handles.AnyTextProcessorParagraph,
        param: handles.AnyTextProcessorParam,
        pre: handles.AnyTextProcessorPre,
        progress: handles.AnyTextProcessorProgress,
        q: handles.AnyTextProcessorQuote,
        rb: handles.AnyTextProcessorRubyAnnotation,
        rp: handles.AnyTextProcessorUnsupportedRubyAnnotation,
        rt: handles.AnyTextProcessorRubyAnnotationText,
        rtc: handles.AnyTextProcessorRubyTextContainer,
        ruby: handles.AnyTextProcessorRuby,
        s: handles.AnyTextProcessorS,
        samp: handles.AnyTextProcessorSampleOutput,
        script: handles.AnyTextProcessorScript,
        section: handles.AnyTextProcessorSection,
        select: handles.AnyTextProcessorSelect,
        small: handles.AnyTextProcessorSmall,
        source: handles.AnyTextProcessorSource,
        span: handles.AnyTextProcessorSpan,
        strong: handles.AnyTextProcessorStrong,
        style: handles.AnyTextProcessorStyle,
        sub: handles.AnyTextProcessorSubscript,
        summary: handles.AnyTextProcessorSummary,
        sup: handles.AnyTextProcessorSuperscript,
        table: handles.AnyTextProcessorTable,
        tbody: handles.AnyTextProcessorTableBody,
        td: handles.AnyTextProcessorTableData,
        template: handles.AnyTextProcessorTemplate,
        textarea: handles.AnyTextProcessorTextarea,
        tfoot: handles.AnyTextProcessorTableFooter,
        th: handles.AnyTextProcessorTableHeadCell,
        thead: handles.AnyTextProcessorTableHeader,
        time: handles.AnyTextProcessorTime,
        title: handles.AnyTextProcessorTitle,
        tr: handles.AnyTextProcessorTableRow,
        track: handles.AnyTextProcessorTrack,
        tt: handles.AnyTextProcessorTeletype,
        u: handles.AnyTextProcessorUnderline,
        ul: handles.AnyTextProcessorUnorderedList,
        var: handles.AnyTextProcessorVariable,
        video: handles.AnyTextProcessorVideo,
        wbr: handles.AnyTextProcessorWordBreak,
      })
      .process(codeToProcess)
      .then((field) => {
        setContent(field.result)
      })}


      let processedContent = unified()
      .use(rehypeParse, { fragment: true })
      .use(rehypeReact, {
        createElement,
        Fragment,
      })
      .use(remarkGfm)
      .use(remarkBreaks)
      .processSync(codeToProcess).result;

    // Set the style attribute if separate styling is used
    if (useSeparateStyling && codeStylingType === 'css') {
      (processedContent as React.DetailedReactHTMLElement<any, HTMLElement>).style = { cssText: codeStyling };
    } else if (useSeparateStyling && codeStylingType === 'scss') {
      // Compile the SCSS/SASS code into CSS
      try {
        const compiledCss = sass.renderSync({ data: codeStyling }).css.toString();

        // Append the compiled CSS to the HTML content using the `style` attribute
        (processedContent as React.DetailedReactHTMLElement<any, HTMLElement>).style = { cssText: compiledCss };
      } catch (e) {
        console.error(e);
      }
    } else if (useSeparateStyling && tailwindConfig) {
      // Import the Tailwind CSS library
      const classes  = require(tailwindConfig).default;
      processedContent = (
        <div className={`prose ${classes} ${handles.AnyTextProcessorWrapper}`}>
          {processedContent}
        </div>
      );
    }

    if (useCustomJavascript && customJavascript) {
      // Evaluate the custom JavaScript code
      try {
        eval(customJavascript);
      } catch (e) {
        console.error(e);
      }
    }

    setContent(processedContent)


  }, [codeToProcess, codeType, codeStyling, codeStylingType, useSeparateStyling])



  return (
    <NoSSR onSSR={<Loading />}>

      {content}

      {children}
    </NoSSR >
  )
}

AnyTextProcessor.schema = {
  title: 'admin/editor.AnyTextProcessor.title',
  type: 'object',
  description: 'admin/editor.AnyTextProcessor.description',
  properties: {
    codeToProcess: {
      title: 'admin/editor.AnyTextProcessor.codeToProcess.title',
      name: 'admin/editor.AnyTextProcessor.codeToProcess.name',
      type: 'string',
      description:

        'admin/editor.AnyTextProcessor.codeToProcess.description',
      default: '',
    },
    codeType: {
      title: 'admin/editor.AnyTextProcessor.codeType.title',
      name: 'admin/editor.AnyTextProcessor.codeType.name',
      type: 'enum',
      description: 'admin/editor.AnyTextProcessor.codeType.description',
      enum: ['TEXT', 'HTML', 'MARKDOWN'],

    },
    useSeparateStyling: {
      title: 'admin/editor.AnyTextProcessor.useSeparateStyling.title',
      name: 'admin/editor.AnyTextProcessor.useSeparateStyling.name',
      type: 'boolean',
      description:
        'admin/editor.AnyTextProcessor.useSeparateStyling.description',
      default: false,
    },
    codeStyling: {
      title: 'admin/editor.AnyTextProcessor.codeStyling.title',
      name: 'admin/editor.AnyTextProcessor.codeStyling.name',
      type: 'string',
      description:
        'admin/editor.AnyTextProcessor.codeStyling.description',
      default: '',
    },
    codeStylingType: {
      title: 'admin/editor.AnyTextProcessor.codeStylingType.title',
      name: 'admin/editor.AnyTextProcessor.codeStylingType.name',
      type: 'enum',
      description:
        'admin/editor.AnyTextProcessor.codeStylingType.description',
      enum: ['CSS', 'INLINE_CSS', 'SCSS/SASS', 'LESS', 'TAILWIND'],
      default: 'CSS',
    },
    useCustomTailwindConfig: {
      title: 'admin/editor.AnyTextProcessor.useCustomTailwindConfig.title',
      name: 'admin/editor.AnyTextProcessor.useCustomTailwindConfig.name',
      type: 'boolean',
      description:
        'admin/editor.AnyTextProcessor.useCustomTailwindConfig.description',
      default: false,
    },
    tailwindConfig: {
      title: 'admin/editor.AnyTextProcessor.tailwindConfig.title',
      name: 'admin/editor.AnyTextProcessor.tailwindConfig.name',
      type: 'string',
      description:
        'admin/editor.AnyTextProcessor.tailwindConfig.description',
      default: '',
    },
    useCustomJavascript: {
      title: 'admin/editor.AnyTextProcessor.useCustomJavascript.title',
      name: 'admin/editor.AnyTextProcessor.useCustomJavascript.name',
      type: 'boolean',
      description:
        'admin/editor.AnyTextProcessor.useCustomJavascript.description',
      default: false,
    },
    customJavascript: {
      title: 'admin/editor.AnyTextProcessor.customJavascript.title',
      name: 'admin/editor.AnyTextProcessor.customJavascript.name',
      type: 'string',
      description:
        'admin/editor.AnyTextProcessor.customJavascript.description',
      default: '',
    }

  }




}

export default AnyTextProcessor