@intlayer/design-system 3.5.4 → 3.5.6

package/dist/components/IDE/CodeRender.mjs

@@ -1,612 +1,48 @@
 "use client";
 import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
-import { CopyCheckIcon, CopyIcon } from "lucide-react";
-import { lazy, useState, useEffect, Suspense } from "react";
-import CopyToClipboard from "react-copy-to-clipboard";
+import highlight from "highlight.js";
+import { forwardRef, useRef, useEffect } from "react";
 import { cn } from "../../utils/cn.mjs";
-import { Loader } from "../Loader/index.mjs";
-const okaidia = {
-  'code[class*="language-"]': {
-    "color": "#f8f8f2",
-    "background": "none",
-    "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
-    "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
-    "fontSize": "1em",
-    "textAlign": "left",
-    "whiteSpace": "pre",
-    "wordSpacing": "normal",
-    "wordBreak": "normal",
-    "wordWrap": "normal",
-    "lineHeight": "1.5",
-    "MozTabSize": "4",
-    "OTabSize": "4",
-    "tabSize": "4",
-    "WebkitHyphens": "none",
-    "MozHyphens": "none",
-    "msHyphens": "none",
-    "hyphens": "none"
-  },
-  'pre[class*="language-"]': {
-    "color": "#f8f8f2",
-    "background": "#272822",
-    "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
-    "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
-    "fontSize": "1em",
-    "textAlign": "left",
-    "whiteSpace": "pre",
-    "wordSpacing": "normal",
-    "wordBreak": "normal",
-    "wordWrap": "normal",
-    "lineHeight": "1.5",
-    "MozTabSize": "4",
-    "OTabSize": "4",
-    "tabSize": "4",
-    "WebkitHyphens": "none",
-    "MozHyphens": "none",
-    "msHyphens": "none",
-    "hyphens": "none",
-    "padding": "1em",
-    "margin": ".5em 0",
-    "overflow": "auto",
-    "borderRadius": "0.3em"
-  },
-  ':not(pre) > code[class*="language-"]': {
-    "background": "#272822",
-    "padding": ".1em",
-    "borderRadius": ".3em",
-    "whiteSpace": "normal"
-  },
-  "comment": {
-    "color": "#8292a2"
-  },
-  "prolog": {
-    "color": "#8292a2"
-  },
-  "doctype": {
-    "color": "#8292a2"
-  },
-  "cdata": {
-    "color": "#8292a2"
-  },
-  "punctuation": {
-    "color": "#f8f8f2"
-  },
-  "namespace": {
-    "Opacity": ".7"
-  },
-  "property": {
-    "color": "#f92672"
-  },
-  "tag": {
-    "color": "#f92672"
-  },
-  "constant": {
-    "color": "#f92672"
-  },
-  "symbol": {
-    "color": "#f92672"
-  },
-  "deleted": {
-    "color": "#f92672"
-  },
-  "boolean": {
-    "color": "#ae81ff"
-  },
-  "number": {
-    "color": "#ae81ff"
-  },
-  "selector": {
-    "color": "#a6e22e"
-  },
-  "attr-name": {
-    "color": "#a6e22e"
-  },
-  "string": {
-    "color": "#a6e22e"
-  },
-  "char": {
-    "color": "#a6e22e"
-  },
-  "builtin": {
-    "color": "#a6e22e"
-  },
-  "inserted": {
-    "color": "#a6e22e"
-  },
-  "operator": {
-    "color": "#f8f8f2"
-  },
-  "entity": {
-    "color": "#f8f8f2",
-    "cursor": "help"
-  },
-  "url": {
-    "color": "#f8f8f2"
-  },
-  ".language-css .token.string": {
-    "color": "#f8f8f2"
-  },
-  ".style .token.string": {
-    "color": "#f8f8f2"
-  },
-  "variable": {
-    "color": "#f8f8f2"
-  },
-  "atrule": {
-    "color": "#e6db74"
-  },
-  "attr-value": {
-    "color": "#e6db74"
-  },
-  "function": {
-    "color": "#e6db74"
-  },
-  "class-name": {
-    "color": "#e6db74"
-  },
-  "keyword": {
-    "color": "#66d9ef"
-  },
-  "regex": {
-    "color": "#fd971f"
-  },
-  "important": {
-    "color": "#fd971f",
-    "fontWeight": "bold"
-  },
-  "bold": {
-    "fontWeight": "bold"
-  },
-  "italic": {
-    "fontStyle": "italic"
+import { CopyButton } from "./CopyButton.mjs";
+const Code = forwardRef(
+  ({
+    children,
+    language,
+    isDarkMode,
+    showHeader = true,
+    showLineNumbers = true,
+    className,
+    ...props
+  }, ref) => {
+    const codeRef = useRef(null);
+    useEffect(() => {
+      if (codeRef && codeRef.current && !codeRef.current.hasAttribute("data-highlighted")) {
+        highlight.highlightElement(codeRef.current);
+        codeRef.current.setAttribute("data-highlighted", "true");
+      }
+    }, [children, showLineNumbers]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: cn(
+          "relative h-full w-full text-sm leading-6",
+          showLineNumbers && "ml-0",
+          className
+        ),
+        ref,
+        ...props,
+        children: [
+          showHeader && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-card dark:bg-card-dark text-neutral dark:text-neutral-dark flex h-9 w-full items-center rounded-t-xl pl-4 text-sm", children: language ?? "javascript" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sticky top-28", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-0 right-2 flex h-9 items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton, { content: children }) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid size-full grid-cols-[0px] overflow-auto p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: `language-${language} w-fit`, ref: codeRef, children }) }) })
+        ]
+      }
+    );
   }
