Created
March 26, 2023 18:46
-
-
Save lokinmodar/ee29c0996e02598321af1700e4f6ad15 to your computer and use it in GitHub Desktop.
For ChatGPT evaluation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment