@noirmd/previewer 2.0.0 → 2.0.1

package/dist/NReditor.js

@@ -315,6 +315,75 @@ function useDebounce(value, delay) {
 
 // react/useTailwindCDN.ts
 import { useEffect as useEffect2, useRef } from "react";
+
+// vanilla/tailwindTheme.ts
+var THEME_STYLE_ID = "nr-tailwind-theme";
+var NR_THEME_CSS = `
+@theme {
+  --color-primary: var(--color-accent-primary, oklch(var(--p, 55% 0.3 240) / 1));
+  --color-primary-content: #ffffff;
+  --color-secondary: oklch(var(--s, 55% 0.25 200) / 1);
+  --color-secondary-content: #ffffff;
+  --color-accent: var(--color-accent-primary, oklch(var(--a, 65% 0.25 160) / 1));
+  --color-accent-content: #ffffff;
+  --color-neutral: oklch(var(--n, 50% 0.05 240) / 1);
+  --color-neutral-content: var(--color-text-primary, oklch(var(--nc, 92% 0.02 240) / 1));
+  --color-base-100: var(--color-background-primary, oklch(var(--b1, 15% 0.01 260) / 1));
+  --color-base-200: var(--color-background-secondary-solid, oklch(var(--b2, 20% 0.02 260) / 1));
+  --color-base-300: var(--color-border, oklch(var(--b3, 25% 0.03 260) / 1));
+  --color-base-content: var(--color-text-primary, oklch(var(--bc, 92% 0.02 260) / 1));
+  --color-info: oklch(var(--in, 70% 0.2 220) / 1);
+  --color-info-content: #ffffff;
+  --color-success: oklch(var(--su, 65% 0.25 140) / 1);
+  --color-success-content: #ffffff;
+  --color-warning: oklch(var(--wa, 80% 0.25 80) / 1);
+  --color-warning-content: #1f2937;
+  --color-error: oklch(var(--er, 65% 0.3 30) / 1);
+  --color-error-content: #ffffff;
+}
+`;
+function getVar(root, name) {
+  return getComputedStyle(root).getPropertyValue(name).trim();
+}
+function stylesheetHasTheme() {
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules = null;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (!rules) continue;
+    for (const rule of Array.from(rules)) {
+      const css2 = rule.cssText || "";
+      if (css2.includes("@theme") || css2.includes('@plugin "daisyui"')) return true;
+    }
+  }
+  return false;
+}
+function hasHostTheme() {
+  if (typeof window === "undefined" || typeof document === "undefined") return true;
+  if (getVar(document.documentElement, "--color-primary")) return true;
+  if (getVar(document.documentElement, "--color-base-100")) return true;
+  if (document.body && (getVar(document.body, "--color-primary") || getVar(document.body, "--color-base-100"))) return true;
+  return stylesheetHasTheme();
+}
+function injectNRTailwindTheme() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(THEME_STYLE_ID)) return;
+  if (hasHostTheme()) return;
+  const style = document.createElement("style");
+  style.id = THEME_STYLE_ID;
+  style.setAttribute("type", "text/tailwindcss");
+  style.textContent = NR_THEME_CSS;
+  document.head.appendChild(style);
+}
+function removeNRTailwindTheme() {
+  if (typeof document === "undefined") return;
+  document.getElementById(THEME_STYLE_ID)?.remove();
+}
+
+// react/useTailwindCDN.ts
 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";
@@ -334,6 +403,7 @@ function useLazyTailwindCDN(enabled) {
       if ((window.__twCDNRefs ?? 0) <= 0) {
         document.getElementById(SCRIPT_ID)?.remove();
         document.getElementById(CONFIG_ID)?.remove();
+        removeNRTailwindTheme();
         window.__twCDNRefs = 0;
         loadedRef.current = false;
       }
@@ -346,6 +416,7 @@ function useLazyTailwindCDN(enabled) {
       configScript.textContent = TAILWIND_CDN_CONFIG;
       document.head.appendChild(configScript);
     }
+    injectNRTailwindTheme();
     if (!document.getElementById(SCRIPT_ID)) {
       const script = document.createElement("script");
       script.id = SCRIPT_ID;
@@ -358,6 +429,7 @@ function useLazyTailwindCDN(enabled) {
       if ((window.__twCDNRefs ?? 0) <= 0) {
         document.getElementById(SCRIPT_ID)?.remove();
         document.getElementById(CONFIG_ID)?.remove();
+        removeNRTailwindTheme();
         window.__twCDNRefs = 0;
         loadedRef.current = false;
       }
@@ -1248,7 +1320,10 @@ var modalDirective = ({ props, renderSlot }) => {
   const dialog = createModal(modalTitle);
   const body = dialog.querySelector(".nr-modal__body");
   if (body) {
-    body.appendChild(renderSlot("default"));
+    const prose = document.createElement("div");
+    prose.className = "nr-prose";
+    prose.appendChild(renderSlot("default"));
+    body.appendChild(prose);
   }
   btn.addEventListener("click", () => {
     if (!dialog.open) {
@@ -1402,8 +1477,10 @@ var cardDirective = ({
     const dialog = createModal(title || "Detalles");
     const modalBody = dialog.querySelector(".nr-modal__body");
     if (modalBody) {
-      const contentSlot = renderSlot("content") || renderSlot("default");
-      modalBody.appendChild(contentSlot);
+      const prose = document.createElement("div");
+      prose.className = "nr-prose";
+      prose.appendChild(renderSlot("content") || renderSlot("default"));
+      modalBody.appendChild(prose);
     }
     card.addEventListener("click", () => {
       if (!dialog.open) {