-};
-const coldarkCold = {
-  'code[class*="language-"]': {
-    "color": "#111b27",
-    "background": "none",
-    "fontFamily": 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
-    "textAlign": "left",
-    "whiteSpace": "pre",
-    "wordSpacing": "normal",
-    "wordBreak": "normal",
-    "wordWrap": "normal",
-    "lineHeight": "1.5",
-    "MozTabSize": "4",
-    "OTabSize": "4",
-    "tabSize": "4",
-    "WebkitHyphens": "none",
-    "MozHyphens": "none",
-    "msHyphens": "none",
-    "hyphens": "none"
-  },
-  'pre[class*="language-"]': {
-    "color": "#111b27",
-    "background": "#e3eaf2",
-    "fontFamily": 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
-    "textAlign": "left",
-    "whiteSpace": "pre",
-    "wordSpacing": "normal",
-    "wordBreak": "normal",
-    "wordWrap": "normal",
-    "lineHeight": "1.5",
-    "MozTabSize": "4",
-    "OTabSize": "4",
-    "tabSize": "4",
-    "WebkitHyphens": "none",
-    "MozHyphens": "none",
-    "msHyphens": "none",
-    "hyphens": "none",
-    "padding": "1em",
-    "margin": "0.5em 0",
-    "overflow": "auto"
-  },
-  'pre[class*="language-"]::-moz-selection': {
-    "background": "#8da1b9"
-  },
-  'pre[class*="language-"] ::-moz-selection': {
-    "background": "#8da1b9"
-  },
-  'code[class*="language-"]::-moz-selection': {
-    "background": "#8da1b9"
-  },
-  'code[class*="language-"] ::-moz-selection': {
-    "background": "#8da1b9"
-  },
-  'pre[class*="language-"]::selection': {
-    "background": "#8da1b9"
-  },
-  'pre[class*="language-"] ::selection': {
-    "background": "#8da1b9"
-  },
-  'code[class*="language-"]::selection': {
-    "background": "#8da1b9"
-  },
-  'code[class*="language-"] ::selection': {
-    "background": "#8da1b9"
-  },
-  ':not(pre) > code[class*="language-"]': {
-    "background": "#e3eaf2",
-    "padding": "0.1em 0.3em",
-    "borderRadius": "0.3em",
-    "whiteSpace": "normal"
-  },
-  "comment": {
-    "color": "#3c526d"
-  },
-  "prolog": {
-    "color": "#3c526d"
-  },
-  "doctype": {
-    "color": "#3c526d"
-  },
-  "cdata": {
-    "color": "#3c526d"
-  },
-  "punctuation": {
-    "color": "#111b27"
-  },
-  "delimiter.important": {
-    "color": "#006d6d",
-    "fontWeight": "inherit"
-  },
-  "selector.parent": {
-    "color": "#006d6d"
-  },
-  "tag": {
-    "color": "#006d6d"
-  },
-  "tag.punctuation": {
-    "color": "#006d6d"
-  },
-  "attr-name": {
-    "color": "#755f00"
-  },
-  "boolean": {
-    "color": "#755f00"
-  },
-  "boolean.important": {
-    "color": "#755f00"
-  },
-  "number": {
-    "color": "#755f00"
-  },
-  "constant": {
-    "color": "#755f00"
-  },
-  "selector.attribute": {
-    "color": "#755f00"
-  },
-  "class-name": {
-    "color": "#005a8e"
-  },
-  "key": {
-    "color": "#005a8e"
-  },
-  "parameter": {
-    "color": "#005a8e"
-  },
-  "property": {
-    "color": "#005a8e"
-  },
-  "property-access": {
-    "color": "#005a8e"
-  },
-  "variable": {
-    "color": "#005a8e"
-  },
-  "attr-value": {
-    "color": "#116b00"
-  },
-  "inserted": {
-    "color": "#116b00"
-  },
-  "color": {
-    "color": "#116b00"
-  },
-  "selector.value": {
-    "color": "#116b00"
-  },
-  "string": {
-    "color": "#116b00"
-  },
-  "string.url-link": {
-    "color": "#116b00"
-  },
-  "builtin": {
-    "color": "#af00af"
-  },
-  "keyword-array": {
-    "color": "#af00af"
-  },
-  "package": {
-    "color": "#af00af"
-  },
-  "regex": {
-    "color": "#af00af"
-  },
-  "function": {
-    "color": "#7c00aa"
-  },
-  "selector.class": {
-    "color": "#7c00aa"
-  },
-  "selector.id": {
-    "color": "#7c00aa"
-  },
-  "atrule.rule": {
-    "color": "#a04900"
-  },
-  "combinator": {
-    "color": "#a04900"
-  },
-  "keyword": {
-    "color": "#a04900"
-  },
-  "operator": {
-    "color": "#a04900"
-  },
-  "pseudo-class": {
-    "color": "#a04900"
-  },
-  "pseudo-element": {
-    "color": "#a04900"
-  },
-  "selector": {
-    "color": "#a04900"
-  },
-  "unit": {
-    "color": "#a04900"
-  },
-  "deleted": {
-    "color": "#c22f2e"
-  },
-  "important": {
-    "color": "#c22f2e",
-    "fontWeight": "bold"
-  },
-  "keyword-this": {
-    "color": "#005a8e",
-    "fontWeight": "bold"
-  },
-  "this": {
-    "color": "#005a8e",
-    "fontWeight": "bold"
-  },
-  "bold": {
-    "fontWeight": "bold"
-  },
-  "italic": {
-    "fontStyle": "italic"
-  },
-  "entity": {
-    "cursor": "help"
-  },
-  ".language-markdown .token.title": {
-    "color": "#005a8e",
-    "fontWeight": "bold"
-  },
-  ".language-markdown .token.title .token.punctuation": {
-    "color": "#005a8e",
-    "fontWeight": "bold"
-  },
-  ".language-markdown .token.blockquote.punctuation": {
-    "color": "#af00af"
-  },
-  ".language-markdown .token.code": {
-    "color": "#006d6d"
-  },
-  ".language-markdown .token.hr.punctuation": {
-    "color": "#005a8e"
-  },
-  ".language-markdown .token.url > .token.content": {
-    "color": "#116b00"
-  },
-  ".language-markdown .token.url-link": {
-    "color": "#755f00"
-  },
-  ".language-markdown .token.list.punctuation": {
-    "color": "#af00af"
-  },
-  ".language-markdown .token.table-header": {
-    "color": "#111b27"
-  },
-  ".language-json .token.operator": {
-    "color": "#111b27"
-  },
-  ".language-scss .token.variable": {
-    "color": "#006d6d"
-  },
-  "token.tab:not(:empty):before": {
-    "color": "#3c526d"
-  },
-  "token.cr:before": {
-    "color": "#3c526d"
-  },
-  "token.lf:before": {
-    "color": "#3c526d"
-  },
-  "token.space:before": {
-    "color": "#3c526d"
-  },
-  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
-    "color": "#e3eaf2",
-    "background": "#005a8e"
-  },
-  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
-    "color": "#e3eaf2",
-    "background": "#005a8e"
-  },
-  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
-    "color": "#e3eaf2",
-    "background": "#005a8eda",
-    "textDecoration": "none"
-  },
-  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
-    "color": "#e3eaf2",
-    "background": "#005a8eda",
-    "textDecoration": "none"
-  },
-  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
-    "color": "#e3eaf2",
-    "background": "#005a8eda",
-    "textDecoration": "none"
-  },
-  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
-    "color": "#e3eaf2",
-    "background": "#005a8eda",
-    "textDecoration": "none"
-  },
-  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
-    "color": "#e3eaf2",
-    "background": "#3c526d"
-  },
-  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
-    "color": "#e3eaf2",
-    "background": "#3c526d"
-  },
-  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
-    "color": "#e3eaf2",
-    "background": "#3c526d"
-  },
-  ".line-highlight.line-highlight": {
-    "background": "linear-gradient(to right, #8da1b92f 70%, #8da1b925)"
-  },
-  ".line-highlight.line-highlight:before": {
-    "backgroundColor": "#3c526d",
-    "color": "#e3eaf2",
-    "boxShadow": "0 1px #8da1b9"
-  },
-  ".line-highlight.line-highlight[data-end]:after": {
-    "backgroundColor": "#3c526d",
-    "color": "#e3eaf2",
-    "boxShadow": "0 1px #8da1b9"
-  },
-  "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
-    "backgroundColor": "#3c526d1f"
-  },
-  ".line-numbers.line-numbers .line-numbers-rows": {
-    "borderRight": "1px solid #8da1b97a",
-    "background": "#d0dae77a"
-  },
-  ".line-numbers .line-numbers-rows > span:before": {
-    "color": "#3c526dda"
-  },
-  ".rainbow-braces .token.token.punctuation.brace-level-1": {
-    "color": "#755f00"
-  },
-  ".rainbow-braces .token.token.punctuation.brace-level-5": {
-    "color": "#755f00"
-  },
-  ".rainbow-braces .token.token.punctuation.brace-level-9": {
-    "color": "#755f00"
-  },
-  ".rainbow-braces .token.token.punctuation.brace-level-2": {
-    "color": "#af00af"
-  },
-  ".rainbow-braces .token.token.punctuation.brace-level-6": {
-    "color": "#af00af"
-  },
-  ".rainbow-braces .token.token.punctuation.brace-level-10": {
-    "color": "#af00af"
-  },
-  ".rainbow-braces .token.token.punctuation.brace-level-3": {
-    "color": "#005a8e"
-  },
-  ".rainbow-braces .token.token.punctuation.brace-level-7": {
-    "color": "#005a8e"
-  },
-  ".rainbow-braces .token.token.punctuation.brace-level-11": {
-    "color": "#005a8e"
-  },
-  ".rainbow-braces .token.token.punctuation.brace-level-4": {
-    "color": "#7c00aa"
-  },
-  ".rainbow-braces .token.token.punctuation.brace-level-8": {
-    "color": "#7c00aa"
-  },
-  ".rainbow-braces .token.token.punctuation.brace-level-12": {
-    "color": "#7c00aa"
-  },
-  "pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
-    "backgroundColor": "#c22f2e1f"
-  },
-  "pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
-    "backgroundColor": "#c22f2e1f"
-  },
-  "pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
-    "backgroundColor": "#116b001f"
-  },
-  "pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
-    "backgroundColor": "#116b001f"
-  },
-  ".command-line .command-line-prompt": {
-    "borderRight": "1px solid #8da1b97a"
-  },
-  ".command-line .command-line-prompt > span:before": {
-    "color": "#3c526dda"
-  }
-};
-const SyntaxHighlighter = lazy(
-  () => import("react-syntax-highlighter").then((module) => ({
-    default: module.Prism
-  }))
 );
