hazo_ui 3.1.3 → 3.2.0

package/CHANGE_LOG.md

@@ -5,6 +5,42 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v3.2.0 — 2026-05-31
+
+**New:** `MarkdownEditor` — a generic, SSR-safe Markdown/MDX editor.
+
+hazo_ui is now the home of *all* editors: Tiptap (`HazoUiRte`) for WYSIWYG, and
+the new `MarkdownEditor` for Markdown/MDX authoring. It wraps
+`@uiw/react-md-editor` but stays framework-agnostic — it lazy-loads the
+underlying editor on the client only (no `next/dynamic`), so it is safe to
+render in any SSR framework. It knows nothing about any specific domain; host
+packages inject their own toolbar embeds, image-upload handler, and an optional
+custom preview renderer (e.g. an MDX renderer).
+
+```ts
+import { MarkdownEditor, type MarkdownEmbed } from "hazo_ui";
+
+const embeds: MarkdownEmbed[] = [
+  { name: "youtube", label: "YT", snippet: '<YouTube id="" />' },
+  { name: "callout", label: "Note",
+    snippet: (sel) => `<Callout type="info">\n${sel}\n</Callout>` },
+];
+
+<MarkdownEditor
+  value={value}
+  onChange={setValue}
+  embeds={embeds}
+  onImageUpload={(file) => uploadAndReturnUrl(file)}   // paste-to-upload
+  renderPreview={(src) => <MyMdxPreview source={src} />} // optional
+/>
+```
+
+The editor's CSS is resolved by the consumer's bundler (it is externalized in
+the build), so the `@uiw` styles only ship when `MarkdownEditor` is actually
+imported. The first consumer is `hazo_blog`.
+
+New dependency: `@uiw/react-md-editor@^4.1.0`.
+
 ## v3.1.3 — 2026-05-30
 
 **New:** `hazo_ui/utils` sub-export carrying pure helpers without the

package/README.md

@@ -5,9 +5,11 @@ A set of UI components for common interaction elements in a SaaS app.
 ## Installation
 
 ```bash
-npm install hazo_ui
+npm install hazo_ui hazo_core
 ```
 
+`hazo_core` is a required peer dependency (used for the logger, correlation-ID provider, and shared utilities). `react` and `react-dom` are also peer dependencies — install them if your app doesn't already have them.
+
 ## Quick Setup (Required)
 
 hazo_ui uses Tailwind CSS and CSS variables for styling. Follow these two steps:

package/dist/index.cjs

@@ -55,6 +55,9 @@ var lu = require('react-icons/lu');
 var rx = require('react-icons/rx');
 var core = require('@tiptap/core');
 var TabsPrimitive = require('@radix-ui/react-tabs');
+var reactMdEditor = require('@uiw/react-md-editor');
+require('@uiw/react-md-editor/markdown-editor.css');
+require('@uiw/react-markdown-preview/markdown.css');
 var Suggestion = require('@tiptap/suggestion');
 var state = require('@tiptap/pm/state');
 var reactDom = require('react-dom');
@@ -4541,6 +4544,165 @@ var HazoUiRte = ({
   );
 };
 HazoUiRte.displayName = "HazoUiRte";
