@noirmd/previewer 1.1.0 → 1.2.0

package/dist/NReditor.d.cts

@@ -10,6 +10,10 @@ interface NReditorProps extends ReactCodeMirrorProps {
     debounceMs?: number;
     /** Inject Tailwind v4 browser CDN for preview. Default: false */
     tailwindCDN?: boolean;
+    /** Called when user clicks Guía */
+    onGuide?: () => void;
+    /** Called when user clicks Configurar */
+    onConfig?: () => void;
 }
 /**
  * NReditor — CodeMirror 6 editor with live markdown preview.
@@ -18,6 +22,7 @@ interface NReditorProps extends ReactCodeMirrorProps {
  * @example
  * ```tsx
  * import NReditor from '@noirmd/previewer/editor';
+ * import '@noirmd/previewer/editor.css';
  * import '@noirmd/previewer/markdown.css';
  *
  * <NReditor value={md} onChange={setMd} />

package/dist/NReditor.d.ts

@@ -10,6 +10,10 @@ interface NReditorProps extends ReactCodeMirrorProps {
     debounceMs?: number;
     /** Inject Tailwind v4 browser CDN for preview. Default: false */
     tailwindCDN?: boolean;
+    /** Called when user clicks Guía */
+    onGuide?: () => void;
+    /** Called when user clicks Configurar */
+    onConfig?: () => void;
 }
 /**
  * NReditor — CodeMirror 6 editor with live markdown preview.
@@ -18,6 +22,7 @@ interface NReditorProps extends ReactCodeMirrorProps {
  * @example
  * ```tsx
  * import NReditor from '@noirmd/previewer/editor';
+ * import '@noirmd/previewer/editor.css';
  * import '@noirmd/previewer/markdown.css';
  *
  * <NReditor value={md} onChange={setMd} />

package/dist/NReditor.js

@@ -313,6 +313,62 @@ function useDebounce(value, delay) {
   return debouncedValue;
 }
 
+// react/useTailwindCDN.ts
+import { useEffect as useEffect2, useRef } from "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 = useRef(false);
+  useEffect2(() => {
+    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
 import React8, { useState as useState4, useEffect as useEffect5, useCallback as useCallback2, useMemo, useId as useId3, useRef as useRef5 } from "react";
 
@@ -408,7 +464,7 @@ function parseHtmlAttrs(attrsString) {
 // core/parser.ts
 function parseMarkdown(markdown2) {
   if (!markdown2) return [];
-  const lines = markdown2.split("\n");
+  const lines = markdown2.replace(/\r\n/g, "\n").replace(/\r/g, "").split("\n");
   const result = [];
   let i = 0;
   while (i < lines.length) {
@@ -735,7 +791,7 @@ function splitSlots(rawContent) {
 }
 
 // react/ui-components.tsx
-import { useState as useState2, useRef } from "react";
+import { useState as useState2, useRef as useRef2 } from "react";
 
 // react/highlightSetup.ts
 import hljs from "highlight.js/lib/core";
@@ -828,7 +884,7 @@ var IconRenderer = ({ iconName, extraClasses = "" }) => {
 };
 var CodeBlock = ({ code, language, title }) => {
   const [copied, setCopied] = useState2(false);
-  const timerRef = useRef(null);
+  const timerRef = useRef2(null);
   const lang = language?.split(/[\s{]/)[0]?.trim() || "";
   let html;
   try {
@@ -1355,7 +1411,7 @@ var WrapperDirective = ({
 var WrapperDirective_default = WrapperDirective;
 
 // react/directives/SlideDirective.tsx
-import { useState as useState3, useEffect as useEffect2, useCallback, useRef as useRef2, useLayoutEffect } from "react";
+import { useState as useState3, useEffect as useEffect3, useCallback, useRef as useRef3, useLayoutEffect } from "react";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var slideCounter = 0;
 var SlideDirective = ({
@@ -1369,7 +1425,7 @@ var SlideDirective = ({
   const [current, setCurrent] = useState3(0);
   const interval = parseInt(props.interval || "3000", 10);
   const speed = parseInt(props.speed || "500", 10);
-  const elRefs = useRef2([]);
+  const elRefs = useRef3([]);
   const [maxH, setMaxH] = useState3(0);
   useLayoutEffect(() => {
     let h = 0;
@@ -1382,7 +1438,7 @@ var SlideDirective = ({
     if (elements.length <= 1) return;
     setCurrent((prev) => (prev + 1) % elements.length);
   }, [elements.length]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (elements.length <= 1) return;
     const id = setInterval(cycle, interval);
     return () => clearInterval(id);
@@ -1506,15 +1562,6 @@ var DirectiveRenderer_default = DirectiveRenderer;
 
 // react/RawHtmlRenderer.tsx
 import { useRef as useRef4, useEffect as useEffect4 } from "react";
-
-// react/useTailwindCDN.ts
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
-function scanTailwindCDN() {
-  const tw = window.tailwind;
-  if (tw?.scan) tw.scan();
-}
-
-// react/RawHtmlRenderer.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
 var RawHtmlRenderer = ({
   content,
@@ -2228,12 +2275,15 @@ var NReditor = ({
   onChange,
   className,
   debounceMs = 300,
-  tailwindCDN = false
+  tailwindCDN = false,
+  onGuide,
+  onConfig
 }) => {
   const editorRef = useRef6(null);
   const [isAllFolded, setIsAllFolded] = useState5(false);
   const [editorMode, setEditorMode] = useState5("editor");
   const debouncedContent = useDebounce(value, debounceMs);
+  useLazyTailwindCDN(tailwindCDN);
   const handleToggleFold = () => {
     if (!editorRef.current) return;
     if (isAllFolded) {
@@ -2281,36 +2331,67 @@ var NReditor = ({
     { key: "split", icon: "vertical_split", label: "Split" },
     { key: "preview", icon: "visibility", label: "Preview" }
   ];
-  return /* @__PURE__ */ jsxs8("div", { className: `relative flex-1 flex flex-col min-h-0 ${className || ""}`, children: [
-    /* @__PURE__ */ jsxs8("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__ */ jsx13(
-        "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__ */ jsx13("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__ */ jsxs8(
-        "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__ */ jsx13("span", { className: "material-symbols-rounded text-sm", children: btn.icon }),
-            /* @__PURE__ */ jsx13("span", { className: "hidden sm:inline", children: btn.label })
-          ]
-        },
-        btn.key
-      )) })
+  return /* @__PURE__ */ jsxs8("div", { className: `nr-editor ${className || ""}`, children: [
+    /* @__PURE__ */ jsxs8("div", { className: "nr-editor-toolbar", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "nr-editor-toolbar-left", children: [
+        /* @__PURE__ */ jsx13(
+          "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__ */ jsx13("span", { className: "material-symbols-rounded", children: isAllFolded ? "unfold_more" : "unfold_less" })
+          }
+        ),
+        /* @__PURE__ */ jsx13("div", { className: "nr-toolbar-divider" }),
+        /* @__PURE__ */ jsx13("div", { className: "nr-toolbar-mode-group", children: modeButtons.map((btn) => /* @__PURE__ */ jsxs8(
+          "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__ */ jsx13("span", { className: "material-symbols-rounded", children: btn.icon }),
+              /* @__PURE__ */ jsx13("span", { className: "nr-toolbar-label", children: btn.label })
+            ]
+          },
+          btn.key
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs8("div", { className: "nr-editor-toolbar-right", children: [
+        onGuide && /* @__PURE__ */ jsxs8(
+          "button",
+          {
+            onClick: onGuide,
+            className: "nr-toolbar-btn nr-toolbar-btn-sm nr-toolbar-btn-guide",
+            title: "Gu\xEDa de sintaxis",
+            children: [
+              /* @__PURE__ */ jsx13("span", { className: "material-symbols-rounded", children: "menu_book" }),
+              /* @__PURE__ */ jsx13("span", { className: "nr-toolbar-label", children: "Gu\xEDa" })
+            ]
+          }
+        ),
+        onGuide && onConfig && /* @__PURE__ */ jsx13("div", { className: "nr-toolbar-divider" }),
+        onConfig && /* @__PURE__ */ jsxs8(
+          "button",
+          {
+            onClick: onConfig,
+            className: "nr-toolbar-btn nr-toolbar-btn-sm nr-toolbar-btn-config",
+            title: "Configurar tema y metadata",
+            children: [
+              /* @__PURE__ */ jsx13("span", { className: "material-symbols-rounded", children: "tune" }),
+              /* @__PURE__ */ jsx13("span", { className: "nr-toolbar-label", children: "Configurar" })
+            ]
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "flex-1 min-h-0 flex", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "nr-editor-body", children: [
       (editorMode === "editor" || editorMode === "split") && /* @__PURE__ */ jsx13(
         "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__ */ jsx13(
             CodeMirror,
             {
@@ -2333,8 +2414,8 @@ var NReditor = ({
       (editorMode === "preview" || editorMode === "split") && /* @__PURE__ */ jsx13(
         "div",
         {
-          className: `${editorMode === "split" ? "w-1/2" : "w-full"} flex-1 min-h-0 overflow-auto min-w-0`,
-          children: /* @__PURE__ */ jsx13("div", { className: "nr-prose h-full shadow-xs overflow-auto p-4", children: /* @__PURE__ */ jsx13(CustomMarkdownRenderer_default, { content: debouncedContent }) })
+          className: `nr-editor-preview ${editorMode === "split" ? "nr-editor-preview--half" : ""}`,
+          children: /* @__PURE__ */ jsx13("div", { className: "nr-editor-prose", children: /* @__PURE__ */ jsx13("div", { className: "nr-prose", children: /* @__PURE__ */ jsx13(CustomMarkdownRenderer_default, { content: debouncedContent }) }) })
         }
       )
     ] })