@haklex/rich-ext-code-snippet 0.0.82 → 0.0.84

package/dist/CodeSnippetNode-BmRM_Ma7.js

@@ -0,0 +1,400 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { createRendererDecoration } from "@haklex/rich-editor/renderers";
+import { DecoratorNode } from "lexical";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { normalizeLanguage } from "@haklex/rich-renderer-codeblock/constants";
+import { FileIcon } from "@haklex/rich-renderer-codeblock/icons";
+import { getHighlighterWithLang, SHIKI_DUAL_THEMES } from "@haklex/rich-renderer-codeblock/shiki";
+import { Check, Copy } from "lucide-react";
+import { useState, useEffect, useRef, useCallback } from "react";
+function toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : String(i);
+}
+function _defineProperty(obj, key, value) {
+  key = toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
+    });
+  }
+  return e;
+}
+function mapValues(input, fn) {
+  var result = {};
+  for (var _key in input) {
+    result[_key] = fn(input[_key], _key);
+  }
+  return result;
+}
+var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
+  for (var key of Object.keys(compoundCheck)) {
+    var _selections$key;
+    if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
+      return false;
+    }
+  }
+  return true;
+};
+var createRuntimeFn = (config) => {
+  var runtimeFn = (options) => {
+    var className = config.defaultClassName;
+    var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+    for (var variantName in selections) {
+      var _selections$variantNa;
+      var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
+      if (variantSelection != null) {
+        var selection = variantSelection;
+        if (typeof selection === "boolean") {
+          selection = selection === true ? "true" : "false";
+        }
+        var selectionClassName = (
+          // @ts-expect-error
+          config.variantClassNames[variantName][selection]
+        );
+        if (selectionClassName) {
+          className += " " + selectionClassName;
+        }
+      }
+    }
+    for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
+      if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
+        className += " " + compoundClassName;
+      }
+    }
+    return className;
+  };
+  runtimeFn.variants = () => Object.keys(config.variantClassNames);
+  runtimeFn.classNames = {
+    get base() {
+      return config.defaultClassName.split(" ")[0];
+    },
+    get variants() {
+      return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
+    }
+  };
+  return runtimeFn;
+};
+var semanticClassNames = { container: "rcs-container", header: "rcs-header", tabs: "rcs-tabs", tab: "rcs-tab", tabActive: "rcs-tab-active", titleBar: "rcs-title-bar", headerActions: "rcs-header-actions", copyButton: "rcs-copy-btn", separator: "rcs-separator", codePanelsWrapper: "rcs-code-panels-wrapper", codePanel: "rcs-code-panel", codeScroll: "rcs-code-scroll", codeBody: "rcs-code-body", fileIcon: "rcs-file-icon", editContainer: "rcs-edit-container", editOverlay: "rcs-edit-overlay", editLabel: "rcs-edit-label", modal: "rcs-modal", modalTitlebar: "rcs-modal-titlebar", modalTitle: "rcs-modal-title", modalIconButton: "rcs-modal-icon-btn", modalBody: "rcs-modal-body", modalSidebar: "rcs-modal-sidebar", sidebarHeader: "rcs-sidebar-header", sidebarAddButton: "rcs-sidebar-add-btn", fileList: "rcs-file-list", fileItem: "rcs-file-item", fileItemActive: "rcs-file-item-active", fileItemDragging: "rcs-file-item-dragging", fileDragHandle: "rcs-file-drag-handle", fileName: "rcs-file-name", fileDelete: "rcs-file-delete", renameInput: "rcs-rename-input", modalEditor: "rcs-modal-editor", breadcrumb: "rcs-breadcrumb", breadcrumbLeft: "rcs-breadcrumb-left", breadcrumbName: "rcs-breadcrumb-name", breadcrumbLang: "rcs-breadcrumb-lang", editorContainer: "rcs-editor-container", dragOverlay: "rcs-drag-overlay" };
+var container = "hjkryc0";
+var header = "hjkryc1";
+var tabs = "hjkryc2";
+var tab = createRuntimeFn({ defaultClassName: "hjkryc4 hjkryc3", variantClassNames: { active: { true: "hjkryc5", false: "hjkryc6" } }, defaultVariants: { active: false }, compoundVariants: [] });
+var titleBar = "hjkryc7";
+var headerActions = "hjkryc8";
+var copyButton = "hjkryc9";
+var separator = "hjkryca";
+var codePanelsWrapper = "hjkrycb";
+var codePanel = "hjkrycc";
+var codeScroll = "hjkrycd";
+var codeBody = "hjkryce";
+var fileIcon = "hjkrycf";
+var editContainer = "hjkrycg";
+var editOverlay = "hjkrych";
+var editLabel = "hjkryci";
+var codeSnippetDialogPopup = "hjkrycj";
+var modal = "hjkryck";
+var modalTitlebar = "hjkrycl";
+var modalTitle = "hjkrycm";
+var modalIconButton = "hjkrycn";
+var modalBody = "hjkryco";
+var modalSidebar = "hjkrycp";
+var sidebarHeader = "hjkrycq";
+var sidebarAddButton = "hjkrycr";
+var fileList = "hjkrycs";
+var fileItem = createRuntimeFn({ defaultClassName: "hjkrycu hjkryct", variantClassNames: { active: { true: "hjkrycv", false: "hjkrycw" }, dragging: { true: "hjkrycx", false: "hjkrycy" } }, defaultVariants: { active: false, dragging: false }, compoundVariants: [] });
+var fileDragHandle = "hjkrycz";
+var fileName = "hjkryc10";
+var fileDelete = "hjkryc11";
+var renameInput = "hjkryc12";
+var modalEditor = "hjkryc13";
+var breadcrumb = "hjkryc14";
+var breadcrumbLeft = "hjkryc15";
+var breadcrumbName = "hjkryc16";
+var breadcrumbLang = "hjkryc17";
+var editorContainer = "hjkryc18";
+var dragOverlay = "hjkryc19";
+const EXT_TO_LANG = {
+  ts: "typescript",
+  tsx: "tsx",
+  js: "javascript",
+  jsx: "jsx",
+  py: "python",
+  rs: "rust",
+  go: "go",
+  java: "java",
+  html: "html",
+  css: "css",
+  scss: "scss",
+  json: "json",
+  md: "markdown",
+  sh: "bash",
+  yml: "yaml",
+  yaml: "yaml",
+  sql: "sql",
+  c: "c",
+  cpp: "cpp",
+  swift: "swift",
+  kt: "kotlin",
+  rb: "ruby",
+  php: "php",
+  vue: "vue",
+  svelte: "svelte",
+  toml: "toml",
+  xml: "xml",
+  graphql: "graphql",
+  gql: "graphql",
+  dockerfile: "dockerfile",
+  lua: "lua",
+  zig: "zig"
+};
+function getLanguageFromFilename(filename) {
+  const ext = filename.split(".").pop()?.toLowerCase() ?? "";
+  return EXT_TO_LANG[ext] ?? "text";
+}
+const CopyButton = ({ text }) => {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef(void 0);
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setCopied(false), 2e3);
+  }, [text]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": copied ? "Copied" : "Copy code",
+      className: `${copyButton} ${semanticClassNames.copyButton}`,
+      type: "button",
+      onClick: handleCopy,
+      children: copied ? /* @__PURE__ */ jsx(Check, { size: 14 }) : /* @__PURE__ */ jsx(Copy, { size: 14 })
+    }
+  );
+};
+const CodeSnippetRenderer = ({ files }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [htmlMap, setHtmlMap] = useState({});
+  const activeFile = files[activeIndex] ?? files[0];
+  const isMultiFile = files.length > 1;
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const newHtmlMap = {};
+      for (const file of files) {
+        const lang = normalizeLanguage(file.language ?? getLanguageFromFilename(file.filename));
+        const highlighter = await getHighlighterWithLang(lang);
+        if (cancelled) return;
+        const loaded = highlighter.getLoadedLanguages();
+        const resolvedLang = loaded.includes(lang) ? lang : "text";
+        newHtmlMap[file.filename] = highlighter.codeToHtml(file.code, {
+          lang: resolvedLang,
+          themes: SHIKI_DUAL_THEMES
+        });
+      }
+      if (!cancelled) setHtmlMap(newHtmlMap);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [files]);
+  if (!activeFile) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "Code snippet",
+      className: `${container} ${semanticClassNames.container}`,
+      role: "region",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: `${header} ${semanticClassNames.header}`, children: [
+          isMultiFile ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-label": "Code file tabs",
+              className: `${tabs} ${semanticClassNames.tabs}`,
+              role: "tablist",
+              children: files.map((file, index) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  "aria-selected": index === activeIndex,
+                  className: `${tab({ active: index === activeIndex })} ${semanticClassNames.tab} ${index === activeIndex ? semanticClassNames.tabActive : ""}`.trim(),
+                  role: "tab",
+                  type: "button",
+                  onClick: () => setActiveIndex(index),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      FileIcon,
+                      {
+                        className: `${fileIcon} ${semanticClassNames.fileIcon}`,
+                        filename: file.filename,
+                        size: 14
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { children: file.filename })
+                  ]
+                },
+                file.filename
+              ))
+            }
+          ) : /* @__PURE__ */ jsxs("div", { className: `${titleBar} ${semanticClassNames.titleBar}`, children: [
+            /* @__PURE__ */ jsx(
+              FileIcon,
+              {
+                className: `${fileIcon} ${semanticClassNames.fileIcon}`,
+                filename: activeFile.filename,
+                size: 14
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: activeFile.filename })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `${headerActions} ${semanticClassNames.headerActions}`, children: /* @__PURE__ */ jsx(CopyButton, { text: activeFile.code }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: `${separator} ${semanticClassNames.separator}` }),
+        /* @__PURE__ */ jsx("div", { className: `${codePanelsWrapper} ${semanticClassNames.codePanelsWrapper}`, children: files.map((file, index) => {
+          const html = htmlMap[file.filename];
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${codePanel} ${semanticClassNames.codePanel}`,
+              "data-active": index === activeIndex,
+              role: isMultiFile ? "tabpanel" : void 0,
+              children: /* @__PURE__ */ jsx("div", { className: `${codeScroll} ${semanticClassNames.codeScroll}`, children: html ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `${codeBody} ${semanticClassNames.codeBody}`,
+                  dangerouslySetInnerHTML: { __html: html }
+                }
+              ) : /* @__PURE__ */ jsx("pre", { className: `${codeBody} ${semanticClassNames.codeBody}`, children: /* @__PURE__ */ jsx("code", { children: file.code.split("\n").map((line, i) => /* @__PURE__ */ jsx("span", { className: "line", children: line }, i)) }) }) })
+            },
+            file.filename
+          );
+        }) })
+      ]
+    }
+  );
+};
+class CodeSnippetNode extends DecoratorNode {
+  constructor(files, key) {
+    super(key);
+    __publicField(this, "__files");
+    this.__files = files;
+  }
+  static getType() {
+    return "code-snippet";
+  }
+  static clone(node) {
+    return new CodeSnippetNode(node.__files, node.__key);
+  }
+  createDOM(_config) {
+    const div = document.createElement("div");
+    div.className = "rich-code-snippet";
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  isInline() {
+    return false;
+  }
+  static importJSON(serializedNode) {
+    return $createCodeSnippetNode(serializedNode.files);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "code-snippet",
+      files: this.__files,
+      version: 1
+    };
+  }
+  getFiles() {
+    return this.getLatest().__files;
+  }
+  setFiles(files) {
+    const writable = this.getWritable();
+    writable.__files = files;
+  }
+  decorate(_editor, _config) {
+    return createRendererDecoration("CodeSnippet", CodeSnippetRenderer, {
+      files: this.__files
+    });
+  }
+}
+function $createCodeSnippetNode(files) {
+  return new CodeSnippetNode(files);
+}
+function $isCodeSnippetNode(node) {
+  return node instanceof CodeSnippetNode;
+}
+export {
+  $isCodeSnippetNode as $,
+  editOverlay as A,
+  editLabel as B,
+  CodeSnippetRenderer as C,
+  CodeSnippetNode as D,
+  $createCodeSnippetNode as E,
+  modalTitlebar as a,
+  modalTitle as b,
+  modalIconButton as c,
+  modalBody as d,
+  modalSidebar as e,
+  sidebarHeader as f,
+  getLanguageFromFilename as g,
+  sidebarAddButton as h,
+  fileList as i,
+  dragOverlay as j,
+  fileIcon as k,
+  fileName as l,
+  modal as m,
+  fileItem as n,
+  modalEditor as o,
+  breadcrumb as p,
+  breadcrumbLeft as q,
+  breadcrumbName as r,
+  semanticClassNames as s,
+  breadcrumbLang as t,
+  editorContainer as u,
+  fileDragHandle as v,
+  renameInput as w,
+  fileDelete as x,
+  codeSnippetDialogPopup as y,
+  editContainer as z
+};