@haklex/rich-ext-code-snippet 0.0.41 → 0.0.42

package/dist/CodeSnippetNode-BQ5spMAM.js

@@ -0,0 +1,431 @@
+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";
+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", 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 codeScroll = "hjkrycb";
+var codeBody = "hjkrycc";
+var fileIcon = "hjkrycd";
+var editContainer = "hjkryce";
+var editOverlay = "hjkrycf";
+var editLabel = "hjkrycg";
+var codeSnippetDialogPopup = "hjkrych";
+var modal = "hjkryci";
+var modalTitlebar = "hjkrycj";
+var modalTitle = "hjkryck";
+var modalIconButton = "hjkrycl";
+var modalBody = "hjkrycm";
+var modalSidebar = "hjkrycn";
+var sidebarHeader = "hjkryco";
+var sidebarAddButton = "hjkrycp";
+var fileList = "hjkrycq";
+var fileItem = createRuntimeFn({ defaultClassName: "hjkrycs hjkrycr", variantClassNames: { active: { true: "hjkryct", false: "hjkrycu" }, dragging: { true: "hjkrycv", false: "hjkrycw" } }, defaultVariants: { active: false, dragging: false }, compoundVariants: [] });
+var fileDragHandle = "hjkrycx";
+var fileName = "hjkrycy";
+var fileDelete = "hjkrycz";
+var renameInput = "hjkryc10";
+var modalEditor = "hjkryc11";
+var breadcrumb = "hjkryc12";
+var breadcrumbLeft = "hjkryc13";
+var breadcrumbName = "hjkryc14";
+var breadcrumbLang = "hjkryc15";
+var editorContainer = "hjkryc16";
+var dragOverlay = "hjkryc17";
+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",
+    {
+      type: "button",
+      className: `${copyButton} ${semanticClassNames.copyButton}`,
+      onClick: handleCopy,
+      "aria-label": copied ? "Copied" : "Copy code",
+      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",
+    {
+      className: `${container} ${semanticClassNames.container}`,
+      role: "region",
+      "aria-label": "Code snippet",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: `${header} ${semanticClassNames.header}`, children: [
+          isMultiFile ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${tabs} ${semanticClassNames.tabs}`,
+              role: "tablist",
+              "aria-label": "Code file tabs",
+              children: files.map((file, index) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": index === activeIndex,
+                  onClick: () => setActiveIndex(index),
+                  className: `${tab({ active: index === activeIndex })} ${semanticClassNames.tab} ${index === activeIndex ? semanticClassNames.tabActive : ""}`.trim(),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      FileIcon,
+                      {
+                        filename: file.filename,
+                        size: 14,
+                        className: `${fileIcon} ${semanticClassNames.fileIcon}`
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { children: file.filename })
+                  ]
+                },
+                file.filename
+              ))
+            }
+          ) : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `${titleBar} ${semanticClassNames.titleBar}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  FileIcon,
+                  {
+                    filename: activeFile.filename,
+                    size: 14,
+                    className: `${fileIcon} ${semanticClassNames.fileIcon}`
+                  }
+                ),
+                /* @__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}`
+          }
+        ),
+        files.map((file, index) => {
+          const html = htmlMap[file.filename];
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: isMultiFile ? "tabpanel" : void 0,
+              className: semanticClassNames.codePanel,
+              style: { display: index === activeIndex ? "block" : "none" },
+              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
+};

package/dist/index.mjs

@@ -1,11 +1,13 @@
 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 { g as getLanguageFromFilename, m as modal, s as semanticClassNames, a as modalTitlebar, b as modalTitle, c as modalIconButton, d as modalBody, e as modalSidebar, f as sidebarHeader, h as sidebarAddButton, i as fileList, j as dragOverlay, k as fileIcon, l as fileName, n as fileItem, o as modalEditor, p as breadcrumb, q as breadcrumbLeft, r as breadcrumbName, t as breadcrumbLang, u as editorContainer, v as fileDragHandle, w as renameInput, x as fileDelete, y as codeSnippetDialogPopup, z as editContainer, C as CodeSnippetRenderer, A as editOverlay, B as editLabel, $ as $isCodeSnippetNode, D as CodeSnippetNode } from "./CodeSnippetNode-BQ5spMAM.js";
+import { E } from "./CodeSnippetNode-BQ5spMAM.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useColorScheme, createRendererDecoration } from "@haklex/rich-editor";
+import { useColorScheme } from "@haklex/rich-editor";
 import { presentDialog } from "@haklex/rich-editor-ui";
 import { usePortalTheme } from "@haklex/rich-style-token";
-import { X, Plus, GripVertical, Trash2, Check, Copy, Pencil, FileCode } from "lucide-react";
+import { X, Plus, GripVertical, Trash2, Pencil, FileCode } from "lucide-react";
 import { useState, useRef, useEffect, useCallback, useMemo, useContext, createContext, createElement } from "react";
 import { history, defaultKeymap, historyKeymap, indentWithTab } from "@codemirror/commands";
 import { Compartment, EditorState } from "@codemirror/state";
@@ -17,188 +19,8 @@ import { getThemeExtensions, loadLanguageExtension } from "@haklex/cm-editor";
 import { normalizeLanguage } from "@haklex/rich-renderer-codeblock/constants";
 import { FileIcon } from "@haklex/rich-renderer-codeblock/icons";
 import { createPortal } from "react-dom";
-import { getHighlighterWithLang, SHIKI_DUAL_THEMES } from "@haklex/rich-renderer-codeblock/shiki";
-import { DecoratorNode, $getNodeByKey, $insertNodes } from "lexical";
+import { $getNodeByKey, $insertNodes } from "lexical";
 import { CODE_SNIPPET_BLOCK_TRANSFORMER } from "@haklex/rich-headless/transformers";
-function toPrimitive(t, r2) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r2);
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r2 ? 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, r2) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o2 = Object.getOwnPropertySymbols(e);
-    r2 && (o2 = o2.filter(function(r3) {
-      return Object.getOwnPropertyDescriptor(e, r3).enumerable;
-    })), t.push.apply(t, o2);
-  }
-  return t;
-}
-function _objectSpread2(e) {
-  for (var r2 = 1; r2 < arguments.length; r2++) {
-    var t = null != arguments[r2] ? arguments[r2] : {};
-    r2 % 2 ? ownKeys(Object(t), true).forEach(function(r3) {
-      _defineProperty(e, r3, t[r3]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r3) {
-      Object.defineProperty(e, r3, Object.getOwnPropertyDescriptor(t, r3));
-    });
-  }
-  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", 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 codeScroll = "hjkrycb";
-var codeBody = "hjkrycc";
-var fileIcon = "hjkrycd";
-var editContainer = "hjkryce";
-var editOverlay = "hjkrycf";
-var editLabel = "hjkrycg";
-var codeSnippetDialogPopup = "hjkrych";
-var modal = "hjkryci";
-var modalTitlebar = "hjkrycj";
-var modalTitle = "hjkryck";
-var modalIconButton = "hjkrycl";
-var modalBody = "hjkrycm";
-var modalSidebar = "hjkrycn";
-var sidebarHeader = "hjkryco";
-var sidebarAddButton = "hjkrycp";
-var fileList = "hjkrycq";
-var fileItem = createRuntimeFn({ defaultClassName: "hjkrycs hjkrycr", variantClassNames: { active: { true: "hjkryct", false: "hjkrycu" }, dragging: { true: "hjkrycv", false: "hjkrycw" } }, defaultVariants: { active: false, dragging: false }, compoundVariants: [] });
-var fileDragHandle = "hjkrycx";
-var fileName = "hjkrycy";
-var fileDelete = "hjkrycz";
-var renameInput = "hjkryc10";
-var modalEditor = "hjkryc11";
-var breadcrumb = "hjkryc12";
-var breadcrumbLeft = "hjkryc13";
-var breadcrumbName = "hjkryc14";
-var breadcrumbLang = "hjkryc15";
-var editorContainer = "hjkryc16";
-var dragOverlay = "hjkryc17";
-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 SortableFileItem = ({
   file,
   isActive,
@@ -322,8 +144,8 @@ const CodeEditorModal = ({
     );
   };
   useEffect(() => {
-    const container2 = containerRef.current;
-    if (!container2) return;
+    const container = containerRef.current;
+    if (!container) return;
     const file = editFilesRef.current.find((f) => f.filename === activeFilename);
     if (!file) return;
     let cancelled = false;
@@ -331,7 +153,7 @@ const CodeEditorModal = ({
       file.language ?? getLanguageFromFilename(file.filename)
     );
     const editor = new EditorView({
-      parent: container2,
+      parent: container,
       state: EditorState.create({
         doc: file.code,
         extensions: [
@@ -623,160 +445,6 @@ const CodeEditorModal = ({
     )
   ] });
 };
-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",
-    {
-      type: "button",
-      className: `${copyButton} ${semanticClassNames.copyButton}`,
-      onClick: handleCopy,
-      "aria-label": copied ? "Copied" : "Copy code",
-      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",
-    {
-      className: `${container} ${semanticClassNames.container}`,
-      role: "region",
-      "aria-label": "Code snippet",
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: `${header} ${semanticClassNames.header}`, children: [
-          isMultiFile ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `${tabs} ${semanticClassNames.tabs}`,
-              role: "tablist",
-              "aria-label": "Code file tabs",
-              children: files.map((file, index) => /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  role: "tab",
-                  "aria-selected": index === activeIndex,
-                  onClick: () => setActiveIndex(index),
-                  className: `${tab({ active: index === activeIndex })} ${semanticClassNames.tab} ${index === activeIndex ? semanticClassNames.tabActive : ""}`.trim(),
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      FileIcon,
-                      {
-                        filename: file.filename,
-                        size: 14,
-                        className: `${fileIcon} ${semanticClassNames.fileIcon}`
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { children: file.filename })
-                  ]
-                },
-                file.filename
-              ))
-            }
-          ) : /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: `${titleBar} ${semanticClassNames.titleBar}`,
-              children: [
-                /* @__PURE__ */ jsx(
-                  FileIcon,
-                  {
-                    filename: activeFile.filename,
-                    size: 14,
-                    className: `${fileIcon} ${semanticClassNames.fileIcon}`
-                  }
-                ),
-                /* @__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}`
-          }
-        ),
-        files.map((file, index) => {
-          const html = htmlMap[file.filename];
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              role: isMultiFile ? "tabpanel" : void 0,
-              className: semanticClassNames.codePanel,
-              style: { display: index === activeIndex ? "block" : "none" },
-              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
-          );
-        })
-      ]
-    }
-  );
-};
 const CodeSnippetEditRenderer = ({
   files,
   onFilesChange
@@ -828,59 +496,6 @@ function o() {
     throw r2.search = t.toString(), Error(`Minified Lexical error #${n2}; visit ${r2.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`);
   })(8), n;
 }
-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;
-}
 const CodeSnippetEditDecorator = ({
   nodeKey,
   files
@@ -942,7 +557,7 @@ const codeSnippetNodes = [CodeSnippetNode];
 const codeSnippetEditNodes = [CodeSnippetEditNode];
 export {
   $createCodeSnippetEditNode,
-  $createCodeSnippetNode,
+  E as $createCodeSnippetNode,
   $isCodeSnippetEditNode,
   $isCodeSnippetNode,
   CODE_SNIPPET_BLOCK_TRANSFORMER,

package/dist/static.mjs

@@ -0,0 +1,12 @@
+import { D as CodeSnippetNode } from "./CodeSnippetNode-BQ5spMAM.js";
+import { E, $, C } from "./CodeSnippetNode-BQ5spMAM.js";
+import { CODE_SNIPPET_BLOCK_TRANSFORMER } from "@haklex/rich-headless/transformers";
+const codeSnippetNodes = [CodeSnippetNode];
+export {
+  E as $createCodeSnippetNode,
+  $ as $isCodeSnippetNode,
+  CODE_SNIPPET_BLOCK_TRANSFORMER,
+  CodeSnippetNode,
+  C as CodeSnippetRenderer,
+  codeSnippetNodes
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-ext-code-snippet",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "description": "Multi-file code snippet extension",
   "license": "MIT",
   "type": "module",
@@ -28,12 +28,12 @@
     "@dnd-kit/utilities": "^3.2.2",
     "lucide-react": "^0.574.0",
     "shiki": "^3.23.0",
-    "@haklex/cm-editor": "0.0.41",
-    "@haklex/rich-editor": "0.0.41",
-    "@haklex/rich-editor-ui": "0.0.41",
-    "@haklex/rich-headless": "0.0.41",
-    "@haklex/rich-renderer-codeblock": "0.0.41",
-    "@haklex/rich-style-token": "0.0.41"
+    "@haklex/cm-editor": "0.0.42",
+    "@haklex/rich-editor": "0.0.42",
+    "@haklex/rich-editor-ui": "0.0.42",
+    "@haklex/rich-renderer-codeblock": "0.0.42",
+    "@haklex/rich-style-token": "0.0.42",
+    "@haklex/rich-headless": "0.0.42"
   },
   "devDependencies": {
     "@lexical/react": "^0.41.0",