release(tach-typography): v0.3.0

packages/tach-typography/dist/react/index.js

@@ -23,23 +23,78 @@ var tachTypographyClassName = ({
     className
   );
 };
+
+// src/core/markdown.ts
+var TOKEN_PREFIX = "TACHMDTOKEN";
+var SAFE_HREF_PATTERN = /^(https?:|mailto:|tel:|\/|#)/i;
+var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+var normalizeMarkdown = (value) => value.replace(/\r\n?/g, "\n");
+var sanitizeHref = (value) => {
+  const href = value.trim();
+  if (!href || !SAFE_HREF_PATTERN.test(href)) {
+    return null;
+  }
+  return href;
+};
+var tachTypographyMarkdownToHtml = (markdown) => {
+  const source = normalizeMarkdown(markdown);
+  const tokenMap = /* @__PURE__ */ new Map();
+  let tokenId = 0;
+  const tokenized = source.replace(/`([^`\n]+)`/g, (_match, code) => {
+    const token = `${TOKEN_PREFIX}${tokenId++}`;
+    tokenMap.set(
+      token,
+      `<code class="tach-typography__md-code">${escapeHtml(code)}</code>`
+    );
+    return token;
+  }).replace(/\[([^\]\n]+)\]\(([^)\n]+)\)/g, (_match, label, hrefRaw) => {
+    const token = `${TOKEN_PREFIX}${tokenId++}`;
+    const href = sanitizeHref(hrefRaw);
+    if (!href) {
+      tokenMap.set(token, escapeHtml(label));
+      return token;
+    }
+    tokenMap.set(
+      token,
+      `<a class="tach-typography__md-link" href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(label)}</a>`
+    );
+    return token;
+  });
+  let html = escapeHtml(tokenized).replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>").replace(/__([^_\n]+)__/g, "<strong>$1</strong>").replace(/\*([^*\n]+)\*/g, "<em>$1</em>").replace(/_([^_\n]+)_/g, "<em>$1</em>").replace(/~~([^~\n]+)~~/g, "<del>$1</del>").replace(/\n/g, "<br />");
+  html = html.replace(new RegExp(`${TOKEN_PREFIX}\\d+`, "g"), (token) => tokenMap.get(token) || token);
+  return html;
+};
 var createTypographyVariant = (Component, variant) => {
   const Variant = React.forwardRef(
-    ({ color = "primary", weight = "normal", className, onClick, ...rest }, ref) => /* @__PURE__ */ jsx(
-      Component,
-      {
-        ref,
-        className: tachTypographyClassName({
-          variant,
-          color,
-          weight,
-          className,
-          clickable: Boolean(onClick)
-        }),
-        onClick,
-        ...rest
-      }
-    )
+    ({
+      color = "primary",
+      weight = "normal",
+      className,
+      onClick,
+      markdownEnabled = false,
+      children,
+      ...rest
+    }, ref) => {
+      const markdownHtml = markdownEnabled && typeof children === "string" ? tachTypographyMarkdownToHtml(children) : void 0;
+      const renderedChildren = markdownHtml ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: markdownHtml } }) : children;
+      const contentProps = { children: renderedChildren };
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ref,
+          className: tachTypographyClassName({
+            variant,
+            color,
+            weight,
+            className,
+            clickable: Boolean(onClick)
+          }),
+          onClick,
+          ...rest,
+          ...contentProps
+        }
+      );
+    }
   );
   Variant.displayName = String(variant);
   return Variant;