Prosquid1/EditorToImageTask.tsx

## EditorToImageTask.tsx
import Editor from "react-simple-code-editor";
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-markup";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism.css";

import { useState } from "react";

const EditorToImageTask = ({}) => {
  const [rawHtml, setRawHtml] = useState(
    `<span class="foo" id="bar" data-attr="baz"></span>
myElem.setAttribute('data-attr', 'baz');
// Finally append it as a child element to the <body> in the HTML
document.body.appendChild(myElem);
document.querySelector('[data-other]'); // Selects the first element with the "data-other" attribute
document.querySelectorAll('.multiple'); `
  );
  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        display: "flex",
        alignItems: "center",
        background: "black",
        width: 306,
        height: 500,
      }}
    >
      <Editor
        key="editor-gist-key"
        value={rawHtml}
        onValueChange={(_) => {}}
        padding={10}
        highlight={(code) => highlight(code, languages.js)}
        style={{
          fontFamily: "JetBrains Mono",
          fontSize: 12,
          caretColor: "whitesmoke",
          lineHeight: 2,
          minWidth: 100,
          maxHeight: 320,
        }}
        textareaId="editorToImageTask"
      />
    </div>
  );
};
export default EditorToImageTask;
	import Editor from "react-simple-code-editor";
	import { highlight, languages } from "prismjs/components/prism-core";
	import "prismjs/components/prism-markup";
	import "prismjs/components/prism-clike";
	import "prismjs/components/prism-javascript";
	import "prismjs/themes/prism.css";

	import { useState } from "react";

	const EditorToImageTask = ({}) => {
	const [rawHtml, setRawHtml] = useState(
	`<span class="foo" id="bar" data-attr="baz"></span>
	myElem.setAttribute('data-attr', 'baz');
	// Finally append it as a child element to the <body> in the HTML
	document.body.appendChild(myElem);
	document.querySelector('[data-other]'); // Selects the first element with the "data-other" attribute
	document.querySelectorAll('.multiple'); `
	);
	return (
	<div
	style={{
	position: "absolute",
	inset: 0,
	display: "flex",
	alignItems: "center",
	background: "black",
	width: 306,
	height: 500,
	}}
	>
	<Editor
	key="editor-gist-key"
	value={rawHtml}
	onValueChange={(_) => {}}
	padding={10}
	highlight={(code) => highlight(code, languages.js)}
	style={{
	fontFamily: "JetBrains Mono",
	fontSize: 12,
	caretColor: "whitesmoke",
	lineHeight: 2,
	minWidth: 100,
	maxHeight: 320,
	}}
	textareaId="editorToImageTask"
	/>
	</div>
	);
	};
	export default EditorToImageTask;