-const Code = ({
-  children,
-  language,
-  isDarkMode,
-  showLineNumbers = true,
-  ...props
-}) => {
-  const [isDarkModeState, setIsDarkModeState] = useState(false);
-  const [copied, setCopied] = useState(false);
-  useEffect(
-    () => (
-      // Necessary to fix first render bug
-      setIsDarkModeState(isDarkMode ?? false)
-    ),
-    [isDarkMode]
-  );
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setCopied(false);
-    }, 1e3);
-    return () => clearTimeout(timer);
-  }, [copied]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      className: cn(
-        "relative h-full w-full text-sm",
-        showLineNumbers && "ml-0"
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CopyToClipboard, { text: children, onCopy: () => setCopied(true), children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "absolute right-3 top-3", "aria-label": "Copy code", children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(CopyCheckIcon, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { className: "size-4" }) }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid size-full grid-cols-[0px] overflow-auto p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          SyntaxHighlighter,
-          {
-            customStyle: {
-              display: void 0,
-              overflowX: "auto",
-              overflowY: "auto",
-              padding: void 0,
-              color: void 0,
-              background: "inherit",
-              margin: void 0
-            },
-            PreTag: (props2) => props2.children,
-            language: language ?? "javascript",
-            style: isDarkModeState ? okaidia : coldarkCold,
-            showLineNumbers,
-            ...props,
-            children: String(children).replace(/\n$/, "")
-          }
-        ) }) })
-      ]
-    }
-  );
-};
+Code.displayName = "Code";
 export {
   Code
 };