+var MdEditorLazy = React26.lazy(() => import('@uiw/react-md-editor'));
+var EDITOR_TEXTAREA_SELECTOR = ".w-md-editor-text-input";
+function MarkdownEditor({
+  value,
+  onChange,
+  height = 600,
+  placeholder = "Write in Markdown\u2026",
+  className,
+  colorMode = "light",
+  preview = "edit",
+  embeds,
+  extraCommands,
+  onImageUpload,
+  renderPreview,
+  showPreview = true
+}) {
+  const [mounted, setMounted] = React26.useState(false);
+  React26.useEffect(() => setMounted(true), []);
+  const valueRef = React26.useRef(value);
+  valueRef.current = value;
+  const wrapperRef = React26.useRef(null);
+  const [uploading, setUploading] = React26.useState(false);
+  const [error, setError] = React26.useState("");
+  function insertAtCursor(text) {
+    const textarea = wrapperRef.current?.querySelector(
+      EDITOR_TEXTAREA_SELECTOR
+    );
+    const current = valueRef.current;
+    if (!textarea) {
+      const sep = current === "" || current.endsWith("\n") ? "" : "\n";
+      onChange(current + sep + text + "\n");
+      return;
+    }
+    const start = textarea.selectionStart ?? current.length;
+    const end = textarea.selectionEnd ?? start;
+    onChange(current.slice(0, start) + text + current.slice(end));
+  }
+  const embedCommands = React26.useMemo(() => {
+    return (embeds ?? []).map((embed) => ({
+      name: embed.name,
+      keyCommand: embed.name,
+      buttonProps: { "aria-label": embed.label, title: embed.label },
+      icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold", children: embed.icon ?? embed.label }),
+      execute: () => {
+        const textarea = wrapperRef.current?.querySelector(
+          EDITOR_TEXTAREA_SELECTOR
+        );
+        const current = valueRef.current;
+        const start = textarea?.selectionStart ?? current.length;
+        const end = textarea?.selectionEnd ?? start;
+        const selected = current.slice(start, end);
+        const snippet = typeof embed.snippet === "function" ? embed.snippet(selected) : embed.snippet;
+        insertAtCursor(snippet);
+      }
+    }));
+  }, [embeds]);
+  const editorCommands = React26.useMemo(() => {
+    const defaults = reactMdEditor.commands.getCommands();
+    const extras = [...embedCommands, ...extraCommands ?? []];
+    if (extras.length === 0) return defaults;
+    const imageIndex = defaults.findIndex((c) => c.name === "image");
+    if (imageIndex < 0) return [...defaults, ...extras];
+    const next = [...defaults];
+    next.splice(imageIndex + 1, 0, ...extras);
+    return next;
+  }, [embedCommands, extraCommands]);
+  async function handlePaste(e) {
+    if (!onImageUpload) return;
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    const imageItem = Array.from(items).find(
+      (it) => it.kind === "file" && it.type.startsWith("image/")
+    );
+    if (!imageItem) return;
+    const file = imageItem.getAsFile();
+    if (!file) return;
+    e.preventDefault();
+    const textarea = e.currentTarget;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const current = valueRef.current;
+    const before = current.slice(0, start);
+    const after = current.slice(end);
+    onChange(before + "![uploading\u2026]()" + after);
+    setUploading(true);
+    setError("");
+    try {
+      const url = await onImageUpload(file);
+      if (!url) {
+        setError("Upload failed.");
+        onChange(before + after);
+        return;
+      }
+      onChange(before + `![](${url})` + after);
+    } catch {
+      setError("Upload failed.");
+      onChange(before + after);
+    } finally {
+      setUploading(false);
+    }
+  }
+  const useCustomPreview = typeof renderPreview === "function";
+  const effectivePreview = useCustomPreview ? "edit" : preview;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex gap-4",
+        "data-color-mode": colorMode,
+        ref: wrapperRef,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: useCustomPreview && showPreview ? "flex-1 min-w-0" : "w-full", children: mounted ? /* @__PURE__ */ jsxRuntime.jsx(
+            React26.Suspense,
+            {
+              fallback: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "flex items-center justify-center rounded-md border border-border bg-muted/30 text-sm text-muted-foreground",
+                  style: { height },
+                  children: "Loading editor\u2026"
+                }
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                MdEditorLazy,
+                {
+                  value,
+                  onChange: (v) => onChange(v ?? ""),
+                  height,
+                  preview: effectivePreview,
+                  visibleDragbar: false,
+                  commands: editorCommands,
+                  textareaProps: { placeholder, onPaste: handlePaste }
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "flex items-center justify-center rounded-md border border-border bg-muted/30 text-sm text-muted-foreground",
+              style: { height },
+              children: "Loading editor\u2026"
+            }
+          ) }),
+          useCustomPreview && showPreview && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "flex-1 min-w-0 overflow-auto rounded-md border border-border bg-background p-6",
+              style: { height },
+              children: renderPreview(value)
+            }
+          )
+        ]
+      }
+    ),
+    uploading && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: "Uploading image\u2026" }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-destructive", children: error })
+  ] });
+}
+MarkdownEditor.displayName = "MarkdownEditor";
 var generate_command_id = () => {
   return `cmd_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
 };
@@ -10641,6 +10803,7 @@ exports.InverseSparkline = InverseSparkline;
 exports.Label = Label3;
 exports.LineChart = LineChart;
 exports.LoadingTimeout = LoadingTimeout;
+exports.MarkdownEditor = MarkdownEditor;
 exports.MultiLineChart = MultiLineChart;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;