@burdenoff/microfe-store 2026.720.2 → 2026.720.3

package/dist/components/MarkdownEditor.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from 'react';
+
+export interface MarkdownEditorProps {
+    id?: string;
+    value: string;
+    onChange: (value: string) => void;
+    label?: ReactNode;
+    placeholder?: string;
+    rows?: number;
+    className?: string;
+}
+export declare const MarkdownEditor: FC<MarkdownEditorProps>;

package/dist/components/MarkdownEditor.js

@@ -0,0 +1,117 @@
+import { useMemo as e, useRef as t, useState as n } from "react";
+import { Markdown as r } from "@burdenoff/fe-libs/shared/components";
+import { Bold as i, Code as a, Italic as o, Link as s, List as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/MarkdownEditor.tsx
+var d = (e, t, n = t) => {
+	let r = e.current;
+	if (!r) return;
+	let { selectionStart: i, selectionEnd: a, value: o } = r, s = o.slice(0, i), c = o.slice(i, a), l = o.slice(a);
+	r.value = `${s}${`${t}${c}${n}`}${l}`, r.focus();
+	let u = i + (c.length === 0 ? t.length : c.length + t.length);
+	r.setSelectionRange(u, u), r.dispatchEvent(new Event("input", { bubbles: !0 }));
+}, f = (e, t) => {
+	let n = e.current;
+	if (!n) return;
+	let { selectionStart: r, selectionEnd: i, value: a } = n, o = a.slice(0, r), s = a.slice(r, i), c = a.slice(i), l = s.split("\n"), u = l.every((e) => e === "" || e.startsWith(t)) ? l.map((e) => e.startsWith(t) ? e.slice(t.length) : e).join("\n") : l.map((e) => `${t}${e}`).join("\n");
+	n.value = `${o}${u}${c}`, n.focus();
+	let d = r, f = r + u.length;
+	n.setSelectionRange(d, f), n.dispatchEvent(new Event("input", { bubbles: !0 }));
+}, p = ({ id: p, value: m, onChange: h, label: g, placeholder: _, rows: v = 5, className: y = "" }) => {
+	let b = t(null), [x, S] = n("write"), C = (e) => `rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${x === e ? "bg-surface-accent text-text-on-accent" : "text-text-secondary hover:bg-surface-hover hover:text-text-primary"}`, w = "inline-flex items-center justify-center rounded-md p-1.5 text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary", T = e(() => m, [m]);
+	return /* @__PURE__ */ u("div", {
+		className: `space-y-2 ${y}`,
+		children: [g && /* @__PURE__ */ l("label", {
+			htmlFor: p,
+			className: "block text-xs text-text-secondary",
+			children: g
+		}), /* @__PURE__ */ u("div", {
+			className: "overflow-hidden rounded-lg border border-border-default bg-surface-default",
+			children: [/* @__PURE__ */ u("div", {
+				className: "flex items-center justify-between border-b border-border-default px-2 py-1.5",
+				children: [/* @__PURE__ */ u("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ l("button", {
+						type: "button",
+						onClick: () => S("write"),
+						className: C("write"),
+						"aria-pressed": x === "write",
+						children: "Write"
+					}), /* @__PURE__ */ l("button", {
+						type: "button",
+						onClick: () => S("preview"),
+						className: C("preview"),
+						"aria-pressed": x === "preview",
+						children: "Preview"
+					})]
+				}), /* @__PURE__ */ u("div", {
+					className: "flex items-center gap-0.5",
+					"aria-label": "Markdown formatting",
+					children: [
+						/* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: () => d(b, "**"),
+							className: w,
+							title: "Bold",
+							"aria-label": "Bold",
+							children: /* @__PURE__ */ l(i, { className: "size-3.5" })
+						}),
+						/* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: () => d(b, "_"),
+							className: w,
+							title: "Italic",
+							"aria-label": "Italic",
+							children: /* @__PURE__ */ l(o, { className: "size-3.5" })
+						}),
+						/* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: () => d(b, "[", "](url)"),
+							className: w,
+							title: "Link",
+							"aria-label": "Link",
+							children: /* @__PURE__ */ l(s, { className: "size-3.5" })
+						}),
+						/* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: () => d(b, "`"),
+							className: w,
+							title: "Inline code",
+							"aria-label": "Inline code",
+							children: /* @__PURE__ */ l(a, { className: "size-3.5" })
+						}),
+						/* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: () => f(b, "- "),
+							className: w,
+							title: "Bullet list",
+							"aria-label": "Bullet list",
+							children: /* @__PURE__ */ l(c, { className: "size-3.5" })
+						})
+					]
+				})]
+			}), x === "write" ? /* @__PURE__ */ l("textarea", {
+				ref: b,
+				id: p,
+				value: m,
+				onChange: (e) => h(e.target.value),
+				placeholder: _,
+				rows: v,
+				className: "w-full resize-y bg-surface-default px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"
+			}) : /* @__PURE__ */ l("div", {
+				className: "min-h-[theme(spacing.32)] bg-surface-default px-3 py-2",
+				children: m.trim() ? /* @__PURE__ */ l(r, {
+					className: "text-sm text-text-primary",
+					children: T
+				}) : /* @__PURE__ */ l("p", {
+					className: "text-sm text-text-muted italic",
+					children: "Nothing to preview."
+				})
+			})]
+		})]
+	});
+};
+//#endregion
+export { p as MarkdownEditor };
+
+//# sourceMappingURL=MarkdownEditor.js.map

package/dist/components/MarkdownEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownEditor.js","names":[],"sources":["../../src/components/MarkdownEditor.tsx"],"sourcesContent":["import type { FC, ReactNode, RefObject } from 'react';\nimport { useMemo, useRef, useState } from 'react';\nimport { Bold, Italic, Link, Code, List } from 'lucide-react';\nimport { Markdown } from '@burdenoff/fe-libs/shared/components';\n\nexport interface MarkdownEditorProps {\n  id?: string;\n  value: string;\n  onChange: (value: string) => void;\n  label?: ReactNode;\n  placeholder?: string;\n  rows?: number;\n  className?: string;\n}\n\ntype Tab = 'write' | 'preview';\n\nconst applyWrap = (\n  textareaRef: RefObject<HTMLTextAreaElement | null>,\n  prefix: string,\n  suffix: string = prefix\n) => {\n  const el = textareaRef.current;\n  if (!el) return;\n\n  const { selectionStart, selectionEnd, value } = el;\n  const before = value.slice(0, selectionStart);\n  const selected = value.slice(selectionStart, selectionEnd);\n  const after = value.slice(selectionEnd);\n\n  const replacement = `${prefix}${selected}${suffix}`;\n  const nextValue = `${before}${replacement}${after}`;\n\n  el.value = nextValue;\n  el.focus();\n\n  const cursorOffset = selected.length === 0 ? prefix.length : selected.length + prefix.length;\n  const nextCursor = selectionStart + cursorOffset;\n  el.setSelectionRange(nextCursor, nextCursor);\n\n  // Dispatch an input event so parent onChange handlers are notified.\n  el.dispatchEvent(new Event('input', { bubbles: true }));\n};\n\nconst applyLinePrefix = (textareaRef: RefObject<HTMLTextAreaElement | null>, prefix: string) => {\n  const el = textareaRef.current;\n  if (!el) return;\n\n  const { selectionStart, selectionEnd, value } = el;\n  const before = value.slice(0, selectionStart);\n  const selected = value.slice(selectionStart, selectionEnd);\n  const after = value.slice(selectionEnd);\n\n  const lines = selected.split('\\n');\n  const prefixedLines = lines.every((line) => line === '' || line.startsWith(prefix))\n    ? lines.map((line) => (line.startsWith(prefix) ? line.slice(prefix.length) : line)).join('\\n')\n    : lines.map((line) => `${prefix}${line}`).join('\\n');\n\n  const replacement = prefixedLines;\n  const nextValue = `${before}${replacement}${after}`;\n\n  el.value = nextValue;\n  el.focus();\n\n  const nextCursorStart = selectionStart;\n  const nextCursorEnd = selectionStart + replacement.length;\n  el.setSelectionRange(nextCursorStart, nextCursorEnd);\n\n  el.dispatchEvent(new Event('input', { bubbles: true }));\n};\n\nexport const MarkdownEditor: FC<MarkdownEditorProps> = ({\n  id,\n  value,\n  onChange,\n  label,\n  placeholder,\n  rows = 5,\n  className = '',\n}) => {\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const [activeTab, setActiveTab] = useState<Tab>('write');\n\n  const tabButtonClass = (tab: Tab) =>\n    `rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${\n      activeTab === tab\n        ? 'bg-surface-accent text-text-on-accent'\n        : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'\n    }`;\n\n  const toolbarButtonClass =\n    'inline-flex items-center justify-center rounded-md p-1.5 text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary';\n\n  const memoizedValue = useMemo(() => value, [value]);\n\n  return (\n    <div className={`space-y-2 ${className}`}>\n      {label && (\n        <label htmlFor={id} className=\"block text-xs text-text-secondary\">\n          {label}\n        </label>\n      )}\n\n      <div className=\"overflow-hidden rounded-lg border border-border-default bg-surface-default\">\n        <div className=\"flex items-center justify-between border-b border-border-default px-2 py-1.5\">\n          <div className=\"flex items-center gap-1\">\n            <button\n              type=\"button\"\n              onClick={() => setActiveTab('write')}\n              className={tabButtonClass('write')}\n              aria-pressed={activeTab === 'write'}\n            >\n              Write\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => setActiveTab('preview')}\n              className={tabButtonClass('preview')}\n              aria-pressed={activeTab === 'preview'}\n            >\n              Preview\n            </button>\n          </div>\n\n          <div className=\"flex items-center gap-0.5\" aria-label=\"Markdown formatting\">\n            <button\n              type=\"button\"\n              onClick={() => applyWrap(textareaRef, '**')}\n              className={toolbarButtonClass}\n              title=\"Bold\"\n              aria-label=\"Bold\"\n            >\n              <Bold className=\"size-3.5\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => applyWrap(textareaRef, '_')}\n              className={toolbarButtonClass}\n              title=\"Italic\"\n              aria-label=\"Italic\"\n            >\n              <Italic className=\"size-3.5\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => applyWrap(textareaRef, '[', '](url)')}\n              className={toolbarButtonClass}\n              title=\"Link\"\n              aria-label=\"Link\"\n            >\n              <Link className=\"size-3.5\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => applyWrap(textareaRef, '`')}\n              className={toolbarButtonClass}\n              title=\"Inline code\"\n              aria-label=\"Inline code\"\n            >\n              <Code className=\"size-3.5\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => applyLinePrefix(textareaRef, '- ')}\n              className={toolbarButtonClass}\n              title=\"Bullet list\"\n              aria-label=\"Bullet list\"\n            >\n              <List className=\"size-3.5\" />\n            </button>\n          </div>\n        </div>\n\n        {activeTab === 'write' ? (\n          <textarea\n            ref={textareaRef}\n            id={id}\n            value={value}\n            onChange={(e) => onChange(e.target.value)}\n            placeholder={placeholder}\n            rows={rows}\n            className=\"w-full resize-y bg-surface-default px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n          />\n        ) : (\n          <div className=\"min-h-[theme(spacing.32)] bg-surface-default px-3 py-2\">\n            {value.trim() ? (\n              <Markdown className=\"text-sm text-text-primary\">{memoizedValue}</Markdown>\n            ) : (\n              <p className=\"text-sm text-text-muted italic\">Nothing to preview.</p>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -6,3 +6,5 @@
 export { CartDrawer } from './cart/CartDrawer';
 export { InstallAppModal } from './InstallAppModal';
 export type { AppInfo } from './InstallAppModal';
+export { MarkdownEditor } from './MarkdownEditor';
+export type { MarkdownEditorProps } from './MarkdownEditor';