@noirmd/previewer 1.1.1 → 1.2.0

package/dist/NReditor.cjs

@@ -347,6 +347,62 @@ function useDebounce(value, delay) {
   return debouncedValue;
 }
 
+// react/useTailwindCDN.ts
+var import_react2 = require("react");
+var CDN_URL = "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4";
+var SCRIPT_ID = "tailwind-cdn-v4-runtime";
+var CONFIG_ID = "tailwind-cdn-v4-config";
+var TAILWIND_CDN_CONFIG = `
+window.tailwind = window.tailwind || {};
+window.tailwind.config = {
+  corePlugins: {
+    preflight: false,
+  },
+};
+`;
+function useLazyTailwindCDN(enabled) {
+  const loadedRef = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
+    if (!enabled) {
+      window.__twCDNRefs = (window.__twCDNRefs ?? 1) - 1;
+      if ((window.__twCDNRefs ?? 0) <= 0) {
+        document.getElementById(SCRIPT_ID)?.remove();
+        document.getElementById(CONFIG_ID)?.remove();
+        window.__twCDNRefs = 0;
+        loadedRef.current = false;
+      }
+      return;
+    }
+    window.__twCDNRefs = (window.__twCDNRefs ?? 0) + 1;
+    if (!document.getElementById(CONFIG_ID)) {
+      const configScript = document.createElement("script");
+      configScript.id = CONFIG_ID;
+      configScript.textContent = TAILWIND_CDN_CONFIG;
+      document.head.appendChild(configScript);
+    }
+    if (!document.getElementById(SCRIPT_ID)) {
+      const script = document.createElement("script");
+      script.id = SCRIPT_ID;
+      script.src = CDN_URL;
+      document.head.appendChild(script);
+      loadedRef.current = true;
+    }
+    return () => {
+      window.__twCDNRefs = (window.__twCDNRefs ?? 1) - 1;
+      if ((window.__twCDNRefs ?? 0) <= 0) {
+        document.getElementById(SCRIPT_ID)?.remove();
+        document.getElementById(CONFIG_ID)?.remove();
+        window.__twCDNRefs = 0;
+        loadedRef.current = false;
+      }
+    };
+  }, [enabled]);
+}
+function scanTailwindCDN() {
+  const tw = window.tailwind;
+  if (tw?.scan) tw.scan();
+}
+
 // react/CustomMarkdownRenderer.tsx
 var import_react10 = __toESM(require("react"), 1);
 
@@ -769,7 +825,7 @@ function splitSlots(rawContent) {
 }
 
 // react/ui-components.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // react/highlightSetup.ts
 var import_core = __toESM(require("highlight.js/lib/core"), 1);
