ar-design
Version:
AR Design is a (react | nextjs) ui library.
42 lines (41 loc) • 1.62 kB
JavaScript
"use client";
import React, { useEffect, useRef, useState } from "react";
import Parser from "./classes/Parser";
import Compiler from "./classes/Compiler";
import "../../../assets/css/components/data-display/syntax-highlighter/syntax-highlighter.css";
import Import from "./Import";
// import Button from "../../form/button";
const SyntaxHighlighter = ({ children, position = "left" }) => {
// refs
const _div = useRef(null);
// states
const [elements, setElements] = useState([]);
const [htmlContent, setHtmlContent] = useState("");
// const [codePanelIsOpen, setCodePanelIsOpen] = useState<boolean>(false);
// classes
const parser = new Parser(setElements);
const compiler = new Compiler(setHtmlContent);
// useEffects
useEffect(() => {
// Clear...
setElements([]);
// Fill...
React.Children.forEach(children, (child) => {
if (React.isValidElement(child)) {
parser.JsxToString(child);
}
});
}, [children]);
useEffect(() => {
if (elements.length === 0)
return;
compiler.Jsx(elements);
}, [elements]);
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: "ar-syntax" },
React.createElement("div", { ref: _div, className: `preview ${position}` }, children),
React.createElement("pre", { className: "pre" },
React.createElement("code", { dangerouslySetInnerHTML: { __html: htmlContent } })))));
};
SyntaxHighlighter.Import = Import;
export default SyntaxHighlighter;