npm - @particle-academy/react-fancy - Versions diffs - 2.4.0 → 2.5.0 - Mend

@particle-academy/react-fancy 2.4.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.cjs CHANGED Viewed

@@ -322,6 +322,80 @@ function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+// src/utils/sanitize.ts
+var DANGEROUS_TAGS = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "iframe",
+  "object",
+  "embed",
+  "link",
+  "meta",
+  "base",
+  "form"
+]);
+var URL_ATTRS = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "xlink:href"]);
+var SAFE_PROTOCOL = /^(?:https?:|mailto:|tel:|sms:|ftp:|#|\/|\.\/|\.\.\/|[^:]*$)/i;
+function sanitizeHref(href) {
+  if (href == null) return void 0;
+  const trimmed = href.trim();
+  if (!trimmed) return void 0;
+  return SAFE_PROTOCOL.test(trimmed) ? trimmed : void 0;
+}
+function stripDangerousAttrs(el) {
+  const names = [];
+  for (let i = 0; i < el.attributes.length; i++) {
+    names.push(el.attributes[i].name);
+  }
+  for (const name of names) {
+    const lower = name.toLowerCase();
+    if (lower.startsWith("on")) {
+      el.removeAttribute(name);
+      continue;
+    }
+    if (URL_ATTRS.has(lower)) {
+      const sanitized = sanitizeHref(el.getAttribute(name));
+      if (sanitized === void 0) {
+        el.removeAttribute(name);
+      } else {
+        el.setAttribute(name, sanitized);
+      }
+      continue;
+    }
+    if (lower === "srcdoc") {
+      el.removeAttribute(name);
+    }
+  }
+}
+function walk(el, removeQueue) {
+  const tag = el.tagName.toLowerCase();
+  if (DANGEROUS_TAGS.has(tag)) {
+    removeQueue.push(el);
+    return;
+  }
+  stripDangerousAttrs(el);
+  const children = Array.from(el.children);
+  for (const child of children) {
+    walk(child, removeQueue);
+  }
+}
+function sanitizeHtml(html) {
+  if (typeof window === "undefined" || typeof DOMParser === "undefined") {
+    return html;
+  }
+  const doc = new DOMParser().parseFromString(`<body>${html}</body>`, "text/html");
+  const body = doc.body;
+  if (!body) return html;
+  const removeQueue = [];
+  for (const child of Array.from(body.children)) {
+    walk(child, removeQueue);
+  }
+  for (const el of removeQueue) {
+    el.parentNode?.removeChild(el);
+  }
+  return body.innerHTML;
+}
 // src/data/emoji-data.ts
 var EMOJI_CATEGORY_ORDER = [
   "smileys",
@@ -2721,7 +2795,8 @@ var Action = react.forwardRef(
       children != null && /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
       trailingElements
     ] });
-    const buttonEl = href && !disabled ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: classes, "data-react-fancy-action": "", children: content }) : /* @__PURE__ */ jsxRuntime.jsx(
+    const safeHref = sanitizeHref(href);
+    const buttonEl = safeHref && !disabled ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: safeHref, className: classes, "data-react-fancy-action": "", children: content }) : /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         ref,
@@ -10387,13 +10462,15 @@ function mergeExtensions(instanceExtensions) {
   }
   return merged;
 }
-function toHtml(value, outputFormat) {
+function toHtml(value, outputFormat, unsafe) {
   if (!value) return "";
-  if (outputFormat === "html") return value;
-  const format = detectFormat(value);
-  if (format === "html") return value;
-  const result = marked.marked.parse(value, { async: false });
-  return result.trim();
+  const raw = (() => {
+    if (outputFormat === "html") return value;
+    const format = detectFormat(value);
+    if (format === "html") return value;
+    return marked.marked.parse(value, { async: false }).trim();
+  })();
+  return unsafe ? raw : sanitizeHtml(raw);
 }
 function EditorRoot({
   children,
@@ -10404,12 +10481,13 @@ function EditorRoot({
   outputFormat = "html",
   lineSpacing = 1.6,
   placeholder,
-  extensions: instanceExtensions
+  extensions: instanceExtensions,
+  unsafe = false
 }) {
   const contentRef = react.useRef(null);
   const [, setValue] = useControllableState(controlledValue, defaultValue, onChange);
   const initialHtml = react.useMemo(
-    () => toHtml(controlledValue ?? defaultValue, outputFormat),
+    () => toHtml(controlledValue ?? defaultValue, outputFormat, unsafe),
     // Only compute once on mount — don't re-run when value changes from user input
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
@@ -10494,7 +10572,11 @@ var Editor = Object.assign(EditorRoot, {
   Toolbar: ToolbarWithSeparator,
   Content: EditorContent
 });
-function RenderedContent({ html, extensions: instanceExtensions }) {
+function RenderedContent({
+  html,
+  extensions: instanceExtensions,
+  unsafe = false
+}) {
   const extensions = react.useMemo(
     () => mergeExtensions(instanceExtensions),
     [instanceExtensions]
@@ -10503,15 +10585,16 @@ function RenderedContent({ html, extensions: instanceExtensions }) {
     () => parseSegments(html, extensions),
     [html, extensions]
   );
+  const renderHtml = (content) => unsafe ? content : sanitizeHtml(content);
   if (segments.length === 1 && segments[0].type === "html") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: segments[0].content } });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: renderHtml(segments[0].content) } });
   }
   if (segments.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: segments.map((segment, i) => {
     if (segment.type === "html") {
-      return segment.content ? /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: segment.content } }, i) : null;
+      return segment.content ? /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: renderHtml(segment.content) } }, i) : null;
     }
     const ext = extensions.find(
       (e) => e.tag.toLowerCase() === segment.tag
@@ -10529,7 +10612,8 @@ function ContentRenderer({
   format = "auto",
   lineSpacing = 1.6,
   className,
-  extensions: instanceExtensions
+  extensions: instanceExtensions,
+  unsafe = false
 }) {
   const extensions = react.useMemo(
     () => mergeExtensions(instanceExtensions),
@@ -10537,11 +10621,9 @@ function ContentRenderer({
   );
   const html = react.useMemo(() => {
     const resolvedFormat = format === "auto" ? detectFormat(value) : format;
-    if (resolvedFormat === "markdown") {
-      return marked.marked.parse(value, { async: false });
-    }
-    return value;
-  }, [value, format]);
+    const raw = resolvedFormat === "markdown" ? marked.marked.parse(value, { async: false }) : value;
+    return unsafe ? raw : sanitizeHtml(raw);
+  }, [value, format, unsafe]);
   const hasExtensions = extensions.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -10549,7 +10631,7 @@ function ContentRenderer({
       "data-react-fancy-content-renderer": "",
       style: { lineHeight: lineSpacing },
       className: cn("text-sm", proseClasses, className),
-      children: hasExtensions ? /* @__PURE__ */ jsxRuntime.jsx(RenderedContent, { html, extensions }) : /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: html } })
+      children: hasExtensions ? /* @__PURE__ */ jsxRuntime.jsx(RenderedContent, { html, extensions, unsafe }) : /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: html } })
     }
   );
 }
@@ -12565,6 +12647,8 @@ exports.registerExtensions = registerExtensions;
 exports.registerIconSet = registerIconSet;
 exports.registerIcons = registerIcons;
 exports.resolve = resolve;
+exports.sanitizeHref = sanitizeHref;
+exports.sanitizeHtml = sanitizeHtml;
 exports.search = search;
 exports.skinTones = skinTones;
 exports.useAccordion = useAccordion;