@@ -861,8 +917,8 @@ var IconRenderer = ({ iconName, extraClasses = "" }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: baseClass, "aria-hidden": "true", children: iconName });
 };
 var CodeBlock = ({ code, language, title }) => {
-  const [copied, setCopied] = (0, import_react2.useState)(false);
-  const timerRef = (0, import_react2.useRef)(null);
+  const [copied, setCopied] = (0, import_react3.useState)(false);
+  const timerRef = (0, import_react3.useRef)(null);
   const lang = language?.split(/[\s{]/)[0]?.trim() || "";
   let html;
   try {
@@ -928,7 +984,7 @@ var Details = ({
   style,
   children
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react2.useState)(defaultOpen);
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(defaultOpen);
   const iconToRender = icon || "play_arrow";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "details",
@@ -1130,7 +1186,7 @@ var AdmonitionDirective = ({
 var AdmonitionDirective_default = AdmonitionDirective;
 
 // react/directives/CardDirective.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CardDirective = ({
   directiveType,
@@ -1140,7 +1196,7 @@ var CardDirective = ({
   context,
   options = {}
 }) => {
-  const stableId = (0, import_react3.useId)();
+  const stableId = (0, import_react4.useId)();
   const { title, image, icon, class: customClass, url, target } = props;
   const hasDescription = !!slots.description;
   const { isSingleCard } = options;
@@ -1151,7 +1207,7 @@ var CardDirective = ({
   const inlineStyles = props.style ? parseCssString(props.style) : {};
   const description = hasDescription ? renderSlot("description") : null;
   const content = renderSlot("content") || renderSlot("default");
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react3.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react4.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
@@ -1236,14 +1292,14 @@ var DetailsDirective = ({
 var DetailsDirective_default = DetailsDirective;
 
 // react/directives/ModalDirective.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var ModalDirective = ({
   props,
   renderSlot,
   context
 }) => {
-  const stableId = (0, import_react4.useId)();
+  const stableId = (0, import_react5.useId)();
   const modalId = `modal-${props.id || stableId}`;
   const label = props.label || props.title || "Open";
   const modalTitle = props.title || "Modal";
@@ -1287,7 +1343,7 @@ var ModalDirective = ({
 var ModalDirective_default = ModalDirective;
 
 // react/directives/ButtonDirective.tsx
-var import_react5 = __toESM(require("react"), 1);
+var import_react6 = __toESM(require("react"), 1);
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ButtonDirective = ({
   props,
@@ -1330,13 +1386,13 @@ var ButtonDirective = ({
   const slotContent = renderSlot("default");
   const findLinks = (element) => {
     if (!element) return [];
-    if (import_react5.default.isValidElement(element) && element.type === "a") {
+    if (import_react6.default.isValidElement(element) && element.type === "a") {
       return [element];
     }
     if (Array.isArray(element)) {
       return element.flatMap(findLinks);
     }
-    if (import_react5.default.isValidElement(element) && element.props.children) {
+    if (import_react6.default.isValidElement(element) && element.props.children) {
       return findLinks(element.props.children);
     }
     return [];
@@ -1344,7 +1400,7 @@ var ButtonDirective = ({
   const links = findLinks(slotContent);
   if (links.length > 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `not-prose ${wrapperClass}`.trim(), children: links.map(
-      (link, index) => import_react5.default.cloneElement(
+      (link, index) => import_react6.default.cloneElement(
         link,
         {
           key: index,
@@ -1389,7 +1445,7 @@ var WrapperDirective = ({
 var WrapperDirective_default = WrapperDirective;
 
 // react/directives/SlideDirective.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var slideCounter = 0;
 var SlideDirective = ({
@@ -1400,23 +1456,23 @@ var SlideDirective = ({
   const rawContent = slots.default || "";
   const lines = rawContent.split("\n").map((l) => l.trim()).filter(Boolean);
   const elements = lines.map((line) => context.parseMarkdown(line));
-  const [current, setCurrent] = (0, import_react6.useState)(0);
+  const [current, setCurrent] = (0, import_react7.useState)(0);
   const interval = parseInt(props.interval || "3000", 10);
   const speed = parseInt(props.speed || "500", 10);
-  const elRefs = (0, import_react6.useRef)([]);
-  const [maxH, setMaxH] = (0, import_react6.useState)(0);
-  (0, import_react6.useLayoutEffect)(() => {
+  const elRefs = (0, import_react7.useRef)([]);
+  const [maxH, setMaxH] = (0, import_react7.useState)(0);
+  (0, import_react7.useLayoutEffect)(() => {
     let h = 0;
     elRefs.current.forEach((el) => {
       if (el) h = Math.max(h, el.offsetHeight);
     });
     if (h > 0) setMaxH(h);
   }, [elements]);
-  const cycle = (0, import_react6.useCallback)(() => {
+  const cycle = (0, import_react7.useCallback)(() => {
     if (elements.length <= 1) return;
     setCurrent((prev) => (prev + 1) % elements.length);
   }, [elements.length]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (elements.length <= 1) return;
     const id = setInterval(cycle, interval);
     return () => clearInterval(id);
@@ -1540,15 +1596,6 @@ var DirectiveRenderer_default = DirectiveRenderer;
 
 // react/RawHtmlRenderer.tsx
 var import_react8 = require("react");
-
-// react/useTailwindCDN.ts
-var import_react7 = require("react");
-function scanTailwindCDN() {
-  const tw = window.tailwind;
-  if (tw?.scan) tw.scan();
-}
-
-// react/RawHtmlRenderer.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var RawHtmlRenderer = ({
   content,
@@ -2262,12 +2309,15 @@ var NReditor = ({
   onChange,
   className,
   debounceMs = 300,
-  tailwindCDN = false
+  tailwindCDN = false,
+  onGuide,
+  onConfig
 }) => {
   const editorRef = (0, import_react11.useRef)(null);
   const [isAllFolded, setIsAllFolded] = (0, import_react11.useState)(false);
   const [editorMode, setEditorMode] = (0, import_react11.useState)("editor");
   const debouncedContent = useDebounce(value, debounceMs);
+  useLazyTailwindCDN(tailwindCDN);
   const handleToggleFold = () => {
     if (!editorRef.current) return;
     if (isAllFolded) {
@@ -2315,36 +2365,67 @@ var NReditor = ({
     { key: "split", icon: "vertical_split", label: "Split" },
     { key: "preview", icon: "visibility", label: "Preview" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `relative flex-1 flex flex-col min-h-0 ${className || ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between px-2 py-1.5 border-b border-border/30 bg-background-secondary-solid/50 rounded-t-2xl shrink-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        "button",
-        {
-          onClick: handleToggleFold,
-          className: "p-1 px-2 text-xs font-bold bg-background-secondary-solid border border-border rounded hover:bg-border text-accent-primary transition-colors",
-          title: isAllFolded ? "Expand all" : "Collapse all",
-          children: isAllFolded ? "\u2569" : "\u2566"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center gap-0.5 bg-black/10 dark:bg-white/5 rounded-lg p-0.5", children: modeButtons.map((btn) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-        "button",
-        {
-          onClick: () => setEditorMode(btn.key),
-          className: `flex items-center gap-1 px-2.5 py-1 text-xs rounded-md transition-colors ${editorMode === btn.key ? "bg-accent-primary/20 text-accent-primary font-semibold" : "text-text-secondary hover:text-text-primary hover:bg-white/5"}`,
-          title: btn.label,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "material-symbols-rounded text-sm", children: btn.icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "hidden sm:inline", children: btn.label })
-          ]
-        },
-        btn.key
-      )) })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `nr-editor ${className || ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "nr-editor-toolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "nr-editor-toolbar-left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            onClick: handleToggleFold,
+            className: "nr-toolbar-btn nr-toolbar-btn-fold",
+            title: isAllFolded ? "Expandir todo" : "Colapsar todo",
+            "aria-label": isAllFolded ? "Expandir todo" : "Colapsar todo",
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "material-symbols-rounded", children: isAllFolded ? "unfold_more" : "unfold_less" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "nr-toolbar-divider" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "nr-toolbar-mode-group", children: modeButtons.map((btn) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "button",
+          {
+            onClick: () => setEditorMode(btn.key),
+            className: `nr-toolbar-btn nr-toolbar-btn-mode ${editorMode === btn.key ? "nr-toolbar-btn-mode--active" : ""} ${btn.key === "split" ? "nr-toolbar-btn-split" : ""}`,
+            title: btn.label,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "material-symbols-rounded", children: btn.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "nr-toolbar-label", children: btn.label })
+            ]
+          },
+          btn.key
+        )) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "nr-editor-toolbar-right", children: [
+        onGuide && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "button",
+          {
+            onClick: onGuide,
+            className: "nr-toolbar-btn nr-toolbar-btn-sm nr-toolbar-btn-guide",
+            title: "Gu\xEDa de sintaxis",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "material-symbols-rounded", children: "menu_book" }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "nr-toolbar-label", children: "Gu\xEDa" })
+            ]
+          }
+        ),
+        onGuide && onConfig && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "nr-toolbar-divider" }),
+        onConfig && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "button",
+          {
+            onClick: onConfig,
+            className: "nr-toolbar-btn nr-toolbar-btn-sm nr-toolbar-btn-config",
+            title: "Configurar tema y metadata",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "material-symbols-rounded", children: "tune" }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "nr-toolbar-label", children: "Configurar" })
+            ]
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 min-h-0 flex", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "nr-editor-body", children: [
       (editorMode === "editor" || editorMode === "split") && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "div",
         {
-          className: `${editorMode === "split" ? "w-1/2 border-r border-border/30" : "w-full"} flex-1 flex flex-col min-h-0 min-w-0`,
+          className: `nr-editor-pane ${editorMode === "split" ? "nr-editor-pane--half" : ""}`,
           children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             import_react_codemirror.default,
             {
@@ -2367,8 +2448,8 @@ var NReditor = ({
       (editorMode === "preview" || editorMode === "split") && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "div",
         {
-          className: `${editorMode === "split" ? "w-1/2" : "w-full"} flex-1 min-h-0 overflow-auto min-w-0`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "nr-prose h-full shadow-xs overflow-auto p-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CustomMarkdownRenderer_default, { content: debouncedContent }) })
+          className: `nr-editor-preview ${editorMode === "split" ? "nr-editor-preview--half" : ""}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "nr-editor-prose", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "nr-prose", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CustomMarkdownRenderer_default, { content: debouncedContent }) }) })
         }
       )
     ] })